@liner-fe/icon 0.0.4 → 0.0.5

package/assets/mobile/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MobileProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Mobile = ({ fill = false, thick = false, size = 24 }: MobileProps) => {
+export const Mobile = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MobileProps) => {
   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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" 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 32C25.1046 32 26 32.8954 26 34C26 35.1046 25.1046 36 24 36C22.8954 36 22 35.1046 22 34C22 32.8954 22.8954 32 24 32Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM15 38H33V10H15V38Z" 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 32C25.1046 32 26 32.8954 26 34C26 35.1046 25.1046 36 24 36C22.8954 36 22 35.1046 22 34C22 32.8954 22.8954 32 24 32Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM15 38H33V10H15V38Z" 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/more/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MoreProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const More = ({ fill = false, thick = false, size = 24 }: MoreProps) => {
+export const More = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MoreProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" fill="currentColor"/>
-<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" fill="currentColor"/>
-<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" fill="currentColor"/>
-<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" fill="currentColor"/>
-<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" 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="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" fill="currentColor"/>
-<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" fill="currentColor"/>
-<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" 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="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" fill="currentColor"/>
-<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" fill="currentColor"/>
-<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/move/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MoveProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Move = ({ fill = false, thick = false, size = 24 }: MoveProps) => {
+export const Move = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MoveProps) => {
   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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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="M36.2224 21.0002L27.4022 29.8203L30.2306 32.6487L41 21.8794C42.5621 20.3173 42.5621 17.7846 41 16.2225L30.2306 5.45312L27.4022 8.28155L36.1208 17.0002H10C7.79086 17.0002 6 18.791 6 21.0002V42.5002H10V21.0002H36.2224Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.2224 21.0002L27.4022 29.8203L30.2306 32.6487L41 21.8794C42.5621 20.3173 42.5621 17.7846 41 16.2225L30.2306 5.45312L27.4022 8.28155L36.1208 17.0002H10C7.79086 17.0002 6 18.791 6 21.0002V42.5002H10V21.0002H36.2224Z" 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.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

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

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MoveToFolderProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const MoveToFolder = ({ fill = false, thick = false, size = 24 }: MoveToFolderProps) => {
+export const MoveToFolder = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MoveToFolderProps) => {
   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="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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="M22.373 22.7227C23.7291 24.079 23.7283 26.2785 22.3721 27.6348L16.2354 33.7715L13.4072 30.9434L17.1719 27.1777L4.5 27.1787V23.1787L17.1709 23.1777L13.4072 19.4141L16.2354 16.5859L22.373 22.7227Z" 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="M22.373 22.7227C23.7291 24.079 23.7283 26.2785 22.3721 27.6348L16.2354 33.7715L13.4072 30.9434L17.1719 27.1777L4.5 27.1787V23.1787L17.1709 23.1777L13.4072 19.4141L16.2354 16.5859L22.373 22.7227Z" 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="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/new-chrome-extension/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface NewChromeExtensionProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const NewChromeExtension = ({ fill = false, thick = false, size = 24 }: NewChromeExtensionProps) => {
+export const NewChromeExtension = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewChromeExtensionProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM10 34H38V22H29C27.8954 22 27 21.1046 27 20V15H10V34Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM10 34H38V22H29C27.8954 22 27 21.1046 27 20V15H10V34Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4906 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/new-tab/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface NewTabProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const NewTab = ({ fill = false, thick = false, size = 24 }: NewTabProps) => {
+export const NewTab = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewTabProps) => {
   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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" fill="currentColor"/>
-<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" fill="currentColor"/>
-<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" fill="currentColor"/>
-<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" fill="currentColor"/>
-<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/new-thread/index.tsx

@@ -1,33 +1,34 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface NewThreadProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const NewThread = ({ fill = false, thick = false, size = 24 }: NewThreadProps) => {
+export const NewThread = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewThreadProps) => {
   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="M41 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20 18.001H15V26.001H20V31.001H28V26.001H33.001V18.001H28V13H20V18.001Z" fill="currentColor" stroke="currentColor" stroke-width="4"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20 18.001H15V26.001H20V31.001H28V26.001H33.001V18.001H28V13H20V18.001Z" style={{ fill: `var(--${color})` }} stroke="#1E1E1F" stroke-width="4"/>
 </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="M41 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20.5 18.501H15V25.501H20.5V31.001H27.5V25.501H33.001V18.501H27.5V13H20.5V18.501Z" fill="currentColor" stroke="currentColor" stroke-width="4"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20.5 18.501H15V25.501H20.5V31.001H27.5V25.501H33.001V18.501H27.5V13H20.5V18.501Z" style={{ fill: `var(--${color})` }} stroke="#1E1E1F" stroke-width="4"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.9998 20.001V15H25.9998V20.001H31.0006V24.001H25.9998V29.0007H21.9998V24.001H17V20.001H21.9998Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM32.6667 33V37.9585L25.2083 33H9V11H39V33H32.6667Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9998 20.001V15H25.9998V20.001H31.0006V24.001H25.9998V29.0007H21.9998V24.001H17V20.001H21.9998Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM32.6667 33V37.9585L25.2083 33H9V11H39V33H32.6667Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.4998 20.501V15H25.4998V20.501H31.0006V23.501H25.4998V29.0007H22.4998V23.501H17V20.501H22.4998Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM33.6667 34V39.8241L24.9062 34H8V10H40V34H33.6667Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4998 20.501V15H25.4998V20.501H31.0006V23.501H25.4998V29.0007H22.4998V23.501H17V20.501H22.4998Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM33.6667 34V39.8241L24.9062 34H8V10H40V34H33.6667Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/new-thread-folder/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface NewThreadFolderProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const NewThreadFolder = ({ fill = false, thick = false, size = 24 }: NewThreadFolderProps) => {
+export const NewThreadFolder = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewThreadFolderProps) => {
   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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" fill="currentColor"/>
-<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" 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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" fill="currentColor"/>
-<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" 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="M30.5 26.5H34V30.5H30.5V34H26.5V30.5H23V26.5H26.5V23H30.5V26.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM18 36H31.042L34.2773 38.1504V36H39V21H18V36Z" fill="currentColor"/>
-<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7L6.7959 30.9893C6.73278 30.9829 6.67062 30.9731 6.60938 30.9609C6.58365 30.9558 6.55857 30.9485 6.5332 30.9424C6.49943 30.9343 6.4657 30.9268 6.43262 30.917C6.40458 30.9087 6.37711 30.8991 6.34961 30.8896C6.31696 30.8784 6.28479 30.8664 6.25293 30.8535C6.2296 30.8441 6.20648 30.8345 6.18359 30.8242C6.14988 30.8091 6.11668 30.7933 6.08398 30.7764C6.06169 30.7648 6.03937 30.7535 6.01758 30.7412C5.98558 30.7231 5.9547 30.7034 5.92383 30.6836C5.90297 30.6702 5.88165 30.6577 5.86133 30.6436C5.83552 30.6256 5.81104 30.606 5.78613 30.5869C5.64546 30.4791 5.51978 30.3536 5.41211 30.2129C5.39787 30.1943 5.38273 30.1763 5.36914 30.1572L5.3418 30.1182C5.33239 30.1042 5.32449 30.0894 5.31543 30.0752C5.29568 30.0443 5.27588 30.0135 5.25781 29.9814C5.24551 29.9596 5.23416 29.9373 5.22266 29.915C5.20579 29.8823 5.18989 29.8491 5.1748 29.8154C5.16456 29.7925 5.1549 29.7694 5.14551 29.7461C5.13268 29.7142 5.12058 29.6821 5.10938 29.6494C5.09993 29.6219 5.0903 29.5944 5.08203 29.5664C5.07228 29.5333 5.0647 29.4996 5.05664 29.4658C5.05059 29.4405 5.04317 29.4154 5.03809 29.3896C5.02607 29.3288 5.0171 29.2668 5.01074 29.2041L5 29V7C5 6.86559 5.01378 6.73439 5.03906 6.60742C5.04338 6.58575 5.0487 6.56438 5.05371 6.54297C5.06342 6.50149 5.07369 6.46036 5.08594 6.41992C5.09293 6.39681 5.10157 6.37431 5.10938 6.35156C5.12221 6.31413 5.13445 6.27663 5.14941 6.24023C5.1584 6.21837 5.16898 6.19725 5.17871 6.17578C5.19469 6.14055 5.21059 6.10539 5.22852 6.07129C5.2423 6.04504 5.25756 6.01968 5.27246 5.99414C5.28848 5.9667 5.305 5.93967 5.32227 5.91309C5.33748 5.88965 5.35299 5.86649 5.36914 5.84375C5.39032 5.81394 5.41183 5.78442 5.43457 5.75586C5.4507 5.73559 5.46749 5.7159 5.48438 5.69629C5.50846 5.66833 5.53302 5.64084 5.55859 5.61426C5.57551 5.59666 5.59281 5.57947 5.61035 5.5625C5.6372 5.53655 5.66509 5.51173 5.69336 5.4873C5.71364 5.46977 5.73391 5.45226 5.75488 5.43555C5.78146 5.41438 5.80926 5.39482 5.83691 5.375C5.85988 5.35853 5.88257 5.34168 5.90625 5.32617C5.93398 5.30802 5.96255 5.2912 5.99121 5.27441C6.01711 5.25924 6.04271 5.24352 6.06934 5.22949C6.09739 5.21473 6.12646 5.20193 6.15527 5.18848C6.18402 5.17505 6.21272 5.16149 6.24219 5.14941C6.26855 5.13861 6.29535 5.12883 6.32227 5.11914C6.35425 5.10761 6.38623 5.09586 6.41895 5.08594C6.46537 5.07187 6.51276 5.06052 6.56055 5.0498C6.57331 5.04694 6.58578 5.04266 6.59863 5.04004C6.66326 5.02688 6.72916 5.01751 6.7959 5.01074L7 5H18.5L21.5 9Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.5 26.5H34V30.5H30.5V34H26.5V30.5H23V26.5H26.5V23H30.5V26.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM18 36H31.042L34.2773 38.1504V36H39V21H18V36Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7L6.7959 30.9893C6.73278 30.9829 6.67062 30.9731 6.60938 30.9609C6.58365 30.9558 6.55857 30.9485 6.5332 30.9424C6.49943 30.9343 6.4657 30.9268 6.43262 30.917C6.40458 30.9087 6.37711 30.8991 6.34961 30.8896C6.31696 30.8784 6.28479 30.8664 6.25293 30.8535C6.2296 30.8441 6.20648 30.8345 6.18359 30.8242C6.14988 30.8091 6.11668 30.7933 6.08398 30.7764C6.06169 30.7648 6.03937 30.7535 6.01758 30.7412C5.98558 30.7231 5.9547 30.7034 5.92383 30.6836C5.90297 30.6702 5.88165 30.6577 5.86133 30.6436C5.83552 30.6256 5.81104 30.606 5.78613 30.5869C5.64546 30.4791 5.51978 30.3536 5.41211 30.2129C5.39787 30.1943 5.38273 30.1763 5.36914 30.1572L5.3418 30.1182C5.33239 30.1042 5.32449 30.0894 5.31543 30.0752C5.29568 30.0443 5.27588 30.0135 5.25781 29.9814C5.24551 29.9596 5.23416 29.9373 5.22266 29.915C5.20579 29.8823 5.18989 29.8491 5.1748 29.8154C5.16456 29.7925 5.1549 29.7694 5.14551 29.7461C5.13268 29.7142 5.12058 29.6821 5.10938 29.6494C5.09993 29.6219 5.0903 29.5944 5.08203 29.5664C5.07228 29.5333 5.0647 29.4996 5.05664 29.4658C5.05059 29.4405 5.04317 29.4154 5.03809 29.3896C5.02607 29.3288 5.0171 29.2668 5.01074 29.2041L5 29V7C5 6.86559 5.01378 6.73439 5.03906 6.60742C5.04338 6.58575 5.0487 6.56438 5.05371 6.54297C5.06342 6.50149 5.07369 6.46036 5.08594 6.41992C5.09293 6.39681 5.10157 6.37431 5.10938 6.35156C5.12221 6.31413 5.13445 6.27663 5.14941 6.24023C5.1584 6.21837 5.16898 6.19725 5.17871 6.17578C5.19469 6.14055 5.21059 6.10539 5.22852 6.07129C5.2423 6.04504 5.25756 6.01968 5.27246 5.99414C5.28848 5.9667 5.305 5.93967 5.32227 5.91309C5.33748 5.88965 5.35299 5.86649 5.36914 5.84375C5.39032 5.81394 5.41183 5.78442 5.43457 5.75586C5.4507 5.73559 5.46749 5.7159 5.48438 5.69629C5.50846 5.66833 5.53302 5.64084 5.55859 5.61426C5.57551 5.59666 5.59281 5.57947 5.61035 5.5625C5.6372 5.53655 5.66509 5.51173 5.69336 5.4873C5.71364 5.46977 5.73391 5.45226 5.75488 5.43555C5.78146 5.41438 5.80926 5.39482 5.83691 5.375C5.85988 5.35853 5.88257 5.34168 5.90625 5.32617C5.93398 5.30802 5.96255 5.2912 5.99121 5.27441C6.01711 5.25924 6.04271 5.24352 6.06934 5.22949C6.09739 5.21473 6.12646 5.20193 6.15527 5.18848C6.18402 5.17505 6.21272 5.16149 6.24219 5.14941C6.26855 5.13861 6.29535 5.12883 6.32227 5.11914C6.35425 5.10761 6.38623 5.09586 6.41895 5.08594C6.46537 5.07187 6.51276 5.06052 6.56055 5.0498C6.57331 5.04694 6.58578 5.04266 6.59863 5.04004C6.66326 5.02688 6.72916 5.01751 6.7959 5.01074L7 5H18.5L21.5 9Z" 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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" fill="currentColor"/>
-<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/palette/index.tsx

@@ -1,47 +1,48 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface PaletteProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Palette = ({ fill = false, thick = false, size = 24 }: PaletteProps) => {
+export const Palette = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PaletteProps) => {
   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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" fill="currentColor"/>
-<path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" fill="currentColor"/>
-<path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" fill="currentColor"/>
-<path d="M35 20C35 21.1046 34.1046 22 33 22C31.8954 22 31 21.1046 31 20C31 18.8954 31.8954 18 33 18C34.1046 18 35 18.8954 35 20Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM38.3295 28.8576C39.3742 27.8182 40.4081 26.161 41.0556 23.4163C41.8324 18.5758 40.0581 14.6 36.8796 11.7248C33.6094 8.76667 28.8457 7 24 7C14.6112 7 7 14.6112 7 24C7 28.6424 9.12152 33.2842 12.3872 36.5993C15.5413 39.8012 19.4495 41.4753 23.127 41.0878C24.3566 40.4557 24.8391 39.9023 25.033 39.5915C25.2234 39.2864 25.2886 38.9752 25.2571 38.5189C25.2284 38.1024 25.1557 37.7992 25.0491 37.3547C24.995 37.1291 24.9322 36.8671 24.862 36.5356C24.7863 36.1781 24.6522 35.5057 24.7171 34.7834C24.7944 33.9231 25.1837 32.772 26.3359 32.0038C26.9151 31.6177 27.5018 31.4773 27.8225 31.415C28.1844 31.3448 28.5412 31.3153 28.8312 31.2994C29.248 31.2766 29.7619 31.2729 30.2374 31.2696C30.3886 31.2685 30.5367 31.2675 30.6759 31.2658C31.964 31.2508 33.3401 31.1882 34.6975 30.8427C36.0234 30.5052 37.27 29.9116 38.3295 28.8576Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${color})` }}/>
+<path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${color})` }}/>
+<path d="M35 20C35 21.1046 34.1046 22 33 22C31.8954 22 31 21.1046 31 20C31 18.8954 31.8954 18 33 18C34.1046 18 35 18.8954 35 20Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM38.3295 28.8576C39.3742 27.8182 40.4081 26.161 41.0556 23.4163C41.8324 18.5758 40.0581 14.6 36.8796 11.7248C33.6094 8.76667 28.8457 7 24 7C14.6112 7 7 14.6112 7 24C7 28.6424 9.12152 33.2842 12.3872 36.5993C15.5413 39.8012 19.4495 41.4753 23.127 41.0878C24.3566 40.4557 24.8391 39.9023 25.033 39.5915C25.2234 39.2864 25.2886 38.9752 25.2571 38.5189C25.2284 38.1024 25.1557 37.7992 25.0491 37.3547C24.995 37.1291 24.9322 36.8671 24.862 36.5356C24.7863 36.1781 24.6522 35.5057 24.7171 34.7834C24.7944 33.9231 25.1837 32.772 26.3359 32.0038C26.9151 31.6177 27.5018 31.4773 27.8225 31.415C28.1844 31.3448 28.5412 31.3153 28.8312 31.2994C29.248 31.2766 29.7619 31.2729 30.2374 31.2696C30.3886 31.2685 30.5367 31.2675 30.6759 31.2658C31.964 31.2508 33.3401 31.1882 34.6975 30.8427C36.0234 30.5052 37.27 29.9116 38.3295 28.8576Z" 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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" fill="currentColor"/>
-<path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" fill="currentColor"/>
-<path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" fill="currentColor"/>
-<path d="M35 20C35 21.1046 34.1046 22 33 22C31.8954 22 31 21.1046 31 20C31 18.8954 31.8954 18 33 18C34.1046 18 35 18.8954 35 20Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM38.3295 28.8576C39.3742 27.8182 40.4081 26.161 41.0556 23.4163C41.8324 18.5758 40.0581 14.6 36.8796 11.7248C33.6094 8.76667 28.8457 7 24 7C14.6112 7 7 14.6112 7 24C7 28.6424 9.12152 33.2842 12.3872 36.5993C15.5413 39.8012 19.4495 41.4753 23.127 41.0878C24.3566 40.4557 24.8391 39.9023 25.033 39.5915C25.2234 39.2864 25.2886 38.9752 25.2571 38.5189C25.2284 38.1024 25.1557 37.7992 25.0491 37.3547C24.995 37.1291 24.9322 36.8671 24.862 36.5356C24.7863 36.1781 24.6522 35.5057 24.7171 34.7834C24.7944 33.9231 25.1837 32.772 26.3359 32.0038C26.9151 31.6177 27.5018 31.4773 27.8225 31.415C28.1844 31.3448 28.5412 31.3153 28.8312 31.2994C29.248 31.2766 29.7619 31.2729 30.2374 31.2696C30.3886 31.2685 30.5367 31.2675 30.6759 31.2658C31.964 31.2508 33.3401 31.1882 34.6975 30.8427C36.0234 30.5052 37.27 29.9116 38.3295 28.8576Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${color})` }}/>
+<path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${color})` }}/>
+<path d="M35 20C35 21.1046 34.1046 22 33 22C31.8954 22 31 21.1046 31 20C31 18.8954 31.8954 18 33 18C34.1046 18 35 18.8954 35 20Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM38.3295 28.8576C39.3742 27.8182 40.4081 26.161 41.0556 23.4163C41.8324 18.5758 40.0581 14.6 36.8796 11.7248C33.6094 8.76667 28.8457 7 24 7C14.6112 7 7 14.6112 7 24C7 28.6424 9.12152 33.2842 12.3872 36.5993C15.5413 39.8012 19.4495 41.4753 23.127 41.0878C24.3566 40.4557 24.8391 39.9023 25.033 39.5915C25.2234 39.2864 25.2886 38.9752 25.2571 38.5189C25.2284 38.1024 25.1557 37.7992 25.0491 37.3547C24.995 37.1291 24.9322 36.8671 24.862 36.5356C24.7863 36.1781 24.6522 35.5057 24.7171 34.7834C24.7944 33.9231 25.1837 32.772 26.3359 32.0038C26.9151 31.6177 27.5018 31.4773 27.8225 31.415C28.1844 31.3448 28.5412 31.3153 28.8312 31.2994C29.248 31.2766 29.7619 31.2729 30.2374 31.2696C30.3886 31.2685 30.5367 31.2675 30.6759 31.2658C31.964 31.2508 33.3401 31.1882 34.6975 30.8427C36.0234 30.5052 37.27 29.9116 38.3295 28.8576Z" 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="M28 17.5C29.3807 17.5 30.5 16.3807 30.5 15C30.5 13.6193 29.3807 12.5 28 12.5C26.6193 12.5 25.5 13.6193 25.5 15C25.5 16.3807 26.6193 17.5 28 17.5Z" fill="currentColor"/>
-<path d="M22.5 15.5C22.5 16.8807 21.3807 18 20 18C18.6193 18 17.5 16.8807 17.5 15.5C17.5 14.1193 18.6193 13 20 13C21.3807 13 22.5 14.1193 22.5 15.5Z" fill="currentColor"/>
-<path d="M17.5 21.5C17.5 22.8807 16.3807 24 15 24C13.6193 24 12.5 22.8807 12.5 21.5C12.5 20.1193 13.6193 19 15 19C16.3807 19 17.5 20.1193 17.5 21.5Z" fill="currentColor"/>
-<path d="M36 20.5C36 21.8807 34.8807 23 33.5 23C32.1193 23 31 21.8807 31 20.5C31 19.1193 32.1193 18 33.5 18C34.8807 18 36 19.1193 36 20.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM37.6242 28.1487C38.5108 27.2666 39.4614 25.7955 40.0739 23.2222C40.7769 18.7684 39.1569 15.1332 36.2088 12.4664C33.1382 9.6889 28.62 8 24 8C15.1634 8 8 15.1634 8 24C8 28.3489 9.99536 32.7463 13.0996 35.8975C16.0452 38.8878 19.5871 40.3834 22.836 40.1108C23.8177 39.5803 24.1144 39.1747 24.1846 39.0621C24.2353 38.9809 24.2806 38.894 24.2595 38.5877C24.2363 38.2523 24.1854 38.0415 24.0936 37.6618C24.039 37.4359 23.9699 37.1501 23.8837 36.7427C23.8062 36.3768 23.6418 35.5772 23.7211 34.694C23.8169 33.6267 24.3075 32.1543 25.7812 31.1718C26.5222 30.6778 27.2602 30.5055 27.6321 30.4333C28.0587 30.3506 28.4672 30.3178 28.7765 30.3009C29.2199 30.2766 29.7719 30.2728 30.2515 30.2694C30.3975 30.2684 30.5367 30.2674 30.6642 30.2659C31.9364 30.251 33.2139 30.1885 34.4508 29.8736C35.6458 29.5694 36.7194 29.0489 37.6242 28.1487Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 17.5C29.3807 17.5 30.5 16.3807 30.5 15C30.5 13.6193 29.3807 12.5 28 12.5C26.6193 12.5 25.5 13.6193 25.5 15C25.5 16.3807 26.6193 17.5 28 17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.5 15.5C22.5 16.8807 21.3807 18 20 18C18.6193 18 17.5 16.8807 17.5 15.5C17.5 14.1193 18.6193 13 20 13C21.3807 13 22.5 14.1193 22.5 15.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.5 21.5C17.5 22.8807 16.3807 24 15 24C13.6193 24 12.5 22.8807 12.5 21.5C12.5 20.1193 13.6193 19 15 19C16.3807 19 17.5 20.1193 17.5 21.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36 20.5C36 21.8807 34.8807 23 33.5 23C32.1193 23 31 21.8807 31 20.5C31 19.1193 32.1193 18 33.5 18C34.8807 18 36 19.1193 36 20.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM37.6242 28.1487C38.5108 27.2666 39.4614 25.7955 40.0739 23.2222C40.7769 18.7684 39.1569 15.1332 36.2088 12.4664C33.1382 9.6889 28.62 8 24 8C15.1634 8 8 15.1634 8 24C8 28.3489 9.99536 32.7463 13.0996 35.8975C16.0452 38.8878 19.5871 40.3834 22.836 40.1108C23.8177 39.5803 24.1144 39.1747 24.1846 39.0621C24.2353 38.9809 24.2806 38.894 24.2595 38.5877C24.2363 38.2523 24.1854 38.0415 24.0936 37.6618C24.039 37.4359 23.9699 37.1501 23.8837 36.7427C23.8062 36.3768 23.6418 35.5772 23.7211 34.694C23.8169 33.6267 24.3075 32.1543 25.7812 31.1718C26.5222 30.6778 27.2602 30.5055 27.6321 30.4333C28.0587 30.3506 28.4672 30.3178 28.7765 30.3009C29.2199 30.2766 29.7719 30.2728 30.2515 30.2694C30.3975 30.2684 30.5367 30.2674 30.6642 30.2659C31.9364 30.251 33.2139 30.1885 34.4508 29.8736C35.6458 29.5694 36.7194 29.0489 37.6242 28.1487Z" 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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" fill="currentColor"/>
-<path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" fill="currentColor"/>
-<path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" fill="currentColor"/>
-<path d="M35 20C35 21.1046 34.1046 22 33 22C31.8954 22 31 21.1046 31 20C31 18.8954 31.8954 18 33 18C34.1046 18 35 18.8954 35 20Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM38.3295 28.8576C39.3742 27.8182 40.4081 26.161 41.0556 23.4163C41.8324 18.5758 40.0581 14.6 36.8796 11.7248C33.6094 8.76667 28.8457 7 24 7C14.6112 7 7 14.6112 7 24C7 28.6424 9.12152 33.2842 12.3872 36.5993C15.5413 39.8012 19.4495 41.4753 23.127 41.0878C24.3566 40.4557 24.8391 39.9023 25.033 39.5915C25.2234 39.2864 25.2886 38.9752 25.2571 38.5189C25.2284 38.1024 25.1557 37.7992 25.0491 37.3547C24.995 37.1291 24.9322 36.8671 24.862 36.5356C24.7863 36.1781 24.6522 35.5057 24.7171 34.7834C24.7944 33.9231 25.1837 32.772 26.3359 32.0038C26.9151 31.6177 27.5018 31.4773 27.8225 31.415C28.1844 31.3448 28.5412 31.3153 28.8312 31.2994C29.248 31.2766 29.7619 31.2729 30.2374 31.2696C30.3886 31.2685 30.5367 31.2675 30.6759 31.2658C31.964 31.2508 33.3401 31.1882 34.6975 30.8427C36.0234 30.5052 37.27 29.9116 38.3295 28.8576Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${color})` }}/>
+<path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${color})` }}/>
+<path d="M35 20C35 21.1046 34.1046 22 33 22C31.8954 22 31 21.1046 31 20C31 18.8954 31.8954 18 33 18C34.1046 18 35 18.8954 35 20Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM38.3295 28.8576C39.3742 27.8182 40.4081 26.161 41.0556 23.4163C41.8324 18.5758 40.0581 14.6 36.8796 11.7248C33.6094 8.76667 28.8457 7 24 7C14.6112 7 7 14.6112 7 24C7 28.6424 9.12152 33.2842 12.3872 36.5993C15.5413 39.8012 19.4495 41.4753 23.127 41.0878C24.3566 40.4557 24.8391 39.9023 25.033 39.5915C25.2234 39.2864 25.2886 38.9752 25.2571 38.5189C25.2284 38.1024 25.1557 37.7992 25.0491 37.3547C24.995 37.1291 24.9322 36.8671 24.862 36.5356C24.7863 36.1781 24.6522 35.5057 24.7171 34.7834C24.7944 33.9231 25.1837 32.772 26.3359 32.0038C26.9151 31.6177 27.5018 31.4773 27.8225 31.415C28.1844 31.3448 28.5412 31.3153 28.8312 31.2994C29.248 31.2766 29.7619 31.2729 30.2374 31.2696C30.3886 31.2685 30.5367 31.2675 30.6759 31.2658C31.964 31.2508 33.3401 31.1882 34.6975 30.8427C36.0234 30.5052 37.27 29.9116 38.3295 28.8576Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };