@databiosphere/findable-ui 0.0.0

package/src/components/common/CustomIcon/components/ForwardArrowIcon/forwardArrowIcon.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+export const ForwardArrowIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M12.1313 9.74959H3.75C3.5375 9.74959 3.35937 9.67772 3.21562 9.53397C3.07187 9.39022 3 9.21209 3 8.99959C3 8.78709 3.07187 8.60897 3.21562 8.46522C3.35937 8.32147 3.5375 8.24959 3.75 8.24959H12.1313L8.45625 4.57459C8.30625 4.42459 8.23438 4.24959 8.24063 4.04959C8.24688 3.84959 8.325 3.67459 8.475 3.52459C8.625 3.38709 8.8 3.31522 9 3.30897C9.2 3.30272 9.375 3.37459 9.525 3.52459L14.475 8.47459C14.55 8.54959 14.6031 8.63084 14.6344 8.71834C14.6656 8.80584 14.6812 8.89959 14.6812 8.99959C14.6812 9.09959 14.6656 9.19334 14.6344 9.28084C14.6031 9.36834 14.55 9.44959 14.475 9.52459L9.525 14.4746C9.3875 14.6121 9.21562 14.6808 9.00937 14.6808C8.80312 14.6808 8.625 14.6121 8.475 14.4746C8.325 14.3246 8.25 14.1465 8.25 13.9402C8.25 13.734 8.325 13.5558 8.475 13.4058L12.1313 9.74959Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/GitHubIcon/gitHubIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom GitHub icon (socials).
+ */
+
+export const GitHubIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M6.66565 13.1582C6.66565 13.2145 6.6094 13.2426 6.52502 13.2426C6.44065 13.2707 6.3844 13.2145 6.3844 13.1582C6.3844 13.102 6.44065 13.0457 6.52502 13.0457C6.6094 13.0457 6.66565 13.102 6.66565 13.1582ZM5.79377 13.0176C5.79377 13.0738 5.85002 13.1582 5.9344 13.1582C5.99065 13.1863 6.07502 13.1582 6.10315 13.102C6.10315 13.0457 6.07502 12.9895 5.99065 12.9613C5.90627 12.9332 5.8219 12.9613 5.79377 13.0176ZM7.0594 12.9895C6.97502 12.9895 6.91877 13.0457 6.91877 13.1301C6.91877 13.1863 7.00315 13.2145 7.08752 13.1863C7.1719 13.1582 7.22815 13.1301 7.20002 13.0738C7.20002 13.0176 7.11565 12.9613 7.0594 12.9895ZM8.88752 2.18945C5.00627 2.18945 2.02502 5.1707 2.02502 9.05195C2.02502 12.1738 3.96565 14.8457 6.77815 15.802C7.14377 15.8582 7.25627 15.6332 7.25627 15.4645C7.25627 15.2676 7.25627 14.3113 7.25627 13.7207C7.25627 13.7207 5.28752 14.1426 4.86565 12.877C4.86565 12.877 4.55627 12.0613 4.10627 11.8645C4.10627 11.8645 3.4594 11.4145 4.1344 11.4145C4.1344 11.4145 4.83752 11.4707 5.23127 12.1457C5.85002 13.2426 6.86252 12.9332 7.2844 12.7363C7.34065 12.2863 7.5094 11.977 7.7344 11.7801C6.1594 11.6113 4.55627 11.3863 4.55627 8.68633C4.55627 7.89883 4.78127 7.5332 5.23127 7.02695C5.1469 6.83008 4.9219 6.09883 5.31565 5.11445C5.87815 4.9457 7.25627 5.87383 7.25627 5.87383C7.81877 5.70508 8.4094 5.64883 9.00002 5.64883C9.61877 5.64883 10.2094 5.70508 10.7719 5.87383C10.7719 5.87383 12.1219 4.91758 12.7125 5.11445C13.1063 6.09883 12.8531 6.83008 12.7969 7.02695C13.2469 7.5332 13.5281 7.89883 13.5281 8.68633C13.5281 11.3863 11.8688 11.6113 10.2938 11.7801C10.5469 12.0051 10.7719 12.427 10.7719 13.102C10.7719 14.0301 10.7438 15.2113 10.7438 15.4363C10.7438 15.6332 10.8844 15.8582 11.25 15.7738C14.0625 14.8457 15.975 12.1738 15.975 9.05195C15.975 5.1707 12.7969 2.18945 8.88752 2.18945ZM4.75315 11.8926C4.6969 11.9207 4.72502 12.0051 4.75315 12.0613C4.8094 12.0895 4.86565 12.1176 4.9219 12.0895C4.95002 12.0613 4.95002 11.977 4.89377 11.9207C4.83752 11.8926 4.78127 11.8645 4.75315 11.8926ZM4.44377 11.6676C4.41565 11.7238 4.44377 11.752 4.50002 11.7801C4.55627 11.8082 4.61252 11.8082 4.64065 11.752C4.64065 11.7238 4.61252 11.6957 4.55627 11.6676C4.50002 11.6395 4.4719 11.6395 4.44377 11.6676ZM5.34377 12.6801C5.31565 12.7082 5.31565 12.7926 5.40002 12.8488C5.45627 12.9051 5.54065 12.9332 5.56877 12.877C5.5969 12.8488 5.5969 12.7645 5.54065 12.7082C5.4844 12.652 5.40002 12.6238 5.34377 12.6801ZM5.0344 12.2582C4.97815 12.2863 4.97815 12.3707 5.0344 12.427C5.09065 12.4832 5.1469 12.5113 5.20315 12.4832C5.23127 12.4551 5.23127 12.3707 5.20315 12.3145C5.1469 12.2582 5.09065 12.2301 5.0344 12.2582Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/GoogleIcon/googleIcon.tsx

@@ -0,0 +1,34 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom Google logo icon.
+ */
+
+export const GoogleIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 20 20",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M19.7874 10.2249C19.7874 9.56659 19.7291 8.94159 19.6291 8.33325H10.2124V12.0916H15.6041C15.3624 13.3249 14.6541 14.3666 13.6041 15.0749V17.5749H16.8207C18.7041 15.8333 19.7874 13.2666 19.7874 10.2249Z"
+        fill="#4285F4"
+      />
+      <path
+        d="M10.2126 20.0001C12.9126 20.0001 15.1709 19.1001 16.8209 17.5751L13.6043 15.0751C12.7043 15.6751 11.5626 16.0418 10.2126 16.0418C7.60427 16.0418 5.39593 14.2834 4.60427 11.9084H1.2876V14.4834C2.92926 17.7501 6.30427 20.0001 10.2126 20.0001Z"
+        fill="#34A853"
+      />
+      <path
+        d="M4.60407 11.9083C4.39574 11.3083 4.2874 10.6666 4.2874 9.99993C4.2874 9.33327 4.40407 8.6916 4.60407 8.0916V5.5166H1.2874C0.604068 6.8666 0.212402 8.38327 0.212402 9.99993C0.212402 11.6166 0.604068 13.1333 1.2874 14.4833L4.60407 11.9083Z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M10.2126 3.95833C11.6876 3.95833 13.0043 4.46667 14.0459 5.45834L16.8959 2.60833C15.1709 0.991667 12.9126 0 10.2126 0C6.30426 0 2.92926 2.25 1.2876 5.51667L4.60427 8.09167C5.39593 5.71667 7.60426 3.95833 10.2126 3.95833Z"
+        fill="#EA4335"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/HelpIcon/helpIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom help icon.
+ */
+
+export const HelpIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M9.00005 13.4998C9.25025 13.4998 9.46265 13.4122 9.63725 13.237C9.81245 13.0624 9.90005 12.85 9.90005 12.5998C9.90005 12.3496 9.81245 12.1372 9.63725 11.9626C9.46265 11.7874 9.25025 11.6998 9.00005 11.6998C8.74985 11.6998 8.53745 11.7874 8.36285 11.9626C8.18765 12.1372 8.10005 12.3496 8.10005 12.5998C8.10005 12.85 8.18765 13.0624 8.36285 13.237C8.53745 13.4122 8.74985 13.4998 9.00005 13.4998ZM8.32505 10.6306H9.69395C9.69395 10.1686 9.73445 9.8407 9.81545 9.6469C9.89705 9.4531 10.0938 9.2062 10.4058 8.9062C10.8438 8.4814 11.1471 8.119 11.3157 7.819C11.4843 7.519 11.5686 7.18751 11.5686 6.82451C11.5686 6.13751 11.3343 5.5783 10.8657 5.1469C10.3971 4.7155 9.80015 4.4998 9.07475 4.4998C8.43755 4.4998 7.88465 4.6684 7.41605 5.0056C6.94685 5.3434 6.61865 5.7997 6.43145 6.37451L7.65005 6.8812C7.76285 6.5308 7.94105 6.259 8.18465 6.0658C8.42825 5.872 8.71265 5.7751 9.03785 5.7751C9.38765 5.7751 9.67505 5.875 9.90005 6.0748C10.125 6.2746 10.2375 6.5371 10.2375 6.8623C10.2375 7.1497 10.1406 7.4059 9.94685 7.63091C9.75305 7.85591 9.53735 8.07461 9.29975 8.28701C8.86235 8.68721 8.59055 9.01541 8.48435 9.27161C8.37815 9.52781 8.32505 9.98081 8.32505 10.6306ZM9.00005 16.1998C8.01245 16.1998 7.08125 16.0123 6.20645 15.6373C5.33165 15.2623 4.56605 14.7466 3.90965 14.0902C3.25325 13.4338 2.73755 12.6682 2.36255 11.7934C1.98755 10.9186 1.80005 9.9874 1.80005 8.9998C1.80005 7.9996 1.98755 7.06511 2.36255 6.19631C2.73755 5.32811 3.25325 4.5658 3.90965 3.9094C4.56605 3.253 5.33165 2.7373 6.20645 2.3623C7.08125 1.9873 8.01245 1.7998 9.00005 1.7998C10.0002 1.7998 10.9347 1.9873 11.8035 2.3623C12.6717 2.7373 13.434 3.253 14.0904 3.9094C14.7468 4.5658 15.2625 5.32811 15.6375 6.19631C16.0125 7.06511 16.2 7.9996 16.2 8.9998C16.2 9.9874 16.0125 10.9186 15.6375 11.7934C15.2625 12.6682 14.7468 13.4338 14.0904 14.0902C13.434 14.7466 12.6717 15.2623 11.8035 15.6373C10.9347 16.0123 10.0002 16.1998 9.00005 16.1998Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/InfoIcon/infoIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom info icon.
+ */
+
+export const InfoIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M8.99994 12.75C9.21234 12.75 9.39684 12.6717 9.55344 12.5151C9.70944 12.3591 9.78744 12.1749 9.78744 11.9625V9.0186C9.78744 8.8062 9.70944 8.625 9.55344 8.475C9.39684 8.325 9.21234 8.25 8.99994 8.25C8.78754 8.25 8.60304 8.328 8.44644 8.484C8.29044 8.6406 8.21244 8.8251 8.21244 9.0375V11.9805C8.21244 12.1935 8.29044 12.375 8.44644 12.525C8.60304 12.675 8.78754 12.75 8.99994 12.75ZM8.99994 6.7308C9.21234 6.7308 9.39684 6.6528 9.55344 6.4968C9.70944 6.3402 9.78744 6.1557 9.78744 5.9433C9.78744 5.7309 9.70944 5.5467 9.55344 5.3907C9.39684 5.2341 9.21234 5.1558 8.99994 5.1558C8.78754 5.1558 8.60304 5.2341 8.44644 5.3907C8.29044 5.5467 8.21244 5.7309 8.21244 5.9433C8.21244 6.1557 8.29044 6.3402 8.44644 6.4968C8.60304 6.6528 8.78754 6.7308 8.99994 6.7308ZM8.99994 16.4994C7.96254 16.4994 6.98754 16.3026 6.07494 15.909C5.16234 15.5154 4.36854 14.9811 3.69354 14.3061C3.01854 13.6311 2.48424 12.8373 2.09064 11.9247C1.69704 11.0121 1.50024 10.0371 1.50024 8.9997C1.50024 7.9623 1.69704 6.9873 2.09064 6.0747C2.48424 5.1621 3.01854 4.3683 3.69354 3.6933C4.36854 3.0183 5.16234 2.484 6.07494 2.0904C6.98754 1.6968 7.96254 1.5 8.99994 1.5C10.0373 1.5 11.0123 1.6968 11.9249 2.0904C12.8375 2.484 13.6313 3.0183 14.3063 3.6933C14.9813 4.3683 15.5156 5.1621 15.9092 6.0747C16.3028 6.9873 16.4996 7.9623 16.4996 8.9997C16.4996 10.0371 16.3028 11.0121 15.9092 11.9247C15.5156 12.8373 14.9813 13.6311 14.3063 14.3061C13.6313 14.9811 12.8375 15.5154 11.9249 15.909C11.0123 16.3026 10.0373 16.4994 8.99994 16.4994Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/InventoryIcon/inventoryIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom inventory icon.
+ */
+
+export const InventoryIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M3.82494 16.4994C3.38754 16.4994 3.01554 16.3494 2.70894 16.0494C2.40294 15.7494 2.24994 15.3807 2.24994 14.9433V6.6183C2.03754 6.4809 1.85934 6.2997 1.71534 6.0747C1.57194 5.8497 1.50024 5.5935 1.50024 5.3061V3.075C1.50024 2.6376 1.65324 2.2656 1.95924 1.959C2.26584 1.653 2.63784 1.5 3.07524 1.5H14.9246C15.362 1.5 15.734 1.653 16.0406 1.959C16.3466 2.2656 16.4996 2.6376 16.4996 3.075V5.3061C16.4996 5.5935 16.4309 5.8497 16.2935 6.0747C16.1561 6.2997 15.9812 6.4809 15.7688 6.6183V14.9433C15.7688 15.3807 15.6155 15.7494 15.3089 16.0494C15.0029 16.3494 14.6312 16.4994 14.1938 16.4994H3.82494ZM3.82494 6.8811V14.9244H14.1938V6.8811H3.82494ZM14.9246 5.3061V3.075H3.07524V5.3061H14.9246ZM7.51854 10.6305H10.4813C10.6937 10.6305 10.8779 10.5525 11.0339 10.3965C11.1905 10.2405 11.2688 10.0563 11.2688 9.8439C11.2688 9.6309 11.1905 9.4464 11.0339 9.2904C10.8779 9.1338 10.6937 9.0555 10.4813 9.0555H7.51854C7.30614 9.0555 7.12194 9.1338 6.96594 9.2904C6.80934 9.4464 6.73104 9.6309 6.73104 9.8439C6.73104 10.0563 6.80934 10.2405 6.96594 10.3965C7.12194 10.5525 7.30614 10.6305 7.51854 10.6305Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/LinkedInIcon/linkedInIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom LinkedIn icon (socials).
+ */
+
+export const LinkedInIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M13.9111 13.9117H11.8441V10.6747C11.8441 9.90278 11.8304 8.9091 10.7691 8.9091C9.69257 8.9091 9.52785 9.75012 9.52785 10.6185V13.9115H7.46089V7.25484H9.44517V8.16454H9.47295C9.67153 7.825 9.95848 7.54567 10.3032 7.35632C10.648 7.16696 11.0377 7.07467 11.4307 7.08926C13.5257 7.08926 13.912 8.46727 13.912 10.26L13.9111 13.9117ZM5.12868 6.34491C4.89145 6.34496 4.65952 6.27465 4.46224 6.14288C4.26497 6.01111 4.11121 5.8238 4.02038 5.60463C3.92956 5.38546 3.90575 5.14428 3.95199 4.91159C3.99823 4.6789 4.11244 4.46514 4.28016 4.29736C4.44788 4.12957 4.66159 4.01529 4.89425 3.96896C5.12692 3.92264 5.3681 3.94635 5.58729 4.0371C5.80648 4.12785 5.99384 4.28156 6.12568 4.4788C6.25751 4.67603 6.32791 4.90794 6.32795 5.14518C6.32798 5.3027 6.29697 5.45869 6.23672 5.60423C6.17647 5.74978 6.08815 5.88202 5.97679 5.99343C5.86542 6.10484 5.7332 6.19322 5.58768 6.25352C5.44217 6.31383 5.2862 6.34489 5.12868 6.34491ZM6.16216 13.9117H4.09305V7.25484H6.16216V13.9117ZM14.9415 2.02634H3.05441C2.78461 2.0233 2.52462 2.1275 2.3316 2.31604C2.13858 2.50459 2.02832 2.76205 2.02502 3.03186V14.9687C2.0282 15.2387 2.1384 15.4963 2.33141 15.685C2.52443 15.8738 2.78447 15.9782 3.05441 15.9753H14.9415C15.212 15.9787 15.4728 15.8746 15.6666 15.6859C15.8603 15.4971 15.9713 15.2392 15.975 14.9687V3.031C15.9712 2.76066 15.8602 2.5029 15.6664 2.31436C15.4726 2.12581 15.2119 2.02191 14.9415 2.02548"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/LoadingIcon/loadingIcon.tsx

@@ -0,0 +1,108 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom loading icon.
+ */
+
+export const LoadingIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 105 105",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <circle cx="12.5" cy="12.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="0s"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="12.5" cy="52.5" r="12.5" fillOpacity=".5">
+        <animate
+          attributeName="fill-opacity"
+          begin="100ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="52.5" cy="12.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="300ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="52.5" cy="52.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="600ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="92.5" cy="12.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="800ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="92.5" cy="52.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="400ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="12.5" cy="92.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="700ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="52.5" cy="92.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="500ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="92.5" cy="92.5" r="12.5">
+        <animate
+          attributeName="fill-opacity"
+          begin="200ms"
+          dur="1s"
+          values="1;.2;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/OpenInNewIcon/openInNewIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom open in new icon.
+ */
+
+export const OpenInNewIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M3.75 15.75C3.3375 15.75 2.98438 15.6031 2.69063 15.3094C2.39688 15.0156 2.25 14.6625 2.25 14.25V3.75C2.25 3.3375 2.39688 2.98438 2.69063 2.69063C2.98438 2.39688 3.3375 2.25 3.75 2.25H8.25C8.4625 2.25 8.64063 2.32187 8.78438 2.46562C8.92813 2.60937 9 2.7875 9 3C9 3.2125 8.92813 3.39062 8.78438 3.53437C8.64063 3.67812 8.4625 3.75 8.25 3.75H3.75V14.25H14.25V9.75C14.25 9.5375 14.3219 9.35938 14.4656 9.21563C14.6094 9.07188 14.7875 9 15 9C15.2125 9 15.3906 9.07188 15.5344 9.21563C15.6781 9.35938 15.75 9.5375 15.75 9.75V14.25C15.75 14.6625 15.6031 15.0156 15.3094 15.3094C15.0156 15.6031 14.6625 15.75 14.25 15.75H3.75ZM6.75 11.25C6.6125 11.1125 6.54375 10.9375 6.54375 10.725C6.54375 10.5125 6.6125 10.3375 6.75 10.2L13.2 3.75H11.25C11.0375 3.75 10.8594 3.67812 10.7156 3.53437C10.5719 3.39062 10.5 3.2125 10.5 3C10.5 2.7875 10.5719 2.60937 10.7156 2.46562C10.8594 2.32187 11.0375 2.25 11.25 2.25H15C15.2125 2.25 15.3906 2.32187 15.5344 2.46562C15.6781 2.60937 15.75 2.7875 15.75 3V6.75C15.75 6.9625 15.6781 7.14063 15.5344 7.28438C15.3906 7.42813 15.2125 7.5 15 7.5C14.7875 7.5 14.6094 7.42813 14.4656 7.28438C14.3219 7.14063 14.25 6.9625 14.25 6.75V4.8L7.78125 11.2688C7.64375 11.4063 7.475 11.475 7.275 11.475C7.075 11.475 6.9 11.4 6.75 11.25Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/RadioCheckedIcon/radioCheckedIcon.tsx

@@ -0,0 +1,24 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom radio checked icon.
+ */
+
+export const RadioCheckedIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 18C13.9706 18 18 13.9707 18 9C18 4.0293 13.9706 0 9 0C4.02942 0 0 4.0293 0 9C0 13.9707 4.02942 18 9 18ZM9 13C11.2091 13 13 11.209 13 9C13 6.79102 11.2091 5 9 5C6.79089 5 5 6.79102 5 9C5 11.209 6.79089 13 9 13Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/RadioUncheckedIcon/radioUncheckedIcon.tsx

@@ -0,0 +1,27 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom radio unchecked icon.
+ */
+
+export const RadioUncheckedIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <rect
+        fill="transparent"
+        height="17"
+        rx="8.5"
+        stroke="currentColor"
+        x="0.5"
+        y="0.5"
+        width="17"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/RemoveIcon/removeIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom remove icon.
+ */
+
+export const RemoveIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M4.5375 9.74981C4.3251 9.74981 4.1406 9.67181 3.984 9.51581C3.828 9.35921 3.75 9.17471 3.75 8.96231C3.75 8.7499 3.828 8.5657 3.984 8.4097C4.1406 8.2531 4.3251 8.1748 4.5375 8.1748H13.4619C13.6743 8.1748 13.8588 8.2531 14.0154 8.4097C14.1714 8.5657 14.2494 8.7499 14.2494 8.96231C14.2494 9.17471 14.1714 9.35921 14.0154 9.51581C13.8588 9.67181 13.6743 9.74981 13.4619 9.74981H4.5375Z"
+        fill="#currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/SearchIcon/searchIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom search icon.
+ */
+
+export const SearchIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 20 20",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M15.8599 17.0728L11.2969 12.5098C10.8389 12.8571 10.3422 13.1178 9.80688 13.2918C9.27221 13.4651 8.71321 13.5518 8.12988 13.5518C6.61654 13.5518 5.32854 13.0274 4.26587 11.9788C3.20321 10.9301 2.67188 9.64876 2.67188 8.13476C2.67188 6.62142 3.20321 5.33342 4.26587 4.27076C5.32854 3.20809 6.61654 2.67676 8.12988 2.67676C9.64388 2.67676 10.9252 3.20809 11.9739 4.27076C13.0225 5.33342 13.5469 6.62142 13.5469 8.13476C13.5469 8.71809 13.4635 9.27709 13.2969 9.81176C13.1302 10.3471 12.8662 10.8368 12.5049 11.2808L17.0889 15.8848C17.2555 16.0514 17.3352 16.2494 17.3279 16.4788C17.3212 16.7081 17.2345 16.9061 17.0679 17.0728C16.9012 17.2394 16.6999 17.3228 16.4639 17.3228C16.2279 17.3228 16.0265 17.2394 15.8599 17.0728ZM8.12988 11.8018C9.14388 11.8018 10.0085 11.4441 10.7239 10.7288C11.4392 10.0134 11.7969 9.14876 11.7969 8.13476C11.7969 7.10742 11.4425 6.23242 10.7339 5.50976C10.0259 4.78776 9.15788 4.42676 8.12988 4.42676C7.10254 4.42676 6.22754 4.78776 5.50488 5.50976C4.78288 6.23242 4.42188 7.10742 4.42188 8.13476C4.42188 9.16276 4.78288 10.0308 5.50488 10.7388C6.22754 11.4474 7.10254 11.8018 8.12988 11.8018Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/SearchOffIcon/searchOffIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom search off icon.
+ */
+
+export const SearchOffIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M5.11866 16.5002C4.13106 16.5002 3.28101 16.1439 2.56851 15.4314C1.85601 14.7189 1.49976 13.8689 1.49976 12.8813C1.49976 11.8814 1.85601 11.0252 2.56851 10.3127C3.28101 9.60015 4.13106 9.2439 5.11866 9.2439C6.11856 9.2439 6.97476 9.60015 7.68726 10.3127C8.39976 11.0252 8.75601 11.8814 8.75601 12.8813C8.75601 13.8689 8.39976 14.7189 7.68726 15.4314C6.97476 16.1439 6.11856 16.5002 5.11866 16.5002ZM3.58101 14.4374C3.64371 14.5001 3.72186 14.5314 3.81546 14.5314C3.90936 14.5314 3.98751 14.5001 4.04991 14.4374L5.11866 13.3686L6.18741 14.4374C6.24981 14.5001 6.32481 14.5283 6.41241 14.522C6.50001 14.5157 6.57501 14.4813 6.63741 14.4189C6.69981 14.3562 6.73101 14.2781 6.73101 14.1845C6.73101 14.0906 6.69981 14.0124 6.63741 13.95L5.56866 12.8813L6.67476 11.7752C6.74976 11.7125 6.78411 11.6375 6.77781 11.5502C6.77181 11.4626 6.73746 11.3876 6.67476 11.3252C6.59976 11.2502 6.52161 11.2127 6.44031 11.2127C6.35931 11.2127 6.28746 11.2502 6.22476 11.3252L5.11866 12.4124L4.03101 11.3252C3.96861 11.2502 3.89361 11.2127 3.80601 11.2127C3.71871 11.2127 3.64371 11.2502 3.58101 11.3252C3.51861 11.3876 3.48741 11.4626 3.48741 11.5502C3.48741 11.6375 3.51861 11.7125 3.58101 11.7752L4.66866 12.8813L3.58101 13.95C3.51861 14.025 3.48741 14.1063 3.48741 14.1939C3.48741 14.2812 3.51861 14.3624 3.58101 14.4374ZM15.1501 15.3L10.7063 10.8563C10.6061 10.9562 10.481 11.0499 10.331 11.1375C10.181 11.2251 10.0373 11.2938 9.89991 11.3436C9.81231 11.1813 9.71541 11.0094 9.60921 10.8279C9.50301 10.6467 9.38736 10.4811 9.26226 10.3311C9.87486 10.0563 10.3843 9.6345 10.7905 9.0657C11.1967 8.4969 11.3998 7.8312 11.3998 7.0686C11.3998 6.0813 11.053 5.2407 10.3594 4.5468C9.66546 3.8532 8.82486 3.5064 7.83756 3.5064C6.83736 3.5064 5.99046 3.8532 5.29686 4.5468C4.60296 5.2407 4.25601 6.0813 4.25601 7.0686C4.25601 7.2438 4.27161 7.41885 4.30281 7.59375C4.33431 7.76865 4.36881 7.92495 4.40631 8.06265C4.23111 8.08755 4.03101 8.1312 3.80601 8.1936C3.58101 8.2563 3.38106 8.32515 3.20616 8.40015C3.13116 8.21265 3.07806 8.00325 3.04686 7.77195C3.01566 7.54065 3.00006 7.3062 3.00006 7.0686C3.00006 5.7312 3.46881 4.59375 4.40631 3.65625C5.34381 2.71875 6.48756 2.25 7.83756 2.25C9.17496 2.25 10.3124 2.71875 11.2499 3.65625C12.1874 4.59375 12.6562 5.7312 12.6562 7.0686C12.6562 7.6062 12.5656 8.1312 12.3844 8.6436C12.2032 9.1563 11.95 9.6063 11.6248 9.9936L16.0501 14.4C16.1749 14.5251 16.2373 14.6751 16.2373 14.85C16.2373 15.0249 16.1749 15.1749 16.0501 15.3C15.925 15.4251 15.775 15.4877 15.6001 15.4877C15.4249 15.4877 15.2749 15.4251 15.1501 15.3Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/Segment/segment.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+export const Segment = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M7.50556 13.5117C7.29316 13.5117 7.10896 13.4337 6.95296 13.2777C6.79636 13.1211 6.71806 12.9366 6.71806 12.7242C6.71806 12.5118 6.79636 12.3273 6.95296 12.1707C7.10896 12.0147 7.29316 11.9367 7.50556 11.9367H14.9684C15.1808 11.9367 15.3653 12.0147 15.5219 12.1707C15.6778 12.3273 15.7559 12.5118 15.7559 12.7242C15.7559 12.9366 15.6778 13.1211 15.5219 13.2777C15.3653 13.4337 15.1808 13.5117 14.9684 13.5117H7.50556ZM3.04336 6.08672C2.83096 6.08672 2.64646 6.00872 2.48986 5.85272C2.33386 5.69612 2.25586 5.51162 2.25586 5.29922C2.25586 5.08682 2.33386 4.90232 2.48986 4.74572C2.64646 4.58972 2.83096 4.51172 3.04336 4.51172H14.9684C15.1808 4.51172 15.3653 4.58972 15.5219 4.74572C15.6778 4.90232 15.7559 5.08682 15.7559 5.29922C15.7559 5.51162 15.6778 5.69612 15.5219 5.85272C15.3653 6.00872 15.1808 6.08672 14.9684 6.08672H3.04336ZM7.50556 9.79922C7.29316 9.79922 7.10896 9.72119 6.95296 9.56522C6.79636 9.40862 6.71806 9.22412 6.71806 9.01172C6.71806 8.79932 6.79636 8.61482 6.95296 8.45822C7.10896 8.30222 7.29316 8.22422 7.50556 8.22422H14.9684C15.1808 8.22422 15.3653 8.30222 15.5219 8.45822C15.6778 8.61482 15.7559 8.79932 15.7559 9.01172C15.7559 9.22412 15.6778 9.40862 15.5219 9.56522C15.3653 9.72119 15.1808 9.79922 14.9684 9.79922H7.50556Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/SlackIcon/slackIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom Slack icon (socials).
+ */
+
+export const SlackIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M5.3437 10.6877C5.3437 11.3908 4.72495 12.0096 4.02183 12.0096C3.29058 12.0096 2.69995 11.3908 2.69995 10.6877C2.69995 9.95645 3.29058 9.36582 4.02183 9.36582H5.3437V10.6877ZM5.99058 10.6877C5.99058 9.95645 6.60933 9.36582 7.31245 9.36582C8.0437 9.36582 8.63433 9.95645 8.63433 10.6877V13.9783C8.63433 14.7096 8.0437 15.3002 7.31245 15.3002C6.60933 15.3002 5.99058 14.7096 5.99058 13.9783V10.6877ZM7.31245 5.37207C6.60933 5.37207 5.99058 4.75332 5.99058 4.0502C5.99058 3.31895 6.60933 2.7002 7.31245 2.7002C8.0437 2.7002 8.63433 3.31895 8.63433 4.0502V5.37207H7.31245ZM7.31245 6.01895C8.0437 6.01895 8.63433 6.60957 8.63433 7.34082C8.63433 8.07207 8.0437 8.6627 7.31245 8.6627H4.02183C3.29058 8.6627 2.69995 8.07207 2.69995 7.34082C2.69995 6.60957 3.29058 6.01895 4.02183 6.01895H7.31245ZM12.6281 7.34082C12.6281 6.60957 13.2468 6.01895 13.95 6.01895C14.6812 6.01895 15.3 6.60957 15.3 7.34082C15.3 8.07207 14.6812 8.6627 13.95 8.6627H12.6281V7.34082ZM11.9812 7.34082C11.9812 8.07207 11.3906 8.6627 10.6593 8.6627C9.92808 8.6627 9.33745 8.07207 9.33745 7.34082V4.0502C9.33745 3.31895 9.92808 2.7002 10.6593 2.7002C11.3906 2.7002 11.9812 3.31895 11.9812 4.0502V7.34082ZM10.6593 12.6564C11.3906 12.6564 11.9812 13.2752 11.9812 13.9783C11.9812 14.7096 11.3906 15.3002 10.6593 15.3002C9.92808 15.3002 9.33745 14.7096 9.33745 13.9783V12.6564H10.6593ZM10.6593 12.0096C9.92808 12.0096 9.33745 11.3908 9.33745 10.6877C9.33745 9.95645 9.92808 9.36582 10.6593 9.36582H13.95C14.6812 9.36582 15.3 9.95645 15.3 10.6877C15.3 11.3908 14.6812 12.0096 13.95 12.0096H10.6593Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/SouthIcon/southIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom south (back arrow) icon.
+ */
+
+export const SouthIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M1.8192 9.00009C1.8192 8.89989 1.8411 8.79999 1.8849 8.70039C1.9287 8.60019 1.9881 8.51259 2.0631 8.43759L6.1878 4.31289C6.3378 4.16289 6.5223 4.08789 6.7413 4.08789C6.9597 4.08789 7.1439 4.16289 7.2939 4.31289C7.4439 4.46289 7.5189 4.64409 7.5189 4.85649C7.5189 5.06889 7.4439 5.25009 7.2939 5.40009L4.5003 8.21259L15.7125 8.21259C15.9249 8.21259 16.1094 8.29059 16.266 8.44659C16.422 8.60319 16.5 8.78769 16.5 9.00009C16.5 9.21249 16.422 9.39699 16.266 9.55359C16.1094 9.70959 15.9249 9.78759 15.7125 9.78759L4.5003 9.78759L7.2939 12.6001C7.4439 12.7501 7.5189 12.9313 7.5189 13.1437C7.5189 13.3561 7.4439 13.5373 7.2939 13.6873C7.1439 13.8373 6.9597 13.9123 6.7413 13.9123C6.5223 13.9123 6.3378 13.8373 6.1878 13.6873L2.0631 9.56259C1.9881 9.48759 1.9287 9.39999 1.8849 9.29979C1.8411 9.20019 1.8192 9.10029 1.8192 9.00009Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/SuccessIcon/successIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom success icon.
+ */
+
+export const SuccessIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M7.98744 10.2183L6.41244 8.6433C6.26244 8.4933 6.08124 8.4183 5.86884 8.4183C5.65644 8.4183 5.47524 8.4933 5.32524 8.6433C5.16264 8.8059 5.08134 8.9967 5.08134 9.2157C5.08134 9.4341 5.15634 9.6183 5.30634 9.7683L7.40604 11.8689C7.56864 12.0309 7.75614 12.1119 7.96854 12.1119C8.18094 12.1119 8.36844 12.0309 8.53104 11.8689L12.7124 7.6875C12.8498 7.5495 12.8843 7.3839 12.8159 7.1907C12.7469 6.9969 12.7124 6.7998 12.7124 6.5994C12.5624 6.4494 12.3779 6.3744 12.1589 6.3744C11.9405 6.3744 11.7563 6.4494 11.6063 6.5994L7.98744 10.2183ZM8.99994 16.4994C7.96254 16.4994 6.98754 16.3026 6.07494 15.909C5.16234 15.5154 4.36854 14.9811 3.69354 14.3061C3.01854 13.6311 2.48424 12.8373 2.09064 11.9247C1.69704 11.0121 1.50024 10.0371 1.50024 8.9997C1.50024 7.9623 1.69704 6.9873 2.09064 6.0747C2.48424 5.1621 3.01854 4.3683 3.69354 3.6933C4.36854 3.0183 5.16234 2.484 6.07494 2.0904C6.98754 1.6968 7.96254 1.5 8.99994 1.5C10.0373 1.5 11.0123 1.6968 11.9249 2.0904C12.8375 2.484 13.6313 3.0183 14.3063 3.6933C14.9813 4.3683 15.5156 5.1621 15.9092 6.0747C16.3028 6.9873 16.4996 7.9623 16.4996 8.9997C16.4996 10.0371 16.3028 11.0121 15.9092 11.9247C15.5156 12.8373 14.9813 13.6311 14.3063 14.3061C13.6313 14.9811 12.8375 15.5154 11.9249 15.909C11.0123 16.3026 10.0373 16.4994 8.99994 16.4994Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon.tsx

@@ -0,0 +1,27 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom unchecked error icon.
+ */
+
+export const UncheckedErrorIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <rect
+        fill="#FED3D1"
+        height="17"
+        rx="3.5"
+        stroke="#B42318"
+        width="17"
+        x="0.5"
+        y="0.5"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/UncheckedIcon/uncheckedIcon.tsx

@@ -0,0 +1,27 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom unchecked icon.
+ */
+
+export const UncheckedIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <rect
+        fill="white"
+        height="17"
+        rx="3.5"
+        stroke="currentColor"
+        width="17"
+        x="0.5"
+        y="0.5"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom unfold more icon.
+ */
+
+export const UnfoldMoreIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M6.1686 6.24453C6.0186 6.09453 5.9436 5.91303 5.9436 5.70003C5.9436 5.48763 6.0186 5.30643 6.1686 5.15643L8.4375 2.88753C8.5251 2.79993 8.6157 2.73753 8.7093 2.70033C8.8029 2.66313 8.8998 2.64453 9 2.64453C9.1002 2.64453 9.2001 2.66313 9.2997 2.70033C9.3999 2.73753 9.4875 2.79993 9.5625 2.88753L11.8314 5.15643C11.9814 5.30643 12.0564 5.48763 12.0564 5.70003C12.0564 5.91303 11.9814 6.09453 11.8314 6.24453C11.6814 6.39453 11.5002 6.46953 11.2878 6.46953C11.0754 6.46953 10.8942 6.39453 10.7442 6.24453L9 4.50033L7.2558 6.24453C7.1058 6.39453 6.9246 6.46953 6.7122 6.46953C6.4998 6.46953 6.3186 6.39453 6.1686 6.24453ZM9 15.4317C8.8998 15.4317 8.8029 15.4098 8.7093 15.366C8.6157 15.3222 8.5251 15.2628 8.4375 15.1878L6.1686 12.9189C6.0186 12.7689 5.9436 12.5877 5.9436 12.3753C5.9436 12.1629 6.0186 11.9817 6.1686 11.8317C6.3186 11.6817 6.4998 11.6067 6.7122 11.6067C6.9246 11.6067 7.1058 11.6817 7.2558 11.8317L9 13.575L10.7442 11.8317C10.8942 11.6817 11.0754 11.6067 11.2878 11.6067C11.5002 11.6067 11.6814 11.6817 11.8314 11.8317C11.9814 11.9817 12.0564 12.1629 12.0564 12.3753C12.0564 12.5877 11.9814 12.7689 11.8314 12.9189L9.5625 15.1878C9.4875 15.2628 9.3999 15.3222 9.2997 15.366C9.2001 15.4098 9.1002 15.4317 9 15.4317Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/WarningIcon/warningIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom warning icon.
+ */
+
+export const WarningIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M8.99994 9.7125C9.21234 9.7125 9.39684 9.6342 9.55344 9.4776C9.70944 9.3216 9.78744 9.1374 9.78744 8.925V6.0369C9.78744 5.8245 9.70944 5.6433 9.55344 5.4933C9.39684 5.3433 9.21234 5.2683 8.99994 5.2683C8.78754 5.2683 8.60304 5.3466 8.44644 5.5032C8.29044 5.6592 8.21244 5.8434 8.21244 6.0558V8.9439C8.21244 9.1563 8.29044 9.3375 8.44644 9.4875C8.60304 9.6375 8.78754 9.7125 8.99994 9.7125ZM8.99994 12.7689C9.21234 12.7689 9.39684 12.6969 9.55344 12.5529C9.70944 12.4089 9.78744 12.2181 9.78744 11.9805C9.78744 11.7681 9.70944 11.5839 9.55344 11.4279C9.39684 11.2719 9.21234 11.1939 8.99994 11.1939C8.78754 11.1939 8.60304 11.2719 8.44644 11.4279C8.29044 11.5839 8.21244 11.7681 8.21244 11.9805C8.21244 12.2181 8.29044 12.4089 8.44644 12.5529C8.60304 12.6969 8.78754 12.7689 8.99994 12.7689ZM8.99994 16.4994C7.96254 16.4994 6.98754 16.3026 6.07494 15.909C5.16234 15.5154 4.36854 14.9811 3.69354 14.3061C3.01854 13.6311 2.48424 12.8373 2.09064 11.9247C1.69704 11.0121 1.50024 10.0371 1.50024 8.9997C1.50024 7.9623 1.69704 6.9873 2.09064 6.0747C2.48424 5.1621 3.01854 4.3683 3.69354 3.6933C4.36854 3.0183 5.16234 2.484 6.07494 2.0904C6.98754 1.6968 7.96254 1.5 8.99994 1.5C10.0373 1.5 11.0123 1.6968 11.9249 2.0904C12.8375 2.484 13.6313 3.0183 14.3063 3.6933C14.9813 4.3683 15.5156 5.1621 15.9092 6.0747C16.3028 6.9873 16.4996 7.9623 16.4996 8.9997C16.4996 10.0371 16.3028 11.0121 15.9092 11.9247C15.5156 12.8373 14.9813 13.6311 14.3063 14.3061C13.6313 14.9811 12.8375 15.5154 11.9249 15.909C11.0123 16.3026 10.0373 16.4994 8.99994 16.4994Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};