@liner-fe/icon 0.0.50 → 0.0.52

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @liner-fe/icon
 
+## 0.0.52
+
+### Patch Changes
+
+- 6f88404: @liner-fe/prism icon 의존성 모두 삭제
+
+## 0.0.51
+
+### Patch Changes
+
+- 1c7b1ef: @liner-fe/icon props 추가
+
 ## 0.0.50
 
 ### Patch Changes

package/assets/add-clock/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface AddClockProps {
+interface AddClockProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface AddClockProps {
 }
 
 export const AddClock = forwardRef<SVGSVGElement, AddClockProps>(
-  ({ 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="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" 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="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" 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 24C42 24.729 41.9567 25.4478 41.8724 26.1541C40.7398 25.288 39.4256 24.6472 37.9969 24.2987C37.999 24.1994 38 24.0998 38 24C38 16.268 31.732 10 24 10C16.268 10 10 16.268 10 24C10 31.732 16.268 38 24 38C24.5298 38 25.0527 37.9706 25.5672 37.9133C26.0427 39.2972 26.7993 40.5504 27.7687 41.6048C26.5534 41.8638 25.2926 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.749 42.4996V36.75H28.0004V32.75H33.749V27H37.749V32.75H43.5V36.75H37.749V42.4996H33.749Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const AddClock = forwardRef<SVGSVGElement, AddClockProps>(
 ;
   } 
   
-  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="M25.9517 38.8742C25.3129 38.9572 24.6614 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24C39 24.1987 38.9961 24.3966 38.9885 24.5934C40.0358 24.9622 41.0071 25.4924 41.8724 26.1541C41.9567 25.4478 42 24.729 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C25.2926 42 26.5534 41.8638 27.7687 41.6048C27.029 40.8003 26.4132 39.88 25.9517 38.8742Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.4684 23.385L22.4682 13.0001L25.4682 13.0001L25.4684 24.6243L18.0629 32.058L15.9376 29.9407L22.4684 23.385Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34.249 42.4996V36.25H28.0004V33.25H34.249V27H37.249V33.25H43.5V36.25H37.249V42.4996H34.249Z" style={{ fill: `var(--${type})` }}/>

package/assets/add-to-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 AddToFolderProps {
+interface AddToFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface AddToFolderProps {
 }
 
 export const AddToFolder = forwardRef<SVGSVGElement, AddToFolderProps>(
-  ({ 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" 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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" 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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H8.5V37H39.5V14.5H22L18.999 10.5H8.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14 22.5H19.5V26.5H14V32.5H10V26.5H4.5V22.5H10V17H14V22.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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M13.5 23H19.5V26H13.5V32.5H10.5V26H4.5V23H10.5V17H13.5V23Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/ai/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface AiProps {
+interface AiProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,16 +12,16 @@ interface AiProps {
 }
 
 export const Ai = forwardRef<SVGSVGElement, AiProps>(
-  ({ 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="M38.077 2.99951C38.2995 2.38298 39.1714 2.38298 39.3939 2.99951L40.8326 6.98652C40.8629 7.07048 40.929 7.13659 41.013 7.16688L45 8.6056C45.6165 8.82807 45.6165 9.7 45 9.92248L41.013 11.3612C40.929 11.3915 40.8629 11.4576 40.8326 11.5416L39.3939 15.5286C39.1714 16.1451 38.2995 16.1451 38.077 15.5286L36.6383 11.5416C36.608 11.4576 36.5419 11.3915 36.4579 11.3612L32.4709 9.92248C31.8544 9.70001 31.8544 8.82807 32.4709 8.6056L36.4579 7.16688C36.5419 7.13659 36.608 7.07048 36.6383 6.98652L38.077 2.99951Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20.0378 26.4805H22.6067L21.3405 23.1475L20.0378 26.4805Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42.2158 16.5468L42.5 15.7592V38.9998C42.5 40.9328 40.933 42.4998 39 42.4998H9C7.067 42.4998 5.5 40.9328 5.5 38.9998V8.99976C5.5 7.06676 7.067 5.49976 9 5.49976H32.2395L31.4526 5.7837C28.1938 6.95965 28.1938 11.5684 31.4526 12.7444L34.2468 13.7527L35.2551 16.5468C36.4311 19.8057 41.0398 19.8057 42.2158 16.5468ZM24.9195 32.5702L23.9673 30.0312H18.6692L17.6959 32.5702H13.4248L19.7731 16.5994H22.9075L29.2781 32.5702H24.9195ZM29.9941 16.5994H33.9996V32.5702H29.9941V16.5994Z" 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="M37.9703 4.30294C37.8114 3.86256 37.1886 3.86256 37.0297 4.30294L35.591 8.28995C35.5405 8.42988 35.4303 8.54006 35.2904 8.59056L31.3034 10.0293C30.863 10.1882 30.863 10.811 31.3034 10.9699L35.2904 12.4086C35.4303 12.4591 35.5405 12.5693 35.591 12.7092L37.0297 16.6962C37.1886 17.1366 37.8114 17.1366 37.9703 16.6962L39.409 12.7092C39.4595 12.5693 39.5697 12.4591 39.7096 12.4086L43.6967 10.9699C44.137 10.811 44.137 10.1882 43.6967 10.0293L39.7096 8.59056C39.5697 8.54006 39.4595 8.42988 39.409 8.28995L37.9703 4.30294Z" style={{ fill: `var(--${type})` }}/>
 <path d="M23.1723 26.8807H19.4378L21.3315 22.0353L23.1723 26.8807Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.4418 14.4414L42.5 14.0595V38.9995C42.5 40.9325 40.933 42.4995 39 42.4995H9C7.067 42.4995 5.5 40.9325 5.5 38.9995V8.99951C5.5 7.06651 7.067 5.49951 9 5.49951H33.9401L33.5582 6.55781L30.4548 7.67769C27.8125 8.63116 27.8125 12.368 30.4548 13.3215L33.5582 14.4414L34.6781 17.5448C35.6316 20.1871 39.3684 20.1871 40.3219 17.5448L41.4418 14.4414ZM24.2303 29.6313L25.1824 32.1704H28.6736L22.6222 16.9995H20.0303L14 32.1704H17.4066L18.3799 29.6313H24.2303ZM33.3218 16.9995H30.1162V32.1704H33.3218V16.9995Z" style={{ fill: `var(--${type})` }}/>
@@ -28,7 +29,7 @@ export const Ai = forwardRef<SVGSVGElement, AiProps>(
 </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.3854 3.4624C39.1629 2.84587 38.291 2.84587 38.0685 3.4624L36.6298 7.44941C36.5995 7.53337 36.5334 7.59948 36.4494 7.62977L32.4624 9.06849C31.8459 9.29096 31.8459 10.1629 32.4624 10.3854L36.4494 11.8241C36.5334 11.8544 36.5995 11.9205 36.6298 12.0044L38.0685 15.9915C38.291 16.608 39.1629 16.608 39.3854 15.9915L40.8241 12.0044C40.8544 11.9205 40.9205 11.8544 41.0044 11.8241L44.9915 10.3854C45.608 10.1629 45.608 9.29096 44.9915 9.06849L41.0044 7.62977C40.9205 7.59948 40.8544 7.53337 40.8241 7.44941L39.3854 3.4624Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9678 30.0312L24.9199 32.5702H29.2785L22.908 16.5994H19.7735L13.4253 32.5702H17.6963L18.6696 30.0312H23.9678ZM22.6072 26.4805H20.0383L21.3409 23.1475L22.6072 26.4805Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34.0001 16.5994H29.9945V32.5702H34.0001V16.5994Z" style={{ fill: `var(--${type})` }}/>
@@ -37,7 +38,7 @@ export const Ai = forwardRef<SVGSVGElement, AiProps>(
 ;
   } 
   
-  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.0297 4.30294C37.1886 3.86256 37.8114 3.86256 37.9703 4.30294L39.409 8.28995C39.4595 8.42988 39.5697 8.54006 39.7096 8.59056L43.6966 10.0293C44.137 10.1882 44.137 10.811 43.6966 10.9699L39.7096 12.4086C39.5697 12.4591 39.4595 12.5693 39.409 12.7092L37.9703 16.6962C37.8114 17.1366 37.1886 17.1366 37.0297 16.6962L35.591 12.7092C35.5405 12.5693 35.4303 12.4591 35.2904 12.4086L31.3034 10.9699C30.863 10.811 30.863 10.1882 31.3034 10.0293L35.2904 8.59056C35.4303 8.54006 35.5405 8.42988 35.591 8.28995L37.0297 4.30294Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.2303 29.6314L25.1824 32.1704H28.6736L22.6222 16.9996H20.0303L14 32.1704H17.4066L18.3799 29.6314H24.2303ZM23.1723 26.8807H19.4378L21.3315 22.0354L23.1723 26.8807Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.3218 16.9996H30.1162V32.1704H33.3218V16.9996Z" style={{ fill: `var(--${type})` }}/>

package/assets/airplane/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface AirplaneProps {
+interface AirplaneProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface AirplaneProps {
 }
 
 export const Airplane = forwardRef<SVGSVGElement, AirplaneProps>(
-  ({ 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="M15.226 29.1964L11.6505 29.1741L9.82404 31.0065L13.8584 33.2261C14.6895 33.6834 15.3734 34.3677 15.8303 35.199L18.016 39.1769L19.8394 37.3475L19.8286 33.7842L26.7364 26.8668L30.8162 39.4193L33.6987 36.5398L31.6162 21.9774L38.6703 14.9176L39.2588 10.8716C39.3551 10.2099 38.7873 9.64199 38.1256 9.73804L34.0709 10.3266L26.9954 17.4079L12.4647 15.3342L9.58691 18.209L22.1343 22.2785L15.226 29.1964ZM25.9337 14.226L12.394 12.2937C11.7712 12.2049 11.143 12.4142 10.6979 12.8587L6.31083 17.2412C5.25363 18.2973 5.68585 20.0976 7.10728 20.5586L16.5528 23.6221L13.9899 26.1886L11.2504 26.1715C10.7146 26.1682 10.1998 26.38 9.82144 26.7595L6.76094 29.83C5.82143 30.7726 6.04736 32.3527 7.21337 32.9942L12.4123 35.8546C12.7447 36.0375 13.0183 36.3112 13.201 36.6437L16.0294 41.7911C16.6718 42.9602 18.257 43.1847 19.1987 42.2399L22.2571 39.1715C22.6323 38.7951 22.8422 38.2849 22.8406 37.7535L22.8324 35.0218L25.3976 32.4531L28.4672 41.8975C28.9286 43.3172 30.7265 43.7493 31.7827 42.6942L36.1729 38.3086C36.6186 37.8634 36.8285 37.2341 36.7393 36.6105L34.7982 23.0371L41.0269 16.8034C41.3314 16.4987 41.5293 16.1039 41.5913 15.6776L42.2276 11.3034C42.6126 8.65663 40.3416 6.38495 37.6947 6.76915L33.3111 7.40542C32.8841 7.4674 32.4886 7.66582 32.1836 7.97104L25.9337 14.226Z" 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="M15.226 29.1964L11.6505 29.1741L9.82404 31.0065L13.8584 33.2261C14.6895 33.6834 15.3734 34.3677 15.8303 35.199L18.016 39.1769L19.8394 37.3475L19.8286 33.7842L26.7364 26.8668L30.8162 39.4193L33.6987 36.5398L31.6162 21.9774L38.6703 14.9176L39.2588 10.8716C39.3551 10.2099 38.7873 9.64199 38.1256 9.73804L34.0709 10.3266L26.9954 17.4079L12.4647 15.3342L9.58691 18.209L22.1343 22.2785L15.226 29.1964ZM25.9337 14.226L12.394 12.2937C11.7712 12.2049 11.143 12.4142 10.6979 12.8587L6.31083 17.2412C5.25363 18.2973 5.68585 20.0976 7.10728 20.5586L16.5528 23.6221L13.9899 26.1886L11.2504 26.1715C10.7146 26.1682 10.1998 26.38 9.82144 26.7595L6.76094 29.83C5.82143 30.7726 6.04736 32.3527 7.21337 32.9942L12.4123 35.8546C12.7447 36.0375 13.0183 36.3112 13.201 36.6437L16.0294 41.7911C16.6718 42.9602 18.257 43.1847 19.1987 42.2399L22.2571 39.1715C22.6323 38.7951 22.8422 38.2849 22.8406 37.7535L22.8324 35.0218L25.3976 32.4531L28.4672 41.8975C28.9286 43.3172 30.7265 43.7493 31.7827 42.6942L36.1729 38.3086C36.6186 37.8634 36.8285 37.2341 36.7393 36.6105L34.7982 23.0371L41.0269 16.8034C41.3314 16.4987 41.5293 16.1039 41.5913 15.6776L42.2276 11.3034C42.6126 8.65663 40.3416 6.38495 37.6947 6.76915L33.3111 7.40542C32.8841 7.4674 32.4886 7.66582 32.1836 7.97104L25.9337 14.226Z" 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="M15.638 30.199L12.0631 30.1767L11.4706 30.771L14.3405 32.35C15.3378 32.8987 16.1585 33.7198 16.7067 34.7175L18.2498 37.5258L18.8381 36.9355L18.8274 33.3716L27.1827 25.0047L31.2632 37.5593L32.6379 36.186L30.5555 21.6242L37.7285 14.4454L38.2692 10.7277L34.5434 11.2685L27.3492 18.4685L12.818 16.3948L11.4495 17.7618L23.9947 21.8307L15.638 30.199ZM7.10728 20.5586C5.68585 20.0976 5.25363 18.2973 6.31083 17.2412L10.6979 12.8587C11.143 12.4142 11.7712 12.2049 12.394 12.2937L25.9337 14.226L32.1836 7.97104C32.4886 7.66582 32.8841 7.4674 33.3111 7.40542L37.6947 6.76915C40.3416 6.38495 42.6126 8.65663 42.2276 11.3034L41.5913 15.6776C41.5293 16.1039 41.3314 16.4987 41.0269 16.8034L34.7982 23.0371L36.7393 36.6105C36.8285 37.2341 36.6186 37.8634 36.1729 38.3086L31.7827 42.6942C30.7265 43.7493 28.9286 43.3172 28.4672 41.8975L25.3976 32.4531L22.8324 35.0218L22.8406 37.7535C22.8422 38.2849 22.6323 38.7951 22.2571 39.1715L19.1987 42.2399C18.257 43.1847 16.6718 42.9602 16.0294 41.7911L13.201 36.6437C13.0183 36.3112 12.7447 36.0375 12.4123 35.8546L7.21337 32.9942C6.04736 32.3527 5.82143 30.7726 6.76094 29.83L9.82144 26.7595C10.1998 26.38 10.7146 26.1682 11.2504 26.1715L13.9899 26.1886L16.5528 23.6221L7.10728 20.5586Z" 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="M15.226 29.1964L11.6505 29.1741L9.82404 31.0065L13.8584 33.2261C14.6895 33.6834 15.3734 34.3677 15.8303 35.199L18.016 39.1769L19.8394 37.3475L19.8286 33.7842L26.7364 26.8668L30.8162 39.4193L33.6987 36.5398L31.6162 21.9774L38.6703 14.9176L39.2588 10.8716C39.3551 10.2099 38.7873 9.64199 38.1256 9.73804L34.0709 10.3266L26.9954 17.4079L12.4647 15.3342L9.58691 18.209L22.1343 22.2785L15.226 29.1964ZM25.9337 14.226L12.394 12.2937C11.7712 12.2049 11.143 12.4142 10.6979 12.8587L6.31083 17.2412C5.25363 18.2973 5.68585 20.0976 7.10728 20.5586L16.5528 23.6221L13.9899 26.1886L11.2504 26.1715C10.7146 26.1682 10.1998 26.38 9.82144 26.7595L6.76094 29.83C5.82143 30.7726 6.04736 32.3527 7.21337 32.9942L12.4123 35.8546C12.7447 36.0375 13.0183 36.3112 13.201 36.6437L16.0294 41.7911C16.6718 42.9602 18.257 43.1847 19.1987 42.2399L22.2571 39.1715C22.6323 38.7951 22.8422 38.2849 22.8406 37.7535L22.8324 35.0218L25.3976 32.4531L28.4672 41.8975C28.9286 43.3172 30.7265 43.7493 31.7827 42.6942L36.1729 38.3086C36.6186 37.8634 36.8285 37.2341 36.7393 36.6105L34.7982 23.0371L41.0269 16.8034C41.3314 16.4987 41.5293 16.1039 41.5913 15.6776L42.2276 11.3034C42.6126 8.65663 40.3416 6.38495 37.6947 6.76915L33.3111 7.40542C32.8841 7.4674 32.4886 7.66582 32.1836 7.97104L25.9337 14.226Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/android/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface AndroidProps {
+interface AndroidProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface AndroidProps {
 }
 
 export const Android = forwardRef<SVGSVGElement, AndroidProps>(
-  ({ 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="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" 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="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" 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="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" 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="M35.2 18.9595L38.88 12.5995C39.2 11.9795 38.96 11.2195 38.36 10.8995C37.78 10.5995 37.06 10.7795 36.7 11.3395L32.94 17.8195C27.22 15.3995 20.78 15.3995 15.06 17.8195L11.3 11.3395C10.92 10.7595 10.14 10.5795 9.56 10.9395C9 11.2995 8.82 12.0195 9.12 12.5995L12.8 18.9595C6.9141 22.3201 2.97489 28.2403 2.11174 34.9233C2.03703 35.5017 2.49855 35.9995 3.08174 35.9995H44.9183C45.5015 35.9995 45.963 35.5017 45.8883 34.9233C45.0251 28.2403 41.0859 22.3201 35.2 18.9595ZM14 30.4995C12.62 30.4995 11.5 29.3795 11.5 27.9995C11.5 26.6195 12.62 25.4995 14 25.4995C15.38 25.4995 16.5 26.6195 16.5 27.9995C16.5 29.3795 15.38 30.4995 14 30.4995ZM34 30.4995C32.62 30.4995 31.5 29.3795 31.5 27.9995C31.5 26.6195 32.62 25.4995 34 25.4995C35.38 25.4995 36.5 26.6195 36.5 27.9995C36.5 29.3795 35.38 30.4995 34 30.4995Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/apple/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface AppleProps {
+interface AppleProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface AppleProps {
 }
 
 export const Apple = forwardRef<SVGSVGElement, AppleProps>(
-  ({ 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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" 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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" 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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" 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="M29.6769 9.89979C30.8569 8.37985 31.7568 6.19991 31.4368 4C29.4969 4.13999 27.237 5.37993 25.8971 6.97986C24.6971 8.43981 23.7171 10.6197 24.0971 12.7396C26.217 12.8196 28.417 11.5397 29.6769 9.89979Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40.4766 33.5796C39.5767 35.5996 39.1367 36.5195 37.9567 38.3194C36.3168 40.8393 33.9969 43.9592 31.097 43.9992C29.9496 44.0187 29.1994 43.6788 28.3865 43.3107C28.3634 43.3002 28.3403 43.2898 28.3171 43.2793C28.282 43.2635 28.2468 43.2477 28.2115 43.2318C27.2616 42.8041 26.2306 42.34 24.4373 42.3593C22.5864 42.3593 21.5278 42.8346 20.5518 43.2728L20.5374 43.2793C20.5147 43.2893 20.492 43.2993 20.4694 43.3093C19.6359 43.678 18.8658 44.0187 17.6975 43.9992C14.8376 43.9592 12.6377 41.1393 10.9978 38.6194C6.41797 31.5797 5.91799 23.34 8.75788 18.9402C10.7778 15.8203 13.9577 14.0004 16.9375 14.0004C18.5375 14.0004 19.8174 14.4604 21.0374 14.9004L21.0482 14.9043C22.1642 15.3028 23.2212 15.6803 24.4173 15.6803C25.5372 15.6803 26.4372 15.3404 27.4371 14.9604C28.6171 14.5004 29.9371 14.0004 31.857 14.0004C34.5169 14.0004 37.3368 15.4603 39.3367 17.9802C32.7769 21.6001 33.8369 31.0597 40.4766 33.5796Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/arrow-back/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ArrowBackProps {
+interface ArrowBackProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ArrowBackProps {
 }
 
 export const ArrowBack = forwardRef<SVGSVGElement, ArrowBackProps>(
-  ({ 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.0607 37.9372L16.4751 24.3516C16.2798 24.1563 16.2798 23.8397 16.4751 23.6445L30.0607 10.0588L27.9394 7.9375L14.3537 21.5231C12.9869 22.89 12.9869 25.1061 14.3537 26.4729L27.9394 40.0585L30.0607 37.9372Z" 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.0607 37.9372L16.4751 24.3516C16.2798 24.1563 16.2798 23.8397 16.4751 23.6445L30.0607 10.0588L27.9394 7.9375L14.3537 21.5231C12.9869 22.89 12.9869 25.1061 14.3537 26.4729L27.9394 40.0585L30.0607 37.9372Z" 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.4143 10.4144L16.8286 24L30.4143 37.5857L27.5858 40.4141L14.0002 26.8284C12.4381 25.2663 12.4381 22.7337 14.0002 21.1716L27.5858 7.58594L30.4143 10.4144Z" 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.0607 37.9372L16.4751 24.3516C16.2798 24.1563 16.2798 23.8397 16.4751 23.6445L30.0607 10.0588L27.9394 7.9375L14.3537 21.5231C12.9869 22.89 12.9869 25.1061 14.3537 26.4729L27.9394 40.0585L30.0607 37.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-backward/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ArrowBackwardProps {
+interface ArrowBackwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ArrowBackwardProps {
 }
 
 export const ArrowBackward = forwardRef<SVGSVGElement, ArrowBackwardProps>(
-  ({ 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.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" 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.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" 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.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" 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.0605 13.0588L19.4748 23.6445C19.2796 23.8397 19.2796 24.1563 19.4748 24.3516L30.0605 34.9372L27.9391 37.0585L17.3535 26.4729C15.9867 25.1061 15.9867 22.89 17.3535 21.5231L27.9391 10.9375L30.0605 13.0588Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-down/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ArrowDownProps {
+interface ArrowDownProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ArrowDownProps {
 }
 
 export const ArrowDown = forwardRef<SVGSVGElement, ArrowDownProps>(
-  ({ 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="M25.5011 36.379L25.5011 7H22.5011L22.5011 36.3797L11.4836 25.3622L9.3623 27.4835L21.5259 39.6471C22.8927 41.0139 25.1088 41.0139 26.4756 39.6471L38.6392 27.4835L36.5179 25.3622L25.5011 36.379Z" 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="M25.5011 36.379L25.5011 7H22.5011L22.5011 36.3797L11.4836 25.3622L9.3623 27.4835L21.5259 39.6471C22.8927 41.0139 25.1088 41.0139 26.4756 39.6471L38.6392 27.4835L36.5179 25.3622L25.5011 36.379Z" 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="M26.0009 35.1719L26.0009 7H22.0009L22.0009 35.1726L11.837 25.0086L9.00854 27.8371L21.1721 40.0006C22.7342 41.5627 25.2669 41.5627 26.829 40.0006L38.9926 27.8371L36.1641 25.0086L26.0009 35.1719Z" 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="M25.5011 36.379L25.5011 7H22.5011L22.5011 36.3797L11.4836 25.3622L9.3623 27.4835L21.5259 39.6471C22.8927 41.0139 25.1088 41.0139 26.4756 39.6471L38.6392 27.4835L36.5179 25.3622L25.5011 36.379Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-down-left/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ArrowDownLeftProps {
+interface ArrowDownLeftProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ArrowDownLeftProps {
 }
 
 export const ArrowDownLeft = forwardRef<SVGSVGElement, ArrowDownLeftProps>(
-  ({ 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="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" 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="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" 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="M15.8282 35.0003L39.4142 11.4144L36.5858 8.58594L13 32.1717V17.0003H9V35.0003C9 37.2094 10.7909 39.0003 13 39.0003H31V35.0003H15.8282Z" 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="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-downward/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ArrowDownwardProps {
+interface ArrowDownwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ArrowDownwardProps {
 }
 
 export const ArrowDownward = forwardRef<SVGSVGElement, ArrowDownwardProps>(
-  ({ 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="M10.0608 17.9375L23.6464 31.5231C23.8417 31.7184 24.1583 31.7184 24.3535 31.5232L37.9392 17.9375L40.0605 20.0588L26.4748 33.6445C25.108 35.0113 22.8919 35.0113 21.5251 33.6445L7.93945 20.0588L10.0608 17.9375Z" 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="M10.0608 17.9375L23.6464 31.5231C23.8417 31.7184 24.1583 31.7184 24.3535 31.5232L37.9392 17.9375L40.0605 20.0588L26.4748 33.6445C25.108 35.0113 22.8919 35.0113 21.5251 33.6445L7.93945 20.0588L10.0608 17.9375Z" 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="M10.4141 17.5859L23.9998 31.1716L37.5854 17.5859L40.4138 20.4144L26.8282 34C25.2661 35.5621 22.7334 35.5621 21.1713 34L7.58569 20.4144L10.4141 17.5859Z" 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="M10.0608 17.9375L23.6464 31.5231C23.8417 31.7184 24.1583 31.7184 24.3535 31.5232L37.9392 17.9375L40.0605 20.0588L26.4748 33.6445C25.108 35.0113 22.8919 35.0113 21.5251 33.6445L7.93945 20.0588L10.0608 17.9375Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-drop-right/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ArrowDropRightProps {
+interface ArrowDropRightProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ArrowDropRightProps {
 }
 
 export const ArrowDropRight = forwardRef<SVGSVGElement, ArrowDropRightProps>(
-  ({ 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="M17 12.502L17 35.6736C17 36.5645 18.0771 37.0107 18.7071 36.3807L29.5858 25.502C30.3668 24.721 30.3668 23.4546 29.5858 22.6736L18.7071 11.7949C18.0771 11.1649 17 11.6111 17 12.502Z" 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.9392 34.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" 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.9392 34.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" 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.9392 34.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-forward/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ArrowForwardProps {
+interface ArrowForwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ArrowForwardProps {
 }
 
 export const ArrowForward = forwardRef<SVGSVGElement, ArrowForwardProps>(
-  ({ 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.9392 37.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" 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.9392 37.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" 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.5857 37.5857L31.1713 24L17.5857 10.4144L20.4141 7.58594L33.9998 21.1716C35.5619 22.7337 35.5619 25.2663 33.9998 26.8284L20.4141 40.4141L17.5857 37.5857Z" 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.9392 37.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;