From 70ef415ecef97695abfb92e64fd9aae7f309e4e4 Mon Sep 17 00:00:00 2001
From: "maxim.voloshin" <mvoloshin0458@gmail.com>
Date: Tue, 28 Mar 2023 11:03:03 +0300
Subject: [PATCH] add error boundary

---
 .../types/components/ErrorPage/ErrorPage.d.ts |    2 +-
 .../types/components/ErrorPage/ErrorPage.d.ts |    2 +-
 dist/index.d.ts                               |    2 +-
 dist/style/theme.scss                         | 2332 ++++++++---------
 src/components/CloseButton/closeButton.scss   |    6 +-
 src/components/ErrorPage/ErrorPage.tsx        |    2 +-
 6 files changed, 1173 insertions(+), 1173 deletions(-)

diff --git a/dist/cjs/types/components/ErrorPage/ErrorPage.d.ts b/dist/cjs/types/components/ErrorPage/ErrorPage.d.ts
index 0ab3af00..ac12a29b 100644
--- a/dist/cjs/types/components/ErrorPage/ErrorPage.d.ts
+++ b/dist/cjs/types/components/ErrorPage/ErrorPage.d.ts
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import './errorPage.scss';
 interface ErrorPageProps {
-    error: ReactNode | string;
+    error?: ReactNode | string;
 }
 declare function ErrorPage({ error }: ErrorPageProps): JSX.Element;
 export default ErrorPage;
diff --git a/dist/esm/types/components/ErrorPage/ErrorPage.d.ts b/dist/esm/types/components/ErrorPage/ErrorPage.d.ts
index 0ab3af00..ac12a29b 100644
--- a/dist/esm/types/components/ErrorPage/ErrorPage.d.ts
+++ b/dist/esm/types/components/ErrorPage/ErrorPage.d.ts
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import './errorPage.scss';
 interface ErrorPageProps {
-    error: ReactNode | string;
+    error?: ReactNode | string;
 }
 declare function ErrorPage({ error }: ErrorPageProps): JSX.Element;
 export default ErrorPage;
diff --git a/dist/index.d.ts b/dist/index.d.ts
index bec53957..4d172cf3 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -43,7 +43,7 @@ interface EmptyPageMessageProps {
 declare function EmptyPageMessage({ children }: EmptyPageMessageProps): JSX.Element;
 
 interface ErrorPageProps {
-    error: ReactNode | string;
+    error?: ReactNode | string;
 }
 declare function ErrorPage({ error }: ErrorPageProps): JSX.Element;
 
diff --git a/dist/style/theme.scss b/dist/style/theme.scss
index 93576ba7..d5a5d687 100644
--- a/dist/style/theme.scss
+++ b/dist/style/theme.scss
@@ -626,17 +626,89 @@ body.dark-mode {
 
 .dark-mode .heading-2 {
   color: var(--ironhide-s1);
-}.capacity-bar {
-  width: 100%;
-  height: 8px;
-  border-radius: 11px;
-  background: var(--ironhide-t1);
-  overflow: hidden;
-  display: flex;
+}.datetime-picker {
+  width: var(--input-width);
+  color: var(--text-color);
+  height: 48px;
+  position: relative;
 }
-.capacity-bar .usage {
+.datetime-picker-no-label {
+  height: 38px;
+}
+.datetime-picker .picker-label {
+  position: relative;
+  padding: 3px 10px 6px 10px;
+  border: 1px solid var(--ironhide-t1);
+  background-color: var(--input-background);
+  border-radius: 4px;
+  color: var(--ironhide-s4);
+  font-size: 17px;
+  white-space: nowrap;
   height: 100%;
-  transition: width 0.5s;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.datetime-picker .picker-label.has-error {
+  border: 1px solid var(--focus-key);
+}
+.datetime-picker .picker-label svg {
+  position: absolute;
+  top: calc(50% - 6px);
+  right: 12px;
+  height: 11px;
+  width: 12px;
+}
+.datetime-picker .picker-label svg path {
+  fill: var(--main-color);
+}
+.datetime-picker .picker-label .picker-label-title {
+  color: var(--ironhide-s2);
+  font-size: 12px;
+  font-weight: bold;
+  font-family: var(--bold-font);
+  line-height: 16px;
+  user-select: none;
+}
+.datetime-picker .picker-label-show-calendar svg {
+  top: calc(50% - 9px);
+  right: 9px;
+  height: 16px;
+  width: 16px;
+}
+.datetime-picker .picker-label-disabled {
+  pointer-events: none;
+  background-color: var(--ironhide-t2);
+}
+.datetime-picker .picker-label-disabled svg path {
+  fill: var(--ironhide-key);
+}
+.datetime-picker .picker-no-label {
+  padding: 6px 10px 3px 10px;
+}
+.datetime-picker .picker-label-active {
+  border: 1px solid var(--main-color);
+}
+.datetime-picker .picker-label-active svg path {
+  fill: var(--main-color);
+}
+.datetime-picker .picker-label-active .picker-label-title {
+  color: var(--main-color);
+}
+.datetime-picker-error {
+  position: absolute;
+  bottom: -16px;
+  left: 3px;
+  font-size: 12px;
+  color: var(--focus-key);
+  white-space: nowrap;
+  text-transform: capitalize;
+}
+
+.date-time-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--text-color);
 }.react-table-wrapper {
   display: flex;
   flex-direction: column;
@@ -903,89 +975,71 @@ body.dark-mode {
 }
 .react-table-wrapper .footer .pagination-wrapper .pagination svg[disabled] path {
   fill: var(--ironhide-key);
-}.datetime-picker {
-  width: var(--input-width);
-  color: var(--text-color);
-  height: 48px;
-  position: relative;
-}
-.datetime-picker-no-label {
-  height: 38px;
+}.tooltip-wrapper {
+  display: block;
+  white-space: pre-line;
+  padding: var(--spread) var(--spread2) !important;
+  font-size: 14px !important;
+  color: var(--text-color) !important;
+  border: 1px solid var(--accent-t3);
+  background-color: var(--accent-t5) !important;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
 }
-.datetime-picker .picker-label {
-  position: relative;
-  padding: 3px 10px 6px 10px;
-  border: 1px solid var(--ironhide-t1);
-  background-color: var(--input-background);
-  border-radius: 4px;
-  color: var(--ironhide-s4);
-  font-size: 17px;
-  white-space: nowrap;
-  height: 100%;
-  cursor: pointer;
-  box-sizing: border-box;
+.tooltip-wrapper.clear-tooltip {
+  background-color: transparent !important;
+  padding: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
 }
-.datetime-picker .picker-label.has-error {
-  border: 1px solid var(--focus-key);
+.tooltip-wrapper .tooltip-arrow {
+  color: var(--accent-t5);
 }
-.datetime-picker .picker-label svg {
-  position: absolute;
-  top: calc(50% - 6px);
-  right: 12px;
-  height: 11px;
-  width: 12px;
+.tooltip-wrapper .tooltip-arrow::before {
+  background-color: var(--accent-t5);
+  border: 1px solid var(--accent-t3);
+  box-shadow: 0 2px 2px var(--accent-t3) !important;
 }
-.datetime-picker .picker-label svg path {
-  fill: var(--main-color);
+
+.dark-mode .tooltip-wrapper {
+  background-color: var(--ironhide-t3) !important;
+  border: 1px solid var(--ironhide-t1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
 }
-.datetime-picker .picker-label .picker-label-title {
-  color: var(--ironhide-s2);
-  font-size: 12px;
-  font-weight: bold;
-  font-family: var(--bold-font);
-  line-height: 16px;
-  user-select: none;
+.dark-mode .tooltip-wrapper .tooltip-arrow {
+  color: var(--ironhide-t3);
 }
-.datetime-picker .picker-label-show-calendar svg {
-  top: calc(50% - 9px);
-  right: 9px;
+.dark-mode .tooltip-wrapper .tooltip-arrow::before {
+  background-color: var(--ironhide-t3);
+  border: 1px solid var(--ironhide-t1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
+}.component-info {
   height: 16px;
   width: 16px;
+}.empty-page-message {
+  font-size: 24px;
+  color: var(--ironhide-s3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1;
+}.Toastify__close-button {
+  opacity: 1 !important;
+  width: 26px;
+  height: 26px;
+  position: absolute !important;
+  top: 2px;
+  right: 2px;
 }
-.datetime-picker .picker-label-disabled {
-  pointer-events: none;
-  background-color: var(--ironhide-t2);
-}
-.datetime-picker .picker-label-disabled svg path {
-  fill: var(--ironhide-key);
-}
-.datetime-picker .picker-no-label {
-  padding: 6px 10px 3px 10px;
-}
-.datetime-picker .picker-label-active {
-  border: 1px solid var(--main-color);
-}
-.datetime-picker .picker-label-active svg path {
-  fill: var(--main-color);
-}
-.datetime-picker .picker-label-active .picker-label-title {
-  color: var(--main-color);
+.Toastify__close-button:hover {
+  background-color: rgba(0, 0, 0, 0.0392156863) !important;
 }
-.datetime-picker-error {
-  position: absolute;
-  bottom: -16px;
-  left: 3px;
-  font-size: 12px;
-  color: var(--focus-key);
-  white-space: nowrap;
-  text-transform: capitalize;
+.Toastify__close-button svg path {
+  fill: var(--toast-text) !important;
 }
 
-.date-time-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: var(--text-color);
+.Toastify__close-button > svg {
+  height: 12px !important;
+  width: 12px !important;
 }.circular-progress-wrapper {
   position: relative;
 }
@@ -1020,46 +1074,39 @@ body.dark-mode {
   to {
     stroke-dashoffset: var(--dashoffset);
   }
-}.Toastify__close-button {
-  opacity: 1 !important;
-  width: 26px;
-  height: 26px;
-  position: absolute;
-  top: 2px;
-  right: 2px;
+}.json-editor-wrapper {
+  position: relative;
+  flex: 1;
+  padding-top: 16px;
 }
-.Toastify__close-button:hover {
-  background-color: rgba(0, 0, 0, 0.0392156863);
+.json-editor-wrapper.read-only {
+  background: var(--ironhide-t3);
 }
-.Toastify__close-button svg path {
-  fill: var(--toast-text);
+.json-editor-wrapper.read-only .ace_cursor {
+  color: transparent !important;
 }
-
-.Toastify__close-button > svg {
-  height: 12px !important;
-  width: 12px !important;
-}.component-info {
-  height: 16px;
-  width: 16px;
-}.error-page-wrapper {
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0px 52px;
-  background-color: var(--ironhide-t3);
-}.empty-page-message {
-  font-size: 24px;
-  color: var(--ironhide-s3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 1;
-}.span-tooltip {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}.button {
+.json-editor-wrapper .ace_editor {
+  background-color: transparent;
+  color: var(--text-color);
+}
+.json-editor-wrapper .ace_editor .ace_variable {
+  color: var(--optimus-s2);
+}
+.json-editor-wrapper .ace_editor .ace_string, .json-editor-wrapper .ace_editor .ace_constant, .json-editor-wrapper .ace_editor .ace_numeric {
+  color: var(--complement-key) !important;
+}
+.json-editor-wrapper .ace_editor .ace_paren, .json-editor-wrapper .ace_editor .ace_punctuation, .json-editor-wrapper .ace_editor .ace_operator, .json-editor-wrapper .ace_editor .ace_cursor {
+  color: var(--text-color);
+}
+.json-editor-wrapper .ace_editor .ace_gutter {
+  background: none;
+}
+.json-editor-wrapper .ace_editor .ace_gutter-cell {
+  color: var(--ironhide-key);
+}
+.json-editor-wrapper .ace_editor .ace_gutter-active-line {
+  background-color: transparent;
+}.button {
   border-radius: 4px;
   min-width: 98px;
   height: 32px;
@@ -1121,18 +1168,216 @@ body.dark-mode {
 
 .dark-mode .button.empty {
   color: var(--text-color);
-}.password-min-demand {
-  font-size: 12px;
+}.loader-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  flex: 1;
+}
+.loader-wrapper .loading-bar {
+  width: 130px;
+  height: 4px;
+  margin: 0 auto;
+  border-radius: 4px;
+  background-color: var(--ironhide-key);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  transform: rotateY(0);
+  transition: transform 0.3s ease-in;
+}
+.loader-wrapper .loading-bar .fill-bar {
+  height: 100%;
+  width: 68px;
+  position: absolute;
+  transform: translate(-34px);
+  background-color: var(--main-color);
+  border-radius: 2px;
+  animation: loading 1.5s ease infinite;
+}
+
+@keyframes loading {
+  0% {
+    transform: translate(-34px);
+  }
+  50% {
+    transform: translate(96px);
+  }
+  100% {
+    transform: translate(-34px);
+  }
+}.popper-wrapper .MuiPaper-root {
+  background-color: var(--neutral-t4);
+}
+.popper-wrapper .menu-popper {
+  border-radius: 8px;
+  border: 1px solid var(--main-color) !important;
+  border-bottom: 1px solid;
+  margin: 0 var(--spread);
+}
+.popper-wrapper .menu-popper .menu-popper-item-wrapper .menu-popper-item {
+  font-family: var(--acumin-pro);
+  display: flex;
+  flex-direction: column;
+  padding: 8px 16px;
+  align-items: flex-start;
+  min-width: 150px;
+}
+.popper-wrapper .menu-popper .menu-popper-item-wrapper .separator {
+  border-bottom: 1px solid var(--ironhide-t1);
+  margin: 0 var(--spread);
+  box-sizing: border-box;
+}
+.popper-wrapper .menu-popper .menu-popper-item-wrapper:only-child {
+  border-radius: 8px !important;
+}
+.popper-wrapper .menu-popper .menu-popper-item-wrapper:first-child {
+  border-radius: 8px 8px 0px 0px;
+}
+.popper-wrapper .menu-popper .menu-popper-item-wrapper:last-child {
+  border-radius: 0px 0px 8px 8px;
+}
+.popper-wrapper .menu-popper .menu-popper-item-wrapper:last-child .separator {
+  border: none;
+}
+.popper-wrapper .menu-popper .menu-popper-item-wrapper:not(.submenu-header):hover {
+  background-color: var(--ironhide-t3);
+}
+.popper-wrapper .menu-popper .submenu-header .menu-popper-item {
+  padding: 8px 16px 4px 16px;
+  cursor: default;
+}
+.popper-wrapper .menu-popper .submenu-header .menu-popper-item:hover {
+  background-color: transparent;
+}
+.popper-wrapper .menu-popper .submenu-header .separator {
+  border: none;
+}
+.popper-wrapper .menu-popper .submenu-content:hover {
+  background-color: transparent !important;
+}
+.popper-wrapper .menu-popper .submenu-content .menu-popper-item {
+  padding-top: 3px;
+  padding-bottom: 4px;
+}
+.popper-wrapper .menu-popper .submenu-content .menu-popper-item:hover {
+  background-color: var(--ironhide-t3);
+}
+.popper-wrapper .menu-popper .submenu-content .menu-popper-item .locator-content {
+  padding-left: 20px;
+  color: var(--ironhide-s3);
+  display: flex;
+  justify-content: space-between;
+}
+.popper-wrapper .menu-popper .submenu-content .menu-popper-item .locator-content .locator-path {
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.popper-wrapper .menu-popper .no-border .separator {
+  border: none;
+}
+.popper-wrapper .menu-popper-calendar {
+  margin-top: 2px;
+  border-radius: 4px;
+  width: 298px;
+}.span-tooltip {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}.custom-tab {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 24px 4px 24px;
+  min-width: 108px;
+  cursor: pointer;
+  border-bottom: solid transparent 4px;
+  box-sizing: border-box;
+  transition: background-color 0.5s, border-bottom-color 0.25s;
+  height: 100%;
+}
+.custom-tab:hover {
+  background-color: var(--ironhide-t3);
+}
+.custom-tab.disabled {
+  color: var(--ironhide-key);
+  pointer-events: none;
+}
+.custom-tab.tab-active {
+  background-color: var(--active-tab-bg);
+  border-bottom: solid var(--main-color) 4px;
+}
+.custom-tab.tab-active .tab-title {
+  color: var(--main-color);
+}
+.custom-tab .tab-title {
+  color: var(--ironhide-s3);
+  font-weight: bold;
+  font-family: var(--bold-font);
+  font-size: 14px;
+  text-transform: uppercase;
+}
+.custom-tab .tab-subtitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 11px;
+}
+.custom-tab .tab-subtitle svg {
+  margin-right: 3px;
+  width: 10px;
+}
+.custom-tab-side {
+  width: 100%;
   margin: 0;
+  display: flex;
+  align-items: flex-start;
+  padding: 16px 0px 16px 24px;
+  border-bottom: 1px solid var(--ironhide-key) !important;
+  border-right: 4px solid transparent;
 }
-.password-min-demand .demand-headline {
-  font-size: 16px;
-  margin-bottom: 4px;
+.custom-tab-side.tab-active {
+  background-color: var(--ironhide-t3);
+  border-right: 4px solid var(--main-color);
 }
-.password-min-demand .valid {
+.custom-tab-side.tab-active .settings-icon path {
+  fill: var(--main-color);
+}
+.custom-tab-side .tab-title {
+  font-size: 20px;
+  text-align: center;
+  text-transform: capitalize;
+}
+.custom-tab-side .tab-subtitle {
+  font-size: 14px;
+}
+.custom-tab-side .tab-configured {
   color: var(--complement-key);
+}
+.custom-tab-side .tab-configured path {
+  fill: var(--complement-key);
+}
+.custom-tab-side .tab-not-configured {
+  color: var(--ironhide-s2);
+}
+.custom-tab-side .tab-not-configured path {
+  fill: var(--ironhide-s2);
+}
+
+.dark-mode .custom-tab .tab-title {
+  color: var(--text-color);
+}.error-page-wrapper {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 52px;
+  background-color: var(--ironhide-t3);
 }.toggle-btn {
   position: relative;
   width: 45px;
@@ -1218,6 +1463,29 @@ body.dark-mode {
 
 .toggle-btn input[type=checkbox]:checked + span {
   background-color: var(--accent-s1);
+}.capacity-bar {
+  width: 100%;
+  height: 8px;
+  border-radius: 11px;
+  background: var(--ironhide-t1);
+  overflow: hidden;
+  display: flex;
+}
+.capacity-bar .usage {
+  height: 100%;
+  transition: width 0.5s;
+}.password-min-demand {
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+.password-min-demand .demand-headline {
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+.password-min-demand .valid {
+  color: var(--complement-key);
 }.Toastify__toast {
   width: fit-content;
   min-width: 320px;
@@ -1293,121 +1561,6 @@ body.dark-mode {
 }
 .toast-wrapper .toast-copy svg path {
   fill: var(--toast-text);
-}.json-editor-wrapper {
-  position: relative;
-  flex: 1;
-  padding-top: 16px;
-}
-.json-editor-wrapper.read-only {
-  background: var(--ironhide-t3);
-}
-.json-editor-wrapper.read-only .ace_cursor {
-  color: transparent !important;
-}
-.json-editor-wrapper .ace_editor {
-  background-color: transparent;
-  color: var(--text-color);
-}
-.json-editor-wrapper .ace_editor .ace_variable {
-  color: var(--optimus-s2);
-}
-.json-editor-wrapper .ace_editor .ace_string, .json-editor-wrapper .ace_editor .ace_constant, .json-editor-wrapper .ace_editor .ace_numeric {
-  color: var(--complement-key) !important;
-}
-.json-editor-wrapper .ace_editor .ace_paren, .json-editor-wrapper .ace_editor .ace_punctuation, .json-editor-wrapper .ace_editor .ace_operator, .json-editor-wrapper .ace_editor .ace_cursor {
-  color: var(--text-color);
-}
-.json-editor-wrapper .ace_editor .ace_gutter {
-  background: none;
-}
-.json-editor-wrapper .ace_editor .ace_gutter-cell {
-  color: var(--ironhide-key);
-}
-.json-editor-wrapper .ace_editor .ace_gutter-active-line {
-  background-color: transparent;
-}.custom-tab {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 24px 4px 24px;
-  min-width: 108px;
-  cursor: pointer;
-  border-bottom: solid transparent 4px;
-  box-sizing: border-box;
-  transition: background-color 0.5s, border-bottom-color 0.25s;
-  height: 100%;
-}
-.custom-tab:hover {
-  background-color: var(--ironhide-t3);
-}
-.custom-tab.disabled {
-  color: var(--ironhide-key);
-  pointer-events: none;
-}
-.custom-tab.tab-active {
-  background-color: var(--active-tab-bg);
-  border-bottom: solid var(--main-color) 4px;
-}
-.custom-tab.tab-active .tab-title {
-  color: var(--main-color);
-}
-.custom-tab .tab-title {
-  color: var(--ironhide-s3);
-  font-weight: bold;
-  font-family: var(--bold-font);
-  font-size: 14px;
-  text-transform: uppercase;
-}
-.custom-tab .tab-subtitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 11px;
-}
-.custom-tab .tab-subtitle svg {
-  margin-right: 3px;
-  width: 10px;
-}
-.custom-tab-side {
-  width: 100%;
-  margin: 0;
-  display: flex;
-  align-items: flex-start;
-  padding: 16px 0px 16px 24px;
-  border-bottom: 1px solid var(--ironhide-key) !important;
-  border-right: 4px solid transparent;
-}
-.custom-tab-side.tab-active {
-  background-color: var(--ironhide-t3);
-  border-right: 4px solid var(--main-color);
-}
-.custom-tab-side.tab-active .settings-icon path {
-  fill: var(--main-color);
-}
-.custom-tab-side .tab-title {
-  font-size: 20px;
-  text-align: center;
-  text-transform: capitalize;
-}
-.custom-tab-side .tab-subtitle {
-  font-size: 14px;
-}
-.custom-tab-side .tab-configured {
-  color: var(--complement-key);
-}
-.custom-tab-side .tab-configured path {
-  fill: var(--complement-key);
-}
-.custom-tab-side .tab-not-configured {
-  color: var(--ironhide-s2);
-}
-.custom-tab-side .tab-not-configured path {
-  fill: var(--ironhide-s2);
-}
-
-.dark-mode .custom-tab .tab-title {
-  color: var(--text-color);
 }.toggle-button {
   cursor: pointer;
   border-radius: 5px;
@@ -1443,159 +1596,22 @@ body.dark-mode {
 }
 .toggle-button-option-selected {
   color: var(--neutral-t4);
-}.popper-wrapper .MuiPaper-root {
-  background-color: var(--neutral-t4);
-}
-.popper-wrapper .menu-popper {
-  border-radius: 8px;
-  border: 1px solid var(--main-color) !important;
-  border-bottom: 1px solid;
-  margin: 0 var(--spread);
-}
-.popper-wrapper .menu-popper .menu-popper-item-wrapper .menu-popper-item {
-  font-family: var(--acumin-pro);
-  display: flex;
-  flex-direction: column;
-  padding: 8px 16px;
-  align-items: flex-start;
-  min-width: 150px;
-}
-.popper-wrapper .menu-popper .menu-popper-item-wrapper .separator {
-  border-bottom: 1px solid var(--ironhide-t1);
-  margin: 0 var(--spread);
-  box-sizing: border-box;
-}
-.popper-wrapper .menu-popper .menu-popper-item-wrapper:only-child {
-  border-radius: 8px !important;
-}
-.popper-wrapper .menu-popper .menu-popper-item-wrapper:first-child {
-  border-radius: 8px 8px 0px 0px;
-}
-.popper-wrapper .menu-popper .menu-popper-item-wrapper:last-child {
-  border-radius: 0px 0px 8px 8px;
-}
-.popper-wrapper .menu-popper .menu-popper-item-wrapper:last-child .separator {
-  border: none;
-}
-.popper-wrapper .menu-popper .menu-popper-item-wrapper:not(.submenu-header):hover {
-  background-color: var(--ironhide-t3);
-}
-.popper-wrapper .menu-popper .submenu-header .menu-popper-item {
-  padding: 8px 16px 4px 16px;
-  cursor: default;
-}
-.popper-wrapper .menu-popper .submenu-header .menu-popper-item:hover {
-  background-color: transparent;
-}
-.popper-wrapper .menu-popper .submenu-header .separator {
-  border: none;
-}
-.popper-wrapper .menu-popper .submenu-content:hover {
-  background-color: transparent !important;
-}
-.popper-wrapper .menu-popper .submenu-content .menu-popper-item {
-  padding-top: 3px;
-  padding-bottom: 4px;
-}
-.popper-wrapper .menu-popper .submenu-content .menu-popper-item:hover {
-  background-color: var(--ironhide-t3);
-}
-.popper-wrapper .menu-popper .submenu-content .menu-popper-item .locator-content {
-  padding-left: 20px;
-  color: var(--ironhide-s3);
-  display: flex;
-  justify-content: space-between;
-}
-.popper-wrapper .menu-popper .submenu-content .menu-popper-item .locator-content .locator-path {
-  max-width: 100px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.popper-wrapper .menu-popper .no-border .separator {
-  border: none;
-}
-.popper-wrapper .menu-popper-calendar {
-  margin-top: 2px;
-  border-radius: 4px;
-  width: 298px;
-}.loader-wrapper {
-  height: 100%;
-  width: 100%;
+}.filter-icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
-  flex: 1;
-}
-.loader-wrapper .loading-bar {
-  width: 130px;
-  height: 4px;
-  margin: 0 auto;
-  border-radius: 4px;
-  background-color: var(--ironhide-key);
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  transform: rotateY(0);
-  transition: transform 0.3s ease-in;
-}
-.loader-wrapper .loading-bar .fill-bar {
-  height: 100%;
-  width: 68px;
-  position: absolute;
-  transform: translate(-34px);
-  background-color: var(--main-color);
-  border-radius: 2px;
-  animation: loading 1.5s ease infinite;
 }
 
-@keyframes loading {
-  0% {
-    transform: translate(-34px);
-  }
-  50% {
-    transform: translate(96px);
-  }
-  100% {
-    transform: translate(-34px);
-  }
-}.tooltip-wrapper {
-  display: block;
-  white-space: pre-line;
-  padding: var(--spread) var(--spread2) !important;
-  font-size: 14px !important;
-  color: var(--text-color) !important;
-  border: 1px solid var(--accent-t3);
-  background-color: var(--accent-t5) !important;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
-}
-.tooltip-wrapper.clear-tooltip {
-  background-color: transparent !important;
-  padding: 0 !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-.tooltip-wrapper .tooltip-arrow {
-  color: var(--accent-t5);
-}
-.tooltip-wrapper .tooltip-arrow::before {
-  background-color: var(--accent-t5);
-  border: 1px solid var(--accent-t3);
-  box-shadow: 0 2px 2px var(--accent-t3) !important;
+.filter-icon {
+  width: 16px !important;
+  height: 16px !important;
 }
 
-.dark-mode .tooltip-wrapper {
-  background-color: var(--ironhide-t3) !important;
-  border: 1px solid var(--ironhide-t1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
-}
-.dark-mode .tooltip-wrapper .tooltip-arrow {
-  color: var(--ironhide-t3);
+.filter-btn {
+  min-width: 40px !important;
 }
-.dark-mode .tooltip-wrapper .tooltip-arrow::before {
-  background-color: var(--ironhide-t3);
-  border: 1px solid var(--ironhide-t1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
+.filter-btn svg {
+  margin-right: 0 !important;
 }.box-filter-container {
   display: inline-flex;
   flex-direction: column;
@@ -1632,22 +1648,16 @@ body.dark-mode {
   word-break: break-word;
   max-height: 20px;
   overflow-y: auto;
-}.filter-icon-wrapper {
+}.per-page {
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.filter-icon {
-  width: 16px !important;
-  height: 16px !important;
+  gap: 8px;
 }
-
-.filter-btn {
-  min-width: 40px !important;
+.per-page-select {
+  width: 92px !important;
 }
-.filter-btn svg {
-  margin-right: 0 !important;
+.per-page-select .react-select__dropdown-indicator .indicatorContainer {
+  padding: 4px !important;
 }.pagination-footer {
   flex: 1;
   align-items: flex-end;
@@ -1677,65 +1687,8 @@ body.dark-mode {
 }
 .pagination-footer .pagination-wrapper .pagination svg[disabled] path {
   fill: var(--ironhide-key);
-}.per-page {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.per-page-select {
-  width: 92px !important;
-}
-.per-page-select .react-select__dropdown-indicator .indicatorContainer {
-  padding: 4px !important;
-}.table-text-filter {
-  background: var(--ironhide-t4) no-repeat padding-box;
-  border: 1px solid var(--ironhide-t1);
-  border-radius: 4px;
-  height: 32px;
-  font-size: 14px;
-  box-sizing: border-box;
-  color: var(--text-color);
 }.table-select-filter {
   padding: 1px 1px;
-}.table-row-actions .actions-btn svg {
-  height: 16px;
-  width: 16px;
-}
-.table-row-actions-empty {
-  width: 30px;
-}.severity-filter {
-  padding: var(--spread) 0;
-  border: 1px solid var(--main-color);
-  border-radius: 8px;
-}
-.severity-filter .heading-4 {
-  margin-left: 12px;
-}
-.severity-filter .severity-wrapper {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  padding: 3px var(--spread);
-  color: var(--text-color);
-  margin-top: 4px;
-  cursor: pointer;
-}
-.severity-filter .severity-wrapper:hover {
-  background-color: var(--ironhide-t1);
-}
-.severity-filter .severity-wrapper svg {
-  height: 24px;
-  width: 24px;
-  padding-right: 8px;
-}
-.severity-filter .severity-wrapper svg path {
-  fill: var(--accent-s2);
-}
-.severity-filter .severity-wrapper.warning svg path, .severity-filter .severity-wrapper.minor svg path {
-  fill: var(--optimus-s2);
-}
-.severity-filter .severity-wrapper.major svg path, .severity-filter .severity-wrapper.critical svg path {
-  fill: var(--focus-s1);
 }.table-multi-select-filter {
   padding: 1px 1px;
 }
@@ -1762,61 +1715,22 @@ body.dark-mode {
 }
 .table-multi-select-filter .selected-options-wrapper .selected-option svg:hover path {
   fill: var(--main-color);
-}.filter-table-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.filter-table-header.no-title {
-  justify-content: center;
-}
-.filter-table-header.no-title svg {
-  margin-right: 0;
-}
-.filter-table-header svg {
-  height: 16px;
-  width: 16px;
-  margin-left: 4px;
-  cursor: pointer;
-}
-.filter-table-header svg path {
-  fill: var(--ironhide-s2);
-}.capacity-cell {
-  width: 90%;
-  height: 36px;
+}.date-filter-wrapper {
+  padding: var(--spread2);
+  border: 1px solid var(--main-color);
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  gap: 16px;
 }
-.capacity-cell-headline {
+
+.date-filter-controller {
   display: flex;
-  align-items: center;
-  padding-bottom: 2px;
-  width: 100%;
-  justify-content: space-between;
-}
-.capacity-cell-headline .thin-provision {
-  border-radius: 50%;
-  font-size: 11px;
-  padding: 4px;
-  color: var(--neutral-t4);
-  font-weight: bold;
-  font-family: var(--bold-font);
-  background-color: var(--accent-key);
-  margin-left: 4px;
-  cursor: default;
-  height: 14px;
-  min-width: 14px;
-  position: relative;
-}
-.capacity-cell-headline .thin-provision::after {
-  content: "TP";
-  position: absolute;
-  top: 4px;
-  right: 4px;
+  justify-content: center;
+  gap: 8px;
 }
-.capacity-cell-data .capacity-bar .usage {
-  background-color: var(--accent-key);
+.date-filter-controller .full-size {
+  flex: 1;
 }.blocks-cell {
   display: flex;
   flex-direction: column;
@@ -1848,12 +1762,39 @@ body.dark-mode {
 }
 .blocks-cell .blocks-wrapper .block.INACTIVE, .blocks-cell .blocks-wrapper .block.DOWN, .blocks-cell .blocks-wrapper .block.FAILED {
   background-color: var(--focus-key);
-}.icon-cell svg {
-  height: 24px;
-  width: 24px;
+}.bar-cell {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  justify-content: center;
 }
-.icon-cell svg path {
-  fill: var(--accent-key);
+.bar-cell .table-count-cell {
+  align-self: flex-start;
+  padding-bottom: 2px;
+}
+.bar-cell .capacity-bar {
+  width: 90%;
+}.filter-table-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.filter-table-header.no-title {
+  justify-content: center;
+}
+.filter-table-header.no-title svg {
+  margin-right: 0;
+}
+.filter-table-header svg {
+  height: 16px;
+  width: 16px;
+  margin-left: 4px;
+  cursor: pointer;
+}
+.filter-table-header svg path {
+  fill: var(--ironhide-s2);
 }.status-cell-wrapper {
   display: flex;
   align-items: center;
@@ -1890,36 +1831,26 @@ body.dark-mode {
   to {
     transform: rotate(360deg);
   }
-}.date-filter-wrapper {
-  padding: var(--spread2);
-  border: 1px solid var(--main-color);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.date-filter-controller {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-}
-.date-filter-controller .full-size {
-  flex: 1;
-}.bar-cell {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
-  justify-content: center;
+}.table-text-filter {
+  background: var(--ironhide-t4) no-repeat padding-box;
+  border: 1px solid var(--ironhide-t1);
+  border-radius: 4px;
+  height: 32px;
+  font-size: 14px;
+  box-sizing: border-box;
+  color: var(--text-color);
+}.table-row-actions .actions-btn svg {
+  height: 16px;
+  width: 16px;
 }
-.bar-cell .table-count-cell {
-  align-self: flex-start;
-  padding-bottom: 2px;
+.table-row-actions-empty {
+  width: 30px;
+}.icon-cell svg {
+  height: 24px;
+  width: 24px;
 }
-.bar-cell .capacity-bar {
-  width: 90%;
+.icon-cell svg path {
+  fill: var(--accent-key);
 }.tiering-cell {
   display: flex;
   justify-content: center;
@@ -1931,17 +1862,75 @@ body.dark-mode {
 }
 .tiering-cell svg.remote path, .tiering-cell svg.writable path {
   fill: var(--accent-key);
-}.table-date-cell {
-  width: 200px;
-  padding-left: var(--spread);
+}.severity-filter {
+  padding: var(--spread) 0;
+  border: 1px solid var(--main-color);
+  border-radius: 8px;
+}
+.severity-filter .heading-4 {
+  margin-left: 12px;
+}
+.severity-filter .severity-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  padding: 3px var(--spread);
+  color: var(--text-color);
+  margin-top: 4px;
+  cursor: pointer;
+}
+.severity-filter .severity-wrapper:hover {
+  background-color: var(--ironhide-t1);
+}
+.severity-filter .severity-wrapper svg {
+  height: 24px;
+  width: 24px;
+  padding-right: 8px;
+}
+.severity-filter .severity-wrapper svg path {
+  fill: var(--accent-s2);
+}
+.severity-filter .severity-wrapper.warning svg path, .severity-filter .severity-wrapper.minor svg path {
+  fill: var(--optimus-s2);
+}
+.severity-filter .severity-wrapper.major svg path, .severity-filter .severity-wrapper.critical svg path {
+  fill: var(--focus-s1);
+}.capacity-cell {
+  width: 90%;
+  height: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.capacity-cell-headline {
+  display: flex;
+  align-items: center;
+  padding-bottom: 2px;
+  width: 100%;
+  justify-content: space-between;
+}
+.capacity-cell-headline .thin-provision {
+  border-radius: 50%;
+  font-size: 11px;
+  padding: 4px;
+  color: var(--neutral-t4);
+  font-weight: bold;
+  font-family: var(--bold-font);
+  background-color: var(--accent-key);
+  margin-left: 4px;
+  cursor: default;
+  height: 14px;
+  min-width: 14px;
+  position: relative;
 }
-
-.table-date-cell-with-relative {
-  width: 270px;
+.capacity-cell-headline .thin-provision::after {
+  content: "TP";
+  position: absolute;
+  top: 4px;
+  right: 4px;
 }
-
-.relative-time {
-  color: var(--main-color);
+.capacity-cell-data .capacity-bar .usage {
+  background-color: var(--accent-key);
 }.event-severity {
   display: flex;
   align-items: center;
@@ -1967,15 +1956,6 @@ body.dark-mode {
 }
 .event-severity.critical svg path {
   fill: var(--neutral-t4);
-}.is-backend {
-  color: var(--accent-key);
-}
-
-.is-client {
-  color: var(--optimus-s2);
-}.icon-cell-btn svg {
-  height: 16px;
-  width: 16px;
 }.events-entity-cell {
   display: flex;
   align-items: center;
@@ -2000,6 +1980,26 @@ body.dark-mode {
 }
 .events-entity-cell svg path {
   fill: var(--main-color);
+}.icon-cell-btn svg {
+  height: 16px;
+  width: 16px;
+}.table-date-cell {
+  width: 200px;
+  padding-left: var(--spread);
+}
+
+.table-date-cell-with-relative {
+  width: 270px;
+}
+
+.relative-time {
+  color: var(--main-color);
+}.is-backend {
+  color: var(--accent-key);
+}
+
+.is-client {
+  color: var(--optimus-s2);
 }.num-input-controller {
   display: flex;
   justify-content: space-between;
@@ -2036,82 +2036,56 @@ body.dark-mode {
 }
 .num-input-controller-active svg path {
   fill: var(--main-color);
-}.checkbox-container {
-  display: block;
+}.form-switch {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  width: var(--input-width);
+  justify-content: space-between;
+  padding-left: 2px;
+  box-sizing: border-box;
   position: relative;
-  height: 16px;
-  width: 16px;
-  font-size: 17px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  /* Create a custom checkbox */
-  /* On mouse-over, add a grey background color */
-  /* When the checkbox is checked, add a blue background */
-  /* Create the checkmark/indicator (hidden when not checked)  */
-  /* Show the checkmark when checked */
-  /* Style the checkmark/indicator */
 }
-.checkbox-container .checkbox-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
+.form-switch svg {
   height: 16px;
-  width: 16px;
-  left: 0;
-  z-index: 5;
-}
-.checkbox-container .checkbox-input[disabled] {
-  cursor: default !important;
+  margin-left: 4px;
 }
-.checkbox-container .checkbox-input[disabled] + .checkmark {
-  border: 1px solid var(--ironhide-s1);
+.form-switch svg path {
+  fill: var(--ironhide-s2);
 }
-.checkbox-container .checkbox-input[disabled] + .checkmark:after {
-  border: solid var(--ironhide-s1);
-  left: 5px;
-  top: 1px;
-  width: 4px;
-  height: 8px;
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+.form-switch-label {
+  font-size: 14px;
+  font-weight: bold;
+  font-family: var(--bold-font);
+  color: var(--ironhide-s4);
 }
-.checkbox-container .checkmark {
+.form-switch .form-switch-info {
+  margin-left: 4px;
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 16px;
-  width: 16px;
-  border-radius: 2px;
-  border: 1px solid var(--main-color);
-}
-.checkbox-container:hover .checkbox-input ~ .checkmark {
-  background-color: var(--main-light3-color);
-}
-.checkbox-container:hover .checkbox-input[disabled] ~ .checkmark {
-  background-color: transparent;
+  top: 17px;
 }
-.checkbox-container .checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
+.form-switch .toggle-btn {
+  margin: 0 8px;
 }
-.checkbox-container .checkbox-input:checked ~ .checkmark:after {
-  display: block;
+
+.large-field .form-switch {
+  justify-content: space-between;
+  width: 100%;
+}.data-info {
+  width: 100%;
+  display: flex;
+  height: 40px;
+  box-sizing: border-box;
+  padding-top: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--ironhide-t2);
 }
-.checkbox-container .checkmark:after {
-  left: 5px;
-  top: 1px;
-  width: 4px;
-  height: 8px;
-  border: solid var(--main-color);
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+.data-info-label {
+  color: var(--neutral-s3);
+  font-size: 14px;
+  font-weight: bold;
+  font-family: var(--bold-font);
+  width: 150px;
 }.ip-text-box-field {
   display: var(--fieldDisplay, inline-flex);
   position: relative;
@@ -2154,112 +2128,16 @@ body.dark-mode {
   -webkit-appearance: none;
   margin: 0;
 }
-.ip-text-box-field .value-container input[type=number] {
-  -moz-appearance: textfield;
-}
-.ip-text-box-field .value-container input:disabled {
-  background-color: transparent;
-}
-.ip-text-box-field .field__ip-input:focus {
-  outline: none;
-}
-.ip-text-box-field .field__label-wrap {
-  box-sizing: border-box;
-  cursor: text;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-.ip-text-box-field .field__ip-input:focus ~ .field__label-wrap::after {
-  opacity: 1;
-}
-.ip-text-box-field .field__label {
-  position: absolute;
-  left: 12px;
-  top: 4px;
-}
-.ip-text-box-field .field__label svg {
-  height: 12px;
-  position: absolute;
-  right: -16px;
-}
-.ip-text-box-field .field__label svg path {
-  fill: currentColor;
-}
-.ip-text-box-field .field__ip-input:focus {
-  border: 1px solid var(--main-color);
-  box-shadow: 0 0 0 1px var(--main-color);
-  border-radius: 4px;
-}
-.ip-text-box-field.has-error {
-  border: 1px solid var(--focus-key);
-  box-shadow: 0 0 0 1px var(--focus-key);
-  border-radius: 4px;
-}
-.ip-text-box-field .field__ip-input:disabled {
-  background-color: var(--ironhide-t2);
-  color: var(--ironhide-s1);
-}
-.ip-text-box-field .ip-text-box-error {
-  position: absolute;
-  bottom: -16px;
-  left: 3px;
-  font-size: 12px;
-  color: var(--focus-key);
-  white-space: nowrap;
-}.ip-subnet-text-box-field {
-  display: var(--fieldDisplay, inline-flex);
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid var(--ironhide-t1);
-  border-radius: 4px;
-  color: var(--ironhide-s4);
-  background-color: var(--input-background);
-  width: var(--input-width);
-  height: 48px;
-  padding-bottom: 2px;
-}
-.ip-subnet-text-box-field.disabled {
-  background-color: var(--ironhide-t3);
-}
-.ip-subnet-text-box-field:focus-within {
-  border: 1px solid var(--main-color);
-  box-shadow: 0 0 0 1px var(--main-color);
-  border-radius: 4px;
-}
-.ip-subnet-text-box-field .value-container {
-  display: flex;
-  width: 100%;
-  justify-content: flex-start;
-  align-items: flex-end;
-  padding: 0px 5px 0px 15px;
-}
-.ip-subnet-text-box-field .value-container input {
-  background-color: transparent;
-  border: none;
-  padding: 0px;
-  margin: 0px;
-  width: 40px;
-  height: 17px;
-  text-align: center;
-  font-size: 17px;
-  color: var(--ironhide-s4);
-}
-.ip-subnet-text-box-field .value-container input::-webkit-outer-spin-button, .ip-subnet-text-box-field .value-container input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.ip-subnet-text-box-field .value-container input[type=number] {
+.ip-text-box-field .value-container input[type=number] {
   -moz-appearance: textfield;
 }
-.ip-subnet-text-box-field .value-container input:disabled {
+.ip-text-box-field .value-container input:disabled {
   background-color: transparent;
 }
-.ip-subnet-text-box-field .field__ip-input:focus {
+.ip-text-box-field .field__ip-input:focus {
   outline: none;
 }
-.ip-subnet-text-box-field .field__label-wrap {
+.ip-text-box-field .field__label-wrap {
   box-sizing: border-box;
   cursor: text;
   position: absolute;
@@ -2267,98 +2145,44 @@ body.dark-mode {
   right: 0;
   left: 0;
 }
-.ip-subnet-text-box-field .field__ip-input:focus ~ .field__label-wrap::after {
+.ip-text-box-field .field__ip-input:focus ~ .field__label-wrap::after {
   opacity: 1;
 }
-.ip-subnet-text-box-field .field__label {
+.ip-text-box-field .field__label {
   position: absolute;
   left: 12px;
   top: 4px;
 }
-.ip-subnet-text-box-field .field__label svg {
+.ip-text-box-field .field__label svg {
   height: 12px;
   position: absolute;
   right: -16px;
 }
-.ip-subnet-text-box-field .field__label svg path {
+.ip-text-box-field .field__label svg path {
   fill: currentColor;
 }
-.ip-subnet-text-box-field .field__ip-input:focus {
+.ip-text-box-field .field__ip-input:focus {
   border: 1px solid var(--main-color);
   box-shadow: 0 0 0 1px var(--main-color);
   border-radius: 4px;
 }
-.ip-subnet-text-box-field.has-error {
+.ip-text-box-field.has-error {
   border: 1px solid var(--focus-key);
   box-shadow: 0 0 0 1px var(--focus-key);
   border-radius: 4px;
 }
-.ip-subnet-text-box-field .field__ip-input:disabled {
+.ip-text-box-field .field__ip-input:disabled {
   background-color: var(--ironhide-t2);
   color: var(--ironhide-s1);
 }
-.ip-subnet-text-box-field .ip-subnet-error {
+.ip-text-box-field .ip-text-box-error {
   position: absolute;
   bottom: -16px;
   left: 3px;
   font-size: 12px;
   color: var(--focus-key);
   white-space: nowrap;
-}.data-info {
-  width: 100%;
-  display: flex;
-  height: 40px;
-  box-sizing: border-box;
-  padding-top: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--ironhide-t2);
-}
-.data-info-label {
-  color: var(--neutral-s3);
-  font-size: 14px;
-  font-weight: bold;
-  font-family: var(--bold-font);
-  width: 150px;
-}.text-field {
-  --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
-  --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);
-  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 1rem);
-  --uiFieldBorderColorActive: var(--fieldBorderColorActive, rgba(22, 22, 22, 1));
-  display: var(--fieldDisplay, inline-flex);
-  position: relative;
-  font-size: var(--fieldFontSize, 1rem);
-  align-items: center;
-  width: 300px;
-  justify-content: flex-end;
-}
-.text-field .field-input-wrapper {
-  position: relative;
-}
-.text-field .field__input {
-  box-sizing: border-box;
-  border: 1px solid var(--ironhide-t1);
-  padding: 0 8px;
-  border-radius: 4px;
-  width: 102px;
-  height: 32px;
-  margin: 0 8px;
-  -moz-appearance: textfield;
-}
-.text-field .field__input::-webkit-outer-spin-button, .text-field .field__input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.text-field .field__input[type=number] {
-  -moz-appearance: textfield;
-}
-.text-field .text-field-error {
-  position: absolute;
-  bottom: -16px;
-  left: 12px;
-  font-size: 12px;
-  color: var(--focus-key);
-  white-space: nowrap;
-}.ip-range-text-box-field {
+}.ip-subnet-text-box-field {
   display: var(--fieldDisplay, inline-flex);
   position: relative;
   box-sizing: border-box;
@@ -2370,22 +2194,22 @@ body.dark-mode {
   height: 48px;
   padding-bottom: 2px;
 }
-.ip-range-text-box-field .ip-range-text-box-disabled {
+.ip-subnet-text-box-field.disabled {
   background-color: var(--ironhide-t3);
 }
-.ip-range-text-box-field:focus-within {
+.ip-subnet-text-box-field:focus-within {
   border: 1px solid var(--main-color);
   box-shadow: 0 0 0 1px var(--main-color);
   border-radius: 4px;
 }
-.ip-range-text-box-field .value-container {
+.ip-subnet-text-box-field .value-container {
   display: flex;
   width: 100%;
   justify-content: flex-start;
   align-items: flex-end;
-  padding: 0px 5px 0px 11px;
+  padding: 0px 5px 0px 15px;
 }
-.ip-range-text-box-field .value-container input {
+.ip-subnet-text-box-field .value-container input {
   background-color: transparent;
   border: none;
   padding: 0px;
@@ -2396,20 +2220,20 @@ body.dark-mode {
   font-size: 17px;
   color: var(--ironhide-s4);
 }
-.ip-range-text-box-field .value-container input::-webkit-outer-spin-button, .ip-range-text-box-field .value-container input::-webkit-inner-spin-button {
+.ip-subnet-text-box-field .value-container input::-webkit-outer-spin-button, .ip-subnet-text-box-field .value-container input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.ip-range-text-box-field .value-container input[type=number] {
+.ip-subnet-text-box-field .value-container input[type=number] {
   -moz-appearance: textfield;
 }
-.ip-range-text-box-field .value-container input:disabled {
+.ip-subnet-text-box-field .value-container input:disabled {
   background-color: transparent;
 }
-.ip-range-text-box-field .field__ip-input:focus {
+.ip-subnet-text-box-field .field__ip-input:focus {
   outline: none;
 }
-.ip-range-text-box-field .field__label-wrap {
+.ip-subnet-text-box-field .field__label-wrap {
   box-sizing: border-box;
   cursor: text;
   position: absolute;
@@ -2417,345 +2241,372 @@ body.dark-mode {
   right: 0;
   left: 0;
 }
-.ip-range-text-box-field .field__ip-input:focus ~ .field__label-wrap::after {
+.ip-subnet-text-box-field .field__ip-input:focus ~ .field__label-wrap::after {
   opacity: 1;
 }
-.ip-range-text-box-field .field__label {
+.ip-subnet-text-box-field .field__label {
   position: absolute;
   left: 12px;
   top: 4px;
 }
-.ip-range-text-box-field .field__label svg {
+.ip-subnet-text-box-field .field__label svg {
   height: 12px;
   position: absolute;
   right: -16px;
 }
-.ip-range-text-box-field .field__label svg path {
+.ip-subnet-text-box-field .field__label svg path {
   fill: currentColor;
 }
-.ip-range-text-box-field .field__ip-input:focus {
+.ip-subnet-text-box-field .field__ip-input:focus {
   border: 1px solid var(--main-color);
   box-shadow: 0 0 0 1px var(--main-color);
   border-radius: 4px;
 }
-.ip-range-text-box-field.has-error {
+.ip-subnet-text-box-field.has-error {
   border: 1px solid var(--focus-key);
   box-shadow: 0 0 0 1px var(--focus-key);
   border-radius: 4px;
 }
-.ip-range-text-box-field .field__ip-input:disabled {
+.ip-subnet-text-box-field .field__ip-input:disabled {
   background-color: var(--ironhide-t2);
   color: var(--ironhide-s1);
 }
-.ip-range-text-box-field .ip-range-text-box-error {
+.ip-subnet-text-box-field .ip-subnet-error {
   position: absolute;
   bottom: -16px;
   left: 3px;
   font-size: 12px;
   color: var(--focus-key);
   white-space: nowrap;
-}.form-switch {
+}.login-text-field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+}
+.login-text-field .login-field-label {
   display: flex;
   align-items: center;
-  height: 48px;
-  width: var(--input-width);
-  justify-content: space-between;
-  padding-left: 2px;
-  box-sizing: border-box;
-  position: relative;
+  padding: 3px 5px;
 }
-.form-switch svg {
+.login-text-field .login-field-label .body-copy-1 {
+  margin-top: 3px;
+}
+
+.login-field-input {
+  width: 350px;
+  height: 32px;
+  background: var(--ironhide-t3);
+  border: 1px solid var(--ironhide-t1);
+  border-radius: 4px;
+  opacity: 1;
+  color: var(--ironhide-s4);
+  text-align: left;
+  letter-spacing: 0px;
+  padding: 0px 10px;
+}
+
+.text-login-error {
+  top: 58px;
+  left: 3px;
+  position: absolute;
+  color: var(--focus-key);
+}
+
+.login-password-icon svg {
+  width: 16px;
   height: 16px;
-  margin-left: 4px;
+  cursor: pointer;
+  position: absolute;
+  right: 15px;
+  bottom: 8px;
 }
-.form-switch svg path {
+.login-password-icon svg:hover path {
   fill: var(--ironhide-s2);
 }
-.form-switch-label {
-  font-size: 14px;
-  font-weight: bold;
-  font-family: var(--bold-font);
-  color: var(--ironhide-s4);
+
+.is-type-password-login {
+  width: 315px;
+  padding-right: 45px;
+}.checkbox-container {
+  display: block;
+  position: relative;
+  height: 16px;
+  width: 16px;
+  font-size: 17px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* Create a custom checkbox */
+  /* On mouse-over, add a grey background color */
+  /* When the checkbox is checked, add a blue background */
+  /* Create the checkmark/indicator (hidden when not checked)  */
+  /* Show the checkmark when checked */
+  /* Style the checkmark/indicator */
 }
-.form-switch .form-switch-info {
-  margin-left: 4px;
+.checkbox-container .checkbox-input {
   position: absolute;
-  top: 17px;
+  opacity: 0;
+  cursor: pointer;
+  height: 16px;
+  width: 16px;
+  left: 0;
+  z-index: 5;
 }
-.form-switch .toggle-btn {
-  margin: 0 8px;
+.checkbox-container .checkbox-input[disabled] {
+  cursor: default !important;
 }
-
-.large-field .form-switch {
-  justify-content: space-between;
-  width: 100%;
-}.radio-switch {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+.checkbox-container .checkbox-input[disabled] + .checkmark {
+  border: 1px solid var(--ironhide-s1);
 }
-.radio-switch .radio-btn {
-  color: var(--main-color) !important;
+.checkbox-container .checkbox-input[disabled] + .checkmark:after {
+  border: solid var(--ironhide-s1);
+  left: 5px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
 }
-.radio-switch.disabled .radio-btn {
-  color: var(--ironhide-s1) !important;
+.checkbox-container .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 16px;
+  width: 16px;
+  border-radius: 2px;
+  border: 1px solid var(--main-color);
 }
-.radio-switch.disabled span {
-  color: var(--ironhide-s1);
+.checkbox-container:hover .checkbox-input ~ .checkmark {
+  background-color: var(--main-light3-color);
 }
-.radio-switch .radio-label {
+.checkbox-container:hover .checkbox-input[disabled] ~ .checkmark {
+  background-color: transparent;
+}
+.checkbox-container .checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+.checkbox-container .checkbox-input:checked ~ .checkmark:after {
+  display: block;
+}
+.checkbox-container .checkmark:after {
+  left: 5px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--main-color);
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}.ip-range-text-box-field {
+  display: var(--fieldDisplay, inline-flex);
   position: relative;
+  box-sizing: border-box;
+  border: 1px solid var(--ironhide-t1);
+  border-radius: 4px;
+  color: var(--ironhide-s4);
+  background-color: var(--input-background);
+  width: var(--input-width);
+  height: 48px;
+  padding-bottom: 2px;
 }
-.radio-switch .radio-label svg {
-  height: 12px;
-  position: absolute;
-  right: -16px;
+.ip-range-text-box-field .ip-range-text-box-disabled {
+  background-color: var(--ironhide-t3);
 }
-.radio-switch .radio-label svg path {
-  fill: currentColor;
-}.login-text-field {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-self: flex-start;
+.ip-range-text-box-field:focus-within {
+  border: 1px solid var(--main-color);
+  box-shadow: 0 0 0 1px var(--main-color);
+  border-radius: 4px;
 }
-.login-text-field .login-field-label {
+.ip-range-text-box-field .value-container {
   display: flex;
-  align-items: center;
-  padding: 3px 5px;
-}
-.login-text-field .login-field-label .body-copy-1 {
-  margin-top: 3px;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: flex-end;
+  padding: 0px 5px 0px 11px;
 }
-
-.login-field-input {
-  width: 350px;
-  height: 32px;
-  background: var(--ironhide-t3);
-  border: 1px solid var(--ironhide-t1);
-  border-radius: 4px;
-  opacity: 1;
+.ip-range-text-box-field .value-container input {
+  background-color: transparent;
+  border: none;
+  padding: 0px;
+  margin: 0px;
+  width: 40px;
+  height: 17px;
+  text-align: center;
+  font-size: 17px;
   color: var(--ironhide-s4);
-  text-align: left;
-  letter-spacing: 0px;
-  padding: 0px 10px;
 }
-
-.text-login-error {
-  top: 58px;
-  left: 3px;
-  position: absolute;
-  color: var(--focus-key);
+.ip-range-text-box-field .value-container input::-webkit-outer-spin-button, .ip-range-text-box-field .value-container input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
-
-.login-password-icon svg {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  position: absolute;
-  right: 15px;
-  bottom: 8px;
+.ip-range-text-box-field .value-container input[type=number] {
+  -moz-appearance: textfield;
 }
-.login-password-icon svg:hover path {
-  fill: var(--ironhide-s2);
+.ip-range-text-box-field .value-container input:disabled {
+  background-color: transparent;
 }
-
-.is-type-password-login {
-  width: 315px;
-  padding-right: 45px;
-}.select-wrapper {
-  width: var(--input-width);
-  position: relative;
+.ip-range-text-box-field .field__ip-input:focus {
+  outline: none;
 }
-.select-wrapper .select-label {
+.ip-range-text-box-field .field__label-wrap {
+  box-sizing: border-box;
+  cursor: text;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+.ip-range-text-box-field .field__ip-input:focus ~ .field__label-wrap::after {
+  opacity: 1;
+}
+.ip-range-text-box-field .field__label {
   position: absolute;
   left: 12px;
   top: 4px;
-  z-index: 1;
 }
-.select-wrapper .select-label svg {
+.ip-range-text-box-field .field__label svg {
   height: 12px;
   position: absolute;
   right: -16px;
 }
-.select-wrapper .select-label svg path {
+.ip-range-text-box-field .field__label svg path {
   fill: currentColor;
 }
-.select-wrapper.no-label .react-select__value-container, .select-wrapper.no-label .react-select__single_value {
-  margin-top: 0;
-}
-.select-wrapper.no-label .react-select__input-container, .select-wrapper.no-label .react-select__single-value {
-  color: var(--text-color);
-}
-.select-wrapper .react-select__input-container, .select-wrapper .react-select__single-value {
-  color: var(--text-color);
-}
-.select-wrapper .react-select__placeholder {
-  margin-left: 4px !important;
+.ip-range-text-box-field .field__ip-input:focus {
+  border: 1px solid var(--main-color);
+  box-shadow: 0 0 0 1px var(--main-color);
+  border-radius: 4px;
 }
-.select-wrapper .react-select__control {
+.ip-range-text-box-field.has-error {
+  border: 1px solid var(--focus-key);
+  box-shadow: 0 0 0 1px var(--focus-key);
   border-radius: 4px;
-  height: unset;
-  background-color: var(--input-background);
 }
-.select-wrapper .react-select__control--is-disabled {
+.ip-range-text-box-field .field__ip-input:disabled {
   background-color: var(--ironhide-t2);
+  color: var(--ironhide-s1);
 }
-.select-wrapper .react-select__indicator-separator {
-  margin: 0px;
-}
-.select-wrapper .react-select__value-container, .select-wrapper .react-select__single_value {
-  font-size: 17px;
-  margin-top: 10px;
-}
-.select-wrapper .react-select__single-value--is-disabled {
-  color: var(--ironhide-s1) !important;
-}
-.select-wrapper .react-select__dropdown-indicator {
-  cursor: pointer;
-}
-.select-wrapper .select-error {
+.ip-range-text-box-field .ip-range-text-box-error {
   position: absolute;
   bottom: -16px;
   left: 3px;
   font-size: 12px;
   color: var(--focus-key);
   white-space: nowrap;
-}
-
-.select-wrapper-is-multi .react-select__input-container {
-  padding-top: 0;
-  max-height: 21px;
-  color: var(--text-color);
-}
-.select-wrapper-is-multi .react-select__value-container {
-  padding: 1px 8px;
-}
-.select-wrapper-is-multi .react-select__value-container--is-multi {
-  margin-top: 16px;
-  overflow-y: auto;
-  max-height: 61px;
-}
-.select-wrapper-is-multi .react-select__control {
-  border-radius: 4px;
-  height: unset;
-  background-color: var(--input-background);
-}
-.select-wrapper-is-multi .react-select__control--is-disabled {
-  background-color: var(--ironhide-t2);
-}
-.select-wrapper-is-multi .react-select__multi-value {
-  margin: 1px 2px 2px 1px;
-  background-color: var(--multivalue-background);
-}
-.select-wrapper-is-multi .react-select__multi-value__label {
-  color: var(--text-color);
-}
-.select-wrapper-is-multi .react-select__multi-value__remove svg {
-  width: 16px;
-  height: 16px;
-}
-.select-wrapper-is-multi .react-select__multi-value__remove svg path {
-  fill: var(--ironhide-s3);
-}
-.select-wrapper-is-multi .react-select__multi-value__remove:hover {
-  background-color: transparent;
-  cursor: pointer;
-}
-.select-wrapper-is-multi .react-select__multi-value__remove:hover svg path {
-  fill: var(--main-color);
-}
-.select-wrapper-is-multi .react-select__clear-indicator {
-  padding: 6px;
-}
-.select-wrapper-is-multi .react-select__clear-indicator svg {
-  width: 18px;
-  height: 18px;
-}
-.select-wrapper-is-multi .react-select__dropdown-indicator {
-  cursor: pointer;
-}
-.select-wrapper-is-multi .react-select__placeholder {
-  padding-bottom: 3px;
-}.text-area-field {
+}.text-box-field {
   --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
   --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);
   --uiFieldPaddingLeft: var(--fieldPaddingLeft, 1rem);
   --uiFieldBorderColorActive: var(--fieldBorderColorActive, rgba(22, 22, 22, 1));
   display: var(--fieldDisplay, inline-flex);
   position: relative;
-  width: 525px;
-  height: 320px;
-  padding-top: 20px;
+  width: var(--input-width);
+  height: 48px;
 }
-.text-area-field .field__input {
+.text-box-field.no-label {
+  height: 32px;
+}
+.text-box-field.no-label .field__input {
+  padding-top: 1px;
+}
+.text-box-field.has-icon .field__input {
+  padding-left: 30px;
+}
+.text-box-field .text-box-icon {
+  position: absolute;
+  height: 16px;
+  width: 16px;
+  top: calc(50% - 8px);
+  left: 8px;
+}
+.text-box-field .field__input {
   box-sizing: border-box;
   border: 1px solid var(--ironhide-t1);
   width: 100%;
+  padding-top: 12px;
   padding-left: 12px;
   padding-right: 10px;
   border-radius: 4px;
   color: var(--ironhide-s4);
-  background-color: var(--input-background);
   font-size: 17px;
-  font-family: inherit;
-  display: inline-block;
-  word-break: break-all;
+  background-color: var(--input-background);
 }
-.text-area-field .field__input::-webkit-outer-spin-button, .text-area-field .field__input::-webkit-inner-spin-button {
+.text-box-field .field__input::-webkit-outer-spin-button, .text-box-field .field__input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.text-area-field .field__input[type=number] {
+.text-box-field .field__input[type=number] {
   -moz-appearance: textfield;
 }
-.text-area-field .field__input:focus {
+.text-box-field .field__input:focus {
   outline: none;
 }
-.text-area-field .field__label-wrap {
+.text-box-field .field__label-wrap {
   box-sizing: border-box;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
 }
-.text-area-field .field__input:focus ~ .field__label-wrap::after {
+.text-box-field .field__input:focus ~ .field__label-wrap::after {
   opacity: 1;
 }
-.text-area-field .field__label {
+.text-box-field .field__label {
   position: absolute;
   left: 12px;
   top: 4px;
+  white-space: nowrap;
 }
-.text-area-field .field__label svg {
+.text-box-field .field__label svg {
   height: 12px;
   position: absolute;
   right: -16px;
 }
-.text-area-field .field__label svg path {
+.text-box-field .field__label svg path {
   fill: currentColor;
 }
-.text-area-field .field__input:focus {
+.text-box-field .field__input:focus {
   border: 1px solid var(--main-color);
   box-shadow: 0 0 0 1px var(--main-color);
   border-radius: 4px;
 }
-.text-area-field.has-error .field__input {
+.text-box-field.has-error .field__input {
   border: 1px solid var(--focus-key);
   box-shadow: 0 0 0 1px var(--focus-key);
   border-radius: 4px;
 }
-.text-area-field .field__input:disabled {
+.text-box-field .field__input:disabled {
   background-color: var(--ironhide-t2);
   color: var(--ironhide-s1);
 }
-.text-area-field .text-area-error {
+.text-box-field .text-box-error {
   position: absolute;
   bottom: -16px;
   left: 3px;
   font-size: 12px;
   color: var(--focus-key);
   white-space: nowrap;
+}
+.text-box-field .password-icon svg {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  position: absolute;
+  right: 12px;
+  top: 9px;
+}
+.text-box-field .password-icon svg:hover path {
+  fill: var(--ironhide-s2);
+}
+.text-box-field .is-type-password {
+  padding-right: 37px !important;
 }.tagsbox-wrapper {
   width: var(--input-width);
   position: relative;
@@ -2841,252 +2692,362 @@ body.dark-mode {
 .tagsbox-wrapper .react-tagsbox__multi-value__remove svg path {
   fill: var(--ironhide-s3);
 }
-.tagsbox-wrapper .react-tagsbox__multi-value__remove:hover {
+.tagsbox-wrapper .react-tagsbox__multi-value__remove:hover {
+  background-color: transparent;
+  cursor: pointer;
+}
+.tagsbox-wrapper .react-tagsbox__multi-value__remove:hover svg path {
+  fill: var(--main-color);
+}
+.tagsbox-wrapper .react-tagsbox__multi-value__label {
+  color: var(--text-color);
+}
+.tagsbox-wrapper .react-tagsbox__menu {
+  margin-top: 4px;
+  z-index: 10;
+}
+.tagsbox-wrapper .react-tagsbox__menu-list {
+  border: 2px solid var(--main-color);
+  background-color: var(--neutral-t4);
+  border-radius: 4px;
+}
+.tagsbox-wrapper .react-tagsbox__option {
+  color: var(--text-color);
+  background-color: transparent;
+}
+.tagsbox-wrapper .tags-box-error {
+  position: absolute;
+  bottom: -16px;
+  left: 3px;
+  font-size: 12px;
+  color: var(--focus-key);
+  white-space: nowrap;
+}
+.tagsbox-wrapper .tags-warning {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--focus-key);
+}
+.tagsbox-wrapper .tags-invalid {
+  color: var(--focus-key);
+  font-size: 12px;
+}.json-box {
+  height: 400px;
+  display: flex;
+  border: 1px solid var(--ironhide-t1);
+  border-radius: 4px;
+  background-color: var(--input-background);
+  flex-direction: column;
+  position: relative;
+}
+.json-box__label {
+  position: absolute;
+  left: 12px;
+  top: 4px;
+  white-space: nowrap;
+  z-index: 1;
+}
+.json-box__label svg {
+  height: 12px;
+  position: absolute;
+  right: -16px;
+}
+.json-box__label svg path {
+  fill: currentColor;
+}
+.json-box .json-editor-wrapper {
+  padding-top: 24px;
+}
+.json-box.has-error {
+  border: 1px solid var(--focus-key);
+  box-shadow: 0 0 0 1px var(--focus-key);
+  border-radius: 4px;
+}
+.json-box .json-box-error {
+  position: absolute;
+  bottom: -16px;
+  left: 3px;
+  font-size: 12px;
+  color: var(--focus-key);
+  white-space: nowrap;
+}
+.json-box .json-editor-wrapper.read-only {
+  background-color: var(--ironhide-t2);
+}.text-select-wrapper {
+  border: 1px solid var(--ironhide-t1);
+  border-radius: 4px;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  height: 48px;
+  width: var(--input-width);
+  background-color: var(--input-background);
+}
+.text-select-wrapper .text-select-label {
+  position: absolute;
+  left: 12px;
+  top: 4px;
+  z-index: 1;
+}
+.text-select-wrapper .text-select-label svg {
+  height: 12px;
+  position: absolute;
+  right: -16px;
+  top: -1px;
+}
+.text-select-wrapper .text-select-label svg path {
+  fill: currentColor;
+}
+.text-select-wrapper .field__input, .text-select-wrapper .field__input:focus, .text-select-wrapper .react-select__control {
+  border: none !important;
+  box-shadow: none !important;
+}
+.text-select-wrapper:focus-within {
+  border: 1px solid var(--main-color);
+  box-shadow: 0 0 0 1px var(--main-color);
+  border-radius: 4px;
+}
+.text-select-wrapper:focus-within .spread-line {
+  border-left: 1px solid var(--main-color);
+}
+.text-select-wrapper .spread-line {
+  border-left: 1px solid var(--ironhide-t1);
+  height: 24px;
+}
+.text-select-wrapper .select-wrapper {
+  width: 50%;
+}
+.text-select-wrapper .text-box-field {
+  width: 50%;
+}
+.text-select-wrapper.has-error {
+  border: 1px solid var(--focus-key);
+  box-shadow: 0 0 0 1px var(--focus-key);
+}
+.text-select-wrapper .text-select-error {
+  position: absolute;
+  bottom: -16px;
+  left: 3px;
+  font-size: 12px;
+  color: var(--focus-key);
+  white-space: nowrap;
+}.select-wrapper {
+  width: var(--input-width);
+  position: relative;
+}
+.select-wrapper .select-label {
+  position: absolute;
+  left: 12px;
+  top: 4px;
+  z-index: 1;
+}
+.select-wrapper .select-label svg {
+  height: 12px;
+  position: absolute;
+  right: -16px;
+}
+.select-wrapper .select-label svg path {
+  fill: currentColor;
+}
+.select-wrapper.no-label .react-select__value-container, .select-wrapper.no-label .react-select__single_value {
+  margin-top: 0;
+}
+.select-wrapper.no-label .react-select__input-container, .select-wrapper.no-label .react-select__single-value {
+  color: var(--text-color);
+}
+.select-wrapper .react-select__input-container, .select-wrapper .react-select__single-value {
+  color: var(--text-color);
+}
+.select-wrapper .react-select__placeholder {
+  margin-left: 4px !important;
+}
+.select-wrapper .react-select__control {
+  border-radius: 4px;
+  height: unset;
+  background-color: var(--input-background);
+}
+.select-wrapper .react-select__control--is-disabled {
+  background-color: var(--ironhide-t2);
+}
+.select-wrapper .react-select__indicator-separator {
+  margin: 0px;
+}
+.select-wrapper .react-select__value-container, .select-wrapper .react-select__single_value {
+  font-size: 17px;
+  margin-top: 10px;
+}
+.select-wrapper .react-select__single-value--is-disabled {
+  color: var(--ironhide-s1) !important;
+}
+.select-wrapper .react-select__dropdown-indicator {
+  cursor: pointer;
+}
+.select-wrapper .select-error {
+  position: absolute;
+  bottom: -16px;
+  left: 3px;
+  font-size: 12px;
+  color: var(--focus-key);
+  white-space: nowrap;
+}
+
+.select-wrapper-is-multi .react-select__input-container {
+  padding-top: 0;
+  max-height: 21px;
+  color: var(--text-color);
+}
+.select-wrapper-is-multi .react-select__value-container {
+  padding: 1px 8px;
+}
+.select-wrapper-is-multi .react-select__value-container--is-multi {
+  margin-top: 16px;
+  overflow-y: auto;
+  max-height: 61px;
+}
+.select-wrapper-is-multi .react-select__control {
+  border-radius: 4px;
+  height: unset;
+  background-color: var(--input-background);
+}
+.select-wrapper-is-multi .react-select__control--is-disabled {
+  background-color: var(--ironhide-t2);
+}
+.select-wrapper-is-multi .react-select__multi-value {
+  margin: 1px 2px 2px 1px;
+  background-color: var(--multivalue-background);
+}
+.select-wrapper-is-multi .react-select__multi-value__label {
+  color: var(--text-color);
+}
+.select-wrapper-is-multi .react-select__multi-value__remove svg {
+  width: 16px;
+  height: 16px;
+}
+.select-wrapper-is-multi .react-select__multi-value__remove svg path {
+  fill: var(--ironhide-s3);
+}
+.select-wrapper-is-multi .react-select__multi-value__remove:hover {
   background-color: transparent;
   cursor: pointer;
 }
-.tagsbox-wrapper .react-tagsbox__multi-value__remove:hover svg path {
+.select-wrapper-is-multi .react-select__multi-value__remove:hover svg path {
   fill: var(--main-color);
 }
-.tagsbox-wrapper .react-tagsbox__multi-value__label {
-  color: var(--text-color);
+.select-wrapper-is-multi .react-select__clear-indicator {
+  padding: 6px;
 }
-.tagsbox-wrapper .react-tagsbox__menu {
-  margin-top: 4px;
-  z-index: 10;
+.select-wrapper-is-multi .react-select__clear-indicator svg {
+  width: 18px;
+  height: 18px;
 }
-.tagsbox-wrapper .react-tagsbox__menu-list {
-  border: 2px solid var(--main-color);
-  background-color: var(--neutral-t4);
-  border-radius: 4px;
+.select-wrapper-is-multi .react-select__dropdown-indicator {
+  cursor: pointer;
 }
-.tagsbox-wrapper .react-tagsbox__option {
-  color: var(--text-color);
-  background-color: transparent;
+.select-wrapper-is-multi .react-select__placeholder {
+  padding-bottom: 3px;
+}.radio-switch {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
-.tagsbox-wrapper .tags-box-error {
-  position: absolute;
-  bottom: -16px;
-  left: 3px;
-  font-size: 12px;
-  color: var(--focus-key);
-  white-space: nowrap;
+.radio-switch .radio-btn {
+  color: var(--main-color) !important;
 }
-.tagsbox-wrapper .tags-warning {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--focus-key);
+.radio-switch.disabled .radio-btn {
+  color: var(--ironhide-s1) !important;
 }
-.tagsbox-wrapper .tags-invalid {
-  color: var(--focus-key);
-  font-size: 12px;
-}.text-select-wrapper {
-  border: 1px solid var(--ironhide-t1);
-  border-radius: 4px;
-  position: relative;
-  display: flex;
-  align-items: flex-end;
-  height: 48px;
-  width: var(--input-width);
-  background-color: var(--input-background);
+.radio-switch.disabled span {
+  color: var(--ironhide-s1);
 }
-.text-select-wrapper .text-select-label {
-  position: absolute;
-  left: 12px;
-  top: 4px;
-  z-index: 1;
+.radio-switch .radio-label {
+  position: relative;
 }
-.text-select-wrapper .text-select-label svg {
+.radio-switch .radio-label svg {
   height: 12px;
   position: absolute;
   right: -16px;
-  top: -1px;
 }
-.text-select-wrapper .text-select-label svg path {
+.radio-switch .radio-label svg path {
   fill: currentColor;
-}
-.text-select-wrapper .field__input, .text-select-wrapper .field__input:focus, .text-select-wrapper .react-select__control {
-  border: none !important;
-  box-shadow: none !important;
-}
-.text-select-wrapper:focus-within {
-  border: 1px solid var(--main-color);
-  box-shadow: 0 0 0 1px var(--main-color);
-  border-radius: 4px;
-}
-.text-select-wrapper:focus-within .spread-line {
-  border-left: 1px solid var(--main-color);
-}
-.text-select-wrapper .spread-line {
-  border-left: 1px solid var(--ironhide-t1);
-  height: 24px;
-}
-.text-select-wrapper .select-wrapper {
-  width: 50%;
-}
-.text-select-wrapper .text-box-field {
-  width: 50%;
-}
-.text-select-wrapper.has-error {
-  border: 1px solid var(--focus-key);
-  box-shadow: 0 0 0 1px var(--focus-key);
-}
-.text-select-wrapper .text-select-error {
-  position: absolute;
-  bottom: -16px;
-  left: 3px;
-  font-size: 12px;
-  color: var(--focus-key);
-  white-space: nowrap;
-}.text-box-field {
+}.text-area-field {
   --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
   --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);
   --uiFieldPaddingLeft: var(--fieldPaddingLeft, 1rem);
   --uiFieldBorderColorActive: var(--fieldBorderColorActive, rgba(22, 22, 22, 1));
   display: var(--fieldDisplay, inline-flex);
   position: relative;
-  width: var(--input-width);
-  height: 48px;
-}
-.text-box-field.no-label {
-  height: 32px;
-}
-.text-box-field.no-label .field__input {
-  padding-top: 1px;
-}
-.text-box-field.has-icon .field__input {
-  padding-left: 30px;
-}
-.text-box-field .text-box-icon {
-  position: absolute;
-  height: 16px;
-  width: 16px;
-  top: calc(50% - 8px);
-  left: 8px;
+  width: 525px;
+  height: 320px;
+  padding-top: 20px;
 }
-.text-box-field .field__input {
+.text-area-field .field__input {
   box-sizing: border-box;
   border: 1px solid var(--ironhide-t1);
   width: 100%;
-  padding-top: 12px;
   padding-left: 12px;
   padding-right: 10px;
   border-radius: 4px;
   color: var(--ironhide-s4);
-  font-size: 17px;
   background-color: var(--input-background);
+  font-size: 17px;
+  font-family: inherit;
+  display: inline-block;
+  word-break: break-all;
 }
-.text-box-field .field__input::-webkit-outer-spin-button, .text-box-field .field__input::-webkit-inner-spin-button {
+.text-area-field .field__input::-webkit-outer-spin-button, .text-area-field .field__input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.text-box-field .field__input[type=number] {
+.text-area-field .field__input[type=number] {
   -moz-appearance: textfield;
 }
-.text-box-field .field__input:focus {
+.text-area-field .field__input:focus {
   outline: none;
 }
-.text-box-field .field__label-wrap {
+.text-area-field .field__label-wrap {
   box-sizing: border-box;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
 }
-.text-box-field .field__input:focus ~ .field__label-wrap::after {
+.text-area-field .field__input:focus ~ .field__label-wrap::after {
   opacity: 1;
 }
-.text-box-field .field__label {
+.text-area-field .field__label {
   position: absolute;
   left: 12px;
   top: 4px;
-  white-space: nowrap;
 }
-.text-box-field .field__label svg {
+.text-area-field .field__label svg {
   height: 12px;
   position: absolute;
   right: -16px;
 }
-.text-box-field .field__label svg path {
+.text-area-field .field__label svg path {
   fill: currentColor;
 }
-.text-box-field .field__input:focus {
+.text-area-field .field__input:focus {
   border: 1px solid var(--main-color);
   box-shadow: 0 0 0 1px var(--main-color);
   border-radius: 4px;
 }
-.text-box-field.has-error .field__input {
+.text-area-field.has-error .field__input {
   border: 1px solid var(--focus-key);
   box-shadow: 0 0 0 1px var(--focus-key);
   border-radius: 4px;
 }
-.text-box-field .field__input:disabled {
+.text-area-field .field__input:disabled {
   background-color: var(--ironhide-t2);
   color: var(--ironhide-s1);
 }
-.text-box-field .text-box-error {
-  position: absolute;
-  bottom: -16px;
-  left: 3px;
-  font-size: 12px;
-  color: var(--focus-key);
-  white-space: nowrap;
-}
-.text-box-field .password-icon svg {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  position: absolute;
-  right: 12px;
-  top: 9px;
-}
-.text-box-field .password-icon svg:hover path {
-  fill: var(--ironhide-s2);
-}
-.text-box-field .is-type-password {
-  padding-right: 37px !important;
-}.json-box {
-  height: 400px;
-  display: flex;
-  border: 1px solid var(--ironhide-t1);
-  border-radius: 4px;
-  background-color: var(--input-background);
-  flex-direction: column;
-  position: relative;
-}
-.json-box__label {
-  position: absolute;
-  left: 12px;
-  top: 4px;
-  white-space: nowrap;
-  z-index: 1;
-}
-.json-box__label svg {
-  height: 12px;
-  position: absolute;
-  right: -16px;
-}
-.json-box__label svg path {
-  fill: currentColor;
-}
-.json-box .json-editor-wrapper {
-  padding-top: 24px;
-}
-.json-box.has-error {
-  border: 1px solid var(--focus-key);
-  box-shadow: 0 0 0 1px var(--focus-key);
-  border-radius: 4px;
-}
-.json-box .json-box-error {
+.text-area-field .text-area-error {
   position: absolute;
   bottom: -16px;
   left: 3px;
   font-size: 12px;
   color: var(--focus-key);
   white-space: nowrap;
-}
-.json-box .json-editor-wrapper.read-only {
-  background-color: var(--ironhide-t2);
 }.upload-wrapper {
   cursor: pointer;
   display: flex;
@@ -3135,6 +3096,45 @@ body.dark-mode {
 .upload-wrapper .file-name-wrapper svg {
   width: 8px;
   height: 8px;
+}.text-field {
+  --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
+  --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);
+  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 1rem);
+  --uiFieldBorderColorActive: var(--fieldBorderColorActive, rgba(22, 22, 22, 1));
+  display: var(--fieldDisplay, inline-flex);
+  position: relative;
+  font-size: var(--fieldFontSize, 1rem);
+  align-items: center;
+  width: 300px;
+  justify-content: flex-end;
+}
+.text-field .field-input-wrapper {
+  position: relative;
+}
+.text-field .field__input {
+  box-sizing: border-box;
+  border: 1px solid var(--ironhide-t1);
+  padding: 0 8px;
+  border-radius: 4px;
+  width: 102px;
+  height: 32px;
+  margin: 0 8px;
+  -moz-appearance: textfield;
+}
+.text-field .field__input::-webkit-outer-spin-button, .text-field .field__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.text-field .field__input[type=number] {
+  -moz-appearance: textfield;
+}
+.text-field .text-field-error {
+  position: absolute;
+  bottom: -16px;
+  left: 12px;
+  font-size: 12px;
+  color: var(--focus-key);
+  white-space: nowrap;
 }.filter-table-wrapper {
   display: flex;
   align-items: center;
diff --git a/src/components/CloseButton/closeButton.scss b/src/components/CloseButton/closeButton.scss
index ba5e9e23..3b6b82c7 100644
--- a/src/components/CloseButton/closeButton.scss
+++ b/src/components/CloseButton/closeButton.scss
@@ -2,15 +2,15 @@
   opacity: 1 !important;
   width: 26px;
   height: 26px;
-  position: absolute;
+  position: absolute!important;
   top: 2px;
   right: 2px;
   &:hover {
-    background-color: #0000000a;
+    background-color: #0000000a!important;
   }
   svg {
     path {
-      fill: var(--toast-text);
+      fill: var(--toast-text)!important;
     }
   }
 }
diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx
index 51849a23..f01dc7e3 100644
--- a/src/components/ErrorPage/ErrorPage.tsx
+++ b/src/components/ErrorPage/ErrorPage.tsx
@@ -4,7 +4,7 @@ import { GENERAL_ERROR } from '../../consts'
 import './errorPage.scss'
 
 interface ErrorPageProps {
-    error: ReactNode | string
+  error?: ReactNode | string
 }
 function ErrorPage({ error = GENERAL_ERROR }: ErrorPageProps) {
   return (