@liner-fe/icon 0.0.50 → 0.0.51

package/assets/facebook/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FacebookProps {
+interface FacebookProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface FacebookProps {
 }
 
 export const Facebook = forwardRef<SVGSVGElement, FacebookProps>(
-  ({ 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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 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}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" 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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/feedback/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FeedbackProps {
+interface FeedbackProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface FeedbackProps {
 }
 
 export const Feedback = forwardRef<SVGSVGElement, FeedbackProps>(
-  ({ 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    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.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM20.7378 8.30352C19.0369 10.0045 19.0362 12.7619 20.7359 14.4636L20.7378 14.4655L30.3965 24.1007L40.0317 14.4655C41.7333 12.7639 41.7333 10.0051 40.0317 8.30352C38.3302 6.60195 35.5714 6.60195 33.8698 8.30352L30.3848 11.7885L26.8997 8.30352C25.1982 6.60195 22.4394 6.60195 20.7378 8.30352Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12 26.9997H4V22.9997H12C16.8379 22.9997 20.8734 26.4352 21.8 30.9997H24.6C29.2392 30.9997 33 34.7605 33 39.3997C33 41.3879 31.3882 42.9997 29.4 42.9997H4V38.9997H28.9821C28.78 36.7571 26.8952 34.9997 24.6 34.9997H9.41176V30.9997H17.6586C16.8349 28.6693 14.6124 26.9997 12 26.9997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/filter/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FilterProps {
+interface FilterProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface FilterProps {
 }
 
 export const Filter = forwardRef<SVGSVGElement, FilterProps>(
-  ({ 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="M36 25.5H12V22.5H36V25.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 15.5H6V12.5H42V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29 35.5H19V32.5H29V35.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 fillRule="evenodd" clipRule="evenodd" d="M36 25.5H12V22.5H36V25.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 15.5H6V12.5H42V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29 35.5H19V32.5H29V35.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="M42 16H6V12H42V16Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 26H12V22H36V26Z" style={{ fill: `var(--${type})` }}/>
 <path d="M19 36H29V32H19V36Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const Filter = forwardRef<SVGSVGElement, FilterProps>(
 ;
   } 
   
-  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="M36 25.5H12V22.5H36V25.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 15.5H6V12.5H42V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29 35.5H19V32.5H29V35.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/fire/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FireProps {
+interface FireProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,27 +12,27 @@ interface FireProps {
 }
 
 export const Fire = forwardRef<SVGSVGElement, FireProps>(
-  ({ 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="M19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C28.5343 24.6837 28.6239 24.7667 28.713 24.8492C30.4491 26.4577 32 27.8945 32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.8945 17.5509 26.4577 19.287 24.8493L19.2878 24.8485C19.3766 24.7662 19.4659 24.6835 19.5556 24.6ZM29 31.2895C29 33.7878 26.8666 36 24 36C21.1334 36 19 33.7878 19 31.2895C19 30.0472 19.2803 29.3796 19.6014 28.8864C19.9837 28.2992 20.4902 27.828 21.3928 26.9884L21.6004 26.7951C22.4174 26.0341 23.2734 25.3236 24 24.75C24.7266 25.3236 25.5826 26.0341 26.3996 26.7951L26.6072 26.9884C27.5098 27.828 28.0163 28.2992 28.3986 28.8864C28.7197 29.3796 29 30.0472 29 31.2895Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 27.683C6 21.5445 9 15.5 15 12L17.3425 14.0823C19.9221 16.3752 24 14.544 24 11.0926V3.5C24 3.5 25.2088 4.07084 27 5.18961C32.1205 8.38793 42 16.0642 42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683ZM39 27.683C39 35.8171 32.4385 42 24 42C15.5615 42 9 35.8171 9 27.683C9 23.179 10.9115 18.7761 14.7442 15.7865L15.3495 16.3245C19.8638 20.3372 27 17.1326 27 11.0926V8.77944C28.2317 9.63134 29.6102 10.6848 30.9835 11.9316C35.1983 15.758 39 21.0586 39 27.683Z" 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="M24 45C33.9411 45 42 37.6241 42 27.683C42 12 24 3.5 24 3.5V11.7944C24 15.5535 19.2846 17.2367 16.9042 14.3273L15 12C9 15.5 6 21.5445 6 27.683C6 37.6241 14.0589 45 24 45ZM24 39C28.4183 39 32 35.5479 32 31.2895C32 27.8945 30.4491 26.4577 28.713 24.8493C28.6239 24.7667 28.5343 24.6837 28.4444 24.6C26.3079 22.6097 24 21 24 21C24 21 21.6921 22.6097 19.5556 24.6C19.4657 24.6837 19.3761 24.7667 19.287 24.8492C17.5509 26.4577 16 27.8945 16 31.2895C16 35.5479 19.5817 39 24 39Z" 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.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C28.5343 24.6837 28.6239 24.7667 28.713 24.8492C30.4491 26.4577 32 27.8945 32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.8945 17.5509 26.4577 19.287 24.8493L19.2878 24.8485C19.3766 24.7662 19.4659 24.6835 19.5556 24.6ZM28 31.2895C28 33.2011 26.3494 35 24 35C21.6506 35 20 33.2011 20 31.2895C20 30.228 20.2309 29.7524 20.4394 29.432C20.7526 28.951 21.1699 28.5624 22.1401 27.6591L22.282 27.5268C22.8533 26.9947 23.4466 26.486 24 26.0329C24.5534 26.486 25.1467 26.9947 25.718 27.5268L25.8599 27.6591C26.8301 28.5624 27.2474 28.951 27.5606 29.432C27.7691 29.7524 28 30.228 28 31.2895Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 27.683C6 21.5445 9 15.5 15 12L17.3425 14.0823C19.9221 16.3752 24 14.544 24 11.0926V3.5C24 3.5 25.6735 4.29027 28 5.83349C33.3034 9.35139 42 16.782 42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683ZM38 27.683C38 35.2148 31.9376 41 24 41C16.0624 41 10 35.2148 10 27.683C10 23.7278 11.5701 19.8701 14.7209 17.1035C19.8819 21.6409 28 17.9795 28 11.0926V10.7449C28.7532 11.3228 29.5335 11.9658 30.3113 12.6719C34.4311 16.4121 38 21.4643 38 27.683Z" 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.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C28.5343 24.6837 28.6239 24.7667 28.713 24.8492C30.4491 26.4577 32 27.8945 32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.8945 17.5509 26.4577 19.287 24.8493L19.2878 24.8485C19.3766 24.7662 19.4659 24.6835 19.5556 24.6ZM29 31.2895C29 33.7878 26.8666 36 24 36C21.1334 36 19 33.7878 19 31.2895C19 30.0472 19.2803 29.3796 19.6014 28.8864C19.9837 28.2992 20.4902 27.828 21.3928 26.9884L21.6004 26.7951C22.4174 26.0341 23.2734 25.3236 24 24.75C24.7266 25.3236 25.5826 26.0341 26.3996 26.7951L26.6072 26.9884C27.5098 27.828 28.0163 28.2992 28.3986 28.8864C28.7197 29.3796 29 30.0472 29 31.2895Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 27.683C6 21.5445 9 15.5 15 12L17.3425 14.0823C19.9221 16.3752 24 14.544 24 11.0926V3.5C24 3.5 25.2088 4.07084 27 5.18961C32.1205 8.38793 42 16.0642 42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683ZM39 27.683C39 35.8171 32.4385 42 24 42C15.5615 42 9 35.8171 9 27.683C9 23.179 10.9115 18.7761 14.7442 15.7865L15.3495 16.3245C19.8638 20.3372 27 17.1326 27 11.0926V8.77944C28.2317 9.63134 29.6102 10.6848 30.9835 11.9316C35.1983 15.758 39 21.0586 39 27.683Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/flowchart/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FlowchartProps {
+interface FlowchartProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface FlowchartProps {
 }
 
 export const Flowchart = forwardRef<SVGSVGElement, FlowchartProps>(
-  ({ 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="M30 7C30 5.89543 29.1046 5 28 5H20C18.8954 5 18 5.89543 18 7V15C18 16.1046 18.8954 17 20 17H22.5V22.5H10.5L10.5 31H8C6.89543 31 6 31.8954 6 33V41C6 42.1046 6.89543 43 8 43H16C17.1046 43 18 42.1046 18 41V33C18 31.8954 17.1046 31 16 31H13.5L13.5 25.5L34.5 25.5L34.5 31H32C30.8954 31 30 31.8954 30 33V41C30 42.1046 30.8954 43 32 43H40C41.1046 43 42 42.1046 42 41V33C42 31.8954 41.1046 31 40 31H37.5L37.5 22.5H25.5V17H28C29.1046 17 30 16.1046 30 15V7ZM27 8L21 8V14H27V8ZM39 34H33V40H39V34ZM9 34H15V40H9L9 34Z" 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="M30 7C30 5.89543 29.1046 5 28 5H20C18.8954 5 18 5.89543 18 7V15C18 16.1046 18.8954 17 20 17H22.5V22.5H10.5L10.5 31H8C6.89543 31 6 31.8954 6 33V41C6 42.1046 6.89543 43 8 43H16C17.1046 43 18 42.1046 18 41V33C18 31.8954 17.1046 31 16 31H13.5L13.5 25.5L34.5 25.5L34.5 31H32C30.8954 31 30 31.8954 30 33V41C30 42.1046 30.8954 43 32 43H40C41.1046 43 42 42.1046 42 41V33C42 31.8954 41.1046 31 40 31H37.5L37.5 22.5H25.5V17H28C29.1046 17 30 16.1046 30 15V7ZM27 8L21 8V14H27V8ZM39 34H33V40H39V34ZM9 34H15V40H9L9 34Z" 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="M30 7C30 5.89543 29.1046 5 28 5H20C18.8954 5 18 5.89543 18 7V15C18 16.1046 18.8954 17 20 17H22V22H10L10 31H8C6.89543 31 6 31.8954 6 33V41C6 42.1046 6.89543 43 8 43H16C17.1046 43 18 42.1046 18 41V33C18 31.8954 17.1046 31 16 31H14L14 26L34 26L34 31H32C30.8954 31 30 31.8954 30 33V41C30 42.1046 30.8954 43 32 43H40C41.1046 43 42 42.1046 42 41V33C42 31.8954 41.1046 31 40 31H38L38 22H26V17H28C29.1046 17 30 16.1046 30 15V7ZM26 9L22 9V13H26V9ZM38 35H34V39H38V35ZM10 35H14L14 39H10L10 35Z" 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="M30 7C30 5.89543 29.1046 5 28 5H20C18.8954 5 18 5.89543 18 7V15C18 16.1046 18.8954 17 20 17H22.5V22.5H10.5L10.5 31H8C6.89543 31 6 31.8954 6 33V41C6 42.1046 6.89543 43 8 43H16C17.1046 43 18 42.1046 18 41V33C18 31.8954 17.1046 31 16 31H13.5L13.5 25.5L34.5 25.5L34.5 31H32C30.8954 31 30 31.8954 30 33V41C30 42.1046 30.8954 43 32 43H40C41.1046 43 42 42.1046 42 41V33C42 31.8954 41.1046 31 40 31H37.5L37.5 22.5H25.5V17H28C29.1046 17 30 16.1046 30 15V7ZM27 8L21 8V14H27V8ZM39 34H33V40H39V34ZM9 34H15V40H9L9 34Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/focus/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FocusProps {
+interface FocusProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface FocusProps {
 }
 
 export const Focus = forwardRef<SVGSVGElement, FocusProps>(
-  ({ 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="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M5.05834 22.5C5.78445 13.2027 13.2027 5.78445 22.5 5.05834V2H25.5V5.05834C34.7973 5.78445 42.2155 13.2027 42.9417 22.5H46V25.5H42.9417C42.2155 34.7973 34.7973 42.2155 25.5 42.9417V46H22.5V42.9417C13.2027 42.2155 5.78445 34.7973 5.05834 25.5H2V22.5H5.05834ZM22.5 12V8.06939C14.8606 8.77967 8.77967 14.8606 8.06939 22.5H12V25.5H8.06939C8.77967 33.1394 14.8606 39.2203 22.5 39.9306V36H25.5V39.9306C33.1394 39.2203 39.2203 33.1394 39.9306 25.5H36V22.5H39.9306C39.2203 14.8606 33.1394 8.77967 25.5 8.06939V12H22.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 fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M5.05834 22.5C5.78445 13.2027 13.2027 5.78445 22.5 5.05834V2H25.5V5.05834C34.7973 5.78445 42.2155 13.2027 42.9417 22.5H46V25.5H42.9417C42.2155 34.7973 34.7973 42.2155 25.5 42.9417V46H22.5V42.9417C13.2027 42.2155 5.78445 34.7973 5.05834 25.5H2V22.5H5.05834ZM22.5 12V8.06939C14.8606 8.77967 8.77967 14.8606 8.06939 22.5H12V25.5H8.06939C8.77967 33.1394 14.8606 39.2203 22.5 39.9306V36H25.5V39.9306C33.1394 39.2203 39.2203 33.1394 39.9306 25.5H36V22.5H39.9306C39.2203 14.8606 33.1394 8.77967 25.5 8.06939V12H22.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 fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM28 24C28 26.2091 26.2091 28 24 28C21.7909 28 20 26.2091 20 24C20 21.7909 21.7909 20 24 20C26.2091 20 28 21.7909 28 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M5.10401 22C6.03464 13.1039 13.1039 6.03464 22 5.10401V2H26V5.10401C34.8961 6.03464 41.9654 13.1039 42.896 22H46V26H42.896C41.9654 34.8961 34.8961 41.9654 26 42.896V46H22V42.896C13.1039 41.9654 6.03464 34.8961 5.10401 26H2V22H5.10401ZM22 12V9.13217C15.3156 10.0228 10.0228 15.3156 9.13217 22H12V26H9.13217C10.0228 32.6844 15.3156 37.9772 22 38.8678V36H26V38.8678C32.6844 37.9772 37.9772 32.6844 38.8678 26H36V22H38.8678C37.9772 15.3156 32.6844 10.0228 26 9.13217V12H22Z" 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="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M5.05834 22.5C5.78445 13.2027 13.2027 5.78445 22.5 5.05834V2H25.5V5.05834C34.7973 5.78445 42.2155 13.2027 42.9417 22.5H46V25.5H42.9417C42.2155 34.7973 34.7973 42.2155 25.5 42.9417V46H22.5V42.9417C13.2027 42.2155 5.78445 34.7973 5.05834 25.5H2V22.5H5.05834ZM22.5 12V8.06939C14.8606 8.77967 8.77967 14.8606 8.06939 22.5H12V25.5H8.06939C8.77967 33.1394 14.8606 39.2203 22.5 39.9306V36H25.5V39.9306C33.1394 39.2203 39.2203 33.1394 39.9306 25.5H36V22.5H39.9306C39.2203 14.8606 33.1394 8.77967 25.5 8.06939V12H22.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/folder/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FolderProps {
+interface FolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface FolderProps {
 }
 
 export const Folder = forwardRef<SVGSVGElement, FolderProps>(
-  ({ 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="M24 10.5L21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24ZM19.5 9.5H7.5V38H40.5V13.5H22.5L19.5 9.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="M4.5 8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39C43.5 40.1046 42.6046 41 41.5 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.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 fillRule="evenodd" clipRule="evenodd" d="M24 10.5L21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24ZM19 10.5H8.5V37H39.5V14.5H22L19 10.5Z" 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="M24 10.5L21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24ZM19.5 9.5H7.5V38H40.5V13.5H22.5L19.5 9.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/folder-add/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FolderAddProps {
+interface FolderAddProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,26 +12,26 @@ interface FolderAddProps {
 }
 
 export const FolderAdd = forwardRef<SVGSVGElement, FolderAddProps>(
-  ({ 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="M20 8.5L22.4004 11.7002L23 12.5H41.5V39H6.5V8.5H20ZM20 21.5H14.25V29.5H20V35.5H28V29.5H33.75V21.5H28V16H20V21.5Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="4"/>
 </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="M4.5 8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39C43.5 40.1046 42.6046 41 41.5 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5ZM22.5 24V17.9998H25.5V24H31.75V27H25.5V33.4998H22.5V27H16.25V24H22.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="M22 23.5V17.9998H26V23.5H31.75V27.5H26V33.4998H22V27.5H16.25V23.5H22Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5ZM19 10.5H8.5V37H39.5V14.5H22L19 10.5Z" 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.5 24V17.9998H25.5V24H31.75V27H25.5V33.4998H22.5V27H16.25V24H22.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5ZM19.5 9.5H7.5V38H40.5V13.5H22.5L19.5 9.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/folder-open/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FolderOpenProps {
+interface FolderOpenProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface FolderOpenProps {
 }
 
 export const FolderOpen = forwardRef<SVGSVGElement, FolderOpenProps>(
-  ({ 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="M6.5 6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.8C42.7802 41 43.616 40.2896 43.7739 39.3223L47.5 16.5H10L7.5 31.8125V13.5H43.5V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5H6.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="M6.5 6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.8C42.7802 41 43.616 40.2896 43.7739 39.3223L47.5 16.5H10L8.5 25.6875V14.5H43.5V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5H6.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 fillRule="evenodd" clipRule="evenodd" d="M6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V14.5H22L19 10.5H8.5V25.6875L10 16.5H47.5L43.7739 39.3223C43.616 40.2896 42.7802 41 41.8001 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5ZM10.706 37L13.3999 20.5H42.794L40.1001 37H10.706Z" 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="M6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H22.5L19.5 9.5H7.5V31.8125L10 16.5H47.5L43.7739 39.3223C43.616 40.2896 42.7802 41 41.8001 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5ZM9.52952 38L12.5499 19.5H43.9705L40.9501 38H9.52952Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/folder-open-share/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FolderOpenShareProps {
+interface FolderOpenShareProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface FolderOpenShareProps {
 }
 
 export const FolderOpenShare = forwardRef<SVGSVGElement, FolderOpenShareProps>(
-  ({ 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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.3214 35.9219 30.0055 33.5781 32.3672 32.3721C32.3734 32.3689 32.3805 32.3655 32.3867 32.3623C32.4893 32.3103 32.5932 32.2606 32.6982 32.2129C32.7197 32.2031 32.7411 32.1932 32.7627 32.1836C32.867 32.1374 32.9725 32.0936 33.0791 32.0518C33.0957 32.0452 33.1123 32.0386 33.1289 32.0322C33.3665 31.9408 33.6095 31.8608 33.8574 31.792C33.8744 31.7873 33.8912 31.7819 33.9082 31.7773C34.5751 31.5972 35.2762 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H22.5L19.5 9.5H7.5V31.8105L10 16.5H31.0254C29.8701 17.2679 28.9038 18.296 28.207 19.5H12.5498L9.5293 38H24.0928C24.0648 38.224 24.0437 38.45 24.0283 38.6777C24.01 38.9495 24 39.2236 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36.2021 19.0039C36.2171 19.0045 36.2321 19.0051 36.2471 19.0059C36.2569 19.0063 36.2666 19.0073 36.2764 19.0078C36.3376 19.0112 36.3984 19.0159 36.459 19.0215C36.4969 19.0249 36.5346 19.0289 36.5723 19.0332C36.6007 19.0365 36.629 19.0402 36.6572 19.0439C36.9633 19.0841 37.2608 19.1512 37.5469 19.2441L37.5508 19.2461C39.0168 19.7237 40.1832 20.8598 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C35.1814 29 34.4095 28.8018 33.7275 28.4531C33.719 28.4487 33.7107 28.4439 33.7021 28.4395C32.0974 27.6072 31 25.9326 31 24C31 21.8301 32.3825 19.9838 34.3145 19.292C34.3301 19.2864 34.3457 19.2808 34.3613 19.2754C34.432 19.2509 34.5032 19.2274 34.5752 19.2061C34.5924 19.201 34.6097 19.1963 34.627 19.1914C34.6922 19.1728 34.7579 19.1556 34.8242 19.1396C34.8524 19.1328 34.8808 19.1264 34.9092 19.1201C34.9706 19.1065 35.0325 19.0944 35.0947 19.083C35.1198 19.0784 35.1448 19.0735 35.1699 19.0693C35.2369 19.0581 35.3043 19.0485 35.3721 19.04C35.3948 19.0372 35.4176 19.0338 35.4404 19.0312C35.5142 19.023 35.5884 19.0167 35.6631 19.0117C35.6826 19.0104 35.7021 19.0089 35.7217 19.0078C35.8138 19.0028 35.9066 19 36 19L36.2021 19.0039Z" 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 31.5L36.3896 31.5098C36.3922 31.5099 36.3949 31.5096 36.3975 31.5098C36.4661 31.5131 36.5344 31.5193 36.6025 31.5244C36.6635 31.529 36.7245 31.5321 36.7852 31.5381C36.8811 31.5474 36.9764 31.5596 37.0713 31.5723C37.1022 31.5764 37.1333 31.5795 37.1641 31.584C37.269 31.5993 37.373 31.6184 37.4766 31.6377C37.4934 31.6408 37.5106 31.6432 37.5273 31.6465C38.7751 31.8876 39.9176 32.419 40.8857 33.167C40.8979 33.1763 40.9098 33.1859 40.9219 33.1953C41.5157 33.6595 42.0421 34.2052 42.4844 34.8164C42.5142 34.8577 42.5432 34.8996 42.5723 34.9414C42.6042 34.9874 42.636 35.0334 42.667 35.0801C42.6996 35.1291 42.7312 35.1788 42.7627 35.2285C42.8172 35.3146 42.8696 35.402 42.9209 35.4902C42.9513 35.5425 42.9825 35.5944 43.0117 35.6475C43.0336 35.6871 43.054 35.7275 43.0752 35.7676C43.1103 35.8339 43.1454 35.9003 43.1787 35.9678C43.1983 36.0076 43.2173 36.0477 43.2363 36.0879C43.2668 36.1524 43.2954 36.2178 43.3242 36.2832C43.7573 37.2678 44 38.3553 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.3746 28.0031 39.2499 28.0088 39.126V39.123C28.0104 39.0891 28.0127 39.0553 28.0146 39.0215C28.0208 38.9181 28.0281 38.8152 28.0381 38.7129C28.0415 38.6783 28.046 38.6438 28.0498 38.6094C28.0564 38.5502 28.0644 38.4914 28.0723 38.4326C28.0868 38.3235 28.1032 38.2151 28.1221 38.1074C28.1295 38.0654 28.1365 38.0233 28.1445 37.9814C28.1664 37.8675 28.1921 37.7548 28.2188 37.6426C28.2275 37.6058 28.2349 37.5688 28.2441 37.5322C28.318 37.2402 28.4087 36.955 28.5137 36.6768C28.5249 36.647 28.5363 36.6174 28.5479 36.5879C28.5902 36.4795 28.6357 36.3726 28.6826 36.2666C28.6986 36.2305 28.7139 36.1941 28.7305 36.1582C28.778 36.055 28.8282 35.9533 28.8799 35.8525C28.8959 35.8213 28.9113 35.7898 28.9277 35.7588C28.9305 35.7536 28.9328 35.7483 28.9355 35.7432C29.4696 34.7411 30.2116 33.8677 31.1025 33.1768C31.8486 32.5981 32.6983 32.1464 33.6211 31.8594C34.3725 31.6257 35.1717 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H7.5V31.8105L10 16.5H31.0254C28.5996 18.1123 27 20.869 27 24C27 26.1721 27.7695 28.1648 29.0508 29.7197C27.8089 30.6037 26.7419 31.7178 25.9131 33C24.7189 34.8475 24.0206 37.0439 24.002 39.4033C24.0017 39.4355 24 39.4677 24 39.5V41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19L36.2422 19.0059C36.2461 19.006 36.25 19.0057 36.2539 19.0059C36.3972 19.013 36.5388 19.0279 36.6787 19.0469C36.6946 19.049 36.7107 19.0504 36.7266 19.0527C36.7816 19.0607 36.8362 19.0703 36.8906 19.0801C36.916 19.0847 36.9415 19.0888 36.9668 19.0938C37.0209 19.1043 37.0745 19.1166 37.1279 19.1289C37.1517 19.1344 37.1755 19.1397 37.1992 19.1455C37.248 19.1575 37.2965 19.1702 37.3447 19.1836C37.3741 19.1918 37.4034 19.2003 37.4326 19.209C37.4725 19.2209 37.5123 19.2332 37.5518 19.2461C37.5979 19.2612 37.6439 19.2766 37.6895 19.293C37.7137 19.3017 37.7376 19.3112 37.7617 19.3203C37.8036 19.3361 37.8453 19.3523 37.8867 19.3691C37.932 19.3876 37.9769 19.407 38.0215 19.4268C38.0454 19.4373 38.0691 19.4481 38.0928 19.459C38.1331 19.4776 38.1731 19.4969 38.2129 19.5166C38.2544 19.5371 38.296 19.5574 38.3369 19.5791C38.3622 19.5925 38.3871 19.6063 38.4121 19.6201C38.4516 19.6419 38.4905 19.6647 38.5293 19.6875C38.5627 19.7071 38.596 19.7267 38.6289 19.7471C38.6576 19.7649 38.6865 19.7824 38.7148 19.8008C38.7519 19.8248 38.7888 19.8491 38.8252 19.874C38.8544 19.8941 38.8824 19.9159 38.9111 19.9365C38.947 19.9622 38.9834 19.987 39.0186 20.0137C39.0374 20.028 39.0556 20.0431 39.0742 20.0576C39.116 20.0903 39.1575 20.1233 39.1982 20.1572C39.2034 20.1615 39.2087 20.1656 39.2139 20.1699C40.3058 21.0871 41 22.4624 41 24C41 26.4833 39.1893 28.5418 36.8164 28.9316C36.8076 28.9331 36.7989 28.9351 36.79 28.9365C36.7096 28.9493 36.6286 28.9608 36.5469 28.9697C36.542 28.9703 36.5371 28.9712 36.5322 28.9717C36.4811 28.9771 36.4295 28.9795 36.3779 28.9834C36.2531 28.9928 36.1272 29 36 29L35.7422 28.9932C34.4202 28.926 33.2345 28.3449 32.3789 27.4463C31.9661 27.0127 31.6293 26.506 31.3926 25.9463C31.1395 25.3481 31 24.6904 31 24C31 22.7918 31.4282 21.6836 32.1416 20.8193C32.2174 20.7275 32.2969 20.6389 32.3789 20.5527C33.2897 19.5964 34.5752 19.0001 36 19Z" 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="M36 31.5C40.4183 31.5 44 35.0817 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 35.0817 31.5817 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V14.5H22L18.999 10.5H8.5V25.6865L10 16.5H31.0254C29.5614 17.473 28.398 18.8624 27.7061 20.5H13.3994L10.7061 37H24.2617C24.1455 37.5477 24.0671 38.1091 24.0283 38.6816C24.01 38.9521 24 39.2249 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.7614 19 41 21.2386 41 24C41 26.7614 38.7614 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const FolderOpenShare = forwardRef<SVGSVGElement, FolderOpenShareProps>(
 ;
   } 
   
-  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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.3214 35.9219 30.0055 33.5781 32.3672 32.3721C32.3734 32.3689 32.3805 32.3655 32.3867 32.3623C32.4893 32.3103 32.5932 32.2606 32.6982 32.2129C32.7197 32.2031 32.7411 32.1932 32.7627 32.1836C32.867 32.1374 32.9725 32.0936 33.0791 32.0518C33.0957 32.0452 33.1123 32.0386 33.1289 32.0322C33.3665 31.9408 33.6095 31.8608 33.8574 31.792C33.8744 31.7873 33.8912 31.7819 33.9082 31.7773C34.5751 31.5972 35.2762 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H22.5L19.5 9.5H7.5V31.8105L10 16.5H31.0254C29.8701 17.2679 28.9038 18.296 28.207 19.5H12.5498L9.5293 38H24.0928C24.0648 38.224 24.0437 38.45 24.0283 38.6777C24.01 38.9495 24 39.2236 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36.2021 19.0039C36.2171 19.0045 36.2321 19.0051 36.2471 19.0059C36.2569 19.0063 36.2666 19.0073 36.2764 19.0078C36.3376 19.0112 36.3984 19.0159 36.459 19.0215C36.4969 19.0249 36.5346 19.0289 36.5723 19.0332C36.6007 19.0365 36.629 19.0402 36.6572 19.0439C36.9633 19.0841 37.2608 19.1512 37.5469 19.2441L37.5508 19.2461C39.0168 19.7237 40.1832 20.8598 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C35.1814 29 34.4095 28.8018 33.7275 28.4531C33.719 28.4487 33.7107 28.4439 33.7021 28.4395C32.0974 27.6072 31 25.9326 31 24C31 21.8301 32.3825 19.9838 34.3145 19.292C34.3301 19.2864 34.3457 19.2808 34.3613 19.2754C34.432 19.2509 34.5032 19.2274 34.5752 19.2061C34.5924 19.201 34.6097 19.1963 34.627 19.1914C34.6922 19.1728 34.7579 19.1556 34.8242 19.1396C34.8524 19.1328 34.8808 19.1264 34.9092 19.1201C34.9706 19.1065 35.0325 19.0944 35.0947 19.083C35.1198 19.0784 35.1448 19.0735 35.1699 19.0693C35.2369 19.0581 35.3043 19.0485 35.3721 19.04C35.3948 19.0372 35.4176 19.0338 35.4404 19.0312C35.5142 19.023 35.5884 19.0167 35.6631 19.0117C35.6826 19.0104 35.7021 19.0089 35.7217 19.0078C35.8138 19.0028 35.9066 19 36 19L36.2021 19.0039Z" style={{ fill: `var(--${type})` }}/>

package/assets/folder-share/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FolderShareProps {
+interface FolderShareProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface FolderShareProps {
 }
 
 export const FolderShare = forwardRef<SVGSVGElement, FolderShareProps>(
-  ({ 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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.4509 34.6478 31.858 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C42.732 17.8699 41.7043 16.9029 40.5 16.2061V13.5H22.5L19.5 9.5H7.5V38H24.0928C24.0314 38.4913 24 38.992 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.1665 19 40.0098 20.3784 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" 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 31.5C36.131 31.5 36.2612 31.5035 36.3906 31.5098C36.4167 31.511 36.4427 31.5131 36.4688 31.5146C36.5594 31.5199 36.6495 31.5269 36.7393 31.5352C36.7846 31.5393 36.8299 31.5429 36.875 31.5479C36.9679 31.558 37.0604 31.5697 37.1523 31.583C37.1807 31.5871 37.2091 31.5903 37.2373 31.5947C37.3498 31.6122 37.4614 31.6322 37.5723 31.6543C37.6161 31.663 37.6596 31.6732 37.7031 31.6826C37.7902 31.7015 37.8769 31.7215 37.9629 31.7432C37.9923 31.7506 38.0215 31.7589 38.0508 31.7666C38.1301 31.7876 38.2088 31.8097 38.2871 31.833C38.3354 31.8474 38.3837 31.8617 38.4316 31.877C38.6541 31.9479 38.8724 32.0278 39.0859 32.1172C39.1142 32.129 39.1418 32.1422 39.1699 32.1543C39.2489 32.1885 39.3276 32.2232 39.4053 32.2598C39.4449 32.2785 39.4841 32.2981 39.5234 32.3174C39.5888 32.3495 39.6534 32.3831 39.7178 32.417C39.7594 32.4389 39.8016 32.4598 39.8428 32.4824C39.9384 32.5349 40.0328 32.5893 40.126 32.6455C40.1545 32.6627 40.1826 32.6807 40.2109 32.6982C40.2845 32.7439 40.3577 32.7899 40.4297 32.8379C40.4669 32.8627 40.5033 32.8887 40.54 32.9141C40.5939 32.9513 40.6473 32.9889 40.7002 33.0273C40.7407 33.0568 40.7814 33.086 40.8213 33.1162C41.0013 33.2524 41.1751 33.3963 41.3428 33.5469C41.3817 33.5818 41.4198 33.6176 41.458 33.6533C41.4994 33.692 41.5405 33.731 41.5811 33.7705C41.6266 33.8149 41.6714 33.8599 41.7158 33.9053C41.7556 33.9459 41.7951 33.9868 41.834 34.0283C41.8704 34.0671 41.9067 34.106 41.9424 34.1455C41.9963 34.2053 42.0485 34.2667 42.1006 34.3281C42.1513 34.3879 42.201 34.4485 42.25 34.5098C42.2896 34.5594 42.3297 34.6086 42.3682 34.6592C42.3992 34.6999 42.4297 34.7409 42.46 34.7822C42.5024 34.8402 42.5441 34.8988 42.585 34.958C42.6084 34.9919 42.6314 35.0262 42.6543 35.0605C42.6862 35.1083 42.7172 35.1566 42.748 35.2051C42.7971 35.282 42.8451 35.3597 42.8916 35.4385C42.9328 35.5082 42.9736 35.5783 43.0127 35.6494C43.033 35.6863 43.0525 35.7235 43.0723 35.7607C43.1068 35.8259 43.1401 35.8918 43.1729 35.958C43.1969 36.0067 43.221 36.0553 43.2441 36.1045C43.263 36.1446 43.2807 36.1852 43.2988 36.2256C43.3271 36.2885 43.3561 36.3512 43.3828 36.415C43.405 36.468 43.4253 36.5217 43.4463 36.5752C43.8025 37.4813 44 38.4674 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 35.0817 31.5817 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C41.8878 16.5995 39.1311 15 36 15C31.0294 15 27 19.0294 27 24C27 26.1722 27.7694 28.1648 29.0508 29.7197C25.995 31.8949 24 35.4634 24 39.5V41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.7614 19 41 21.2386 41 24C41 26.7614 38.7614 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" 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="M36 31.5C37.2552 31.5 38.4428 31.7895 39.5 32.3047C39.5296 32.3191 39.5585 32.3348 39.5879 32.3496C39.6636 32.3876 39.7392 32.4255 39.8135 32.4658L39.8398 32.4805C39.8699 32.497 39.8989 32.5154 39.9287 32.5322C42.3585 33.9052 44 36.51 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0042 39.2933 28.0049 39.209 28.0088 39.125C28.0108 39.0813 28.0149 39.0377 28.0176 38.9941C28.0222 38.921 28.0266 38.848 28.0332 38.7754C28.0389 38.7117 28.0455 38.6482 28.0527 38.585C28.0581 38.5386 28.0642 38.4924 28.0703 38.4463C28.1076 38.1626 28.1603 37.8839 28.2266 37.6104C28.2288 37.6013 28.2302 37.5921 28.2324 37.583C28.2522 37.5024 28.2736 37.4224 28.2959 37.3428C28.3031 37.3171 28.3099 37.2912 28.3174 37.2656C29.2844 33.9349 32.3574 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C42.5269 17.5612 41.1378 16.397 39.5 15.7051V14.5H22L18.999 10.5H8.5V37H24.2617C24.0906 37.8063 24 38.6425 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.7614 19 41 21.2386 41 24C41 26.7614 38.7614 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const FolderShare = forwardRef<SVGSVGElement, FolderShareProps>(
 ;
   } 
   
-  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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.4509 34.6478 31.858 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C42.732 17.8699 41.7043 16.9029 40.5 16.2061V13.5H22.5L19.5 9.5H7.5V38H24.0928C24.0314 38.4913 24 38.992 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.1665 19 40.0098 20.3784 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" style={{ fill: `var(--${type})` }}/>

package/assets/formal-bag/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface FormalBagProps {
+interface FormalBagProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface FormalBagProps {
 }
 
 export const FormalBag = forwardRef<SVGSVGElement, FormalBagProps>(
-  ({ 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="M17 14V10C17 8.89543 17.8954 8 19 8H29C30.1046 8 31 8.89543 31 10V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM20 14V11H28V14H20ZM15.5 17V37H32.5V17H15.5ZM35.5 17V37H39V17H35.5ZM9 17H12.5V37H9V17Z" 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="M17 14V10C17 8.89543 17.8954 8 19 8H29C30.1046 8 31 8.89543 31 10V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM20 14V11H28V14H20ZM15.5 17V37H32.5V17H15.5ZM35.5 17V37H39V17H35.5ZM9 17H12.5V37H9V17Z" 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="M17 14V11C17 9.89543 17.8954 9 19 9H29C30.1046 9 31 9.89543 31 11V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM21 14V13H27V14H21ZM16 18V36H32V18H16ZM36 18V36H38V18H36ZM10 18H12V36H10V18Z" 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="M17 14V10C17 8.89543 17.8954 8 19 8H29C30.1046 8 31 8.89543 31 10V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM20 14V11H28V14H20ZM15.5 17V37H32.5V17H15.5ZM35.5 17V37H39V17H35.5ZM9 17H12.5V37H9V17Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;