@liner-fe/icon 0.0.10 → 0.0.12

package/assets/highlighter/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface HighlighterProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface HighlighterProps {
   color?: BasicColorType;
 }
 
-export const Highlighter = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HighlighterProps) => {
+export const Highlighter = forwardRef<SVGSVGElement, HighlighterProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M31.7208 7.43684C33.1324 6.02408 35.4221 6.02359 36.8343 7.43577L42.2001 12.8016C43.6115 14.213 43.612 16.501 42.2012 17.913L22.3681 37.745C21.8693 38.2436 21.2355 38.5855 20.5449 38.7284L16.9033 39.4821C16.2209 39.6234 15.524 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L10.3381 34.9017C10.0122 34.1905 9.92077 33.3814 10.0989 32.5959L10.9059 29.038C11.0568 28.3725 11.3929 27.7634 11.8755 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1622 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0925 36.5863 15.8822 36.5234 15.7357 36.377L13.1895 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8316 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4106 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0832 9.31692 33.843 9.55727L31.1751 12.2274L37.4106 18.4632Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M31.7208 7.43684C33.1324 6.02408 35.4221 6.02359 36.8343 7.43577L42.2001 12.8016C43.6115 14.213 43.612 16.501 42.2012 17.913L22.3681 37.745C21.8693 38.2436 21.2355 38.5855 20.5449 38.7284L16.9033 39.4821C16.2209 39.6234 15.524 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L10.3381 34.9017C10.0122 34.1905 9.92077 33.3814 10.0989 32.5959L10.9059 29.038C11.0568 28.3725 11.3929 27.7634 11.8755 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1622 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0925 36.5863 15.8822 36.5234 15.7357 36.377L13.1895 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8316 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4106 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0832 9.31692 33.843 9.55727L31.1751 12.2274L37.4106 18.4632Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M31.3671 7.08344C32.9739 5.47527 35.5803 5.47472 37.1878 7.08221L42.5537 12.4481C44.1602 14.0546 44.1608 16.6592 42.5549 18.2664L22.7216 38.0986C22.1538 38.6662 21.4324 39.0553 20.6462 39.2181L17.0046 39.9717C16.1499 40.1486 15.2752 40.0471 14.5 39.7028L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L9.96401 35.2758C9.52839 34.4275 9.39455 33.441 9.61131 32.4853L10.4183 28.9274C10.5901 28.1699 10.9727 27.4765 11.522 26.9274L31.3671 7.08344ZM29.0541 15.0561L17.1452 26.9617L22.6738 32.4903L34.5824 20.5848L29.0541 15.0561ZM14.3192 29.8121C14.3203 29.807 14.3219 29.8019 14.3237 29.7971L19.8291 35.3024L16.194 36.0547C16.156 36.0626 16.1167 36.0508 16.0893 36.0234L13.5431 33.4768C13.5151 33.4489 13.5035 33.4086 13.5122 33.3701L14.3192 29.8121ZM37.4104 17.756L39.7253 15.4391C39.7702 15.3942 39.7702 15.3214 39.7253 15.2765L34.3594 9.91064C34.3145 9.86571 34.2416 9.86573 34.1967 9.91067L31.8821 12.2272L37.4104 17.756Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M31.7208 7.43684C33.1324 6.02408 35.4221 6.02359 36.8343 7.43577L42.2001 12.8016C43.6115 14.213 43.612 16.501 42.2012 17.913L22.3681 37.745C21.8693 38.2436 21.2355 38.5855 20.5449 38.7284L16.9033 39.4821C16.2209 39.6234 15.524 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L10.3381 34.9017C10.0122 34.1905 9.92077 33.3814 10.0989 32.5959L10.9059 29.038C11.0568 28.3725 11.3929 27.7634 11.8755 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1622 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0925 36.5863 15.8822 36.5234 15.7357 36.377L13.1895 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8316 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4106 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0832 9.31692 33.843 9.55727L31.1751 12.2274L37.4106 18.4632Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/history/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface HistoryProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface HistoryProps {
   color?: BasicColorType;
 }
 
-export const History = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HistoryProps) => {
+export const History = forwardRef<SVGSVGElement, HistoryProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M34.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M34.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M33.8995 14.1005C28.4322 8.63316 19.5678 8.63316 14.1005 14.1005C13.5039 14.6971 12.9731 15.3332 12.5076 16H18V20H9C6.79086 20 5 18.2092 5 16V7.00003H9L9 14.0445C9.65195 13.0642 10.4095 12.1346 11.2721 11.2721C18.3015 4.24264 29.6985 4.24264 36.7279 11.2721C43.7574 18.3015 43.7574 29.6985 36.7279 36.7279C29.6985 43.7574 18.3015 43.7574 11.2721 36.7279C9.51115 34.967 8.18872 32.9277 7.30892 30.7495C6.86587 29.6527 6.53544 28.5215 6.31741 27.3738L10.2471 26.6273C10.4168 27.5204 10.6738 28.3997 11.0178 29.2515C11.7001 30.9406 12.7263 32.5253 14.1005 33.8995C19.5678 39.3668 28.4322 39.3668 33.8995 33.8995C39.3668 28.4322 39.3668 19.5678 33.8995 14.1005Z" style={{ fill: `var(--${color})` }}/>
 <path d="M26 23.672V14.7613H22V23.672C22 24.7328 22.4214 25.7502 23.1715 26.5004L29.0858 32.4147L31.9142 29.5863L26 23.672Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M34.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/home/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface HomeProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface HomeProps {
   color?: BasicColorType;
 }
 
-export const Home = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HomeProps) => {
+export const Home = forwardRef<SVGSVGElement, HomeProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.0001 3.80664L1.30518 15.6699L2.69494 18.3286L5.00006 17.1236V40.9989C5.00006 42.1034 5.89549 42.9989 7.00006 42.9989H20.0001V31.9989H28.0001V42.9989H41.0001C42.1046 42.9989 43.0001 42.1034 43.0001 40.9989V17.1236L45.3052 18.3286L46.6949 15.6699L24.0001 3.80664ZM8.00006 15.8101L24.0001 7.38903L40.0001 15.8101V39.9989L31.0001 39.9989V28.9989H17.0001V39.9989L8.00006 39.9989V15.8101Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.0001 3.80664L1.30518 15.6699L2.69494 18.3286L5.00006 17.1236V40.9989C5.00006 42.1034 5.89549 42.9989 7.00006 42.9989H20.0001V31.9989H28.0001V42.9989H41.0001C42.1046 42.9989 43.0001 42.1034 43.0001 40.9989V17.1236L45.3052 18.3286L46.6949 15.6699L24.0001 3.80664ZM8.00006 15.8101L24.0001 7.38903L40.0001 15.8101V39.9989L31.0001 39.9989V28.9989H17.0001V39.9989L8.00006 39.9989V15.8101Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 3.74414L1.07349 15.7285L2.9265 19.2734L4.99999 18.1895V41.0006C4.99999 42.1051 5.89543 43.0006 6.99999 43.0006H21V33.0009L27 33.0006V43.0006H41C42.1046 43.0006 43 42.1051 43 41.0006V18.1895L45.0735 19.2734L46.9265 15.7285L24 3.74414ZM8.99999 16.4155L24 8.52076L39 16.4155V39.0006L31 39.0006V29.0006H17V39.0006L8.99999 39.0006V16.4155Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.0001 3.80664L1.30518 15.6699L2.69494 18.3286L5.00006 17.1236V40.9989C5.00006 42.1034 5.89549 42.9989 7.00006 42.9989H20.0001V31.9989H28.0001V42.9989H41.0001C42.1046 42.9989 43.0001 42.1034 43.0001 40.9989V17.1236L45.3052 18.3286L46.6949 15.6699L24.0001 3.80664ZM8.00006 15.8101L24.0001 7.38903L40.0001 15.8101V39.9989L31.0001 39.9989V28.9989H17.0001V39.9989L8.00006 39.9989V15.8101Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/info/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface InfoProps {
   fill?: boolean;
@@ -7,23 +8,24 @@ interface InfoProps {
   color?: BasicColorType;
 }
 
-export const Info = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: InfoProps) => {
+export const Info = forwardRef<SVGSVGElement, InfoProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24 12.4745C23.3592 12.4745 22.7853 12.7047 22.3313 13.16C21.8774 13.6151 21.6486 14.1895 21.6486 14.83C21.6486 15.4705 21.8774 16.0449 22.3313 16.5C22.7853 16.9552 23.3592 17.1855 24 17.1855C24.6408 17.1855 25.2147 16.9552 25.6687 16.5C26.1226 16.0449 26.3514 15.4705 26.3514 14.83C26.3514 14.1895 26.1226 13.6151 25.6687 13.16C25.2147 12.7047 24.6408 12.4745 24 12.4745Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22 35.5003V20.5003H26V35.5003H22Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM40 24C40 32.8366 32.8366 40 24 40C15.1634 40 8 32.8366 8 24C8 15.1634 15.1634 8 24 8C32.8366 8 40 15.1634 40 24Z" style={{ fill: `var(--${color})` }}/>
@@ -31,10 +33,11 @@ export const Info = ({ fill = false, thick = false, size = 24, color = 'neutral-
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/light/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface LightProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface LightProps {
   color?: BasicColorType;
 }
 
-export const Light = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: LightProps) => {
+export const Light = forwardRef<SVGSVGElement, LightProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24.9621 11.0802C23.9613 8.3066 20.0387 8.3066 19.0379 11.0802L15.8671 19.8671L7.0802 23.0379C4.3066 24.0387 4.3066 27.9613 7.0802 28.9621L15.8671 32.1329L19.0379 40.9198C20.0387 43.6934 23.9613 43.6934 24.9621 40.9198L28.1329 32.1329L36.9198 28.9621C39.6934 27.9613 39.6934 24.0387 36.9198 23.0379L28.1329 19.8671L24.9621 11.0802Z" style={{ fill: `var(--${color})` }}/>
 <path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24.4918 11.2499C23.6499 8.91669 20.3501 8.9167 19.5082 11.2499L16.2577 20.2577L7.24991 23.5082C4.91669 24.3501 4.9167 27.6499 7.24991 28.4918L16.2577 31.7423L19.5082 40.7501C20.3501 43.0833 23.6499 43.0833 24.4918 40.7501L27.7423 31.7423L36.7501 28.4918C39.0833 27.6499 39.0833 24.3501 36.7501 23.5082L27.7423 20.2577L24.4918 11.2499Z" style={{ fill: `var(--${color})` }}/>
 <path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M19.0379 11.0802C20.0387 8.3066 23.9613 8.3066 24.9621 11.0802L28.1329 19.8671L36.9198 23.0379C39.6934 24.0387 39.6934 27.9613 36.9198 28.9621L28.1329 32.1329L24.9621 40.9198C23.9613 43.6934 20.0387 43.6934 19.0379 40.9198L15.8671 32.1329L7.0802 28.9621C4.3066 27.9613 4.3066 24.0387 7.0802 23.0379L15.8671 19.8671L19.0379 11.0802ZM22 14.656L19.494 21.6007C19.176 22.482 18.482 23.176 17.6007 23.494L10.656 26L17.6007 28.506C18.482 28.824 19.176 29.518 19.494 30.3993L22 37.344L24.506 30.3993C24.824 29.5179 25.518 28.824 26.3993 28.506L33.344 26L26.3993 23.494C25.5179 23.176 24.824 22.482 24.506 21.6007L22 14.656Z" style={{ fill: `var(--${color})` }}/>
 <path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M19.5082 11.2499C20.3501 8.9167 23.6499 8.91669 24.4918 11.2499L27.7423 20.2577L36.7501 23.5082C39.0833 24.3501 39.0833 27.6499 36.7501 28.4918L27.7423 31.7423L24.4918 40.7501C23.6499 43.0833 20.3501 43.0833 19.5082 40.7501L16.2577 31.7423L7.24991 28.4918C4.9167 27.6499 4.91669 24.3501 7.24991 23.5082L16.2577 20.2577L19.5082 11.2499ZM22 13.1829L19.0237 21.431C18.7562 22.1724 18.1724 22.7562 17.431 23.0237L9.18293 26L17.431 28.9763C18.1724 29.2439 18.7562 29.8276 19.0237 30.569L22 38.8171L24.9763 30.569C25.2439 29.8276 25.8276 29.2439 26.569 28.9763L34.8171 26L26.569 23.0237C25.8276 22.7561 25.2439 22.1724 24.9763 21.431L22 13.1829Z" style={{ fill: `var(--${color})` }}/>
 <path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/light-mode/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface LightModeProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface LightModeProps {
   color?: BasicColorType;
 }
 
-export const LightMode = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: LightModeProps) => {
+export const LightMode = forwardRef<SVGSVGElement, LightModeProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M25.5 2V11H22.5V2H25.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 34C29.5228 34 34 29.5228 34 24C34 18.4772 29.5228 14 24 14C18.4772 14 14 18.4772 14 24C14 29.5228 18.4772 34 24 34ZM24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.5 46V37H22.5V46H25.5Z" style={{ fill: `var(--${color})` }}/>
@@ -22,7 +24,7 @@ export const LightMode = ({ fill = false, thick = false, size = 24, color = 'neu
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M25.5 2V11H22.5V2H25.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 34C29.5228 34 34 29.5228 34 24C34 18.4772 29.5228 14 24 14C18.4772 14 14 18.4772 14 24C14 29.5228 18.4772 34 24 34ZM24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.5 46V37H22.5V46H25.5Z" style={{ fill: `var(--${color})` }}/>
@@ -35,7 +37,7 @@ export const LightMode = ({ fill = false, thick = false, size = 24, color = 'neu
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M26 2V11H22V2H26Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 34C29.5228 34 34 29.5228 34 24C34 18.4772 29.5228 14 24 14C18.4772 14 14 18.4772 14 24C14 29.5228 18.4772 34 24 34ZM24 30C27.3137 30 30 27.3137 30 24C30 20.6863 27.3137 18 24 18C20.6863 18 18 20.6863 18 24C18 27.3137 20.6863 30 24 30Z" style={{ fill: `var(--${color})` }}/>
 <path d="M26 46V37H22V46H26Z" style={{ fill: `var(--${color})` }}/>
@@ -49,7 +51,7 @@ export const LightMode = ({ fill = false, thick = false, size = 24, color = 'neu
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M25.5 2V11H22.5V2H25.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 34C29.5228 34 34 29.5228 34 24C34 18.4772 29.5228 14 24 14C18.4772 14 14 18.4772 14 24C14 29.5228 18.4772 34 24 34ZM24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.5 46V37H22.5V46H25.5Z" style={{ fill: `var(--${color})` }}/>
@@ -61,4 +63,5 @@ export const LightMode = ({ fill = false, thick = false, size = 24, color = 'neu
 <path d="M7.38337 9.50443L13.7473 15.8684L15.8687 13.7471L9.50469 7.38311L7.38337 9.50443Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/liner/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface LinerProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface LinerProps {
   color?: BasicColorType;
 }
 
-export const Liner = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: LinerProps) => {
+export const Liner = forwardRef<SVGSVGElement, LinerProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M26.9523 6.58093C27.6483 5.88485 28.5774 5.5 29.5616 5.5H38.8094C40.8435 5.5 42.4996 7.15609 42.4996 9.19026V18.4436C42.4996 19.4155 42.1101 20.3615 41.4187 21.0529L35.0383 27.4332V37.5254C35.0383 38.5096 34.6535 39.4386 33.9574 40.1347L29.8327 44.2594L29.829 44.2632C29.1265 44.9728 28.1958 45.3528 27.233 45.3528C26.7527 45.3528 26.2712 45.2582 25.8102 45.0684L25.8004 45.0644C24.4191 44.4842 23.5317 43.1682 23.5317 41.657V36.0884H15.8337C13.6723 36.0884 11.9167 34.3328 11.9167 32.1714V24.4734H6.34813C4.84776 24.4734 3.51381 23.6004 2.93621 22.1936C2.36349 20.8044 2.6749 19.2433 3.7388 18.1794L7.87043 14.0477C8.56651 13.3517 9.49559 12.9668 10.4798 12.9668H20.5664L26.9523 6.58093ZM29.5616 8.5C29.3732 8.5 29.2071 8.56869 29.0736 8.70225L22.5858 15.1901C22.0925 15.6833 21.4249 15.9668 20.712 15.9668H10.4798C10.2914 15.9668 10.1253 16.0355 9.99175 16.1691L5.86012 20.3007C5.65272 20.5081 5.59874 20.7816 5.71004 21.0509L5.71138 21.0541C5.81961 21.3177 6.0454 21.4734 6.34813 21.4734H12.2663C13.7205 21.4734 14.9167 22.6547 14.9167 24.1239V32.1714C14.9167 32.676 15.3292 33.0884 15.8337 33.0884H23.8813C25.3355 33.0884 26.5317 34.2697 26.5317 35.7389V41.657C26.5317 41.9473 26.6824 42.1789 26.9573 42.2963C27.0585 42.3373 27.1506 42.3528 27.233 42.3528C27.3969 42.3528 27.5597 42.2917 27.6976 42.152L27.7044 42.145L31.8361 38.0134C31.9697 37.8798 32.0383 37.7138 32.0383 37.5254V27.2046C32.0383 26.5753 32.2783 25.9506 32.7487 25.4802L39.2974 18.9316C39.4246 18.8044 39.4996 18.6221 39.4996 18.4436V9.19026C39.4996 8.81293 39.1867 8.5 38.8094 8.5H29.5616Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.6174 18.929V23.4755H29.1781V18.929H24.6174ZM21.6174 18.2307C21.6174 16.9568 22.653 15.929 23.9226 15.929H29.8729C31.134 15.929 32.1781 16.9521 32.1781 18.2307V24.1699C32.1781 25.4344 31.152 26.4755 29.8729 26.4755H23.9226C22.6568 26.4755 21.6174 25.4477 21.6174 24.1699V18.2307Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M26.9523 6.58093C27.6483 5.88485 28.5774 5.5 29.5616 5.5H38.8094C40.8435 5.5 42.4996 7.15609 42.4996 9.19026V18.4436C42.4996 19.4155 42.1101 20.3615 41.4187 21.0529L35.0383 27.4332V37.5254C35.0383 38.5096 34.6535 39.4386 33.9574 40.1347L29.8327 44.2594L29.829 44.2632C29.1265 44.9728 28.1958 45.3528 27.233 45.3528C26.7527 45.3528 26.2712 45.2582 25.8102 45.0684L25.8004 45.0644C24.4191 44.4842 23.5317 43.1682 23.5317 41.657V36.0884H15.8337C13.6723 36.0884 11.9167 34.3328 11.9167 32.1714V24.4734H6.34813C4.84776 24.4734 3.51381 23.6004 2.93621 22.1936C2.36349 20.8044 2.6749 19.2433 3.7388 18.1794L7.87043 14.0477C8.56651 13.3517 9.49559 12.9668 10.4798 12.9668H20.5664L26.9523 6.58093ZM29.5616 8.5C29.3732 8.5 29.2071 8.56869 29.0736 8.70225L22.5858 15.1901C22.0925 15.6833 21.4249 15.9668 20.712 15.9668H10.4798C10.2914 15.9668 10.1253 16.0355 9.99175 16.1691L5.86012 20.3007C5.65272 20.5081 5.59874 20.7816 5.71004 21.0509L5.71138 21.0541C5.81961 21.3177 6.0454 21.4734 6.34813 21.4734H12.2663C13.7205 21.4734 14.9167 22.6547 14.9167 24.1239V32.1714C14.9167 32.676 15.3292 33.0884 15.8337 33.0884H23.8813C25.3355 33.0884 26.5317 34.2697 26.5317 35.7389V41.657C26.5317 41.9473 26.6824 42.1789 26.9573 42.2963C27.0585 42.3373 27.1506 42.3528 27.233 42.3528C27.3969 42.3528 27.5597 42.2917 27.6976 42.152L27.7044 42.145L31.8361 38.0134C31.9697 37.8798 32.0383 37.7138 32.0383 37.5254V27.2046C32.0383 26.5753 32.2783 25.9506 32.7487 25.4802L39.2974 18.9316C39.4246 18.8044 39.4996 18.6221 39.4996 18.4436V9.19026C39.4996 8.81293 39.1867 8.5 38.8094 8.5H29.5616Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.6174 18.929V23.4755H29.1781V18.929H24.6174ZM21.6174 18.2307C21.6174 16.9568 22.653 15.929 23.9226 15.929H29.8729C31.134 15.929 32.1781 16.9521 32.1781 18.2307V24.1699C32.1781 25.4344 31.152 26.4755 29.8729 26.4755H23.9226C22.6568 26.4755 21.6174 25.4477 21.6174 24.1699V18.2307Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M26.9523 6.58093C27.6483 5.88485 28.5774 5.5 29.5616 5.5H38.8094C40.8435 5.5 42.4996 7.15609 42.4996 9.19026V18.4436C42.4996 19.4155 42.1101 20.3615 41.4187 21.0529L35.0383 27.4332V37.5254C35.0383 38.5096 34.6535 39.4386 33.9574 40.1347L29.8327 44.2594L29.829 44.2632C29.1265 44.9728 28.1958 45.3528 27.233 45.3528C26.7527 45.3528 26.2712 45.2582 25.8102 45.0684L25.8004 45.0644C24.4191 44.4842 23.5317 43.1682 23.5317 41.657V36.0884H15.8337C13.6723 36.0884 11.9167 34.3328 11.9167 32.1714V24.4734H6.34813C4.84776 24.4734 3.51381 23.6004 2.93621 22.1936C2.36349 20.8044 2.6749 19.2433 3.7388 18.1794L7.87043 14.0477C8.56651 13.3517 9.49559 12.9668 10.4798 12.9668H20.5664L26.9523 6.58093ZM29.5616 8.5C29.3732 8.5 29.2071 8.56869 29.0736 8.70225L22.5858 15.1901C22.0925 15.6833 21.4249 15.9668 20.712 15.9668H10.4798C10.2914 15.9668 10.1253 16.0355 9.99175 16.1691L5.86012 20.3007C5.65272 20.5081 5.59874 20.7816 5.71004 21.0509L5.71138 21.0541C5.81961 21.3177 6.0454 21.4734 6.34813 21.4734H12.2663C13.7205 21.4734 14.9167 22.6547 14.9167 24.1239V32.1714C14.9167 32.676 15.3292 33.0884 15.8337 33.0884H23.8813C25.3355 33.0884 26.5317 34.2697 26.5317 35.7389V41.657C26.5317 41.9473 26.6824 42.1789 26.9573 42.2963C27.0585 42.3373 27.1506 42.3528 27.233 42.3528C27.3969 42.3528 27.5597 42.2917 27.6976 42.152L27.7044 42.145L31.8361 38.0134C31.9697 37.8798 32.0383 37.7138 32.0383 37.5254V27.2046C32.0383 26.5753 32.2783 25.9506 32.7487 25.4802L39.2974 18.9316C39.4246 18.8044 39.4996 18.6221 39.4996 18.4436V9.19026C39.4996 8.81293 39.1867 8.5 38.8094 8.5H29.5616Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.6174 18.929V23.4755H29.1781V18.929H24.6174ZM21.6174 18.2307C21.6174 16.9568 22.653 15.929 23.9226 15.929H29.8729C31.134 15.929 32.1781 16.9521 32.1781 18.2307V24.1699C32.1781 25.4344 31.152 26.4755 29.8729 26.4755H23.9226C22.6568 26.4755 21.6174 25.4477 21.6174 24.1699V18.2307Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M26.9523 6.58093C27.6483 5.88485 28.5774 5.5 29.5616 5.5H38.8094C40.8435 5.5 42.4996 7.15609 42.4996 9.19026V18.4436C42.4996 19.4155 42.1101 20.3615 41.4187 21.0529L35.0383 27.4332V37.5254C35.0383 38.5096 34.6535 39.4386 33.9574 40.1347L29.8327 44.2594L29.829 44.2632C29.1265 44.9728 28.1958 45.3528 27.233 45.3528C26.7527 45.3528 26.2712 45.2582 25.8102 45.0684L25.8004 45.0644C24.4191 44.4842 23.5317 43.1682 23.5317 41.657V36.0884H15.8337C13.6723 36.0884 11.9167 34.3328 11.9167 32.1714V24.4734H6.34813C4.84776 24.4734 3.51381 23.6004 2.93621 22.1936C2.36349 20.8044 2.6749 19.2433 3.7388 18.1794L7.87043 14.0477C8.56651 13.3517 9.49559 12.9668 10.4798 12.9668H20.5664L26.9523 6.58093ZM29.5616 8.5C29.3732 8.5 29.2071 8.56869 29.0736 8.70225L22.5858 15.1901C22.0925 15.6833 21.4249 15.9668 20.712 15.9668H10.4798C10.2914 15.9668 10.1253 16.0355 9.99175 16.1691L5.86012 20.3007C5.65272 20.5081 5.59874 20.7816 5.71004 21.0509L5.71138 21.0541C5.81961 21.3177 6.0454 21.4734 6.34813 21.4734H12.2663C13.7205 21.4734 14.9167 22.6547 14.9167 24.1239V32.1714C14.9167 32.676 15.3292 33.0884 15.8337 33.0884H23.8813C25.3355 33.0884 26.5317 34.2697 26.5317 35.7389V41.657C26.5317 41.9473 26.6824 42.1789 26.9573 42.2963C27.0585 42.3373 27.1506 42.3528 27.233 42.3528C27.3969 42.3528 27.5597 42.2917 27.6976 42.152L27.7044 42.145L31.8361 38.0134C31.9697 37.8798 32.0383 37.7138 32.0383 37.5254V27.2046C32.0383 26.5753 32.2783 25.9506 32.7487 25.4802L39.2974 18.9316C39.4246 18.8044 39.4996 18.6221 39.4996 18.4436V9.19026C39.4996 8.81293 39.1867 8.5 38.8094 8.5H29.5616Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.6174 18.929V23.4755H29.1781V18.929H24.6174ZM21.6174 18.2307C21.6174 16.9568 22.653 15.929 23.9226 15.929H29.8729C31.134 15.929 32.1781 16.9521 32.1781 18.2307V24.1699C32.1781 25.4344 31.152 26.4755 29.8729 26.4755H23.9226C22.6568 26.4755 21.6174 25.4477 21.6174 24.1699V18.2307Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/link/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface LinkProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface LinkProps {
   color?: BasicColorType;
 }
 
-export const Link = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: LinkProps) => {
+export const Link = forwardRef<SVGSVGElement, LinkProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M39.6433 8.79387L39.642 8.79251L39.5881 8.739C39.5559 8.70588 39.5234 8.67293 39.4906 8.64016L39.4892 8.6388L39.487 8.64099C35.753 5.06987 29.8307 5.12037 26.1586 8.7925L20.8505 14.1006C22.2542 13.8355 23.6976 13.8325 25.1023 14.0915L28.2799 10.9138C30.8114 8.38233 34.9032 8.36222 37.4595 10.8535C39.9207 13.4117 39.8906 17.4809 37.3693 20.0022L29.9026 27.4687C29.4816 27.8897 29.0175 28.2413 28.5244 28.5233C26.0526 29.9373 22.8541 29.6061 20.723 27.5293C19.5373 26.2967 18.9298 24.7135 18.9005 23.1216L16.2955 25.7267C16.7132 27.1318 17.4616 28.4596 18.5404 29.5876L18.5392 29.5889L18.5406 29.5902L18.5945 29.6438C18.6267 29.6769 18.6592 29.7098 18.6919 29.7426L18.6933 29.7439L18.6955 29.7417C22.4295 33.3129 28.3518 33.2623 32.024 29.5902L39.4906 22.1236C43.1627 18.4514 43.2132 12.5291 39.6421 8.79509L39.6433 8.79387Z" style={{ fill: `var(--${color})` }}/>
 <path d="M10.9138 28.2799C8.3925 30.8012 8.36242 34.8704 10.8236 37.4287C13.3799 39.9198 17.4717 39.8997 20.0031 37.3682L23.1807 34.1906C24.5854 34.4495 26.0288 34.4465 27.4325 34.1815L22.1244 39.4895C18.4523 43.1616 12.5301 43.2122 8.79607 39.6411L8.79387 39.6433L8.7925 39.642C8.75973 39.6092 8.72724 39.5763 8.69505 39.5431C8.67699 39.5253 8.65899 39.5075 8.64104 39.4895L8.63967 39.4882L8.64089 39.4869C5.06987 35.7529 5.12041 29.8307 8.79251 26.1586L16.2592 18.6919C19.9313 15.0198 25.8535 14.9693 29.5875 18.5403L29.5897 18.5381L29.5911 18.5395C29.6238 18.5722 29.6563 18.6052 29.6885 18.6383C29.7066 18.6561 29.7246 18.674 29.7426 18.6919L29.7439 18.6933L29.7427 18.6945C30.8215 19.8225 31.5698 21.1503 31.9875 22.5554L29.3825 25.1604C29.3532 23.5685 28.7458 21.9853 27.56 20.7528C25.4288 18.6759 22.2304 18.3445 19.7586 19.7586C19.7587 19.7586 19.7586 19.7587 19.7586 19.7586C19.3272 20.0055 18.9179 20.3055 18.5403 20.6587C18.4931 20.7028 18.4464 20.7478 18.4002 20.7936C18.3936 20.8002 18.387 20.8067 18.3805 20.8132" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M39.6433 8.79387L39.642 8.79251L39.5881 8.739C39.5559 8.70588 39.5234 8.67293 39.4906 8.64016L39.4892 8.6388L39.487 8.64099C35.753 5.06987 29.8307 5.12037 26.1586 8.7925L20.8505 14.1006C22.2542 13.8355 23.6976 13.8325 25.1023 14.0915L28.2799 10.9138C30.8114 8.38233 34.9032 8.36222 37.4595 10.8535C39.9207 13.4117 39.8906 17.4809 37.3693 20.0022L29.9026 27.4687C29.4816 27.8897 29.0175 28.2413 28.5244 28.5233C26.0526 29.9373 22.8541 29.6061 20.723 27.5293C19.5373 26.2967 18.9298 24.7135 18.9005 23.1216L16.2955 25.7267C16.7132 27.1318 17.4616 28.4596 18.5404 29.5876L18.5392 29.5889L18.5406 29.5902L18.5945 29.6438C18.6267 29.6769 18.6592 29.7098 18.6919 29.7426L18.6933 29.7439L18.6955 29.7417C22.4295 33.3129 28.3518 33.2623 32.024 29.5902L39.4906 22.1236C43.1627 18.4514 43.2132 12.5291 39.6421 8.79509L39.6433 8.79387Z" style={{ fill: `var(--${color})` }}/>
 <path d="M10.9138 28.2799C8.3925 30.8012 8.36242 34.8704 10.8236 37.4287C13.3799 39.9198 17.4717 39.8997 20.0031 37.3682L23.1807 34.1906C24.5854 34.4495 26.0288 34.4465 27.4325 34.1815L22.1244 39.4895C18.4523 43.1616 12.5301 43.2122 8.79607 39.6411L8.79387 39.6433L8.7925 39.642C8.75973 39.6092 8.72724 39.5763 8.69505 39.5431C8.67699 39.5253 8.65899 39.5075 8.64104 39.4895L8.63967 39.4882L8.64089 39.4869C5.06987 35.7529 5.12041 29.8307 8.79251 26.1586L16.2592 18.6919C19.9313 15.0198 25.8535 14.9693 29.5875 18.5403L29.5897 18.5381L29.5911 18.5395C29.6238 18.5722 29.6563 18.6052 29.6885 18.6383C29.7066 18.6561 29.7246 18.674 29.7426 18.6919L29.7439 18.6933L29.7427 18.6945C30.8215 19.8225 31.5698 21.1503 31.9875 22.5554L29.3825 25.1604C29.3532 23.5685 28.7458 21.9853 27.56 20.7528C25.4288 18.6759 22.2304 18.3445 19.7586 19.7586C19.7587 19.7586 19.7586 19.7587 19.7586 19.7586C19.3272 20.0055 18.9179 20.3055 18.5403 20.6587C18.4931 20.7028 18.4464 20.7478 18.4002 20.7936C18.3936 20.8002 18.387 20.8067 18.3805 20.8132" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M30.7506 30.8016C31.2173 30.4789 31.6615 30.1098 32.077 29.6943L39.5437 22.2277C43.2589 18.5124 43.267 12.4937 39.5678 8.76849L39.5666 8.76927C35.8414 5.0701 29.8227 5.07814 26.1075 8.79342L20.7993 14.1016C22.5871 13.7641 24.4393 13.8515 26.1938 14.364L28.9359 11.6218C31.0891 9.46867 34.575 9.46063 36.7382 11.5977L36.7393 11.5969C38.8764 13.7601 38.8684 17.2461 36.7152 19.3992L29.2486 26.8659C27.0954 29.0191 23.6094 29.0271 21.4463 26.89L21.4451 26.8908C21.4233 26.8687 21.35 26.8156 21.35 26.7844L21.3458 26.7876C20.4729 25.858 19.9816 24.7004 19.8719 23.5142L16.6201 26.7661C17.0801 27.8376 17.7456 28.842 18.6167 29.7192L18.6178 29.7185C20.0083 31.0992 21.8247 32.0336 23.7582 32.3562L23.7572 32.3573C26.1537 32.7571 28.674 32.2382 30.7506 30.8016Z" style={{ fill: `var(--${color})` }}/>
 <path d="M26.8388 21.4971C25.1023 19.7815 22.5132 19.4484 20.4456 20.4976C19.9693 20.7393 19.5206 21.0545 19.1165 21.4428C19.0896 21.4686 19.0627 21.495 19.0363 21.5215L11.5698 28.9879C9.41665 31.1411 9.40861 34.6271 11.5457 36.7902C13.7088 38.9273 17.195 38.9195 19.3482 36.7663L22.09 34.0244C23.8445 34.5369 25.6967 34.6243 27.4845 34.2868L22.1766 39.5947C18.4613 43.31 12.4425 43.3178 8.71725 39.6187C5.01807 35.8934 5.02612 29.8748 8.74139 26.1595L16.208 18.6928C19.9233 14.9776 25.942 14.9695 29.6672 18.6687C30.5383 19.5459 31.204 20.5505 31.664 21.6221L28.4121 24.8739C28.2984 23.6434 27.7738 22.4436 26.8388 21.4971Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M39.6433 8.79387L39.642 8.79251L39.5881 8.739C39.5559 8.70588 39.5234 8.67293 39.4906 8.64016L39.4892 8.6388L39.487 8.64099C35.753 5.06987 29.8307 5.12037 26.1586 8.7925L20.8505 14.1006C22.2542 13.8355 23.6976 13.8325 25.1023 14.0915L28.2799 10.9138C30.8114 8.38233 34.9032 8.36222 37.4595 10.8535C39.9207 13.4117 39.8906 17.4809 37.3693 20.0022L29.9026 27.4687C29.4816 27.8897 29.0175 28.2413 28.5244 28.5233C26.0526 29.9373 22.8541 29.6061 20.723 27.5293C19.5373 26.2967 18.9298 24.7135 18.9005 23.1216L16.2955 25.7267C16.7132 27.1318 17.4616 28.4596 18.5404 29.5876L18.5392 29.5889L18.5406 29.5902L18.5945 29.6438C18.6267 29.6769 18.6592 29.7098 18.6919 29.7426L18.6933 29.7439L18.6955 29.7417C22.4295 33.3129 28.3518 33.2623 32.024 29.5902L39.4906 22.1236C43.1627 18.4514 43.2132 12.5291 39.6421 8.79509L39.6433 8.79387Z" style={{ fill: `var(--${color})` }}/>
 <path d="M10.9138 28.2799C8.3925 30.8012 8.36242 34.8704 10.8236 37.4287C13.3799 39.9198 17.4717 39.8997 20.0031 37.3682L23.1807 34.1906C24.5854 34.4495 26.0288 34.4465 27.4325 34.1815L22.1244 39.4895C18.4523 43.1616 12.5301 43.2122 8.79607 39.6411L8.79387 39.6433L8.7925 39.642C8.75973 39.6092 8.72724 39.5763 8.69505 39.5431C8.67699 39.5253 8.65899 39.5075 8.64104 39.4895L8.63967 39.4882L8.64089 39.4869C5.06987 35.7529 5.12041 29.8307 8.79251 26.1586L16.2592 18.6919C19.9313 15.0198 25.8535 14.9693 29.5875 18.5403L29.5897 18.5381L29.5911 18.5395C29.6238 18.5722 29.6563 18.6052 29.6885 18.6383C29.7066 18.6561 29.7246 18.674 29.7426 18.6919L29.7439 18.6933L29.7427 18.6945C30.8215 19.8225 31.5698 21.1503 31.9875 22.5554L29.3825 25.1604C29.3532 23.5685 28.7458 21.9853 27.56 20.7528C25.4288 18.6759 22.2304 18.3445 19.7586 19.7586C19.7587 19.7586 19.7586 19.7587 19.7586 19.7586C19.3272 20.0055 18.9179 20.3055 18.5403 20.6587C18.4931 20.7028 18.4464 20.7478 18.4002 20.7936C18.3936 20.8002 18.387 20.8067 18.3805 20.8132" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/list/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface ListProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface ListProps {
   color?: BasicColorType;
 }
 
-export const List = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ListProps) => {
+export const List = forwardRef<SVGSVGElement, ListProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M8 8C6.89543 8 6 8.89543 6 10V12C6 13.1046 6.89543 14 8 14H10C11.1046 14 12 13.1046 12 12V10C12 8.89543 11.1046 8 10 8H8Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 9.5H18V12.5H39V9.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 22.5H18V25.5H39V22.5Z" style={{ fill: `var(--${color})` }}/>
@@ -19,7 +21,7 @@ export const List = ({ fill = false, thick = false, size = 24, color = 'neutral-
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M8 8C6.89543 8 6 8.89543 6 10V12C6 13.1046 6.89543 14 8 14H10C11.1046 14 12 13.1046 12 12V10C12 8.89543 11.1046 8 10 8H8Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 9.5H18V12.5H39V9.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 22.5H18V25.5H39V22.5Z" style={{ fill: `var(--${color})` }}/>
@@ -29,7 +31,7 @@ export const List = ({ fill = false, thick = false, size = 24, color = 'neutral-
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M8 8C6.89543 8 6 8.89543 6 10V12C6 13.1046 6.89543 14 8 14H10C11.1046 14 12 13.1046 12 12V10C12 8.89543 11.1046 8 10 8H8Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 9H18V13H39V9Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 22H18V26H39V22Z" style={{ fill: `var(--${color})` }}/>
@@ -40,7 +42,7 @@ export const List = ({ fill = false, thick = false, size = 24, color = 'neutral-
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M8 8C6.89543 8 6 8.89543 6 10V12C6 13.1046 6.89543 14 8 14H10C11.1046 14 12 13.1046 12 12V10C12 8.89543 11.1046 8 10 8H8Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 9.5H18V12.5H39V9.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 22.5H18V25.5H39V22.5Z" style={{ fill: `var(--${color})` }}/>
@@ -49,4 +51,5 @@ export const List = ({ fill = false, thick = false, size = 24, color = 'neutral-
 <path d="M8 34C6.89543 34 6 34.8954 6 36V38C6 39.1046 6.89543 40 8 40H10C11.1046 40 12 39.1046 12 38V36C12 34.8954 11.1046 34 10 34H8Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/literature-review/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface LiteratureReviewProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface LiteratureReviewProps {
   color?: BasicColorType;
 }
 
-export const LiteratureReview = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: LiteratureReviewProps) => {
+export const LiteratureReview = forwardRef<SVGSVGElement, LiteratureReviewProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.834 29.0088C38.2686 29.1826 41 32.0222 41 35.5L40.9912 35.835C40.9341 36.9597 40.5889 38.0075 40.0312 38.9102L45.0605 43.9395L42.9395 46.0605L37.9102 41.0312C36.9185 41.644 35.7513 42 34.5 42L34.165 41.9912C30.8418 41.8225 28.1775 39.1582 28.0088 35.835L28 35.5C28 31.9101 30.9101 29 34.5 29L34.834 29.0088ZM34.5 32C32.567 32 31 33.567 31 35.5C31 37.433 32.567 39 34.5 39C36.433 39 38 37.433 38 35.5C38 33.567 36.433 32 34.5 32Z" style={{ fill: `var(--${color})` }}/>
 <path d="M41 5C42.1046 5 43 5.89543 43 7V28.4531C42.1401 27.5419 41.1262 26.7791 40 26.2031V8H8V40H24.7529C25.1811 41.0961 25.7776 42.1076 26.5146 43H7L6.7959 42.9893C5.78722 42.887 5 42.0357 5 41V7C5 5.89543 5.89543 5 7 5H41Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.4756 30.5C24.941 31.4237 24.5375 32.4315 24.2891 33.5H14.5V30.5H25.4756Z" style={{ fill: `var(--${color})` }}/>
@@ -18,7 +20,7 @@ export const LiteratureReview = ({ fill = false, thick = false, size = 24, color
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.834 29.0088C38.2686 29.1826 41 32.0222 41 35.5L40.9912 35.835C40.9341 36.9597 40.5889 38.0075 40.0312 38.9102L45.0605 43.9395L42.9395 46.0605L37.9102 41.0312C36.9185 41.644 35.7513 42 34.5 42L34.165 41.9912C30.8418 41.8225 28.1775 39.1582 28.0088 35.835L28 35.5C28 31.9101 30.9101 29 34.5 29L34.834 29.0088ZM34.5 32C32.567 32 31 33.567 31 35.5C31 37.433 32.567 39 34.5 39C36.433 39 38 37.433 38 35.5C38 33.567 36.433 32 34.5 32Z" style={{ fill: `var(--${color})` }}/>
 <path d="M41 5C42.1046 5 43 5.89543 43 7V28.4531C42.1401 27.5419 41.1262 26.7791 40 26.2031V8H8V40H24.7529C25.1811 41.0961 25.7776 42.1076 26.5146 43H7L6.7959 42.9893C5.78722 42.887 5 42.0357 5 41V7C5 5.89543 5.89543 5 7 5H41Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.4756 30.5C24.941 31.4237 24.5375 32.4315 24.2891 33.5H14.5V30.5H25.4756Z" style={{ fill: `var(--${color})` }}/>
@@ -27,7 +29,7 @@ export const LiteratureReview = ({ fill = false, thick = false, size = 24, color
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.834 29.0088C38.2686 29.1826 41 32.0222 41 35.5L40.9912 35.835C40.9434 36.7767 40.6939 37.6649 40.2871 38.459L45.4141 43.5859L42.5859 46.4141L37.459 41.2871C36.5713 41.7419 35.566 42 34.5 42L34.165 41.9912C30.8418 41.8225 28.1775 39.1582 28.0088 35.835L28 35.5C28 31.9101 30.9101 29 34.5 29L34.834 29.0088ZM34.5 33C33.1193 33 32 34.1193 32 35.5C32 36.8807 33.1193 38 34.5 38C35.8807 38 37 36.8807 37 35.5C37 34.1193 35.8807 33 34.5 33Z" style={{ fill: `var(--${color})` }}/>
 <path d="M41 5C42.1046 5 43 5.89543 43 7V28.4531C41.8923 27.2794 40.5297 26.3505 39 25.7529V9H9V39H24.418C24.838 40.4844 25.5584 41.8422 26.5146 43H7L6.7959 42.9893C5.78722 42.887 5 42.0357 5 41V7C5 5.89543 5.89543 5 7 5H41Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.7822 30C25.0039 31.1934 24.4517 32.5462 24.1846 34H14V30H25.7822Z" style={{ fill: `var(--${color})` }}/>
@@ -37,7 +39,7 @@ export const LiteratureReview = ({ fill = false, thick = false, size = 24, color
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.834 29.0088C38.2686 29.1826 41 32.0222 41 35.5L40.9912 35.835C40.9341 36.9597 40.5889 38.0075 40.0312 38.9102L45.0605 43.9395L42.9395 46.0605L37.9102 41.0312C36.9185 41.644 35.7513 42 34.5 42L34.165 41.9912C30.8418 41.8225 28.1775 39.1582 28.0088 35.835L28 35.5C28 31.9101 30.9101 29 34.5 29L34.834 29.0088ZM34.5 32C32.567 32 31 33.567 31 35.5C31 37.433 32.567 39 34.5 39C36.433 39 38 37.433 38 35.5C38 33.567 36.433 32 34.5 32Z" style={{ fill: `var(--${color})` }}/>
 <path d="M41 5C42.1046 5 43 5.89543 43 7V28.4531C42.1401 27.5419 41.1262 26.7791 40 26.2031V8H8V40H24.7529C25.1811 41.0961 25.7776 42.1076 26.5146 43H7L6.7959 42.9893C5.78722 42.887 5 42.0357 5 41V7C5 5.89543 5.89543 5 7 5H41Z" style={{ fill: `var(--${color})` }}/>
 <path d="M25.4756 30.5C24.941 31.4237 24.5375 32.4315 24.2891 33.5H14.5V30.5H25.4756Z" style={{ fill: `var(--${color})` }}/>
@@ -45,4 +47,5 @@ export const LiteratureReview = ({ fill = false, thick = false, size = 24, color
 <path d="M33.5 17.5H14.5V14.5H33.5V17.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/lock/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';import { BasicColorType } from '@liner-fe/prism';
+import React, { forwardRef } from 'react';
+import { BasicColorType } from '@liner-fe/prism';
 
 interface LockProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface LockProps {
   color?: BasicColorType;
 }
 
-export const Lock = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: LockProps) => {
+export const Lock = forwardRef<SVGSVGElement, LockProps>(
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24.0001 30C24.5524 30 25.0001 29.5523 25.0001 29C25.0001 28.4477 24.5524 28 24.0001 28C23.4478 28 23.0001 28.4477 23.0001 29C23.0001 29.5523 23.4478 30 24.0001 30Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M10.1289 18.8711H13.4191V13.5806C13.4191 7.73712 18.1562 3 23.9997 3C29.8432 3 34.5804 7.73712 34.5804 13.5806V18.8711H37.8708C38.9754 18.8711 39.8708 19.7665 39.8708 20.8711V42.0001C39.8708 43.1047 38.9754 44.0001 37.8708 44.0001H10.1289C9.02434 44.0001 8.12891 43.1047 8.12891 42.0001V20.8711C8.12891 19.7665 9.02434 18.8711 10.1289 18.8711ZM30.5804 13.5806V18.8711H17.4191V13.5806C17.4191 9.94625 20.3653 7 23.9997 7C27.6341 7 30.5804 9.94626 30.5804 13.5806ZM27.9356 28.9677C27.9356 30.4164 27.1593 31.6836 26 32.3763V37H22V32.4139C20.8052 31.7301 20.0001 30.443 20.0001 28.9677C20.0001 26.7764 21.7765 25 23.9679 25C26.1592 25 27.9356 26.7764 27.9356 28.9677Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path d="M24 30.5C24.8284 30.5 25.5 29.8284 25.5 29C25.5 28.1716 24.8284 27.5 24 27.5C23.1716 27.5 22.5 28.1716 22.5 29C22.5 29.8284 23.1716 30.5 24 30.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M10.1289 18.8711H13.4191V13.5806C13.4191 7.73712 18.1562 3 23.9997 3C29.8432 3 34.5804 7.73712 34.5804 13.5806V18.8711H37.8708C38.9754 18.8711 39.8708 19.7665 39.8708 20.8711V42.0001C39.8708 43.1047 38.9754 44.0001 37.8708 44.0001H10.1289C9.02434 44.0001 8.12891 43.1047 8.12891 42.0001V20.8711C8.12891 19.7665 9.02434 18.8711 10.1289 18.8711ZM31.5804 13.5806V18.8711H16.4191V13.5806C16.4191 9.39397 19.813 6 23.9997 6C28.1864 6 31.5804 9.39397 31.5804 13.5806ZM27.9356 28.9677C27.9356 30.616 26.9306 32.0294 25.5 32.6289V37H22.5V32.6551C21.0353 32.0715 20.0001 30.6405 20.0001 28.9677C20.0001 26.7764 21.7765 25 23.9679 25C26.1592 25 27.9356 26.7764 27.9356 28.9677Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M26 32.3763C27.1593 31.6836 27.9356 30.4164 27.9356 28.9677C27.9356 26.7764 26.1592 25 23.9679 25C21.7765 25 20.0001 26.7764 20.0001 28.9677C20.0001 30.443 20.8052 31.7301 22 32.4139V37H26V32.3763ZM24.0001 30C24.5524 30 25.0001 29.5523 25.0001 29C25.0001 28.4477 24.5524 28 24.0001 28C23.4478 28 23.0001 28.4477 23.0001 29C23.0001 29.5523 23.4478 30 24.0001 30Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.5804 18.8708H37.8711C38.9757 18.8708 39.8711 19.7663 39.8711 20.8708V41.9999C39.8711 43.1045 38.9757 43.9999 37.8711 43.9999H10.1292C9.02458 43.9999 8.12915 43.1045 8.12915 41.9999V20.8708C8.12915 19.7663 9.02458 18.8708 10.1292 18.8708H13.4191V13.5806C13.4191 7.73712 18.1562 3 23.9997 3C29.8432 3 34.5804 7.73712 34.5804 13.5806V18.8708ZM30.5804 18.8708V13.5806C30.5804 9.94626 27.6341 7 23.9997 7C20.3653 7 17.4191 9.94625 17.4191 13.5806V18.8708H30.5804ZM35.8711 22.8708V39.9999H12.1292V22.8708H35.8711Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.5001 33.1256V37H25.5001V33.1255C26.9478 32.5339 27.9678 31.1117 27.9678 29.4511C27.9678 27.2598 26.1914 25.4834 24.0001 25.4834C21.8088 25.4834 20.0323 27.2598 20.0323 29.4511C20.0323 31.1117 21.0524 32.534 22.5001 33.1256ZM24.9678 29.4511C24.9678 29.9856 24.5346 30.4189 24.0001 30.4189C23.4656 30.4189 23.0323 29.9856 23.0323 29.4511C23.0323 28.9167 23.4656 28.4834 24.0001 28.4834C24.5346 28.4834 24.9678 28.9167 24.9678 29.4511Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9997 3C18.1562 3 13.4191 7.73712 13.4191 13.5806V18.8708H10.1292C9.02458 18.8708 8.12915 19.7663 8.12915 20.8708V41.9999C8.12915 43.1045 9.02458 43.9999 10.1292 43.9999H37.8711C38.9757 43.9999 39.8711 43.1045 39.8711 41.9999V20.8708C39.8711 19.7663 38.9757 18.8708 37.8711 18.8708H34.5804V13.5806C34.5804 7.73712 29.8432 3 23.9997 3ZM31.5804 18.8672V13.5806C31.5804 9.39397 28.1864 6 23.9997 6C19.813 6 16.4191 9.39397 16.4191 13.5806V18.8672H31.5804ZM11.1292 40.9999V21.8708H36.8711V40.9999H11.1292Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);