@liner-fe/icon 0.0.4 → 0.0.5

package/assets/paperclip/index.tsx

@@ -1,26 +1,27 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PaperclipProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Paperclip = ({ fill = false, thick = false, size = 24 }: PaperclipProps) => {
+export const Paperclip = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PaperclipProps) => {
   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="M12.6238 23.9682C9.03258 27.5595 9.03258 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4433 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5025 39.0945C5.73969 34.3317 5.73969 26.6097 10.5025 21.8469L24.3682 7.98122C27.7386 4.61077 33.2032 4.61077 36.5737 7.98122C39.9441 11.3517 39.9441 16.8162 36.5737 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6269 33.79C13.599 31.7622 13.599 28.4744 15.6269 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6045 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2535 7.90366 28.6884 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.6238 23.9682C9.03258 27.5595 9.03258 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4433 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5025 39.0945C5.73969 34.3317 5.73969 26.6097 10.5025 21.8469L24.3682 7.98122C27.7386 4.61077 33.2032 4.61077 36.5737 7.98122C39.9441 11.3517 39.9441 16.8162 36.5737 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6269 33.79C13.599 31.7622 13.599 28.4744 15.6269 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6045 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2535 7.90366 28.6884 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.6238 23.9682C9.03258 27.5595 9.03258 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4433 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5025 39.0945C5.73969 34.3317 5.73969 26.6097 10.5025 21.8469L24.3682 7.98122C27.7386 4.61077 33.2032 4.61077 36.5737 7.98122C39.9441 11.3517 39.9441 16.8162 36.5737 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6269 33.79C13.599 31.7622 13.599 28.4744 15.6269 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6045 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2535 7.90366 28.6884 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.6238 23.9682C9.03258 27.5595 9.03258 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4433 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5025 39.0945C5.73969 34.3317 5.73969 26.6097 10.5025 21.8469L24.3682 7.98122C27.7386 4.61077 33.2032 4.61077 36.5737 7.98122C39.9441 11.3517 39.9441 16.8162 36.5737 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6269 33.79C13.599 31.7622 13.599 28.4744 15.6269 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6045 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2535 7.90366 28.6884 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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">
+    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_12490)">
-<path fillRule="evenodd" clipRule="evenodd" d="M12.9774 24.3218C9.58144 27.7177 9.58144 33.2237 12.9774 36.6196C16.3733 40.0156 21.8792 40.0156 25.2752 36.6196L38.9684 22.9264L41.7969 25.7548L28.1036 39.448C23.1456 44.4061 15.107 44.4061 10.149 39.448C5.19092 34.49 5.19092 26.4514 10.149 21.4934L24.0147 7.62766C27.5804 4.06195 33.3615 4.06196 36.9273 7.62767C40.493 11.1934 40.493 16.9745 36.9273 20.5402L23.3239 34.1436C21.1008 36.3667 17.4965 36.3667 15.2734 34.1436C13.0502 31.9205 13.0502 28.3161 15.2734 26.093L28.7042 12.6621L31.5326 15.4906L18.1018 28.9214C17.4408 29.5824 17.4408 30.6541 18.1018 31.3151C18.7628 31.9761 19.8345 31.9761 20.4955 31.3151L34.0988 17.7118C36.1024 15.7082 36.1024 12.4597 34.0988 10.4561C32.0952 8.45248 28.8467 8.45248 26.8431 10.4561L12.9774 24.3218Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M12.9774 24.3218C9.58144 27.7177 9.58144 33.2237 12.9774 36.6196C16.3733 40.0156 21.8792 40.0156 25.2752 36.6196L38.9684 22.9264L41.7969 25.7548L28.1036 39.448C23.1456 44.4061 15.107 44.4061 10.149 39.448C5.19092 34.49 5.19092 26.4514 10.149 21.4934L24.0147 7.62766C27.5804 4.06195 33.3615 4.06196 36.9273 7.62767C40.493 11.1934 40.493 16.9745 36.9273 20.5402L23.3239 34.1436C21.1008 36.3667 17.4965 36.3667 15.2734 34.1436C13.0502 31.9205 13.0502 28.3161 15.2734 26.093L28.7042 12.6621L31.5326 15.4906L18.1018 28.9214C17.4408 29.5824 17.4408 30.6541 18.1018 31.3151C18.7628 31.9761 19.8345 31.9761 20.4955 31.3151L34.0988 17.7118C36.1024 15.7082 36.1024 12.4597 34.0988 10.4561C32.0952 8.45248 28.8467 8.45248 26.8431 10.4561L12.9774 24.3218Z" style={{ fill: `var(--${color})` }}/>
 </g>
 <defs>
 <clipPath id="clip0_699_12490">
@@ -31,8 +32,8 @@ export const Paperclip = ({ fill = false, thick = false, size = 24 }: PaperclipP
 ;
   } 
   
-  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="M12.6238 23.9682C9.03258 27.5595 9.03258 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4433 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5025 39.0945C5.73969 34.3317 5.73969 26.6097 10.5025 21.8469L24.3682 7.98122C27.7386 4.61077 33.2032 4.61077 36.5737 7.98122C39.9441 11.3517 39.9441 16.8162 36.5737 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6269 33.79C13.599 31.7622 13.599 28.4744 15.6269 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6045 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2535 7.90366 28.6884 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.6238 23.9682C9.03258 27.5595 9.03258 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4433 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5025 39.0945C5.73969 34.3317 5.73969 26.6097 10.5025 21.8469L24.3682 7.98122C27.7386 4.61077 33.2032 4.61077 36.5737 7.98122C39.9441 11.3517 39.9441 16.8162 36.5737 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6269 33.79C13.599 31.7622 13.599 28.4744 15.6269 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6045 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2535 7.90366 28.6884 7.90366 26.4895 10.1025L12.6238 23.9682Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/paragraph/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ParagraphProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Paragraph = ({ fill = false, thick = false, size = 24 }: ParagraphProps) => {
+export const Paragraph = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ParagraphProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M39 7.5H9V10.5H39V7.5Z" fill="currentColor"/>
-<path d="M39 17.5H9V20.5H39V17.5Z" fill="currentColor"/>
-<path d="M9 27.5H39V30.5H9V27.5Z" fill="currentColor"/>
-<path d="M27 37.5H9V40.5H27V37.5Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M27 37.5H9V40.5H27V37.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M39 7.5H9V10.5H39V7.5Z" fill="currentColor"/>
-<path d="M39 17.5H9V20.5H39V17.5Z" fill="currentColor"/>
-<path d="M9 27.5H39V30.5H9V27.5Z" fill="currentColor"/>
-<path d="M27 37.5H9V40.5H27V37.5Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M27 37.5H9V40.5H27V37.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M39 7H9V11H39V7Z" fill="currentColor"/>
-<path d="M39 17H9V21H39V17Z" fill="currentColor"/>
-<path d="M9 27H39V31H9V27Z" fill="currentColor"/>
-<path d="M27 37H9V41H27V37Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 7H9V11H39V7Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 17H9V21H39V17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 27H39V31H9V27Z" style={{ fill: `var(--${color})` }}/>
+<path d="M27 37H9V41H27V37Z" 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="M39 7.5H9V10.5H39V7.5Z" fill="currentColor"/>
-<path d="M39 17.5H9V20.5H39V17.5Z" fill="currentColor"/>
-<path d="M9 27.5H39V30.5H9V27.5Z" fill="currentColor"/>
-<path d="M27 37.5H9V40.5H27V37.5Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M27 37.5H9V40.5H27V37.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/paraphrase/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ParaphraseProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Paraphrase = ({ fill = false, thick = false, size = 24 }: ParaphraseProps) => {
+export const Paraphrase = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ParaphraseProps) => {
   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="M31 6.5H7V9.5H31V6.5Z" fill="currentColor"/>
-<path d="M31 15.5H7V18.5H31V15.5Z" fill="currentColor"/>
-<path d="M7 24.5H21V27.5H7V24.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.6086 18.123C40.369 16.8834 38.3592 16.8837 37.12 18.1237L21.3592 33.8838C21.0062 34.2367 20.7414 34.6679 20.5864 35.1423L19.1837 39.435C18.3845 41.8809 20.6754 44.2111 23.1344 43.4535L27.5043 42.1074C27.9985 41.9551 28.4481 41.6844 28.8138 41.3188L44.5661 25.5671C45.8048 24.3277 45.8045 22.3189 44.5654 21.0799L41.6086 18.123ZM23.4803 36.0054L34.9998 24.4883L38.2018 27.6905L26.6927 39.1972C26.6727 39.2172 26.6481 39.232 26.6211 39.2403L22.2512 40.5865C22.2038 40.6011 22.1759 40.5972 22.1573 40.5921C22.1332 40.5855 22.1036 40.5699 22.0765 40.5423C22.0493 40.5147 22.0343 40.4849 22.0281 40.4607C22.0233 40.442 22.0199 40.414 22.0353 40.3669L23.438 36.0742C23.4465 36.0482 23.461 36.0247 23.4803 36.0054ZM42.4442 23.4464L40.3229 25.569L37.1209 22.3667L39.242 20.2444C39.3097 20.1766 39.4195 20.1766 39.4873 20.2443L42.4441 23.2012C42.5118 23.2689 42.5119 23.3787 42.4442 23.4464Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.6086 18.123C40.369 16.8834 38.3592 16.8837 37.12 18.1237L21.3592 33.8838C21.0062 34.2367 20.7414 34.6679 20.5864 35.1423L19.1837 39.435C18.3845 41.8809 20.6754 44.2111 23.1344 43.4535L27.5043 42.1074C27.9985 41.9551 28.4481 41.6844 28.8138 41.3188L44.5661 25.5671C45.8048 24.3277 45.8045 22.3189 44.5654 21.0799L41.6086 18.123ZM23.4803 36.0054L34.9998 24.4883L38.2018 27.6905L26.6927 39.1972C26.6727 39.2172 26.6481 39.232 26.6211 39.2403L22.2512 40.5865C22.2038 40.6011 22.1759 40.5972 22.1573 40.5921C22.1332 40.5855 22.1036 40.5699 22.0765 40.5423C22.0493 40.5147 22.0343 40.4849 22.0281 40.4607C22.0233 40.442 22.0199 40.414 22.0353 40.3669L23.438 36.0742C23.4465 36.0482 23.461 36.0247 23.4803 36.0054ZM42.4442 23.4464L40.3229 25.569L37.1209 22.3667L39.242 20.2444C39.3097 20.1766 39.4195 20.1766 39.4873 20.2443L42.4441 23.2012C42.5118 23.2689 42.5119 23.3787 42.4442 23.4464Z" 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="M31 6.5H7V9.5H31V6.5Z" fill="currentColor"/>
-<path d="M31 15.5H7V18.5H31V15.5Z" fill="currentColor"/>
-<path d="M7 24.5H21V27.5H7V24.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.6086 18.123C40.369 16.8834 38.3592 16.8837 37.12 18.1237L21.3592 33.8838C21.0062 34.2367 20.7414 34.6679 20.5864 35.1423L19.1837 39.435C18.3845 41.8809 20.6754 44.2111 23.1344 43.4535L27.5043 42.1074C27.9985 41.9551 28.4481 41.6844 28.8138 41.3188L44.5661 25.5671C45.8048 24.3277 45.8045 22.3189 44.5654 21.0799L41.6086 18.123ZM23.4803 36.0054L34.9998 24.4883L38.2018 27.6905L26.6927 39.1972C26.6727 39.2172 26.6481 39.232 26.6211 39.2403L22.2512 40.5865C22.2038 40.6011 22.1759 40.5972 22.1573 40.5921C22.1332 40.5855 22.1036 40.5699 22.0765 40.5423C22.0493 40.5147 22.0343 40.4849 22.0281 40.4607C22.0233 40.442 22.0199 40.414 22.0353 40.3669L23.438 36.0742C23.4465 36.0482 23.461 36.0247 23.4803 36.0054ZM42.4442 23.4464L40.3229 25.569L37.1209 22.3667L39.242 20.2444C39.3097 20.1766 39.4195 20.1766 39.4873 20.2443L42.4441 23.2012C42.5118 23.2689 42.5119 23.3787 42.4442 23.4464Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.6086 18.123C40.369 16.8834 38.3592 16.8837 37.12 18.1237L21.3592 33.8838C21.0062 34.2367 20.7414 34.6679 20.5864 35.1423L19.1837 39.435C18.3845 41.8809 20.6754 44.2111 23.1344 43.4535L27.5043 42.1074C27.9985 41.9551 28.4481 41.6844 28.8138 41.3188L44.5661 25.5671C45.8048 24.3277 45.8045 22.3189 44.5654 21.0799L41.6086 18.123ZM23.4803 36.0054L34.9998 24.4883L38.2018 27.6905L26.6927 39.1972C26.6727 39.2172 26.6481 39.232 26.6211 39.2403L22.2512 40.5865C22.2038 40.6011 22.1759 40.5972 22.1573 40.5921C22.1332 40.5855 22.1036 40.5699 22.0765 40.5423C22.0493 40.5147 22.0343 40.4849 22.0281 40.4607C22.0233 40.442 22.0199 40.414 22.0353 40.3669L23.438 36.0742C23.4465 36.0482 23.461 36.0247 23.4803 36.0054ZM42.4442 23.4464L40.3229 25.569L37.1209 22.3667L39.242 20.2444C39.3097 20.1766 39.4195 20.1766 39.4873 20.2443L42.4441 23.2012C42.5118 23.2689 42.5119 23.3787 42.4442 23.4464Z" 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="M31 6H7V10H31V6Z" fill="currentColor"/>
-<path d="M31 15H7V19H31V15Z" fill="currentColor"/>
-<path d="M7 24H21V28H7V24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.9621 17.7695C40.5273 16.3346 38.2007 16.3349 36.7663 17.7703L21.0057 33.5302C20.5971 33.9387 20.2906 34.4378 20.1111 34.987L18.7084 39.2797C17.7833 42.1109 20.4351 44.8083 23.2816 43.9314L27.6515 42.5852C28.2236 42.409 28.744 42.0956 29.1673 41.6724L44.9198 25.9205C46.3536 24.4858 46.3532 22.1606 44.919 20.7263L41.9621 17.7695ZM23.889 36.3037L34.9998 25.1954L37.4947 27.6905L26.3965 38.7863L22.7063 39.9231L23.889 36.3037ZM41.8597 23.3239L40.3228 24.8618L37.8279 22.3666L39.3647 20.8289L41.8597 23.3239Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 6H7V10H31V6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 15H7V19H31V15Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 24H21V28H7V24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.9621 17.7695C40.5273 16.3346 38.2007 16.3349 36.7663 17.7703L21.0057 33.5302C20.5971 33.9387 20.2906 34.4378 20.1111 34.987L18.7084 39.2797C17.7833 42.1109 20.4351 44.8083 23.2816 43.9314L27.6515 42.5852C28.2236 42.409 28.744 42.0956 29.1673 41.6724L44.9198 25.9205C46.3536 24.4858 46.3532 22.1606 44.919 20.7263L41.9621 17.7695ZM23.889 36.3037L34.9998 25.1954L37.4947 27.6905L26.3965 38.7863L22.7063 39.9231L23.889 36.3037ZM41.8597 23.3239L40.3228 24.8618L37.8279 22.3666L39.3647 20.8289L41.8597 23.3239Z" 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="M31 6.5H7V9.5H31V6.5Z" fill="currentColor"/>
-<path d="M31 15.5H7V18.5H31V15.5Z" fill="currentColor"/>
-<path d="M7 24.5H21V27.5H7V24.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.6086 18.123C40.369 16.8834 38.3592 16.8837 37.12 18.1237L21.3592 33.8838C21.0062 34.2367 20.7414 34.6679 20.5864 35.1423L19.1837 39.435C18.3845 41.8809 20.6754 44.2111 23.1344 43.4535L27.5043 42.1074C27.9985 41.9551 28.4481 41.6844 28.8138 41.3188L44.5661 25.5671C45.8048 24.3277 45.8045 22.3189 44.5654 21.0799L41.6086 18.123ZM23.4803 36.0054L34.9998 24.4883L38.2018 27.6905L26.6927 39.1972C26.6727 39.2172 26.6481 39.232 26.6211 39.2403L22.2512 40.5865C22.2038 40.6011 22.1759 40.5972 22.1573 40.5921C22.1332 40.5855 22.1036 40.5699 22.0765 40.5423C22.0493 40.5147 22.0343 40.4849 22.0281 40.4607C22.0233 40.442 22.0199 40.414 22.0353 40.3669L23.438 36.0742C23.4465 36.0482 23.461 36.0247 23.4803 36.0054ZM42.4442 23.4464L40.3229 25.569L37.1209 22.3667L39.242 20.2444C39.3097 20.1766 39.4195 20.1766 39.4873 20.2443L42.4441 23.2012C42.5118 23.2689 42.5119 23.3787 42.4442 23.4464Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.6086 18.123C40.369 16.8834 38.3592 16.8837 37.12 18.1237L21.3592 33.8838C21.0062 34.2367 20.7414 34.6679 20.5864 35.1423L19.1837 39.435C18.3845 41.8809 20.6754 44.2111 23.1344 43.4535L27.5043 42.1074C27.9985 41.9551 28.4481 41.6844 28.8138 41.3188L44.5661 25.5671C45.8048 24.3277 45.8045 22.3189 44.5654 21.0799L41.6086 18.123ZM23.4803 36.0054L34.9998 24.4883L38.2018 27.6905L26.6927 39.1972C26.6727 39.2172 26.6481 39.232 26.6211 39.2403L22.2512 40.5865C22.2038 40.6011 22.1759 40.5972 22.1573 40.5921C22.1332 40.5855 22.1036 40.5699 22.0765 40.5423C22.0493 40.5147 22.0343 40.4849 22.0281 40.4607C22.0233 40.442 22.0199 40.414 22.0353 40.3669L23.438 36.0742C23.4465 36.0482 23.461 36.0247 23.4803 36.0054ZM42.4442 23.4464L40.3229 25.569L37.1209 22.3667L39.242 20.2444C39.3097 20.1766 39.4195 20.1766 39.4873 20.2443L42.4441 23.2012C42.5118 23.2689 42.5119 23.3787 42.4442 23.4464Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/pencil/index.tsx

@@ -1,32 +1,33 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PencilProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Pencil = ({ fill = false, thick = false, size = 24 }: PencilProps) => {
+export const Pencil = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PencilProps) => {
   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.7618 7.19479C33.1285 5.82716 35.3452 5.82679 36.7124 7.19395L40.9531 11.4347C42.3197 12.8012 42.32 15.0167 40.954 16.3836L19.8398 37.4969C19.4365 37.9001 18.9407 38.1987 18.3956 38.3666L12.1301 40.2968C9.41803 41.1322 6.89136 38.5623 7.77283 35.8647L9.78531 29.7061C9.9563 29.1829 10.2483 28.7073 10.6376 28.3181L31.7618 7.19479ZM28.7485 14.4532L12.7587 30.4396C12.7031 30.4952 12.6614 30.5632 12.6369 30.6379L10.6244 36.7966C10.4985 37.1819 10.8595 37.5491 11.2469 37.4297L17.5124 35.4996C17.5903 35.4756 17.6611 35.433 17.7188 35.3753L33.6962 19.4013L28.7485 14.4532ZM35.8173 17.2798L38.8319 14.263C39.0271 14.0677 39.027 13.7513 38.8318 13.556L34.591 9.31527C34.3957 9.11996 34.0791 9.12001 33.8838 9.31539L30.8696 12.3317L35.8173 17.2798Z" 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.7618 7.19479C33.1285 5.82716 35.3452 5.82679 36.7124 7.19395L40.9531 11.4347C42.3197 12.8012 42.32 15.0167 40.954 16.3836L19.8398 37.4969C19.4365 37.9001 18.9407 38.1987 18.3956 38.3666L12.1301 40.2968C9.41803 41.1322 6.89136 38.5623 7.77283 35.8647L9.78531 29.7061C9.9563 29.1829 10.2483 28.7073 10.6376 28.3181L31.7618 7.19479ZM28.7485 14.4532L12.7587 30.4396C12.7031 30.4952 12.6614 30.5632 12.6369 30.6379L10.6244 36.7966C10.4985 37.1819 10.8595 37.5491 11.2469 37.4297L17.5124 35.4996C17.5903 35.4756 17.6611 35.433 17.7188 35.3753L33.6962 19.4013L28.7485 14.4532ZM35.8173 17.2798L38.8319 14.263C39.0271 14.0677 39.027 13.7513 38.8318 13.556L34.591 9.31527C34.3957 9.11996 34.0791 9.12001 33.8838 9.31539L30.8696 12.3317L35.8173 17.2798Z" 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="M31.7618 7.19491C33.1285 5.82728 35.3452 5.82691 36.7124 7.19407L40.9531 11.4348C42.3197 12.8014 42.32 15.0168 40.954 16.3838L37.9379 19.3997L28.747 10.2096L31.7618 7.19491Z" fill="currentColor"/>
-<path d="M26.6257 12.3308L10.6376 28.3182C10.2483 28.7074 9.9563 29.183 9.78531 29.7062L7.77283 35.8649C6.89136 38.5624 9.41803 41.1324 12.1301 40.2969L18.3956 38.3668C18.9407 38.1988 19.4365 37.9003 19.8398 37.497L35.8166 21.5209L26.6257 12.3308Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.7618 7.19491C33.1285 5.82728 35.3452 5.82691 36.7124 7.19407L40.9531 11.4348C42.3197 12.8014 42.32 15.0168 40.954 16.3838L37.9379 19.3997L28.747 10.2096L31.7618 7.19491Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26.6257 12.3308L10.6376 28.3182C10.2483 28.7074 9.9563 29.183 9.78531 29.7062L7.77283 35.8649C6.89136 38.5624 9.41803 41.1324 12.1301 40.2969L18.3956 38.3668C18.9407 38.1988 19.4365 37.9003 19.8398 37.497L35.8166 21.5209L26.6257 12.3308Z" 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.4081 6.84136C32.9701 5.27835 35.5035 5.27792 37.0659 6.8404L41.3067 11.0812C42.8684 12.6429 42.8689 15.1748 41.3077 16.7371L20.1934 37.8505C19.7324 38.3113 19.1658 38.6526 18.5428 38.8445L12.2773 40.7746C9.1778 41.7294 6.29017 38.7923 7.29757 35.7094L9.31005 29.5508C9.50546 28.9528 9.83917 28.4093 10.2841 27.9645L31.4081 6.84136ZM28.7485 15.1603L13.1122 30.7932L11.0997 36.9519L17.3652 35.0218L32.9891 19.4013L28.7485 15.1603ZM35.8172 16.5725L38.4783 13.9096L34.2375 9.66882L31.5766 12.3316L35.8172 16.5725Z" 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.4081 6.84136C32.9701 5.27835 35.5035 5.27792 37.0659 6.8404L41.3067 11.0812C42.8684 12.6429 42.8689 15.1748 41.3077 16.7371L20.1934 37.8505C19.7324 38.3113 19.1658 38.6526 18.5428 38.8445L12.2773 40.7746C9.1778 41.7294 6.29017 38.7923 7.29757 35.7094L9.31005 29.5508C9.50546 28.9528 9.83917 28.4093 10.2841 27.9645L31.4081 6.84136ZM28.7485 15.1603L13.1122 30.7932L11.0997 36.9519L17.3652 35.0218L32.9891 19.4013L28.7485 15.1603ZM35.8172 16.5725L38.4783 13.9096L34.2375 9.66882L31.5766 12.3316L35.8172 16.5725Z" 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.7618 7.19479C33.1285 5.82716 35.3452 5.82679 36.7124 7.19395L40.9531 11.4347C42.3197 12.8012 42.32 15.0167 40.954 16.3836L19.8398 37.4969C19.4365 37.9001 18.9407 38.1987 18.3956 38.3666L12.1301 40.2968C9.41803 41.1322 6.89136 38.5623 7.77283 35.8647L9.78531 29.7061C9.9563 29.1829 10.2483 28.7073 10.6376 28.3181L31.7618 7.19479ZM28.7485 14.4532L12.7587 30.4396C12.7031 30.4952 12.6614 30.5632 12.6369 30.6379L10.6244 36.7966C10.4985 37.1819 10.8595 37.5491 11.2469 37.4297L17.5124 35.4996C17.5903 35.4756 17.6611 35.433 17.7188 35.3753L33.6962 19.4013L28.7485 14.4532ZM35.8173 17.2798L38.8319 14.263C39.0271 14.0677 39.027 13.7513 38.8318 13.556L34.591 9.31527C34.3957 9.11996 34.0791 9.12001 33.8838 9.31539L30.8696 12.3317L35.8173 17.2798Z" 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.7618 7.19479C33.1285 5.82716 35.3452 5.82679 36.7124 7.19395L40.9531 11.4347C42.3197 12.8012 42.32 15.0167 40.954 16.3836L19.8398 37.4969C19.4365 37.9001 18.9407 38.1987 18.3956 38.3666L12.1301 40.2968C9.41803 41.1322 6.89136 38.5623 7.77283 35.8647L9.78531 29.7061C9.9563 29.1829 10.2483 28.7073 10.6376 28.3181L31.7618 7.19479ZM28.7485 14.4532L12.7587 30.4396C12.7031 30.4952 12.6614 30.5632 12.6369 30.6379L10.6244 36.7966C10.4985 37.1819 10.8595 37.5491 11.2469 37.4297L17.5124 35.4996C17.5903 35.4756 17.6611 35.433 17.7188 35.3753L33.6962 19.4013L28.7485 14.4532ZM35.8173 17.2798L38.8319 14.263C39.0271 14.0677 39.027 13.7513 38.8318 13.556L34.591 9.31527C34.3957 9.11996 34.0791 9.12001 33.8838 9.31539L30.8696 12.3317L35.8173 17.2798Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/person/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PersonProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Person = ({ fill = false, thick = false, size = 24 }: PersonProps) => {
+export const Person = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PersonProps) => {
   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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" 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 20C28.1422 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1422 5 24 5C19.8579 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8579 20 24 20Z" fill="currentColor"/>
-<path d="M22 22C14.8203 22 9 27.8203 9 35V41C9 42.1046 9.89543 43 11 43H37C38.1046 43 39 42.1046 39 41V35C39 27.8203 33.1797 22 26 22H22Z" 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 20C28.1422 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1422 5 24 5C19.8579 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8579 20 24 20Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22 22C14.8203 22 9 27.8203 9 35V41C9 42.1046 9.89543 43 11 43H37C38.1046 43 39 42.1046 39 41V35C39 27.8203 33.1797 22 26 22H22Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 26H26C30.9706 26 35 30.0294 35 35V39H13V35C13 30.0294 17.0294 26 22 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="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 26H26C30.9706 26 35 30.0294 35 35V39H13V35C13 30.0294 17.0294 26 22 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="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/person-add/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PersonAddProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const PersonAdd = ({ fill = false, thick = false, size = 24 }: PersonAddProps) => {
+export const PersonAdd = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PersonAddProps) => {
   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 20C28.1421 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1421 5 24 5C19.8578 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8578 20 24 20Z" fill="currentColor"/>
-<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C27.9642 25.025 24 29.5495 24 35C24 38.1521 25.3258 40.9945 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" fill="currentColor"/>
-<path d="M32.9996 33V26.9999H36.9996V33H43V37H36.9996V43H32.9996V37H27.0004V33H32.9996Z" 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 20C28.1421 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1421 5 24 5C19.8578 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8578 20 24 20Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C27.9642 25.025 24 29.5495 24 35C24 38.1521 25.3258 40.9945 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${color})` }}/>
+<path d="M32.9996 33V26.9999H36.9996V33H43V37H36.9996V43H32.9996V37H27.0004V33H32.9996Z" 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 20C28.1421 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1421 5 24 5C19.8578 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8578 20 24 20Z" fill="currentColor"/>
-<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C27.9642 25.025 24 29.5495 24 35C24 38.1521 25.3258 40.9945 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" fill="currentColor"/>
-<path d="M33.4996 33.5V26.9999H36.4996V33.5H43V36.5H36.4996V43H33.4996V36.5H27.0004V33.5H33.4996Z" 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 20C28.1421 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1421 5 24 5C19.8578 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8578 20 24 20Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C27.9642 25.025 24 29.5495 24 35C24 38.1521 25.3258 40.9945 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.4996 33.5V26.9999H36.4996V33.5H43V36.5H36.4996V43H33.4996V36.5H27.0004V33.5H33.4996Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" fill="currentColor"/>
-<path d="M22 26C17.0294 26 13 30.0294 13 35V39H24.7499C25.3472 40.5294 26.2768 41.8923 27.4501 43H11C9.89543 43 9 42.1046 9 41V35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.3472 24.4574 29.6792 25.2092 28.2793 26.2911C27.5514 26.1011 26.7875 26 26 26H22Z" fill="currentColor"/>
-<path d="M32.9996 33V26.9999H36.9996V33H43V37H36.9996V43H32.9996V37H27.0004V33H32.9996Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22 26C17.0294 26 13 30.0294 13 35V39H24.7499C25.3472 40.5294 26.2768 41.8923 27.4501 43H11C9.89543 43 9 42.1046 9 41V35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.3472 24.4574 29.6792 25.2092 28.2793 26.2911C27.5514 26.1011 26.7875 26 26 26H22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M32.9996 33V26.9999H36.9996V33H43V37H36.9996V43H32.9996V37H27.0004V33H32.9996Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" fill="currentColor"/>
-<path d="M22 25C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22Z" fill="currentColor"/>
-<path d="M33.4996 33.5V26.9999H36.4996V33.5H43V36.5H36.4996V43H33.4996V36.5H27.0004V33.5H33.4996Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22 25C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.4996 33.5V26.9999H36.4996V33.5H43V36.5H36.4996V43H33.4996V36.5H27.0004V33.5H33.4996Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/person-fill/index.tsx

@@ -1,37 +1,38 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PersonFillProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const PersonFill = ({ fill = false, thick = false, size = 24 }: PersonFillProps) => {
+export const PersonFill = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PersonFillProps) => {
   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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" fill="white"/>
 </svg>

package/assets/photo/index.tsx

@@ -1,34 +1,35 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PhotoProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Photo = ({ fill = false, thick = false, size = 24 }: PhotoProps) => {
+export const Photo = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PhotoProps) => {
   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="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM8 39.1976V40H40V31.5142L32.5002 24.1926L21.6095 34.8246L17.0002 30.234L8 39.1976ZM40 27.3217L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L8 34.9636V8H40V27.3217Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM8 39.1976V40H40V31.5142L32.5002 24.1926L21.6095 34.8246L17.0002 30.234L8 39.1976ZM40 27.3217L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L8 34.9636V8H40V27.3217Z" 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="M7 5C5.89543 5 5 5.89543 5 7V40.9999C5 42.1045 5.89543 42.9999 7 42.9999H41C42.1046 42.9999 43 42.1045 43 40.9999V7C43 5.89543 42.1046 5 41 5H7ZM21.6095 34.5744L17.0002 29.9839L8 38.9475V39.9999H40V31.2641L32.5002 23.9424L21.6095 34.5744ZM19 22C21.2091 22 23 20.2091 23 18C23 15.7909 21.2091 14 19 14C16.7909 14 15 15.7909 15 18C15 20.2091 16.7909 22 19 22Z" 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="M7 5C5.89543 5 5 5.89543 5 7V40.9999C5 42.1045 5.89543 42.9999 7 42.9999H41C42.1046 42.9999 43 42.1045 43 40.9999V7C43 5.89543 42.1046 5 41 5H7ZM21.6095 34.5744L17.0002 29.9839L8 38.9475V39.9999H40V31.2641L32.5002 23.9424L21.6095 34.5744ZM19 22C21.2091 22 23 20.2091 23 18C23 15.7909 21.2091 14 19 14C16.7909 14 15 15.7909 15 18C15 20.2091 16.7909 22 19 22Z" 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="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM39 39V31.9355L32.5002 25.5901L21.6025 36.2289L17.0002 31.6454L9.61549 39H39ZM39 26.3454L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L9 33.9676V9H39V26.3454Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM39 39V31.9355L32.5002 25.5901L21.6025 36.2289L17.0002 31.6454L9.61549 39H39ZM39 26.3454L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L9 33.9676V9H39V26.3454Z" 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="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM8 39.1976V40H40V31.5142L32.5002 24.1926L21.6095 34.8246L17.0002 30.234L8 39.1976ZM40 27.3217L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L8 34.9636V8H40V27.3217Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM8 39.1976V40H40V31.5142L32.5002 24.1926L21.6095 34.8246L17.0002 30.234L8 39.1976ZM40 27.3217L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L8 34.9636V8H40V27.3217Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/play-button/index.tsx

@@ -1,34 +1,35 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PlayButtonProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const PlayButton = ({ fill = false, thick = false, size = 24 }: PlayButtonProps) => {
+export const PlayButton = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PlayButtonProps) => {
   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 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 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 44Z" fill="currentColor"/>
-<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.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="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 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 44Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.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="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 44ZM18.75 31.7272L33 23.5L18.75 15.2728L18.75 31.7272Z" 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 44ZM18.75 31.7272L33 23.5L18.75 15.2728L18.75 31.7272Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40ZM24 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 44Z" fill="currentColor"/>
-<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.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="M24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40ZM24 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 44Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 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 44Z" fill="currentColor"/>
-<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.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="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 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 44Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };