@liner-fe/icon 0.0.9 → 0.0.11

package/assets/move/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 MoveProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface MoveProps {
   color?: BasicColorType;
 }
 
-export const Move = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MoveProps) => {
+export const Move = forwardRef<SVGSVGElement, MoveProps>(
+  ({ 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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="M36.2224 21.0002L27.4022 29.8203L30.2306 32.6487L41 21.8794C42.5621 20.3173 42.5621 17.7846 41 16.2225L30.2306 5.45312L27.4022 8.28155L36.1208 17.0002H10C7.79086 17.0002 6 18.791 6 21.0002V42.5002H10V21.0002H36.2224Z" 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/move-to-folder/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 MoveToFolderProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface MoveToFolderProps {
   color?: BasicColorType;
 }
 
-export const MoveToFolder = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: MoveToFolderProps) => {
+export const MoveToFolder = forwardRef<SVGSVGElement, MoveToFolderProps>(
+  ({ 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 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(--${color})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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 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(--${color})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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 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(--${color})` }}/>
 <path d="M22.373 22.7227C23.7291 24.079 23.7283 26.2785 22.3721 27.6348L16.2354 33.7715L13.4072 30.9434L17.1719 27.1777L4.5 27.1787V23.1787L17.1709 23.1777L13.4072 19.4141L16.2354 16.5859L22.373 22.7227Z" 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="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(--${color})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/new-chrome-extension/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 NewChromeExtensionProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface NewChromeExtensionProps {
   color?: BasicColorType;
 }
 
-export const NewChromeExtension = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewChromeExtensionProps) => {
+export const NewChromeExtension = forwardRef<SVGSVGElement, NewChromeExtensionProps>(
+  ({ 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM10 34H38V22H29C27.8954 22 27 21.1046 27 20V15H10V34Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/new-tab/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 NewTabProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface NewTabProps {
   color?: BasicColorType;
 }
 
-export const NewTab = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewTabProps) => {
+export const NewTab = forwardRef<SVGSVGElement, NewTabProps>(
+  ({ 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/new-thread/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 NewThreadProps {
   fill?: boolean;
@@ -7,28 +8,30 @@ interface NewThreadProps {
   color?: BasicColorType;
 }
 
-export const NewThread = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewThreadProps) => {
+export const NewThread = forwardRef<SVGSVGElement, NewThreadProps>(
+  ({ 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="M41 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20 18.001H15V26.001H20V31.001H28V26.001H33.001V18.001H28V13H20V18.001Z" style={{ fill: `var(--${color})` }} stroke="#1E1E1F" stroke-width="4"/>
 </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="M41 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20.5 18.501H15V25.501H20.5V31.001H27.5V25.501H33.001V18.501H27.5V13H20.5V18.501Z" style={{ fill: `var(--${color})` }} stroke="#1E1E1F" stroke-width="4"/>
 </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="M21.9998 20.001V15H25.9998V20.001H31.0006V24.001H25.9998V29.0007H21.9998V24.001H17V20.001H21.9998Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM32.6667 33V37.9585L25.2083 33H9V11H39V33H32.6667Z" 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="M22.4998 20.501V15H25.4998V20.501H31.0006V23.501H25.4998V29.0007H22.4998V23.501H17V20.501H22.4998Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM33.6667 34V39.8241L24.9062 34H8V10H40V34H33.6667Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/new-thread-folder/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 NewThreadFolderProps {
   fill?: boolean;
@@ -7,23 +8,24 @@ interface NewThreadFolderProps {
   color?: BasicColorType;
 }
 
-export const NewThreadFolder = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: NewThreadFolderProps) => {
+export const NewThreadFolder = forwardRef<SVGSVGElement, NewThreadFolderProps>(
+  ({ 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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${color})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" 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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${color})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" 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.5 26.5H34V30.5H30.5V34H26.5V30.5H23V26.5H26.5V23H30.5V26.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM18 36H31.042L34.2773 38.1504V36H39V21H18V36Z" style={{ fill: `var(--${color})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7L6.7959 30.9893C6.73278 30.9829 6.67062 30.9731 6.60938 30.9609C6.58365 30.9558 6.55857 30.9485 6.5332 30.9424C6.49943 30.9343 6.4657 30.9268 6.43262 30.917C6.40458 30.9087 6.37711 30.8991 6.34961 30.8896C6.31696 30.8784 6.28479 30.8664 6.25293 30.8535C6.2296 30.8441 6.20648 30.8345 6.18359 30.8242C6.14988 30.8091 6.11668 30.7933 6.08398 30.7764C6.06169 30.7648 6.03937 30.7535 6.01758 30.7412C5.98558 30.7231 5.9547 30.7034 5.92383 30.6836C5.90297 30.6702 5.88165 30.6577 5.86133 30.6436C5.83552 30.6256 5.81104 30.606 5.78613 30.5869C5.64546 30.4791 5.51978 30.3536 5.41211 30.2129C5.39787 30.1943 5.38273 30.1763 5.36914 30.1572L5.3418 30.1182C5.33239 30.1042 5.32449 30.0894 5.31543 30.0752C5.29568 30.0443 5.27588 30.0135 5.25781 29.9814C5.24551 29.9596 5.23416 29.9373 5.22266 29.915C5.20579 29.8823 5.18989 29.8491 5.1748 29.8154C5.16456 29.7925 5.1549 29.7694 5.14551 29.7461C5.13268 29.7142 5.12058 29.6821 5.10938 29.6494C5.09993 29.6219 5.0903 29.5944 5.08203 29.5664C5.07228 29.5333 5.0647 29.4996 5.05664 29.4658C5.05059 29.4405 5.04317 29.4154 5.03809 29.3896C5.02607 29.3288 5.0171 29.2668 5.01074 29.2041L5 29V7C5 6.86559 5.01378 6.73439 5.03906 6.60742C5.04338 6.58575 5.0487 6.56438 5.05371 6.54297C5.06342 6.50149 5.07369 6.46036 5.08594 6.41992C5.09293 6.39681 5.10157 6.37431 5.10938 6.35156C5.12221 6.31413 5.13445 6.27663 5.14941 6.24023C5.1584 6.21837 5.16898 6.19725 5.17871 6.17578C5.19469 6.14055 5.21059 6.10539 5.22852 6.07129C5.2423 6.04504 5.25756 6.01968 5.27246 5.99414C5.28848 5.9667 5.305 5.93967 5.32227 5.91309C5.33748 5.88965 5.35299 5.86649 5.36914 5.84375C5.39032 5.81394 5.41183 5.78442 5.43457 5.75586C5.4507 5.73559 5.46749 5.7159 5.48438 5.69629C5.50846 5.66833 5.53302 5.64084 5.55859 5.61426C5.57551 5.59666 5.59281 5.57947 5.61035 5.5625C5.6372 5.53655 5.66509 5.51173 5.69336 5.4873C5.71364 5.46977 5.73391 5.45226 5.75488 5.43555C5.78146 5.41438 5.80926 5.39482 5.83691 5.375C5.85988 5.35853 5.88257 5.34168 5.90625 5.32617C5.93398 5.30802 5.96255 5.2912 5.99121 5.27441C6.01711 5.25924 6.04271 5.24352 6.06934 5.22949C6.09739 5.21473 6.12646 5.20193 6.15527 5.18848C6.18402 5.17505 6.21272 5.16149 6.24219 5.14941C6.26855 5.13861 6.29535 5.12883 6.32227 5.11914C6.35425 5.10761 6.38623 5.09586 6.41895 5.08594C6.46537 5.07187 6.51276 5.06052 6.56055 5.0498C6.57331 5.04694 6.58578 5.04266 6.59863 5.04004C6.66326 5.02688 6.72916 5.01751 6.7959 5.01074L7 5H18.5L21.5 9Z" style={{ fill: `var(--${color})` }}/>
@@ -31,10 +33,11 @@ export const NewThreadFolder = ({ 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 d="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${color})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/palette/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 PaletteProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface PaletteProps {
   color?: BasicColorType;
 }
 
-export const Palette = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PaletteProps) => {
+export const Palette = forwardRef<SVGSVGElement, PaletteProps>(
+  ({ 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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${color})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${color})` }}/>
@@ -18,7 +20,7 @@ export const Palette = ({ fill = false, thick = false, size = 24, color = 'neutr
 </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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${color})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${color})` }}/>
@@ -27,7 +29,7 @@ export const Palette = ({ fill = false, thick = false, size = 24, color = 'neutr
 </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="M28 17.5C29.3807 17.5 30.5 16.3807 30.5 15C30.5 13.6193 29.3807 12.5 28 12.5C26.6193 12.5 25.5 13.6193 25.5 15C25.5 16.3807 26.6193 17.5 28 17.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22.5 15.5C22.5 16.8807 21.3807 18 20 18C18.6193 18 17.5 16.8807 17.5 15.5C17.5 14.1193 18.6193 13 20 13C21.3807 13 22.5 14.1193 22.5 15.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M17.5 21.5C17.5 22.8807 16.3807 24 15 24C13.6193 24 12.5 22.8807 12.5 21.5C12.5 20.1193 13.6193 19 15 19C16.3807 19 17.5 20.1193 17.5 21.5Z" style={{ fill: `var(--${color})` }}/>
@@ -37,7 +39,7 @@ export const Palette = ({ fill = false, thick = false, size = 24, color = 'neutr
 ;
   } 
   
-  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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${color})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${color})` }}/>
@@ -45,4 +47,5 @@ export const Palette = ({ fill = false, thick = false, size = 24, color = 'neutr
 <path fillRule="evenodd" clipRule="evenodd" d="M27.9204 36.4506C28.4065 38.4878 29.1486 41.5973 24 44C14 45.5 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 46 12 44 24C41.649 34.1875 34.0781 34.2421 30.1904 34.2702C29.1171 34.2779 28.3245 34.2837 28 34.5C27.5297 34.8135 27.6984 35.5202 27.9204 36.4506ZM38.3295 28.8576C39.3742 27.8182 40.4081 26.161 41.0556 23.4163C41.8324 18.5758 40.0581 14.6 36.8796 11.7248C33.6094 8.76667 28.8457 7 24 7C14.6112 7 7 14.6112 7 24C7 28.6424 9.12152 33.2842 12.3872 36.5993C15.5413 39.8012 19.4495 41.4753 23.127 41.0878C24.3566 40.4557 24.8391 39.9023 25.033 39.5915C25.2234 39.2864 25.2886 38.9752 25.2571 38.5189C25.2284 38.1024 25.1557 37.7992 25.0491 37.3547C24.995 37.1291 24.9322 36.8671 24.862 36.5356C24.7863 36.1781 24.6522 35.5057 24.7171 34.7834C24.7944 33.9231 25.1837 32.772 26.3359 32.0038C26.9151 31.6177 27.5018 31.4773 27.8225 31.415C28.1844 31.3448 28.5412 31.3153 28.8312 31.2994C29.248 31.2766 29.7619 31.2729 30.2374 31.2696C30.3886 31.2685 30.5367 31.2675 30.6759 31.2658C31.964 31.2508 33.3401 31.1882 34.6975 30.8427C36.0234 30.5052 37.27 29.9116 38.3295 28.8576Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/paperclip/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 PaperclipProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface PaperclipProps {
   color?: BasicColorType;
 }
 
-export const Paperclip = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PaperclipProps) => {
+export const Paperclip = forwardRef<SVGSVGElement, PaperclipProps>(
+  ({ 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.9774 24.3215C9.58143 27.7175 9.58143 33.2234 12.9774 36.6193C16.3733 40.0153 21.8792 40.0153 25.2752 36.6194L38.9684 22.9261L41.7969 25.7545L28.1036 39.4478C23.1456 44.4058 15.107 44.4058 10.149 39.4478C5.19091 34.4897 5.19091 26.4512 10.149 21.4931L24.0147 7.62741C27.5804 4.06169 33.3615 4.0617 36.9272 7.62741C40.493 11.1931 40.493 16.9743 36.9272 20.54L23.3239 34.1433C21.1008 36.3664 17.4965 36.3664 15.2733 34.1433C13.0502 31.9202 13.0502 28.3158 15.2733 26.0927L28.7042 12.6619L31.5326 15.4903L18.1018 28.9212C17.4408 29.5822 17.4408 30.6539 18.1018 31.3149C18.7628 31.9759 19.8345 31.9759 20.4955 31.3149L34.0988 17.7116C36.1024 15.708 36.1024 12.4595 34.0988 10.4558C32.0952 8.45222 28.8467 8.45222 26.8431 10.4558L12.9774 24.3215Z" 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/paragraph/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 ParagraphProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface ParagraphProps {
   color?: BasicColorType;
 }
 
-export const Paragraph = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ParagraphProps) => {
+export const Paragraph = forwardRef<SVGSVGElement, ParagraphProps>(
+  ({ 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 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${color})` }}/>
@@ -17,7 +19,7 @@ export const Paragraph = ({ 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="M39 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${color})` }}/>
@@ -25,7 +27,7 @@ export const Paragraph = ({ 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="M39 7H9V11H39V7Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 17H9V21H39V17Z" style={{ fill: `var(--${color})` }}/>
 <path d="M9 27H39V31H9V27Z" style={{ fill: `var(--${color})` }}/>
@@ -34,11 +36,12 @@ export const Paragraph = ({ 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="M39 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M27 37.5H9V40.5H27V37.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/paraphrase/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 ParaphraseProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface ParaphraseProps {
   color?: BasicColorType;
 }
 
-export const Paraphrase = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ParaphraseProps) => {
+export const Paraphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
+  ({ 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="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${color})` }}/>
@@ -17,7 +19,7 @@ export const Paraphrase = ({ fill = false, thick = false, size = 24, color = 'ne
 </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="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${color})` }}/>
@@ -25,7 +27,7 @@ export const Paraphrase = ({ fill = false, thick = false, size = 24, color = 'ne
 </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="M31 6H7V10H31V6Z" style={{ fill: `var(--${color})` }}/>
 <path d="M31 15H7V19H31V15Z" style={{ fill: `var(--${color})` }}/>
 <path d="M7 24H21V28H7V24Z" style={{ fill: `var(--${color})` }}/>
@@ -34,11 +36,12 @@ export const Paraphrase = ({ fill = false, thick = false, size = 24, color = 'ne
 ;
   } 
   
-  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="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.6086 18.123C40.369 16.8834 38.3592 16.8837 37.12 18.1237L21.3592 33.8838C21.0062 34.2367 20.7414 34.6679 20.5864 35.1423L19.1837 39.435C18.3845 41.8809 20.6754 44.2111 23.1344 43.4535L27.5043 42.1074C27.9985 41.9551 28.4481 41.6844 28.8138 41.3188L44.5661 25.5671C45.8048 24.3277 45.8045 22.3189 44.5654 21.0799L41.6086 18.123ZM23.4803 36.0054L34.9998 24.4883L38.2018 27.6905L26.6927 39.1972C26.6727 39.2172 26.6481 39.232 26.6211 39.2403L22.2512 40.5865C22.2038 40.6011 22.1759 40.5972 22.1573 40.5921C22.1332 40.5855 22.1036 40.5699 22.0765 40.5423C22.0493 40.5147 22.0343 40.4849 22.0281 40.4607C22.0233 40.442 22.0199 40.414 22.0353 40.3669L23.438 36.0742C23.4465 36.0482 23.461 36.0247 23.4803 36.0054ZM42.4442 23.4464L40.3229 25.569L37.1209 22.3667L39.242 20.2444C39.3097 20.1766 39.4195 20.1766 39.4873 20.2443L42.4441 23.2012C42.5118 23.2689 42.5119 23.3787 42.4442 23.4464Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/pencil/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 PencilProps {
   fill?: boolean;
@@ -7,27 +8,29 @@ interface PencilProps {
   color?: BasicColorType;
 }
 
-export const Pencil = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PencilProps) => {
+export const Pencil = forwardRef<SVGSVGElement, PencilProps>(
+  ({ 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.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" 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="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L37.938 19.3987L28.7471 10.2086L31.7619 7.19394Z" style={{ fill: `var(--${color})` }}/>
 <path d="M26.6257 12.3298L10.6377 28.3172C10.2484 28.7065 9.95639 29.182 9.7854 29.7053L7.77292 35.8639C6.89145 38.5614 9.41812 41.1314 12.1302 40.2959L18.3957 38.3658C18.9408 38.1979 19.4366 37.8993 19.8399 37.496L35.8167 21.52L26.6257 12.3298Z" 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.408 6.8405C32.97 5.2775 35.5034 5.27707 37.0658 6.83954L41.3066 11.0803C42.8683 12.642 42.8688 15.174 41.3076 16.7362L20.1933 37.8496C19.7323 38.3105 19.1657 38.6517 18.5428 38.8436L12.2772 40.7738C9.1777 41.7286 6.29008 38.7915 7.29747 35.7086L9.30995 29.5499C9.50536 28.9519 9.83908 28.4085 10.284 27.9637L31.408 6.8405ZM28.7484 15.1595L13.1121 30.7924L11.0996 36.951L17.3651 35.0209L32.989 19.4004L28.7484 15.1595ZM35.8171 16.5717L38.4782 13.9087L34.2374 9.66797L31.5765 12.3307L35.8171 16.5717Z" 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.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/person/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 PersonProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface PersonProps {
   color?: BasicColorType;
 }
 
-export const Person = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: PersonProps) => {
+export const Person = forwardRef<SVGSVGElement, PersonProps>(
+  ({ 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" 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 20C28.1422 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1422 5 24 5C19.8579 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8579 20 24 20Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22 22C14.8203 22 9 27.8203 9 35V41C9 42.1046 9.89543 43 11 43H37C38.1046 43 39 42.1046 39 41V35C39 27.8203 33.1797 22 26 22H22Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 26H26C30.9706 26 35 30.0294 35 35V39H13V35C13 30.0294 17.0294 26 22 26Z" 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.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);