@liner-fe/icon 0.0.10 → 0.0.12

package/assets/chart-line-uptrend/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 ChartLineUptrendProps {
   fill?: boolean;
@@ -7,28 +8,30 @@ interface ChartLineUptrendProps {
   color?: BasicColorType;
 }
 
-export const ChartLineUptrend = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ChartLineUptrendProps) => {
+export const ChartLineUptrend = forwardRef<SVGSVGElement, ChartLineUptrendProps>(
+  ({ 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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.815 25.6003L37.6207 12.8276L33.9793 11.1724L28.1735 23.945L22.5903 18.3619C20.5435 16.3151 17.0676 17.0527 16.0285 19.7544L10.1333 35.082L13.8667 36.5179L19.7619 21.1903L25.3451 26.7735C27.3199 28.7483 30.6593 28.1428 31.815 25.6003Z" 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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.3598 25.3934L37.1655 12.6207L34.4344 11.3793L28.6287 24.152C28.4842 24.4698 28.0668 24.5455 27.8199 24.2986L22.2368 18.7155C20.4458 16.9245 17.4044 17.5699 16.4952 19.9339L10.6 35.2615L13.4 36.3384L19.2952 21.0108C19.4251 20.6731 19.8596 20.5809 20.1155 20.8368L25.6986 26.4199C27.4266 28.1479 30.3486 27.618 31.3598 25.3934Z" 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="M5 6V39C5 41.2091 6.79086 43 9 43H42V39H9V6H5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M35.2173 23.7995L41.0231 11.0268L37.3816 9.37158L31.5758 22.1443L25.9927 16.5611C23.9459 14.5143 20.47 15.2519 19.4309 17.9536L13.5356 33.2812L17.269 34.7171L23.1643 19.3895L28.7474 24.9727C30.7222 26.9475 34.0616 26.342 35.2173 23.7995Z" 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="M5.5 6V39C5.5 40.933 7.067 42.5 9 42.5H42V39.5H9C8.72386 39.5 8.5 39.2761 8.5 39V6H5.5Z" style={{ fill: `var(--${color})` }}/>
 <path d="M34.7621 23.5926L40.5679 10.8199L37.8368 9.57851L32.031 22.3512C31.8866 22.669 31.4691 22.7447 31.2223 22.4978L25.6391 16.9147C23.8482 15.1237 20.8068 15.7692 19.8976 18.1331L14.0023 33.4608L16.8024 34.5377L22.6976 19.2101C22.8275 18.8724 23.262 18.7802 23.5178 19.036L29.101 24.6192C30.8289 26.3471 33.7509 25.8173 34.7621 23.5926Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/check-mark/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 CheckMarkProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface CheckMarkProps {
   color?: BasicColorType;
 }
 
-export const CheckMark = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CheckMarkProps) => {
+export const CheckMark = forwardRef<SVGSVGElement, CheckMarkProps>(
+  ({ 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 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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="M9.76642 19.9372L20.3116 30.4824L37.9306 12.9249L40.7541 15.7582L23.1351 33.3158C21.5722 34.8732 19.0434 34.871 17.4832 33.3108L6.93799 22.7656L9.76642 19.9372Z" 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="M9.41307 20.2908L19.9583 30.836C20.1533 31.031 20.4694 31.0313 20.6648 30.8366L38.2837 13.2791L40.4013 15.4041L22.7824 32.9616C21.4148 34.3244 19.2021 34.3225 17.8369 32.9573L7.29175 22.4121L9.41307 20.2908Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/check-mark-fill/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 CheckMarkFillProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface CheckMarkFillProps {
   color?: BasicColorType;
 }
 
-export const CheckMarkFill = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CheckMarkFillProps) => {
+export const CheckMarkFill = forwardRef<SVGSVGElement, CheckMarkFillProps>(
+  ({ 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="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 24Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.4293 21.3317L22.6156 27.518L33.296 16.8748L36.1195 19.7082L25.439 30.3514C23.8762 31.9088 21.3473 31.9066 19.7871 30.3465L13.6008 24.1602L16.4293 21.3317Z" fill="white"/>
 </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}>
 <circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" fill="white"/>
 </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}>
 <circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" fill="white"/>
 </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}>
 <circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" fill="white"/>
 </svg>
 ;
-};
+  }
+);

package/assets/chrome/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 ChromeProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface ChromeProps {
   color?: BasicColorType;
 }
 
-export const Chrome = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ChromeProps) => {
+export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
+  ({ 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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
@@ -17,7 +19,7 @@ export const Chrome = ({ fill = false, thick = false, size = 24, color = 'neutra
 </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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
@@ -25,7 +27,7 @@ export const Chrome = ({ fill = false, thick = false, size = 24, color = 'neutra
 </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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
@@ -34,11 +36,12 @@ export const Chrome = ({ fill = false, thick = false, size = 24, color = 'neutra
 ;
   } 
   
-  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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
 <path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/clock/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 ClockProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface ClockProps {
   color?: BasicColorType;
 }
 
-export const Clock = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ClockProps) => {
+export const Clock = forwardRef<SVGSVGElement, ClockProps>(
+  ({ 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 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="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 24Z" 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.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/close/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 CloseProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface CloseProps {
   color?: BasicColorType;
 }
 
-export const Close = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CloseProps) => {
+export const Close = forwardRef<SVGSVGElement, CloseProps>(
+  ({ 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="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 24ZM24.0304 21.2242L29.6689 15.5858L32.4973 18.4142L26.8588 24.0527L32.4504 29.6443L29.622 32.4727L24.0304 26.8811L18.4859 32.4256L15.6574 29.5972L21.202 24.0527L15.6106 18.4613L18.439 15.6329L24.0304 21.2242Z" 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="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 24ZM24.0304 21.9314L30.0224 15.9393L32.1437 18.0607L26.1517 24.0527L32.0969 29.9978L29.9756 32.1192L24.0304 26.174L18.1323 32.0721L16.011 29.9508L21.9091 24.0527L15.9641 18.1077L18.0855 15.9864L24.0304 21.9314Z" 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.0006 21.1712L12.4153 9.58594L9.58692 12.4144L21.1722 23.9997L9.58691 35.585L12.4153 38.4134L24.0006 26.8281L35.5859 38.4134L38.4144 35.585L26.8291 23.9997L38.4144 12.4144L35.5859 9.58594L24.0006 21.1712Z" 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.0006 21.8783L12.0618 9.93945L9.94043 12.0608L21.8793 23.9996L9.94043 35.9385L12.0618 38.0598L24.0006 26.1209L35.9395 38.0598L38.0608 35.9385L26.1219 23.9996L38.0608 12.0608L35.9395 9.93946L24.0006 21.8783Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
-};
+  }
+);

package/assets/close-fill/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 CloseFillProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface CloseFillProps {
   color?: BasicColorType;
 }
 
-export const CloseFill = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CloseFillProps) => {
+export const CloseFill = forwardRef<SVGSVGElement, CloseFillProps>(
+  ({ 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="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 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </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="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 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </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="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 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </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="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 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </svg>
 ;
-};
+  }
+);

package/assets/color-docx/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 ColorDocxProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface ColorDocxProps {
   color?: BasicColorType;
 }
 
-export const ColorDocx = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ColorDocxProps) => {
+export const ColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
+  ({ 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="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>
@@ -19,7 +21,7 @@ export const ColorDocx = ({ 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 fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>
@@ -29,7 +31,7 @@ export const ColorDocx = ({ 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 fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>
@@ -40,7 +42,7 @@ export const ColorDocx = ({ 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 fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>
@@ -49,4 +51,5 @@ export const ColorDocx = ({ fill = false, thick = false, size = 24, color = 'neu
 <path d="M6.13256 44.0009C6.06515 44.0009 6.00449 43.9807 5.95056 43.9403C5.91011 43.8863 5.88989 43.8257 5.88989 43.7583V30.088C5.88989 30.0206 5.91011 29.9667 5.95056 29.9263C6.00449 29.8723 6.06515 29.8454 6.13256 29.8454H9.79278C11.0196 29.8454 12.0037 30.2026 12.7452 30.9171C13.4867 31.6317 13.8574 32.5821 13.8574 33.7685V40.0778C13.8574 41.2642 13.4867 42.2146 12.7452 42.9291C12.0037 43.6437 11.0196 44.0009 9.79278 44.0009H6.13256ZM8.74123 41.4529C8.74123 41.5203 8.77493 41.554 8.84234 41.554L9.75234 41.5338C10.1163 41.5203 10.4129 41.3653 10.6421 41.0687C10.8713 40.7721 10.9926 40.3811 11.0061 39.8958V33.9505C11.0061 33.4382 10.8915 33.0337 10.6623 32.7371C10.4332 32.4406 10.1231 32.2923 9.73211 32.2923H8.84234C8.77493 32.2923 8.74123 32.326 8.74123 32.3934V41.4529Z" fill="white"/>
 </svg>
 ;
-};
+  }
+);

package/assets/color-facebook/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 ColorFacebookProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface ColorFacebookProps {
   color?: BasicColorType;
 }
 
-export const ColorFacebook = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ColorFacebookProps) => {
+export const ColorFacebook = forwardRef<SVGSVGElement, ColorFacebookProps>(
+  ({ 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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </svg>
 ;
-};
+  }
+);

package/assets/color-fire/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 ColorFireProps {
   fill?: boolean;
@@ -7,30 +8,32 @@ interface ColorFireProps {
   color?: BasicColorType;
 }
 
-export const ColorFire = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ColorFireProps) => {
+export const ColorFire = forwardRef<SVGSVGElement, ColorFireProps>(
+  ({ 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="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </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="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </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="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </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="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </svg>
 ;
-};
+  }
+);

package/assets/color-google/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 ColorGoogleProps {
   fill?: boolean;
@@ -7,9 +8,10 @@ interface ColorGoogleProps {
   color?: BasicColorType;
 }
 
-export const ColorGoogle = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ColorGoogleProps) => {
+export const ColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
+  ({ 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.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -17,7 +19,7 @@ export const ColorGoogle = ({ fill = false, thick = false, size = 24, color = 'n
 </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.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -25,7 +27,7 @@ export const ColorGoogle = ({ fill = false, thick = false, size = 24, color = 'n
 </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="M41.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -34,11 +36,12 @@ export const ColorGoogle = ({ fill = false, thick = false, size = 24, color = 'n
 ;
   } 
   
-  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.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
 <path d="M7.0203 15.4691L13.3662 20.3904C13.3671 20.3877 13.368 20.3851 13.3688 20.3824V20.3906C12.9888 21.5307 12.7729 22.7484 12.7729 24.0007C12.7729 25.253 12.9888 26.4708 13.3688 27.6108L7.02096 32.5337C5.73411 29.9686 5 27.0667 5 24.0007C5 20.9352 5.73386 18.0338 7.0203 15.4691Z" fill="#FBBC05"/>
 </svg>
 ;
-};
+  }
+);

package/assets/color-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 ColorLinerProps {
   fill?: boolean;
@@ -7,26 +8,28 @@ interface ColorLinerProps {
   color?: BasicColorType;
 }
 
-export const ColorLiner = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ColorLinerProps) => {
+export const ColorLiner = forwardRef<SVGSVGElement, ColorLinerProps>(
+  ({ 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.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </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.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </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.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </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.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </svg>
 ;
-};
+  }
+);