@liner-fe/icon 0.0.36 → 0.0.37

package/assets/casual-shoe/index.tsx

@@ -6,30 +6,31 @@ interface CasualShoeProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const CasualShoe = forwardRef<SVGSVGElement, CasualShoeProps>(
   ({ fill = false, thick = false, size = 24, color = '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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M3.00371 27.8771C3.07351 22.8737 4.12607 17.931 6.10343 13.3306L6.24262 13.0068C6.50498 12.3964 7.10556 12.0008 7.76994 12.0008H8.75587C9.34322 12.0008 9.90088 12.259 10.2809 12.7069L12.1619 14.9237C12.8935 15.786 14.194 15.8707 15.0313 15.1105L19.5825 10.9783C20.2244 10.3955 21.1686 10.2926 21.9209 10.7235L35.3546 18.4175C35.4514 18.473 35.5526 18.5202 35.6572 18.5587L40.4199 20.3134C43.1718 21.3273 45 23.9491 45 26.8818V31C45 33.2091 43.2091 35 41 35H5C3.89543 35 3 34.1046 3 33V28C3 27.9587 3.00125 27.9177 3.00371 27.8771ZM7 30.0008V31H41V30.0008H7ZM40.8677 26C40.5973 25.1211 39.9309 24.3961 39.0371 24.0668L35.657 22.8215L35.2525 26H40.8677ZM31.2202 26L31.8538 21.0221L30.4817 20.2362L27.4788 24.7272L24.1569 22.5095L27.0075 18.2464L25.7951 17.552L22.972 21.7741L19.6501 19.5564L22.3208 15.5622L21.1947 14.9172L17.7201 18.072C15.2083 20.3525 11.3068 20.0985 9.11183 17.5116L8.87775 17.2358C8.61591 17.9928 8.38097 18.7583 8.17325 19.5306L8.29832 19.5883C10.9966 20.8337 12.9416 23.2088 13.6768 26H31.2202ZM9.43542 26H7.08503C7.14149 25.2012 7.22594 24.4052 7.33811 23.6137C8.2542 24.2045 8.97593 25.0353 9.43542 26Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M3.00371 27.8771C3.07351 22.8737 4.12607 17.931 6.10343 13.3306L6.24262 13.0068C6.50498 12.3964 7.10556 12.0008 7.76994 12.0008H8.75587C9.34322 12.0008 9.90088 12.259 10.2809 12.7069L12.1619 14.9237C12.8935 15.786 14.194 15.8707 15.0313 15.1105L19.5825 10.9783C20.2244 10.3955 21.1686 10.2926 21.9209 10.7235L35.3546 18.4175C35.4514 18.473 35.5526 18.5202 35.6572 18.5587L40.4199 20.3134C43.1718 21.3273 45 23.9491 45 26.8818V31C45 33.2091 43.2091 35 41 35H5C3.89543 35 3 34.1046 3 33V28C3 27.9587 3.00125 27.9177 3.00371 27.8771ZM7 30.0008V31H41V30.0008H7ZM40.8677 26C40.5973 25.1211 39.9309 24.3961 39.0371 24.0668L35.657 22.8215L35.2525 26H40.8677ZM31.2202 26L31.8538 21.0221L30.4817 20.2362L27.4788 24.7272L24.1569 22.5095L27.0075 18.2464L25.7951 17.552L22.972 21.7741L19.6501 19.5564L22.3208 15.5622L21.1947 14.9172L17.7201 18.072C15.2083 20.3525 11.3068 20.0985 9.11183 17.5116L8.87775 17.2358C8.61591 17.9928 8.38097 18.7583 8.17325 19.5306L8.29832 19.5883C10.9966 20.8337 12.9416 23.2088 13.6768 26H31.2202ZM9.43542 26H7.08503C7.14149 25.2012 7.22594 24.4052 7.33811 23.6137C8.2542 24.2045 8.97593 25.0353 9.43542 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/chart-bar/index.tsx

@@ -6,39 +6,40 @@ interface ChartBarProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const ChartBar = forwardRef<SVGSVGElement, ChartBarProps>(
   ({ fill = false, thick = false, size = 24, color = '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="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--${color})` }}/>
-<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--type)` }}/>
+<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM22.374 21.3371C21.2694 21.3371 20.374 22.2325 20.374 23.3371V34.3215C20.374 35.4261 21.2695 36.3215 22.3741 36.3215L25.3669 36.3214C26.4714 36.3214 27.3668 35.4259 27.3668 34.3214V23.337C27.3668 22.2324 26.4714 21.3369 25.3668 21.337L22.374 21.3371ZM10 30.0802C10 28.9757 10.8954 28.0802 11.9999 28.0802L14.9928 28.0801C16.0974 28.0801 16.9928 28.9755 16.9928 30.0801L16.9928 34.3212C16.9928 35.4258 16.0974 36.3212 14.9929 36.3212L12.0001 36.3213C10.8955 36.3213 10 35.4259 10 34.3213L10 30.0802ZM32.7479 12.0001C31.6433 12.0002 30.7479 12.8956 30.7479 14.0001L30.7479 34.3213C30.7479 35.4259 31.6434 36.3213 32.748 36.3213L35.7408 36.3212C36.8454 36.3212 37.7407 35.4258 37.7407 34.3212L37.7407 14.0001C37.7407 12.8955 36.8453 12 35.7407 12.0001L32.7479 12.0001Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM22.374 21.3371C21.2694 21.3371 20.374 22.2325 20.374 23.3371V34.3215C20.374 35.4261 21.2695 36.3215 22.3741 36.3215L25.3669 36.3214C26.4714 36.3214 27.3668 35.4259 27.3668 34.3214V23.337C27.3668 22.2324 26.4714 21.3369 25.3668 21.337L22.374 21.3371ZM10 30.0802C10 28.9757 10.8954 28.0802 11.9999 28.0802L14.9928 28.0801C16.0974 28.0801 16.9928 28.9755 16.9928 30.0801L16.9928 34.3212C16.9928 35.4258 16.0974 36.3212 14.9929 36.3212L12.0001 36.3213C10.8955 36.3213 10 35.4259 10 34.3213L10 30.0802ZM32.7479 12.0001C31.6433 12.0002 30.7479 12.8956 30.7479 14.0001L30.7479 34.3213C30.7479 35.4259 31.6434 36.3213 32.748 36.3213L35.7408 36.3212C36.8454 36.3212 37.7407 35.4258 37.7407 34.3212L37.7407 14.0001C37.7407 12.8955 36.8453 12 35.7407 12.0001L32.7479 12.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 fillRule="evenodd" clipRule="evenodd" d="M32 8C32 6.89543 32.8954 6 34 6H40C41.1046 6 42 6.89543 42 8V36C42 37.1046 41.1046 38 40 38H34C32.8954 38 32 37.1046 32 36V8ZM36 34V10H38V34H36Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M21 17.5859C19.8954 17.5859 19 18.4814 19 19.5859V35.9997C19 37.1043 19.8954 37.9997 21 37.9997H27C28.1046 37.9997 29 37.1043 29 35.9997V19.5859C29 18.4814 28.1046 17.5859 27 17.5859H21ZM23 21.5859V33.9997H25V21.5859H23Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM10 34V30.4141H12V34H10Z" style={{ fill: `var(--${color})` }}/>
-<path d="M6 44H42.5V40H6V44Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M32 8C32 6.89543 32.8954 6 34 6H40C41.1046 6 42 6.89543 42 8V36C42 37.1046 41.1046 38 40 38H34C32.8954 38 32 37.1046 32 36V8ZM36 34V10H38V34H36Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M21 17.5859C19.8954 17.5859 19 18.4814 19 19.5859V35.9997C19 37.1043 19.8954 37.9997 21 37.9997H27C28.1046 37.9997 29 37.1043 29 35.9997V19.5859C29 18.4814 28.1046 17.5859 27 17.5859H21ZM23 21.5859V33.9997H25V21.5859H23Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM10 34V30.4141H12V34H10Z" style={{ fill: `var(--type)` }}/>
+<path d="M6 44H42.5V40H6V44Z" 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="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--${color})` }}/>
-<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M32.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--type)` }}/>
+<path d="M6.00024 43.5H42.0002V40.5H6.00024V43.5Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/chart-line-uptrend/index.tsx

@@ -6,32 +6,33 @@ interface ChartLineUptrendProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const ChartLineUptrend = forwardRef<SVGSVGElement, ChartLineUptrendProps>(
   ({ fill = false, thick = false, size = 24, color = '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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.815 25.6003L37.6207 12.8276L33.9793 11.1724L28.1735 23.945L22.5903 18.3619C20.5435 16.3151 17.0676 17.0527 16.0285 19.7544L10.1333 35.082L13.8667 36.5179L19.7619 21.1903L25.3451 26.7735C27.3199 28.7483 30.6593 28.1428 31.815 25.6003Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.815 25.6003L37.6207 12.8276L33.9793 11.1724L28.1735 23.945L22.5903 18.3619C20.5435 16.3151 17.0676 17.0527 16.0285 19.7544L10.1333 35.082L13.8667 36.5179L19.7619 21.1903L25.3451 26.7735C27.3199 28.7483 30.6593 28.1428 31.815 25.6003Z" 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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.3598 25.3934L37.1655 12.6207L34.4344 11.3793L28.6287 24.152C28.4842 24.4698 28.0668 24.5455 27.8199 24.2986L22.2368 18.7155C20.4458 16.9245 17.4044 17.5699 16.4952 19.9339L10.6 35.2615L13.4 36.3384L19.2952 21.0108C19.4251 20.6731 19.8596 20.5809 20.1155 20.8368L25.6986 26.4199C27.4266 28.1479 30.3486 27.618 31.3598 25.3934Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.3598 25.3934L37.1655 12.6207L34.4344 11.3793L28.6287 24.152C28.4842 24.4698 28.0668 24.5455 27.8199 24.2986L22.2368 18.7155C20.4458 16.9245 17.4044 17.5699 16.4952 19.9339L10.6 35.2615L13.4 36.3384L19.2952 21.0108C19.4251 20.6731 19.8596 20.5809 20.1155 20.8368L25.6986 26.4199C27.4266 28.1479 30.3486 27.618 31.3598 25.3934Z" 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="M5 6V39C5 41.2091 6.79086 43 9 43H42V39H9V6H5Z" style={{ fill: `var(--${color})` }}/>
-<path d="M35.2173 23.7995L41.0231 11.0268L37.3816 9.37158L31.5758 22.1443L25.9927 16.5611C23.9459 14.5143 20.47 15.2519 19.4309 17.9536L13.5356 33.2812L17.269 34.7171L23.1643 19.3895L28.7474 24.9727C30.7222 26.9475 34.0616 26.342 35.2173 23.7995Z" style={{ fill: `var(--${color})` }}/>
+<path d="M5 6V39C5 41.2091 6.79086 43 9 43H42V39H9V6H5Z" style={{ fill: `var(--type)` }}/>
+<path d="M35.2173 23.7995L41.0231 11.0268L37.3816 9.37158L31.5758 22.1443L25.9927 16.5611C23.9459 14.5143 20.47 15.2519 19.4309 17.9536L13.5356 33.2812L17.269 34.7171L23.1643 19.3895L28.7474 24.9727C30.7222 26.9475 34.0616 26.342 35.2173 23.7995Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M5.5 6V39C5.5 40.933 7.067 42.5 9 42.5H42V39.5H9C8.72386 39.5 8.5 39.2761 8.5 39V6H5.5Z" style={{ fill: `var(--${color})` }}/>
-<path d="M34.7621 23.5926L40.5679 10.8199L37.8368 9.57851L32.031 22.3512C31.8866 22.669 31.4691 22.7447 31.2223 22.4978L25.6391 16.9147C23.8482 15.1237 20.8068 15.7692 19.8976 18.1331L14.0023 33.4608L16.8024 34.5377L22.6976 19.2101C22.8275 18.8724 23.262 18.7802 23.5178 19.036L29.101 24.6192C30.8289 26.3471 33.7509 25.8173 34.7621 23.5926Z" style={{ fill: `var(--${color})` }}/>
+<path d="M5.5 6V39C5.5 40.933 7.067 42.5 9 42.5H42V39.5H9C8.72386 39.5 8.5 39.2761 8.5 39V6H5.5Z" style={{ fill: `var(--type)` }}/>
+<path d="M34.7621 23.5926L40.5679 10.8199L37.8368 9.57851L32.031 22.3512C31.8866 22.669 31.4691 22.7447 31.2223 22.4978L25.6391 16.9147C23.8482 15.1237 20.8068 15.7692 19.8976 18.1331L14.0023 33.4608L16.8024 34.5377L22.6976 19.2101C22.8275 18.8724 23.262 18.7802 23.5178 19.036L29.101 24.6192C30.8289 26.3471 33.7509 25.8173 34.7621 23.5926Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/check-mark/index.tsx

@@ -6,30 +6,31 @@ interface CheckMarkProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const CheckMark = forwardRef<SVGSVGElement, CheckMarkProps>(
   ({ fill = false, thick = false, size = 24, color = '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 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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="M9.76642 19.9372L20.3116 30.4824L37.9306 12.9249L40.7541 15.7582L23.1351 33.3158C21.5722 34.8732 19.0434 34.871 17.4832 33.3108L6.93799 22.7656L9.76642 19.9372Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.76642 19.9372L20.3116 30.4824L37.9306 12.9249L40.7541 15.7582L23.1351 33.3158C21.5722 34.8732 19.0434 34.871 17.4832 33.3108L6.93799 22.7656L9.76642 19.9372Z" 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="M9.41307 20.2908L19.9583 30.836C20.1533 31.031 20.4694 31.0313 20.6648 30.8366L38.2837 13.2791L40.4013 15.4041L22.7824 32.9616C21.4148 34.3244 19.2021 34.3225 17.8369 32.9573L7.29175 22.4121L9.41307 20.2908Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.41307 20.2908L19.9583 30.836C20.1533 31.031 20.4694 31.0313 20.6648 30.8366L38.2837 13.2791L40.4013 15.4041L22.7824 32.9616C21.4148 34.3244 19.2021 34.3225 17.8369 32.9573L7.29175 22.4121L9.41307 20.2908Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/check-mark-fill/index.tsx

@@ -6,34 +6,35 @@ interface CheckMarkFillProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const CheckMarkFill = forwardRef<SVGSVGElement, CheckMarkFillProps>(
   ({ fill = false, thick = false, size = 24, color = '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 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.4293 21.3317L22.6156 27.518L33.296 16.8748L36.1195 19.7082L25.439 30.3514C23.8762 31.9088 21.3473 31.9066 19.7871 30.3465L13.6008 24.1602L16.4293 21.3317Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.4293 21.3317L22.6156 27.518L33.296 16.8748L36.1195 19.7082L25.439 30.3514C23.8762 31.9088 21.3473 31.9066 19.7871 30.3465L13.6008 24.1602L16.4293 21.3317Z" 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}>
-<circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" fill="white"/>
+<circle cx="24" cy="24" r="20" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" 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}>
-<circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" fill="white"/>
+<circle cx="24" cy="24" r="20" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" style={{ fill: `var(--fillType)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" fill="white"/>
+<circle cx="24" cy="24" r="20" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" style={{ fill: `var(--fillType)` }}/>
 </svg>
 ;
   }

package/assets/check-mark-in-circle/index.tsx

@@ -6,32 +6,33 @@ interface CheckMarkInCircleProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const CheckMarkInCircle = forwardRef<SVGSVGElement, CheckMarkInCircleProps>(
   ({ fill = false, thick = false, size = 24, color = '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 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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="M35.1045 20.0361L24.4238 30.6787C22.861 32.2361 20.3326 32.2338 18.7725 30.6738L12.5859 24.4883L15.4141 21.6592L21.6006 27.8457L32.2812 17.2031L35.1045 20.0361Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z" style={{ fill: `var(--${color})` }}/>
+<path d="M35.1045 20.0361L24.4238 30.6787C22.861 32.2361 20.3326 32.2338 18.7725 30.6738L12.5859 24.4883L15.4141 21.6592L21.6006 27.8457L32.2812 17.2031L35.1045 20.0361Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M34.752 19.6816L24.0713 30.3252C22.7038 31.6876 20.491 31.6852 19.126 30.3203L12.9395 24.1338L15.0605 22.0127L21.2471 28.1992C21.442 28.3939 21.7578 28.3944 21.9531 28.2002L32.6338 17.5566L34.752 19.6816Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34.752 19.6816L24.0713 30.3252C22.7038 31.6876 20.491 31.6852 19.126 30.3203L12.9395 24.1338L15.0605 22.0127L21.2471 28.1992C21.442 28.3939 21.7578 28.3944 21.9531 28.2002L32.6338 17.5566L34.752 19.6816Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/chrome/index.tsx

@@ -6,42 +6,43 @@ interface ChromeProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
   ({ fill = false, thick = false, size = 24, color = '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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--type)` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" 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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--type)` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" 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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--type)` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--type)` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--type)` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/clock/index.tsx

@@ -6,34 +6,35 @@ interface ClockProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const Clock = forwardRef<SVGSVGElement, ClockProps>(
   ({ fill = false, thick = false, size = 24, color = '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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" 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="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 24Z" style={{ fill: `var(--${color})` }}/>
+<path d="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 24Z" 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.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--type)` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/close/index.tsx

@@ -6,30 +6,31 @@ interface CloseProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const Close = forwardRef<SVGSVGElement, CloseProps>(
   ({ fill = false, thick = false, size = 24, color = '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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.2242L29.6689 15.5858L32.4973 18.4142L26.8588 24.0527L32.4504 29.6443L29.622 32.4727L24.0304 26.8811L18.4859 32.4256L15.6574 29.5972L21.202 24.0527L15.6106 18.4613L18.439 15.6329L24.0304 21.2242Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.2242L29.6689 15.5858L32.4973 18.4142L26.8588 24.0527L32.4504 29.6443L29.622 32.4727L24.0304 26.8811L18.4859 32.4256L15.6574 29.5972L21.202 24.0527L15.6106 18.4613L18.439 15.6329L24.0304 21.2242Z" 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.9314L30.0224 15.9393L32.1437 18.0607L26.1517 24.0527L32.0969 29.9978L29.9756 32.1192L24.0304 26.174L18.1323 32.0721L16.011 29.9508L21.9091 24.0527L15.9641 18.1077L18.0855 15.9864L24.0304 21.9314Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.9314L30.0224 15.9393L32.1437 18.0607L26.1517 24.0527L32.0969 29.9978L29.9756 32.1192L24.0304 26.174L18.1323 32.0721L16.011 29.9508L21.9091 24.0527L15.9641 18.1077L18.0855 15.9864L24.0304 21.9314Z" 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="M24.0006 21.1712L12.4153 9.58594L9.58692 12.4144L21.1722 23.9997L9.58691 35.585L12.4153 38.4134L24.0006 26.8281L35.5859 38.4134L38.4144 35.585L26.8291 23.9997L38.4144 12.4144L35.5859 9.58594L24.0006 21.1712Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24.0006 21.1712L12.4153 9.58594L9.58692 12.4144L21.1722 23.9997L9.58691 35.585L12.4153 38.4134L24.0006 26.8281L35.5859 38.4134L38.4144 35.585L26.8291 23.9997L38.4144 12.4144L35.5859 9.58594L24.0006 21.1712Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   } 
   
   return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
-<path d="M24.0006 21.8783L12.0618 9.93945L9.94043 12.0608L21.8793 23.9996L9.94043 35.9385L12.0618 38.0598L24.0006 26.1209L35.9395 38.0598L38.0608 35.9385L26.1219 23.9996L38.0608 12.0608L35.9395 9.93946L24.0006 21.8783Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24.0006 21.8783L12.0618 9.93945L9.94043 12.0608L21.8793 23.9996L9.94043 35.9385L12.0618 38.0598L24.0006 26.1209L35.9395 38.0598L38.0608 35.9385L26.1219 23.9996L38.0608 12.0608L35.9395 9.93946L24.0006 21.8783Z" style={{ fill: `var(--type)` }}/>
 </svg>
 ;
   }

package/assets/close-fill/index.tsx

@@ -6,34 +6,35 @@ interface CloseFillProps {
   thick?: boolean;
   className?: string;
   size?: number
-  color?: BasicColorType;
+  type?: BasicColorType;
+  fillType?: BasicColorType;
 }
 
 export const CloseFill = forwardRef<SVGSVGElement, CloseFillProps>(
   ({ fill = false, thick = false, size = 24, color = '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 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" 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 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" 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 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" 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 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
-<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--type)` }}/>
+<path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" style={{ fill: `var(--fillType)` }}/>
 </svg>
 ;
   }