@liner-fe/icon 0.0.4 → 0.0.6

package/assets/magic-pencil/index.tsx

@@ -1,47 +1,48 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MagicPencilProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const MagicPencil = ({ fill = false, thick = false, size = 24 }: MagicPencilProps) => {
+export const MagicPencil = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MagicPencilProps) => {
   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="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.2534 12.3551C29.6201 10.9874 31.8368 10.9871 33.204 12.3542L36.7378 15.8881C38.1043 17.2546 38.1047 19.47 36.7387 20.837L17.9123 39.6625C17.509 40.0657 17.0132 40.3643 16.4681 40.5322L11.2455 42.1411C8.53335 42.9766 6.00669 40.4066 6.88816 37.709L8.56463 32.5786C8.73562 32.0554 9.02761 31.5799 9.41691 31.1906L28.2534 12.3551ZM25.7889 19.0643L11.538 33.3122C11.4824 33.3678 11.4407 33.4357 11.4162 33.5105L9.73977 38.6409C9.61385 39.0262 9.9748 39.3934 10.3622 39.274L15.5849 37.6652C15.6628 37.6412 15.7336 37.5985 15.7912 37.5409L30.0297 23.3055L25.7889 19.0643ZM32.1508 21.1839L34.6166 18.7164C34.8118 18.5211 34.8117 18.2046 34.6165 18.0094L31.0826 14.4755C30.8873 14.2802 30.5707 14.2803 30.3754 14.4757L27.91 16.9427L32.1508 21.1839Z" fill="currentColor"/>
-<path d="M22 39.5L41 39.5V42.5L22 42.5V39.5Z" fill="currentColor"/>
-<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" fill="currentColor"/>
-<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.2534 12.3551C29.6201 10.9874 31.8368 10.9871 33.204 12.3542L36.7378 15.8881C38.1043 17.2546 38.1047 19.47 36.7387 20.837L17.9123 39.6625C17.509 40.0657 17.0132 40.3643 16.4681 40.5322L11.2455 42.1411C8.53335 42.9766 6.00669 40.4066 6.88816 37.709L8.56463 32.5786C8.73562 32.0554 9.02761 31.5799 9.41691 31.1906L28.2534 12.3551ZM25.7889 19.0643L11.538 33.3122C11.4824 33.3678 11.4407 33.4357 11.4162 33.5105L9.73977 38.6409C9.61385 39.0262 9.9748 39.3934 10.3622 39.274L15.5849 37.6652C15.6628 37.6412 15.7336 37.5985 15.7912 37.5409L30.0297 23.3055L25.7889 19.0643ZM32.1508 21.1839L34.6166 18.7164C34.8118 18.5211 34.8117 18.2046 34.6165 18.0094L31.0826 14.4755C30.8873 14.2802 30.5707 14.2803 30.3754 14.4757L27.91 16.9427L32.1508 21.1839Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22 39.5L41 39.5V42.5L22 42.5V39.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" 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="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.2534 12.3551C29.6201 10.9874 31.8368 10.9871 33.204 12.3542L36.7378 15.8881C38.1043 17.2546 38.1047 19.47 36.7387 20.837L17.9123 39.6625C17.509 40.0657 17.0132 40.3643 16.4681 40.5322L11.2455 42.1411C8.53335 42.9766 6.00669 40.4066 6.88816 37.709L8.56463 32.5786C8.73562 32.0554 9.02761 31.5799 9.41691 31.1906L28.2534 12.3551ZM25.7889 19.0643L11.538 33.3122C11.4824 33.3678 11.4407 33.4357 11.4162 33.5105L9.73977 38.6409C9.61385 39.0262 9.9748 39.3934 10.3622 39.274L15.5849 37.6652C15.6628 37.6412 15.7336 37.5985 15.7912 37.5409L30.0297 23.3055L25.7889 19.0643ZM32.1508 21.1839L34.6166 18.7164C34.8118 18.5211 34.8117 18.2046 34.6165 18.0094L31.0826 14.4755C30.8873 14.2802 30.5707 14.2803 30.3754 14.4757L27.91 16.9427L32.1508 21.1839Z" fill="currentColor"/>
-<path d="M22 39.5L41 39.5V42.5L22 42.5V39.5Z" fill="currentColor"/>
-<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" fill="currentColor"/>
-<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.2534 12.3551C29.6201 10.9874 31.8368 10.9871 33.204 12.3542L36.7378 15.8881C38.1043 17.2546 38.1047 19.47 36.7387 20.837L17.9123 39.6625C17.509 40.0657 17.0132 40.3643 16.4681 40.5322L11.2455 42.1411C8.53335 42.9766 6.00669 40.4066 6.88816 37.709L8.56463 32.5786C8.73562 32.0554 9.02761 31.5799 9.41691 31.1906L28.2534 12.3551ZM25.7889 19.0643L11.538 33.3122C11.4824 33.3678 11.4407 33.4357 11.4162 33.5105L9.73977 38.6409C9.61385 39.0262 9.9748 39.3934 10.3622 39.274L15.5849 37.6652C15.6628 37.6412 15.7336 37.5985 15.7912 37.5409L30.0297 23.3055L25.7889 19.0643ZM32.1508 21.1839L34.6166 18.7164C34.8118 18.5211 34.8117 18.2046 34.6165 18.0094L31.0826 14.4755C30.8873 14.2802 30.5707 14.2803 30.3754 14.4757L27.91 16.9427L32.1508 21.1839Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22 39.5L41 39.5V42.5L22 42.5V39.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" 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="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.8996 12.0016C29.4616 10.4386 31.995 10.4382 33.5575 12.0007L37.0913 15.5345C38.653 17.0962 38.6535 19.6282 37.0923 21.1904L18.2658 40.016C17.8048 40.4769 17.2382 40.8181 16.6152 41.01L11.3926 42.6189C8.29305 43.5737 5.40543 40.6366 6.41283 37.5537L8.08931 32.4233C8.28472 31.8253 8.61843 31.2819 9.06333 30.8371L27.8996 12.0016ZM25.7888 19.7714L11.8915 33.6658L10.215 38.7962L15.4376 37.1873L29.3225 23.3054L25.7888 19.7714ZM32.1506 20.4767L34.2629 18.363L30.729 14.8291L28.6169 16.9426L32.1506 20.4767Z" fill="currentColor"/>
-<path d="M21.9999 38.9999H40.9999V42.9999H21.9999V38.9999Z" fill="currentColor"/>
-<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" fill="currentColor"/>
-<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.8996 12.0016C29.4616 10.4386 31.995 10.4382 33.5575 12.0007L37.0913 15.5345C38.653 17.0962 38.6535 19.6282 37.0923 21.1904L18.2658 40.016C17.8048 40.4769 17.2382 40.8181 16.6152 41.01L11.3926 42.6189C8.29305 43.5737 5.40543 40.6366 6.41283 37.5537L8.08931 32.4233C8.28472 31.8253 8.61843 31.2819 9.06333 30.8371L27.8996 12.0016ZM25.7888 19.7714L11.8915 33.6658L10.215 38.7962L15.4376 37.1873L29.3225 23.3054L25.7888 19.7714ZM32.1506 20.4767L34.2629 18.363L30.729 14.8291L28.6169 16.9426L32.1506 20.4767Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.9999 38.9999H40.9999V42.9999H21.9999V38.9999Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" 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="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.2534 12.3551C29.6201 10.9874 31.8368 10.9871 33.204 12.3542L36.7378 15.8881C38.1043 17.2546 38.1047 19.47 36.7387 20.837L17.9123 39.6625C17.509 40.0657 17.0132 40.3643 16.4681 40.5322L11.2455 42.1411C8.53335 42.9766 6.00669 40.4066 6.88816 37.709L8.56463 32.5786C8.73562 32.0554 9.02761 31.5799 9.41691 31.1906L28.2534 12.3551ZM25.7889 19.0643L11.538 33.3122C11.4824 33.3678 11.4407 33.4357 11.4162 33.5105L9.73977 38.6409C9.61385 39.0262 9.9748 39.3934 10.3622 39.274L15.5849 37.6652C15.6628 37.6412 15.7336 37.5985 15.7912 37.5409L30.0297 23.3055L25.7889 19.0643ZM32.1508 21.1839L34.6166 18.7164C34.8118 18.5211 34.8117 18.2046 34.6165 18.0094L31.0826 14.4755C30.8873 14.2802 30.5707 14.2803 30.3754 14.4757L27.91 16.9427L32.1508 21.1839Z" fill="currentColor"/>
-<path d="M22 39.5L41 39.5V42.5L22 42.5V39.5Z" fill="currentColor"/>
-<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" fill="currentColor"/>
-<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8638 3.4468C17.0787 2.85107 17.9213 2.85107 18.1362 3.4468L19.5264 7.29931C19.5557 7.38044 19.6196 7.44432 19.7007 7.47359L23.5532 8.86377C24.1489 9.07874 24.1489 9.92126 23.5532 10.1362L19.7007 11.5264C19.6196 11.5557 19.5557 11.6196 19.5264 11.7007L18.1362 15.5532C17.9213 16.1489 17.0787 16.1489 16.8638 15.5532L15.4736 11.7007C15.4443 11.6196 15.3804 11.5557 15.2993 11.5264L11.4468 10.1362C10.8511 9.92126 10.8511 9.07874 11.4468 8.86377L15.2993 7.47359C15.3804 7.44432 15.4443 7.38044 15.4736 7.29931L16.8638 3.4468Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.2534 12.3551C29.6201 10.9874 31.8368 10.9871 33.204 12.3542L36.7378 15.8881C38.1043 17.2546 38.1047 19.47 36.7387 20.837L17.9123 39.6625C17.509 40.0657 17.0132 40.3643 16.4681 40.5322L11.2455 42.1411C8.53335 42.9766 6.00669 40.4066 6.88816 37.709L8.56463 32.5786C8.73562 32.0554 9.02761 31.5799 9.41691 31.1906L28.2534 12.3551ZM25.7889 19.0643L11.538 33.3122C11.4824 33.3678 11.4407 33.4357 11.4162 33.5105L9.73977 38.6409C9.61385 39.0262 9.9748 39.3934 10.3622 39.274L15.5849 37.6652C15.6628 37.6412 15.7336 37.5985 15.7912 37.5409L30.0297 23.3055L25.7889 19.0643ZM32.1508 21.1839L34.6166 18.7164C34.8118 18.5211 34.8117 18.2046 34.6165 18.0094L31.0826 14.4755C30.8873 14.2802 30.5707 14.2803 30.3754 14.4757L27.91 16.9427L32.1508 21.1839Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22 39.5L41 39.5V42.5L22 42.5V39.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.4894 25.3437C39.324 24.8854 38.676 24.8854 38.5106 25.3437L37.4412 28.3072C37.4187 28.3696 37.3696 28.4187 37.3072 28.4412L34.3437 29.5106C33.8854 29.676 33.8854 30.324 34.3437 30.4894L37.3072 31.5588C37.3696 31.5813 37.4187 31.6304 37.4412 31.6928L38.5106 34.6563C38.676 35.1146 39.324 35.1146 39.4894 34.6563L40.5588 31.6928C40.5813 31.6304 40.6304 31.5813 40.6928 31.5588L43.6563 30.4894C44.1146 30.324 44.1146 29.676 43.6563 29.5106L40.6928 28.4412C40.6304 28.4187 40.5813 28.3696 40.5588 28.3072L39.4894 25.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.51059 16.3437C8.67595 15.8854 9.32405 15.8854 9.48941 16.3437L10.5588 19.3072C10.5813 19.3696 10.6304 19.4187 10.6928 19.4412L13.6563 20.5106C14.1146 20.676 14.1146 21.324 13.6563 21.4894L10.6928 22.5588C10.6304 22.5813 10.5813 22.6304 10.5588 22.6928L9.48941 25.6563C9.32405 26.1146 8.67595 26.1146 8.51059 25.6563L7.44122 22.6928C7.41871 22.6304 7.36957 22.5813 7.30716 22.5588L4.34369 21.4894C3.88544 21.324 3.88543 20.676 4.34369 20.5106L7.30716 19.4412C7.36957 19.4187 7.41871 19.3696 7.44122 19.3072L8.51059 16.3437Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/magic-wand/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MagicWandProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const MagicWand = ({ fill = false, thick = false, size = 24 }: MagicWandProps) => {
+export const MagicWand = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MagicWandProps) => {
   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="M15.7659 2.51554C16.0139 1.82815 16.9861 1.82815 17.2341 2.51554L18.8382 6.96075C18.8719 7.05435 18.9456 7.12806 19.0393 7.16184L23.4845 8.76589C24.1718 9.01393 24.1718 9.98607 23.4845 10.2341L19.0393 11.8382C18.9456 11.8719 18.8719 11.9456 18.8382 12.0393L17.2341 16.4845C16.9861 17.1718 16.0139 17.1718 15.7659 16.4845L14.1618 12.0393C14.1281 11.9456 14.0544 11.8719 13.9607 11.8382L9.51554 10.2341C8.82815 9.98607 8.82815 9.01393 9.51554 8.76589L13.9607 7.16184C14.0544 7.12806 14.1281 7.05435 14.1618 6.96075L15.7659 2.51554Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.7086 7.42368C34.9275 6.64263 33.6612 6.64263 32.8801 7.42368L7.42429 32.8795C6.64324 33.6606 6.64324 34.9269 7.42429 35.7079L12.2913 40.5749C13.0723 41.356 14.3386 41.356 15.1197 40.5749L40.5755 15.1191C41.3566 14.338 41.3566 13.0717 40.5755 12.2906L35.7086 7.42368ZM10.2527 34.2937L28.2698 16.2767L31.7225 19.7294L13.7055 37.7465L10.2527 34.2937ZM34.2985 10.257L30.3956 14.1599L33.8404 17.6046L37.7433 13.7018L34.2985 10.257Z" fill="currentColor"/>
-<path d="M31.4894 30.3437C31.324 29.8854 30.676 29.8854 30.5106 30.3437L29.4412 33.3072C29.4187 33.3696 29.3696 33.4187 29.3072 33.4412L26.3437 34.5106C25.8854 34.676 25.8854 35.324 26.3437 35.4894L29.3072 36.5588C29.3696 36.5813 29.4187 36.6304 29.4412 36.6928L30.5106 39.6563C30.676 40.1146 31.324 40.1146 31.4894 39.6563L32.5588 36.6928C32.5813 36.6304 32.6304 36.5813 32.6928 36.5588L35.6563 35.4894C36.1146 35.324 36.1146 34.676 35.6563 34.5106L32.6928 33.4412C32.6304 33.4187 32.5813 33.3696 32.5588 33.3072L31.4894 30.3437Z" fill="currentColor"/>
-<path d="M39.8638 21.4468C40.0787 20.8511 40.9213 20.8511 41.1362 21.4468L42.5264 25.2993C42.5557 25.3804 42.6196 25.4443 42.7007 25.4736L46.5532 26.8638C47.1489 27.0787 47.1489 27.9213 46.5532 28.1362L42.7007 29.5264C42.6196 29.5557 42.5557 29.6196 42.5264 29.7007L41.1362 33.5532C40.9213 34.1489 40.0787 34.1489 39.8638 33.5532L38.4736 29.7007C38.4443 29.6196 38.3804 29.5557 38.2993 29.5264L34.4468 28.1362C33.8511 27.9213 33.8511 27.0787 34.4468 26.8638L38.2993 25.4736C38.3804 25.4443 38.4443 25.3804 38.4736 25.2993L39.8638 21.4468Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7658 2.51554C16.0138 1.82815 16.9859 1.82815 17.234 2.51554L18.838 6.96075C18.8718 7.05435 18.9455 7.12806 19.0391 7.16184L23.4843 8.76589C24.1717 9.01393 24.1717 9.98607 23.4843 10.2341L19.0391 11.8382C18.9455 11.8719 18.8718 11.9456 18.838 12.0393L17.234 16.4845C16.9859 17.1718 16.0138 17.1718 15.7658 16.4845L14.1617 12.0393C14.1279 11.9456 14.0542 11.8719 13.9606 11.8382L9.51542 10.2341C8.82803 9.98607 8.82803 9.01393 9.51542 8.76589L13.9606 7.16184C14.0542 7.12806 14.1279 7.05435 14.1617 6.96075L15.7658 2.51554Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.7084 7.42368C34.9274 6.64263 33.6611 6.64263 32.88 7.42368L7.42417 32.8795C6.64312 33.6606 6.64312 34.9269 7.42416 35.7079L12.2911 40.5749C13.0722 41.356 14.3385 41.356 15.1196 40.5749L40.5754 15.1191C41.3564 14.338 41.3564 13.0717 40.5754 12.2906L35.7084 7.42368ZM10.2526 34.2937L28.2697 16.2767L31.7224 19.7294L13.7053 37.7465L10.2526 34.2937ZM34.2984 10.257L30.3955 14.1599L33.8403 17.6046L37.7432 13.7018L34.2984 10.257Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31.4893 30.3437C31.3239 29.8854 30.6758 29.8854 30.5105 30.3437L29.4411 33.3072C29.4186 33.3696 29.3694 33.4187 29.307 33.4412L26.3436 34.5106C25.8853 34.676 25.8853 35.324 26.3436 35.4894L29.307 36.5588C29.3694 36.5813 29.4186 36.6304 29.4411 36.6928L30.5105 39.6563C30.6758 40.1146 31.3239 40.1146 31.4893 39.6563L32.5587 36.6928C32.5812 36.6304 32.6303 36.5813 32.6927 36.5588L35.6562 35.4894C36.1144 35.324 36.1144 34.676 35.6562 34.5106L32.6927 33.4412C32.6303 33.4187 32.5812 33.3696 32.5587 33.3072L31.4893 30.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.8636 21.4468C40.0786 20.8511 40.9211 20.8511 41.1361 21.4468L42.5263 25.2993C42.5556 25.3804 42.6194 25.4443 42.7006 25.4736L46.5531 26.8638C47.1488 27.0787 47.1488 27.9213 46.5531 28.1362L42.7006 29.5264C42.6194 29.5557 42.5556 29.6196 42.5263 29.7007L41.1361 33.5532C40.9211 34.1489 40.0786 34.1489 39.8636 33.5532L38.4735 29.7007C38.4442 29.6196 38.3803 29.5557 38.2992 29.5264L34.4467 28.1362C33.8509 27.9213 33.8509 27.0787 34.4467 26.8638L38.2992 25.4736C38.3803 25.4443 38.4442 25.3804 38.4735 25.2993L39.8636 21.4468Z" 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="M15.7659 2.51554C16.0139 1.82815 16.9861 1.82815 17.2341 2.51554L18.8382 6.96075C18.8719 7.05435 18.9456 7.12806 19.0393 7.16184L23.4845 8.76589C24.1718 9.01393 24.1718 9.98607 23.4845 10.2341L19.0393 11.8382C18.9456 11.8719 18.8719 11.9456 18.8382 12.0393L17.2341 16.4845C16.9861 17.1718 16.0139 17.1718 15.7659 16.4845L14.1618 12.0393C14.1281 11.9456 14.0544 11.8719 13.9607 11.8382L9.51554 10.2341C8.82815 9.98607 8.82815 9.01393 9.51554 8.76589L13.9607 7.16184C14.0544 7.12806 14.1281 7.05435 14.1618 6.96075L15.7659 2.51554Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.7086 7.42368C34.9275 6.64263 33.6612 6.64263 32.8801 7.42368L7.42429 32.8795C6.64324 33.6606 6.64324 34.9269 7.42429 35.7079L12.2913 40.5749C13.0723 41.356 14.3386 41.356 15.1197 40.5749L40.5755 15.1191C41.3566 14.338 41.3566 13.0717 40.5755 12.2906L35.7086 7.42368ZM10.2527 34.2937L28.2698 16.2767L31.7225 19.7294L13.7055 37.7465L10.2527 34.2937ZM34.2985 10.257L30.3956 14.1599L33.8404 17.6046L37.7433 13.7018L34.2985 10.257Z" fill="currentColor"/>
-<path d="M31.4894 30.3437C31.324 29.8854 30.676 29.8854 30.5106 30.3437L29.4412 33.3072C29.4187 33.3696 29.3696 33.4187 29.3072 33.4412L26.3437 34.5106C25.8854 34.676 25.8854 35.324 26.3437 35.4894L29.3072 36.5588C29.3696 36.5813 29.4187 36.6304 29.4412 36.6928L30.5106 39.6563C30.676 40.1146 31.324 40.1146 31.4894 39.6563L32.5588 36.6928C32.5813 36.6304 32.6304 36.5813 32.6928 36.5588L35.6563 35.4894C36.1146 35.324 36.1146 34.676 35.6563 34.5106L32.6928 33.4412C32.6304 33.4187 32.5813 33.3696 32.5588 33.3072L31.4894 30.3437Z" fill="currentColor"/>
-<path d="M39.8638 21.4468C40.0787 20.8511 40.9213 20.8511 41.1362 21.4468L42.5264 25.2993C42.5557 25.3804 42.6196 25.4443 42.7007 25.4736L46.5532 26.8638C47.1489 27.0787 47.1489 27.9213 46.5532 28.1362L42.7007 29.5264C42.6196 29.5557 42.5557 29.6196 42.5264 29.7007L41.1362 33.5532C40.9213 34.1489 40.0787 34.1489 39.8638 33.5532L38.4736 29.7007C38.4443 29.6196 38.3804 29.5557 38.2993 29.5264L34.4468 28.1362C33.8511 27.9213 33.8511 27.0787 34.4468 26.8638L38.2993 25.4736C38.3804 25.4443 38.4443 25.3804 38.4736 25.2993L39.8638 21.4468Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7658 2.51554C16.0138 1.82815 16.9859 1.82815 17.234 2.51554L18.838 6.96075C18.8718 7.05435 18.9455 7.12806 19.0391 7.16184L23.4843 8.76589C24.1717 9.01393 24.1717 9.98607 23.4843 10.2341L19.0391 11.8382C18.9455 11.8719 18.8718 11.9456 18.838 12.0393L17.234 16.4845C16.9859 17.1718 16.0138 17.1718 15.7658 16.4845L14.1617 12.0393C14.1279 11.9456 14.0542 11.8719 13.9606 11.8382L9.51542 10.2341C8.82803 9.98607 8.82803 9.01393 9.51542 8.76589L13.9606 7.16184C14.0542 7.12806 14.1279 7.05435 14.1617 6.96075L15.7658 2.51554Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.7084 7.42368C34.9274 6.64263 33.6611 6.64263 32.88 7.42368L7.42417 32.8795C6.64312 33.6606 6.64312 34.9269 7.42416 35.7079L12.2911 40.5749C13.0722 41.356 14.3385 41.356 15.1196 40.5749L40.5754 15.1191C41.3564 14.338 41.3564 13.0717 40.5754 12.2906L35.7084 7.42368ZM10.2526 34.2937L28.2697 16.2767L31.7224 19.7294L13.7053 37.7465L10.2526 34.2937ZM34.2984 10.257L30.3955 14.1599L33.8403 17.6046L37.7432 13.7018L34.2984 10.257Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31.4893 30.3437C31.3239 29.8854 30.6758 29.8854 30.5105 30.3437L29.4411 33.3072C29.4186 33.3696 29.3694 33.4187 29.307 33.4412L26.3436 34.5106C25.8853 34.676 25.8853 35.324 26.3436 35.4894L29.307 36.5588C29.3694 36.5813 29.4186 36.6304 29.4411 36.6928L30.5105 39.6563C30.6758 40.1146 31.3239 40.1146 31.4893 39.6563L32.5587 36.6928C32.5812 36.6304 32.6303 36.5813 32.6927 36.5588L35.6562 35.4894C36.1144 35.324 36.1144 34.676 35.6562 34.5106L32.6927 33.4412C32.6303 33.4187 32.5812 33.3696 32.5587 33.3072L31.4893 30.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.8636 21.4468C40.0786 20.8511 40.9211 20.8511 41.1361 21.4468L42.5263 25.2993C42.5556 25.3804 42.6194 25.4443 42.7006 25.4736L46.5531 26.8638C47.1488 27.0787 47.1488 27.9213 46.5531 28.1362L42.7006 29.5264C42.6194 29.5557 42.5556 29.6196 42.5263 29.7007L41.1361 33.5532C40.9211 34.1489 40.0786 34.1489 39.8636 33.5532L38.4735 29.7007C38.4442 29.6196 38.3803 29.5557 38.2992 29.5264L34.4467 28.1362C33.8509 27.9213 33.8509 27.0787 34.4467 26.8638L38.2992 25.4736C38.3803 25.4443 38.4442 25.3804 38.4735 25.2993L39.8636 21.4468Z" 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="M15.7659 2.51554C16.0139 1.82815 16.9861 1.82815 17.2341 2.51554L18.8382 6.96075C18.8719 7.05435 18.9456 7.12806 19.0393 7.16184L23.4845 8.76589C24.1718 9.01393 24.1718 9.98607 23.4845 10.2341L19.0393 11.8382C18.9456 11.8719 18.8719 11.9456 18.8382 12.0393L17.2341 16.4845C16.9861 17.1718 16.0139 17.1718 15.7659 16.4845L14.1618 12.0393C14.1281 11.9456 14.0544 11.8719 13.9607 11.8382L9.51554 10.2341C8.82815 9.98607 8.82815 9.01393 9.51554 8.76589L13.9607 7.16184C14.0544 7.12806 14.1281 7.05435 14.1618 6.96075L15.7659 2.51554Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.7086 7.42368C34.9275 6.64263 33.6612 6.64263 32.8801 7.42368L7.42429 32.8795C6.64324 33.6606 6.64324 34.9269 7.42429 35.7079L12.2913 40.5749C13.0723 41.356 14.3386 41.356 15.1197 40.5749L40.5755 15.1191C41.3566 14.338 41.3566 13.0717 40.5755 12.2906L35.7086 7.42368ZM11.6669 34.2937L28.9769 16.9838L31.0154 19.0223L13.7055 36.3323L11.6669 34.2937ZM34.2985 11.6712L31.8098 14.1599L33.8404 16.1904L36.3291 13.7018L34.2985 11.6712Z" fill="currentColor"/>
-<path d="M31.4894 30.3437C31.324 29.8854 30.676 29.8854 30.5106 30.3437L29.4412 33.3072C29.4187 33.3696 29.3696 33.4187 29.3072 33.4412L26.3437 34.5106C25.8854 34.676 25.8854 35.324 26.3437 35.4894L29.3072 36.5588C29.3696 36.5813 29.4187 36.6304 29.4412 36.6928L30.5106 39.6563C30.676 40.1146 31.324 40.1146 31.4894 39.6563L32.5588 36.6928C32.5813 36.6304 32.6304 36.5813 32.6928 36.5588L35.6563 35.4894C36.1146 35.324 36.1146 34.676 35.6563 34.5106L32.6928 33.4412C32.6304 33.4187 32.5813 33.3696 32.5588 33.3072L31.4894 30.3437Z" fill="currentColor"/>
-<path d="M39.8638 21.4468C40.0787 20.8511 40.9213 20.8511 41.1362 21.4468L42.5264 25.2993C42.5557 25.3804 42.6196 25.4443 42.7007 25.4736L46.5532 26.8638C47.1489 27.0787 47.1489 27.9213 46.5532 28.1362L42.7007 29.5264C42.6196 29.5557 42.5557 29.6196 42.5264 29.7007L41.1362 33.5532C40.9213 34.1489 40.0787 34.1489 39.8638 33.5532L38.4736 29.7007C38.4443 29.6196 38.3804 29.5557 38.2993 29.5264L34.4468 28.1362C33.8511 27.9213 33.8511 27.0787 34.4468 26.8638L38.2993 25.4736C38.3804 25.4443 38.4443 25.3804 38.4736 25.2993L39.8638 21.4468Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7658 2.51554C16.0138 1.82815 16.9859 1.82815 17.234 2.51554L18.838 6.96075C18.8718 7.05435 18.9455 7.12806 19.0391 7.16184L23.4843 8.76589C24.1717 9.01393 24.1717 9.98607 23.4843 10.2341L19.0391 11.8382C18.9455 11.8719 18.8718 11.9456 18.838 12.0393L17.234 16.4845C16.9859 17.1718 16.0138 17.1718 15.7658 16.4845L14.1617 12.0393C14.1279 11.9456 14.0542 11.8719 13.9606 11.8382L9.51542 10.2341C8.82803 9.98607 8.82803 9.01393 9.51542 8.76589L13.9606 7.16184C14.0542 7.12806 14.1279 7.05435 14.1617 6.96075L15.7658 2.51554Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.7084 7.42368C34.9274 6.64263 33.6611 6.64263 32.88 7.42368L7.42417 32.8795C6.64312 33.6606 6.64312 34.9269 7.42416 35.7079L12.2911 40.5749C13.0722 41.356 14.3385 41.356 15.1196 40.5749L40.5754 15.1191C41.3564 14.338 41.3564 13.0717 40.5754 12.2906L35.7084 7.42368ZM11.6668 34.2937L28.9768 16.9838L31.0153 19.0223L13.7053 36.3323L11.6668 34.2937ZM34.2984 11.6712L31.8097 14.1599L33.8403 16.1904L36.3289 13.7018L34.2984 11.6712Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31.4893 30.3437C31.3239 29.8854 30.6758 29.8854 30.5105 30.3437L29.4411 33.3072C29.4186 33.3696 29.3694 33.4187 29.307 33.4412L26.3436 34.5106C25.8853 34.676 25.8853 35.324 26.3436 35.4894L29.307 36.5588C29.3694 36.5813 29.4186 36.6304 29.4411 36.6928L30.5105 39.6563C30.6758 40.1146 31.3239 40.1146 31.4893 39.6563L32.5587 36.6928C32.5812 36.6304 32.6303 36.5813 32.6927 36.5588L35.6562 35.4894C36.1144 35.324 36.1144 34.676 35.6562 34.5106L32.6927 33.4412C32.6303 33.4187 32.5812 33.3696 32.5587 33.3072L31.4893 30.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.8636 21.4468C40.0786 20.8511 40.9211 20.8511 41.1361 21.4468L42.5263 25.2993C42.5556 25.3804 42.6194 25.4443 42.7006 25.4736L46.5531 26.8638C47.1488 27.0787 47.1488 27.9213 46.5531 28.1362L42.7006 29.5264C42.6194 29.5557 42.5556 29.6196 42.5263 29.7007L41.1361 33.5532C40.9211 34.1489 40.0786 34.1489 39.8636 33.5532L38.4735 29.7007C38.4442 29.6196 38.3803 29.5557 38.2992 29.5264L34.4467 28.1362C33.8509 27.9213 33.8509 27.0787 34.4467 26.8638L38.2992 25.4736C38.3803 25.4443 38.4442 25.3804 38.4735 25.2993L39.8636 21.4468Z" 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="M15.7659 2.51554C16.0139 1.82815 16.9861 1.82815 17.2341 2.51554L18.8382 6.96075C18.8719 7.05435 18.9456 7.12806 19.0393 7.16184L23.4845 8.76589C24.1718 9.01393 24.1718 9.98607 23.4845 10.2341L19.0393 11.8382C18.9456 11.8719 18.8719 11.9456 18.8382 12.0393L17.2341 16.4845C16.9861 17.1718 16.0139 17.1718 15.7659 16.4845L14.1618 12.0393C14.1281 11.9456 14.0544 11.8719 13.9607 11.8382L9.51554 10.2341C8.82815 9.98607 8.82815 9.01393 9.51554 8.76589L13.9607 7.16184C14.0544 7.12806 14.1281 7.05435 14.1618 6.96075L15.7659 2.51554Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M35.7086 7.42368C34.9275 6.64263 33.6612 6.64263 32.8801 7.42368L7.42429 32.8795C6.64324 33.6606 6.64324 34.9269 7.42429 35.7079L12.2913 40.5749C13.0723 41.356 14.3386 41.356 15.1197 40.5749L40.5755 15.1191C41.3566 14.338 41.3566 13.0717 40.5755 12.2906L35.7086 7.42368ZM10.2527 34.2937L28.2698 16.2767L31.7225 19.7294L13.7055 37.7465L10.2527 34.2937ZM34.2985 10.257L30.3956 14.1599L33.8404 17.6046L37.7433 13.7018L34.2985 10.257Z" fill="currentColor"/>
-<path d="M31.4894 30.3437C31.324 29.8854 30.676 29.8854 30.5106 30.3437L29.4412 33.3072C29.4187 33.3696 29.3696 33.4187 29.3072 33.4412L26.3437 34.5106C25.8854 34.676 25.8854 35.324 26.3437 35.4894L29.3072 36.5588C29.3696 36.5813 29.4187 36.6304 29.4412 36.6928L30.5106 39.6563C30.676 40.1146 31.324 40.1146 31.4894 39.6563L32.5588 36.6928C32.5813 36.6304 32.6304 36.5813 32.6928 36.5588L35.6563 35.4894C36.1146 35.324 36.1146 34.676 35.6563 34.5106L32.6928 33.4412C32.6304 33.4187 32.5813 33.3696 32.5588 33.3072L31.4894 30.3437Z" fill="currentColor"/>
-<path d="M39.8638 21.4468C40.0787 20.8511 40.9213 20.8511 41.1362 21.4468L42.5264 25.2993C42.5557 25.3804 42.6196 25.4443 42.7007 25.4736L46.5532 26.8638C47.1489 27.0787 47.1489 27.9213 46.5532 28.1362L42.7007 29.5264C42.6196 29.5557 42.5557 29.6196 42.5264 29.7007L41.1362 33.5532C40.9213 34.1489 40.0787 34.1489 39.8638 33.5532L38.4736 29.7007C38.4443 29.6196 38.3804 29.5557 38.2993 29.5264L34.4468 28.1362C33.8511 27.9213 33.8511 27.0787 34.4468 26.8638L38.2993 25.4736C38.3804 25.4443 38.4443 25.3804 38.4736 25.2993L39.8638 21.4468Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7658 2.51554C16.0138 1.82815 16.9859 1.82815 17.234 2.51554L18.838 6.96075C18.8718 7.05435 18.9455 7.12806 19.0391 7.16184L23.4843 8.76589C24.1717 9.01393 24.1717 9.98607 23.4843 10.2341L19.0391 11.8382C18.9455 11.8719 18.8718 11.9456 18.838 12.0393L17.234 16.4845C16.9859 17.1718 16.0138 17.1718 15.7658 16.4845L14.1617 12.0393C14.1279 11.9456 14.0542 11.8719 13.9606 11.8382L9.51542 10.2341C8.82803 9.98607 8.82803 9.01393 9.51542 8.76589L13.9606 7.16184C14.0542 7.12806 14.1279 7.05435 14.1617 6.96075L15.7658 2.51554Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M35.7084 7.42368C34.9274 6.64263 33.6611 6.64263 32.88 7.42368L7.42417 32.8795C6.64312 33.6606 6.64312 34.9269 7.42416 35.7079L12.2911 40.5749C13.0722 41.356 14.3385 41.356 15.1196 40.5749L40.5754 15.1191C41.3564 14.338 41.3564 13.0717 40.5754 12.2906L35.7084 7.42368ZM10.2526 34.2937L28.2697 16.2767L31.7224 19.7294L13.7053 37.7465L10.2526 34.2937ZM34.2984 10.257L30.3955 14.1599L33.8403 17.6046L37.7432 13.7018L34.2984 10.257Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31.4893 30.3437C31.3239 29.8854 30.6758 29.8854 30.5105 30.3437L29.4411 33.3072C29.4186 33.3696 29.3694 33.4187 29.307 33.4412L26.3436 34.5106C25.8853 34.676 25.8853 35.324 26.3436 35.4894L29.307 36.5588C29.3694 36.5813 29.4186 36.6304 29.4411 36.6928L30.5105 39.6563C30.6758 40.1146 31.3239 40.1146 31.4893 39.6563L32.5587 36.6928C32.5812 36.6304 32.6303 36.5813 32.6927 36.5588L35.6562 35.4894C36.1144 35.324 36.1144 34.676 35.6562 34.5106L32.6927 33.4412C32.6303 33.4187 32.5812 33.3696 32.5587 33.3072L31.4893 30.3437Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.8636 21.4468C40.0786 20.8511 40.9211 20.8511 41.1361 21.4468L42.5263 25.2993C42.5556 25.3804 42.6194 25.4443 42.7006 25.4736L46.5531 26.8638C47.1488 27.0787 47.1488 27.9213 46.5531 28.1362L42.7006 29.5264C42.6194 29.5557 42.5556 29.6196 42.5263 29.7007L41.1361 33.5532C40.9211 34.1489 40.0786 34.1489 39.8636 33.5532L38.4735 29.7007C38.4442 29.6196 38.3803 29.5557 38.2992 29.5264L34.4467 28.1362C33.8509 27.9213 33.8509 27.0787 34.4467 26.8638L38.2992 25.4736C38.3803 25.4443 38.4442 25.3804 38.4735 25.2993L39.8636 21.4468Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/make-easy/index.tsx

@@ -1,47 +1,48 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MakeEasyProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const MakeEasy = ({ fill = false, thick = false, size = 24 }: MakeEasyProps) => {
+export const MakeEasy = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MakeEasyProps) => {
   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="M35.2577 9.2382C34.5007 7.84378 32.4993 7.84378 31.7423 9.2382L25.6037 20.5461C24.8803 21.8788 25.8451 23.5003 27.3614 23.5003H39.6386C41.1549 23.5003 42.1197 21.8788 41.3963 20.5461L35.2577 9.2382ZM33.5 12.2884L29.0421 20.5003H37.9579L33.5 12.2884Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M7 8.50032V23.5003H22V8.50032H7ZM19 11.5003H10V20.5003H19V11.5003Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M22 34.0003C22 38.1425 18.6421 41.5003 14.5 41.5003C10.3579 41.5003 7 38.1425 7 34.0003C7 29.8582 10.3579 26.5003 14.5 26.5003C18.6421 26.5003 22 29.8582 22 34.0003ZM19 34.0003C19 36.4856 16.9853 38.5003 14.5 38.5003C12.0147 38.5003 10 36.4856 10 34.0003C10 31.515 12.0147 29.5003 14.5 29.5003C16.9853 29.5003 19 31.515 19 34.0003Z" fill="currentColor"/>
-<path d="M26 31.5003V28.5003H41V31.5003H26Z" fill="currentColor"/>
-<path d="M26 36.5003V39.5003H41V36.5003H26Z" 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="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 12.2874L29.0421 20.4993H37.9579L33.5 12.2874Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM19 11.4993H10V20.4993H19V11.4993Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM19 33.9993C19 36.4846 16.9853 38.4993 14.5 38.4993C12.0147 38.4993 10 36.4846 10 33.9993C10 31.5141 12.0147 29.4993 14.5 29.4993C16.9853 29.4993 19 31.5141 19 33.9993Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 31.4993V28.4993H41V31.4993H26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 36.4993V39.4993H41V36.4993H26Z" 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="M35.2577 9.2382C34.5007 7.84378 32.4993 7.84378 31.7423 9.2382L25.6037 20.5461C24.8803 21.8788 25.8451 23.5003 27.3614 23.5003H39.6386C41.1549 23.5003 42.1197 21.8788 41.3963 20.5461L35.2577 9.2382ZM33.5 12.2884L29.0421 20.5003H37.9579L33.5 12.2884Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M7 8.50032V23.5003H22V8.50032H7ZM19 11.5003H10V20.5003H19V11.5003Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M22 34.0003C22 38.1425 18.6421 41.5003 14.5 41.5003C10.3579 41.5003 7 38.1425 7 34.0003C7 29.8582 10.3579 26.5003 14.5 26.5003C18.6421 26.5003 22 29.8582 22 34.0003ZM19 34.0003C19 36.4856 16.9853 38.5003 14.5 38.5003C12.0147 38.5003 10 36.4856 10 34.0003C10 31.515 12.0147 29.5003 14.5 29.5003C16.9853 29.5003 19 31.515 19 34.0003Z" fill="currentColor"/>
-<path d="M26 31.5003V28.5003H41V31.5003H26Z" fill="currentColor"/>
-<path d="M26 36.5003V39.5003H41V36.5003H26Z" 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="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 12.2874L29.0421 20.4993H37.9579L33.5 12.2874Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM19 11.4993H10V20.4993H19V11.4993Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM19 33.9993C19 36.4846 16.9853 38.4993 14.5 38.4993C12.0147 38.4993 10 36.4846 10 33.9993C10 31.5141 12.0147 29.4993 14.5 29.4993C16.9853 29.4993 19 31.5141 19 33.9993Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 31.4993V28.4993H41V31.4993H26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 36.4993V39.4993H41V36.4993H26Z" 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="M35.2577 9.2382C34.5007 7.84378 32.4993 7.84378 31.7423 9.2382L25.6037 20.5461C24.8803 21.8788 25.8451 23.5003 27.3614 23.5003H39.6386C41.1549 23.5003 42.1197 21.8788 41.3963 20.5461L35.2577 9.2382ZM33.5 14.3844L30.7228 19.5003H36.2772L33.5 14.3844Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M7 8.50032V23.5003H22V8.50032H7ZM18 12.5003H11V19.5003H18V12.5003Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M22 34.0003C22 38.1425 18.6421 41.5003 14.5 41.5003C10.3579 41.5003 7 38.1425 7 34.0003C7 29.8582 10.3579 26.5003 14.5 26.5003C18.6421 26.5003 22 29.8582 22 34.0003ZM18 34.0003C18 35.9333 16.433 37.5003 14.5 37.5003C12.567 37.5003 11 35.9333 11 34.0003C11 32.0673 12.567 30.5003 14.5 30.5003C16.433 30.5003 18 32.0673 18 34.0003Z" fill="currentColor"/>
-<path d="M26 32.0003V28.0003H41V32.0003H26Z" fill="currentColor"/>
-<path d="M26 36.0003V40.0003H41V36.0003H26Z" 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="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 14.3835L30.7228 19.4993H36.2772L33.5 14.3835Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM18 12.4993H11V19.4993H18V12.4993Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM18 33.9993C18 35.9323 16.433 37.4993 14.5 37.4993C12.567 37.4993 11 35.9323 11 33.9993C11 32.0663 12.567 30.4993 14.5 30.4993C16.433 30.4993 18 32.0663 18 33.9993Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 31.9993V27.9993H41V31.9993H26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 35.9993V39.9993H41V35.9993H26Z" 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="M35.2577 9.2382C34.5007 7.84378 32.4993 7.84378 31.7423 9.2382L25.6037 20.5461C24.8803 21.8788 25.8451 23.5003 27.3614 23.5003H39.6386C41.1549 23.5003 42.1197 21.8788 41.3963 20.5461L35.2577 9.2382ZM33.5 12.2884L29.0421 20.5003H37.9579L33.5 12.2884Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M7 8.50032V23.5003H22V8.50032H7ZM19 11.5003H10V20.5003H19V11.5003Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M22 34.0003C22 38.1425 18.6421 41.5003 14.5 41.5003C10.3579 41.5003 7 38.1425 7 34.0003C7 29.8582 10.3579 26.5003 14.5 26.5003C18.6421 26.5003 22 29.8582 22 34.0003ZM19 34.0003C19 36.4856 16.9853 38.5003 14.5 38.5003C12.0147 38.5003 10 36.4856 10 34.0003C10 31.515 12.0147 29.5003 14.5 29.5003C16.9853 29.5003 19 31.515 19 34.0003Z" fill="currentColor"/>
-<path d="M26 31.5003V28.5003H41V31.5003H26Z" fill="currentColor"/>
-<path d="M26 36.5003V39.5003H41V36.5003H26Z" 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="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 12.2874L29.0421 20.4993H37.9579L33.5 12.2874Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM19 11.4993H10V20.4993H19V11.4993Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM19 33.9993C19 36.4846 16.9853 38.4993 14.5 38.4993C12.0147 38.4993 10 36.4846 10 33.9993C10 31.5141 12.0147 29.4993 14.5 29.4993C16.9853 29.4993 19 31.5141 19 33.9993Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 31.4993V28.4993H41V31.4993H26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 36.4993V39.4993H41V36.4993H26Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/members/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MembersProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Members = ({ fill = false, thick = false, size = 24 }: MembersProps) => {
+export const Members = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MembersProps) => {
   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="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926C3.77876 40.042 3 39.2632 3 38.3027V33.0859C3 26.8427 8.06147 21.7812 14.3047 21.7812H17.7822Z" fill="currentColor"/>
-<path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V33.0859C32.0869 28.7496 30.1567 24.8646 27.1094 22.2412C28.1227 21.9431 29.1949 21.7812 30.3047 21.7812H33.7822Z" fill="currentColor"/>
-<path d="M16.0439 7C19.6455 7.00025 22.5653 9.9199 22.5654 13.5215C22.5654 17.1232 19.6456 20.0437 16.0439 20.0439C12.4421 20.0439 9.52148 17.1233 9.52148 13.5215C9.52163 9.91974 12.4422 7 16.0439 7Z" fill="currentColor"/>
-<path d="M32.0439 7C35.6455 7.00025 38.5653 9.9199 38.5654 13.5215C38.5654 17.1232 35.6456 20.0437 32.0439 20.0439C28.4421 20.0439 25.5215 17.1233 25.5215 13.5215C25.5216 9.91974 28.4422 7 32.0439 7Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926C3.77876 40.042 3 39.2632 3 38.3027V33.0859C3 26.8427 8.06147 21.7812 14.3047 21.7812H17.7822Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V33.0859C32.0869 28.7496 30.1567 24.8646 27.1094 22.2412C28.1227 21.9431 29.1949 21.7812 30.3047 21.7812H33.7822Z" style={{ fill: `var(--${color})` }}/>
+<path d="M16.0439 7C19.6455 7.00025 22.5653 9.9199 22.5654 13.5215C22.5654 17.1232 19.6456 20.0437 16.0439 20.0439C12.4421 20.0439 9.52148 17.1233 9.52148 13.5215C9.52163 9.91974 12.4422 7 16.0439 7Z" style={{ fill: `var(--${color})` }}/>
+<path d="M32.0439 7C35.6455 7.00025 38.5653 9.9199 38.5654 13.5215C38.5654 17.1232 35.6456 20.0437 32.0439 20.0439C28.4421 20.0439 25.5215 17.1233 25.5215 13.5215C25.5216 9.91974 28.4422 7 32.0439 7Z" 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="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 24.7812C9.86169 24.7813 6.23322 28.2705 6.01074 32.6582L6 33.0859V37.042H26.0869V33.0859C26.0869 28.4996 22.3686 24.7812 17.7822 24.7812H14.3047Z" fill="currentColor"/>
-<path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V37.042H42.0869V33.0859C42.0869 28.4996 38.3686 24.7812 33.7822 24.7812H30.3047C30.0195 24.7812 29.7377 24.7952 29.46 24.8232C28.7837 23.8692 27.9937 23.0015 27.1094 22.2402C27.9445 21.9946 28.8194 21.8417 29.7227 21.7959L30.3047 21.7812H33.7822Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5323 20.0439 16.043 20.0439L15.708 20.0352C12.2619 19.8607 9.52148 17.0109 9.52148 13.5215C9.52162 9.91982 12.4413 7.00013 16.043 7ZM16.043 10C14.0982 10.0001 12.5216 11.5767 12.5215 13.5215C12.5215 15.4664 14.0981 17.0438 16.043 17.0439C17.988 17.0439 19.5654 15.4665 19.5654 13.5215C19.5653 11.5766 17.9879 10 16.043 10Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M32.043 7C35.6447 7 38.5653 9.91974 38.5654 13.5215L38.5566 13.8574C38.3819 17.3033 35.5323 20.0439 32.043 20.0439L31.708 20.0352C28.2619 19.8607 25.5215 17.0109 25.5215 13.5215C25.5216 9.91982 28.4413 7.00013 32.043 7ZM32.043 10C30.0982 10.0001 28.5216 11.5767 28.5215 13.5215C28.5215 15.4664 30.0981 17.0438 32.043 17.0439C33.988 17.0439 35.5654 15.4665 35.5654 13.5215C35.5653 11.5766 33.9879 10 32.043 10Z" 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="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 24.7812C9.86169 24.7813 6.23322 28.2705 6.01074 32.6582L6 33.0859V37.042H26.0869V33.0859C26.0869 28.4996 22.3686 24.7812 17.7822 24.7812H14.3047Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V37.042H42.0869V33.0859C42.0869 28.4996 38.3686 24.7812 33.7822 24.7812H30.3047C30.0195 24.7813 29.7377 24.7952 29.46 24.8232C28.7837 23.8692 27.9937 23.0015 27.1094 22.2402C27.9445 21.9946 28.8194 21.8417 29.7227 21.7959L30.3047 21.7812H33.7822Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5323 20.0439 16.043 20.0439L15.708 20.0352C12.2619 19.8607 9.52148 17.0109 9.52148 13.5215C9.52162 9.91982 12.4413 7.00013 16.043 7ZM16.043 10C14.0982 10.0001 12.5216 11.5767 12.5215 13.5215C12.5215 15.4664 14.0981 17.0438 16.043 17.0439C17.988 17.0439 19.5654 15.4665 19.5654 13.5215C19.5653 11.5766 17.9879 10 16.043 10Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M32.043 7C35.6447 7 38.5653 9.91974 38.5654 13.5215L38.5566 13.8574C38.3819 17.3033 35.5323 20.0439 32.043 20.0439L31.708 20.0352C28.2619 19.8607 25.5215 17.0109 25.5215 13.5215C25.5216 9.91982 28.4413 7.00013 32.043 7ZM32.043 10C30.0982 10.0001 28.5216 11.5767 28.5215 13.5215C28.5215 15.4664 30.0981 17.0438 32.043 17.0439C33.988 17.0439 35.5654 15.4665 35.5654 13.5215C35.5653 11.5766 33.9879 10 32.043 10Z" 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="M33.7822 21.7832C40.0254 21.7832 45.0869 26.8447 45.0869 33.0879V38.3047C45.0869 39.2652 44.3082 40.0439 43.3477 40.0439H31.7559C31.969 39.5048 32.0869 38.9176 32.0869 38.3027V36.0439H41.0869V33.0879C41.0869 29.1798 38.0177 25.9885 34.1582 25.793L33.7822 25.7832H30.3047C30.2315 25.7832 30.1586 25.7859 30.0859 25.7881C29.2905 24.4499 28.2836 23.2524 27.1104 22.2422C27.9452 21.9967 28.8197 21.8436 29.7227 21.7979L30.3047 21.7832H33.7822Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 25.7812C10.2706 25.7813 7.00004 29.0519 7 33.0859V36.042H25.0869V33.0859C25.0869 29.1778 22.0177 25.9865 18.1582 25.791L17.7822 25.7812H14.3047Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5322 20.0439 16.043 20.0439L15.708 20.0352C12.262 19.8606 9.52148 17.0108 9.52148 13.5215C9.52162 9.9199 12.4414 7.00026 16.043 7ZM16.043 11C14.6506 11.0003 13.5216 12.129 13.5215 13.5215C13.5215 14.914 14.6505 16.0437 16.043 16.0439C17.4357 16.0439 18.5654 14.9142 18.5654 13.5215C18.5653 12.1289 17.4356 11 16.043 11Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M32.043 7C35.6447 7 38.5653 9.91974 38.5654 13.5215L38.5566 13.8574C38.3819 17.3033 35.5322 20.0439 32.043 20.0439L31.708 20.0352C28.262 19.8606 25.5215 17.0108 25.5215 13.5215C25.5216 9.9199 28.4414 7.00026 32.043 7ZM32.043 11C30.6506 11.0003 29.5216 12.129 29.5215 13.5215C29.5215 14.914 30.6505 16.0437 32.043 16.0439C33.4357 16.0439 34.5654 14.9142 34.5654 13.5215C34.5653 12.1289 33.4356 11 32.043 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="M33.7822 21.7832C40.0254 21.7832 45.0869 26.8447 45.0869 33.0879V38.3047C45.0869 39.2652 44.3082 40.0439 43.3477 40.0439H31.7559C31.969 39.5048 32.0869 38.9176 32.0869 38.3027V36.0439H41.0869V33.0879C41.0869 29.1798 38.0177 25.9885 34.1582 25.793L33.7822 25.7832H30.3047C30.2315 25.7832 30.1586 25.7859 30.0859 25.7881C29.2905 24.4499 28.2836 23.2524 27.1104 22.2422C27.9452 21.9967 28.8197 21.8436 29.7227 21.7979L30.3047 21.7832H33.7822Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 25.7812C10.2706 25.7813 7.00004 29.0519 7 33.0859V36.042H25.0869V33.0859C25.0869 29.1778 22.0177 25.9865 18.1582 25.791L17.7822 25.7812H14.3047Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5322 20.0439 16.043 20.0439L15.708 20.0352C12.262 19.8606 9.52148 17.0108 9.52148 13.5215C9.52162 9.9199 12.4414 7.00026 16.043 7ZM16.043 11C14.6506 11.0003 13.5216 12.129 13.5215 13.5215C13.5215 14.914 14.6505 16.0437 16.043 16.0439C17.4357 16.0439 18.5654 14.9142 18.5654 13.5215C18.5653 12.1289 17.4356 11 16.043 11Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M32.043 7C35.6447 7 38.5653 9.91974 38.5654 13.5215L38.5566 13.8574C38.3819 17.3033 35.5322 20.0439 32.043 20.0439L31.708 20.0352C28.262 19.8606 25.5215 17.0108 25.5215 13.5215C25.5216 9.9199 28.4414 7.00026 32.043 7ZM32.043 11C30.6506 11.0003 29.5216 12.129 29.5215 13.5215C29.5215 14.914 30.6505 16.0437 32.043 16.0439C33.4357 16.0439 34.5654 14.9142 34.5654 13.5215C34.5653 12.1289 33.4356 11 32.043 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 fillRule="evenodd" clipRule="evenodd" d="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 24.7812C9.86169 24.7813 6.23322 28.2705 6.01074 32.6582L6 33.0859V37.042H26.0869V33.0859C26.0869 28.4996 22.3686 24.7812 17.7822 24.7812H14.3047Z" fill="currentColor"/>
-<path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V37.042H42.0869V33.0859C42.0869 28.4996 38.3686 24.7812 33.7822 24.7812H30.3047C30.0195 24.7812 29.7377 24.7952 29.46 24.8232C28.7837 23.8692 27.9937 23.0015 27.1094 22.2402C27.9445 21.9946 28.8194 21.8417 29.7227 21.7959L30.3047 21.7812H33.7822Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5323 20.0439 16.043 20.0439L15.708 20.0352C12.2619 19.8607 9.52148 17.0109 9.52148 13.5215C9.52162 9.91982 12.4413 7.00013 16.043 7ZM16.043 10C14.0982 10.0001 12.5216 11.5767 12.5215 13.5215C12.5215 15.4664 14.0981 17.0438 16.043 17.0439C17.988 17.0439 19.5654 15.4665 19.5654 13.5215C19.5653 11.5766 17.9879 10 16.043 10Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M32.043 7C35.6447 7 38.5653 9.91974 38.5654 13.5215L38.5566 13.8574C38.3819 17.3033 35.5323 20.0439 32.043 20.0439L31.708 20.0352C28.2619 19.8607 25.5215 17.0109 25.5215 13.5215C25.5216 9.91982 28.4413 7.00013 32.043 7ZM32.043 10C30.0982 10.0001 28.5216 11.5767 28.5215 13.5215C28.5215 15.4664 30.0981 17.0438 32.043 17.0439C33.988 17.0439 35.5654 15.4665 35.5654 13.5215C35.5653 11.5766 33.9879 10 32.043 10Z" 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="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 24.7812C9.86169 24.7813 6.23322 28.2705 6.01074 32.6582L6 33.0859V37.042H26.0869V33.0859C26.0869 28.4996 22.3686 24.7812 17.7822 24.7812H14.3047Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V37.042H42.0869V33.0859C42.0869 28.4996 38.3686 24.7812 33.7822 24.7812H30.3047C30.0195 24.7813 29.7377 24.7952 29.46 24.8232C28.7837 23.8692 27.9937 23.0015 27.1094 22.2402C27.9445 21.9946 28.8194 21.8417 29.7227 21.7959L30.3047 21.7812H33.7822Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5323 20.0439 16.043 20.0439L15.708 20.0352C12.2619 19.8607 9.52148 17.0109 9.52148 13.5215C9.52162 9.91982 12.4413 7.00013 16.043 7ZM16.043 10C14.0982 10.0001 12.5216 11.5767 12.5215 13.5215C12.5215 15.4664 14.0981 17.0438 16.043 17.0439C17.988 17.0439 19.5654 15.4665 19.5654 13.5215C19.5653 11.5766 17.9879 10 16.043 10Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M32.043 7C35.6447 7 38.5653 9.91974 38.5654 13.5215L38.5566 13.8574C38.3819 17.3033 35.5323 20.0439 32.043 20.0439L31.708 20.0352C28.2619 19.8607 25.5215 17.0109 25.5215 13.5215C25.5216 9.91982 28.4413 7.00013 32.043 7ZM32.043 10C30.0982 10.0001 28.5216 11.5767 28.5215 13.5215C28.5215 15.4664 30.0981 17.0438 32.043 17.0439C33.988 17.0439 35.5654 15.4665 35.5654 13.5215C35.5653 11.5766 33.9879 10 32.043 10Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/memo/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MemoProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Memo = ({ fill = false, thick = false, size = 24 }: MemoProps) => {
+export const Memo = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MemoProps) => {
   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="M6 40.2222C6 41.2722 6.85121 42.1235 7.90123 42.1235H29.9285C30.4328 42.1235 30.9164 41.9231 31.2729 41.5666L31.4481 41.3915C31.6849 41.2586 31.9114 41.0885 32.1214 40.8785L40.8787 32.1211C41.0887 31.9112 41.2588 31.6846 41.3917 31.4478L41.5666 31.2729C41.9231 30.9164 42.1235 30.4328 42.1235 29.9285V7.90123C42.1235 6.85121 41.2722 6 40.2222 6H7.90123C6.85121 6 6 6.85121 6 7.90124V40.2222ZM30.8025 36.8198L36.8201 30.8023H30.8025L30.8025 36.8198ZM14.4568 14.457H33.6667V18.457H14.4568V14.457ZM14.4568 22.0615H25.1111V26.0615H14.4568V22.0615Z" 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="M6 40.2222C6 41.2722 6.85121 42.1235 7.90123 42.1235H29.9285C30.4328 42.1235 30.9164 41.9231 31.2729 41.5666L31.4481 41.3915C31.6849 41.2586 31.9114 41.0885 32.1214 40.8785L40.8787 32.1211C41.0887 31.9112 41.2588 31.6846 41.3917 31.4478L41.5666 31.2729C41.9231 30.9164 42.1235 30.4328 42.1235 29.9285V7.90123C42.1235 6.85121 41.2722 6 40.2222 6H7.90123C6.85121 6 6 6.85121 6 7.90124V40.2222ZM30.8025 36.8198L36.8201 30.8023H30.8025L30.8025 36.8198ZM14.4568 14.457H33.6667V18.457H14.4568V14.457ZM14.4568 22.0615H25.1111V26.0615H14.4568V22.0615Z" 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="M6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222ZM33.1667 14.957H14.9568V17.957H33.1667V14.957ZM14.9568 22.5615H24.6111V25.5615H14.9568V22.5615ZM30.8643 37.2574L37.2574 30.8643H30.8643L30.8643 37.2574Z" 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="M6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222ZM33.1667 14.957H14.9568V17.957H33.1667V14.957ZM14.9568 22.5615H24.6111V25.5615H14.9568V22.5615ZM30.8643 37.2574L37.2574 30.8643H30.8643L30.8643 37.2574Z" 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="M33.6667 14.457H14.4568V18.457H33.6667V14.457Z" fill="currentColor"/>
-<path d="M25.1111 22.0615H14.4568V26.0615H25.1111V22.0615Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222ZM35.3804 31.8023L31.8024 35.3802V31.8023H35.3804ZM38.1235 27.9998L27.9999 27.9998L27.9999 38.1235H10V10H38.1235V27.9998Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.6667 14.457H14.4568V18.457H33.6667V14.457Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.1111 22.0615H14.4568V26.0615H25.1111V22.0615Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222ZM35.3804 31.8023L31.8024 35.3802V31.8023H35.3804ZM38.1235 27.9998L27.9999 27.9998L27.9999 38.1235H10V10H38.1235V27.9998Z" 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="M33.1667 14.957H14.9568V17.957H33.1667V14.957Z" fill="currentColor"/>
-<path d="M24.6111 22.5615H14.9568V25.5615H24.6111V22.5615Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729ZM9 39.1235V9H39.1235V27.9998H27.9999L27.9999 39.1235H9ZM37.3931 30.9998L30.9999 37.393L30.9999 30.9998H37.3931Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.1667 14.957H14.9568V17.957H33.1667V14.957Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24.6111 22.5615H14.9568V25.5615H24.6111V22.5615Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729ZM9 39.1235V9H39.1235V27.9998H27.9999L27.9999 39.1235H9ZM37.3931 30.9998L30.9999 37.393L30.9999 30.9998H37.3931Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/menu/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface MenuProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Menu = ({ fill = false, thick = false, size = 24 }: MenuProps) => {
+export const Menu = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MenuProps) => {
   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="M9 9.5H39V12.5H9V9.5Z" fill="currentColor"/>
-<path d="M9 22.5H39V25.5H9V22.5Z" fill="currentColor"/>
-<path d="M39 35.5H9V38.5H39V35.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="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 35.5H9V38.5H39V35.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 9.5H39V12.5H9V9.5Z" fill="currentColor"/>
-<path d="M9 22.5H39V25.5H9V22.5Z" fill="currentColor"/>
-<path d="M39 35.5H9V38.5H39V35.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="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 35.5H9V38.5H39V35.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 9H39V13H9V9Z" fill="currentColor"/>
-<path d="M9 22H39V26H9V22Z" fill="currentColor"/>
-<path d="M39 35H9V39H39V35Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 9H39V13H9V9Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 22H39V26H9V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 35H9V39H39V35Z" 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="M9 9.5H39V12.5H9V9.5Z" fill="currentColor"/>
-<path d="M9 22.5H39V25.5H9V22.5Z" fill="currentColor"/>
-<path d="M39 35.5H9V38.5H39V35.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="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 35.5H9V38.5H39V35.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };