@liner-fe/icon 0.0.4 → 0.0.6

package/.gitignore

@@ -1,3 +1,4 @@
 lib
 src
-assets
+assets
+index.tsx

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @liner-fe/icon
 
+## 0.0.6
+
+### Patch Changes
+
+- 7dd4b4a: Update Icon
+
+## 0.0.5
+
+### Patch Changes
+
+- 1016802: fix: props
+
 ## 0.0.4
 
 ### Patch Changes

package/assets/add-clock/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface AddClockProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const AddClock = ({ fill = false, thick = false, size = 24 }: AddClockProps) => {
+export const AddClock = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: AddClockProps) => {
   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="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" fill="currentColor"/>
-<path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" fill="currentColor"/>
-<path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" 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="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" fill="currentColor"/>
-<path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" fill="currentColor"/>
-<path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M42 24C42 24.729 41.9567 25.4478 41.8724 26.1541C40.7398 25.288 39.4256 24.6472 37.9969 24.2987C37.999 24.1994 38 24.0998 38 24C38 16.268 31.732 10 24 10C16.268 10 10 16.268 10 24C10 31.732 16.268 38 24 38C24.5298 38 25.0527 37.9706 25.5672 37.9133C26.0427 39.2972 26.7993 40.5504 27.7687 41.6048C26.5534 41.8638 25.2926 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24Z" fill="currentColor"/>
-<path d="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" fill="currentColor"/>
-<path d="M33.749 42.4996V36.75H28.0004V32.75H33.749V27H37.749V32.75H43.5V36.75H37.749V42.4996H33.749Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42 24C42 24.729 41.9567 25.4478 41.8724 26.1541C40.7398 25.288 39.4256 24.6472 37.9969 24.2987C37.999 24.1994 38 24.0998 38 24C38 16.268 31.732 10 24 10C16.268 10 10 16.268 10 24C10 31.732 16.268 38 24 38C24.5298 38 25.0527 37.9706 25.5672 37.9133C26.0427 39.2972 26.7993 40.5504 27.7687 41.6048C26.5534 41.8638 25.2926 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.749 42.4996V36.75H28.0004V32.75H33.749V27H37.749V32.75H43.5V36.75H37.749V42.4996H33.749Z" 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="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" fill="currentColor"/>
-<path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" fill="currentColor"/>
-<path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/add-to-folder/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface AddToFolderProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const AddToFolder = ({ fill = false, thick = false, size = 24 }: AddToFolderProps) => {
+export const AddToFolder = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: AddToFolderProps) => {
   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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" fill="currentColor"/>
-<path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" fill="currentColor"/>
-<path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H8.5V37H39.5V14.5H22L18.999 10.5H8.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" fill="currentColor"/>
-<path d="M14 22.5H19.5V26.5H14V32.5H10V26.5H4.5V22.5H10V17H14V22.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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H8.5V37H39.5V14.5H22L18.999 10.5H8.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14 22.5H19.5V26.5H14V32.5H10V26.5H4.5V22.5H10V17H14V22.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 d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" fill="currentColor"/>
-<path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/ai/index.tsx

@@ -1,42 +1,43 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface AiProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Ai = ({ fill = false, thick = false, size = 24 }: AiProps) => {
+export const Ai = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: AiProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.077 2.99951C38.2995 2.38298 39.1714 2.38298 39.3939 2.99951L40.8326 6.98652C40.8629 7.07048 40.929 7.13659 41.013 7.16688L45 8.6056C45.6165 8.82807 45.6165 9.7 45 9.92248L41.013 11.3612C40.929 11.3915 40.8629 11.4576 40.8326 11.5416L39.3939 15.5286C39.1714 16.1451 38.2995 16.1451 38.077 15.5286L36.6383 11.5416C36.608 11.4576 36.5419 11.3915 36.4579 11.3612L32.4709 9.92248C31.8544 9.70001 31.8544 8.82807 32.4709 8.6056L36.4579 7.16688C36.5419 7.13659 36.608 7.07048 36.6383 6.98652L38.077 2.99951Z" fill="currentColor"/>
-<path d="M20.0378 26.4805H22.6067L21.3405 23.1475L20.0378 26.4805Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42.2158 16.5468L42.5 15.7592V38.9998C42.5 40.9328 40.933 42.4998 39 42.4998H9C7.067 42.4998 5.5 40.9328 5.5 38.9998V8.99976C5.5 7.06676 7.067 5.49976 9 5.49976H32.2395L31.4526 5.7837C28.1938 6.95965 28.1938 11.5684 31.4526 12.7444L34.2468 13.7527L35.2551 16.5468C36.4311 19.8057 41.0398 19.8057 42.2158 16.5468ZM24.9195 32.5702L23.9673 30.0312H18.6692L17.6959 32.5702H13.4248L19.7731 16.5994H22.9075L29.2781 32.5702H24.9195ZM29.9941 16.5994H33.9996V32.5702H29.9941V16.5994Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.077 2.99951C38.2995 2.38298 39.1714 2.38298 39.3939 2.99951L40.8326 6.98652C40.8629 7.07048 40.929 7.13659 41.013 7.16688L45 8.6056C45.6165 8.82807 45.6165 9.7 45 9.92248L41.013 11.3612C40.929 11.3915 40.8629 11.4576 40.8326 11.5416L39.3939 15.5286C39.1714 16.1451 38.2995 16.1451 38.077 15.5286L36.6383 11.5416C36.608 11.4576 36.5419 11.3915 36.4579 11.3612L32.4709 9.92248C31.8544 9.70001 31.8544 8.82807 32.4709 8.6056L36.4579 7.16688C36.5419 7.13659 36.608 7.07048 36.6383 6.98652L38.077 2.99951Z" style={{ fill: `var(--${color})` }}/>
+<path d="M20.0378 26.4805H22.6067L21.3405 23.1475L20.0378 26.4805Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42.2158 16.5468L42.5 15.7592V38.9998C42.5 40.9328 40.933 42.4998 39 42.4998H9C7.067 42.4998 5.5 40.9328 5.5 38.9998V8.99976C5.5 7.06676 7.067 5.49976 9 5.49976H32.2395L31.4526 5.7837C28.1938 6.95965 28.1938 11.5684 31.4526 12.7444L34.2468 13.7527L35.2551 16.5468C36.4311 19.8057 41.0398 19.8057 42.2158 16.5468ZM24.9195 32.5702L23.9673 30.0312H18.6692L17.6959 32.5702H13.4248L19.7731 16.5994H22.9075L29.2781 32.5702H24.9195ZM29.9941 16.5994H33.9996V32.5702H29.9941V16.5994Z" 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="M37.9703 4.30343C37.8114 3.86305 37.1886 3.86305 37.0297 4.30343L35.591 8.29044C35.5405 8.43037 35.4303 8.54055 35.2904 8.59105L31.3034 10.0298C30.863 10.1887 30.863 10.8115 31.3034 10.9704L35.2904 12.4091C35.4303 12.4596 35.5405 12.5698 35.591 12.7097L37.0297 16.6967C37.1886 17.1371 37.8114 17.1371 37.9703 16.6967L39.409 12.7097C39.4595 12.5698 39.5697 12.4596 39.7096 12.4091L43.6967 10.9704C44.137 10.8115 44.137 10.1887 43.6967 10.0298L39.7096 8.59105C39.5697 8.54055 39.4595 8.43037 39.409 8.29044L37.9703 4.30343Z" fill="currentColor"/>
-<path d="M23.1723 26.8812H19.4378L21.3315 22.0358L23.1723 26.8812Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.4418 14.4418L42.5 14.06V39C42.5 40.933 40.933 42.5 39 42.5H9C7.067 42.5 5.5 40.933 5.5 39V9C5.5 7.067 7.067 5.5 9 5.5H33.9401L33.5582 6.5583L30.4548 7.67818C27.8125 8.63165 27.8125 12.3685 30.4548 13.322L33.5582 14.4418L34.6781 17.5453C35.6316 20.1876 39.3684 20.1876 40.3219 17.5453L41.4418 14.4418ZM24.2303 29.6318L25.1824 32.1708H28.6736L22.6222 17H20.0303L14 32.1708H17.4066L18.3799 29.6318H24.2303ZM33.3218 17H30.1162V32.1708H33.3218V17Z" fill="currentColor"/>
-<path d="M41.5425 6.59465C41.4981 6.54771 41.4524 6.502 41.4054 6.45757L41.4418 6.5583L41.5425 6.59465Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.9703 4.30294C37.8114 3.86256 37.1886 3.86256 37.0297 4.30294L35.591 8.28995C35.5405 8.42988 35.4303 8.54006 35.2904 8.59056L31.3034 10.0293C30.863 10.1882 30.863 10.811 31.3034 10.9699L35.2904 12.4086C35.4303 12.4591 35.5405 12.5693 35.591 12.7092L37.0297 16.6962C37.1886 17.1366 37.8114 17.1366 37.9703 16.6962L39.409 12.7092C39.4595 12.5693 39.5697 12.4591 39.7096 12.4086L43.6967 10.9699C44.137 10.811 44.137 10.1882 43.6967 10.0293L39.7096 8.59056C39.5697 8.54006 39.4595 8.42988 39.409 8.28995L37.9703 4.30294Z" style={{ fill: `var(--${color})` }}/>
+<path d="M23.1723 26.8807H19.4378L21.3315 22.0353L23.1723 26.8807Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.4418 14.4414L42.5 14.0595V38.9995C42.5 40.9325 40.933 42.4995 39 42.4995H9C7.067 42.4995 5.5 40.9325 5.5 38.9995V8.99951C5.5 7.06651 7.067 5.49951 9 5.49951H33.9401L33.5582 6.55781L30.4548 7.67769C27.8125 8.63116 27.8125 12.368 30.4548 13.3215L33.5582 14.4414L34.6781 17.5448C35.6316 20.1871 39.3684 20.1871 40.3219 17.5448L41.4418 14.4414ZM24.2303 29.6313L25.1824 32.1704H28.6736L22.6222 16.9995H20.0303L14 32.1704H17.4066L18.3799 29.6313H24.2303ZM33.3218 16.9995H30.1162V32.1704H33.3218V16.9995Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41.5425 6.59416C41.4981 6.54722 41.4524 6.50151 41.4054 6.45709L41.4418 6.55781L41.5425 6.59416Z" 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.3854 3.4624C39.1629 2.84587 38.291 2.84587 38.0685 3.4624L36.6298 7.44941C36.5995 7.53337 36.5334 7.59948 36.4494 7.62977L32.4624 9.06849C31.8459 9.29096 31.8459 10.1629 32.4624 10.3854L36.4494 11.8241C36.5334 11.8544 36.5995 11.9205 36.6298 12.0044L38.0685 15.9915C38.291 16.608 39.1629 16.608 39.3854 15.9915L40.8241 12.0044C40.8544 11.9205 40.9205 11.8544 41.0044 11.8241L44.9915 10.3854C45.608 10.1629 45.608 9.29096 44.9915 9.06849L41.0044 7.62977C40.9205 7.59948 40.8544 7.53337 40.8241 7.44941L39.3854 3.4624Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M23.9678 30.0312L24.9199 32.5702H29.2785L22.908 16.5994H19.7735L13.4253 32.5702H17.6963L18.6696 30.0312H23.9678ZM22.6072 26.4805H20.0383L21.3409 23.1475L22.6072 26.4805Z" fill="currentColor"/>
-<path d="M34.0001 16.5994H29.9945V32.5702H34.0001V16.5994Z" fill="currentColor"/>
-<path d="M9 5C6.79086 5 5 6.79086 5 9V39C5 41.2091 6.79086 43 9 43H39C41.2091 43 43 41.2091 43 39V18.3333H39V39L9 39V9H29.6667V5H9Z" 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.3854 3.4624C39.1629 2.84587 38.291 2.84587 38.0685 3.4624L36.6298 7.44941C36.5995 7.53337 36.5334 7.59948 36.4494 7.62977L32.4624 9.06849C31.8459 9.29096 31.8459 10.1629 32.4624 10.3854L36.4494 11.8241C36.5334 11.8544 36.5995 11.9205 36.6298 12.0044L38.0685 15.9915C38.291 16.608 39.1629 16.608 39.3854 15.9915L40.8241 12.0044C40.8544 11.9205 40.9205 11.8544 41.0044 11.8241L44.9915 10.3854C45.608 10.1629 45.608 9.29096 44.9915 9.06849L41.0044 7.62977C40.9205 7.59948 40.8544 7.53337 40.8241 7.44941L39.3854 3.4624Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M23.9678 30.0312L24.9199 32.5702H29.2785L22.908 16.5994H19.7735L13.4253 32.5702H17.6963L18.6696 30.0312H23.9678ZM22.6072 26.4805H20.0383L21.3409 23.1475L22.6072 26.4805Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34.0001 16.5994H29.9945V32.5702H34.0001V16.5994Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 5C6.79086 5 5 6.79086 5 9V39C5 41.2091 6.79086 43 9 43H39C41.2091 43 43 41.2091 43 39V18.3333H39V39L9 39V9H29.6667V5H9Z" 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="M37.0297 4.30343C37.1886 3.86305 37.8114 3.86305 37.9703 4.30343L39.409 8.29044C39.4595 8.43037 39.5697 8.54055 39.7096 8.59104L43.6966 10.0298C44.137 10.1887 44.137 10.8115 43.6966 10.9704L39.7096 12.4091C39.5697 12.4596 39.4595 12.5698 39.409 12.7097L37.9703 16.6967C37.8114 17.1371 37.1886 17.1371 37.0297 16.6967L35.591 12.7097C35.5405 12.5698 35.4303 12.4596 35.2904 12.4091L31.3034 10.9704C30.863 10.8115 30.863 10.1887 31.3034 10.0298L35.2904 8.59105C35.4303 8.54055 35.5405 8.43037 35.591 8.29044L37.0297 4.30343Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24.2303 29.6319L25.1824 32.1709H28.6736L22.6222 17.0001H20.0303L14 32.1709H17.4066L18.3799 29.6319H24.2303ZM23.1723 26.8812H19.4378L21.3315 22.0359L23.1723 26.8812Z" fill="currentColor"/>
-<path d="M33.3218 17.0001H30.1162V32.1709H33.3218V17.0001Z" fill="currentColor"/>
-<path d="M8.5 9.00007C8.5 8.72393 8.72386 8.50007 9 8.50007H30V5.50007H9C7.067 5.50007 5.5 7.06708 5.5 9.00007V39.0001C5.5 40.9331 7.067 42.5001 9 42.5001H39C40.933 42.5001 42.5 40.9331 42.5 39.0001V18.0001H39.5V39.0001C39.5 39.2762 39.2761 39.5001 39 39.5001H9C8.72386 39.5001 8.5 39.2762 8.5 39.0001V9.00007Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.0297 4.30294C37.1886 3.86256 37.8114 3.86256 37.9703 4.30294L39.409 8.28995C39.4595 8.42988 39.5697 8.54006 39.7096 8.59056L43.6966 10.0293C44.137 10.1882 44.137 10.811 43.6966 10.9699L39.7096 12.4086C39.5697 12.4591 39.4595 12.5693 39.409 12.7092L37.9703 16.6962C37.8114 17.1366 37.1886 17.1366 37.0297 16.6962L35.591 12.7092C35.5405 12.5693 35.4303 12.4591 35.2904 12.4086L31.3034 10.9699C30.863 10.811 30.863 10.1882 31.3034 10.0293L35.2904 8.59056C35.4303 8.54006 35.5405 8.42988 35.591 8.28995L37.0297 4.30294Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24.2303 29.6314L25.1824 32.1704H28.6736L22.6222 16.9996H20.0303L14 32.1704H17.4066L18.3799 29.6314H24.2303ZM23.1723 26.8807H19.4378L21.3315 22.0354L23.1723 26.8807Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.3218 16.9996H30.1162V32.1704H33.3218V16.9996Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.5 8.99959C8.5 8.72344 8.72386 8.49959 9 8.49959H30V5.49959H9C7.067 5.49959 5.5 7.06659 5.5 8.99959V38.9996C5.5 40.9326 7.067 42.4996 9 42.4996H39C40.933 42.4996 42.5 40.9326 42.5 38.9996V17.9996H39.5V38.9996C39.5 39.2757 39.2761 39.4996 39 39.4996H9C8.72386 39.4996 8.5 39.2757 8.5 38.9996V8.99959Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/airplane/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface AirplaneProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Airplane = ({ fill = false, thick = false, size = 24 }: AirplaneProps) => {
+export const Airplane = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: AirplaneProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M15.2259 29.1971L11.6505 29.1748L9.82398 31.0072L13.8584 33.2268C14.6895 33.6841 15.3734 34.3684 15.8302 35.1998L18.0159 39.1776L19.8393 37.3483L19.8286 33.7849L26.7364 26.8675L30.8162 39.42L33.6986 36.5406L31.6161 21.9781L38.6703 14.9183L39.2588 10.8723C39.355 10.2106 38.7873 9.64272 38.1255 9.73877L34.0708 10.3273L26.9953 17.4086L12.4646 15.335L9.58685 18.2097L22.1342 22.2793L15.2259 29.1971ZM25.9337 14.2267L12.3939 12.2945C11.7712 12.2056 11.1429 12.4149 10.6979 12.8595L6.31077 17.242C5.25357 18.2981 5.68579 20.0983 7.10722 20.5594L16.5528 23.6229L13.9899 26.1894L11.2504 26.1722C10.7145 26.1689 10.1997 26.3807 9.82138 26.7603L6.76088 29.8307C5.82137 30.7733 6.0473 32.3534 7.21331 32.9949L12.4122 35.8553C12.7447 36.0382 13.0182 36.3119 13.201 36.6445L16.0293 41.7918C16.6717 42.9609 18.2569 43.1854 19.1986 42.2406L22.2571 39.1722C22.6322 38.7958 22.8422 38.2857 22.8406 37.7543L22.8323 35.0226L25.3975 32.4538L28.4671 41.8982C28.9286 43.318 30.7265 43.75 31.7827 42.695L36.1729 38.3093C36.6186 37.8641 36.8285 37.2349 36.7393 36.6112L34.7982 23.0379L41.0269 16.8041C41.3313 16.4994 41.5293 16.1046 41.5913 15.6784L42.2275 11.3042C42.6125 8.65736 40.3415 6.38569 37.6946 6.76988L33.311 7.40616C32.884 7.46814 32.4885 7.66655 32.1835 7.97178L25.9337 14.2267Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M15.226 29.1964L11.6505 29.1741L9.82404 31.0065L13.8584 33.2261C14.6895 33.6834 15.3734 34.3677 15.8303 35.199L18.016 39.1769L19.8394 37.3475L19.8286 33.7842L26.7364 26.8668L30.8162 39.4193L33.6987 36.5398L31.6162 21.9774L38.6703 14.9176L39.2588 10.8716C39.3551 10.2099 38.7873 9.64199 38.1256 9.73804L34.0709 10.3266L26.9954 17.4079L12.4647 15.3342L9.58691 18.209L22.1343 22.2785L15.226 29.1964ZM25.9337 14.226L12.394 12.2937C11.7712 12.2049 11.143 12.4142 10.6979 12.8587L6.31083 17.2412C5.25363 18.2973 5.68585 20.0976 7.10728 20.5586L16.5528 23.6221L13.9899 26.1886L11.2504 26.1715C10.7146 26.1682 10.1998 26.38 9.82144 26.7595L6.76094 29.83C5.82143 30.7726 6.04736 32.3527 7.21337 32.9942L12.4123 35.8546C12.7447 36.0375 13.0183 36.3112 13.201 36.6437L16.0294 41.7911C16.6718 42.9602 18.257 43.1847 19.1987 42.2399L22.2571 39.1715C22.6323 38.7951 22.8422 38.2849 22.8406 37.7535L22.8324 35.0218L25.3976 32.4531L28.4672 41.8975C28.9286 43.3172 30.7265 43.7493 31.7827 42.6942L36.1729 38.3086C36.6186 37.8634 36.8285 37.2341 36.7393 36.6105L34.7982 23.0371L41.0269 16.8034C41.3314 16.4987 41.5293 16.1039 41.5913 15.6776L42.2276 11.3034C42.6126 8.65663 40.3416 6.38495 37.6947 6.76915L33.3111 7.40542C32.8841 7.4674 32.4886 7.66582 32.1836 7.97104L25.9337 14.226Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M15.2259 29.1971L11.6505 29.1748L9.82398 31.0072L13.8584 33.2268C14.6895 33.6841 15.3734 34.3684 15.8302 35.1998L18.0159 39.1776L19.8393 37.3483L19.8286 33.7849L26.7364 26.8675L30.8162 39.42L33.6986 36.5406L31.6161 21.9781L38.6703 14.9183L39.2588 10.8723C39.355 10.2106 38.7873 9.64272 38.1255 9.73877L34.0708 10.3273L26.9953 17.4086L12.4646 15.335L9.58685 18.2097L22.1342 22.2793L15.2259 29.1971ZM25.9337 14.2267L12.3939 12.2945C11.7712 12.2056 11.1429 12.4149 10.6979 12.8595L6.31077 17.242C5.25357 18.2981 5.68579 20.0983 7.10722 20.5594L16.5528 23.6229L13.9899 26.1894L11.2504 26.1722C10.7145 26.1689 10.1997 26.3807 9.82138 26.7603L6.76088 29.8307C5.82137 30.7733 6.0473 32.3534 7.21331 32.9949L12.4122 35.8553C12.7447 36.0382 13.0182 36.3119 13.201 36.6445L16.0293 41.7918C16.6717 42.9609 18.2569 43.1854 19.1986 42.2406L22.2571 39.1722C22.6322 38.7958 22.8422 38.2857 22.8406 37.7543L22.8323 35.0226L25.3975 32.4538L28.4671 41.8982C28.9286 43.318 30.7265 43.75 31.7827 42.695L36.1729 38.3093C36.6186 37.8641 36.8285 37.2349 36.7393 36.6112L34.7982 23.0379L41.0269 16.8041C41.3313 16.4994 41.5293 16.1046 41.5913 15.6784L42.2275 11.3042C42.6125 8.65736 40.3415 6.38569 37.6946 6.76988L33.311 7.40616C32.884 7.46814 32.4885 7.66655 32.1835 7.97178L25.9337 14.2267Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M15.226 29.1964L11.6505 29.1741L9.82404 31.0065L13.8584 33.2261C14.6895 33.6834 15.3734 34.3677 15.8303 35.199L18.016 39.1769L19.8394 37.3475L19.8286 33.7842L26.7364 26.8668L30.8162 39.4193L33.6987 36.5398L31.6162 21.9774L38.6703 14.9176L39.2588 10.8716C39.3551 10.2099 38.7873 9.64199 38.1256 9.73804L34.0709 10.3266L26.9954 17.4079L12.4647 15.3342L9.58691 18.209L22.1343 22.2785L15.226 29.1964ZM25.9337 14.226L12.394 12.2937C11.7712 12.2049 11.143 12.4142 10.6979 12.8587L6.31083 17.2412C5.25363 18.2973 5.68585 20.0976 7.10728 20.5586L16.5528 23.6221L13.9899 26.1886L11.2504 26.1715C10.7146 26.1682 10.1998 26.38 9.82144 26.7595L6.76094 29.83C5.82143 30.7726 6.04736 32.3527 7.21337 32.9942L12.4123 35.8546C12.7447 36.0375 13.0183 36.3112 13.201 36.6437L16.0294 41.7911C16.6718 42.9602 18.257 43.1847 19.1987 42.2399L22.2571 39.1715C22.6323 38.7951 22.8422 38.2849 22.8406 37.7535L22.8324 35.0218L25.3976 32.4531L28.4672 41.8975C28.9286 43.3172 30.7265 43.7493 31.7827 42.6942L36.1729 38.3086C36.6186 37.8634 36.8285 37.2341 36.7393 36.6105L34.7982 23.0371L41.0269 16.8034C41.3314 16.4987 41.5293 16.1039 41.5913 15.6776L42.2276 11.3034C42.6126 8.65663 40.3416 6.38495 37.6947 6.76915L33.3111 7.40542C32.8841 7.4674 32.4886 7.66582 32.1836 7.97104L25.9337 14.226Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M15.638 30.1997L12.063 30.1774L11.4706 30.7718L14.3404 32.3507C15.3378 32.8994 16.1584 33.7205 16.7066 34.7182L18.2497 37.5265L18.8381 36.9363L18.8273 33.3723L27.1827 25.0054L31.2631 37.56L32.6379 36.1867L30.5554 21.6249L37.7284 14.4461L38.2692 10.7284L34.5433 11.2692L27.3492 18.4692L12.8179 16.3955L11.4494 17.7626L23.9947 21.8314L15.638 30.1997ZM7.10722 20.5594C5.68579 20.0983 5.25357 18.2981 6.31077 17.242L10.6979 12.8595C11.1429 12.4149 11.7712 12.2056 12.3939 12.2945L25.9337 14.2267L32.1835 7.97178C32.4885 7.66655 32.884 7.46814 33.311 7.40616L37.6946 6.76988C40.3415 6.38569 42.6125 8.65736 42.2275 11.3042L41.5913 15.6784C41.5293 16.1046 41.3313 16.4994 41.0269 16.8041L34.7982 23.0379L36.7393 36.6112C36.8285 37.2349 36.6186 37.8641 36.1729 38.3093L31.7827 42.695C30.7265 43.75 28.9286 43.318 28.4671 41.8982L25.3975 32.4538L22.8323 35.0226L22.8406 37.7543C22.8422 38.2857 22.6322 38.7958 22.2571 39.1722L19.1986 42.2406C18.2569 43.1854 16.6717 42.9609 16.0293 41.7918L13.201 36.6445C13.0182 36.3119 12.7447 36.0382 12.4122 35.8553L7.21331 32.9949C6.0473 32.3534 5.82137 30.7733 6.76088 29.8307L9.82138 26.7603C10.1997 26.3807 10.7145 26.1689 11.2504 26.1722L13.9899 26.1894L16.5528 23.6229L7.10722 20.5594Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M15.638 30.199L12.0631 30.1767L11.4706 30.771L14.3405 32.35C15.3378 32.8987 16.1585 33.7198 16.7067 34.7175L18.2498 37.5258L18.8381 36.9355L18.8274 33.3716L27.1827 25.0047L31.2632 37.5593L32.6379 36.186L30.5555 21.6242L37.7285 14.4454L38.2692 10.7277L34.5434 11.2685L27.3492 18.4685L12.818 16.3948L11.4495 17.7618L23.9947 21.8307L15.638 30.199ZM7.10728 20.5586C5.68585 20.0976 5.25363 18.2973 6.31083 17.2412L10.6979 12.8587C11.143 12.4142 11.7712 12.2049 12.394 12.2937L25.9337 14.226L32.1836 7.97104C32.4886 7.66582 32.8841 7.4674 33.3111 7.40542L37.6947 6.76915C40.3416 6.38495 42.6126 8.65663 42.2276 11.3034L41.5913 15.6776C41.5293 16.1039 41.3314 16.4987 41.0269 16.8034L34.7982 23.0371L36.7393 36.6105C36.8285 37.2341 36.6186 37.8634 36.1729 38.3086L31.7827 42.6942C30.7265 43.7493 28.9286 43.3172 28.4672 41.8975L25.3976 32.4531L22.8324 35.0218L22.8406 37.7535C22.8422 38.2849 22.6323 38.7951 22.2571 39.1715L19.1987 42.2399C18.257 43.1847 16.6718 42.9602 16.0294 41.7911L13.201 36.6437C13.0183 36.3112 12.7447 36.0375 12.4123 35.8546L7.21337 32.9942C6.04736 32.3527 5.82143 30.7726 6.76094 29.83L9.82144 26.7595C10.1998 26.38 10.7146 26.1682 11.2504 26.1715L13.9899 26.1886L16.5528 23.6221L7.10728 20.5586Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M15.2259 29.1971L11.6505 29.1748L9.82398 31.0072L13.8584 33.2268C14.6895 33.6841 15.3734 34.3684 15.8302 35.1998L18.0159 39.1776L19.8393 37.3483L19.8286 33.7849L26.7364 26.8675L30.8162 39.42L33.6986 36.5406L31.6161 21.9781L38.6703 14.9183L39.2588 10.8723C39.355 10.2106 38.7873 9.64272 38.1255 9.73877L34.0708 10.3273L26.9953 17.4086L12.4646 15.335L9.58685 18.2097L22.1342 22.2793L15.2259 29.1971ZM25.9337 14.2267L12.3939 12.2945C11.7712 12.2056 11.1429 12.4149 10.6979 12.8595L6.31077 17.242C5.25357 18.2981 5.68579 20.0983 7.10722 20.5594L16.5528 23.6229L13.9899 26.1894L11.2504 26.1722C10.7145 26.1689 10.1997 26.3807 9.82138 26.7603L6.76088 29.8307C5.82137 30.7733 6.0473 32.3534 7.21331 32.9949L12.4122 35.8553C12.7447 36.0382 13.0182 36.3119 13.201 36.6445L16.0293 41.7918C16.6717 42.9609 18.2569 43.1854 19.1986 42.2406L22.2571 39.1722C22.6322 38.7958 22.8422 38.2857 22.8406 37.7543L22.8323 35.0226L25.3975 32.4538L28.4671 41.8982C28.9286 43.318 30.7265 43.75 31.7827 42.695L36.1729 38.3093C36.6186 37.8641 36.8285 37.2349 36.7393 36.6112L34.7982 23.0379L41.0269 16.8041C41.3313 16.4994 41.5293 16.1046 41.5913 15.6784L42.2275 11.3042C42.6125 8.65736 40.3415 6.38569 37.6946 6.76988L33.311 7.40616C32.884 7.46814 32.4885 7.66655 32.1835 7.97178L25.9337 14.2267Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M15.226 29.1964L11.6505 29.1741L9.82404 31.0065L13.8584 33.2261C14.6895 33.6834 15.3734 34.3677 15.8303 35.199L18.016 39.1769L19.8394 37.3475L19.8286 33.7842L26.7364 26.8668L30.8162 39.4193L33.6987 36.5398L31.6162 21.9774L38.6703 14.9176L39.2588 10.8716C39.3551 10.2099 38.7873 9.64199 38.1256 9.73804L34.0709 10.3266L26.9954 17.4079L12.4647 15.3342L9.58691 18.209L22.1343 22.2785L15.226 29.1964ZM25.9337 14.226L12.394 12.2937C11.7712 12.2049 11.143 12.4142 10.6979 12.8587L6.31083 17.2412C5.25363 18.2973 5.68585 20.0976 7.10728 20.5586L16.5528 23.6221L13.9899 26.1886L11.2504 26.1715C10.7146 26.1682 10.1998 26.38 9.82144 26.7595L6.76094 29.83C5.82143 30.7726 6.04736 32.3527 7.21337 32.9942L12.4123 35.8546C12.7447 36.0375 13.0183 36.3112 13.201 36.6437L16.0294 41.7911C16.6718 42.9602 18.257 43.1847 19.1987 42.2399L22.2571 39.1715C22.6323 38.7951 22.8422 38.2849 22.8406 37.7535L22.8324 35.0218L25.3976 32.4531L28.4672 41.8975C28.9286 43.3172 30.7265 43.7493 31.7827 42.6942L36.1729 38.3086C36.6186 37.8634 36.8285 37.2341 36.7393 36.6105L34.7982 23.0371L41.0269 16.8034C41.3314 16.4987 41.5293 16.1039 41.5913 15.6776L42.2276 11.3034C42.6126 8.65663 40.3416 6.38495 37.6947 6.76915L33.3111 7.40542C32.8841 7.4674 32.4886 7.66582 32.1836 7.97104L25.9337 14.226Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/android/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface AndroidProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Android = ({ fill = false, thick = false, size = 24 }: AndroidProps) => {
+export const Android = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: AndroidProps) => {
   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="M35.2 18.9604L38.88 12.6004C39.2 11.9804 38.96 11.2204 38.36 10.9004C37.78 10.6004 37.06 10.7804 36.7 11.3404L32.94 17.8204C27.22 15.4004 20.78 15.4004 15.06 17.8204L11.3 11.3404C10.92 10.7604 10.14 10.5804 9.56 10.9404C9 11.3004 8.82 12.0204 9.12 12.6004L12.8 18.9604C6.9141 22.3211 2.97489 28.2413 2.11174 34.9243C2.03703 35.5027 2.49855 36.0004 3.08174 36.0004H44.9183C45.5015 36.0004 45.963 35.5027 45.8883 34.9243C45.0251 28.2413 41.0859 22.3211 35.2 18.9604ZM14 30.5004C12.62 30.5004 11.5 29.3804 11.5 28.0004C11.5 26.6204 12.62 25.5004 14 25.5004C15.38 25.5004 16.5 26.6204 16.5 28.0004C16.5 29.3804 15.38 30.5004 14 30.5004ZM34 30.5004C32.62 30.5004 31.5 29.3804 31.5 28.0004C31.5 26.6204 32.62 25.5004 34 25.5004C35.38 25.5004 36.5 26.6204 36.5 28.0004C36.5 29.3804 35.38 30.5004 34 30.5004Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" 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="M35.2 18.9604L38.88 12.6004C39.2 11.9804 38.96 11.2204 38.36 10.9004C37.78 10.6004 37.06 10.7804 36.7 11.3404L32.94 17.8204C27.22 15.4004 20.78 15.4004 15.06 17.8204L11.3 11.3404C10.92 10.7604 10.14 10.5804 9.56 10.9404C9 11.3004 8.82 12.0204 9.12 12.6004L12.8 18.9604C6.9141 22.3211 2.97489 28.2413 2.11174 34.9243C2.03703 35.5027 2.49855 36.0004 3.08174 36.0004H44.9183C45.5015 36.0004 45.963 35.5027 45.8883 34.9243C45.0251 28.2413 41.0859 22.3211 35.2 18.9604ZM14 30.5004C12.62 30.5004 11.5 29.3804 11.5 28.0004C11.5 26.6204 12.62 25.5004 14 25.5004C15.38 25.5004 16.5 26.6204 16.5 28.0004C16.5 29.3804 15.38 30.5004 14 30.5004ZM34 30.5004C32.62 30.5004 31.5 29.3804 31.5 28.0004C31.5 26.6204 32.62 25.5004 34 25.5004C35.38 25.5004 36.5 26.6204 36.5 28.0004C36.5 29.3804 35.38 30.5004 34 30.5004Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M35.2 18.9604L38.88 12.6004C39.2 11.9804 38.96 11.2204 38.36 10.9004C37.78 10.6004 37.06 10.7804 36.7 11.3404L32.94 17.8204C27.22 15.4004 20.78 15.4004 15.06 17.8204L11.3 11.3404C10.92 10.7604 10.14 10.5804 9.56 10.9404C9 11.3004 8.82 12.0204 9.12 12.6004L12.8 18.9604C6.9141 22.3211 2.97489 28.2413 2.11174 34.9243C2.03703 35.5027 2.49855 36.0004 3.08174 36.0004H44.9183C45.5015 36.0004 45.963 35.5027 45.8883 34.9243C45.0251 28.2413 41.0859 22.3211 35.2 18.9604ZM14 30.5004C12.62 30.5004 11.5 29.3804 11.5 28.0004C11.5 26.6204 12.62 25.5004 14 25.5004C15.38 25.5004 16.5 26.6204 16.5 28.0004C16.5 29.3804 15.38 30.5004 14 30.5004ZM34 30.5004C32.62 30.5004 31.5 29.3804 31.5 28.0004C31.5 26.6204 32.62 25.5004 34 25.5004C35.38 25.5004 36.5 26.6204 36.5 28.0004C36.5 29.3804 35.38 30.5004 34 30.5004Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" 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="M35.2 18.9604L38.88 12.6004C39.2 11.9804 38.96 11.2204 38.36 10.9004C37.78 10.6004 37.06 10.7804 36.7 11.3404L32.94 17.8204C27.22 15.4004 20.78 15.4004 15.06 17.8204L11.3 11.3404C10.92 10.7604 10.14 10.5804 9.56 10.9404C9 11.3004 8.82 12.0204 9.12 12.6004L12.8 18.9604C6.9141 22.3211 2.97489 28.2413 2.11174 34.9243C2.03703 35.5027 2.49855 36.0004 3.08174 36.0004H44.9183C45.5015 36.0004 45.963 35.5027 45.8883 34.9243C45.0251 28.2413 41.0859 22.3211 35.2 18.9604ZM14 30.5004C12.62 30.5004 11.5 29.3804 11.5 28.0004C11.5 26.6204 12.62 25.5004 14 25.5004C15.38 25.5004 16.5 26.6204 16.5 28.0004C16.5 29.3804 15.38 30.5004 14 30.5004ZM34 30.5004C32.62 30.5004 31.5 29.3804 31.5 28.0004C31.5 26.6204 32.62 25.5004 34 25.5004C35.38 25.5004 36.5 26.6204 36.5 28.0004C36.5 29.3804 35.38 30.5004 34 30.5004Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/apple/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface AppleProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Apple = ({ fill = false, thick = false, size = 24 }: AppleProps) => {
+export const Apple = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: AppleProps) => {
   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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" fill="currentColor"/>
-<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" 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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" fill="currentColor"/>
-<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" 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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" fill="currentColor"/>
-<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" 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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" fill="currentColor"/>
-<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/arrow-back/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ArrowBackProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ArrowBack = ({ fill = false, thick = false, size = 24 }: ArrowBackProps) => {
+export const ArrowBack = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowBackProps) => {
   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="M30.0606 37.9392L16.475 24.3535C16.2797 24.1583 16.2797 23.8417 16.475 23.6464L30.0606 10.0608L27.9393 7.93945L14.3537 21.5251C12.9868 22.8919 12.9868 25.108 14.3537 26.4748L27.9393 40.0605L30.0606 37.9392Z" 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="M30.0607 37.9372L16.4751 24.3516C16.2798 24.1563 16.2798 23.8397 16.4751 23.6445L30.0607 10.0588L27.9394 7.9375L14.3537 21.5231C12.9869 22.89 12.9869 25.1061 14.3537 26.4729L27.9394 40.0585L30.0607 37.9372Z" 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="M30.0606 37.9392L16.475 24.3535C16.2797 24.1583 16.2797 23.8417 16.475 23.6464L30.0606 10.0608L27.9393 7.93945L14.3537 21.5251C12.9868 22.8919 12.9868 25.108 14.3537 26.4748L27.9393 40.0605L30.0606 37.9392Z" 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="M30.0607 37.9372L16.4751 24.3516C16.2798 24.1563 16.2798 23.8397 16.4751 23.6445L30.0607 10.0588L27.9394 7.9375L14.3537 21.5231C12.9869 22.89 12.9869 25.1061 14.3537 26.4729L27.9394 40.0585L30.0607 37.9372Z" 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="M30.4142 10.4144L16.8286 24L30.4142 37.5857L27.5858 40.4141L14.0001 26.8284C12.438 25.2663 12.438 22.7337 14.0001 21.1716L27.5858 7.58594L30.4142 10.4144Z" 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="M30.4143 10.4144L16.8286 24L30.4143 37.5857L27.5858 40.4141L14.0002 26.8284C12.4381 25.2663 12.4381 22.7337 14.0002 21.1716L27.5858 7.58594L30.4143 10.4144Z" 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="M30.0606 37.9392L16.475 24.3535C16.2797 24.1583 16.2797 23.8417 16.475 23.6464L30.0606 10.0608L27.9393 7.93945L14.3537 21.5251C12.9868 22.8919 12.9868 25.108 14.3537 26.4748L27.9393 40.0605L30.0606 37.9392Z" 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="M30.0607 37.9372L16.4751 24.3516C16.2798 24.1563 16.2798 23.8397 16.4751 23.6445L30.0607 10.0588L27.9394 7.9375L14.3537 21.5231C12.9869 22.89 12.9869 25.1061 14.3537 26.4729L27.9394 40.0585L30.0607 37.9372Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/arrow-backward/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ArrowBackwardProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ArrowBackward = ({ fill = false, thick = false, size = 24 }: ArrowBackwardProps) => {
+export const ArrowBackward = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowBackwardProps) => {
   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="M30.0605 13.0608L19.4748 23.6464C19.2796 23.8417 19.2796 24.1583 19.4748 24.3535L30.0605 34.9392L27.9391 37.0605L17.3535 26.4748C15.9867 25.108 15.9867 22.8919 17.3535 21.5251L27.9391 10.9395L30.0605 13.0608Z" 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="M30.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" 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="M30.0605 13.0608L19.4748 23.6464C19.2796 23.8417 19.2796 24.1583 19.4748 24.3535L30.0605 34.9392L27.9391 37.0605L17.3535 26.4748C15.9867 25.108 15.9867 22.8919 17.3535 21.5251L27.9391 10.9395L30.0605 13.0608Z" 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="M30.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" 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="M30.0605 13.0608L19.4748 23.6464C19.2796 23.8417 19.2796 24.1583 19.4748 24.3535L30.0605 34.9392L27.9391 37.0605L17.3535 26.4748C15.9867 25.108 15.9867 22.8919 17.3535 21.5251L27.9391 10.9395L30.0605 13.0608Z" 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="M30.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" 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="M30.0605 13.0608L19.4748 23.6464C19.2796 23.8417 19.2796 24.1583 19.4748 24.3535L30.0605 34.9392L27.9391 37.0605L17.3535 26.4748C15.9867 25.108 15.9867 22.8919 17.3535 21.5251L27.9391 10.9395L30.0605 13.0608Z" 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="M30.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };