@ssa-ui-kit/core 1.0.0 → 1.0.2

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Robot = ({ fill = '#000', size = 50, ...props }: SVGProps) => (
+export const Robot = ({
+  fill = '#000',
+  size = 50,
+  tooltip = 'Robot',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Robot = ({ fill = '#000', size = 50, ...props }: SVGProps) => (
     viewBox="0 0 54 50"
     fill="none"
     {...props}>
-    <title>Robot</title>
+    <title>{tooltip}</title>
     <path
       d="M32.7144 16.6105H32.7143H27.6714V15.0526C27.6714 14.8784 27.5998 14.7121 27.4736 14.59L27.4043 14.6617L27.4736 14.59C27.3474 14.468 27.177 14.4 27 14.4C26.823 14.4 26.6526 14.468 26.5264 14.59C26.4002 14.7121 26.3286 14.8784 26.3286 15.0526V16.6105L21.2857 16.6105L21.2856 16.6105C20.5026 16.6112 19.7513 16.9123 19.1967 17.4487C18.6419 17.9852 18.3293 18.7134 18.3286 19.4736V19.4737L18.3286 29.4211L18.3286 29.4212C18.3293 30.1814 18.6419 30.9096 19.1967 31.4461C19.7513 31.9825 20.5026 32.2836 21.2856 32.2843H21.2857H24.356L26.4422 35.3107L26.5246 35.254L26.4422 35.3107C26.5039 35.4001 26.5872 35.4731 26.6844 35.5234C26.7817 35.5738 26.8901 35.6 27 35.6C27.1099 35.6 27.2183 35.5738 27.3156 35.5234C27.4128 35.4731 27.4961 35.4001 27.5578 35.3107L27.4754 35.254L27.5578 35.3107L29.644 32.2843H32.7143H32.7144C33.4974 32.2836 34.2487 31.9825 34.8033 31.4461C35.3581 30.9096 35.6707 30.1814 35.6714 29.4212V29.4211V19.4737V19.4736C35.6707 18.7134 35.3581 17.9852 34.8033 17.4487C34.2487 16.9123 33.4974 16.6112 32.7144 16.6105ZM28.728 31.2683L27 33.775L25.272 31.2683L25.272 31.2682C25.2102 31.1789 25.127 31.106 25.0298 31.0557C24.9326 31.0054 24.8243 30.9791 24.7144 30.979H24.7143H21.2858C20.8567 30.9785 20.446 30.8135 20.1436 30.521C19.8413 30.2286 19.6719 29.833 19.6714 29.421V27.8632H34.3286V29.421C34.3281 29.833 34.1587 30.2286 33.8564 30.521C33.554 30.8135 33.1433 30.9785 32.7142 30.979H29.2857H29.2856C29.1757 30.9791 29.0674 31.0055 28.9702 31.0558C28.873 31.1061 28.7898 31.1789 28.728 31.2682L28.728 31.2683ZM34.3286 26.5579H19.6714V19.4738C19.6719 19.0618 19.8413 18.6662 20.1436 18.3738C20.446 18.0813 20.8567 17.9163 21.2858 17.9158H32.7142C33.1433 17.9163 33.554 18.0813 33.8564 18.3738C34.1587 18.6662 34.3281 19.0618 34.3286 19.4738V26.5579ZM24.604 23.4604C24.7409 23.2621 24.8143 23.0286 24.8143 22.7895C24.8143 22.4687 24.6825 22.1618 24.4491 21.9361C24.2158 21.7104 23.9 21.5842 23.5714 21.5842C23.3263 21.5842 23.0865 21.6545 22.8822 21.7865C22.6779 21.9185 22.5181 22.1066 22.4236 22.3272C22.3291 22.5478 22.3044 22.7908 22.3526 23.0253C22.4008 23.2597 22.5197 23.4746 22.6938 23.6429C22.8678 23.8112 23.0891 23.9255 23.3296 23.9717C23.57 24.018 23.8193 23.9943 24.046 23.9035C24.2727 23.8126 24.467 23.6586 24.604 23.4604ZM31.4611 23.4604C31.5981 23.2621 31.6714 23.0286 31.6714 22.7895C31.6714 22.4687 31.5396 22.1618 31.3062 21.9361C31.0729 21.7104 30.7571 21.5842 30.4286 21.5842C30.1835 21.5842 29.9436 21.6545 29.7394 21.7865C29.535 21.9185 29.3753 22.1066 29.2808 22.3272C29.1863 22.5478 29.1615 22.7908 29.2097 23.0253C29.2579 23.2597 29.3769 23.4746 29.5509 23.6429C29.725 23.8112 29.9463 23.9255 30.1867 23.9717C30.4272 24.018 30.6764 23.9943 30.9031 23.9035C31.1298 23.8126 31.3241 23.6586 31.4611 23.4604ZM16.2429 25V20.579C16.2429 20.4048 16.1713 20.2384 16.045 20.1163C15.9189 19.9943 15.7484 19.9263 15.5714 19.9263C15.3944 19.9263 15.224 19.9943 15.0978 20.1163C14.9716 20.2384 14.9 20.4048 14.9 20.579V25C14.9 25.1742 14.9716 25.3406 15.0978 25.4627C15.224 25.5847 15.3944 25.6527 15.5714 25.6527C15.7484 25.6527 15.9189 25.5847 16.045 25.4627C16.1713 25.3406 16.2429 25.1742 16.2429 25ZM39.1 25V20.579C39.1 20.4048 39.0284 20.2384 38.9022 20.1163C38.776 19.9943 38.6056 19.9263 38.4286 19.9263C38.2516 19.9263 38.0811 19.9943 37.955 20.1163C37.8287 20.2384 37.7571 20.4048 37.7571 20.579V25C37.7571 25.1742 37.8287 25.3406 37.955 25.4627C38.0811 25.5847 38.2516 25.6527 38.4286 25.6527C38.6056 25.6527 38.776 25.5847 38.9022 25.4627C39.0284 25.3406 39.1 25.1742 39.1 25Z"
       fill={fill}
@@ -17,3 +22,5 @@ export const Robot = ({ fill = '#000', size = 50, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'robot';

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

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

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

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

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

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

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Sleep = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Sleep = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Sleep',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,7 +13,7 @@ export const Sleep = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Sleep</title>
+    <title>{tooltip}</title>
     <path
       d="M6.00833 2.0001C5.86499 2.002 5.7252 2.04501 5.60557 2.12402C4.00925 3.14394 2.65193 4.502 1.63258 6.0992C1.57541 6.18206 1.53552 6.2756 1.51529 6.37424C1.49506 6.47287 1.4949 6.57457 1.51482 6.67327C1.53474 6.77196 1.57434 6.86563 1.63124 6.94868C1.68814 7.03172 1.76119 7.10245 1.84601 7.15662C1.93084 7.2108 2.0257 7.24732 2.12495 7.264C2.22419 7.28068 2.32577 7.27718 2.42363 7.25371C2.52149 7.23024 2.61363 7.18728 2.69453 7.12739C2.77543 7.06751 2.84343 6.99192 2.89449 6.90516C3.79647 5.49188 4.99859 4.2891 6.41109 3.38663C6.55019 3.30043 6.65725 3.17103 6.71591 3.01821C6.77458 2.86538 6.78161 2.69754 6.73595 2.54034C6.69028 2.38314 6.59443 2.24522 6.46304 2.14766C6.33164 2.05011 6.17194 1.99828 6.00833 2.0001ZM17.9692 2.0001C17.8075 2.00312 17.6512 2.05841 17.5235 2.15772C17.3958 2.25703 17.3037 2.39502 17.2609 2.55107C17.2181 2.70711 17.2269 2.87282 17.286 3.02343C17.3451 3.17404 17.4514 3.30146 17.5889 3.38663C19.0014 4.2891 20.2035 5.49188 21.1055 6.90516C21.1566 6.99192 21.2246 7.06751 21.3055 7.12739C21.3864 7.18727 21.4785 7.23024 21.5764 7.25371C21.6742 7.27718 21.7758 7.28068 21.8751 7.26399C21.9743 7.24731 22.0692 7.2108 22.154 7.15662C22.2388 7.10244 22.3119 7.03172 22.3688 6.94868C22.4257 6.86563 22.4653 6.77196 22.4852 6.67327C22.5051 6.57457 22.5049 6.47287 22.4847 6.37424C22.4645 6.2756 22.4246 6.18206 22.3674 6.0992C21.3481 4.502 19.9907 3.14394 18.3944 2.12402C18.2684 2.04078 18.1202 1.99759 17.9692 2.0001ZM12 3.00512C6.76945 3.00512 2.51319 7.26371 2.51319 12.4971C2.51319 15.3532 3.80753 17.8881 5.80939 19.6298L4.72983 20.71C4.65795 20.779 4.60057 20.8617 4.56104 20.9532C4.5215 21.0448 4.50062 21.1432 4.49961 21.2429C4.49859 21.3426 4.51747 21.4415 4.55514 21.5338C4.5928 21.6261 4.6485 21.71 4.71896 21.7805C4.78942 21.851 4.87323 21.9067 4.96548 21.9444C5.05773 21.9821 5.15658 22.001 5.25622 22C5.35586 21.9989 5.4543 21.9781 5.54576 21.9385C5.63723 21.8989 5.71989 21.8415 5.78891 21.7696L7.01864 20.5392C8.47058 21.4429 10.168 21.9892 12 21.9892C13.832 21.9892 15.5294 21.4429 16.9814 20.5392L18.2111 21.7696C18.2801 21.8415 18.3628 21.8989 18.4542 21.9385C18.5457 21.9781 18.6441 21.9989 18.7438 22C18.8434 22.001 18.9423 21.9821 19.0345 21.9444C19.1268 21.9067 19.2106 21.851 19.281 21.7805C19.3515 21.71 19.4072 21.6261 19.4449 21.5338C19.4825 21.4415 19.5014 21.3426 19.5004 21.2429C19.4994 21.1432 19.4785 21.0448 19.439 20.9532C19.3994 20.8617 19.342 20.779 19.2702 20.71L18.1906 19.6298C20.1925 17.8881 21.4868 15.3532 21.4868 12.4971C21.4868 7.26371 17.2306 3.00512 12 3.00512ZM12 4.50386C16.421 4.50386 19.9889 8.07369 19.9889 12.4971C19.9889 16.9206 16.421 20.4904 12 20.4904C7.57898 20.4904 4.01111 16.9206 4.01111 12.4971C4.01111 8.07369 7.57898 4.50386 12 4.50386ZM10.8 13.3439L10.7992 7.7003C10.7992 7.3137 11.1125 7.00025 11.4991 7.0002C11.8857 7.00014 12.1992 7.31349 12.1992 7.70009L12.1999 12.6035L17.3302 11.3209C17.7053 11.2271 18.0853 11.4552 18.1791 11.8302C18.2729 12.2053 18.0448 12.5853 17.6698 12.6791L11.6698 14.1791C11.2947 14.2729 10.9147 14.0448 10.8209 13.6698C10.8 13.586 10.7951 13.5021 10.8043 13.4211C10.8015 13.3957 10.8001 13.37 10.8 13.3439Z"
       fill={fill}
@@ -19,3 +24,5 @@ export const Sleep = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'sleep';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Stats = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Stats = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Stats',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,7 +13,7 @@ export const Stats = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Stats</title>
+    <title>{tooltip}</title>
     <path
       d="M8.60653 3.62364C7.65543 3.81726 6.74357 4.19357 5.9236 4.73666C4.6787 5.56119 3.7015 6.73312 3.11555 8.10427C2.52961 9.47541 2.36125 10.9842 2.63175 12.4398C2.90226 13.8954 3.59949 15.2324 4.63526 16.2818C5.67104 17.3313 6.99885 18.0459 8.45078 18.3355C9.90272 18.625 11.4136 18.4764 12.7923 17.9085C14.1709 17.3405 15.3556 16.3787 16.1963 15.1447C16.7501 14.332 17.1383 13.4251 17.3444 12.4766L14.2451 12.4766C14.116 12.8294 13.943 13.1672 13.7288 13.4816C13.2234 14.2233 12.5114 14.8014 11.6827 15.1427C10.8541 15.4841 9.94598 15.5734 9.0733 15.3994C8.20061 15.2253 7.40253 14.7958 6.77997 14.165C6.15741 13.5343 5.73834 12.7306 5.57575 11.8557C5.41317 10.9809 5.51436 10.074 5.86654 9.24988C6.21873 8.42575 6.80608 7.72135 7.55433 7.22577C7.87147 7.01572 8.21151 6.84716 8.56596 6.72268L8.60653 3.62364ZM9.12977 2.0268C9.67978 1.96553 10.1232 2.41922 10.116 2.97178L10.0637 6.96592C10.0564 7.51848 9.59085 7.95088 9.06614 8.13122C8.82267 8.2149 8.58921 8.32964 8.37184 8.47361C7.87257 8.80429 7.48066 9.27429 7.24567 9.82419C7.01067 10.3741 6.94315 10.9792 7.05164 11.563C7.16013 12.1467 7.43975 12.683 7.85515 13.1038C8.27055 13.5247 8.80308 13.8113 9.38538 13.9274C9.96768 14.0436 10.5736 13.984 11.1265 13.7562C11.6795 13.5284 12.1546 13.1427 12.4917 12.6478C12.6385 12.4323 12.7563 12.2004 12.8432 11.958C13.0304 11.4357 13.4688 10.9759 14.0214 10.9759L18.0159 10.9759C18.5685 10.9759 19.0164 11.4252 18.9479 11.9743C18.7699 13.402 18.2526 14.776 17.4334 15.9785C16.4245 17.4593 15.0029 18.6135 13.3485 19.295C11.694 19.9765 9.88102 20.1548 8.13871 19.8074C6.39639 19.46 4.80302 18.6024 3.56008 17.343C2.31715 16.0837 1.48047 14.4793 1.15587 12.7326C0.83126 10.9858 1.0333 9.17532 1.73643 7.52995C2.43956 5.88458 3.61221 4.47826 5.10608 3.48882C6.31919 2.68535 7.69987 2.18609 9.12977 2.0268Z"
       fill={fill}
@@ -19,3 +24,5 @@ export const Stats = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'stats';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Trainings = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Trainings = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Trainings',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -8,10 +13,12 @@ export const Trainings = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Trainings</title>
+    <title>{tooltip}</title>
     <path
       d="M6.75 3.75C5.51634 3.75 4.5 4.76634 4.5 6V6.89062C4.26408 6.80564 4.01367 6.75 3.75 6.75C2.51634 6.75 1.5 7.76634 1.5 9V11.25H0V12.75H1.5V15C1.5 16.2329 2.51544 17.25 3.75 17.25C4.01342 17.25 4.26327 17.1968 4.5 17.1123V18C4.5 19.2329 5.51544 20.25 6.75 20.25C7.3669 20.25 7.93454 19.9971 8.34082 19.5908C8.7471 19.1845 9 18.6169 9 18V12.75H15V18C15 18.6169 15.2529 19.1845 15.6592 19.5908C16.0655 19.9971 16.6331 20.25 17.25 20.25C18.4846 20.25 19.5 19.2329 19.5 18V17.1123C19.7367 17.1968 19.9866 17.25 20.25 17.25C21.4846 17.25 22.5 16.2329 22.5 15V12.75H24V11.25H22.5V9C22.5 7.76634 21.4837 6.75 20.25 6.75C19.9863 6.75 19.7359 6.80564 19.5 6.89062V6C19.5 4.76634 18.4837 3.75 17.25 3.75C16.0154 3.75 15 4.76711 15 6V11.25H9V6C9 4.76711 7.98456 3.75 6.75 3.75ZM6.75 5.25C7.17444 5.25 7.5 5.57689 7.5 6V18C7.5 18.2111 7.41699 18.3936 7.28027 18.5303C7.14355 18.667 6.9611 18.75 6.75 18.75C6.32556 18.75 6 18.4231 6 18V6C6 5.57466 6.32466 5.25 6.75 5.25ZM17.25 5.25C17.6753 5.25 18 5.57466 18 6V9V11.4785V15V18C18 18.4231 17.6744 18.75 17.25 18.75C17.0389 18.75 16.8564 18.667 16.7197 18.5303C16.583 18.3936 16.5 18.2111 16.5 18V6C16.5 5.57689 16.8256 5.25 17.25 5.25ZM3.75 8.25C4.17444 8.25 4.5 8.57689 4.5 9V11.4785V15C4.5 15.2111 4.41699 15.3936 4.28027 15.5303C4.14355 15.667 3.9611 15.75 3.75 15.75C3.32556 15.75 3 15.4231 3 15V9C3 8.57466 3.32466 8.25 3.75 8.25ZM20.25 8.25C20.6753 8.25 21 8.57466 21 9V15C21 15.4231 20.6744 15.75 20.25 15.75C20.0389 15.75 19.8564 15.667 19.7197 15.5303C19.583 15.3936 19.5 15.2111 19.5 15V9C19.5 8.57689 19.8256 8.25 20.25 8.25Z"
       fill={fill}
     />
   </svg>
 );
+
+export const ICON_NAME = 'trainings';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const UnArchive = ({ fill = '#000', size = 20, ...props }: SVGProps) => (
+export const UnArchive = ({
+  fill = '#000',
+  size = 20,
+  tooltip = 'Unarchive',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const UnArchive = ({ fill = '#000', size = 20, ...props }: SVGProps) => (
     viewBox="0 0 21 20"
     fill="none"
     {...props}>
-    <title>Unarchive</title>
+    <title>{tooltip}</title>
     <g clipPath="url(#clip0_1141_12546)">
       <path
         d="M16.8271 18.9582H3.49382C2.88616 18.9577 2.30352 18.7161 1.87385 18.2865C1.44417 17.8568 1.20259 17.2742 1.20215 16.6665V6.6665C1.20215 6.50074 1.268 6.34177 1.38521 6.22456C1.50242 6.10735 1.66139 6.0415 1.82715 6.0415H18.4938C18.6596 6.0415 18.8185 6.10735 18.9358 6.22456C19.053 6.34177 19.1188 6.50074 19.1188 6.6665V16.6665C19.1184 17.2742 18.8768 17.8568 18.4471 18.2865C18.0174 18.7161 17.4348 18.9577 16.8271 18.9582ZM2.45215 7.2915V16.6665C2.45259 16.9426 2.56248 17.2073 2.75773 17.4026C2.95299 17.5978 3.21768 17.7077 3.49382 17.7082H16.8271C17.1033 17.7077 17.368 17.5978 17.5632 17.4026C17.7585 17.2073 17.8684 16.9426 17.8688 16.6665V7.2915H2.45215Z"
@@ -43,3 +48,5 @@ export const UnArchive = ({ fill = '#000', size = 20, ...props }: SVGProps) => (
     </defs>
   </svg>
 );
+
+export const ICON_NAME = 'unarchive';

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

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

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Unlock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Unlock = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Unlock',
+  ...props
+}: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
@@ -8,7 +13,7 @@ export const Unlock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     viewBox="0 0 15 15"
     fill="none"
     {...props}>
-    <title>Unlock</title>
+    <title>{tooltip}</title>
     <path
       d="M6.65912 9.39867C6.65912 8.92244 7.02368 8.55788 7.49991 8.55788C7.97614 8.55788 8.3407 8.92244 8.3407 9.39867C8.3407 9.65047 8.22903 9.87161 8.06044 10.0117V10.8C8.06044 11.1087 7.80864 11.3605 7.49991 11.3605C7.19118 11.3605 6.93939 11.1087 6.93939 10.8V10.0117C6.77079 9.87161 6.65912 9.65047 6.65912 9.39867Z"
       fill={fill}
@@ -21,3 +26,5 @@ export const Unlock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'unlock';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const User = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const User = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'User',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const User = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>User</title>
+    <title>{tooltip}</title>
     <path
       d="M12.1202 12.78C12.0502 12.77 11.9602 12.77 11.8802 12.78C10.1202 12.72 8.72021 11.28 8.72021 9.50998C8.72021 7.69998 10.1802 6.22998 12.0002 6.22998C13.8102 6.22998 15.2802 7.69998 15.2802 9.50998C15.2702 11.28 13.8802 12.72 12.1202 12.78Z"
       stroke={fill}
@@ -33,3 +38,5 @@ export const User = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'user';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Visible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Visible = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Visible',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Visible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Visible</title>
+    <title>{tooltip}</title>
     <path
       d="M15.5799 11.9999C15.5799 13.9799 13.9799 15.5799 11.9999 15.5799C10.0199 15.5799 8.41992 13.9799 8.41992 11.9999C8.41992 10.0199 10.0199 8.41992 11.9999 8.41992C13.9799 8.41992 15.5799 10.0199 15.5799 11.9999Z"
       stroke={fill}
@@ -26,3 +31,5 @@ export const Visible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'visible';

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

@@ -1,6 +1,11 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Warning = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+export const Warning = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Warning',
+  ...props
+}: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
@@ -9,7 +14,7 @@ export const Warning = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}>
-    <title>Warning</title>
+    <title>{tooltip}</title>
     <path
       d="M9.65357 1.32393C9.80753 1.05726 10.1924 1.05726 10.3464 1.32393L18.5118 15.4668C18.6657 15.7334 18.4733 16.0668 18.1654 16.0668H1.8346C1.52668 16.0668 1.33423 15.7334 1.48819 15.4668L9.65357 1.32393Z"
       stroke={fill}
@@ -21,3 +26,5 @@ export const Warning = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
     />
   </svg>
 );
+
+export const ICON_NAME = 'warning';

package/src/components/Icon/icons/all.ts

@@ -0,0 +1,59 @@
+export * as Calendar from './Calendar';
+export * as Diet from './Diet';
+export * as Home from './Home';
+export * as Measurements from './Measurements';
+export * as Settings from './Settings';
+export * as Sleep from './Sleep';
+export * as Stats from './Stats';
+export * as Trainings from './Trainings';
+
+export * as Plus from './Plus';
+export * as Minus from './Minus';
+export * as Cross from './Cross';
+export * as Check from './Check';
+export * as CheckCircle from './CheckCircle';
+export * as More from './More';
+export * as MoreVertical from './MoreVertical';
+export * as Notification from './Notification';
+export * as User from './User';
+export * as Union from './Union';
+export * as Visible from './Visible';
+export * as Invisible from './Invisible';
+export * as LogIn from './LogIn';
+export * as LogOut from './LogOut';
+export * as Email from './Email';
+export * as Lock from './Lock';
+export * as Information from './Information';
+export * as Warning from './Warning';
+export * as Attention from './Attention';
+
+export * as CarrotDown from './CarrotDown';
+export * as CarrotUp from './CarrotUp';
+export * as CarrotLeft from './CarrotLeft';
+export * as CarrotRight from './CarrotRight';
+
+export * as RadioOn from './RadioOn';
+export * as Circle from './Circle';
+
+export * as ArrowUp from './ArrowUp';
+export * as ArrowDown from './ArrowDown';
+
+export * as Filter from './Filter';
+export * as Search from './Search';
+export * as Archive from './Archive';
+export * as UnArchive from './UnArchive';
+export * as Bin from './Bin';
+export * as Change from './Change';
+export * as Copy from './Copy';
+export * as Robot from './Robot';
+export * as Chart from './Chart';
+export * as Clock from './Clock';
+export * as Cogwheel from './Cogwheel';
+export * as Circular from './Circular';
+export * as BanUser from './BanUser';
+export * as ConfirmEmail from './ConfirmEmail';
+export * as Unlock from './Unlock';
+export * as Edit from './Edit';
+export * as Import from './Import';
+export * as Pages from './Pages';
+export * as Roles from './Roles';

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

@@ -7,59 +7,8 @@
 //
 // Make sure the order in this array corresponds to the one in the
 // ./index.tsx
-export const iconsList = [
-  'diet',
-  'calendar',
-  'home',
-  'stats',
-  'sleep',
-  'trainings',
-  'measurements',
-  'settings',
-  'plus',
-  'minus',
-  'more',
-  'more-vertical',
-  'check',
-  'check-circle',
-  'cross',
-  'user',
-  'union',
-  'notification',
-  'information',
-  'warning',
-  'attention',
-  'visible',
-  'invisible',
-  'log-out',
-  'log-in',
-  'email',
-  'lock',
-  'carrot-down',
-  'carrot-up',
-  'carrot-left',
-  'carrot-right',
-  'radio-on',
-  'circle',
-  'arrow-up',
-  'arrow-down',
-  'filter',
-  'search',
-  'archive',
-  'bin',
-  'change',
-  'copy',
-  'robot',
-  'chart',
-  'clock',
-  'unarchive',
-  'cogwheel',
-  'circular',
-  'ban-user',
-  'confirm-email',
-  'unlock',
-  'edit',
-  'import',
-  'pages',
-  'roles',
-] as const;
+import * as Icons from './all';
+
+export const iconsList = (Object.keys(Icons) as Array<keyof typeof Icons>).map(
+  (keyName) => Icons[keyName].ICON_NAME,
+);

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

@@ -1,122 +1,17 @@
-import { IconProps, MapIconsType } from '../types';
-
-import { Calendar } from './Calendar';
-import { Diet } from './Diet';
-import { Home } from './Home';
-import { Measurements } from './Measurements';
-import { Settings } from './Settings';
-import { Sleep } from './Sleep';
-import { Stats } from './Stats';
-import { Trainings } from './Trainings';
-
-import { Plus } from './Plus';
-import { Minus } from './Minus';
-import { Cross } from './Cross';
-import { Check } from './Check';
-import { CheckCircle } from './CheckCircle';
-import { More } from './More';
-import { MoreVertical } from './MoreVertical';
-import { Notification } from './Notification';
-import { User } from './User';
-import { Union } from './Union';
-import { Visible } from './Visible';
-import { Invisible } from './Invisible';
-import { LogIn } from './LogIn';
-import { LogOut } from './LogOut';
-import { Email } from './Email';
-import { Lock } from './Lock';
-import { Information } from './Information';
-import { Warning } from './Warning';
-import { Attention } from './Attention';
-
-import { CarrotDown } from './CarrotDown';
-import { CarrotUp } from './CarrotUp';
-import { CarrotLeft } from './CarrotLeft';
-import { CarrotRight } from './CarrotRight';
-
-import { RadioOn } from './RadioOn';
-import { Circle } from './Circle';
-
-import { ArrowUp } from './ArrowUp';
-import { ArrowDown } from './ArrowDown';
-
+import { path } from '@ssa-ui-kit/utils';
+import { IconProps, MapIconsType, SVGProps } from '../types';
+import * as Icons from './all';
 import { iconsList } from './iconsList';
-import { Filter } from './Filter';
-import { Search } from './Search';
-import { Archive } from './Archive';
-import { UnArchive } from './UnArchive';
-import { Bin } from './Bin';
-import { Change } from './Change';
-import { Copy } from './Copy';
-import { Robot } from './Robot';
-import { Chart } from './Chart';
-import { Clock } from './Clock';
-import { Cogwheel } from './Cogwheel';
-import { Circular } from './Circular';
-import { BanUser } from './BanUser';
-import { ConfirmEmail } from './ConfirmEmail';
-import { Unlock } from './Unlock';
-import { Edit } from './Edit';
-import { Import } from './Import';
-import { Pages } from './Pages';
-import { Roles } from './Roles';
 
-const componentsList = [
-  Diet,
-  Calendar,
-  Home,
-  Stats,
-  Sleep,
-  Trainings,
-  Measurements,
-  Settings,
-  Plus,
-  Minus,
-  More,
-  MoreVertical,
-  Check,
-  CheckCircle,
-  Cross,
-  User,
-  Union,
-  Notification,
-  Information,
-  Warning,
-  Attention,
-  Visible,
-  Invisible,
-  LogOut,
-  LogIn,
-  Email,
-  Lock,
-  CarrotDown,
-  CarrotUp,
-  CarrotLeft,
-  CarrotRight,
-  RadioOn,
-  Circle,
-  ArrowUp,
-  ArrowDown,
-  Filter,
-  Search,
-  Archive,
-  Bin,
-  Change,
-  Copy,
-  Robot,
-  Chart,
-  Clock,
-  UnArchive,
-  Cogwheel,
-  Circular,
-  BanUser,
-  ConfirmEmail,
-  Unlock,
-  Edit,
-  Import,
-  Pages,
-  Roles,
-];
+type IconResultType = ({
+  fill,
+  size,
+  ...props
+}: SVGProps) => React.ReactElement;
+
+const componentsList = (Object.keys(Icons) as Array<keyof typeof Icons>).map(
+  (keyName) => path<typeof Icons, IconResultType>([keyName, keyName])(Icons),
+) as unknown as Array<IconResultType>;
 
 const iconsMap: MapIconsType = iconsList.reduce((res, name, index) => {
   res[name] = componentsList[index];

package/src/components/Icon/types.ts

@@ -3,6 +3,7 @@ import { iconsList } from './icons/iconsList';
 
 export interface SVGProps extends React.SVGProps<SVGSVGElement> {
   size?: number;
+  tooltip?: string;
 }
 
 export interface IconProps extends Omit<SVGProps, 'fill'> {

package/src/components/MultipleDropdownOptions/MultipleDropdownOptions.tsx

@@ -23,7 +23,7 @@ const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
   overflow-x: hidden;
   overflow-y: auto;
 
-  z-index: 2;
+  z-index: 1;
 
   filter: ${({ theme }) =>
     `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};