@liner-fe/icon 0.0.36 → 0.0.38

package/assets/paraphrase/index.tsx

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

package/assets/pencil/index.tsx

@@ -6,31 +6,32 @@ interface PencilProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const Pencil = forwardRef<SVGSVGElement, PencilProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (fill) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L37.938 19.3987L28.7471 10.2086L31.7619 7.19394Z" style={{ fill: `var(--${color})` }}/>
-<path d="M26.6257 12.3298L10.6377 28.3172C10.2484 28.7065 9.95639 29.182 9.7854 29.7053L7.77292 35.8639C6.89145 38.5614 9.41812 41.1314 12.1302 40.2959L18.3957 38.3658C18.9408 38.1979 19.4366 37.8993 19.8399 37.496L35.8167 21.52L26.6257 12.3298Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L37.938 19.3987L28.7471 10.2086L31.7619 7.19394Z" style={{ fill: `var(--type)` }}/>
+<path d="M26.6257 12.3298L10.6377 28.3172C10.2484 28.7065 9.95639 29.182 9.7854 29.7053L7.77292 35.8639C6.89145 38.5614 9.41812 41.1314 12.1302 40.2959L18.3957 38.3658C18.9408 38.1979 19.4366 37.8993 19.8399 37.496L35.8167 21.52L26.6257 12.3298Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M31.408 6.8405C32.97 5.2775 35.5034 5.27707 37.0658 6.83954L41.3066 11.0803C42.8683 12.642 42.8688 15.174 41.3076 16.7362L20.1933 37.8496C19.7323 38.3105 19.1657 38.6517 18.5428 38.8436L12.2772 40.7738C9.1777 41.7286 6.29008 38.7915 7.29747 35.7086L9.30995 29.5499C9.50536 28.9519 9.83908 28.4085 10.284 27.9637L31.408 6.8405ZM28.7484 15.1595L13.1121 30.7924L11.0996 36.951L17.3651 35.0209L32.989 19.4004L28.7484 15.1595ZM35.8171 16.5717L38.4782 13.9087L34.2374 9.66797L31.5765 12.3307L35.8171 16.5717Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31.408 6.8405C32.97 5.2775 35.5034 5.27707 37.0658 6.83954L41.3066 11.0803C42.8683 12.642 42.8688 15.174 41.3076 16.7362L20.1933 37.8496C19.7323 38.3105 19.1657 38.6517 18.5428 38.8436L12.2772 40.7738C9.1777 41.7286 6.29008 38.7915 7.29747 35.7086L9.30995 29.5499C9.50536 28.9519 9.83908 28.4085 10.284 27.9637L31.408 6.8405ZM28.7484 15.1595L13.1121 30.7924L11.0996 36.951L17.3651 35.0209L32.989 19.4004L28.7484 15.1595ZM35.8171 16.5717L38.4782 13.9087L34.2374 9.66797L31.5765 12.3307L35.8171 16.5717Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/person/index.tsx

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

package/assets/person-add/index.tsx

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

package/assets/person-fill/index.tsx

@@ -6,38 +6,39 @@ interface PersonFillProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const PersonFill = forwardRef<SVGSVGElement, PersonFillProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
-<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--fillType)` }}/>
+<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" style={{ fill: `var(--fillType)` }}/>
 </svg>
 ;
   } else if (fill) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
-<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--fillType)` }}/>
+<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" style={{ fill: `var(--fillType)` }}/>
 </svg>
 ;
   } else if (thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
-<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--fillType)` }}/>
+<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" style={{ fill: `var(--fillType)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" fill="white"/>
-<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--fillType)` }}/>
+<path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" style={{ fill: `var(--fillType)` }}/>
 </svg>
 ;
   }

package/assets/photo/index.tsx

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

package/assets/play-button/index.tsx

@@ -6,33 +6,34 @@ interface PlayButtonProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const PlayButton = forwardRef<SVGSVGElement, PlayButtonProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" style={{ fill: `var(--${color})` }}/>
-<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" style={{ fill: `var(--type)` }}/>
+<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (fill) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM18.75 31.7272L33 23.5L18.75 15.2728L18.75 31.7272Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM18.75 31.7272L33 23.5L18.75 15.2728L18.75 31.7272Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40ZM24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" style={{ fill: `var(--${color})` }}/>
-<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40ZM24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" style={{ fill: `var(--type)` }}/>
+<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" style={{ fill: `var(--${color})` }}/>
-<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" style={{ fill: `var(--type)` }}/>
+<path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/plus/index.tsx

@@ -6,30 +6,31 @@ interface PlusProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const Plus = forwardRef<SVGSVGElement, PlusProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM21.9997 35.9991V25.9998H11.9997V21.9998H21.9997V11.9998H25.9997V21.9998H35.9991V25.9998H25.9997V35.9991H21.9997Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM21.9997 35.9991V25.9998H11.9997V21.9998H21.9997V11.9998H25.9997V21.9998H35.9991V25.9998H25.9997V35.9991H21.9997Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (fill) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.4997 35.9991V25.4998H11.9997V22.4998H22.4997V11.9998H25.4997V22.4998H35.9991V25.4998H25.4997V35.9991H22.4997Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.4997 35.9991V25.4998H11.9997V22.4998H22.4997V11.9998H25.4997V22.4998H35.9991V25.4998H25.4997V35.9991H22.4997Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M22.0001 26V39.9993H26.0001V26H40.0001V22H26.0001V8H22.0001V22H8.00073V26H22.0001Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.0001 26V39.9993H26.0001V26H40.0001V22H26.0001V8H22.0001V22H8.00073V26H22.0001Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M22.5001 25.5V39.9993H25.5001V25.5H40.0001V22.5H25.5001V8H22.5001V22.5H8.00073V25.5H22.5001Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.5001 25.5V39.9993H25.5001V25.5H40.0001V22.5H25.5001V8H22.5001V22.5H8.00073V25.5H22.5001Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/power/index.tsx

@@ -6,34 +6,35 @@ interface PowerProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const Power = forwardRef<SVGSVGElement, PowerProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M25.5 24V6H22.5V24H25.5Z" style={{ fill: `var(--${color})` }}/>
-<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.2001 12.6436C11.0155 15.3943 9 19.4618 9 24.0001C9 32.2844 15.7157 39.0001 24 39.0001C32.2843 39.0001 39 32.2844 39 24.0001C39 19.4618 36.9845 15.3943 33.7999 12.6436L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 24V6H22.5V24H25.5Z" style={{ fill: `var(--type)` }}/>
+<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.2001 12.6436C11.0155 15.3943 9 19.4618 9 24.0001C9 32.2844 15.7157 39.0001 24 39.0001C32.2843 39.0001 39 32.2844 39 24.0001C39 19.4618 36.9845 15.3943 33.7999 12.6436L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (fill) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M25.5 24V6H22.5V24H25.5Z" style={{ fill: `var(--${color})` }}/>
-<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.2001 12.6436C11.0155 15.3943 9 19.4618 9 24.0001C9 32.2844 15.7157 39.0001 24 39.0001C32.2843 39.0001 39 32.2844 39 24.0001C39 19.4618 36.9845 15.3943 33.7999 12.6436L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 24V6H22.5V24H25.5Z" style={{ fill: `var(--type)` }}/>
+<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.2001 12.6436C11.0155 15.3943 9 19.4618 9 24.0001C9 32.2844 15.7157 39.0001 24 39.0001C32.2843 39.0001 39 32.2844 39 24.0001C39 19.4618 36.9845 15.3943 33.7999 12.6436L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M26 24V6H22V24H26Z" style={{ fill: `var(--${color})` }}/>
-<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.9093 13.3528C11.9047 15.9206 10 19.7379 10 24.0001C10 31.7321 16.268 38.0001 24 38.0001C31.732 38.0001 38 31.7321 38 24.0001C38 19.7379 36.0953 15.9206 33.0907 13.3528L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 24V6H22V24H26Z" style={{ fill: `var(--type)` }}/>
+<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.9093 13.3528C11.9047 15.9206 10 19.7379 10 24.0001C10 31.7321 16.268 38.0001 24 38.0001C31.732 38.0001 38 31.7321 38 24.0001C38 19.7379 36.0953 15.9206 33.0907 13.3528L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M25.5 24V6H22.5V24H25.5Z" style={{ fill: `var(--${color})` }}/>
-<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.2001 12.6436C11.0155 15.3943 9 19.4618 9 24.0001C9 32.2844 15.7157 39.0001 24 39.0001C32.2843 39.0001 39 32.2844 39 24.0001C39 19.4618 36.9845 15.3943 33.7999 12.6436L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 24V6H22.5V24H25.5Z" style={{ fill: `var(--type)` }}/>
+<path d="M6 24.0001C6 18.6335 8.34861 13.8154 12.0741 10.5176L14.2001 12.6436C11.0155 15.3943 9 19.4618 9 24.0001C9 32.2844 15.7157 39.0001 24 39.0001C32.2843 39.0001 39 32.2844 39 24.0001C39 19.4618 36.9845 15.3943 33.7999 12.6436L35.9259 10.5176C39.6514 13.8154 42 18.6335 42 24.0001C42 33.9413 33.9411 42.0001 24 42.0001C14.0589 42.0001 6 33.9413 6 24.0001Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/question-box/index.tsx

@@ -6,34 +6,35 @@ interface QuestionBoxProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const QuestionBox = forwardRef<SVGSVGElement, QuestionBoxProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M25.0001 2.57654C24.3813 2.21928 23.6189 2.21928 23.0001 2.57654L5.94751 12.4218C5.32871 12.7791 4.94751 13.4394 4.94751 14.1539V33.8445C4.94751 34.559 5.32871 35.2193 5.94751 35.5765L23.0001 45.4218C23.6189 45.7791 24.3813 45.7791 25.0001 45.4218L42.0526 35.5765C42.6714 35.2193 43.0526 34.559 43.0526 33.8445V14.1539C43.0526 13.4394 42.6714 12.7791 42.0526 12.4218L25.0001 2.57654ZM17.8923 18.0461C18.406 16.7433 19.2402 15.7029 20.3882 14.9508C21.5352 14.1994 22.849 13.8332 24.3005 13.8332C25.9824 13.8332 27.4193 14.3112 28.5234 15.3381C29.6344 16.3713 30.1675 17.7391 30.1675 19.3532C30.1675 20.2789 29.9663 21.1461 29.5546 21.94C29.1411 22.7374 28.4693 23.5004 27.5934 24.237L27.5877 24.2419C26.7073 24.9688 26.3351 25.497 26.2369 25.8227C26.0907 26.3076 26.0127 26.8594 26.0127 27.4848V28.3182H21.989V27.4848C21.989 26.2778 22.1952 25.2189 22.6767 24.3699C23.1227 23.5834 23.7859 22.8249 24.6328 22.089L24.6425 22.0806C25.2697 21.5523 25.7145 21.0691 26.0035 20.6343C26.265 20.241 26.3835 19.8459 26.3835 19.4333C26.3835 18.8876 26.1989 18.4844 25.8262 18.1552C25.45 17.8229 24.9282 17.6229 24.1806 17.6229C23.5334 17.6229 23.0135 17.7877 22.5841 18.0911C22.1467 18.4 21.8017 18.8422 21.5608 19.4569L21.2603 20.2238L17.5823 18.8322L17.8923 18.0461ZM22.4126 30.6847C22.8666 30.2294 23.4405 29.9992 24.0813 29.9992C24.722 29.9992 25.2959 30.2294 25.75 30.6847C26.2039 31.1398 26.4327 31.7142 26.4327 32.3547C26.4327 32.9952 26.2039 33.5696 25.75 34.0247C25.2959 34.48 24.722 34.7102 24.0813 34.7102C23.4405 34.7102 22.8666 34.48 22.4126 34.0247C21.9587 33.5696 21.7298 32.9952 21.7298 32.3547C21.7298 31.7142 21.9587 31.1398 22.4126 30.6847Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M25.0001 2.57654C24.3813 2.21928 23.6189 2.21928 23.0001 2.57654L5.94751 12.4218C5.32871 12.7791 4.94751 13.4394 4.94751 14.1539V33.8445C4.94751 34.559 5.32871 35.2193 5.94751 35.5765L23.0001 45.4218C23.6189 45.7791 24.3813 45.7791 25.0001 45.4218L42.0526 35.5765C42.6714 35.2193 43.0526 34.559 43.0526 33.8445V14.1539C43.0526 13.4394 42.6714 12.7791 42.0526 12.4218L25.0001 2.57654ZM17.8923 18.0461C18.406 16.7433 19.2402 15.7029 20.3882 14.9508C21.5352 14.1994 22.849 13.8332 24.3005 13.8332C25.9824 13.8332 27.4193 14.3112 28.5234 15.3381C29.6344 16.3713 30.1675 17.7391 30.1675 19.3532C30.1675 20.2789 29.9663 21.1461 29.5546 21.94C29.1411 22.7374 28.4693 23.5004 27.5934 24.237L27.5877 24.2419C26.7073 24.9688 26.3351 25.497 26.2369 25.8227C26.0907 26.3076 26.0127 26.8594 26.0127 27.4848V28.3182H21.989V27.4848C21.989 26.2778 22.1952 25.2189 22.6767 24.3699C23.1227 23.5834 23.7859 22.8249 24.6328 22.089L24.6425 22.0806C25.2697 21.5523 25.7145 21.0691 26.0035 20.6343C26.265 20.241 26.3835 19.8459 26.3835 19.4333C26.3835 18.8876 26.1989 18.4844 25.8262 18.1552C25.45 17.8229 24.9282 17.6229 24.1806 17.6229C23.5334 17.6229 23.0135 17.7877 22.5841 18.0911C22.1467 18.4 21.8017 18.8422 21.5608 19.4569L21.2603 20.2238L17.5823 18.8322L17.8923 18.0461ZM22.4126 30.6847C22.8666 30.2294 23.4405 29.9992 24.0813 29.9992C24.722 29.9992 25.2959 30.2294 25.75 30.6847C26.2039 31.1398 26.4327 31.7142 26.4327 32.3547C26.4327 32.9952 26.2039 33.5696 25.75 34.0247C25.2959 34.48 24.722 34.7102 24.0813 34.7102C23.4405 34.7102 22.8666 34.48 22.4126 34.0247C21.9587 33.5696 21.7298 32.9952 21.7298 32.3547C21.7298 31.7142 21.9587 31.1398 22.4126 30.6847Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (fill) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path fillRule="evenodd" clipRule="evenodd" d="M25.0001 2.57654C24.3813 2.21928 23.6189 2.21928 23.0001 2.57654L5.94751 12.4218C5.32871 12.7791 4.94751 13.4394 4.94751 14.1539V33.8445C4.94751 34.559 5.32871 35.2193 5.94751 35.5765L23.0001 45.4218C23.6189 45.7791 24.3813 45.7791 25.0001 45.4218L42.0526 35.5765C42.6714 35.2193 43.0526 34.559 43.0526 33.8445V14.1539C43.0526 13.4394 42.6714 12.7791 42.0526 12.4218L25.0001 2.57654ZM20.6622 15.3691C21.7202 14.676 22.9369 14.3332 24.3005 14.3332C25.8842 14.3332 27.19 14.7808 28.1829 15.7043C29.1786 16.6303 29.6675 17.8583 29.6675 19.3532C29.6675 20.2042 29.4832 20.9917 29.1108 21.7098C28.7376 22.4294 28.1174 23.1431 27.2716 23.8544L27.2693 23.8563C26.3739 24.5957 25.9014 25.2035 25.7582 25.6783C25.5959 26.2168 25.5127 26.8181 25.5127 27.4848V27.8182H22.489V27.4848C22.489 26.329 22.6874 25.3647 23.1117 24.6165C23.5218 23.8934 24.1426 23.1774 24.9608 22.4664L24.9646 22.463C25.615 21.9153 26.0965 21.3975 26.4199 20.9111C26.7323 20.4414 26.8835 19.9509 26.8835 19.4333C26.8835 18.7503 26.6419 18.2085 26.1572 17.7804C25.6712 17.3511 25.0231 17.1229 24.1806 17.1229C23.4423 17.1229 22.8189 17.313 22.2956 17.6827C21.7691 18.0546 21.3674 18.58 21.0953 19.2745L20.9751 19.5813L18.2335 18.5439L18.3574 18.2295C18.8346 17.0194 19.6037 16.0624 20.6622 15.3691ZM22.7666 31.0378C23.124 30.6794 23.5693 30.4992 24.0813 30.4992C24.5933 30.4992 25.0386 30.6794 25.396 31.0378C25.7533 31.3961 25.9327 31.8421 25.9327 32.3547C25.9327 32.8673 25.7533 33.3133 25.396 33.6716C25.0386 34.03 24.5933 34.2102 24.0813 34.2102C23.5693 34.2102 23.124 34.03 22.7666 33.6716C22.4093 33.3133 22.2299 32.8673 22.2299 32.3547C22.2299 31.8421 22.4093 31.3961 22.7666 31.0378Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M25.0001 2.57654C24.3813 2.21928 23.6189 2.21928 23.0001 2.57654L5.94751 12.4218C5.32871 12.7791 4.94751 13.4394 4.94751 14.1539V33.8445C4.94751 34.559 5.32871 35.2193 5.94751 35.5765L23.0001 45.4218C23.6189 45.7791 24.3813 45.7791 25.0001 45.4218L42.0526 35.5765C42.6714 35.2193 43.0526 34.559 43.0526 33.8445V14.1539C43.0526 13.4394 42.6714 12.7791 42.0526 12.4218L25.0001 2.57654ZM20.6622 15.3691C21.7202 14.676 22.9369 14.3332 24.3005 14.3332C25.8842 14.3332 27.19 14.7808 28.1829 15.7043C29.1786 16.6303 29.6675 17.8583 29.6675 19.3532C29.6675 20.2042 29.4832 20.9917 29.1108 21.7098C28.7376 22.4294 28.1174 23.1431 27.2716 23.8544L27.2693 23.8563C26.3739 24.5957 25.9014 25.2035 25.7582 25.6783C25.5959 26.2168 25.5127 26.8181 25.5127 27.4848V27.8182H22.489V27.4848C22.489 26.329 22.6874 25.3647 23.1117 24.6165C23.5218 23.8934 24.1426 23.1774 24.9608 22.4664L24.9646 22.463C25.615 21.9153 26.0965 21.3975 26.4199 20.9111C26.7323 20.4414 26.8835 19.9509 26.8835 19.4333C26.8835 18.7503 26.6419 18.2085 26.1572 17.7804C25.6712 17.3511 25.0231 17.1229 24.1806 17.1229C23.4423 17.1229 22.8189 17.313 22.2956 17.6827C21.7691 18.0546 21.3674 18.58 21.0953 19.2745L20.9751 19.5813L18.2335 18.5439L18.3574 18.2295C18.8346 17.0194 19.6037 16.0624 20.6622 15.3691ZM22.7666 31.0378C23.124 30.6794 23.5693 30.4992 24.0813 30.4992C24.5933 30.4992 25.0386 30.6794 25.396 31.0378C25.7533 31.3961 25.9327 31.8421 25.9327 32.3547C25.9327 32.8673 25.7533 33.3133 25.396 33.6716C25.0386 34.03 24.5933 34.2102 24.0813 34.2102C23.5693 34.2102 23.124 34.03 22.7666 33.6716C22.4093 33.3133 22.2299 32.8673 22.2299 32.3547C22.2299 31.8421 22.4093 31.3961 22.7666 31.0378Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } else if (thick) {
     return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M17.8933 18.0461C18.4069 16.7433 19.2412 15.7029 20.3891 14.9508C21.5362 14.1994 22.8499 13.8332 24.3015 13.8332C25.9834 13.8332 27.4203 14.3112 28.5244 15.3381C29.6354 16.3713 30.1685 17.7391 30.1685 19.3532C30.1685 20.2789 29.9673 21.1461 29.5556 21.94C29.142 22.7374 28.4703 23.5004 27.5944 24.237L27.5886 24.2419C26.7083 24.9688 26.3361 25.497 26.2379 25.8227C26.0917 26.3076 26.0137 26.8594 26.0137 27.4848V28.3182H21.99V27.4848C21.99 26.2778 22.1962 25.2189 22.6777 24.3699C23.1237 23.5834 23.7869 22.8249 24.6338 22.089L24.6435 22.0806C25.2706 21.5523 25.7154 21.0691 26.0045 20.6343C26.266 20.241 26.3845 19.8459 26.3845 19.4333C26.3845 18.8876 26.1999 18.4844 25.8272 18.1552C25.451 17.8229 24.9292 17.6229 24.1816 17.6229C23.5344 17.6229 23.0145 17.7877 22.585 18.0911C22.1477 18.4 21.8026 18.8422 21.5618 19.4569L21.2613 20.2238L17.5833 18.8322L17.8933 18.0461Z" style={{ fill: `var(--${color})` }}/>
-<path d="M22.3314 30.1847C22.7854 29.7294 23.3593 29.4992 24.0001 29.4992C24.6408 29.4992 25.2147 29.7294 25.6688 30.1847C26.1227 30.6398 26.3515 31.2142 26.3515 31.8547C26.3515 32.4952 26.1227 33.0696 25.6688 33.5247C25.2147 33.98 24.6408 34.2102 24.0001 34.2102C23.3593 34.2102 22.7854 33.98 22.3314 33.5247C21.8774 33.0696 21.6486 32.4952 21.6486 31.8547C21.6486 31.2142 21.8774 30.6398 22.3314 30.1847Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M23.0001 2.57654C23.6189 2.21928 24.3813 2.21928 25.0001 2.57654L42.0526 12.4218C42.6714 12.7791 43.0526 13.4394 43.0526 14.1539V33.8445C43.0526 34.559 42.6714 35.2193 42.0526 35.5765L25.0001 45.4218C24.3813 45.7791 23.6189 45.7791 23.0001 45.4218L5.94751 35.5765C5.32871 35.2193 4.94751 34.559 4.94751 33.8445V14.1539C4.94751 13.4394 5.32871 12.7791 5.94751 12.4218L23.0001 2.57654ZM8.94751 15.3086L24.0001 6.61799L39.0526 15.3086V32.6898L24.0001 41.3804L8.94751 32.6898V15.3086Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.8933 18.0461C18.4069 16.7433 19.2412 15.7029 20.3891 14.9508C21.5362 14.1994 22.8499 13.8332 24.3015 13.8332C25.9834 13.8332 27.4203 14.3112 28.5244 15.3381C29.6354 16.3713 30.1685 17.7391 30.1685 19.3532C30.1685 20.2789 29.9673 21.1461 29.5556 21.94C29.142 22.7374 28.4703 23.5004 27.5944 24.237L27.5886 24.2419C26.7083 24.9688 26.3361 25.497 26.2379 25.8227C26.0917 26.3076 26.0137 26.8594 26.0137 27.4848V28.3182H21.99V27.4848C21.99 26.2778 22.1962 25.2189 22.6777 24.3699C23.1237 23.5834 23.7869 22.8249 24.6338 22.089L24.6435 22.0806C25.2706 21.5523 25.7154 21.0691 26.0045 20.6343C26.266 20.241 26.3845 19.8459 26.3845 19.4333C26.3845 18.8876 26.1999 18.4844 25.8272 18.1552C25.451 17.8229 24.9292 17.6229 24.1816 17.6229C23.5344 17.6229 23.0145 17.7877 22.585 18.0911C22.1477 18.4 21.8026 18.8422 21.5618 19.4569L21.2613 20.2238L17.5833 18.8322L17.8933 18.0461Z" style={{ fill: `var(--type)` }}/>
+<path d="M22.3314 30.1847C22.7854 29.7294 23.3593 29.4992 24.0001 29.4992C24.6408 29.4992 25.2147 29.7294 25.6688 30.1847C26.1227 30.6398 26.3515 31.2142 26.3515 31.8547C26.3515 32.4952 26.1227 33.0696 25.6688 33.5247C25.2147 33.98 24.6408 34.2102 24.0001 34.2102C23.3593 34.2102 22.7854 33.98 22.3314 33.5247C21.8774 33.0696 21.6486 32.4952 21.6486 31.8547C21.6486 31.2142 21.8774 30.6398 22.3314 30.1847Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M23.0001 2.57654C23.6189 2.21928 24.3813 2.21928 25.0001 2.57654L42.0526 12.4218C42.6714 12.7791 43.0526 13.4394 43.0526 14.1539V33.8445C43.0526 34.559 42.6714 35.2193 42.0526 35.5765L25.0001 45.4218C24.3813 45.7791 23.6189 45.7791 23.0001 45.4218L5.94751 35.5765C5.32871 35.2193 4.94751 34.559 4.94751 33.8445V14.1539C4.94751 13.4394 5.32871 12.7791 5.94751 12.4218L23.0001 2.57654ZM8.94751 15.3086L24.0001 6.61799L39.0526 15.3086V32.6898L24.0001 41.3804L8.94751 32.6898V15.3086Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M20.6631 15.3691C21.7212 14.676 22.9378 14.3332 24.3015 14.3332C25.8851 14.3332 27.191 14.7808 28.1839 15.7043C29.1796 16.6303 29.6685 17.8583 29.6685 19.3532C29.6685 20.2042 29.4842 20.9917 29.1117 21.7098C28.7386 22.4294 28.1183 23.1431 27.2726 23.8544L27.2703 23.8563C26.3749 24.5957 25.9024 25.2035 25.7592 25.6783C25.5968 26.2168 25.5137 26.8181 25.5137 27.4848V27.8182H22.49V27.4848C22.49 26.329 22.6883 25.3647 23.1126 24.6165C23.5228 23.8934 24.1436 23.1774 24.9617 22.4664L24.9656 22.463C25.616 21.9153 26.0975 21.3975 26.4209 20.9111C26.7332 20.4414 26.8845 19.9509 26.8845 19.4333C26.8845 18.7503 26.6428 18.2085 26.1582 17.7804C25.6722 17.3511 25.024 17.1229 24.1816 17.1229C23.4433 17.1229 22.8199 17.313 22.2966 17.6827C21.7701 18.0546 21.3684 18.58 21.0962 19.2745L20.976 19.5813L18.2344 18.5439L18.3584 18.2295C18.8356 17.0194 19.6047 16.0624 20.6631 15.3691Z" style={{ fill: `var(--${color})` }}/>
-<path d="M22.6854 30.5378C23.0428 30.1794 23.4881 29.9992 24.0001 29.9992C24.5121 29.9992 24.9574 30.1794 25.3147 30.5378C25.6721 30.8961 25.8515 31.3421 25.8515 31.8547C25.8515 32.3673 25.6721 32.8133 25.3147 33.1716C24.9574 33.53 24.5121 33.7102 24.0001 33.7102C23.4881 33.7102 23.0428 33.53 22.6854 33.1716C22.3281 32.8133 22.1486 32.3673 22.1486 31.8547C22.1486 31.3421 22.3281 30.8961 22.6854 30.5378Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M23.0001 2.57654C23.6189 2.21928 24.3813 2.21928 25.0001 2.57654L42.0526 12.4218C42.6714 12.7791 43.0526 13.4394 43.0526 14.1539V33.8445C43.0526 34.559 42.6714 35.2193 42.0526 35.5765L25.0001 45.4218C24.3813 45.7791 23.6189 45.7791 23.0001 45.4218L5.94751 35.5765C5.32871 35.2193 4.94751 34.559 4.94751 33.8445V14.1539C4.94751 13.4394 5.32871 12.7791 5.94751 12.4218L23.0001 2.57654ZM7.94751 14.7312L24.0001 5.46329L40.0526 14.7312V33.2671L24.0001 42.5351L7.94751 33.2671V14.7312Z" style={{ fill: `var(--${color})` }}/>
+<path d="M20.6631 15.3691C21.7212 14.676 22.9378 14.3332 24.3015 14.3332C25.8851 14.3332 27.191 14.7808 28.1839 15.7043C29.1796 16.6303 29.6685 17.8583 29.6685 19.3532C29.6685 20.2042 29.4842 20.9917 29.1117 21.7098C28.7386 22.4294 28.1183 23.1431 27.2726 23.8544L27.2703 23.8563C26.3749 24.5957 25.9024 25.2035 25.7592 25.6783C25.5968 26.2168 25.5137 26.8181 25.5137 27.4848V27.8182H22.49V27.4848C22.49 26.329 22.6883 25.3647 23.1126 24.6165C23.5228 23.8934 24.1436 23.1774 24.9617 22.4664L24.9656 22.463C25.616 21.9153 26.0975 21.3975 26.4209 20.9111C26.7332 20.4414 26.8845 19.9509 26.8845 19.4333C26.8845 18.7503 26.6428 18.2085 26.1582 17.7804C25.6722 17.3511 25.024 17.1229 24.1816 17.1229C23.4433 17.1229 22.8199 17.313 22.2966 17.6827C21.7701 18.0546 21.3684 18.58 21.0962 19.2745L20.976 19.5813L18.2344 18.5439L18.3584 18.2295C18.8356 17.0194 19.6047 16.0624 20.6631 15.3691Z" style={{ fill: `var(--type)` }}/>
+<path d="M22.6854 30.5378C23.0428 30.1794 23.4881 29.9992 24.0001 29.9992C24.5121 29.9992 24.9574 30.1794 25.3147 30.5378C25.6721 30.8961 25.8515 31.3421 25.8515 31.8547C25.8515 32.3673 25.6721 32.8133 25.3147 33.1716C24.9574 33.53 24.5121 33.7102 24.0001 33.7102C23.4881 33.7102 23.0428 33.53 22.6854 33.1716C22.3281 32.8133 22.1486 32.3673 22.1486 31.8547C22.1486 31.3421 22.3281 30.8961 22.6854 30.5378Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M23.0001 2.57654C23.6189 2.21928 24.3813 2.21928 25.0001 2.57654L42.0526 12.4218C42.6714 12.7791 43.0526 13.4394 43.0526 14.1539V33.8445C43.0526 34.559 42.6714 35.2193 42.0526 35.5765L25.0001 45.4218C24.3813 45.7791 23.6189 45.7791 23.0001 45.4218L5.94751 35.5765C5.32871 35.2193 4.94751 34.559 4.94751 33.8445V14.1539C4.94751 13.4394 5.32871 12.7791 5.94751 12.4218L23.0001 2.57654ZM7.94751 14.7312L24.0001 5.46329L40.0526 14.7312V33.2671L24.0001 42.5351L7.94751 33.2671V14.7312Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }