@ssa-ui-kit/core 1.0.0 → 1.0.2

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": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Routes, Route, MemoryRouter } from 'react-router-dom';
-import { Meta } from '@storybook/react';
-import { Title, Description, Source } from '@storybook/addon-docs';
+import { Meta, StoryObj } from '@storybook/react';
+import { Title, Description, Subtitle, Stories } from '@storybook/addon-docs';
 
 import { DecoratorFunction } from '@storybook/types';
 import { CollapsibleNavBar } from '../CollapsibleNavBar';
@@ -35,11 +35,17 @@ export default {
   parameters: {
     layout: 'fullscreen',
     docs: {
+      source: {
+        type: 'code',
+      },
       page: () => (
         <Fragment>
           <Title />
+          <Subtitle />
           <Description />
-          <Source code={`<CollapsibleNavBar />`} />
+          <div css={{ height: 300 }}>
+            <Stories />
+          </div>
         </Fragment>
       ),
     },
@@ -54,26 +60,42 @@ export default {
   },
 } as Meta<typeof CollapsibleNavBar>;
 
-export const Default = {};
+export const Default: StoryObj<typeof CollapsibleNavBar> = () => {
+  return (
+    <CollapsibleNavBar
+      items={ITEMS}
+      renderLogo={<Logo />}
+      onChange={(isChecked) => {
+        console.log('>>>onChange', isChecked);
+      }}
+    />
+  );
+};
 
-export const WithCustomIcon = {
-  title: 'With Custom Icon',
-  component: CollapsibleNavBar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    items: [
-      ...ITEMS,
-      {
-        path: 'custom',
-        CustomIcon,
-        title: 'Item with custom icon',
-      },
-    ],
-    renderLogo: <Logo />,
-    onChange: (isChecked) => {
-      console.log('>>>onChange', isChecked);
-    },
-  },
-} as Meta<typeof CollapsibleNavBar>;
+Default.args = {};
+
+export const WithCustomIcon: Meta<typeof CollapsibleNavBar> = () => {
+  return (
+    <CollapsibleNavBar
+      items={[
+        ...ITEMS,
+        {
+          path: 'custom',
+          CustomIcon,
+          title: 'Item with custom icon',
+          iconSize: 22,
+          iconName: 'archive',
+        },
+      ]}
+      renderLogo={<Logo />}
+      onChange={(isChecked) => {
+        console.log('>>>onChange', isChecked);
+      }}
+    />
+  );
+};
+
+WithCustomIcon.title = 'With Custom Icon';
+WithCustomIcon.parameters = {
+  layout: 'fullscreen',
+};

package/src/components/CollapsibleNavBar/stories/Layout.tsx

@@ -36,7 +36,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
       }}>
       {children}
       <Main>
-        {new Array(100).fill(1).map((_, index) => (
+        {new Array(30).fill(1).map((_, index) => (
           <NotificationCard
             key={index}
             title="CyberVeinToken is Now Available"

package/src/components/Filters/Filters.tsx

@@ -74,7 +74,7 @@ export const Filters = ({
         <FilterBlockWrapper>
           <FiltersBlock />
         </FilterBlockWrapper>
-        <Wrapper css={{ width: 110 }}>
+        <Wrapper css={{ width: 110, zIndex: 1 }}>
           <TableFilters
             {...useTableDataResult}
             checkboxData={hiddenCheckboxData}

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';