@ssa-ui-kit/core 1.0.0 → 1.0.2

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

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Diet = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Diet = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Diet',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,10 +13,12 @@ export const Diet = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Diet</title>
+    <title>{tooltip}</title>
     <path
       d="M15.3794 1.6875C15.3294 1.68734 15.2788 1.69189 15.2278 1.70215C14.1195 1.92375 13.0319 2.82406 12.4431 3.96241C8.37168 4.3361 5.25 9.29549 5.25 15.5625C5.25 19.2844 8.27812 22.3125 12 22.3125C15.7219 22.3125 18.75 19.2844 18.75 15.5625C18.75 13.7303 18.0635 12.4566 17.3994 11.2251C16.7443 10.009 16.125 8.86013 16.125 7.125C16.125 5.77573 15.2807 4.62307 14.094 4.1587C14.5181 3.61873 15.077 3.26196 15.5222 3.17286C15.9283 3.09186 16.1917 2.69641 16.1104 2.29029C16.0395 1.93493 15.7292 1.68864 15.3794 1.6875ZM12.9441 5.43824C13.8714 5.4419 14.625 6.19689 14.625 7.125C14.625 9.2385 15.3982 10.6714 16.0796 11.9363C16.7077 13.1018 17.25 14.1086 17.25 15.5625C17.25 18.4575 14.895 20.8125 12 20.8125C9.105 20.8125 6.75 18.4575 6.75 15.5625C6.75 10.0089 9.49693 5.4871 12.884 5.4397C12.9054 5.44185 12.9236 5.43802 12.9441 5.43824ZM12 11.4375C10.2319 11.4375 9 13.6247 9 15.5874C9 17.5599 10.2337 18.9375 12 18.9375C13.7662 18.9375 15 17.5599 15 15.5874C15 13.6247 13.7681 11.4375 12 11.4375ZM12 12.9375C12.6611 12.9375 13.5 14.1849 13.5 15.5874C13.5 16.7109 12.9113 17.4375 12 17.4375C11.0887 17.4375 10.5 16.7109 10.5 15.5874C10.5 14.1849 11.3389 12.9375 12 12.9375Z"
       fill={fill}
     />
   </svg>
 );
+
+export const ICON_NAME = 'diet';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Edit = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Edit = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Edit',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Edit = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Edit</title>
+    <title>{tooltip}</title>
     <g id="Edit">
       <g id="Union">
         <path
@@ -28,3 +33,5 @@ export const Edit = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     </g>
   </svg>
 );
+
+export const ICON_NAME = 'edit';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Email = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Email = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Email',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Email = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Email</title>
+    <title>{tooltip}</title>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
@@ -18,3 +23,5 @@ export const Email = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'email';

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

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

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Home = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Home = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Home',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,10 +13,12 @@ export const Home = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Home</title>
+    <title>{tooltip}</title>
     <path
       d="M8.97559 0.250119C8.81566 0.25558 8.66168 0.312041 8.53613 0.411252L1.42969 6.00988C0.527739 6.7207 0 7.80687 0 8.9552V18.5001C0 19.1819 0.568203 19.7501 1.25 19.7501H6.25C6.9318 19.7501 7.5 19.1819 7.5 18.5001V13.5001C7.5 13.3526 7.60248 13.2501 7.75 13.2501H10.25C10.3975 13.2501 10.5 13.3526 10.5 13.5001V18.5001C10.5 19.1819 11.0682 19.7501 11.75 19.7501H16.75C17.4318 19.7501 18 19.1819 18 18.5001V8.9552C18 7.80687 17.4723 6.7207 16.5703 6.00988L9.46387 0.411252C9.32518 0.301689 9.15225 0.244623 8.97559 0.250119ZM9 1.9552L15.6426 7.1886C16.1846 7.61578 16.5 8.26552 16.5 8.9552V18.2501H12V13.5001C12 12.5426 11.2075 11.7501 10.25 11.7501H7.75C6.79252 11.7501 6 12.5426 6 13.5001V18.2501H1.5V8.9552C1.5 8.26552 1.81537 7.61578 2.35742 7.1886L9 1.9552Z"
       fill={fill}
     />
   </svg>
 );
+
+export const ICON_NAME = 'home';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Import = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Import = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Import',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Import = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Import</title>
+    <title>{tooltip}</title>
     <g id="box-arrow-in-down">
       <path
         id="box-arrow-bg"
@@ -29,3 +34,5 @@ export const Import = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     </g>
   </svg>
 );
+
+export const ICON_NAME = 'import';

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

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const Information = ({
   fill = '#000',
   size = 24,
+  tooltip = 'Information',
   ...props
 }: SVGProps) => (
   <svg
@@ -13,7 +14,7 @@ export const Information = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Information</title>
+    <title>{tooltip}</title>
     <path
       d="M9.99998 17.8889C14.3651 17.8889 17.9365 14.3175 17.9365 9.95238C17.9365 5.5873 14.3651 2.01587 9.99998 2.01587C5.6349 2.01587 2.06348 5.5873 2.06348 9.95238C2.06348 14.3175 5.6349 17.8889 9.99998 17.8889Z"
       stroke={fill}
@@ -27,3 +28,5 @@ export const Information = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'information';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Invisible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Invisible = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Invisible',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Invisible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Invisible</title>
+    <title>{tooltip}</title>
     <path
       d="M14.5299 9.46992L9.46992 14.5299C8.81992 13.8799 8.41992 12.9899 8.41992 11.9999C8.41992 10.0199 10.0199 8.41992 11.9999 8.41992C12.9899 8.41992 13.8799 8.81992 14.5299 9.46992Z"
       stroke={fill}
@@ -54,3 +59,5 @@ export const Invisible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'invisible';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Lock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Lock = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Lock',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,10 +14,12 @@ export const Lock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Lock</title>
+    <title>{tooltip}</title>
     <path
       d="M13.625 8.41602H13V5.91602C13 3.15852 10.7575 0.916016 8 0.916016C5.2425 0.916016 3 3.15852 3 5.91602V8.41602H2.375C1.34167 8.41602 0.5 9.25685 0.5 10.291V19.041C0.5 20.0752 1.34167 20.916 2.375 20.916H13.625C14.6583 20.916 15.5 20.0752 15.5 19.041V10.291C15.5 9.25685 14.6583 8.41602 13.625 8.41602ZM4.66667 5.91602C4.66667 4.07768 6.16167 2.58268 8 2.58268C9.83833 2.58268 11.3333 4.07768 11.3333 5.91602V8.41602H4.66667V5.91602ZM8.83333 14.851V16.7493C8.83333 17.2093 8.46083 17.5827 8 17.5827C7.53917 17.5827 7.16667 17.2093 7.16667 16.7493V14.851C6.67083 14.5618 6.33333 14.0302 6.33333 13.416C6.33333 12.4968 7.08083 11.7493 8 11.7493C8.91917 11.7493 9.66667 12.4968 9.66667 13.416C9.66667 14.0302 9.32917 14.5618 8.83333 14.851Z"
       fill={fill}
     />
   </svg>
 );
+
+export const ICON_NAME = 'lock';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const LogIn = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const LogIn = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Log in',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const LogIn = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Log in</title>
+    <title>{tooltip}</title>
     <path
       d="M7.39504 9.17067C8.58623 9.17067 9.61771 8.74344 10.4605 7.90051C11.3033 7.05773 11.7305 6.02652 11.7305 4.8352C11.7305 3.64428 11.3033 2.61294 10.4604 1.76988C9.61743 0.92723 8.58609 0.5 7.39504 0.5C6.20371 0.5 5.17251 0.92723 4.32972 1.77002C3.48694 2.6128 3.05957 3.64414 3.05957 4.8352C3.05957 6.02652 3.48694 7.05786 4.32986 7.90065C5.17279 8.7433 6.20413 9.17067 7.39504 9.17067Z"
       fill={fill}
@@ -20,3 +25,5 @@ export const LogIn = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'log-in';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const LogOut = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const LogOut = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Log out',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const LogOut = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Log out</title>
+    <title>{tooltip}</title>
     <path
       d="M7.9751 13.7292H2.36876C2.0249 13.7292 1.74585 13.4502 1.74585 13.1063V1.89369C1.74585 1.54983 2.02493 1.27078 2.36876 1.27078H7.9751C8.31957 1.27078 8.59801 0.992344 8.59801 0.647871C8.59801 0.303398 8.31957 0.0249023 7.9751 0.0249023H2.36876C1.33845 0.0249023 0.5 0.863379 0.5 1.89369V13.1063C0.5 14.1366 1.33845 14.9751 2.36876 14.9751H7.9751C8.31957 14.9751 8.59801 14.6966 8.59801 14.3522C8.59801 14.0077 8.31957 13.7292 7.9751 13.7292Z"
       fill={fill}
@@ -20,3 +25,5 @@ export const LogOut = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'log-out';

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

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const Measurements = ({
   fill = '#000',
   size = 24,
+  tooltip = 'Measurements',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,7 +13,7 @@ export const Measurements = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Measurements</title>
+    <title>{tooltip}</title>
     <path
       d="M8.8254 2C5 2 2 3.60317 2 5.65079V13.5873C2 15.2222 3.95238 16.6349 6.84127 17.0794H6.92064C7.15873 17.0794 7.34921 16.9048 7.39683 16.6825C7.44444 16.4286 7.25397 16.1745 7 16.1428C4.65079 15.7777 2.95238 14.6984 2.95238 13.5873V7.53974C4.12698 8.60324 6.30159 9.30159 8.8254 9.30159H19.1429C20.1905 9.30159 21.0476 10.1587 21.0476 11.2063C21.0476 12.254 20.1905 13.1111 19.1429 13.1111H10.4127C9.26984 13.1111 8.34921 14.0317 8.34921 15.1746V19.9365C8.34921 21.0794 9.26984 22 10.4127 22H19.1429C20.7143 22 22 20.7143 22 19.1429V11.2063C22 9.63492 20.7143 8.34921 19.1429 8.34921H8.8254C5.31746 8.34921 2.95238 6.95238 2.95238 5.65079C2.95238 4.34921 5.31746 2.95238 8.8254 2.95238C12.3333 2.95238 14.6984 4.34921 14.6984 5.65079V6.92064C14.6984 7.19048 14.9048 7.39683 15.1746 7.39683C15.4444 7.39683 15.6508 7.19048 15.6508 6.92064V5.65079C15.6508 3.60317 12.6508 2 8.8254 2ZM8.8254 4.85714C8.40442 4.85714 8.00068 4.94076 7.70301 5.0896C7.40533 5.23844 7.2381 5.4403 7.2381 5.65079C7.2381 5.86128 7.40533 6.06315 7.70301 6.21199C8.00068 6.36083 8.40442 6.44444 8.8254 6.44444C9.24638 6.44444 9.65011 6.36083 9.94779 6.21199C10.2455 6.06315 10.4127 5.86128 10.4127 5.65079C10.4127 5.4403 10.2455 5.23844 9.94779 5.0896C9.65011 4.94076 9.24638 4.85714 8.8254 4.85714ZM21.0476 13.3334V19.1429C21.0476 20.1905 20.1905 21.0476 19.1429 21.0476H10.4127C9.79365 21.0476 9.30159 20.5556 9.30159 19.9365V15.1746C9.30159 14.5556 9.79365 14.0635 10.4127 14.0635H13.1111V15.9683C13.1111 16.2381 13.3175 16.4444 13.5873 16.4444C13.8571 16.4444 14.0635 16.2381 14.0635 15.9683V14.0635H17.873V15.9683C17.873 16.2381 18.0794 16.4444 18.3492 16.4444C18.619 16.4444 18.8254 16.2381 18.8254 15.9683V14.0635H19.1429C19.873 14.0635 20.5397 13.7937 21.0476 13.3334Z"
       fill={fill}
@@ -21,3 +22,5 @@ export const Measurements = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'measurements';

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

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

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const More = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const More = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'More',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,7 +13,7 @@ export const More = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>More</title>
+    <title>{tooltip}</title>
     <path
       d="M5.4001 10.2C4.4101 10.2 3.6001 11.01 3.6001 12C3.6001 12.99 4.4101 13.8 5.4001 13.8C6.3901 13.8 7.2001 12.99 7.2001 12C7.2001 11.01 6.3901 10.2 5.4001 10.2Z"
       fill={fill}
@@ -23,3 +28,5 @@ export const More = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'more';

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

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const MoreVertical = ({
   fill = '#000',
   size = 24,
+  tooltip = 'More vertical',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,9 +13,11 @@ export const MoreVertical = ({
     viewBox="0 0 4 16"
     fill="none"
     {...props}>
-    <title>More vertical</title>
+    <title>{tooltip}</title>
     <circle cx="1.66016" cy="2" r="1.5" fill={fill} />
     <circle cx="1.66016" cy="8" r="1.5" fill={fill} />
     <circle cx="1.66016" cy="14" r="1.5" fill={fill} />
   </svg>
 );
+
+export const ICON_NAME = 'more-vertical';

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

@@ -3,6 +3,7 @@ import { SVGProps } from '@components/Icon/types';
 export const Notification = ({
   fill = '#000',
   size = 24,
+  tooltip = 'Notification',
   ...props
 }: SVGProps) => (
   <svg
@@ -12,7 +13,7 @@ export const Notification = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Notification</title>
+    <title>{tooltip}</title>
     <path
       d="M0.776752 7.36345C0.819992 7.37426 0.865032 7.37966 0.908271 7.37966C1.14969 7.37966 1.37129 7.21572 1.43255 6.97069C1.9334 4.96728 3.12608 3.19267 4.78899 1.97837C5.0304 1.80181 5.08265 1.46491 4.90609 1.22349C4.72953 0.98207 4.39263 0.929823 4.15121 1.10638C2.28472 2.47022 0.946106 4.45922 0.383997 6.70946C0.31013 6.99772 0.48669 7.29138 0.776752 7.36345ZM15.2114 1.97837C16.8743 3.19267 18.0652 4.96548 18.5679 6.97069C18.6291 7.21572 18.8489 7.37966 19.0921 7.37966C19.1354 7.37966 19.1804 7.37426 19.2237 7.36345C19.5137 7.29138 19.6885 6.99772 19.6164 6.70765C19.0543 4.45922 17.7157 2.46842 15.8492 1.10458C15.6078 0.928021 15.2709 0.980269 15.0943 1.22169C14.9178 1.46491 14.97 1.80181 15.2114 1.97837ZM1.92799 15.3879C1.75144 16.0924 1.90638 16.8256 2.35498 17.3967C2.80179 17.9697 3.4756 18.2976 4.20165 18.2976H6.80681C7.06445 19.8289 8.39765 21 10.0011 21C11.6046 21 12.936 19.8289 13.1954 18.2976H15.8006C16.5266 18.2976 17.2004 17.9697 17.6472 17.3967C18.094 16.8238 18.249 16.0924 18.0742 15.3879L16.1194 7.58325C15.4168 4.7691 12.8999 2.80352 9.9993 2.80352C7.09868 2.80352 4.5818 4.7691 3.87916 7.58325L1.92799 15.3879ZM9.9993 19.919C8.99399 19.919 8.14903 19.229 7.90761 18.2976H12.0892C11.8496 19.229 11.0046 19.919 9.9993 19.919ZM9.9993 3.8845C12.4027 3.8845 14.489 5.51317 15.0709 7.84448L17.0221 15.6492C17.1176 16.0293 17.0329 16.4221 16.7933 16.7319C16.5518 17.04 16.1897 17.2166 15.7988 17.2166H4.19985C3.8089 17.2166 3.44677 17.04 3.20535 16.7319C2.96393 16.4239 2.88106 16.0293 2.97654 15.6492L4.92771 7.84448C5.50964 5.51317 7.59593 3.8845 9.9993 3.8845Z"
       fill={fill}
@@ -21,3 +22,5 @@ export const Notification = ({
     />
   </svg>
 );
+
+export const ICON_NAME = 'notification';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Pages = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Pages = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Pages',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Pages = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Pages</title>
+    <title>{tooltip}</title>
     <g id="Side Menu Icons">
       <g id="Union">
         <path
@@ -74,3 +79,5 @@ export const Pages = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     </g>
   </svg>
 );
+
+export const ICON_NAME = 'pages';

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

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

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const RadioOn = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const RadioOn = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Radio on',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,7 +13,7 @@ export const RadioOn = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     fill="#fff"
     xmlns="http://www.w3.org/2000/svg"
     {...props}>
-    <title>Radio on</title>
+    <title>{tooltip}</title>
     <rect x="0.7" y="1.39995" width="18.6" height="18.6" rx="9.3" fill={fill} />
     <rect
       x="0.7"
@@ -22,3 +27,5 @@ export const RadioOn = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     <circle cx="10" cy="10.7" r="5" fill={fill} />
   </svg>
 );
+
+export const ICON_NAME = 'radio-on';