@ssa-ui-kit/core 0.0.36-alpha → 1.0.1

package/dist/styles/safari-focus-outline.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Theme, SerializedStyles } from '@emotion/react';
 type OutlineFn = (theme: Theme, color?: keyof Theme['colors'], borderRadius?: string, borderStyle?: React.CSSProperties['borderStyle']) => SerializedStyles;
 export declare const focusOutline: OutlineFn;

package/dist/types/emotion.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type RGBString = `rgb${string}`;
 type MakeColors<T extends Array<string>> = {
     [K in T[number]]?: RGBString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.36-alpha",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,8 +29,8 @@
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.2-alpha"
+    "@ssa-ui-kit/hooks": "^1.0.0",
+    "@ssa-ui-kit/utils": "^1.0.0"
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",

package/src/components/Icon/Icon.tsx

@@ -1,7 +1,15 @@
 import { IconProps } from './types';
 import IconsMap from './icons';
 
-const Icon = ({ name, color = '#000', size, ...props }: IconProps) => {
-  return <IconsMap name={name} color={color} size={size} {...props} />;
+const Icon = ({ name, color = '#000', size, tooltip, ...props }: IconProps) => {
+  return (
+    <IconsMap
+      name={name}
+      color={color}
+      size={size}
+      tooltip={tooltip}
+      {...props}
+    />
+  );
 };
 export default Icon;

package/src/components/Icon/icons/Archive.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Archive = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+export const Archive = ({
+  fill = '#000',
+  size = 15,
+  tooltip = 'Archive',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Archive = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     viewBox="0 0 15 15"
     fill="none"
     {...props}>
-    <title>Archive</title>
+    <title>{tooltip}</title>
     <g clipPath="url(#clip0_532_12720)">
       <path
         d="M12.5 14.2188H2.5C2.04426 14.2184 1.60728 14.0372 1.28503 13.715C0.96277 13.3927 0.781581 12.9557 0.78125 12.5V5C0.78125 4.87568 0.830636 4.75645 0.918544 4.66854C1.00645 4.58064 1.12568 4.53125 1.25 4.53125H13.75C13.8743 4.53125 13.9936 4.58064 14.0815 4.66854C14.1694 4.75645 14.2188 4.87568 14.2188 5V12.5C14.2184 12.9557 14.0372 13.3927 13.715 13.715C13.3927 14.0372 12.9557 14.2184 12.5 14.2188ZM1.71875 5.46875V12.5C1.71908 12.7071 1.8015 12.9056 1.94794 13.0521C2.09438 13.1985 2.2929 13.2809 2.5 13.2813H12.5C12.7071 13.2809 12.9056 13.1985 13.0521 13.0521C13.1985 12.9056 13.2809 12.7071 13.2813 12.5V5.46875H1.71875Z"
@@ -34,3 +39,5 @@ export const Archive = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     </defs>
   </svg>
 );
+
+export const ICON_NAME = 'archive';

package/src/components/Icon/icons/ArrowDown.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const ArrowDown = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const ArrowDown = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Arrow Down',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,7 +13,7 @@ export const ArrowDown = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}>
-    <title>Arrow Down</title>
+    <title>{tooltip}</title>
     <path
       d="M3.1779 7.07707L3.1779 0.922729"
       stroke={fill}
@@ -25,3 +30,5 @@ export const ArrowDown = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'arrow-down';

package/src/components/Icon/icons/ArrowUp.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const ArrowUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const ArrowUp = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Arrow Up',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,7 +13,7 @@ export const ArrowUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}>
-    <title>Arrow Up</title>
+    <title>{tooltip}</title>
     <path
       d="M3.17757 0.92293L3.17757 7.07727"
       stroke={fill}
@@ -25,3 +30,5 @@ export const ArrowUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'arrow-up';

package/src/components/Icon/icons/Attention.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Attention = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Attention = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Attention',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Attention = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Attention</title>
+    <title>{tooltip}</title>
     <path
       d="M10 1.90479L2.85718 6.1905V13.8095L10 18.5715L17.1429 13.8095V6.1905L10 1.90479Z"
       stroke={fill}
@@ -21,3 +26,5 @@ export const Attention = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'attention';

package/src/components/Icon/icons/BanUser.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const BanUser = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const BanUser = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Ban User',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const BanUser = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     viewBox="0 0 15 15"
     fill="none"
     {...props}>
-    <title>Ban User</title>
+    <title>{tooltip}</title>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
@@ -33,3 +38,5 @@ export const BanUser = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'ban-user';

package/src/components/Icon/icons/Bin.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Bin = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+export const Bin = ({
+  fill = '#000',
+  size = 15,
+  tooltip = 'Bin',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Bin = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     viewBox="0 0 15 15"
     fill="none"
     {...props}>
-    <title>Bin</title>
+    <title>{tooltip}</title>
     <path
       d="M9.14062 11.1328C9.39947 11.1328 9.60938 10.9229 9.60938 10.6641V5.97656C9.60938 5.71772 9.39947 5.50781 9.14062 5.50781C8.88178 5.50781 8.67188 5.71772 8.67188 5.97656V10.6641C8.67188 10.9229 8.88178 11.1328 9.14062 11.1328Z"
       fill={fill}
@@ -27,3 +32,5 @@ export const Bin = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'bin';

package/src/components/Icon/icons/Calendar.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Calendar = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Calendar = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Calendar',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,10 +13,12 @@ export const Calendar = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Calendar</title>
+    <title>{tooltip}</title>
     <path
       d="M3.61111 0C1.6267 0 0 1.6267 0 3.61111V16.3889C0 18.3733 1.6267 20 3.61111 20H16.3889C18.3733 20 20 18.3733 20 16.3889V3.61111C20 1.6267 18.3733 0 16.3889 0H3.61111ZM3.61111 1.66667H16.3889C17.4723 1.66667 18.3333 2.52774 18.3333 3.61111V4.44444H1.66667V3.61111C1.66667 2.52774 2.52774 1.66667 3.61111 1.66667ZM1.66667 6.11111H18.3333V16.3889C18.3333 17.4723 17.4723 18.3333 16.3889 18.3333H3.61111C2.52774 18.3333 1.66667 17.4723 1.66667 16.3889V6.11111ZM5.27778 8.33333C4.90942 8.33333 4.55615 8.47966 4.29569 8.74013C4.03522 9.0006 3.88889 9.35387 3.88889 9.72222C3.88889 10.0906 4.03522 10.4438 4.29569 10.7043C4.55615 10.9648 4.90942 11.1111 5.27778 11.1111C5.64613 11.1111 5.9994 10.9648 6.25987 10.7043C6.52034 10.4438 6.66667 10.0906 6.66667 9.72222C6.66667 9.35387 6.52034 9.0006 6.25987 8.74013C5.9994 8.47966 5.64613 8.33333 5.27778 8.33333ZM10 8.33333C9.63164 8.33333 9.27837 8.47966 9.01791 8.74013C8.75744 9.0006 8.61111 9.35387 8.61111 9.72222C8.61111 10.0906 8.75744 10.4438 9.01791 10.7043C9.27837 10.9648 9.63164 11.1111 10 11.1111C10.3684 11.1111 10.7216 10.9648 10.9821 10.7043C11.2426 10.4438 11.3889 10.0906 11.3889 9.72222C11.3889 9.35387 11.2426 9.0006 10.9821 8.74013C10.7216 8.47966 10.3684 8.33333 10 8.33333ZM14.7222 8.33333C14.3539 8.33333 14.0006 8.47966 13.7401 8.74013C13.4797 9.0006 13.3333 9.35387 13.3333 9.72222C13.3333 10.0906 13.4797 10.4438 13.7401 10.7043C14.0006 10.9648 14.3539 11.1111 14.7222 11.1111C15.0906 11.1111 15.4438 10.9648 15.7043 10.7043C15.9648 10.4438 16.1111 10.0906 16.1111 9.72222C16.1111 9.35387 15.9648 9.0006 15.7043 8.74013C15.4438 8.47966 15.0906 8.33333 14.7222 8.33333ZM5.27778 13.3333C4.90942 13.3333 4.55615 13.4797 4.29569 13.7401C4.03522 14.0006 3.88889 14.3539 3.88889 14.7222C3.88889 15.0906 4.03522 15.4438 4.29569 15.7043C4.55615 15.9648 4.90942 16.1111 5.27778 16.1111C5.64613 16.1111 5.9994 15.9648 6.25987 15.7043C6.52034 15.4438 6.66667 15.0906 6.66667 14.7222C6.66667 14.3539 6.52034 14.0006 6.25987 13.7401C5.9994 13.4797 5.64613 13.3333 5.27778 13.3333ZM10 13.3333C9.63164 13.3333 9.27837 13.4797 9.01791 13.7401C8.75744 14.0006 8.61111 14.3539 8.61111 14.7222C8.61111 15.0906 8.75744 15.4438 9.01791 15.7043C9.27837 15.9648 9.63164 16.1111 10 16.1111C10.3684 16.1111 10.7216 15.9648 10.9821 15.7043C11.2426 15.4438 11.3889 15.0906 11.3889 14.7222C11.3889 14.3539 11.2426 14.0006 10.9821 13.7401C10.7216 13.4797 10.3684 13.3333 10 13.3333Z"
       fill={fill}
     />
   </svg>
 );
+
+export const ICON_NAME = 'calendar';

package/src/components/Icon/icons/CarrotDown.tsx

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const CarrotDown = ({
   fill = '#000',
   size = 24,
+  tooltip = 'Carrot down',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,7 +13,7 @@ export const CarrotDown = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Carrot down</title>
+    <title>{tooltip}</title>
     <path
       d="M17 1L9 9L1 1"
       stroke={fill}
@@ -23,3 +24,5 @@ export const CarrotDown = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'carrot-down';

package/src/components/Icon/icons/CarrotLeft.tsx

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const CarrotLeft = ({
   fill = '#000',
   size = 24,
+  tooltip = 'Carrot left',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,7 +13,7 @@ export const CarrotLeft = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Carrot left</title>
+    <title>{tooltip}</title>
     <path
       d="M9.5 0.999999L1.5 9L9.5 17"
       stroke={fill}
@@ -23,3 +24,5 @@ export const CarrotLeft = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'carrot-left';

package/src/components/Icon/icons/CarrotRight.tsx

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const CarrotRight = ({
   fill = '#000',
   size = 24,
+  tooltip = 'Carrot right',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,7 +13,7 @@ export const CarrotRight = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Carrot right</title>
+    <title>{tooltip}</title>
     <path
       d="M1.5 0.999999L9.5 9L1.5 17"
       stroke={fill}
@@ -23,3 +24,5 @@ export const CarrotRight = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'carrot-right';

package/src/components/Icon/icons/CarrotUp.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const CarrotUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const CarrotUp = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Carrot up',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,7 +13,7 @@ export const CarrotUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Carrot up</title>
+    <title>{tooltip}</title>
     <path
       d="M17 9.5L9 1.5L1 9.5"
       stroke={fill}
@@ -19,3 +24,5 @@ export const CarrotUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'carrot-up';

package/src/components/Icon/icons/Change.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Change = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+export const Change = ({
+  fill = '#000',
+  size = 15,
+  tooltip = 'Change',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,10 +13,12 @@ export const Change = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     viewBox="0 0 15 15"
     fill="none"
     {...props}>
-    <title>Change</title>
+    <title>{tooltip}</title>
     <path
       d="M4.3628 1.24246C4.20043 1.2473 4.04632 1.31518 3.93312 1.43169L1.43311 3.93289C1.37491 3.99095 1.32874 4.05988 1.29723 4.13582C1.26573 4.21175 1.24951 4.29316 1.24951 4.37537C1.24951 4.45758 1.26573 4.53898 1.29723 4.61492C1.32874 4.69085 1.37491 4.75979 1.43311 4.81785L3.93312 7.31911C3.99087 7.37893 4.05998 7.42662 4.1364 7.4594C4.21283 7.49217 4.29502 7.50939 4.37817 7.51C4.46132 7.51062 4.54376 7.49464 4.62066 7.463C4.69755 7.43136 4.76736 7.38463 4.826 7.32567C4.88463 7.26671 4.93092 7.19671 4.96213 7.11964C4.99335 7.04257 5.00888 6.95999 5.0078 6.87685C5.00673 6.7937 4.98907 6.71159 4.95588 6.63535C4.92268 6.55911 4.8746 6.49028 4.81446 6.43285L3.38258 4.99857H13.1238C13.2897 4.99857 13.4488 4.93265 13.5662 4.81532C13.6835 4.698 13.7494 4.53884 13.7494 4.37292C13.7494 4.20699 13.6835 4.04791 13.5662 3.93058C13.4488 3.81325 13.2897 3.74733 13.1238 3.74733H3.38868L4.81446 2.31788C4.90548 2.23039 4.96787 2.11734 4.99342 1.9937C5.01897 1.87006 5.00647 1.74158 4.95759 1.62518C4.9087 1.50878 4.82571 1.4099 4.71954 1.34158C4.61337 1.27326 4.489 1.23873 4.3628 1.24246ZM10.6189 7.49364C10.4953 7.49464 10.3747 7.53226 10.2725 7.60177C10.1703 7.67128 10.091 7.76955 10.0446 7.88414C9.99819 7.99873 9.98683 8.12455 10.0119 8.2456C10.037 8.36665 10.0974 8.47752 10.1856 8.56423L11.6199 9.99973H1.87623C1.71284 10.0033 1.55734 10.0708 1.44306 10.1876C1.32877 10.3044 1.26477 10.4613 1.26477 10.6247C1.26477 10.7882 1.32877 10.9451 1.44306 11.062C1.55734 11.1788 1.71284 11.2462 1.87623 11.2498H11.6162L10.1856 12.6841C10.1201 12.7401 10.067 12.8091 10.0295 12.8866C9.99196 12.9641 9.97088 13.0486 9.96756 13.1347C9.96424 13.2208 9.97874 13.3066 10.0102 13.3868C10.0416 13.467 10.0893 13.5399 10.1502 13.6009C10.2111 13.6618 10.2839 13.7094 10.3641 13.7409C10.4444 13.7723 10.5302 13.7868 10.6163 13.7835C10.7024 13.7801 10.7868 13.759 10.8644 13.7215C10.9419 13.684 11.0109 13.6309 11.0669 13.5655L13.5669 11.0654C13.6833 10.9483 13.7487 10.7899 13.7487 10.6247C13.7487 10.4596 13.6833 10.3012 13.5669 10.1841L11.0669 7.68287C11.0087 7.623 10.939 7.57537 10.8621 7.54287C10.7851 7.51038 10.7024 7.49364 10.6189 7.49364Z"
       fill={fill}
     />
   </svg>
 );
+
+export const ICON_NAME = 'change';

package/src/components/Icon/icons/Chart.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Chart = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+export const Chart = ({
+  fill = '#000',
+  size = 15,
+  tooltip = 'Chart',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Chart = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     viewBox="0 0 22 22"
     fill="none"
     {...props}>
-    <title>Chart</title>
+    <title>{tooltip}</title>
     <g clipPath="url(#clip0_2353_10249)">
       <path
         d="M15.9118 19.3153L15.9119 19.3152C16.1279 19.1374 16.1629 18.8202 15.9915 18.5992L15.9914 18.5991L10.2667 11.2396V2.24969C10.2667 1.96446 10.0352 1.73301 9.75 1.73301C4.8614 1.73301 0.9 6.08572 0.9 11.4163C0.9 16.7557 5.24395 21.0997 10.5833 21.0997C11.771 21.0997 12.6938 20.9922 13.526 20.7137C14.359 20.4349 15.0948 19.987 15.9118 19.3153ZM10.5833 20.0664C5.81355 20.0664 1.93332 16.1861 1.93332 11.4164C1.93332 6.83058 5.17123 3.0801 9.23332 2.78478V11.4164C9.23332 11.531 9.27152 11.6427 9.34279 11.7337C9.34284 11.7338 9.3429 11.7338 9.34295 11.7339L14.8604 18.8277C14.2411 19.2904 13.6698 19.5955 13.0225 19.7874C12.346 19.9879 11.5811 20.0664 10.5833 20.0664Z"
@@ -36,3 +41,5 @@ export const Chart = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     </defs>
   </svg>
 );
+
+export const ICON_NAME = 'chart';

package/src/components/Icon/icons/Check.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Check = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Check = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Check',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Check = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Check</title>
+    <title>{tooltip}</title>
     <path
       d="M1 3.83L3.83 6.66L9.5 1"
       stroke={fill}
@@ -19,3 +24,5 @@ export const Check = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'check';

package/src/components/Icon/icons/CheckCircle.tsx

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const CheckCircle = ({
   fill = '#000',
   size = 24,
+  tooltip = 'Check circle',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,7 +13,7 @@ export const CheckCircle = ({
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}>
-    <title>Check circle</title>
+    <title>{tooltip}</title>
     <path
       d="M10.0003 18.3334C14.5837 18.3334 18.3337 14.5834 18.3337 10.0001C18.3337 5.41675 14.5837 1.66675 10.0003 1.66675C5.41699 1.66675 1.66699 5.41675 1.66699 10.0001C1.66699 14.5834 5.41699 18.3334 10.0003 18.3334Z"
       stroke={fill}
@@ -29,3 +30,5 @@ export const CheckCircle = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'check-circle';

package/src/components/Icon/icons/Circle.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Circle = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Circle = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Circle',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Circle = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     viewBox="0 0 20 21"
     fill="#fff"
     {...props}>
-    <title>Circle</title>
+    <title>{tooltip}</title>
     <rect x="0.7" y="1.39995" width="18.6" height="18.6" rx="9.3" fill="none" />
     <rect
       x="0.7"
@@ -21,3 +26,5 @@ export const Circle = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'circle';

package/src/components/Icon/icons/Circular.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Circular = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+export const Circular = ({
+  fill = '#000',
+  size = 15,
+  tooltip = 'Circular',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Circular = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     viewBox="0 0 13 13"
     fill="none"
     {...props}>
-    <title>Circular</title>
+    <title>{tooltip}</title>
     <path
       d="M1.7289 2.42862C2.85955 1.1478 4.51389 0.339844 6.35182 0.339844C9.63351 0.339844 12.3206 2.92225 12.4987 6.16175L12.4988 6.16265C12.5036 6.23476 12.494 6.3071 12.4707 6.37549C12.4473 6.44388 12.4106 6.50695 12.3627 6.56106C12.3148 6.61516 12.2566 6.65921 12.1915 6.69067C12.1264 6.72213 12.0558 6.74036 11.9836 6.74431C11.9115 6.74827 11.8392 6.73786 11.7711 6.7137C11.703 6.68953 11.6404 6.65209 11.5868 6.60355C11.5333 6.555 11.4899 6.49631 11.4592 6.43089C11.4285 6.36546 11.4111 6.29459 11.408 6.22239L11.408 6.22146C11.261 3.54808 9.06488 1.43217 6.35182 1.43217C4.89837 1.43217 3.59436 2.04214 2.67134 3.01702L2.54667 3.14869L3.54297 3.1487L3.54408 3.14868C3.61645 3.14766 3.68831 3.16103 3.75547 3.18802C3.82263 3.21501 3.88376 3.25507 3.9353 3.30589C3.98684 3.35671 4.02777 3.41726 4.05571 3.48404C4.08364 3.55081 4.09803 3.62247 4.09803 3.69485C4.09803 3.76723 4.08364 3.8389 4.05571 3.90567C4.02777 3.97244 3.98684 4.033 3.9353 4.08382C3.88376 4.13463 3.82263 4.1747 3.75547 4.20169C3.68831 4.22868 3.61645 4.24204 3.54408 4.24102H0.500058L0.500066 1.1981L0.500051 1.19703C0.498071 1.05227 0.553642 0.912645 0.654554 0.808833C0.755465 0.705021 0.893461 0.645517 1.03822 0.643395C1.11125 0.642326 1.18375 0.655912 1.25143 0.68335C1.31911 0.710788 1.38061 0.75152 1.43227 0.803137C1.48394 0.854755 1.52473 0.916209 1.55223 0.983866C1.57974 1.05152 1.59339 1.12401 1.59239 1.19703V2.58327L1.7289 2.42862Z"
       fill={fill}
@@ -19,3 +24,5 @@ export const Circular = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'circular';

package/src/components/Icon/icons/Clock.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Clock = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+export const Clock = ({
+  fill = '#000',
+  size = 15,
+  tooltip = 'Clock',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Clock = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     viewBox="0 0 24 24"
     fill="none"
     {...props}>
-    <title>Clock</title>
+    <title>{tooltip}</title>
     <circle
       cx="12.1001"
       cy="12.1001"
@@ -30,3 +35,5 @@ export const Clock = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'clock';

package/src/components/Icon/icons/Cogwheel.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Cogwheel = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Cogwheel = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Cogwheel',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Cogwheel = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     viewBox="0 0 24 24"
     fill="none"
     {...props}>
-    <title>Cogwheel</title>
+    <title>{tooltip}</title>
     <path
       d="M10.353 1.11378C10.4393 1.04038 10.549 1.00006 10.6624 1H13.2928C13.4055 0.999874 13.5146 1.03954 13.6009 1.11199C13.6872 1.18445 13.7451 1.28505 13.7645 1.39606L14.2652 4.25815C14.8255 4.42339 15.358 4.64665 15.8597 4.9223L18.2146 3.22877C18.3067 3.16244 18.4193 3.13101 18.5324 3.14008C18.6455 3.14915 18.7517 3.19813 18.832 3.27828L19.0161 3.46223L17.7061 4.77221L16.2053 5.8508C16.1292 5.90547 16.0387 5.93656 15.945 5.94022C15.8513 5.94387 15.7587 5.91992 15.6785 5.87135C15.0789 5.50835 14.422 5.23205 13.7225 5.05775C13.6327 5.03524 13.5514 4.98717 13.4884 4.91935C13.4254 4.85154 13.3834 4.7669 13.3675 4.6757L12.8911 1.95652H11.0696L10.6278 4.65982C10.6128 4.75239 10.5708 4.8385 10.5072 4.90742C10.4436 4.97635 10.3611 5.02505 10.27 5.04747C9.56944 5.21926 8.90803 5.49292 8.30749 5.8536C8.22764 5.90158 8.1355 5.9252 8.04241 5.92155C7.94932 5.9179 7.85932 5.88714 7.78346 5.83305L5.55376 4.23947L4.26376 5.52853L5.83492 7.77412C5.88805 7.85015 5.91793 7.93999 5.92092 8.0327C5.9239 8.12541 5.89987 8.21699 5.85174 8.29628C5.48675 8.90026 5.20981 9.55998 5.03346 10.2654C5.01085 10.3558 4.96229 10.4377 4.89375 10.501C4.8252 10.5642 4.73967 10.606 4.64768 10.6213L1.95653 11.0687V12.893L4.64955 13.3713C4.74041 13.3874 4.82464 13.4296 4.8921 13.4925C4.95956 13.5555 5.00735 13.6367 5.02973 13.7262C5.20457 14.4292 5.48164 15.089 5.848 15.6944C5.89651 15.7744 5.92051 15.8668 5.91702 15.9603C5.91353 16.0537 5.88272 16.1441 5.82838 16.2203L4.74825 17.7301L3.46083 19.0175L3.27548 18.832C3.19567 18.7519 3.14681 18.6462 3.13758 18.5335C3.12835 18.4208 3.15933 18.3085 3.22504 18.2165L4.89895 15.8747C4.62081 15.3684 4.39781 14.8317 4.232 14.268L1.39419 13.7655C1.28353 13.7457 1.18337 13.6876 1.11128 13.6013C1.0392 13.515 0.999799 13.4061 1 13.2937V10.6633C0.99999 10.5502 1.04005 10.4408 1.11307 10.3544C1.18609 10.2681 1.28734 10.2104 1.39887 10.1916L4.2348 9.71986C4.40152 9.15522 4.62594 8.61883 4.90362 8.1132L3.25026 5.74805C3.18566 5.65596 3.15558 5.54404 3.16532 5.43197C3.17506 5.3199 3.22399 5.21485 3.3035 5.13528L5.16424 3.27641C5.24433 3.1966 5.3501 3.14775 5.46279 3.13851C5.57548 3.12928 5.68779 3.16026 5.77981 3.22597L8.13001 4.90455C8.63271 4.63109 9.16609 4.41153 9.72546 4.24881L10.1906 1.40073C10.209 1.28887 10.2666 1.18717 10.353 1.11378Z"
       fill={fill}
@@ -81,3 +86,5 @@ export const Cogwheel = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'cogwheel';

package/src/components/Icon/icons/ConfirmEmail.tsx

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const ConfirmEmail = ({
   fill = '#000',
   size = 15,
+  tooltip = 'Confirm Email',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,7 +13,7 @@ export const ConfirmEmail = ({
     width={`${size}px`}
     height={`${size}px`}
     {...props}>
-    <title>Confirm Email</title>
+    <title>{tooltip}</title>
     <path
       d="M12.5811 9.43434C12.7511 9.2647 13.0263 9.26494 13.196 9.43488C13.3656 9.60482 13.3654 9.8801 13.1954 10.0497L11.4771 11.7651C11.3073 11.9346 11.0322 11.9345 10.8625 11.7648L10.0048 10.9071C9.83505 10.7373 9.83505 10.4621 10.0048 10.2923C10.1746 10.1225 10.4499 10.1225 10.6197 10.2923L11.1437 10.8163C11.1583 10.8309 11.1821 10.8309 11.1967 10.8163L12.5811 9.43434Z"
       fill={fill}
@@ -25,3 +26,5 @@ export const ConfirmEmail = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'confirm-email';

package/src/components/Icon/icons/Copy.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Copy = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+export const Copy = ({
+  fill = '#000',
+  size = 15,
+  tooltip = 'Copy',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Copy = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     viewBox="0 0 15 15"
     fill="none"
     {...props}>
-    <title>Copy</title>
+    <title>{tooltip}</title>
     <g clipPath="url(#clip0_532_12716)">
       <path
         d="M12.8755 14.5239H5.40479C4.49601 14.5239 3.75684 13.7848 3.75684 12.876V5.40527C3.75684 4.4965 4.49601 3.75732 5.40479 3.75732H12.8755C13.7843 3.75732 14.5234 4.4965 14.5234 5.40527V12.876C14.5234 13.7848 13.7843 14.5239 12.8755 14.5239ZM5.40479 4.85596C5.10189 4.85596 4.85547 5.10238 4.85547 5.40527V12.876C4.85547 13.1789 5.10189 13.4253 5.40479 13.4253H12.8755C13.1784 13.4253 13.4248 13.1789 13.4248 12.876V5.40527C13.4248 5.10238 13.1784 4.85596 12.8755 4.85596H5.40479ZM2.6582 10.1294H2.10889C1.80599 10.1294 1.55957 9.88297 1.55957 9.58008V2.10938C1.55957 1.80648 1.80599 1.56006 2.10889 1.56006H9.57959C9.88249 1.56006 10.1289 1.80648 10.1289 2.10938V2.63123H11.2275V2.10938C11.2275 1.2006 10.4884 0.461426 9.57959 0.461426H2.10889C1.20011 0.461426 0.460938 1.2006 0.460938 2.10938V9.58008C0.460938 10.4889 1.20011 11.228 2.10889 11.228H2.6582V10.1294Z"
@@ -22,3 +27,5 @@ export const Copy = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
     </defs>
   </svg>
 );
+
+export const ICON_NAME = 'copy';

package/src/components/Icon/icons/Cross.tsx

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Cross = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Cross = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Cross',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Cross = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Cross</title>
+    <title>{tooltip}</title>
     <path
       d="M1 6.66L6.66 1"
       stroke={fill}
@@ -26,3 +31,5 @@ export const Cross = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'cross';