@liner-fe/icon 0.0.4 → 0.0.5

package/assets/bulb/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface BulbProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Bulb = ({ fill = false, thick = false, size = 24 }: BulbProps) => {
+export const Bulb = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: BulbProps) => {
   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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" fill="currentColor"/>
-<path d="M18 39.5V42.5H30V39.5H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39.5V42.5H30V39.5H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" fill="currentColor"/>
-<path d="M18 39.5V42.5H30V39.5H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39.5V42.5H30V39.5H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM35 19C35 22.5022 33.3679 25.6208 30.8068 27.6419C29.2724 28.8527 27.7996 30.6858 27.2384 33H20.7616C20.2004 30.6858 18.7276 28.8527 17.1932 27.6419C14.6321 25.6208 13 22.5022 13 19C13 12.9249 17.9249 8 24 8C30.0751 8 35 12.9249 35 19Z" fill="currentColor"/>
-<path d="M18 39V43H30V39H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM35 19C35 22.5022 33.3679 25.6208 30.8068 27.6419C29.2724 28.8527 27.7996 30.6858 27.2384 33H20.7616C20.2004 30.6858 18.7276 28.8527 17.1932 27.6419C14.6321 25.6208 13 22.5022 13 19C13 12.9249 17.9249 8 24 8C30.0751 8 35 12.9249 35 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39V43H30V39H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" fill="currentColor"/>
-<path d="M18 39.5V42.5H30V39.5H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39.5V42.5H30V39.5H18Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/bulb-exclamtionmark/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface BulbExclamtionmarkProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const BulbExclamtionmark = ({ fill = false, thick = false, size = 24 }: BulbExclamtionmarkProps) => {
+export const BulbExclamtionmark = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: BulbExclamtionmarkProps) => {
   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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" fill="currentColor"/>
-<path d="M22.4998 12V22H25.4998V12H22.4998Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" fill="currentColor"/>
-<path d="M18 39.5V42.5H30V39.5H18Z" 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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4998 12V22H25.4998V12H22.4998Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39.5V42.5H30V39.5H18Z" 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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" fill="currentColor"/>
-<path d="M22.4998 12V22H25.4998V12H22.4998Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" fill="currentColor"/>
-<path d="M18 39.5V42.5H30V39.5H18Z" 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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4998 12V22H25.4998V12H22.4998Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39.5V42.5H30V39.5H18Z" 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 24C23.455 24 22.9669 24.1955 22.5807 24.5821C22.1946 24.9685 22 25.4562 22 26C22 26.5439 22.1946 27.0316 22.5807 27.418C22.9669 27.8045 23.455 28 24 28C24.545 28 25.0331 27.8045 25.4193 27.418C25.8054 27.0316 26 26.5439 26 26C26 25.4562 25.8054 24.9685 25.4193 24.5821C25.0331 24.1955 24.545 24 24 24Z" fill="currentColor"/>
-<path d="M21.9998 12V22H25.9998V12H21.9998Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM35 19C35 22.5022 33.3679 25.6208 30.8068 27.6419C29.2724 28.8527 27.7996 30.6858 27.2384 33H20.7616C20.2004 30.6858 18.7276 28.8527 17.1932 27.6419C14.6321 25.6208 13 22.5022 13 19C13 12.9249 17.9249 8 24 8C30.0751 8 35 12.9249 35 19Z" fill="currentColor"/>
-<path d="M18 39V43H30V39H18Z" 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 24C23.455 24 22.9669 24.1955 22.5807 24.5821C22.1946 24.9685 22 25.4562 22 26C22 26.5439 22.1946 27.0316 22.5807 27.418C22.9669 27.8045 23.455 28 24 28C24.545 28 25.0331 27.8045 25.4193 27.418C25.8054 27.0316 26 26.5439 26 26C26 25.4562 25.8054 24.9685 25.4193 24.5821C25.0331 24.1955 24.545 24 24 24Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.9998 12V22H25.9998V12H21.9998Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM35 19C35 22.5022 33.3679 25.6208 30.8068 27.6419C29.2724 28.8527 27.7996 30.6858 27.2384 33H20.7616C20.2004 30.6858 18.7276 28.8527 17.1932 27.6419C14.6321 25.6208 13 22.5022 13 19C13 12.9249 17.9249 8 24 8C30.0751 8 35 12.9249 35 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39V43H30V39H18Z" 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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" fill="currentColor"/>
-<path d="M22.4998 12V22H25.4998V12H22.4998Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" fill="currentColor"/>
-<path d="M18 39.5V42.5H30V39.5H18Z" 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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4998 12V22H25.4998V12H22.4998Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 39.5V42.5H30V39.5H18Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/camera/index.tsx

@@ -1,34 +1,35 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CameraProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Camera = ({ fill = false, thick = false, size = 24 }: CameraProps) => {
+export const Camera = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CameraProps) => {
   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="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM30 26C30 29.3137 27.3137 32 24 32C20.6863 32 18 29.3137 18 26C18 22.6863 20.6863 20 24 20C27.3137 20 30 22.6863 30 26Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM15.7809 15L18.7809 9.5H29.2191L32.2191 15H41V38H7V15H15.7809Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM30 26C30 29.3137 27.3137 32 24 32C20.6863 32 18 29.3137 18 26C18 22.6863 20.6863 20 24 20C27.3137 20 30 22.6863 30 26Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM15.7809 15L18.7809 9.5H29.2191L32.2191 15H41V38H7V15H15.7809Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.1875 8H29.8125C29.9955 8 30.1643 8.10011 30.252 8.26074L32.6836 12.7188L33.1094 13.5H42C42.2761 13.5 42.5 13.7239 42.5 14V39C42.5 39.2761 42.2761 39.5 42 39.5H6C5.72386 39.5 5.5 39.2761 5.5 39V14C5.5 13.7239 5.72386 13.5 6 13.5H14.8906L15.3164 12.7188L17.748 8.26074C17.8357 8.10011 18.0045 8 18.1875 8ZM24 15.5C18.201 15.5 13.5 20.201 13.5 26C13.5 31.799 18.201 36.5 24 36.5C29.799 36.5 34.5 31.799 34.5 26C34.5 20.201 29.799 15.5 24 15.5ZM24 21.5C26.4853 21.5 28.5 23.5147 28.5 26C28.5 28.4853 26.4853 30.5 24 30.5C21.5147 30.5 19.5 28.4853 19.5 26C19.5 23.5147 21.5147 21.5 24 21.5Z" 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="M18.1875 8H29.8125C29.9955 8 30.1643 8.10011 30.252 8.26074L32.6836 12.7188L33.1094 13.5H42C42.2761 13.5 42.5 13.7239 42.5 14V39C42.5 39.2761 42.2761 39.5 42 39.5H6C5.72386 39.5 5.5 39.2761 5.5 39V14C5.5 13.7239 5.72386 13.5 6 13.5H14.8906L15.3164 12.7188L17.748 8.26074C17.8357 8.10011 18.0045 8 18.1875 8ZM24 15.5C18.201 15.5 13.5 20.201 13.5 26C13.5 31.799 18.201 36.5 24 36.5C29.799 36.5 34.5 31.799 34.5 26C34.5 20.201 29.799 15.5 24 15.5ZM24 21.5C26.4853 21.5 28.5 23.5147 28.5 26C28.5 28.4853 26.4853 30.5 24 30.5C21.5147 30.5 19.5 28.4853 19.5 26C19.5 23.5147 21.5147 21.5 24 21.5Z" 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 fillRule="evenodd" clipRule="evenodd" d="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM29 26C29 28.7614 26.7614 31 24 31C21.2386 31 19 28.7614 19 26C19 23.2386 21.2386 21 24 21C26.7614 21 29 23.2386 29 26Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM16.3745 16L19.3745 10.5H28.6255L31.6255 16H40V37H8V16H16.3745Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM29 26C29 28.7614 26.7614 31 24 31C21.2386 31 19 28.7614 19 26C19 23.2386 21.2386 21 24 21C26.7614 21 29 23.2386 29 26Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM16.3745 16L19.3745 10.5H28.6255L31.6255 16H40V37H8V16H16.3745Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM30 26C30 29.3137 27.3137 32 24 32C20.6863 32 18 29.3137 18 26C18 22.6863 20.6863 20 24 20C27.3137 20 30 22.6863 30 26Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM15.7809 15L18.7809 9.5H29.2191L32.2191 15H41V38H7V15H15.7809Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM30 26C30 29.3137 27.3137 32 24 32C20.6863 32 18 29.3137 18 26C18 22.6863 20.6863 20 24 20C27.3137 20 30 22.6863 30 26Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM15.7809 15L18.7809 9.5H29.2191L32.2191 15H41V38H7V15H15.7809Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/car/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CarProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Car = ({ fill = false, thick = false, size = 24 }: CarProps) => {
+export const Car = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CarProps) => {
   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="M28.6327 11.5772C27.7268 10.5731 26.4378 10 25.0854 10H12.4579C10.8333 10 9.32003 10.8255 8.4406 12.1915L3.76191 19.4587C3.7493 19.4783 3.73748 19.498 3.72643 19.5179C3.24158 20.1586 2.95398 20.9569 2.95398 21.8223V31.6604C2.95398 33.7714 4.66527 35.4827 6.77626 35.4827H8.00466C8.74422 37.7937 10.9099 39.4668 13.4663 39.4668C16.0228 39.4668 18.1884 37.7937 18.928 35.4827H29.0277C29.7673 37.7937 31.933 39.4668 34.4894 39.4668C37.0458 39.4668 39.2115 37.7937 39.9511 35.4827H41.1768C43.2877 35.4827 44.999 33.7714 44.999 31.6604V27.4198C44.999 24.77 43.4349 22.37 41.0106 21.3002L35.0204 18.6567L28.6327 11.5772ZM34.4894 28C31.7525 28 29.4635 29.9177 28.8928 32.4827H19.0629C18.4922 29.9177 16.2032 28 13.4663 28C10.7294 28 8.44043 29.9177 7.86973 32.4827H6.77626C6.32213 32.4827 5.95398 32.1145 5.95398 31.6604V21.8223C5.95398 21.3681 6.32213 21 6.77626 21H32.8997L39.7994 24.0448C41.1364 24.6348 41.999 25.9584 41.999 27.4198V31.6604C41.999 32.1145 41.6309 32.4827 41.1768 32.4827H40.086C39.5153 29.9177 37.2263 28 34.4894 28ZM30.3872 18L26.4054 13.5869C26.0683 13.2133 25.5886 13 25.0854 13H20.7001V18H30.3872ZM17.7001 18V13H12.4579C11.8534 13 11.2903 13.3072 10.963 13.8155L8.26899 18H17.7001ZM16.1997 33.7334C16.1997 35.243 14.976 36.4668 13.4663 36.4668C11.9567 36.4668 10.7329 35.243 10.7329 33.7334C10.7329 32.2238 11.9567 31 13.4663 31C14.976 31 16.1997 32.2238 16.1997 33.7334ZM34.4894 36.4668C35.999 36.4668 37.2228 35.243 37.2228 33.7334C37.2228 32.2238 35.999 31 34.4894 31C32.9798 31 31.756 32.2238 31.756 33.7334C31.756 35.243 32.9798 36.4668 34.4894 36.4668Z" 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="M28.6327 11.5772C27.7268 10.5731 26.4378 10 25.0854 10H12.4579C10.8333 10 9.32003 10.8255 8.4406 12.1915L3.76191 19.4587C3.7493 19.4783 3.73748 19.498 3.72643 19.5179C3.24158 20.1586 2.95398 20.9569 2.95398 21.8223V31.6604C2.95398 33.7714 4.66527 35.4827 6.77626 35.4827H8.00466C8.74422 37.7937 10.9099 39.4668 13.4663 39.4668C16.0228 39.4668 18.1884 37.7937 18.928 35.4827H29.0277C29.7673 37.7937 31.933 39.4668 34.4894 39.4668C37.0458 39.4668 39.2115 37.7937 39.9511 35.4827H41.1768C43.2877 35.4827 44.999 33.7714 44.999 31.6604V27.4198C44.999 24.77 43.4349 22.37 41.0106 21.3002L35.0204 18.6567L28.6327 11.5772ZM34.4894 28C31.7525 28 29.4635 29.9177 28.8928 32.4827H19.0629C18.4922 29.9177 16.2032 28 13.4663 28C10.7294 28 8.44043 29.9177 7.86973 32.4827H6.77626C6.32213 32.4827 5.95398 32.1145 5.95398 31.6604V21.8223C5.95398 21.3681 6.32213 21 6.77626 21H32.8997L39.7994 24.0448C41.1364 24.6348 41.999 25.9584 41.999 27.4198V31.6604C41.999 32.1145 41.6309 32.4827 41.1768 32.4827H40.086C39.5153 29.9177 37.2263 28 34.4894 28ZM30.3872 18L26.4054 13.5869C26.0683 13.2133 25.5886 13 25.0854 13H20.7001V18H30.3872ZM17.7001 18V13H12.4579C11.8534 13 11.2903 13.3072 10.963 13.8155L8.26899 18H17.7001ZM16.1997 33.7334C16.1997 35.243 14.976 36.4668 13.4663 36.4668C11.9567 36.4668 10.7329 35.243 10.7329 33.7334C10.7329 32.2238 11.9567 31 13.4663 31C14.976 31 16.1997 32.2238 16.1997 33.7334ZM34.4894 36.4668C35.999 36.4668 37.2228 35.243 37.2228 33.7334C37.2228 32.2238 35.999 31 34.4894 31C32.9798 31 31.756 32.2238 31.756 33.7334C31.756 35.243 32.9798 36.4668 34.4894 36.4668Z" 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="M28.6327 11.5772C27.7268 10.5731 26.4378 10 25.0854 10H12.4579C10.8333 10 9.32003 10.8255 8.4406 12.1915L3.76191 19.4587C3.7493 19.4783 3.73748 19.498 3.72643 19.5179C3.24158 20.1586 2.95398 20.9569 2.95398 21.8223V31.6604C2.95398 33.7714 4.66527 35.4827 6.77626 35.4827H8.00466C8.74422 37.7937 10.9099 39.4668 13.4663 39.4668C16.0228 39.4668 18.1884 37.7937 18.928 35.4827H29.0277C29.7673 37.7937 31.933 39.4668 34.4894 39.4668C37.0458 39.4668 39.2115 37.7937 39.9511 35.4827H41.1768C43.2877 35.4827 44.999 33.7714 44.999 31.6604V27.4198C44.999 24.77 43.4349 22.37 41.0106 21.3002L35.0204 18.6567L28.6327 11.5772ZM34.4894 28C31.7525 28 29.4635 29.9177 28.8928 32.4827H19.0629C18.4922 29.9177 16.2032 28 13.4663 28C10.7294 28 8.44043 29.9177 7.86973 32.4827H6.77626C6.32213 32.4827 5.95398 32.1145 5.95398 31.6604V21.8223C5.95398 21.3681 6.32213 21 6.77626 21H32.8997L39.7994 24.0448C41.1364 24.6348 41.999 25.9584 41.999 27.4198V31.6604C41.999 32.1145 41.6309 32.4827 41.1768 32.4827H40.086C39.5153 29.9177 37.2263 28 34.4894 28ZM30.3872 18L26.4054 13.5869C26.0683 13.2133 25.5886 13 25.0854 13H20.7001V18H30.3872ZM17.7001 18V13H12.4579C11.8534 13 11.2903 13.3072 10.963 13.8155L8.26899 18H17.7001ZM16.1997 33.7334C16.1997 35.243 14.976 36.4668 13.4663 36.4668C11.9567 36.4668 10.7329 35.243 10.7329 33.7334C10.7329 32.2238 11.9567 31 13.4663 31C14.976 31 16.1997 32.2238 16.1997 33.7334ZM34.4894 36.4668C35.999 36.4668 37.2228 35.243 37.2228 33.7334C37.2228 32.2238 35.999 31 34.4894 31C32.9798 31 31.756 32.2238 31.756 33.7334C31.756 35.243 32.9798 36.4668 34.4894 36.4668Z" 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="M28.6327 11.5772C27.7268 10.5731 26.4378 10 25.0854 10H12.4579C10.8333 10 9.32003 10.8255 8.4406 12.1915L3.76191 19.4587C3.7493 19.4783 3.73748 19.498 3.72643 19.5179C3.24158 20.1586 2.95398 20.9569 2.95398 21.8223V31.6604C2.95398 33.7714 4.66527 35.4827 6.77626 35.4827H8.00466C8.74422 37.7937 10.9099 39.4668 13.4663 39.4668C16.0228 39.4668 18.1884 37.7937 18.928 35.4827H29.0277C29.7673 37.7937 31.933 39.4668 34.4894 39.4668C37.0458 39.4668 39.2115 37.7937 39.9511 35.4827H41.1768C43.2877 35.4827 44.999 33.7714 44.999 31.6604V27.4198C44.999 24.77 43.4349 22.37 41.0106 21.3002L35.0204 18.6567L28.6327 11.5772ZM34.4894 28C31.7525 28 29.4635 29.9177 28.8928 32.4827H19.0629C18.4922 29.9177 16.2032 28 13.4663 28C10.7294 28 8.44043 29.9177 7.86973 32.4827H6.77626C6.32213 32.4827 5.95398 32.1145 5.95398 31.6604V21.8223C5.95398 21.3681 6.32213 21 6.77626 21H32.8997L39.7994 24.0448C41.1364 24.6348 41.999 25.9584 41.999 27.4198V31.6604C41.999 32.1145 41.6309 32.4827 41.1768 32.4827H40.086C39.5153 29.9177 37.2263 28 34.4894 28ZM30.3872 18L26.4054 13.5869C26.0683 13.2133 25.5886 13 25.0854 13H20.7001V18H30.3872ZM17.7001 18V13H12.4579C11.8534 13 11.2903 13.3072 10.963 13.8155L8.26899 18H17.7001ZM16.1997 33.7334C16.1997 35.243 14.976 36.4668 13.4663 36.4668C11.9567 36.4668 10.7329 35.243 10.7329 33.7334C10.7329 32.2238 11.9567 31 13.4663 31C14.976 31 16.1997 32.2238 16.1997 33.7334ZM34.4894 36.4668C35.999 36.4668 37.2228 35.243 37.2228 33.7334C37.2228 32.2238 35.999 31 34.4894 31C32.9798 31 31.756 32.2238 31.756 33.7334C31.756 35.243 32.9798 36.4668 34.4894 36.4668Z" 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="M5.59734 17.0585C4.50438 18.6457 2.95398 20.1774 2.95398 22.1045V31.6602C2.95398 33.7712 4.66527 35.4825 6.77626 35.4825H8.49967C9.49094 37.1965 11.344 38.3496 13.4663 38.3496C15.5887 38.3496 17.4417 37.1965 18.433 35.4825H29.5227C30.514 37.1965 32.367 38.3496 34.4894 38.3496C36.6118 38.3496 38.4648 37.1965 39.4561 35.4825H41.1768C43.2877 35.4825 44.999 33.7712 44.999 31.6602V27.5194C44.999 24.819 43.3754 22.3835 40.8827 21.3449L33.597 18.3092L28.6387 12.5807C27.7312 11.5322 26.4129 10.9297 25.0261 10.9297H12.3704C10.794 10.9297 9.31899 11.7073 8.42828 13.0079C7.50081 14.3623 6.53222 15.7008 5.59734 17.0585ZM34.4894 26.8828C31.7111 26.8828 29.3943 28.859 28.8681 31.4825H19.0877C18.5614 28.859 16.2447 26.8828 13.4663 26.8828C10.688 26.8828 8.37121 28.859 7.84499 31.4825H6.95398V22.3958H32.9523C32.9693 22.3958 32.9863 22.3956 33.0032 22.3951L39.3443 25.0373C40.3463 25.4548 40.999 26.4339 40.999 27.5194V31.4825H40.1107C39.5845 28.859 37.2677 26.8828 34.4894 26.8828ZM25.6143 15.1985L28.2834 18.2822H21.2001V14.9297H25.0261C25.2519 14.9297 25.4665 15.0278 25.6143 15.1985ZM17.2001 14.9297V18.2822H9.66443L11.7286 15.268C11.8736 15.0563 12.1137 14.9297 12.3704 14.9297H17.2001ZM15.1997 32.6162C15.1997 33.5736 14.4237 34.3496 13.4663 34.3496C12.509 34.3496 11.7329 33.5736 11.7329 32.6162C11.7329 31.6589 12.509 30.8828 13.4663 30.8828C14.4237 30.8828 15.1997 31.6589 15.1997 32.6162ZM34.4894 34.3496C35.4467 34.3496 36.2228 33.5736 36.2228 32.6162C36.2228 31.6589 35.4467 30.8828 34.4894 30.8828C33.5321 30.8828 32.756 31.6589 32.756 32.6162C32.756 33.5736 33.5321 34.3496 34.4894 34.3496Z" 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="M5.59734 17.0585C4.50438 18.6457 2.95398 20.1774 2.95398 22.1045V31.6602C2.95398 33.7712 4.66527 35.4825 6.77626 35.4825H8.49967C9.49094 37.1965 11.344 38.3496 13.4663 38.3496C15.5887 38.3496 17.4417 37.1965 18.433 35.4825H29.5227C30.514 37.1965 32.367 38.3496 34.4894 38.3496C36.6118 38.3496 38.4648 37.1965 39.4561 35.4825H41.1768C43.2877 35.4825 44.999 33.7712 44.999 31.6602V27.5194C44.999 24.819 43.3754 22.3835 40.8827 21.3449L33.597 18.3092L28.6387 12.5807C27.7312 11.5322 26.4129 10.9297 25.0261 10.9297H12.3704C10.794 10.9297 9.31899 11.7073 8.42828 13.0079C7.50081 14.3623 6.53222 15.7008 5.59734 17.0585ZM34.4894 26.8828C31.7111 26.8828 29.3943 28.859 28.8681 31.4825H19.0877C18.5614 28.859 16.2447 26.8828 13.4663 26.8828C10.688 26.8828 8.37121 28.859 7.84499 31.4825H6.95398V22.3958H32.9523C32.9693 22.3958 32.9863 22.3956 33.0032 22.3951L39.3443 25.0373C40.3463 25.4548 40.999 26.4339 40.999 27.5194V31.4825H40.1107C39.5845 28.859 37.2677 26.8828 34.4894 26.8828ZM25.6143 15.1985L28.2834 18.2822H21.2001V14.9297H25.0261C25.2519 14.9297 25.4665 15.0278 25.6143 15.1985ZM17.2001 14.9297V18.2822H9.66443L11.7286 15.268C11.8736 15.0563 12.1137 14.9297 12.3704 14.9297H17.2001ZM15.1997 32.6162C15.1997 33.5736 14.4237 34.3496 13.4663 34.3496C12.509 34.3496 11.7329 33.5736 11.7329 32.6162C11.7329 31.6589 12.509 30.8828 13.4663 30.8828C14.4237 30.8828 15.1997 31.6589 15.1997 32.6162ZM34.4894 34.3496C35.4467 34.3496 36.2228 33.5736 36.2228 32.6162C36.2228 31.6589 35.4467 30.8828 34.4894 30.8828C33.5321 30.8828 32.756 31.6589 32.756 32.6162C32.756 33.5736 33.5321 34.3496 34.4894 34.3496Z" 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="M28.6327 11.5772C27.7268 10.5731 26.4378 10 25.0854 10H12.4579C10.8333 10 9.32003 10.8255 8.4406 12.1915L3.76191 19.4587C3.7493 19.4783 3.73748 19.498 3.72643 19.5179C3.24158 20.1586 2.95398 20.9569 2.95398 21.8223V31.6604C2.95398 33.7714 4.66527 35.4827 6.77626 35.4827H8.00466C8.74422 37.7937 10.9099 39.4668 13.4663 39.4668C16.0228 39.4668 18.1884 37.7937 18.928 35.4827H29.0277C29.7673 37.7937 31.933 39.4668 34.4894 39.4668C37.0458 39.4668 39.2115 37.7937 39.9511 35.4827H41.1768C43.2877 35.4827 44.999 33.7714 44.999 31.6604V27.4198C44.999 24.77 43.4349 22.37 41.0106 21.3002L35.0204 18.6567L28.6327 11.5772ZM34.4894 28C31.7525 28 29.4635 29.9177 28.8928 32.4827H19.0629C18.4922 29.9177 16.2032 28 13.4663 28C10.7294 28 8.44043 29.9177 7.86973 32.4827H6.77626C6.32213 32.4827 5.95398 32.1145 5.95398 31.6604V21.8223C5.95398 21.3681 6.32213 21 6.77626 21H32.8997L39.7994 24.0448C41.1364 24.6348 41.999 25.9584 41.999 27.4198V31.6604C41.999 32.1145 41.6309 32.4827 41.1768 32.4827H40.086C39.5153 29.9177 37.2263 28 34.4894 28ZM30.3872 18L26.4054 13.5869C26.0683 13.2133 25.5886 13 25.0854 13H20.7001V18H30.3872ZM17.7001 18V13H12.4579C11.8534 13 11.2903 13.3072 10.963 13.8155L8.26899 18H17.7001ZM16.1997 33.7334C16.1997 35.243 14.976 36.4668 13.4663 36.4668C11.9567 36.4668 10.7329 35.243 10.7329 33.7334C10.7329 32.2238 11.9567 31 13.4663 31C14.976 31 16.1997 32.2238 16.1997 33.7334ZM34.4894 36.4668C35.999 36.4668 37.2228 35.243 37.2228 33.7334C37.2228 32.2238 35.999 31 34.4894 31C32.9798 31 31.756 32.2238 31.756 33.7334C31.756 35.243 32.9798 36.4668 34.4894 36.4668Z" 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="M28.6327 11.5772C27.7268 10.5731 26.4378 10 25.0854 10H12.4579C10.8333 10 9.32003 10.8255 8.4406 12.1915L3.76191 19.4587C3.7493 19.4783 3.73748 19.498 3.72643 19.5179C3.24158 20.1586 2.95398 20.9569 2.95398 21.8223V31.6604C2.95398 33.7714 4.66527 35.4827 6.77626 35.4827H8.00466C8.74422 37.7937 10.9099 39.4668 13.4663 39.4668C16.0228 39.4668 18.1884 37.7937 18.928 35.4827H29.0277C29.7673 37.7937 31.933 39.4668 34.4894 39.4668C37.0458 39.4668 39.2115 37.7937 39.9511 35.4827H41.1768C43.2877 35.4827 44.999 33.7714 44.999 31.6604V27.4198C44.999 24.77 43.4349 22.37 41.0106 21.3002L35.0204 18.6567L28.6327 11.5772ZM34.4894 28C31.7525 28 29.4635 29.9177 28.8928 32.4827H19.0629C18.4922 29.9177 16.2032 28 13.4663 28C10.7294 28 8.44043 29.9177 7.86973 32.4827H6.77626C6.32213 32.4827 5.95398 32.1145 5.95398 31.6604V21.8223C5.95398 21.3681 6.32213 21 6.77626 21H32.8997L39.7994 24.0448C41.1364 24.6348 41.999 25.9584 41.999 27.4198V31.6604C41.999 32.1145 41.6309 32.4827 41.1768 32.4827H40.086C39.5153 29.9177 37.2263 28 34.4894 28ZM30.3872 18L26.4054 13.5869C26.0683 13.2133 25.5886 13 25.0854 13H20.7001V18H30.3872ZM17.7001 18V13H12.4579C11.8534 13 11.2903 13.3072 10.963 13.8155L8.26899 18H17.7001ZM16.1997 33.7334C16.1997 35.243 14.976 36.4668 13.4663 36.4668C11.9567 36.4668 10.7329 35.243 10.7329 33.7334C10.7329 32.2238 11.9567 31 13.4663 31C14.976 31 16.1997 32.2238 16.1997 33.7334ZM34.4894 36.4668C35.999 36.4668 37.2228 35.243 37.2228 33.7334C37.2228 32.2238 35.999 31 34.4894 31C32.9798 31 31.756 32.2238 31.756 33.7334C31.756 35.243 32.9798 36.4668 34.4894 36.4668Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/casual-shoe/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CasualShoeProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const CasualShoe = ({ fill = false, thick = false, size = 24 }: CasualShoeProps) => {
+export const CasualShoe = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CasualShoeProps) => {
   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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M3.00371 27.8771C3.07351 22.8737 4.12607 17.931 6.10343 13.3306L6.24262 13.0068C6.50498 12.3964 7.10556 12.0008 7.76994 12.0008H8.75587C9.34322 12.0008 9.90088 12.259 10.2809 12.7069L12.1619 14.9237C12.8935 15.786 14.194 15.8707 15.0313 15.1105L19.5825 10.9783C20.2244 10.3955 21.1686 10.2926 21.9209 10.7235L35.3546 18.4175C35.4514 18.473 35.5526 18.5202 35.6572 18.5587L40.4199 20.3134C43.1718 21.3273 45 23.9491 45 26.8818V31C45 33.2091 43.2091 35 41 35H5C3.89543 35 3 34.1046 3 33V28C3 27.9587 3.00125 27.9177 3.00371 27.8771ZM7 30.0008V31H41V30.0008H7ZM40.8677 26C40.5973 25.1211 39.9309 24.3961 39.0371 24.0668L35.657 22.8215L35.2525 26H40.8677ZM31.2202 26L31.8538 21.0221L30.4817 20.2362L27.4788 24.7272L24.1569 22.5095L27.0075 18.2464L25.7951 17.552L22.972 21.7741L19.6501 19.5564L22.3208 15.5622L21.1947 14.9172L17.7201 18.072C15.2083 20.3525 11.3068 20.0985 9.11183 17.5116L8.87775 17.2358C8.61591 17.9928 8.38097 18.7583 8.17325 19.5306L8.29832 19.5883C10.9966 20.8337 12.9416 23.2088 13.6768 26H31.2202ZM9.43542 26H7.08503C7.14149 25.2012 7.22594 24.4052 7.33811 23.6137C8.2542 24.2045 8.97593 25.0353 9.43542 26Z" 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="M3.00371 27.8771C3.07351 22.8737 4.12607 17.931 6.10343 13.3306L6.24262 13.0068C6.50498 12.3964 7.10556 12.0008 7.76994 12.0008H8.75587C9.34322 12.0008 9.90088 12.259 10.2809 12.7069L12.1619 14.9237C12.8935 15.786 14.194 15.8707 15.0313 15.1105L19.5825 10.9783C20.2244 10.3955 21.1686 10.2926 21.9209 10.7235L35.3546 18.4175C35.4514 18.473 35.5526 18.5202 35.6572 18.5587L40.4199 20.3134C43.1718 21.3273 45 23.9491 45 26.8818V31C45 33.2091 43.2091 35 41 35H5C3.89543 35 3 34.1046 3 33V28C3 27.9587 3.00125 27.9177 3.00371 27.8771ZM7 30.0008V31H41V30.0008H7ZM40.8677 26C40.5973 25.1211 39.9309 24.3961 39.0371 24.0668L35.657 22.8215L35.2525 26H40.8677ZM31.2202 26L31.8538 21.0221L30.4817 20.2362L27.4788 24.7272L24.1569 22.5095L27.0075 18.2464L25.7951 17.552L22.972 21.7741L19.6501 19.5564L22.3208 15.5622L21.1947 14.9172L17.7201 18.072C15.2083 20.3525 11.3068 20.0985 9.11183 17.5116L8.87775 17.2358C8.61591 17.9928 8.38097 18.7583 8.17325 19.5306L8.29832 19.5883C10.9966 20.8337 12.9416 23.2088 13.6768 26H31.2202ZM9.43542 26H7.08503C7.14149 25.2012 7.22594 24.4052 7.33811 23.6137C8.2542 24.2045 8.97593 25.0353 9.43542 26Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/chart-bar/index.tsx

@@ -1,40 +1,41 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ChartBarProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ChartBar = ({ fill = false, thick = false, size = 24 }: ChartBarProps) => {
+export const ChartBar = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ChartBarProps) => {
   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="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" fill="currentColor"/>
-<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.5Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM22.374 21.3371C21.2694 21.3371 20.374 22.2325 20.374 23.3371V34.3215C20.374 35.4261 21.2695 36.3215 22.3741 36.3215L25.3669 36.3214C26.4714 36.3214 27.3668 35.4259 27.3668 34.3214V23.337C27.3668 22.2324 26.4714 21.3369 25.3668 21.337L22.374 21.3371ZM10 30.0802C10 28.9757 10.8954 28.0802 11.9999 28.0802L14.9928 28.0801C16.0974 28.0801 16.9928 28.9755 16.9928 30.0801L16.9928 34.3212C16.9928 35.4258 16.0974 36.3212 14.9929 36.3212L12.0001 36.3213C10.8955 36.3213 10 35.4259 10 34.3213L10 30.0802ZM32.7479 12.0001C31.6433 12.0002 30.7479 12.8956 30.7479 14.0001L30.7479 34.3213C30.7479 35.4259 31.6434 36.3213 32.748 36.3213L35.7408 36.3212C36.8454 36.3212 37.7407 35.4258 37.7407 34.3212L37.7407 14.0001C37.7407 12.8955 36.8453 12 35.7407 12.0001L32.7479 12.0001Z" 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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM22.374 21.3371C21.2694 21.3371 20.374 22.2325 20.374 23.3371V34.3215C20.374 35.4261 21.2695 36.3215 22.3741 36.3215L25.3669 36.3214C26.4714 36.3214 27.3668 35.4259 27.3668 34.3214V23.337C27.3668 22.2324 26.4714 21.3369 25.3668 21.337L22.374 21.3371ZM10 30.0802C10 28.9757 10.8954 28.0802 11.9999 28.0802L14.9928 28.0801C16.0974 28.0801 16.9928 28.9755 16.9928 30.0801L16.9928 34.3212C16.9928 35.4258 16.0974 36.3212 14.9929 36.3212L12.0001 36.3213C10.8955 36.3213 10 35.4259 10 34.3213L10 30.0802ZM32.7479 12.0001C31.6433 12.0002 30.7479 12.8956 30.7479 14.0001L30.7479 34.3213C30.7479 35.4259 31.6434 36.3213 32.748 36.3213L35.7408 36.3212C36.8454 36.3212 37.7407 35.4258 37.7407 34.3212L37.7407 14.0001C37.7407 12.8955 36.8453 12 35.7407 12.0001L32.7479 12.0001Z" 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="M32 8C32 6.89543 32.8954 6 34 6H40C41.1046 6 42 6.89543 42 8V36C42 37.1046 41.1046 38 40 38H34C32.8954 38 32 37.1046 32 36V8ZM36 34V10H38V34H36Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M21 17.5859C19.8954 17.5859 19 18.4814 19 19.5859V35.9997C19 37.1043 19.8954 37.9997 21 37.9997H27C28.1046 37.9997 29 37.1043 29 35.9997V19.5859C29 18.4814 28.1046 17.5859 27 17.5859H21ZM23 21.5859V33.9997H25V21.5859H23Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM10 34V30.4141H12V34H10Z" fill="currentColor"/>
-<path d="M6 44H42.5V40H6V44Z" 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="M32 8C32 6.89543 32.8954 6 34 6H40C41.1046 6 42 6.89543 42 8V36C42 37.1046 41.1046 38 40 38H34C32.8954 38 32 37.1046 32 36V8ZM36 34V10H38V34H36Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M21 17.5859C19.8954 17.5859 19 18.4814 19 19.5859V35.9997C19 37.1043 19.8954 37.9997 21 37.9997H27C28.1046 37.9997 29 37.1043 29 35.9997V19.5859C29 18.4814 28.1046 17.5859 27 17.5859H21ZM23 21.5859V33.9997H25V21.5859H23Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM10 34V30.4141H12V34H10Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6 44H42.5V40H6V44Z" 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="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" fill="currentColor"/>
-<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.5Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/chart-line-uptrend/index.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ChartLineUptrendProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ChartLineUptrend = ({ fill = false, thick = false, size = 24 }: ChartLineUptrendProps) => {
+export const ChartLineUptrend = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ChartLineUptrendProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_699_11960)">
-<path fillRule="evenodd" clipRule="evenodd" d="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.815 25.6003L37.6207 12.8276L33.9793 11.1724L28.1735 23.945L22.5903 18.3619C20.5435 16.3151 17.0676 17.0527 16.0285 19.7544L10.1333 35.082L13.8667 36.5179L19.7619 21.1903L25.3451 26.7735C27.3199 28.7483 30.6593 28.1428 31.815 25.6003Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.815 25.6003L37.6207 12.8276L33.9793 11.1724L28.1735 23.945L22.5903 18.3619C20.5435 16.3151 17.0676 17.0527 16.0285 19.7544L10.1333 35.082L13.8667 36.5179L19.7619 21.1903L25.3451 26.7735C27.3199 28.7483 30.6593 28.1428 31.815 25.6003Z" style={{ fill: `var(--${color})` }}/>
 </g>
 <defs>
 <clipPath id="clip0_699_11960">
@@ -20,21 +21,21 @@ export const ChartLineUptrend = ({ fill = false, thick = false, size = 24 }: Cha
 </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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.3598 25.3934L37.1655 12.6207L34.4344 11.3793L28.6287 24.152C28.4842 24.4698 28.0668 24.5455 27.8199 24.2986L22.2368 18.7155C20.4458 16.9245 17.4044 17.5699 16.4952 19.9339L10.6 35.2615L13.4 36.3384L19.2952 21.0108C19.4251 20.6731 19.8596 20.5809 20.1155 20.8368L25.6986 26.4199C27.4266 28.1479 30.3486 27.618 31.3598 25.3934Z" 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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.3598 25.3934L37.1655 12.6207L34.4344 11.3793L28.6287 24.152C28.4842 24.4698 28.0668 24.5455 27.8199 24.2986L22.2368 18.7155C20.4458 16.9245 17.4044 17.5699 16.4952 19.9339L10.6 35.2615L13.4 36.3384L19.2952 21.0108C19.4251 20.6731 19.8596 20.5809 20.1155 20.8368L25.6986 26.4199C27.4266 28.1479 30.3486 27.618 31.3598 25.3934Z" 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="M5 6V39C5 41.2091 6.79086 43 9 43H42V39H9V6H5Z" fill="currentColor"/>
-<path d="M35.2173 23.7995L41.0231 11.0268L37.3816 9.37158L31.5758 22.1443L25.9927 16.5611C23.9459 14.5143 20.47 15.2519 19.4309 17.9536L13.5356 33.2812L17.269 34.7171L23.1643 19.3895L28.7474 24.9727C30.7222 26.9475 34.0616 26.342 35.2173 23.7995Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 6V39C5 41.2091 6.79086 43 9 43H42V39H9V6H5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M35.2173 23.7995L41.0231 11.0268L37.3816 9.37158L31.5758 22.1443L25.9927 16.5611C23.9459 14.5143 20.47 15.2519 19.4309 17.9536L13.5356 33.2812L17.269 34.7171L23.1643 19.3895L28.7474 24.9727C30.7222 26.9475 34.0616 26.342 35.2173 23.7995Z" 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="M5.5 6V39C5.5 40.933 7.067 42.5 9 42.5H42V39.5H9C8.72386 39.5 8.5 39.2761 8.5 39V6H5.5Z" fill="currentColor"/>
-<path d="M34.7621 23.5926L40.5679 10.8199L37.8368 9.57851L32.031 22.3512C31.8866 22.669 31.4691 22.7447 31.2223 22.4978L25.6391 16.9147C23.8482 15.1237 20.8068 15.7692 19.8976 18.1331L14.0023 33.4608L16.8024 34.5377L22.6976 19.2101C22.8275 18.8724 23.262 18.7802 23.5178 19.036L29.101 24.6192C30.8289 26.3471 33.7509 25.8173 34.7621 23.5926Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 6V39C5.5 40.933 7.067 42.5 9 42.5H42V39.5H9C8.72386 39.5 8.5 39.2761 8.5 39V6H5.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34.7621 23.5926L40.5679 10.8199L37.8368 9.57851L32.031 22.3512C31.8866 22.669 31.4691 22.7447 31.2223 22.4978L25.6391 16.9147C23.8482 15.1237 20.8068 15.7692 19.8976 18.1331L14.0023 33.4608L16.8024 34.5377L22.6976 19.2101C22.8275 18.8724 23.262 18.7802 23.5178 19.036L29.101 24.6192C30.8289 26.3471 33.7509 25.8173 34.7621 23.5926Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/check-mark/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CheckMarkProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const CheckMark = ({ fill = false, thick = false, size = 24 }: CheckMarkProps) => {
+export const CheckMark = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CheckMarkProps) => {
   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 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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="M9.76652 19.9382L20.3117 30.4834L37.9307 12.9258L40.7542 15.7592L23.1352 33.3167C21.5723 34.8742 19.0435 34.872 17.4833 33.3118L6.9381 22.7666L9.76652 19.9382Z" 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="M9.76652 19.9382L20.3117 30.4834L37.9307 12.9258L40.7542 15.7592L23.1352 33.3167C21.5723 34.8742 19.0435 34.872 17.4833 33.3118L6.9381 22.7666L9.76652 19.9382Z" 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="M9.41298 20.2918L19.9582 30.837C20.1532 31.032 20.4693 31.0323 20.6647 30.8376L38.2836 13.28L40.4013 15.4051L22.7823 32.9626C21.4147 34.3254 19.202 34.3234 17.8369 32.9583L7.29166 22.4131L9.41298 20.2918Z" 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="M9.41298 20.2918L19.9582 30.837C20.1532 31.032 20.4693 31.0323 20.6647 30.8376L38.2836 13.28L40.4013 15.4051L22.7823 32.9626C21.4147 34.3254 19.202 34.3234 17.8369 32.9583L7.29166 22.4131L9.41298 20.2918Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/check-mark-fill/index.tsx

@@ -1,34 +1,35 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CheckMarkFillProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const CheckMarkFill = ({ fill = false, thick = false, size = 24 }: CheckMarkFillProps) => {
+export const CheckMarkFill = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CheckMarkFillProps) => {
   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 fillRule="evenodd" clipRule="evenodd" d="M16.4292 21.3327L22.6155 27.519L33.2959 16.8758L36.1194 19.7092L25.439 30.3524C23.8761 31.9098 21.3472 31.9076 19.7871 30.3474L13.6008 24.1611L16.4292 21.3327Z" 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">
-<circle cx="24" cy="24" r="20" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0756 21.6863L22.2619 27.8726C22.457 28.0676 22.7731 28.0679 22.9684 27.8732L33.6489 17.23L35.7665 19.355L25.086 29.9982C23.7185 31.361 21.5058 31.3591 20.1406 29.9939L13.9543 23.8076L16.0756 21.6863Z" 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">
-<circle cx="24" cy="24" r="20" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0756 21.6863L22.2619 27.8726C22.457 28.0676 22.7731 28.0679 22.9684 27.8732L33.6489 17.23L35.7665 19.355L25.086 29.9982C23.7185 31.361 21.5058 31.3591 20.1406 29.9939L13.9543 23.8076L16.0756 21.6863Z" fill="white"/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="24" cy="24" r="20" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0756 21.6863L22.2619 27.8726C22.457 28.0676 22.7731 28.0679 22.9684 27.8732L33.6489 17.23L35.7665 19.355L25.086 29.9982C23.7185 31.361 21.5058 31.3591 20.1406 29.9939L13.9543 23.8076L16.0756 21.6863Z" fill="white"/>
 </svg>
 ;