@ssa-ui-kit/core 0.0.11-alpha → 0.0.12-alpha

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

@@ -1,17 +1,17 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Trainings = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Trainings</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>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Trainings = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Trainings</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>
+);

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

@@ -0,0 +1,45 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const UnArchive = ({ fill = '#000', size = 20, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 21 20"
+    fill="none"
+    {...props}>
+    <title>Unarchive</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"
+        fill={fill}
+      />
+      <path
+        d="M10.1602 15.625C9.9944 15.625 9.83543 15.5592 9.71821 15.4419C9.601 15.3247 9.53516 15.1658 9.53516 15V10C9.53516 9.83424 9.601 9.67527 9.71821 9.55806C9.83543 9.44085 9.9944 9.375 10.1602 9.375C10.3259 9.375 10.4849 9.44085 10.6021 9.55806C10.7193 9.67527 10.7852 9.83424 10.7852 10V15C10.7852 15.1658 10.7193 15.3247 10.6021 15.4419C10.4849 15.5592 10.3259 15.625 10.1602 15.625Z"
+        fill={fill}
+      />
+      <path
+        d="M10.1601 8.89059C10.2422 8.89039 10.3235 8.90649 10.3993 8.93796C10.4752 8.96943 10.544 9.01565 10.6018 9.07392L13.1018 11.5739C13.2122 11.6924 13.2723 11.8491 13.2694 12.011C13.2666 12.1729 13.201 12.3274 13.0865 12.4419C12.972 12.5565 12.8175 12.622 12.6556 12.6249C12.4936 12.6278 12.3369 12.5677 12.2185 12.4573L10.1601 10.3998L8.10179 12.4573C7.98331 12.5677 7.8266 12.6278 7.66469 12.6249C7.50277 12.622 7.34828 12.5565 7.23377 12.4419C7.11926 12.3274 7.05366 12.1729 7.05081 12.011C7.04795 11.8491 7.10805 11.6924 7.21845 11.5739L9.71845 9.07392C9.77627 9.01565 9.84508 8.96943 9.9209 8.93796C9.99672 8.90649 10.078 8.89039 10.1601 8.89059Z"
+        fill={fill}
+      />
+      <path
+        d="M1.25056 0.447437C1.21048 0.17422 0.956494 -0.0147705 0.683277 0.0253158C0.410059 0.0654021 0.221069 0.319385 0.261156 0.592602L1.25056 0.447437ZM2.23794 7.17712L1.25056 0.447437L0.261156 0.592602L1.24853 7.32229L2.23794 7.17712Z"
+        fill={fill}
+      />
+      <path
+        d="M19.0102 0.447437C19.0503 0.17422 19.3042 -0.0147705 19.5775 0.0253158C19.8507 0.0654021 20.0397 0.319385 19.9996 0.592602L19.0102 0.447437ZM18.0228 7.17712L19.0102 0.447437L19.9996 0.592602L19.0122 7.32229L18.0228 7.17712Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1141_12546">
+        <rect
+          width="20"
+          height="20"
+          fill="white"
+          transform="translate(0.160156)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);

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

@@ -1,20 +1,20 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Union = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 3 10"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Union</title>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.50879 2C0.956504 2 0.508789 1.55228 0.508789 1C0.508789 0.447715 0.956504 0 1.50879 0H1.51777C2.07006 0 2.51777 0.447715 2.51777 1C2.51777 1.55228 2.07006 2 1.51777 2H1.50879ZM2.21416 9C2.21416 9.3866 1.90076 9.7 1.51416 9.7C1.12756 9.7 0.81416 9.3866 0.81416 9V4C0.81416 3.6134 1.12756 3.3 1.51416 3.3C1.90076 3.3 2.21416 3.6134 2.21416 4V9Z"
-      fill={fill}
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Union = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 3 10"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Union</title>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.50879 2C0.956504 2 0.508789 1.55228 0.508789 1C0.508789 0.447715 0.956504 0 1.50879 0H1.51777C2.07006 0 2.51777 0.447715 2.51777 1C2.51777 1.55228 2.07006 2 1.51777 2H1.50879ZM2.21416 9C2.21416 9.3866 1.90076 9.7 1.51416 9.7C1.12756 9.7 0.81416 9.3866 0.81416 9V4C0.81416 3.6134 1.12756 3.3 1.51416 3.3C1.90076 3.3 2.21416 3.6134 2.21416 4V9Z"
+      fill={fill}
+    />
+  </svg>
+);

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

@@ -1,35 +1,35 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const User = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>User</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}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18.7398 19.3801C16.9598 21.0101 14.5998 22.0001 11.9998 22.0001C9.39977 22.0001 7.03977 21.0101 5.25977 19.3801C5.35977 18.4401 5.95977 17.5201 7.02977 16.8001C9.76977 14.9801 14.2498 14.9801 16.9698 16.8001C18.0398 17.5201 18.6398 18.4401 18.7398 19.3801Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const User = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>User</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}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M18.7398 19.3801C16.9598 21.0101 14.5998 22.0001 11.9998 22.0001C9.39977 22.0001 7.03977 21.0101 5.25977 19.3801C5.35977 18.4401 5.95977 17.5201 7.02977 16.8001C9.76977 14.9801 14.2498 14.9801 16.9698 16.8001C18.0398 17.5201 18.6398 18.4401 18.7398 19.3801Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -1,28 +1,28 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Visible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Visible</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}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M11.9998 20.27C15.5298 20.27 18.8198 18.19 21.1098 14.59C22.0098 13.18 22.0098 10.81 21.1098 9.39997C18.8198 5.79997 15.5298 3.71997 11.9998 3.71997C8.46984 3.71997 5.17984 5.79997 2.88984 9.39997C1.98984 10.81 1.98984 13.18 2.88984 14.59C5.17984 18.19 8.46984 20.27 11.9998 20.27Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Visible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Visible</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}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.9998 20.27C15.5298 20.27 18.8198 18.19 21.1098 14.59C22.0098 13.18 22.0098 10.81 21.1098 9.39997C18.8198 5.79997 15.5298 3.71997 11.9998 3.71997C8.46984 3.71997 5.17984 5.79997 2.88984 9.39997C1.98984 10.81 1.98984 13.18 2.88984 14.59C5.17984 18.19 8.46984 20.27 11.9998 20.27Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -1,23 +1,23 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Warning = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Warning</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}
-      strokeWidth="1.2"
-    />
-    <path
-      d="M10.7003 6.19072C10.7003 5.80412 10.3869 5.49072 10.0003 5.49072C9.61368 5.49072 9.30028 5.80412 9.30028 6.19072V10.159C9.30028 10.5456 9.61368 10.859 10.0003 10.859C10.3869 10.859 10.7003 10.5456 10.7003 10.159V6.19072ZM9.99609 12.1749C9.44381 12.1749 8.99609 12.6226 8.99609 13.1749C8.99609 13.7272 9.44381 14.1749 9.99609 14.1749H10.0032C10.5555 14.1749 11.0032 13.7272 11.0032 13.1749C11.0032 12.6226 10.5555 12.1749 10.0032 12.1749H9.99609Z"
-      fill={fill}
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Warning = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Warning</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}
+      strokeWidth="1.2"
+    />
+    <path
+      d="M10.7003 6.19072C10.7003 5.80412 10.3869 5.49072 10.0003 5.49072C9.61368 5.49072 9.30028 5.80412 9.30028 6.19072V10.159C9.30028 10.5456 9.61368 10.859 10.0003 10.859C10.3869 10.859 10.7003 10.5456 10.7003 10.159V6.19072ZM9.99609 12.1749C9.44381 12.1749 8.99609 12.6226 8.99609 13.1749C8.99609 13.7272 9.44381 14.1749 9.99609 14.1749H10.0032C10.5555 14.1749 11.0032 13.7272 11.0032 13.1749C11.0032 12.6226 10.5555 12.1749 10.0032 12.1749H9.99609Z"
+      fill={fill}
+    />
+  </svg>
+);

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

@@ -1,55 +1,56 @@
-// This file is also imported into the Button/Button.stories.tsx
-// and into the ./index.tsx
-// We need such a file to let webpack create a chunk for
-// the <Icon /> component which uses React.lazy().
-// If we import <Icon /> directly into the Button/Button.stories.tsx,
-// webpack will consider that as an objection to the chunk creation.
-//
-// 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',
-] as const;
+// This file is also imported into the Button/Button.stories.tsx
+// and into the ./index.tsx
+// We need such a file to let webpack create a chunk for
+// the <Icon /> component which uses React.lazy().
+// If we import <Icon /> directly into the Button/Button.stories.tsx,
+// webpack will consider that as an objection to the chunk creation.
+//
+// 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',
+] as const;

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

@@ -1,115 +1,117 @@
-import { IconProps, IMapIcons } 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 { iconsList } from './iconsList';
-import { Filter } from './Filter';
-import { Search } from './Search';
-import { Archive } from './Archive';
-import { Bin } from './Bin';
-import { Change } from './Change';
-import { Copy } from './Copy';
-import { Robot } from './Robot';
-import { Chart } from './Chart';
-import { Clock } from './Clock';
-
-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,
-];
-
-const iconsMap: IMapIcons = iconsList.reduce((res, name, index) => {
-  res[name] = componentsList[index];
-  return res;
-}, {} as IMapIcons);
-
-const IconMapComponent = ({ name, color, ...props }: IconProps) => {
-  const Component = iconsMap[name];
-
-  if (Component == null) {
-    return null;
-  }
-
-  return <Component fill={color} {...props} />;
-};
-export default IconMapComponent;
+import { IconProps, IMapIcons } 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 { 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';
+
+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,
+];
+
+const iconsMap: IMapIcons = iconsList.reduce((res, name, index) => {
+  res[name] = componentsList[index];
+  return res;
+}, {} as IMapIcons);
+
+const IconMapComponent = ({ name, color, ...props }: IconProps) => {
+  const Component = iconsMap[name];
+
+  if (Component == null) {
+    return null;
+  }
+
+  return <Component fill={color} {...props} />;
+};
+export default IconMapComponent;

package/src/components/Icon/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Icon';
-export { iconsList } from './icons/iconsList';
+export { default } from './Icon';
+export { iconsList } from './icons/iconsList';