@liner-fe/icon 0.0.4 → 0.0.6

package/assets/send/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface SendProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Send = ({ fill = false, thick = false, size = 24 }: SendProps) => {
+export const Send = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: SendProps) => {
   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.023 22.6777C42.4873 23.4174 42.4873 25.5083 41.023 26.248L8.36711 42.7452C6.77581 43.5491 5.00741 42.0265 5.56599 40.3334L9.86135 27.314L32.5025 25.0498C32.785 25.0216 33.0001 24.7839 33.0001 24.5001C33.0001 24.2163 32.785 23.9786 32.5025 23.9503L9.8866 21.6888L5.56594 8.59227C5.00738 6.8992 6.77577 5.37663 8.36707 6.18053L41.023 22.6777Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.0229 22.6772C42.4872 23.4169 42.4872 25.5078 41.0229 26.2475L8.36699 42.7447C6.77568 43.5486 5.00729 42.026 5.56587 40.3329L9.86122 27.3135L32.5024 25.0494C32.7848 25.0211 32.9999 24.7835 32.9999 24.4996C32.9999 24.2158 32.7848 23.9781 32.5024 23.9499L9.88648 21.6883L5.56582 8.59178C5.00726 6.89871 6.77565 5.37614 8.36695 6.18004L41.0229 22.6772Z" 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="M41.0232 22.6777C42.4874 23.4174 42.4874 25.5083 41.0232 26.248L8.36723 42.7452C6.77593 43.5491 5.00754 42.0265 5.56611 40.3334L10.173 26.3697L32.5011 25.03C32.7814 25.0132 33.0002 24.781 33.0002 24.5001C33.0002 24.2192 32.7814 23.987 32.5011 23.9702L10.1979 22.632L5.56606 8.59227C5.0075 6.8992 6.77589 5.37663 8.36719 6.18053L41.0232 22.6777Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.0232 22.6772C42.4874 23.4169 42.4874 25.5078 41.0232 26.2475L8.36723 42.7447C6.77593 43.5486 5.00754 42.026 5.56611 40.3329L10.173 26.3692L32.5011 25.0296C32.7814 25.0127 33.0002 24.7805 33.0002 24.4996C33.0002 24.2188 32.7814 23.9865 32.5011 23.9697L10.1979 22.6315L5.56606 8.59178C5.0075 6.89871 6.77589 5.37614 8.36719 6.18004L41.0232 22.6772Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.566 8.59245C5.00748 6.8995 6.77557 5.37683 8.36678 6.18034L41.023 22.6774C42.4872 23.4171 42.4871 25.5079 41.023 26.2477L8.36678 42.7458C6.77561 43.5492 5.00754 42.0266 5.566 40.3337L10.5953 25.0895C10.7294 24.6827 10.7295 24.2434 10.5953 23.8366L5.566 8.59245ZM14.3551 26.4626L10.8795 36.9948L31.7271 26.4626H14.3551ZM14.3541 22.4626H31.7271L10.8795 11.9313L14.3541 22.4626Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.56606 8.59196C5.00754 6.89901 6.77564 5.37634 8.36684 6.17985L41.0231 22.6769C42.4873 23.4166 42.4871 25.5074 41.0231 26.2472L8.36684 42.7453C6.77567 43.5487 5.0076 42.0261 5.56606 40.3332L10.5954 25.089C10.7295 24.6822 10.7296 24.2429 10.5954 23.8361L5.56606 8.59196ZM14.3551 26.4621L10.8795 36.9943L31.7272 26.4621H14.3551ZM14.3541 22.4621H31.7272L10.8795 11.9308L14.3541 22.4621Z" 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="M41.0231 22.6777C42.4873 23.4174 42.4873 25.5083 41.0231 26.248L8.36717 42.7452C6.77587 43.5491 5.00748 42.0265 5.56605 40.3334L10.5952 25.0897C10.7295 24.6828 10.7295 24.2435 10.5952 23.8365L5.566 8.59227C5.00744 6.8992 6.77583 5.37663 8.36713 6.18053L41.0231 22.6777ZM34.9324 22.9619L9.17247 9.94845L13.4442 22.8966C13.4514 22.9183 13.4584 22.9401 13.4652 22.9619H34.9324ZM13.466 25.9619C13.4589 25.9845 13.4516 26.0071 13.4442 26.0297L9.17253 38.9772L34.9362 25.9619H13.466Z" 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="M41.0232 22.6772C42.4874 23.4169 42.4874 25.5078 41.0232 26.2475L8.36723 42.7447C6.77593 43.5486 5.00754 42.026 5.56611 40.3329L10.5953 25.0892C10.7295 24.6823 10.7296 24.243 10.5953 23.836L5.56606 8.59178C5.0075 6.89871 6.77589 5.37614 8.36719 6.18004L41.0232 22.6772ZM34.9325 22.9614L9.17253 9.94796L13.4443 22.8961C13.4514 22.9179 13.4584 22.9396 13.4653 22.9614H34.9325ZM13.4661 25.9614C13.4589 25.984 13.4517 26.0066 13.4442 26.0292L9.17259 38.9767L34.9362 25.9614H13.4661Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/setting/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface SettingProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Setting = ({ fill = false, thick = false, size = 24 }: SettingProps) => {
+export const Setting = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: SettingProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M29.3334 3L30.3877 9.32595C31.5005 9.81104 32.5474 10.419 33.5113 11.1327L39.5199 8.88167L44.8532 18.1193L39.8996 22.1973C39.966 22.789 40 23.3905 40 24C40 24.6098 39.9659 25.2116 39.8995 25.8036L44.8532 29.8817L39.5199 39.1193L33.5105 36.8679C32.5468 37.5814 31.5002 38.1891 30.3877 38.674L29.3334 45H18.6667L17.6124 38.674C16.4996 38.189 15.4527 37.581 14.4887 36.8673L8.48018 39.1183L3.14685 29.8807L8.10047 25.8027C8.03412 25.211 8.00004 24.6095 8.00004 24C8.00004 23.3902 8.03415 22.7884 8.10057 22.1964L3.14685 18.1183L8.48019 8.88073L14.4896 11.1321C15.4533 10.4186 16.4999 9.81089 17.6124 9.32595L18.6667 3H29.3334ZM38.1925 12.5826L40.9845 17.4184L36.737 20.915L36.9183 22.5315C36.9722 23.0125 37 23.5024 37 24C37 24.4978 36.9722 24.9879 36.9182 25.4691L36.7369 27.0858L40.9845 30.5826L38.1925 35.4184L33.036 33.4866L31.7255 34.4568C30.9418 35.0369 30.0915 35.5305 29.1889 35.924L27.6962 36.5747L26.792 42H21.2081L20.3039 36.5747L18.8112 35.924C17.9083 35.5304 17.0578 35.0367 16.2739 34.4563L14.9633 33.4859L9.80757 35.4174L7.01562 30.5816L11.2631 27.085L11.0818 25.4685C11.0279 24.9875 11 24.4976 11 24C11 23.5022 11.0279 23.0121 11.0819 22.5309L11.2632 20.9142L7.01562 17.4174L9.80757 12.5816L14.9641 14.5134L16.2746 13.5432C17.0583 12.9631 17.9085 12.4695 18.8112 12.076L20.3039 11.4253L21.2081 6H26.792L27.6962 11.4253L29.1889 12.076C30.0918 12.4696 30.9423 12.9633 31.7262 13.5437L33.0367 14.5141L38.1925 12.5826Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" 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="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M29.3334 3L30.3877 9.32595C31.5005 9.81104 32.5474 10.419 33.5113 11.1327L39.5199 8.88167L44.8532 18.1193L39.8996 22.1973C39.966 22.789 40 23.3905 40 24C40 24.6098 39.9659 25.2116 39.8995 25.8036L44.8532 29.8817L39.5199 39.1193L33.5105 36.8679C32.5468 37.5814 31.5002 38.1891 30.3877 38.674L29.3334 45H18.6667L17.6124 38.674C16.4996 38.189 15.4527 37.581 14.4887 36.8673L8.48018 39.1183L3.14685 29.8807L8.10047 25.8027C8.03412 25.211 8.00004 24.6095 8.00004 24C8.00004 23.3902 8.03415 22.7884 8.10057 22.1964L3.14685 18.1183L8.48019 8.88073L14.4896 11.1321C15.4533 10.4186 16.4999 9.81089 17.6124 9.32595L18.6667 3H29.3334ZM38.1925 12.5826L40.9845 17.4184L36.737 20.915L36.9183 22.5315C36.9722 23.0125 37 23.5024 37 24C37 24.4978 36.9722 24.9879 36.9182 25.4691L36.7369 27.0858L40.9845 30.5826L38.1925 35.4184L33.036 33.4866L31.7255 34.4568C30.9418 35.0369 30.0915 35.5305 29.1889 35.924L27.6962 36.5747L26.792 42H21.2081L20.3039 36.5747L18.8112 35.924C17.9083 35.5304 17.0578 35.0367 16.2739 34.4563L14.9633 33.4859L9.80757 35.4174L7.01562 30.5816L11.2631 27.085L11.0818 25.4685C11.0279 24.9875 11 24.4976 11 24C11 23.5022 11.0279 23.0121 11.0819 22.5309L11.2632 20.9142L7.01562 17.4174L9.80757 12.5816L14.9641 14.5134L16.2746 13.5432C17.0583 12.9631 17.9085 12.4695 18.8112 12.076L20.3039 11.4253L21.2081 6H26.792L27.6962 11.4253L29.1889 12.076C30.0918 12.4696 30.9423 12.9633 31.7262 13.5437L33.0367 14.5141L38.1925 12.5826Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM28 24C28 26.2091 26.2091 28 24 28C21.7909 28 20 26.2091 20 24C20 21.7909 21.7909 20 24 20C26.2091 20 28 21.7909 28 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M29.3334 3L30.3877 9.32595C31.5005 9.81104 32.5474 10.419 33.5113 11.1327L39.5199 8.88167L44.8532 18.1193L39.8996 22.1973C39.966 22.789 40 23.3905 40 24C40 24.6098 39.9659 25.2116 39.8995 25.8036L44.8532 29.8817L39.5199 39.1193L33.5105 36.8679C32.5468 37.5814 31.5002 38.1891 30.3877 38.674L29.3334 45H18.6667L17.6124 38.674C16.4996 38.189 15.4527 37.581 14.4887 36.8673L8.48018 39.1183L3.14685 29.8807L8.10047 25.8027C8.03412 25.211 8.00004 24.6095 8.00004 24C8.00004 23.3902 8.03415 22.7884 8.10057 22.1964L3.14685 18.1183L8.48019 8.88073L14.4896 11.1321C15.4533 10.4186 16.4999 9.81089 17.6124 9.32595L18.6667 3H29.3334ZM37.7501 13.8162L39.6949 17.1847L35.6828 20.4876L35.9245 22.643C35.9743 23.087 36 23.5397 36 24C36 24.4605 35.9743 24.9134 35.9244 25.3577L35.6826 27.5132L39.6949 30.8162L37.7501 34.1847L32.8779 32.3594L31.1305 33.653C30.4068 34.1888 29.622 34.6443 28.7893 35.0073L26.7991 35.8749L25.9449 41H22.0552L21.201 35.8749L19.2108 35.0073C18.3778 34.6442 17.5928 34.1885 16.869 33.6526L15.1215 32.3588L10.25 34.1838L8.30521 30.8153L12.3172 27.5124L12.0756 25.357C12.0258 24.913 12 24.4603 12 24C12 23.5395 12.0258 23.0866 12.0756 22.6423L12.3174 20.4868L8.30521 17.1838L10.25 13.8153L15.1222 15.6406L16.8696 14.347C17.5933 13.8112 18.3781 13.3557 19.2108 12.9927L21.201 12.1251L22.0552 7H25.9449L26.7991 12.1251L28.7893 12.9927C29.6223 13.3558 30.4073 13.8115 31.1311 14.3474L32.8786 15.6412L37.7501 13.8162Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM28.0001 24C28.0001 26.2091 26.2093 28 24.0001 28C21.791 28 20.0001 26.2091 20.0001 24C20.0001 21.7909 21.791 20 24.0001 20C26.2093 20 28.0001 21.7909 28.0001 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM37.7502 13.8162L39.695 17.1847L35.683 20.4876L35.9246 22.643C35.9744 23.087 36.0002 23.5397 36.0002 24C36.0002 24.4605 35.9744 24.9134 35.9246 25.3577L35.6828 27.5132L39.695 30.8162L37.7502 34.1847L32.878 32.3594L31.1306 33.653C30.4069 34.1888 29.6221 34.6443 28.7894 35.0073L26.7992 35.8749L25.945 41H22.0553L21.2011 35.8749L19.2109 35.0073C18.378 34.6442 17.5929 34.1885 16.8691 33.6526L15.1216 32.3588L10.2502 34.1838L8.30533 30.8153L12.3174 27.5124L12.0757 25.357C12.0259 24.913 12.0002 24.4603 12.0002 24C12.0002 23.5395 12.0259 23.0866 12.0758 22.6423L12.3176 20.4868L8.30533 17.1838L10.2502 13.8153L15.1223 15.6406L16.8697 14.347C17.5934 13.8112 18.3782 13.3557 19.2109 12.9927L21.2011 12.1251L22.0553 7H25.945L26.7992 12.1251L28.7894 12.9927C29.6224 13.3558 30.4074 13.8115 31.1312 14.3474L32.8787 15.6412L37.7502 13.8162Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M29.3334 3L30.3877 9.32595C31.5005 9.81104 32.5474 10.419 33.5113 11.1327L39.5199 8.88167L44.8532 18.1193L39.8996 22.1973C39.966 22.789 40 23.3905 40 24C40 24.6098 39.9659 25.2116 39.8995 25.8036L44.8532 29.8817L39.5199 39.1193L33.5105 36.8679C32.5468 37.5814 31.5002 38.1891 30.3877 38.674L29.3334 45H18.6667L17.6124 38.674C16.4996 38.189 15.4527 37.581 14.4887 36.8673L8.48018 39.1183L3.14685 29.8807L8.10047 25.8027C8.03412 25.211 8.00004 24.6095 8.00004 24C8.00004 23.3902 8.03415 22.7884 8.10057 22.1964L3.14685 18.1183L8.48019 8.88073L14.4896 11.1321C15.4533 10.4186 16.4999 9.81089 17.6124 9.32595L18.6667 3H29.3334ZM38.1925 12.5826L40.9845 17.4184L36.737 20.915L36.9183 22.5315C36.9722 23.0125 37 23.5024 37 24C37 24.4978 36.9722 24.9879 36.9182 25.4691L36.7369 27.0858L40.9845 30.5826L38.1925 35.4184L33.036 33.4866L31.7255 34.4568C30.9418 35.0369 30.0915 35.5305 29.1889 35.924L27.6962 36.5747L26.792 42H21.2081L20.3039 36.5747L18.8112 35.924C17.9083 35.5304 17.0578 35.0367 16.2739 34.4563L14.9633 33.4859L9.80757 35.4174L7.01562 30.5816L11.2631 27.085L11.0818 25.4685C11.0279 24.9875 11 24.4976 11 24C11 23.5022 11.0279 23.0121 11.0819 22.5309L11.2632 20.9142L7.01562 17.4174L9.80757 12.5816L14.9641 14.5134L16.2746 13.5432C17.0583 12.9631 17.9085 12.4695 18.8112 12.076L20.3039 11.4253L21.2081 6H26.792L27.6962 11.4253L29.1889 12.076C30.0918 12.4696 30.9423 12.9633 31.7262 13.5437L33.0367 14.5141L38.1925 12.5826Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/share/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShareProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Share = ({ fill = false, thick = false, size = 24 }: ShareProps) => {
+export const Share = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShareProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" fill="currentColor"/>
-<path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" fill="currentColor"/>
-<path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" 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="M25.999 10.8271L34.2725 19.1006L37.1009 16.2722L26.8284 5.9997C25.2663 4.4376 22.7337 4.4376 21.1716 5.9997L10.8991 16.2722L13.7275 19.1006L21.999 10.8291V32.9999H25.999V10.8271Z" fill="currentColor"/>
-<path d="M39 38.9999V23.9999H43V38.9999C43 41.2091 41.2091 42.9999 39 42.9999H9C6.79086 42.9999 5 41.2091 5 38.9999V24H9V38.9999H39Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.999 10.8271L34.2725 19.1006L37.1009 16.2722L26.8284 5.9997C25.2663 4.4376 22.7337 4.4376 21.1716 5.9997L10.8991 16.2722L13.7275 19.1006L21.999 10.8291V32.9999H25.999V10.8271Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 38.9999V23.9999H43V38.9999C43 41.2091 41.2091 42.9999 39 42.9999H9C6.79086 42.9999 5 41.2091 5 38.9999V24H9V38.9999H39Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" fill="currentColor"/>
-<path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/sheet-export/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface SheetExportProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const SheetExport = ({ fill = false, thick = false, size = 24 }: SheetExportProps) => {
+export const SheetExport = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: SheetExportProps) => {
   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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" fill="currentColor"/>
-<path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" fill="currentColor"/>
-<path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V22H18V27H26V31H18V36H26V40H6C4.89543 40 4 39.1046 4 38V11ZM8 27V22H14V27H8ZM8 31V36H14V31H8ZM14 18H8V13H14V18ZM18 18H40V13H18V18Z" fill="currentColor"/>
-<path d="M28.0741 37.5758L37.1894 28.4648H31.537V24.4648H40.1842C42.2916 24.4648 43.9999 26.1732 43.9999 28.2805V37.4873H39.9999V31.3112L30.9018 40.4049L28.0741 37.5758Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V22H18V27H26V31H18V36H26V40H6C4.89543 40 4 39.1046 4 38V11ZM8 27V22H14V27H8ZM8 31V36H14V31H8ZM14 18H8V13H14V18ZM18 18H40V13H18V18Z" style={{ fill: `var(--${color})` }}/>
+<path d="M28.0741 37.5758L37.1894 28.4648H31.537V24.4648H40.1842C42.2916 24.4648 43.9999 26.1732 43.9999 28.2805V37.4873H39.9999V31.3112L30.9018 40.4049L28.0741 37.5758Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" fill="currentColor"/>
-<path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/shield/index.tsx

@@ -1,47 +1,34 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShieldProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Shield = ({ fill = false, thick = false, size = 24 }: ShieldProps) => {
+export const Shield = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShieldProps) => {
   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="M7.29089 9.33562C6.51387 9.63026 6 10.3747 6 11.2057V20.9789C6 29.688 10.5324 37.7695 17.9637 42.3109L22.9571 45.3624C23.5973 45.7536 24.4027 45.7536 25.0429 45.3624L30.0363 42.3109C37.4676 37.7695 42 29.688 42 20.9788V11.2057C42 10.3747 41.4861 9.63026 40.7091 9.33562L24.7091 3.2686C24.2522 3.09536 23.7478 3.09536 23.2909 3.2686L7.29089 9.33562ZM16.6763 20.667L22.0738 26.0645L31.4986 16.6726L34.322 19.506L24.2884 29.5046C23.062 30.7268 21.0775 30.7251 19.8531 29.5007L13.8479 23.4955L16.6763 20.667Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M7.29089 9.33562C6.51387 9.63026 6 10.3747 6 11.2057V20.9789C6 29.688 10.5324 37.7695 17.9637 42.3109L22.9571 45.3624C23.5973 45.7536 24.4027 45.7536 25.0429 45.3624L30.0363 42.3109C37.4676 37.7695 42 29.688 42 20.9788V11.2057C42 10.3747 41.4861 9.63026 40.7091 9.33562L24.7091 3.2686C24.2522 3.09536 23.7478 3.09536 23.2909 3.2686L7.29089 9.33562ZM16.6763 20.667L22.0738 26.0645L31.4986 16.6726L34.322 19.506L24.2884 29.5046C23.062 30.7268 21.0775 30.7251 19.8531 29.5007L13.8479 23.4955L16.6763 20.667Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M7.29089 9.33562C6.51387 9.63026 6 10.3747 6 11.2057V20.9789C6 29.688 10.5324 37.7695 17.9637 42.3109L22.9571 45.3624C23.5973 45.7536 24.4027 45.7536 25.0429 45.3624L30.0363 42.3109C37.4676 37.7695 42 29.688 42 20.9788V11.2057C42 10.3747 41.4861 9.63026 40.7091 9.33562L24.7091 3.2686C24.2522 3.09536 23.7478 3.09536 23.2909 3.2686L7.29089 9.33562ZM16.3224 21.0211L22.0728 26.7715L31.8511 17.0273L33.9687 19.1523L23.9351 29.1509C22.904 30.1784 21.2356 30.177 20.2063 29.1477L14.2011 23.1424L16.3224 21.0211Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M7.29089 9.33562C6.51387 9.63026 6 10.3747 6 11.2057V20.9789C6 29.688 10.5324 37.7695 17.9637 42.3109L22.9571 45.3624C23.5973 45.7536 24.4027 45.7536 25.0429 45.3624L30.0363 42.3109C37.4676 37.7695 42 29.688 42 20.9788V11.2057C42 10.3747 41.4861 9.63026 40.7091 9.33562L24.7091 3.2686C24.2522 3.09536 23.7478 3.09536 23.2909 3.2686L7.29089 9.33562ZM16.3224 21.0211L22.0728 26.7715L31.8511 17.0273L33.9687 19.1523L23.9351 29.1509C22.904 30.1784 21.2356 30.177 20.2063 29.1477L14.2011 23.1424L16.3224 21.0211Z" 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">
-<g clip-path="url(#clip0_699_13694)">
-<path d="M16.6763 20.6673L22.0738 26.0648L31.4986 16.6728L34.322 19.5062L24.2884 29.5049C23.062 30.727 21.0775 30.7253 19.8531 29.501L13.8479 23.4957L16.6763 20.6673Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2059C6 10.3749 6.51387 9.6305 7.29089 9.33587L23.2909 3.26885C23.7478 3.09561 24.2522 3.09561 24.7091 3.26885L40.7091 9.33587C41.4861 9.6305 42 10.3749 42 11.2059V20.9791C42 29.6883 37.4676 37.7697 30.0363 42.3111L25.0429 45.3626C24.4027 45.7539 23.5973 45.7539 22.9571 45.3626L17.9637 42.3111C10.5324 37.7697 6 29.6883 6 20.9791V11.2059ZM24 7.27787L38 12.5865V20.9791C38 28.2948 34.1928 35.0832 27.9505 38.898L24 41.3122L20.0495 38.898C13.8072 35.0832 10 28.2948 10 20.9791L10 12.5865L24 7.27787Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_699_13694">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6763 20.667L22.0738 26.0645L31.4986 16.6726L34.322 19.506L24.2884 29.5046C23.062 30.7268 21.0775 30.7251 19.8531 29.5007L13.8479 23.4955L16.6763 20.667Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2057C6 10.3747 6.51387 9.63026 7.29089 9.33562L23.2909 3.2686C23.7478 3.09536 24.2522 3.09536 24.7091 3.2686L40.7091 9.33562C41.4861 9.63026 42 10.3747 42 11.2057V20.9789C42 29.688 37.4676 37.7695 30.0363 42.3109L25.0429 45.3624C24.4027 45.7536 23.5973 45.7536 22.9571 45.3624L17.9637 42.3109C10.5324 37.7695 6 29.688 6 20.9789V11.2057ZM24 7.27763L38 12.5863V20.9789C38 28.2945 34.1928 35.083 27.9505 38.8978L24 41.3119L20.0495 38.8978C13.8072 35.083 10 28.2945 10 20.9789L10 12.5863L24 7.27763Z" 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">
-<g clip-path="url(#clip0_699_13692)">
-<path d="M16.3224 21.0213L22.0728 26.7717L31.8511 17.0275L33.9687 19.1525L23.9351 29.1512C22.904 30.1787 21.2356 30.1772 20.2063 29.1479L14.2011 23.1427L16.3224 21.0213Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2059C6 10.3749 6.51387 9.6305 7.29089 9.33587L23.2909 3.26885C23.7478 3.09561 24.2522 3.09561 24.7091 3.26885L40.7091 9.33587C41.4861 9.6305 42 10.3749 42 11.2059V20.9791C42 29.6883 37.4676 37.7697 30.0363 42.3111L25.0429 45.3626C24.4027 45.7539 23.5973 45.7539 22.9571 45.3626L17.9637 42.3111C10.5324 37.7697 6 29.6883 6 20.9791V11.2059ZM24 6.20839L39 11.8962V20.9791C39 28.6432 35.0115 35.7549 28.4719 39.7513L24 42.4841L19.5281 39.7513C12.9885 35.7549 9 28.6432 9 20.9791L9 11.8962L24 6.20839Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_699_13692">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3224 21.0211L22.0728 26.7715L31.8511 17.0273L33.9687 19.1523L23.9351 29.1509C22.904 30.1784 21.2356 30.177 20.2063 29.1477L14.2011 23.1424L16.3224 21.0211Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2057C6 10.3747 6.51387 9.63026 7.29089 9.33562L23.2909 3.2686C23.7478 3.09536 24.2522 3.09536 24.7091 3.2686L40.7091 9.33562C41.4861 9.63026 42 10.3747 42 11.2057V20.9789C42 29.688 37.4676 37.7695 30.0363 42.3109L25.0429 45.3624C24.4027 45.7536 23.5973 45.7536 22.9571 45.3624L17.9637 42.3109C10.5324 37.7695 6 29.688 6 20.9789V11.2057ZM24 6.20815L39 11.896V20.9789C39 28.6429 35.0115 35.7546 28.4719 39.751L24 42.4839L19.5281 39.751C12.9885 35.7546 9 28.6429 9 20.9789L9 11.896L24 6.20815Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/shield-person/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShieldPersonProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ShieldPerson = ({ fill = false, thick = false, size = 24 }: ShieldPersonProps) => {
+export const ShieldPerson = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShieldPersonProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" fill="currentColor"/>
-<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" fill="currentColor"/>
-<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" fill="currentColor"/>
-<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.3472 24.4574 29.6792 25.2092 28.2793 26.2911C27.5514 26.1011 26.7875 26 26 26H22C17.0294 26 13 30.0294 13 35V39H24.7499C25.3472 40.5294 26.2768 41.8923 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.3472 24.4574 29.6792 25.2092 28.2793 26.2911C27.5514 26.1011 26.7875 26 26 26H22C17.0294 26 13 30.0294 13 35V39H24.7499C25.3472 40.5294 26.2768 41.8923 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" fill="currentColor"/>
-<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/shield-usage/index.tsx

@@ -1,47 +1,48 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShieldUsageProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ShieldUsage = ({ fill = false, thick = false, size = 24 }: ShieldUsageProps) => {
+export const ShieldUsage = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShieldUsageProps) => {
   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="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" fill="currentColor"/>
-<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" fill="currentColor"/>
-<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" fill="currentColor"/>
-<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" 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="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" fill="currentColor"/>
-<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" fill="currentColor"/>
-<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" fill="currentColor"/>
-<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" 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="M7 43H26.7819C25.7865 41.844 25.0171 40.4878 24.5423 39H9V9H39V24.5423C40.4878 25.0171 41.844 25.7865 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" fill="currentColor"/>
-<path d="M14 34H24.0969C24.2836 32.567 24.7341 31.2169 25.398 30H14V34Z" fill="currentColor"/>
-<path d="M29.0173 26H14V22H34V24.0969C32.1687 24.3355 30.4728 25.0048 29.0173 26Z" fill="currentColor"/>
-<path d="M34 14H14V18H34V14Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 43H26.7819C25.7865 41.844 25.0171 40.4878 24.5423 39H9V9H39V24.5423C40.4878 25.0171 41.844 25.7865 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14 34H24.0969C24.2836 32.567 24.7341 31.2169 25.398 30H14V34Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.0173 26H14V22H34V24.0969C32.1687 24.3355 30.4728 25.0048 29.0173 26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34 14H14V18H34V14Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" 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="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" fill="currentColor"/>
-<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" fill="currentColor"/>
-<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" fill="currentColor"/>
-<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/shorten/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShortenProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Shorten = ({ fill = false, thick = false, size = 24 }: ShortenProps) => {
+export const Shorten = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShortenProps) => {
   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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" fill="currentColor"/>
-<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" 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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.8199 23.0577 25.8199 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2 22.4991L17.3801 22.4991L9.94016 15.0592L12.0615 12.9378L21.0206 21.897C22.1817 23.0581 22.1817 24.9405 21.0206 26.1016L12.0615 35.0608L9.94016 32.9395L17.3805 25.4991L2 25.4991V22.4991Z" 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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" fill="currentColor"/>
-<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" 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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.8199 23.0577 25.8199 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2 22.4991L17.3801 22.4991L9.94016 15.0592L12.0615 12.9378L21.0206 21.897C22.1817 23.0581 22.1817 24.9405 21.0206 26.1016L12.0615 35.0608L9.94016 32.9395L17.3805 25.4991L2 25.4991V22.4991Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.8283 21.9992L38.4151 15.4124L35.5866 12.584L26.6275 21.5431C25.2711 22.8995 25.2711 25.0985 26.6275 26.4549L35.5866 35.414L38.4151 32.5856L31.8286 25.9992H46.0673V21.9992H31.8283Z" fill="currentColor"/>
-<path d="M2.00003 21.9992L16.1731 21.9992L9.58664 15.4128L12.4151 12.5843L21.3742 21.5435C22.7306 22.8998 22.7306 25.0989 21.3742 26.4552L12.4151 35.4144L9.58664 32.5859L16.1734 25.9992L2.00003 25.9992V21.9992Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.8283 21.9992L38.415 15.4124L35.5866 12.584L26.6275 21.5431C25.2711 22.8995 25.2711 25.0985 26.6275 26.4549L35.5866 35.414L38.415 32.5856L31.8286 25.9992H46.0673V21.9992H31.8283Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2 21.9992L16.173 21.9992L9.58661 15.4128L12.415 12.5843L21.3742 21.5435C22.7305 22.8998 22.7305 25.0989 21.3742 26.4552L12.415 35.4144L9.58661 32.5859L16.1734 25.9992L2 25.9992V21.9992Z" 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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" fill="currentColor"/>
-<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" 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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.8199 23.0577 25.8199 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2 22.4991L17.3801 22.4991L9.94016 15.0592L12.0615 12.9378L21.0206 21.897C22.1817 23.0581 22.1817 24.9405 21.0206 26.1016L12.0615 35.0608L9.94016 32.9395L17.3805 25.4991L2 25.4991V22.4991Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };