@liner-fe/icon 0.0.49 → 0.0.51

package/assets/source/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SourceProps {
+interface SourceProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface SourceProps {
 }
 
 export const Source = forwardRef<SVGSVGElement, SourceProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.3401 11.0021C15.8405 11.5017 15.8414 12.3108 16.3379 12.8073L23.0159 19.4852C23.5167 19.9861 24.3301 19.9827 24.8254 19.4874L31.5033 12.8095C32.0029 12.3098 31.9976 11.4964 31.5011 10.9999L24.8232 4.32199C24.3267 3.82552 23.5133 3.82889 23.018 4.32417L16.3401 11.0021ZM23.9217 16.1484L19.6791 11.9058L23.9217 7.66314L28.1643 11.9058L23.9217 16.1484Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28.4987 24.8043C28.0022 24.3079 28.0012 23.4988 28.5008 22.9992L35.1788 16.3212C35.6741 15.826 36.4875 15.8226 36.9839 16.3191L43.6619 22.997C44.1584 23.4935 44.1637 24.3069 43.6641 24.8065L36.9861 31.4845C36.4908 31.9797 35.6774 31.9831 35.1766 31.4823L28.4987 24.8043ZM31.8398 23.9029L36.0825 28.1455L40.3251 23.9029L36.0825 19.6602L31.8398 23.9029Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M4.32336 23.0168C3.82373 23.5164 3.8247 24.3254 4.32117 24.8219L10.9991 31.4999C11.5 32.0007 12.3134 31.9973 12.8086 31.502L19.4866 24.8241C19.9862 24.3245 19.9809 23.5111 19.4844 23.0146L12.8065 16.3366C12.31 15.8402 11.4966 15.8435 11.0013 16.3388L4.32336 23.0168ZM11.905 28.1631L7.66233 23.9204L11.905 19.6778L16.1476 23.9204L11.905 28.1631Z" style={{ fill: `var(--${type})` }}/>
@@ -21,7 +22,7 @@ export const Source = forwardRef<SVGSVGElement, SourceProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.3401 11.0021C15.8405 11.5017 15.8414 12.3108 16.3379 12.8073L23.0159 19.4852C23.5167 19.9861 24.3301 19.9827 24.8254 19.4874L31.5033 12.8095C32.0029 12.3098 31.9976 11.4964 31.5011 10.9999L24.8232 4.32199C24.3267 3.82552 23.5133 3.82889 23.018 4.32417L16.3401 11.0021ZM23.9217 16.1484L19.6791 11.9058L23.9217 7.66314L28.1643 11.9058L23.9217 16.1484Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28.4987 24.8043C28.0022 24.3079 28.0012 23.4988 28.5008 22.9992L35.1788 16.3212C35.6741 15.826 36.4875 15.8226 36.9839 16.3191L43.6619 22.997C44.1584 23.4935 44.1637 24.3069 43.6641 24.8065L36.9861 31.4845C36.4908 31.9797 35.6774 31.9831 35.1766 31.4823L28.4987 24.8043ZM31.8398 23.9029L36.0825 28.1455L40.3251 23.9029L36.0825 19.6602L31.8398 23.9029Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M4.32336 23.0168C3.82373 23.5164 3.8247 24.3254 4.32117 24.8219L10.9991 31.4999C11.5 32.0007 12.3134 31.9973 12.8086 31.502L19.4866 24.8241C19.9862 24.3245 19.9809 23.5111 19.4844 23.0146L12.8065 16.3366C12.31 15.8402 11.4966 15.8435 11.0013 16.3388L4.32336 23.0168ZM11.905 28.1631L7.66233 23.9204L11.905 19.6778L16.1476 23.9204L11.905 28.1631Z" style={{ fill: `var(--${type})` }}/>
@@ -29,7 +30,7 @@ export const Source = forwardRef<SVGSVGElement, SourceProps>(
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.3401 11.0021C15.8405 11.5017 15.8414 12.3108 16.3379 12.8073L23.0159 19.4852C23.5167 19.9861 24.3301 19.9827 24.8254 19.4874L31.5033 12.8095C32.0029 12.3098 31.9976 11.4964 31.5011 10.9999L24.8232 4.32199C24.3267 3.82552 23.5133 3.82889 23.018 4.32417L16.3401 11.0021ZM23.9217 14.7342L21.0933 11.9058L23.9217 9.07736L26.7501 11.9058L23.9217 14.7342Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28.4987 24.8043C28.0022 24.3079 28.0012 23.4988 28.5008 22.9992L35.1788 16.3212C35.6741 15.826 36.4875 15.8226 36.9839 16.3191L43.6619 22.997C44.1584 23.4935 44.1637 24.3069 43.6641 24.8065L36.9861 31.4845C36.4908 31.9797 35.6774 31.9831 35.1766 31.4823L28.4987 24.8043ZM33.254 23.9029L36.0825 26.7313L38.9109 23.9029L36.0825 21.0744L33.254 23.9029Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M4.32336 23.0168C3.82373 23.5164 3.8247 24.3254 4.32117 24.8219L10.9991 31.4999C11.5 32.0007 12.3134 31.9973 12.8086 31.502L19.4866 24.8241C19.9862 24.3245 19.9809 23.5111 19.4844 23.0146L12.8065 16.3366C12.31 15.8402 11.4966 15.8435 11.0013 16.3388L4.32336 23.0168ZM11.905 26.7489L9.07654 23.9204L11.905 21.092L14.7334 23.9204L11.905 26.7489Z" style={{ fill: `var(--${type})` }}/>
@@ -38,7 +39,7 @@ export const Source = forwardRef<SVGSVGElement, SourceProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.3401 11.0021C15.8405 11.5017 15.8414 12.3108 16.3379 12.8073L23.0159 19.4852C23.5167 19.9861 24.3301 19.9827 24.8254 19.4874L31.5033 12.8095C32.0029 12.3098 31.9976 11.4964 31.5011 10.9999L24.8232 4.32199C24.3267 3.82552 23.5133 3.82889 23.018 4.32417L16.3401 11.0021ZM23.9217 16.1484L19.6791 11.9058L23.9217 7.66314L28.1643 11.9058L23.9217 16.1484Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28.4987 24.8043C28.0022 24.3079 28.0012 23.4988 28.5008 22.9992L35.1788 16.3212C35.6741 15.826 36.4875 15.8226 36.9839 16.3191L43.6619 22.997C44.1584 23.4935 44.1637 24.3069 43.6641 24.8065L36.9861 31.4845C36.4908 31.9797 35.6774 31.9831 35.1766 31.4823L28.4987 24.8043ZM31.8398 23.9029L36.0825 28.1455L40.3251 23.9029L36.0825 19.6602L31.8398 23.9029Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M4.32336 23.0168C3.82373 23.5164 3.8247 24.3254 4.32117 24.8219L10.9991 31.4999C11.5 32.0007 12.3134 31.9973 12.8086 31.502L19.4866 24.8241C19.9862 24.3245 19.9809 23.5111 19.4844 23.0146L12.8065 16.3366C12.31 15.8402 11.4966 15.8435 11.0013 16.3388L4.32336 23.0168ZM11.905 28.1631L7.66233 23.9204L11.905 19.6778L16.1476 23.9204L11.905 28.1631Z" style={{ fill: `var(--${type})` }}/>

package/assets/speaker/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SpeakerProps {
+interface SpeakerProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface SpeakerProps {
 }
 
 export const Speaker = forwardRef<SVGSVGElement, SpeakerProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M19.7016 31.9847C19.9136 32.0369 20.1173 32.1219 20.3049 32.2376L33.4578 40.3485C34.8622 41.2145 36.6721 40.2043 36.6721 38.5544V7.11121C36.6721 5.46129 34.8622 4.45103 33.4578 5.31705L19.6295 13.8445C19.2969 14.0496 18.9138 14.1583 18.5231 14.1583H6.10788C4.94373 14.1583 4 15.102 4 16.2661V29.816C4 30.9801 4.94373 31.9238 6.10788 31.9238H9.37793V39.4019C9.37793 41.6111 11.1688 43.4019 13.3779 43.4019H15.7016C17.9107 43.4019 19.7016 41.6111 19.7016 39.4019V31.9847Z" style={{ fill: `var(--${type})` }}/>
 <path d="M43.0779 23.5265C43.0779 26.9183 41.482 29.9374 39 31.8737V15.1792C41.482 17.1155 43.0779 20.1346 43.0779 23.5265Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M19.2016 31.9238C19.5913 31.9244 19.9732 32.033 20.3049 32.2376L33.4578 40.3485C34.8622 41.2145 36.6721 40.2043 36.6721 38.5544V7.11121C36.6721 5.46129 34.8622 4.45103 33.4578 5.31705L19.6295 13.8445C19.2969 14.0496 18.9138 14.1583 18.5231 14.1583H6.10788C4.94373 14.1583 4 15.102 4 16.2661V29.816C4 30.9801 4.94373 31.9238 6.10788 31.9238H9.87793V39.4022C9.87793 41.3352 11.4449 42.9022 13.3779 42.9022H15.7016C17.6346 42.9022 19.2016 41.3352 19.2016 39.4022V31.9238Z" style={{ fill: `var(--${type})` }}/>
 <path d="M43.0779 23.5265C43.0779 26.9183 41.482 29.9374 39 31.8737V15.1792C41.482 17.1155 43.0779 20.1346 43.0779 23.5265Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M19.7016 31.9847C19.9136 32.0369 20.1173 32.1219 20.3049 32.2376L33.4578 40.3485C34.8622 41.2145 36.6721 40.2043 36.6721 38.5544V7.11121C36.6721 5.46129 34.8622 4.45103 33.4578 5.31705L19.6295 13.8445C19.2969 14.0496 18.9138 14.1583 18.5231 14.1583H6.10788C4.94373 14.1583 4 15.102 4 16.2661V29.816C4 30.9801 4.94373 31.9238 6.10788 31.9238H9.37793V39.4019C9.37793 41.6111 11.1688 43.4019 13.3779 43.4019H15.7016C17.9107 43.4019 19.7016 41.6111 19.7016 39.4019V31.9847ZM8 27.9238H19.1985C20.3308 27.9238 21.4407 28.2386 22.4045 28.8329L32.6721 35.1646V10.501L21.729 17.2492C20.7653 17.8435 19.6553 18.1583 18.5231 18.1583H8V27.9238ZM13.3779 39.4019V32.0005H15.7016V39.4019H13.3779Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 31.8737C41.482 29.9374 43.0779 26.9183 43.0779 23.5265C43.0779 20.1346 41.482 17.1155 39 15.1792V31.8737Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M19.2016 31.9238C19.5913 31.9244 19.9732 32.033 20.3049 32.2376L33.4578 40.3485C34.8622 41.2145 36.6721 40.2043 36.6721 38.5544V7.11121C36.6721 5.46129 34.8622 4.45103 33.4578 5.31705L19.6295 13.8445C19.2969 14.0496 18.9138 14.1583 18.5231 14.1583H6.10788C4.94373 14.1583 4 15.102 4 16.2661V29.816C4 30.9801 4.94373 31.9238 6.10788 31.9238H9.87793V39.4022C9.87793 41.3352 11.4449 42.9022 13.3779 42.9022H15.7016C17.6346 42.9022 19.2016 41.3352 19.2016 39.4022V31.9238ZM7 28.9238H19.1985C20.1454 28.9238 21.0736 29.187 21.8796 29.684L33.6721 36.9561L33.6721 8.70946L21.2041 16.3981C20.3982 16.8951 19.4699 17.1583 18.5231 17.1583H7V28.9238ZM12.8779 39.4022V32H16.2016V39.4022C16.2016 39.6783 15.9777 39.9022 15.7016 39.9022H13.3779C13.1018 39.9022 12.8779 39.6783 12.8779 39.4022Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 31.8737C41.482 29.9374 43.0779 26.9183 43.0779 23.5265C43.0779 20.1346 41.482 17.1155 39 15.1792V31.8737Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/spinner/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SpinnerProps {
+interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface SpinnerProps {
 }
 
 export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#paint0_angular_774_40757_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.019799 -0.019799 0 24 24.0001)"><foreignObject x="-1212.19" y="-1212.19" width="2424.38" height="2424.38"><div  ></div></foreignObject></g></g><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;transform&#34;:{&#34;m00&#34;:0.0,&#34;m01&#34;:-39.597976684570312,&#34;m02&#34;:43.798988342285156,&#34;m10&#34;:39.597976684570312,&#34;m11&#34;:0.0,&#34;m12&#34;:4.2011013031005859},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
 <defs>
 <clipPath id="paint0_angular_774_40757_clip_path"><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z"/></clipPath></defs>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#paint0_angular_774_40757_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.019799 -0.019799 0 24 24.0001)"><foreignObject x="-1212.19" y="-1212.19" width="2424.38" height="2424.38"><div  ></div></foreignObject></g></g><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;transform&#34;:{&#34;m00&#34;:0.0,&#34;m01&#34;:-39.597976684570312,&#34;m02&#34;:43.798988342285156,&#34;m10&#34;:39.597976684570312,&#34;m11&#34;:0.0,&#34;m12&#34;:4.2011013031005859},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
 <defs>
 <clipPath id="paint0_angular_774_40757_clip_path"><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z"/></clipPath></defs>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#paint0_angular_774_40757_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.019799 -0.019799 0 24 24.0001)"><foreignObject x="-1212.19" y="-1212.19" width="2424.38" height="2424.38"><div  ></div></foreignObject></g></g><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;transform&#34;:{&#34;m00&#34;:0.0,&#34;m01&#34;:-39.597976684570312,&#34;m02&#34;:43.798988342285156,&#34;m10&#34;:39.597976684570312,&#34;m11&#34;:0.0,&#34;m12&#34;:4.2011013031005859},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
 <defs>
 <clipPath id="paint0_angular_774_40757_clip_path"><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z"/></clipPath></defs>
@@ -35,7 +36,7 @@ export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#paint0_angular_774_40757_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.019799 -0.019799 0 24 24.0001)"><foreignObject x="-1212.19" y="-1212.19" width="2424.38" height="2424.38"><div  ></div></foreignObject></g></g><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.11670587956905365,&#34;g&#34;:0.11735424399375916,&#34;b&#34;:0.12156862765550613,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.80000001192092896},&#34;position&#34;:0.250},{&#34;color&#34;:{&#34;r&#34;:0.42745098471641541,&#34;g&#34;:0.42745098471641541,&#34;b&#34;:0.43921568989753723,&#34;a&#34;:0.0},&#34;position&#34;:0.87999999523162842}],&#34;transform&#34;:{&#34;m00&#34;:0.0,&#34;m01&#34;:-39.597976684570312,&#34;m02&#34;:43.798988342285156,&#34;m10&#34;:39.597976684570312,&#34;m11&#34;:0.0,&#34;m12&#34;:4.2011013031005859},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
 <defs>
 <clipPath id="paint0_angular_774_40757_clip_path"><path fillRule="evenodd" clipRule="evenodd" d="M35.3137 12.6863C29.0653 6.4379 18.9347 6.4379 12.6863 12.6863C6.4379 18.9347 6.4379 29.0653 12.6863 35.3137C15.8135 38.4409 19.909 40.0026 24.0104 40L24.0129 44C18.8933 44.0033 13.766 42.0503 9.85786 38.1421C2.04738 30.3316 2.04738 17.6684 9.85786 9.85786C17.6684 2.04738 30.3316 2.04738 38.1421 9.85786C45.9526 17.6684 45.9526 30.3316 38.1421 38.1421L35.3137 35.3137C41.5621 29.0653 41.5621 18.9347 35.3137 12.6863Z"/></clipPath></defs>

package/assets/stack/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface StackProps {
+interface StackProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface StackProps {
 }
 
 export const Stack = forwardRef<SVGSVGElement, StackProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24.0002 5L42.4224 14.2111C43.8965 14.9482 43.8965 17.0518 42.4224 17.7889L24.0002 27L5.57786 17.7889C4.10377 17.0518 4.10377 14.9482 5.57786 14.2111L24.0002 5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4.71977 21.5339C3.57195 23.0848 3.96645 25.4831 5.9033 26.4515L24.0001 35.4999L42.0969 26.4515C44.0337 25.4831 44.4282 23.0848 43.2804 21.534L24.0001 31.0277L4.71977 21.5339Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4.71977 30.0339C3.57195 31.5848 3.96645 33.9831 5.9033 34.9515L24.0001 43.9999L42.0969 34.9515C44.0337 33.9831 44.4282 31.5848 43.2804 30.034L24.0001 39.5277L4.71977 30.0339Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M42.4224 17.7889L24.0002 27L5.57786 17.7889C4.10377 17.0518 4.10377 14.9482 5.57786 14.2111L24.0002 5L42.4224 14.2111C43.8965 14.9482 43.8965 17.0518 42.4224 17.7889Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4.27246 22.375C3.74762 23.8491 4.29123 25.6456 5.9033 26.4516L24.0001 35.5L42.0969 26.4516C43.7089 25.6456 44.2525 23.8491 43.7277 22.375L24.0001 32.1459L4.27246 22.375Z" style={{ fill: `var(--${type})` }}/>
 <path d="M5.9033 34.9515C4.30797 34.1538 3.75903 32.3861 4.25645 30.9209L24.0001 40.6458L43.7437 30.9209C44.2411 32.3861 43.6922 34.1538 42.0969 34.9515L24.0001 43.9999L5.9033 34.9515Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M42.3433 17.7889L23.9211 27L5.49876 17.7889C4.02466 17.0518 4.02466 14.9482 5.49876 14.2111L23.9211 5L42.3433 14.2111C43.8174 14.9482 43.8174 17.0518 42.3433 17.7889ZM10.8653 16L23.9211 9.47214L36.9768 16L23.9211 22.5279L10.8653 16Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4.64067 21.5339C3.49284 23.0848 3.88735 25.4831 5.82419 26.4515L23.921 35.4999L42.0178 26.4515C43.9546 25.4831 44.3491 23.0848 43.2013 21.534L23.921 31.0277L4.64067 21.5339Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4.64067 30.0339C3.49284 31.5848 3.88735 33.9831 5.82419 34.9515L23.921 43.9999L42.0178 34.9515C43.9546 33.9831 44.3491 31.5848 43.2013 30.034L23.921 39.5277L4.64067 30.0339Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const Stack = forwardRef<SVGSVGElement, StackProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M42.4224 17.7889L24.0002 27L5.57786 17.7889C4.10377 17.0518 4.10377 14.9482 5.57786 14.2111L24.0002 5L42.4224 14.2111C43.8965 14.9482 43.8965 17.0518 42.4224 17.7889ZM8.70836 16L24.0002 8.3541L39.292 16L24.0002 23.6459L8.70836 16Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4.27246 22.375C3.74762 23.8491 4.29123 25.6456 5.9033 26.4516L24.0001 35.5L42.0969 26.4516C43.7089 25.6456 44.2525 23.8491 43.7277 22.375L24.0001 32.1459L4.27246 22.375Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4.25645 30.9209C3.75903 32.3861 4.30797 34.1538 5.9033 34.9515L24.0001 43.9999L42.0969 34.9515C43.6922 34.1538 44.2411 32.3861 43.7437 30.9209L24.0001 40.6458L4.25645 30.9209Z" style={{ fill: `var(--${type})` }}/>

package/assets/star/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface StarProps {
+interface StarProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface StarProps {
 }
 
 export const Star = forwardRef<SVGSVGElement, StarProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M22.2443 5.21983C23.0024 3.83042 24.998 3.83032 25.756 5.21983L30.7111 14.3048C30.7471 14.3708 30.7866 14.4343 30.8293 14.4952C31.1276 14.9208 31.5822 15.2159 32.0988 15.3126L42.2697 17.2179C43.8258 17.5093 44.4422 19.4073 43.3547 20.5577L36.2453 28.0772C36.0391 28.2954 35.8877 28.5545 35.7971 28.8331C35.7066 29.1118 35.6775 29.4103 35.716 29.7081L37.0471 39.9718C37.0752 40.1891 37.0667 40.3985 37.0305 40.5968C37.0187 40.6611 37.0053 40.7245 36.9875 40.7862C36.9684 40.8525 36.9447 40.9166 36.9191 40.9796C36.911 40.9995 36.9034 41.0196 36.8947 41.0392C36.8868 41.057 36.8778 41.0743 36.8693 41.0919C36.8603 41.1106 36.8515 41.1292 36.842 41.1476C36.8105 41.2079 36.7757 41.2659 36.7385 41.3224C36.7272 41.3394 36.716 41.3565 36.7043 41.3731C36.6917 41.3911 36.6784 41.4084 36.6652 41.4259C36.6539 41.4409 36.6428 41.4561 36.631 41.4708C36.6167 41.4887 36.602 41.5062 36.5871 41.5235C36.5748 41.5379 36.5627 41.5525 36.55 41.5665C36.534 41.5841 36.5177 41.6013 36.5012 41.6183C36.4859 41.6339 36.47 41.649 36.4543 41.6642C36.4388 41.679 36.4233 41.6937 36.4074 41.7081C36.3958 41.7186 36.3841 41.7291 36.3723 41.7394C36.3526 41.7563 36.3329 41.773 36.3127 41.7892C36.2983 41.8006 36.2834 41.8113 36.2687 41.8224C36.2453 41.8401 36.2216 41.8574 36.1974 41.8741C36.1915 41.8782 36.1859 41.8828 36.1799 41.8868C36.1523 41.9054 36.1243 41.9233 36.0959 41.9405C36.0863 41.9463 36.0763 41.9515 36.0666 41.9571C36.0405 41.9723 36.0142 41.987 35.9875 42.0011C35.9742 42.008 35.9609 42.0149 35.9475 42.0216C35.928 42.0312 35.9086 42.0409 35.8889 42.0499C35.8663 42.0602 35.8434 42.0697 35.8205 42.0792C35.8013 42.0871 35.7823 42.0953 35.7629 42.1026C35.7454 42.1092 35.7278 42.1151 35.7101 42.1212C35.6858 42.1296 35.6616 42.1381 35.6369 42.1456C35.6275 42.1485 35.618 42.1507 35.6086 42.1534C35.5353 42.1745 35.4608 42.1916 35.385 42.2042C35.3755 42.2058 35.3661 42.2077 35.3566 42.2091C35.3259 42.2137 35.295 42.2176 35.2639 42.2208C35.2512 42.2221 35.2385 42.2227 35.2258 42.2237C35.1512 42.2299 35.0761 42.2331 35.0002 42.2306C34.9911 42.2303 34.982 42.2291 34.9728 42.2286C34.9381 42.227 34.9033 42.2253 34.8683 42.2218C34.8608 42.221 34.8534 42.2197 34.8459 42.2188C34.633 42.1947 34.4176 42.1356 34.2062 42.0353L24.8576 37.5978C24.315 37.3402 23.6854 37.3403 23.1428 37.5978L13.7941 42.0353C13.5816 42.1361 13.3646 42.195 13.1506 42.2188C13.1437 42.2196 13.1369 42.2211 13.1301 42.2218C13.0958 42.2252 13.0616 42.227 13.0275 42.2286C13.0184 42.2291 13.0093 42.2303 13.0002 42.2306C12.925 42.2331 12.8505 42.2298 12.7766 42.2237C12.7622 42.2226 12.7479 42.2223 12.7336 42.2208C12.7038 42.2177 12.6742 42.2135 12.6447 42.2091C12.6346 42.2076 12.6245 42.2059 12.6144 42.2042C12.5386 42.1916 12.4641 42.1745 12.3908 42.1534C12.3811 42.1506 12.3712 42.1486 12.3615 42.1456C12.3401 42.1391 12.3192 42.1313 12.298 42.1241C12.2755 42.1164 12.2529 42.1092 12.2307 42.1007C12.2145 42.0945 12.1987 42.0877 12.1828 42.0812C12.1576 42.0708 12.1324 42.0603 12.1076 42.0489C12.0934 42.0424 12.0796 42.0353 12.0656 42.0284C12.0436 42.0177 12.0218 42.0067 12.0002 41.9952C11.9831 41.9861 11.9662 41.9765 11.9494 41.9669C11.93 41.9558 11.9108 41.9444 11.8918 41.9327C11.8727 41.921 11.8538 41.9089 11.8351 41.8966C11.8195 41.8862 11.8036 41.8761 11.7883 41.8653C11.7681 41.8511 11.7484 41.8363 11.7287 41.8214C11.717 41.8125 11.705 41.8041 11.6935 41.795C11.67 41.7764 11.6469 41.7571 11.6242 41.7374C11.6146 41.7291 11.6053 41.7205 11.5959 41.712C11.5757 41.6938 11.5558 41.6753 11.5363 41.6563C11.5254 41.6457 11.5147 41.635 11.5041 41.6241C11.4846 41.6042 11.4652 41.5843 11.4465 41.5636C11.4372 41.5533 11.4282 41.5428 11.4191 41.5323C11.4008 41.5112 11.3829 41.4898 11.3654 41.4679C11.3562 41.4563 11.3471 41.4445 11.3381 41.4327C11.3207 41.4099 11.3037 41.3869 11.2873 41.3634C11.2788 41.3512 11.2711 41.3386 11.2629 41.3263C11.2532 41.3116 11.2429 41.2973 11.2336 41.2823L11.2121 41.2472C11.1824 41.1973 11.1554 41.1456 11.1301 41.0929C11.047 40.9204 10.9869 40.7339 10.9572 40.5362C10.9541 40.5156 10.9528 40.4946 10.9504 40.4737C10.9314 40.3124 10.9309 40.1446 10.9533 39.9718L12.2844 29.7081C12.2849 29.7039 12.2848 29.6996 12.2853 29.6954C12.358 29.1041 12.1637 28.5105 11.7541 28.0772L4.64472 20.5577C3.5916 19.4432 4.13744 17.6274 5.5871 17.2501L5.73065 17.2179L15.9016 15.3126C15.9322 15.3069 15.9622 15.2982 15.9924 15.2911C16.5439 15.161 17.0165 14.8048 17.2892 14.3048L22.2443 5.21983Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M22.2441 5.22015C23.0021 3.83026 24.9979 3.83026 25.7559 5.22015L30.7109 14.3051C30.9986 14.8324 31.5082 15.2024 32.0986 15.3129L42.2695 17.2182C43.8256 17.5096 44.4421 19.4076 43.3545 20.558L36.2451 28.0776C35.8327 28.514 35.6387 29.1129 35.7158 29.7084L37.0469 39.9711C37.2442 41.492 35.7356 42.6401 34.3408 42.0932L34.2061 42.0356L24.8574 37.5971C24.3149 37.3397 23.6851 37.3397 23.1426 37.5971L13.794 42.0356L13.6592 42.0932C12.2644 42.6401 10.7558 41.492 10.9531 39.9711L12.2842 29.7084C12.3517 29.1871 12.2112 28.6637 11.8984 28.2485L11.7539 28.0776L4.64551 20.558C3.55789 19.4076 4.17438 17.5096 5.73047 17.2182L15.9014 15.3129C16.4181 15.2162 16.8736 14.9213 17.1719 14.4955L17.2891 14.3051L22.2441 5.22015ZM19.9229 15.7416C19.2037 17.06 17.9302 17.9857 16.4541 18.2621L8.08399 19.8285L13.9346 26.016C14.9664 27.1075 15.453 28.6056 15.2598 30.0951L14.1631 38.5385L21.8555 34.8871C23.1276 34.2833 24.5917 34.2454 25.8877 34.7739L26.1445 34.8871L33.8359 38.5385L32.7402 30.0951C32.547 28.6056 33.0336 27.1075 34.0654 26.016L39.915 19.8285L31.5459 18.2621C30.0698 17.9857 28.7963 17.06 28.0772 15.7416L24 8.26604L19.9229 15.7416Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M22.2441 5.22015C23.0021 3.83026 24.9979 3.83026 25.7559 5.22015L30.7109 14.3051C30.9986 14.8324 31.5082 15.2024 32.0986 15.3129L42.2695 17.2182C43.8256 17.5096 44.4421 19.4076 43.3545 20.558L36.2451 28.0776C35.8327 28.514 35.6387 29.1129 35.7158 29.7084L37.0469 39.9711C37.2442 41.492 35.7356 42.6401 34.3408 42.0932L34.2061 42.0356L24.8574 37.5971C24.3149 37.3397 23.6851 37.3397 23.1426 37.5971L13.794 42.0356L13.6592 42.0932C12.2644 42.6401 10.7558 41.492 10.9531 39.9711L12.2842 29.7084C12.3517 29.1871 12.2112 28.6637 11.8984 28.2485L11.7539 28.0776L4.64551 20.558C3.55789 19.4076 4.17438 17.5096 5.73047 17.2182L15.9014 15.3129C16.4181 15.2162 16.8736 14.9213 17.1719 14.4955L17.2891 14.3051L22.2441 5.22015ZM20.8008 16.2201C19.9378 17.8024 18.4092 18.9128 16.6377 19.2446L10.0703 20.4741L14.6611 25.3295C15.8992 26.6391 16.4828 28.4359 16.251 30.2231L15.3916 36.8481L21.4268 33.9838C22.9532 33.2592 24.7095 33.2141 26.2647 33.8481L26.5732 33.9838L32.6074 36.8481L31.749 30.2231C31.5173 28.4359 32.1008 26.6391 33.3389 25.3295L37.9287 20.4741L31.3623 19.2446C29.5908 18.9128 28.0622 17.8024 27.1992 16.2201L24 10.3539L20.8008 16.2201Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M22.2441 5.22015C23.0021 3.83026 24.9979 3.83026 25.7559 5.22015L30.7109 14.3051C30.9986 14.8324 31.5082 15.2024 32.0986 15.3129L42.2695 17.2182C43.8256 17.5096 44.4421 19.4076 43.3545 20.558L36.2451 28.0776C35.8327 28.514 35.6387 29.1129 35.7158 29.7084L37.0469 39.9711C37.2442 41.492 35.7356 42.6401 34.3408 42.0932L34.2061 42.0356L24.8574 37.5971C24.3149 37.3397 23.6851 37.3397 23.1426 37.5971L13.794 42.0356L13.6592 42.0932C12.2644 42.6401 10.7558 41.492 10.9531 39.9711L12.2842 29.7084C12.3517 29.1871 12.2112 28.6637 11.8984 28.2485L11.7539 28.0776L4.64551 20.558C3.55789 19.4076 4.17438 17.5096 5.73047 17.2182L15.9014 15.3129C16.4181 15.2162 16.8736 14.9213 17.1719 14.4955L17.2891 14.3051L22.2441 5.22015ZM19.9229 15.7416C19.2037 17.06 17.9302 17.9857 16.4541 18.2621L8.08399 19.8285L13.9346 26.016C14.9664 27.1075 15.453 28.6056 15.2598 30.0951L14.1631 38.5385L21.8555 34.8871C23.1276 34.2833 24.5917 34.2454 25.8877 34.7739L26.1445 34.8871L33.8359 38.5385L32.7402 30.0951C32.547 28.6056 33.0336 27.1075 34.0654 26.016L39.915 19.8285L31.5459 18.2621C30.0698 17.9857 28.7963 17.06 28.0772 15.7416L24 8.26604L19.9229 15.7416Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/start/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface StartProps {
+interface StartProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface StartProps {
 }
 
 export const Start = forwardRef<SVGSVGElement, StartProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M5.5 40.0006V8H8.5V40.0006H5.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M38.9359 25.5L28.1251 36.3108L30.2465 38.4321L42.018 26.6606C43.3848 25.2938 43.3848 23.0777 42.018 21.7109L30.2465 9.93933L28.1251 12.0607L38.5645 22.5L14 22.5V25.5L38.9359 25.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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M5.5 40.0006V8H8.5V40.0006H5.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M38.9359 25.5L28.1251 36.3108L30.2465 38.4321L42.018 26.6606C43.3848 25.2938 43.3848 23.0777 42.018 21.7109L30.2465 9.93933L28.1251 12.0607L38.5645 22.5L14 22.5V25.5L38.9359 25.5Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M5 40.0006V8H9V40.0006H5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M37.7288 26L27.7716 35.9572L30.6 38.7857L42.3715 27.0142C43.9336 25.4521 43.9336 22.9194 42.3715 21.3573L30.6 9.58578L27.7716 12.4142L37.3574 22L14 22V26L37.7288 26Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M5.5 40.0006V8H8.5V40.0006H5.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M38.9359 25.5L28.1251 36.3108L30.2465 38.4321L42.018 26.6606C43.3848 25.2938 43.3848 23.0777 42.018 21.7109L30.2465 9.93933L28.1251 12.0607L38.5645 22.5L14 22.5V25.5L38.9359 25.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/step/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface StepProps {
+interface StepProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface StepProps {
 }
 
 export const Step = forwardRef<SVGSVGElement, StepProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M20.3921 24.0505C21.8175 21.1504 22.5959 17.6827 22.839 14.9636C23.3529 9.21377 20.1013 1.86355 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505ZM11.0523 28.242L18.1635 26.15C18.7497 27.1988 19.1462 28.572 19.582 30.1736C20.2334 32.5678 18.871 34.8086 16.8474 35.3591C14.8239 35.9097 12.514 34.6681 11.8626 32.2739C11.4468 30.7457 11.1039 29.4119 11.0523 28.242ZM7.32682 14.2306C6.94677 18.482 8.12964 23.0965 10.1729 25.3736L17.4514 23.2324L17.6997 22.7271C18.9261 20.232 19.6324 17.1407 19.8509 14.6965C20.0544 12.4192 19.4956 9.77048 18.3212 7.76302C17.16 5.77795 15.6721 4.80951 14.0472 4.7896C12.0672 4.76535 10.6751 5.55181 9.60392 7.0042C8.44082 8.58128 7.61186 11.0419 7.32682 14.2306Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C28.2873 9.86355 25.0356 17.2138 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM30.9848 31.3293L38.367 33.1989C40.317 30.8666 41.4323 26.376 41.0618 22.2306C40.7767 19.0419 39.9478 16.5813 38.7847 15.0042C37.7135 13.5518 36.3214 12.7653 34.3414 12.7896C32.7165 12.8095 31.2286 13.778 30.0673 15.763C28.893 17.7705 28.3341 20.4192 28.5377 22.6965C28.7562 25.1407 29.4625 28.232 30.6889 30.7271L30.9848 31.3293ZM37.3424 36.0341L30.1857 34.2216C29.621 35.261 29.2325 36.6082 28.8066 38.1736C28.1552 40.5678 29.5175 42.8086 31.5411 43.3591C33.5647 43.9097 35.8746 42.6681 36.526 40.2739C36.9666 38.6545 37.3254 37.2533 37.3424 36.0341Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M20.3921 24.0505C21.8175 21.1504 22.5959 17.6827 22.839 14.9636C23.3529 9.21377 20.1013 1.86355 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505ZM11.0523 28.242L18.1635 26.15C18.7497 27.1988 19.1462 28.572 19.582 30.1736C20.2334 32.5678 18.871 34.8086 16.8474 35.3591C14.8239 35.9097 12.514 34.6681 11.8626 32.2739C11.4468 30.7457 11.1039 29.4119 11.0523 28.242ZM7.32682 14.2306C6.94677 18.482 8.12964 23.0965 10.1729 25.3736L17.4514 23.2324L17.6997 22.7271C18.9261 20.232 19.6324 17.1407 19.8509 14.6965C20.0544 12.4192 19.4956 9.77048 18.3212 7.76302C17.16 5.77795 15.6721 4.80951 14.0472 4.7896C12.0672 4.76535 10.6751 5.55181 9.60392 7.0042C8.44082 8.58128 7.61186 11.0419 7.32682 14.2306Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C28.2873 9.86355 25.0356 17.2138 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM30.9848 31.3293L38.367 33.1989C40.317 30.8666 41.4323 26.376 41.0618 22.2306C40.7767 19.0419 39.9478 16.5813 38.7847 15.0042C37.7135 13.5518 36.3214 12.7653 34.3414 12.7896C32.7165 12.8095 31.2286 13.778 30.0673 15.763C28.893 17.7705 28.3341 20.4192 28.5377 22.6965C28.7562 25.1407 29.4625 28.232 30.6889 30.7271L30.9848 31.3293ZM37.3424 36.0341L30.1857 34.2216C29.621 35.261 29.2325 36.6082 28.8066 38.1736C28.1552 40.5678 29.5175 42.8086 31.5411 43.3591C33.5647 43.9097 35.8746 42.6681 36.526 40.2739C36.9666 38.6545 37.3254 37.2533 37.3424 36.0341Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.8652 14.6173C23.222 8.92313 19.9811 1.86208 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505C20.819 23.1818 21.1879 22.2622 21.5018 21.327C22.2358 19.1402 22.6687 16.8682 22.839 14.9636C22.8492 14.8488 22.858 14.7333 22.8652 14.6173ZM12.0679 28.4644L17.4238 26.8888C17.8668 27.7727 18.2108 28.9431 18.617 30.4361C19.1334 32.3341 18.0396 33.9984 16.5849 34.3942C15.1302 34.79 13.3439 33.9094 12.8275 32.0114C12.4385 30.5816 12.1485 29.433 12.0679 28.4644ZM8.32285 14.3196C7.9604 18.3742 9.10388 22.6284 10.8664 24.6484L16.4482 23.0063L16.8022 22.286C17.9623 19.9259 18.6445 16.96 18.8548 14.6074C19.0406 12.5293 18.5237 10.0894 17.4581 8.26797C16.41 6.47638 15.1985 5.80379 14.0349 5.78953C12.3978 5.76947 11.3016 6.38705 10.4087 7.59774C9.39322 8.97469 8.59859 11.2349 8.32285 14.3196Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C30.7967 9.83281 28.2286 12.3488 26.7987 15.5791C25.9154 17.5743 25.4664 19.842 25.4983 21.9677C25.5033 22.3038 25.5204 22.6363 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM31.7805 30.681L37.7077 32.4246C39.3641 30.3262 40.4153 26.2301 40.0657 22.3196C39.79 19.2349 38.9954 16.9747 37.9799 15.5977C37.087 14.387 35.9908 13.7695 34.3537 13.7895C33.19 13.8038 31.9786 14.4764 30.9305 16.268C29.8649 18.0894 29.348 20.5293 29.5337 22.6074C29.744 24.96 30.4263 27.9259 31.5863 30.286L31.7805 30.681ZM36.3379 36.1912L31.0921 34.6479C30.5857 35.5562 30.2158 36.8033 29.7715 38.4361C29.2551 40.3341 30.349 41.9984 31.8037 42.3942C33.2583 42.79 35.0447 41.9094 35.5611 40.0114C35.9873 38.4447 36.2947 37.2158 36.3379 36.1912Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M20.3921 24.0505C21.8175 21.1504 22.5959 17.6827 22.839 14.9636C23.3529 9.21377 20.1013 1.86355 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505ZM11.0523 28.242L18.1635 26.15C18.7497 27.1988 19.1462 28.572 19.582 30.1736C20.2334 32.5678 18.871 34.8086 16.8474 35.3591C14.8239 35.9097 12.514 34.6681 11.8626 32.2739C11.4468 30.7457 11.1039 29.4119 11.0523 28.242ZM7.32682 14.2306C6.94677 18.482 8.12964 23.0965 10.1729 25.3736L17.4514 23.2324L17.6997 22.7271C18.9261 20.232 19.6324 17.1407 19.8509 14.6965C20.0544 12.4192 19.4956 9.77048 18.3212 7.76302C17.16 5.77795 15.6721 4.80951 14.0472 4.7896C12.0672 4.76535 10.6751 5.55181 9.60392 7.0042C8.44082 8.58128 7.61186 11.0419 7.32682 14.2306Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C28.2873 9.86355 25.0356 17.2138 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM30.9848 31.3293L38.367 33.1989C40.317 30.8666 41.4323 26.376 41.0618 22.2306C40.7767 19.0419 39.9478 16.5813 38.7847 15.0042C37.7135 13.5518 36.3214 12.7653 34.3414 12.7896C32.7165 12.8095 31.2286 13.778 30.0673 15.763C28.893 17.7705 28.3341 20.4192 28.5377 22.6965C28.7562 25.1407 29.4625 28.232 30.6889 30.7271L30.9848 31.3293ZM37.3424 36.0341L30.1857 34.2216C29.621 35.261 29.2325 36.6082 28.8066 38.1736C28.1552 40.5678 29.5175 42.8086 31.5411 43.3591C33.5647 43.9097 35.8746 42.6681 36.526 40.2739C36.9666 38.6545 37.3254 37.2533 37.3424 36.0341Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/stop/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface StopProps {
+interface StopProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface StopProps {
 }
 
 export const Stop = forwardRef<SVGSVGElement, StopProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" 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>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" 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>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" 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}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" 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/summarize/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SummarizeProps {
+interface SummarizeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,20 +12,20 @@ interface SummarizeProps {
 }
 
 export const Summarize = forwardRef<SVGSVGElement, SummarizeProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C40.9945 26.3258 38.1521 25 35 25C34.6629 25 34.3294 25.0152 34 25.0448V22H14V26H30.411C28.5149 26.8716 26.9091 28.2666 25.7789 30H14V34H24.1814C24.0622 34.6486 24 35.317 24 36C24 38.6593 24.9436 41.0981 26.5143 43ZM14 18V14H34V18H14Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.8002 43.9464V37.9997C33.8002 37.7235 33.5763 37.4997 33.3002 37.4997H29.9301C29.5316 37.4997 29.2932 37.0563 29.513 36.7239L35.2831 27.9982C35.5565 27.5848 36.2002 27.7784 36.2002 28.2741L36.1999 34.2055C36.1998 34.4817 36.4237 34.7055 36.6999 34.7055H40.0708C40.4691 34.7055 40.7075 35.1486 40.488 35.481L34.7174 44.2219C34.4442 44.6357 33.8002 44.4423 33.8002 43.9464Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M41 7V24.4648C39.3439 23.6018 37.4782 23.0857 35.5 23.0107V20.5H12.5V27.5H25.165C24.8881 27.8202 24.6259 28.1536 24.3809 28.5H12.5V35.5H22.0107C22.0044 35.666 22 35.8326 22 36C22 37.7706 22.3541 39.4604 22.9961 41H7V7H41ZM34.2002 34.2051C34.2001 35.5858 35.3194 36.7051 36.7002 36.7051H37.2842L35.7998 38.9521V38C35.7998 36.6193 34.6805 35.5 33.2998 35.5H32.7207L34.2002 33.2617V34.2051ZM12.5 19.5H35.5V12.5H12.5V19.5Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="4"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M39 25.7499V9H9V39H24.4141C24.834 40.4848 25.5579 41.8419 26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C41.8923 27.2768 40.5294 26.3472 39 25.7499Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34 14H14V18H34V14Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34 22H14V26H30.411C31.5203 25.4901 32.729 25.1594 34 25.0448V22Z" style={{ fill: `var(--${type})` }}/>
@@ -34,7 +35,7 @@ export const Summarize = forwardRef<SVGSVGElement, SummarizeProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M40 26.1994V8H8V40H24.7499C25.1781 41.0965 25.7771 42.1074 26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C42.14 27.5392 41.1262 26.7751 40 26.1994Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14.5 14.5H33.5V17.5H14.5V14.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14.5 22.5H33.5V25.1014C32.8863 25.1851 32.2886 25.3194 31.7114 25.5H14.5V22.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/target/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface TargetProps {
+interface TargetProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface TargetProps {
 }
 
 export const Target = forwardRef<SVGSVGElement, TargetProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M37.4121 10.2384L37.0186 2.5L30.6547 8.86396L30.3635 14.6736L24.9288 20.1084C24.6307 20.0375 24.3197 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28C26.2091 28 28 26.2091 28 24C28 23.6036 27.9423 23.2206 27.8349 22.8591L33.1922 17.5018L39.14 17.3492L45.5039 10.9853L37.4121 10.2384Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 24C40 23.2622 39.9501 22.536 39.8534 21.8247L43.2217 18.4563C43.7285 20.2166 44 22.0766 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C26.0178 4 27.9658 4.29882 29.8022 4.85462L26.4677 8.18914C25.6634 8.06461 24.8392 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 12C25.1155 12 26.1955 12.1522 27.2202 12.437L23.6497 16.0075C19.3939 16.1909 16 19.6991 16 24C16 28.4183 19.5817 32 24 32C28.2242 32 31.6837 28.7261 31.9795 24.5772L35.6085 20.9482C35.864 21.9226 36 22.9454 36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const Target = forwardRef<SVGSVGElement, TargetProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" style={{ fill: `var(--${type})` }}/>

package/assets/teams/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface TeamsProps {
+interface TeamsProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface TeamsProps {
 }
 
 export const Teams = forwardRef<SVGSVGElement, TeamsProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M39.5166 38.3428L30.5 43.5479V32.8896L39.5166 27.6836V38.3428Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.5 32.8789V42.6729L21 38.3428V28.5645L28.5 32.8789Z" style={{ fill: `var(--${type})` }}/>
 <path d="M19 27.4141V37.5332L10.8643 32.8369L10.7734 22.6816L19 27.4141Z" style={{ fill: `var(--${type})` }}/>
@@ -25,18 +26,18 @@ export const Teams = forwardRef<SVGSVGElement, TeamsProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M31.2588 9.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 9.5L20 3L31.2588 9.5ZM31 33.1914V41.8184L38.0166 37.7676V29.2158L31 33.1914ZM21.5 37.7676L28 41.5205V33.1807L21.5 29.498V37.7676ZM11.8594 32.2588L18.4531 36.0664L18.3818 28.0654L11.7881 24.2588L11.8594 32.2588ZM23.4062 27.1299L29.5098 30.5879L35.8633 26.9883L29.7578 23.4629L23.4062 27.1299ZM21.5 16.7568V24.6689L28.2588 20.7676V12.9268L21.5 16.7568ZM11.7412 20.7314L18.5 24.6328V16.3984L11.7412 12.5693V20.7314ZM13.585 10.166L20.3154 13.9795L26.7266 10.3467L20 6.46289L13.585 10.166Z" 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M31.2588 10.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 10.5L20.001 4L31.2588 10.5ZM31.5 33.4814V40.375L37.0166 37.1904V30.3555L31.5 33.4814ZM22.5 37.1904L27.5 40.0771V33.4707L22.5 30.6377V37.1904ZM12.8545 31.6787L17.4375 34.3252L17.3867 28.6094L12.8037 25.9629L12.8545 31.6787ZM24.9189 27.4111L29.5098 30.0127L34.3506 27.2695L29.7578 24.6182L24.9189 27.4111ZM12.7422 21.1904L18 24.2256V18.2588L12.7422 15.2793V21.1904ZM22 18.3311V24.2256L27.2588 21.1904V15.3516L22 18.3311ZM14.5996 11.7354L20.0635 14.8311L25.4629 11.7715L20 8.61816L14.5996 11.7354Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M31.2588 9.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 9.5L20 3L31.2588 9.5ZM31 33.1914V41.8184L38.0166 37.7676V29.2158L31 33.1914ZM21.5 37.7676L28 41.5205V33.1807L21.5 29.498V37.7676ZM11.8594 32.2588L18.4531 36.0664L18.3818 28.0654L11.7881 24.2588L11.8594 32.2588ZM23.4062 27.1299L29.5098 30.5879L35.8633 26.9883L29.7578 23.4629L23.4062 27.1299ZM21.5 16.7568V24.6689L28.2588 20.7676V12.9268L21.5 16.7568ZM11.7412 20.7314L18.5 24.6328V16.3984L11.7412 12.5693V20.7314ZM13.585 10.166L20.3154 13.9795L26.7266 10.3467L20 6.46289L13.585 10.166Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;