diff --git a/.version b/.version
index 0e7079b691..d76bd2ba3e 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-2.16.1
+2.17.0
diff --git a/cypress-tests/cypress.config.js b/cypress-tests/cypress.config.js
index b952ba7a0a..2321dc3cd4 100644
--- a/cypress-tests/cypress.config.js
+++ b/cypress-tests/cypress.config.js
@@ -19,9 +19,9 @@ module.exports = defineConfig({
   trashAssetsBeforeRuns: true,
 
   e2e: {
-    setupNodeEvents (on, config) {
+    setupNodeEvents(on, config) {
       on("task", {
-        readPdf (pathToPdf) {
+        readPdf(pathToPdf) {
           return new Promise((resolve) => {
             const pdfPath = path.resolve(pathToPdf);
             let dataBuffer = fs.readFileSync(pdfPath);
@@ -33,7 +33,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        readXlsx (filePath) {
+        readXlsx(filePath) {
           return new Promise((resolve, reject) => {
             try {
               let dataBuffer = fs.readFileSync(filePath);
@@ -48,7 +48,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        deleteFolder (folderName) {
+        deleteFolder(folderName) {
           return new Promise((resolve, reject) => {
             if (fs.existsSync(folderName)) {
               rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
@@ -66,7 +66,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        updateId ({ dbconfig, sql }) {
+        updateId({ dbconfig, sql }) {
           const client = new pg.Pool(dbconfig);
           return client.query(sql);
         },
@@ -79,8 +79,8 @@ module.exports = defineConfig({
     baseUrl: "http://localhost:8082",
     specPattern: "cypress/e2e/**/*.cy.js",
     downloadsFolder: "cypress/downloads",
-    numTestsKeptInMemory: 25,
-    redirectionLimit: 10,
+    numTestsKeptInMemory: 10,
+    redirectionLimit: 5,
     experimentalRunAllSpecs: true,
     trashAssetsBeforeRuns: true,
     experimentalMemoryManagement: true,
diff --git a/cypress-tests/cypress/commands/apiCommands.js b/cypress-tests/cypress/commands/apiCommands.js
index 9ed158df30..d92f378b1e 100644
--- a/cypress-tests/cypress/commands/apiCommands.js
+++ b/cypress-tests/cypress/commands/apiCommands.js
@@ -1,8 +1,8 @@
 Cypress.Commands.add(
   "apiLogin",
-  (userEmail = "dev@tooljet.io", userPassword = "password") => {
+  (userEmail = "dev@tooljet.io", userPassword = "password", workspaceId = '') => {
     cy.request({
-      url: "http://localhost:3000/api/authenticate",
+      url: `http://localhost:3000/api/authenticate/${workspaceId}`,
       method: "POST",
       body: {
         email: userEmail,
@@ -23,20 +23,23 @@ Cypress.Commands.add(
 
 Cypress.Commands.add("apiCreateGDS", (url, name, kind, options) => {
   cy.getCookie("tj_auth_token").then((cookie) => {
-    cy.request({
-      method: "POST",
-      url: url,
-      headers: {
-        "Tj-Workspace-Id": Cypress.env("workspaceId"),
-        Cookie: `tj_auth_token=${cookie.value}`,
+    cy.request(
+      {
+        method: "POST",
+        url: url,
+        headers: {
+          "Tj-Workspace-Id": Cypress.env("workspaceId"),
+          Cookie: `tj_auth_token=${cookie.value}`,
+        },
+        body: {
+          name: name,
+          kind: kind,
+          options: options,
+          scope: "global",
+        },
       },
-      body: {
-        name: name,
-        kind: kind,
-        options: options,
-        scope: "global",
-      },
-    }).then((response) => {
+      { log: false }
+    ).then((response) => {
       expect(response.status).to.equal(201);
 
       Cypress.log({
@@ -49,10 +52,10 @@ Cypress.Commands.add("apiCreateGDS", (url, name, kind, options) => {
 });
 
 Cypress.Commands.add("apiCreateApp", (appName = "testApp") => {
-  cy.window().then((win) => {
+  cy.window({ log: false }).then((win) => {
     win.localStorage.setItem("walkthroughCompleted", "true");
   });
-  cy.getCookie("tj_auth_token").then((cookie) => {
+  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
     Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
     cy.request({
       method: "POST",
@@ -84,14 +87,17 @@ Cypress.Commands.add("apiCreateApp", (appName = "testApp") => {
 });
 
 Cypress.Commands.add("apiDeleteApp", (appId = Cypress.env("appId")) => {
-  cy.request({
-    method: "DELETE",
-    url: `http://localhost:3000/api/apps/${Cypress.env("appId")}`,
-    headers: {
-      "Tj-Workspace-Id": Cypress.env("workspaceId"),
-      Cookie: Cypress.env("authToken"),
+  cy.request(
+    {
+      method: "DELETE",
+      url: `http://localhost:3000/api/apps/${Cypress.env("appId")}`,
+      headers: {
+        "Tj-Workspace-Id": Cypress.env("workspaceId"),
+        Cookie: Cypress.env("authToken"),
+      },
     },
-  }).then((response) => {
+    { log: false }
+  ).then((response) => {
     expect(response.status).to.equal(200);
     Cypress.log({
       name: "App Delete",
@@ -107,7 +113,7 @@ Cypress.Commands.add(
     appId = Cypress.env("appId"),
     componentSelector = "[data-cy='empty-editor-text']"
   ) => {
-    cy.window().then((win) => {
+    cy.window({ log: false }).then((win) => {
       win.localStorage.setItem("walkthroughCompleted", "true");
     });
     cy.visit(`/${Cypress.env("workspaceId")}/apps/${Cypress.env("appId")}`);
@@ -131,3 +137,5 @@ Cypress.Commands.add(
 //     { key: "ssl_certificate", value: "none", encrypted: false },
 //   ]
 // );
+
+
diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index b57f3a93d2..53ca1b7375 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -102,14 +102,14 @@ Cypress.Commands.add(
   },
   (subject, value) => {
     cy.wrap(subject)
-      .click()
+      .realClick()
       .find("pre.CodeMirror-line")
       .invoke("text")
       .then((text) => {
-        cy.wrap(subject).type(createBackspaceText(text)),
-          {
-            delay: 0,
-          };
+        cy.wrap(subject).type(createBackspaceText(text), { delay: 0 }),
+        {
+          delay: 0,
+        };
       });
     if (!Array.isArray(value)) {
       cy.wrap(subject).type(value, {
@@ -184,9 +184,9 @@ Cypress.Commands.add(
       .invoke("text")
       .then((text) => {
         cy.wrap(subject).type(createBackspaceText(text)),
-          {
-            delay: 0,
-          };
+        {
+          delay: 0,
+        };
       });
   }
 );
@@ -247,7 +247,7 @@ Cypress.Commands.add("reloadAppForTheElement", (elementText) => {
 });
 
 Cypress.Commands.add("skipEditorPopover", () => {
-  cy.get(".text-muted");
+  // cy.get(".text-muted");
   cy.wait(1000);
   cy.get("body").then(($el) => {
     if ($el.text().includes("Skip", { timeout: 2000 })) {
@@ -283,3 +283,11 @@ Cypress.Commands.add("visitTheWorkspace", (workspaceName) => {
   });
   cy.wait(2000);
 });
+
+Cypress.Commands.add("hideTooltip", () => {
+  cy.get("body").then(($body) => {
+    if ($body.find(".tooltip-inner").length > 0) {
+      cy.get(".tooltip-inner").invoke("css", "display", "none");
+    }
+  });
+});
diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js
index 1462a72c92..e20cfb998d 100644
--- a/cypress-tests/cypress/constants/selectors/common.js
+++ b/cypress-tests/cypress/constants/selectors/common.js
@@ -9,7 +9,7 @@ export const commonSelectors = {
     '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551',
   toastCloseButton: '[data-cy="toast-close-button"]',
   editButton: "[data-cy=edit-button]",
-  searchField: "[data-cy=widget-search-box]",
+  searchField: "[data-cy='widget-search-box-search-bar']",
   firstWidget: "[data-cy=widget-list]:eq(0)",
   canvas: "[data-cy=real-canvas]",
   appCardOptionsButton: "[data-cy=app-card-menu-icon]",
@@ -211,7 +211,7 @@ export const commonSelectors = {
   editFolderOption: (folderName) => {
     return `[data-cy="${cyParamName(folderName)}-edit-folder-option"]`;
   },
-  inspectorPinIcon: '[data-cy="null-option-icon"]',
+  inspectorPinIcon: '.d-flex > [data-cy="left-sidebar-inspector"]',
   groupInputFieldLabel: '[data-cy="label-group-input-field"]',
   pageSectionHeader: '[data-cy="dashboard-section-header"]',
   yesButton: '[data-cy="yes-button"]',
@@ -286,15 +286,15 @@ export const commonWidgetSelector = {
   },
 
   buttonCloseEditorSideBar: "[data-cy='inspector-close-icon']",
-  buttonStylesEditorSideBar: "[data-cy='sidebar-option-styles']",
+  buttonStylesEditorSideBar: "#inspector-tab-styles",
   WidgetNameInputField: "[data-cy=edit-widget-name]",
 
   tooltipInputField: "[data-cy='tooltip-input-field']",
   tooltipLabel: "[id=button-tooltip]",
 
-  noEventHandlerMessage: "[data-cy='no-event-handler-message']",
+  noEventHandlerMessage: "[data-cy='no-items-banner']",
   addEventHandlerLink: "[data-cy='add-event-handler']",
-  addMoreEventHandlerLink: '[data-cy="add-more-event-handler"]',
+  addMoreEventHandlerLink: '[data-cy="add-event-handler"]',
   eventHandlerCard: "[data-cy='event-handler-card']",
   alertMessageInputField: "[data-cy='alert-message-input-field']",
   eventSelection: '[data-cy="event-selection"]',
diff --git a/cypress-tests/cypress/constants/selectors/dataSource.js b/cypress-tests/cypress/constants/selectors/dataSource.js
index c6017d4cd8..8a67e16e85 100644
--- a/cypress-tests/cypress/constants/selectors/dataSource.js
+++ b/cypress-tests/cypress/constants/selectors/dataSource.js
@@ -1,3 +1,5 @@
+import { cyParamName } from "../../constants/selectors/common";
+
 export const dataSourceSelector = {
   leftSidebarDatasourceButton: "[data-cy='left-sidebar-database-button']",
   labelDataSources: "[data-cy='label-datasources']",
@@ -8,7 +10,7 @@ export const dataSourceSelector = {
   apiLabelAndCount: '[data-cy="apis-datasource-button"]',
   cloudStorageLabelAndCount: '[data-cy="cloudstorage-datasource-button"]',
   pluginsLabelAndCount: '[data-cy="plugins-datasource-button"]',
-  dataSourceSearchInputField: '[data-cy="datasource-search-input"]',
+  dataSourceSearchInputField: '[data-cy="home-page-search-bar"]',
 
   postgresDataSource: "[data-cy='data-source-postgresql']",
   dataSourceNameInputField: '[data-cy="data-source-name-input-filed"]',
@@ -92,5 +94,7 @@ export const dataSourceSelector = {
   unSavedModalTitle: '[data-cy="unsaved-changes-title"]',
   eventQuerySelectionField: '[data-cy="query-selection-field"]',
   connectionAlertText: '[data-cy="connection-alert-text"]',
+  deleteDSButton: (datasourceName) => {
+    return `[data-cy="${cyParamName(datasourceName)}-delete-button"]`
+  },
 };
-
diff --git a/cypress-tests/cypress/constants/selectors/exportImport.js b/cypress-tests/cypress/constants/selectors/exportImport.js
index 5de0135a1c..7112bbfc46 100644
--- a/cypress-tests/cypress/constants/selectors/exportImport.js
+++ b/cypress-tests/cypress/constants/selectors/exportImport.js
@@ -10,12 +10,12 @@ export const appVersionSelectors = {
   createNewVersion: '[data-cy="create-new-version-title"]',
   versionNamelabel: '[data-cy="version-name-label"]',
   appVersionMenuField:
-    '[data-cy="app-version-selector"] .undefined__indicators',
+    '[data-cy="app-version-selector"] .react-select__indicators',
   versionNameInputField: '[data-cy="version-name-input-field"]',
   createVersionFromLabel: '[data-cy="create-version-from-label"]',
   createVersionInputField: '[data-cy="create-version-from-input-field"]',
   createNewVersionButton: '[data-cy="create-new-version-button"]',
-  appVersionContentList: ".undefined__menu-list",
+  appVersionContentList: ".react-select__menu-list",
 };
 export const exportAppModalSelectors = {
   selectVersionTitle: '[data-cy= "select-a-version-to-export-title"]',
@@ -39,4 +39,4 @@ export const importSelectors = {
   importAnApplication: '[data-cy="import-an-application"]',
   importOptionLabel: '[data-cy="import-option-label"]',
   importOptionInput: '[data-cy="import-option-input"]',
-};
\ No newline at end of file
+};
diff --git a/cypress-tests/cypress/constants/selectors/multipage.js b/cypress-tests/cypress/constants/selectors/multipage.js
index b2278925d9..87ab84b141 100644
--- a/cypress-tests/cypress/constants/selectors/multipage.js
+++ b/cypress-tests/cypress/constants/selectors/multipage.js
@@ -1,9 +1,9 @@
 export const multipageSelector = {
   sidebarPageButton: '[data-cy="left-sidebar-page-button"]',
   pagesLabel: '[data-cy="label-pages"]',
-  addPageIcon: '[data-cy="add-page-option-icon"]',
-  searchPageIcon: '[data-cy="search-page-option-icon"]',
-  pagesPinIcon: '[data-cy="pin-panel-option-icon"]',
+  addPageIcon: '[title="Add Page"]',
+  searchPageIcon: '[title="Search"]',
+  pagesPinIcon: '[title="Pin"]',
 
   homePageLabel: '[data-cy="pages-name-home"]',
   homePageIcon: '[data-cy="home-page-icon"]',
@@ -16,21 +16,21 @@ export const multipageSelector = {
   renameOptionButton: '[data-cy="rename-option-button"]',
   markHomePageIcon: '[data-cy="mark-home-option-icon"]',
   markHomePageOptionButton: '[data-cy="mark-home-option-button"]',
-  hidePageOptionIcon: '[data-cy="hide-page-option-icon"]',
-  hidePageOptionButton: '[data-cy="hide-page-option-button"]',
+  hidePageOptionIcon: '[data-cy="hide-page-on-app-menu-option-icon"]',
+  hidePageOptionButton: '[data-cy="hide-page-on-app-menu-option-button"]',
 
   eventHandlersOptionIcon: '[data-cy="event-handlers-option-icon"]',
   eventHandlerOptionButton: '[data-cy="event-handlers-option-button"]',
 
   disabledDeleteButton:
     ".menu-options > :nth-child(6)>.unstyled-button.disabled",
-  pagesMenuIcon: '[data-cy="menu-icon"]',
+  pagesMenuIcon: '[data-cy="page-global-settings"]',
   pageHeaderSettings: '[data-cy="page-settings-header"]',
   disableThePageMenuLabel: '[data-cy="disable-page-menu-label"]',
   disableMenuDescription: '[data-cy="disable-page-menu-description"]',
   disableMenuToggle: '[data-cy="disable-page-menu-toggle"]',
 
-  hidePageIcon: '[data-cy="hide-page-icon"]',
+  hidePageIcon: '[data-cy="icon-hidden"]',
   deletePageOptionButton: '[data-cy="delete-page-option-button"]',
   modalMessage: '[data-cy="modal-message"]',
   modalConfirmButton: '[data-cy="modal-confirm-button"]',
@@ -39,7 +39,7 @@ export const multipageSelector = {
   modalTitlePageEvents: '[data-cy="modal-title-page-events"]',
   pageEventsLabel: '[data-cy="page-events-labe"]',
   addEventHandlerLink: '[data-cy="add-event-handler"]',
-  noEventHandlerMessage: '[data-cy="no-event-handler-message"]',
+  noEventHandlerMessage: '[data-cy="no-items-banner"]',
   closeModal: '[data-cy="close-option-button"]',
   closeIconEvents: '[data-cy="modal-close-button-page-events"]',
   eventName: '[data-cy="event-name"]',
diff --git a/cypress-tests/cypress/constants/selectors/postgreSql.js b/cypress-tests/cypress/constants/selectors/postgreSql.js
index 1b90f0177e..5784383b40 100644
--- a/cypress-tests/cypress/constants/selectors/postgreSql.js
+++ b/cypress-tests/cypress/constants/selectors/postgreSql.js
@@ -25,7 +25,7 @@ export const postgreSqlSelector = {
   buttonTestConnection: '[data-cy="test-connection-button"]',
   connectionFailedText: '[data-cy="test-connection-failed-text"]',
   buttonSave: '[data-cy="db-connection-save-button"] > .tj-base-btn',
-  dangerAlertNotSupportSSL: '.go3958317564',
+  dangerAlertNotSupportSSL: ".go3958317564",
 
   passwordTextField: '[data-cy="password-text-field"]',
   textConnectionVerified: '[data-cy="test-connection-verified-text"]',
@@ -50,7 +50,7 @@ export const postgreSqlSelector = {
   toggleTransformation: '[data-cy="transformation-toggle-switch"]',
   inputFieldTransformation: '[data-cy="transformation-input-input-field"]',
 
-  headerQueryPreview: '.py-2',
+  headerQueryPreview: ".py-2",
   previewTabJson: '[data-cy="preview-tab-json"]',
   previewTabRaw: '[data-cy="preview-tab-raw"]',
 
@@ -69,7 +69,7 @@ export const postgreSqlSelector = {
   labelSuccessMessageInput: '[data-cy="label-success-message-input"]',
   notificationDurationInput: '[data-cy="label-notification-duration-input"]',
   addEventHandler: '[data-cy="add-event-handler"]',
-  noEventHandlerMessage: '[data-cy="no-event-handler-message"]',
+  noEventHandlerMessage: '[data-cy="no-items-banner"]',
   postgresqlQueryRunButton: '[data-cy="postgresql1-query-run-button"]',
   psqlQueryLabel: '[data-cy="postgresql1-query-label"]',
   psqlQueryDeleteButton: '[data-cy="postgresql1-query-delete-button"]',
diff --git a/cypress-tests/cypress/constants/selectors/table.js b/cypress-tests/cypress/constants/selectors/table.js
index 934a376a2c..27c543ad2a 100644
--- a/cypress-tests/cypress/constants/selectors/table.js
+++ b/cypress-tests/cypress/constants/selectors/table.js
@@ -4,6 +4,7 @@ export const tableSelector = {
     return `[data-cy*="-cell-${index}"]`;
   },
   pageIndexDetails: '[data-cy="page-index-details"]',
+  currentPageIndexDetails: '[data-cy="page-index-details"] > .form-control',
 
   paginationButtonToFirst: '[data-cy="pagination-button-to-first"]',
   paginationButtonToPrevious: '[data-cy="pagination-button-to-previous"]',
@@ -48,7 +49,7 @@ export const tableSelector = {
   fxButton: (action) => {
     return `[data-cy="${String(action)
       .toLowerCase()
-      .replace(/\s+/g, "-")}-fx-button"]`;
+      .replace(/\s+/g, "-")}-fx-button"] > svg`;
   },
 
   toggleButton: (action) => {
@@ -76,4 +77,5 @@ export const tableSelector = {
   },
 
   addNewRowTooltip: '[data-tooltip-id="tooltip-for-add-new-row"]',
+  manageColumns: '[data-tooltip-id="tooltip-for-manage-columns"]',
 };
diff --git a/cypress-tests/cypress/constants/texts/button.js b/cypress-tests/cypress/constants/texts/button.js
index 99ac836880..9d2b3e4942 100644
--- a/cypress-tests/cypress/constants/texts/button.js
+++ b/cypress-tests/cypress/constants/texts/button.js
@@ -3,7 +3,7 @@ export const buttonText = {
   defaultWidgetName: "button1",
   buttonTextLabel: "Button Text",
   loadingState: "Loading State",
-  buttonDocumentationLink: "Button documentation",
+  buttonDocumentationLink: "Read documentation for Button",
   backgroundColor: "Background Color",
   textColor: "Text color",
   loaderColor: "Loader color",
diff --git a/cypress-tests/cypress/constants/texts/common.js b/cypress-tests/cypress/constants/texts/common.js
index ea0e6b5b5c..22699a00f3 100644
--- a/cypress-tests/cypress/constants/texts/common.js
+++ b/cypress-tests/cypress/constants/texts/common.js
@@ -10,7 +10,7 @@ export const path = {
 };
 
 export const commonText = {
-  autoSave: "Saved changes",
+  autoSave: "Changes saved",
   email: "dev@tooljet.io",
   password: "password",
   loginErrorToast: "Invalid email or password",
@@ -172,8 +172,10 @@ export const commonText = {
   },
   groupInputFieldLabel: "Select Group",
   documentationLink: "Read Documentation",
-  constantsNameError: "Constant name should start with a letter or underscore and can only contain letters, numbers and underscores",
-  constantsValueError: "Value should be less than 10000 characters and cannot be empty"
+  constantsNameError:
+    "Constant name should start with a letter or underscore and can only contain letters, numbers and underscores",
+  constantsValueError:
+    "Value should be less than 10000 characters and cannot be empty",
 };
 
 export const commonWidgetText = {
@@ -182,6 +184,7 @@ export const commonWidgetText = {
   accordionGenaral: "General",
   accordionValidation: "Validation",
   accordionLayout: "Layout",
+  accordionDevices: "Devices",
 
   parameterCustomValidation: "Custom validation",
   parameterShowOnDesktop: "Show on desktop",
@@ -192,7 +195,7 @@ export const commonWidgetText = {
   borderRadiusInput: ["{{", "20}}"],
   parameterOptionLabels: "Option labels",
   parameterBoxShadow: "Box Shadow",
-  boxShadowDefaultValue: "0px 0px 0px 0px #00000040",
+  boxShadowDefaultValue: "#00000040",
   parameterOptionvalues: "Option values",
   boxShadowColor: "Box Shadow Color",
   boxShadowFxValue: "-5px 6px 5px 8px #ee121240",
@@ -202,7 +205,7 @@ export const commonWidgetText = {
   codeMirrorInputTrue: codeMirrorInputLabel(true),
   codeMirrorInputFalse: codeMirrorInputLabel("false"),
 
-  addEventHandlerLink: "Add handler",
+  addEventHandlerLink: "New event handler",
   inspectorComponentLabel: "components",
   componentValueLabel: "Value",
   labelDefaultValue: "Default Value",
@@ -224,7 +227,7 @@ export const commonWidgetText = {
     return `Maximum ${value} characters is allowed`;
   },
 
-  datepickerDocumentationLink: "Datepicker documentation",
+  datepickerDocumentationLink: "Read documentation for Datepicker",
   text1: "text1",
   textinput1: "textinput1",
   toggleswitch1: "toggleswitch1",
diff --git a/cypress-tests/cypress/constants/texts/dataSource.js b/cypress-tests/cypress/constants/texts/dataSource.js
index 1bdf3ae009..55f1dce0e9 100644
--- a/cypress-tests/cypress/constants/texts/dataSource.js
+++ b/cypress-tests/cypress/constants/texts/dataSource.js
@@ -1,74 +1,74 @@
 export const dataSourceText = {
-    labelDataSources: "Datasources",
-    labelAddDataSource: "+ add data source",
+  labelDataSources: "Datasources",
+  labelAddDataSource: "+ add data source",
 
-    allDataSources: "All data sources (41)",
-    allDatabase: "Databases (17)",
-    allApis: "APIs (20)",
-    allCloudStorage: "Cloud Storage (4)",
-    pluginsLabelAndCount: "Plugins (0)",
+  allDataSources: "All data sources (41)",
+  allDatabase: "Databases (17)",
+  allApis: "APIs (20)",
+  allCloudStorage: "Cloud Storage (4)",
+  pluginsLabelAndCount: "Plugins (0)",
 
-    postgreSQL: "PostgreSQL",
-    labelHost: "Host",
-    labelPort: "Port",
-    labelSSL: "SSL",
-    labelDbName: "Database Name",
-    labelUserName: "Username",
-    labelPassword: "Password",
-    label: "Encrypted",
-    sslCertificate: "SSL Certificate",
-    whiteListIpText:
-        "Please white-list our IP address if the data source is not publicly accessible",
-    textCopy: "Copy",
-    readDocumentation: "Read documentation",
-    couldNotConnect: "could not connect",
-    buttonTextSave: "Save",
-    serverNotSuppotSsl: "The server does not support SSL connections",
-    psqlName: "cypress-postgresql",
+  postgreSQL: "PostgreSQL",
+  labelHost: "Host",
+  labelPort: "Port",
+  labelSSL: "SSL",
+  labelDbName: "Database Name",
+  labelUserName: "Username",
+  labelPassword: "Password",
+  label: "Encrypted",
+  sslCertificate: "SSL Certificate",
+  whiteListIpText:
+    "Please white-list our IP address if the data source is not publicly accessible",
+  textCopy: "Copy",
+  readDocumentation: "Read documentation",
+  couldNotConnect: "could not connect",
+  buttonTextSave: "Save",
+  serverNotSuppotSsl: "The server does not support SSL connections",
+  psqlName: "cypress-postgresql",
 
-    labelConnectionVerified: "connection verified",
-    toastDSAdded: "Data Source Added",
-    placeholderNameOfDB: "Name of the database",
-    placeholderEnterHost: "Enter host",
-    placeholderEnterPort: "Enter port",
-    placeholderEnterUserName: "Enter username",
+  labelConnectionVerified: "connection verified",
+  toastDSAdded: "Data Source Added",
+  placeholderNameOfDB: "Name of the database",
+  placeholderEnterHost: "Enter host",
+  placeholderEnterPort: "Enter port",
+  placeholderEnterUserName: "Enter username",
 
-    headerQueries: "Queries",
-    headerSelectDatasource: "Select Data Source",
-    noQueryText: "You haven't created queries yet.",
-    buttonLabelCreateQuery: "Create query",
-    tabGeneral: "General",
-    firstQueryName: "postgresql1",
-    buttonLabelPreview: "Preview",
-    buttonLabelCreateAndRun: "Create & Run",
-    buttonLabelCreate: "Create",
-    queryModeSql: "SQL mode",
-    queryModeGui: "GUI mode",
+  headerQueries: "Queries",
+  headerSelectDatasource: "Select Data Source",
+  noQueryText: "You haven't created queries yet.",
+  buttonLabelCreateQuery: "Create query",
+  tabGeneral: "General",
+  firstQueryName: "postgresql1",
+  buttonLabelPreview: "Preview",
+  buttonLabelCreateAndRun: "Create & Run",
+  buttonLabelCreate: "Create",
+  queryModeSql: "SQL mode",
+  queryModeGui: "GUI mode",
 
-    headerTransformations: "Enable Transformations",
-    json: "JSON",
-    raw: "Raw",
+  headerTransformations: "Enable Transformations",
+  json: "JSON",
+  raw: "Raw",
 
-    labelOperation: "Operation",
-    labelTable: "Table",
-    labelPrimaryKeyColumn: "Primary key column",
-    labelRecordsToUpdate: "Records to update",
+  labelOperation: "Operation",
+  labelTable: "Table",
+  labelPrimaryKeyColumn: "Primary key column",
+  labelRecordsToUpdate: "Records to update",
 
-    toggleLabelRunOnPageLoad: "Run this query on application load?",
-    toggleLabelconfirmation: "Request confirmation before running query?",
-    toggleLabelShowNotification: "Show notification on success?",
-    labelSuccessMessage: "Success Message",
-    labelNotificatioDuration: "Notification duration (s)",
+  toggleLabelRunOnPageLoad: "Run this query on application load?",
+  toggleLabelconfirmation: "Request confirmation before running query?",
+  toggleLabelShowNotification: "Show notification on success?",
+  labelSuccessMessage: "Success Message",
+  labelNotificatioDuration: "Notification duration (s)",
 
-    dialogueTextDelete: "Do you really want to delete this query?",
-    cancel: "Cancel",
-    yes: "Yes",
+  dialogueTextDelete: "Do you really want to delete this query?",
+  cancel: "Cancel",
+  yes: "Yes",
 
-    guiOptionBulkUpdate: "Bulk update using primary key",
-    buttonTextTestConnection: "Test Connection",
+  guiOptionBulkUpdate: "Bulk update using primary key",
+  buttonTextTestConnection: "Test Connection",
 
-    tabAdvanced: "Advanced",
-    labelNoEventhandler: "This query doesn't have any event handlers",
-    toastDSSaved: "Data Source Saved",
-    unSavedModalTitle: "Unsaved Changes"
-};
\ No newline at end of file
+  tabAdvanced: "Advanced",
+  labelNoEventhandler: "No event handlers",
+  toastDSSaved: "Data Source Saved",
+  unSavedModalTitle: "Unsaved Changes",
+};
diff --git a/cypress-tests/cypress/constants/texts/datePicker.js b/cypress-tests/cypress/constants/texts/datePicker.js
index 758068341f..be2ea22cdc 100644
--- a/cypress-tests/cypress/constants/texts/datePicker.js
+++ b/cypress-tests/cypress/constants/texts/datePicker.js
@@ -13,6 +13,6 @@ export const datePickerText = {
   labelEnableTimeSection: "Enable time selection?",
   labelDisabledDates: "Disabled dates",
 
-  noEventMessage: "This datepicker doesn't have any event handlers",
+  noEventMessage: "No event handlers",
   defaultTime: "12:00 AM",
 };
diff --git a/cypress-tests/cypress/constants/texts/listview.js b/cypress-tests/cypress/constants/texts/listview.js
index 8e77128f1d..b662a28916 100644
--- a/cypress-tests/cypress/constants/texts/listview.js
+++ b/cypress-tests/cypress/constants/texts/listview.js
@@ -2,6 +2,6 @@ export const listviewText = {
   defaultWidgetName: "Listview1",
   showBottomBorder: "Show bottom border",
   rowHeight: "Row height",
-  noEventHandlerMessage: "This listview doesn't have any event handlers",
+  noEventHandlerMessage: "No event handlers",
   listData: "List data",
 };
diff --git a/cypress-tests/cypress/constants/texts/multipage.js b/cypress-tests/cypress/constants/texts/multipage.js
index e5779bf5b6..fde2a00631 100644
--- a/cypress-tests/cypress/constants/texts/multipage.js
+++ b/cypress-tests/cypress/constants/texts/multipage.js
@@ -1,6 +1,6 @@
 export const multipageText = {
   labelPages: "Pages",
-  pageNameHome: "Home",
+  pageNameHome: "HomeHome",
   headerPageHandle: "Page Handle",
   pageHandleModalTitle: "Edit page handle",
   editPagehandleInfo:
@@ -10,13 +10,13 @@ export const multipageText = {
 
   optionRename: "Rename",
   optionMarkHome: "Mark home",
-  optionHidePage: "Hide page",
+  optionHidePage: "Hide page on app menu",
 
   optionEventHandler: "Event Handlers",
   eventModalTitle: "Page Events",
   labelEvents: "Events",
-  addEventHandlerLink: "Add handler",
-  noEventHandlerInfo: "This page doesn't have any event handlers",
+  addEventHandlerLink: "New event handler",
+  noEventHandlerInfo: "No event handlers",
 
   optionDeletePage: "Delete Page",
   deleteModalMessage: "Do you really want to delete Home page?",
diff --git a/cypress-tests/cypress/constants/texts/multiselect.js b/cypress-tests/cypress/constants/texts/multiselect.js
index 4abac6556b..6d277e80bb 100644
--- a/cypress-tests/cypress/constants/texts/multiselect.js
+++ b/cypress-tests/cypress/constants/texts/multiselect.js
@@ -2,7 +2,7 @@ export const multiselectText = {
   multiselect: "Multiselect",
   defaultWidgetName: "Multiselect1",
   labelAllItemsSelected: "All items are selected.",
-  noEventsMessage: "This multiselect doesn't have any event handlers",
+  noEventsMessage: "No event handlers",
   dropdwonOptionSelectAll: "Select All",
 
   enableSelectAllOptions: "Enable select All option",
diff --git a/cypress-tests/cypress/constants/texts/numberInput.js b/cypress-tests/cypress/constants/texts/numberInput.js
index 6f8e8661d4..6a220fa8cf 100644
--- a/cypress-tests/cypress/constants/texts/numberInput.js
+++ b/cypress-tests/cypress/constants/texts/numberInput.js
@@ -1,4 +1,4 @@
 export const numberInputText = {
   defaultWidgetName: "numberinput1",
-  numberInputDocumentationLink: "NumberInput documentation",
-}
\ No newline at end of file
+  numberInputDocumentationLink: "Read documentation for NumberInput",
+};
diff --git a/cypress-tests/cypress/constants/texts/postgreSql.js b/cypress-tests/cypress/constants/texts/postgreSql.js
index 1038710dc0..a71520410a 100644
--- a/cypress-tests/cypress/constants/texts/postgreSql.js
+++ b/cypress-tests/cypress/constants/texts/postgreSql.js
@@ -67,6 +67,6 @@ export const postgreSqlText = {
   buttonTextTestConnection: "Test Connection",
 
   tabAdvanced: "Advanced",
-  labelNoEventhandler: "This query doesn't have any event handlers",
+  labelNoEventhandler: "No event handlers",
   toastDSSaved: "Data Source Saved",
 };
diff --git a/cypress-tests/cypress/constants/texts/table.js b/cypress-tests/cypress/constants/texts/table.js
index 533b88c178..275fdf358f 100644
--- a/cypress-tests/cypress/constants/texts/table.js
+++ b/cypress-tests/cypress/constants/texts/table.js
@@ -9,7 +9,9 @@ export const tableText = {
   ],
 
   placeHolderSearch: "Search",
-  defaultPageIndexDetails: "1 of 1",
+  defaultPageIndexDetails: "of 1",
+  currentPageIndexDetails: 1,
+
   defaultNumberOfRecords: "4 Records",
 
   optionDownloadCSV: "Download as CSV",
@@ -29,6 +31,6 @@ export const tableText = {
   optionEquals: "equals",
 
   labelDynamicColumn: "Use dynamic column",
-  makeEditable: "make editable",
+  makeEditable: "Make editable",
   lableDisableActionButton: "Disable action button",
 };
diff --git a/cypress-tests/cypress/constants/texts/textInput.js b/cypress-tests/cypress/constants/texts/textInput.js
index 7a4700bb81..eec3bc78ce 100644
--- a/cypress-tests/cypress/constants/texts/textInput.js
+++ b/cypress-tests/cypress/constants/texts/textInput.js
@@ -1,4 +1,4 @@
 export const textInputText = {
   defaultWidgetName: "textinput1",
-  textInputDocumentationLink: "TextInput documentation",
-}
\ No newline at end of file
+  textInputDocumentationLink: "Read documentation for TextInput",
+};
diff --git a/cypress-tests/cypress/e2e/editor/data-source/snowflakeHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/data-source/snowflakeHappyPath.cy.js
index 056a2713d0..379d3a834b 100644
--- a/cypress-tests/cypress/e2e/editor/data-source/snowflakeHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/data-source/snowflakeHappyPath.cy.js
@@ -103,7 +103,7 @@ describe("Data sources", () => {
     );
     cy.get('[data-cy="connection-alert-text"]').should(
       "have.text",
-      "A user name must be specified."
+      "Network error. Could not reach Snowflake."
     );
     deleteDatasource(`cypress-${data.lastName}-snowflake`);
   });
diff --git a/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js
index 1a7c4ad13f..20ba9f4881 100644
--- a/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js
@@ -20,8 +20,9 @@ import {
 
 describe("Editor- Global Settings", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
   });
 
   it("should verify global settings", () => {
@@ -42,13 +43,14 @@ describe("Editor- Global Settings", () => {
       "have.text",
       "Maintenance mode"
     );
+    cy.hideTooltip();
     cy.get('[data-cy="label-max-canvas-width"]').verifyVisibleElement(
       "have.text",
       "Max width of canvas"
     );
     cy.get('[data-cy="label-bg-canvas"]').verifyVisibleElement(
       "have.text",
-      "Background color of canvas"
+      "Canvas background"
     );
     // cy.get('[data-cy="canvas-bg-colour-picker"]').click();
     selectColourFromColourPicker(
@@ -103,6 +105,6 @@ describe("Editor- Global Settings", () => {
       .invoke("attr", "class")
       .should("contains", "disabled-btn");
 
-    cy.wait(2000);
+    cy.apiDeleteApp();
   });
 });
diff --git a/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js b/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js
index d639a34d82..c518a1ea40 100644
--- a/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js
@@ -14,8 +14,9 @@ import { multipageSelector } from "Selectors/multipage";
 
 describe("Editor- Inspector", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
   });
 
   it("should verify the values of inspector", () => {
@@ -128,7 +129,7 @@ describe("Editor- Inspector", () => {
     verifyValue("key", "String", `"value"`);
 
     cy.get(`[data-cy="inspector-node-key"] > .mx-1`).realHover();
-    cy.get(".mx-1 > img").realClick();
+    cy.get("[data-cy='copy-icon']").realClick();
     cy.realPress("Escape");
 
     cy.window().then((win) => {
@@ -153,5 +154,6 @@ describe("Editor- Inspector", () => {
     cy.get(`[data-cy="inspector-node-button1"] > .mx-1`).realHover();
     cy.get('[style="height: 13px; width: 13px;"] > img').click();
     cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+    cy.apiDeleteApp();
   });
 });
diff --git a/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js b/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js
index 3142bf4b4a..1e2c3f33a5 100644
--- a/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js
@@ -40,8 +40,9 @@ import {
 
 describe("Multipage", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
   });
 
   it("should verify the elements on multipage", () => {
@@ -53,8 +54,6 @@ describe("Multipage", () => {
     data.maximumLength = randomNumber(8, 10);
     data.customText = randomString(12);
 
-    cy.renameApp(data.appName);
-
     cy.get(multipageSelector.sidebarPageButton).click();
     cy.get(multipageSelector.pagesLabel).verifyVisibleElement(
       "have.text",
@@ -112,7 +111,8 @@ describe("Multipage", () => {
 
     cy.get(multipageSelector.pagesPinIcon).click();
     cy.get(multipageSelector.sidebarPageButton).click();
-    cy.get(multipageSelector.pagesMenuIcon).click({ force: true });
+    cy.hideTooltip();
+    cy.get(multipageSelector.pagesMenuIcon).realClick();
 
     cy.get(multipageSelector.pageHeaderSettings).verifyVisibleElement(
       "have.text",
@@ -133,7 +133,7 @@ describe("Multipage", () => {
     cy.get('[data-cy="pages-name-test_page"]')
       .verifyVisibleElement("have.text", "test_page")
       .click();
-    cy.get(multipageSelector.pageMenuIcon).click();
+    cy.get(multipageSelector.pageMenuIcon).eq(1).click();
     cy.wait(500);
     cy.get(multipageSelector.pageHandleText).verifyVisibleElement(
       "have.text",
@@ -151,11 +151,14 @@ describe("Multipage", () => {
       .find(multipageSelector.hidePageIcon)
       .should("be.visible");
 
-    hideOrUnhidePage("home", "unhide");
+    hideOrUnhidePage("home", "show");
     cy.notVisible(multipageSelector.hidePageIcon);
 
-    cy.get(multipageSelector.homePageLabel).click();
-    cy.get(multipageSelector.pageMenuIcon).click();
+    cy.get(multipageSelector.homePageLabel)
+      .click()
+      .parent()
+      .find(multipageSelector.pageMenuIcon)
+      .click();
     cy.wait(500);
     cy.get(multipageSelector.deletePageOptionButton).click();
     cy.get(".modal-title").verifyVisibleElement(
@@ -173,16 +176,20 @@ describe("Multipage", () => {
     cy.get(multipageSelector.modalCancelButton)
       .verifyVisibleElement("have.text", "Cancel")
       .click();
-    cy.get('[data-cy="pages-name-test_page"]').should("be.visible");
-
-    cy.get(multipageSelector.pageMenuIcon).click();
     cy.wait(500);
+    cy.get('[data-cy="pages-name-home"]')
+      .should("be.visible")
+      .click()
+      .parent()
+      .find(multipageSelector.pageMenuIcon)
+      .click();
+
     cy.get(multipageSelector.deletePageOptionButton).click();
     cy.get(multipageSelector.modalConfirmButton).click();
     cy.notVisible(multipageSelector.homePageLabel);
-
-    cy.get(multipageSelector.pageMenuIcon).click();
     cy.wait(500);
+    cy.get(multipageSelector.pageMenuIcon).click();
+
     cy.get(multipageSelector.eventHandlerOptionButton).click();
     cy.get(multipageSelector.modalTitlePageEvents).verifyVisibleElement(
       "have.text",
@@ -220,7 +227,12 @@ describe("Multipage", () => {
     clearSearch();
 
     addNewPage("test");
-    cy.get(multipageSelector.pageMenuIcon).click();
+    cy.get('[data-cy="pages-name-test"]')
+      .should("be.visible")
+      .click()
+      .parent()
+      .find(multipageSelector.pageMenuIcon)
+      .click();
     cy.wait(500);
     cy.get(multipageSelector.pageHandleText).click();
     cy.get(multipageSelector.modalTitleEditPageHandle).verifyVisibleElement(
@@ -264,7 +276,7 @@ describe("Multipage", () => {
 
     hideOrUnhidePage("pageOne");
     hideOrUnhidePage("pageTwo");
-    hideOrUnhidePage("pageOne", "unhide");
+    hideOrUnhidePage("pageOne", "show");
     addEventHandler("pageThree");
     cy.get(multipageSelector.closeModal).click();
     setHomePage("pageThree");
diff --git a/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js
index a7126bd478..22b0a65aa5 100644
--- a/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js
@@ -59,11 +59,13 @@ import {
   searchPage,
 } from "Support/utils/multipage";
 import { verifyNodeData, openNode, verifyValue } from "Support/utils/inspector";
+import { deleteDownloadsFolder } from "Support/utils/common";
 
 describe("RunJS", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.viewport(1800, 1800);
     cy.dragAndDropWidget("Button");
     resizeQueryPanel("80");
@@ -84,10 +86,12 @@ describe("RunJS", () => {
     openNode("runjs1");
     verifyValue("data", "Boolean", "true");
     verifyValue("rawData", "Boolean", "true");
+    cy.apiDeleteApp();
   });
 
   it("should verify actions", () => {
     const data = {};
+    deleteDownloadsFolder();
     data.customText = randomString(12);
 
     selectQueryFromLandingPage("runjs", "JavaScript");
@@ -195,6 +199,11 @@ describe("RunJS", () => {
     addInputOnQueryField("runjs", "actions.logout()");
     query("run");
     cy.get('[data-cy="sign-in-header"]').should("be.visible");
+    cy.apiLogin();
+    cy.openApp(
+      Cypress.env("appId"),
+      '[data-cy="draggable-widget-modal1-launch-button"]'
+    );
   });
 
   it("should verify global and page data", () => {
@@ -243,6 +252,7 @@ describe("RunJS", () => {
       query("preview");
       verifypreview("raw", `true`);
     }
+
     addInputOnQueryField("runjs", "return globals.mode");
     query("preview");
     verifypreview("raw", `{"value":"edit"}`);
@@ -250,6 +260,7 @@ describe("RunJS", () => {
     addInputOnQueryField("runjs", "return constants");
     query("preview");
     verifypreview("raw", `{}`);
+    cy.apiDeleteApp();
   });
 
   it("should verify action by button", () => {
@@ -275,6 +286,7 @@ describe("RunJS", () => {
     cy.get('[data-cy="query-selection-field"]').should("have.text", "newrunjs");
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();
     cy.verifyToastMessage(commonSelectors.toastMessage, "alert from runjs");
+    cy.apiDeleteApp();
   });
 
   it("should verify runjs toggle options", () => {
@@ -320,5 +332,6 @@ describe("RunJS", () => {
     cy.get('[data-cy="modal-confirm-button"]').realClick();
     cy.verifyToastMessage(commonSelectors.toastMessage, "Success alert");
     cy.verifyToastMessage(commonSelectors.toastMessage, "alert from runjs");
+    cy.apiDeleteApp();
   });
 });
diff --git a/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js
index 0933c6144e..6f2bef4624 100644
--- a/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js
@@ -62,8 +62,9 @@ import { verifyNodeData, openNode, verifyValue } from "Support/utils/inspector";
 
 describe("runpy", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.viewport(1800, 1800);
     cy.dragAndDropWidget("Button");
     resizeQueryPanel("80");
@@ -86,6 +87,7 @@ describe("runpy", () => {
     openNode("runpy1");
     verifyValue("data", "Boolean", "true");
     verifyValue("rawData", "Boolean", "true");
+    cy.apiDeleteApp();
   });
 
   it("should verify actions", () => {
@@ -212,7 +214,6 @@ actions.unsetPageVariable('pageVar')`
     cy.wait(200);
     cy.waitForAutoSave();
     query("run");
-    waitForQueryAction("run");
     cy.get('[data-cy="sign-in-header"]').should("be.visible");
   });
 
@@ -258,6 +259,7 @@ actions.unsetPageVariable('pageVar')`
       // query("preview");
       // verifypreview("raw", `true`);
     }
+
     addInputOnQueryField("runpy", "tj_globals.mode.value");
     query("preview");
     verifypreview("raw", `edit`);
@@ -265,6 +267,7 @@ actions.unsetPageVariable('pageVar')`
     query("preview");
     waitForQueryAction("preview");
     verifypreview("raw", `{}`);
+    cy.apiDeleteApp();
   });
 
   it("should verify action by button", () => {
@@ -290,6 +293,7 @@ actions.unsetPageVariable('pageVar')`
     cy.get('[data-cy="query-selection-field"]').should("have.text", "newrunpy");
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();
     cy.verifyToastMessage(commonSelectors.toastMessage, "alert from runpy");
+    cy.apiDeleteApp();
   });
 
   it("should verify runpy toggle options", () => {
@@ -339,5 +343,6 @@ actions.unsetPageVariable('pageVar')`
       "alert from runpy",
       false
     );
+    cy.apiDeleteApp();
   });
 });
diff --git a/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js
index 9713071637..e5318b6dcc 100644
--- a/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js
@@ -33,8 +33,9 @@ import {
 
 describe("Editor- Test Button widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 500);
   });
 
@@ -95,9 +96,7 @@ describe("Editor- Test Button widget", () => {
     );
 
     verifyControlComponentAction(data.widgetName, data.customMessage);
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
+    cy.apiDeleteApp(data.appName);
   });
 
   it("should verify the styles of the button widget", () => {
@@ -224,9 +223,7 @@ describe("Editor- Test Button widget", () => {
       data.boxShadowColor,
       4
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
+    cy.apiDeleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -281,7 +278,7 @@ describe("Editor- Test Button widget", () => {
         commonWidgetText.parameterBorderRadius
       )
     )
-      .last()
+      .first()
       .clear()
       .type(buttonText.borderRadiusInput);
 
@@ -340,8 +337,7 @@ describe("Editor- Test Button widget", () => {
       data.boxShadowParam
     );
 
-    cy.get(commonSelectors.viewerPageLogo).click();
-    cy.deleteApp(data.appName);
+    cy.apiDeleteApp(data.appName);
   });
 
   it("Should verify csa", () => {
@@ -400,5 +396,6 @@ describe("Editor- Test Button widget", () => {
     cy.get(
       commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
     ).should("not.be.visible");
+    cy.apiDeleteApp();
   });
 });
diff --git a/cypress-tests/cypress/e2e/editor/widget/componentsBasicHappypath.cy.js b/cypress-tests/cypress/e2e/editor/widget/componentsBasicHappypath.cy.js
index 973255ecf1..768f5567d4 100644
--- a/cypress-tests/cypress/e2e/editor/widget/componentsBasicHappypath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/componentsBasicHappypath.cy.js
@@ -35,18 +35,21 @@ describe("Basic components", () => {
   const data = {};
   beforeEach(() => {
     data.appName = `${fake.companyName}-${fake.companyName}-App`;
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.modifyCanvasSize(900, 900);
-    cy.renameApp(data.appName);
     cy.intercept("GET", "/api/comments/*").as("loadComments");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("Should verify Toggle switch", () => {
-    cy.dragAndDropWidget("Toggle Switch", 50, 50);
+    cy.dragAndDropWidget("Toggle Switch", 200, 200);
     verifyComponent("toggleswitch1");
 
-    cy.resizeWidget("toggleswitch1", 650, 400);
+    cy.resizeWidget("toggleswitch1", 650, 400, false);
 
     openEditorSidebar("toggleswitch1");
     editAndVerifyWidgetName("toggleswitch2");
@@ -67,21 +70,18 @@ describe("Basic components", () => {
     cy.go("back");
     cy.waitForAppLoad();
     deleteComponentAndVerify("toggleswitch2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Checkbox", () => {
-    cy.dragAndDropWidget("Checkbox", 50, 50);
-    // cy.resizeWidget("checkbox1", 50, 200);
+    resizeQueryPanel("0");
+    cy.dragAndDropWidget("Checkbox", 200, 200);
+    // cy.resizeWidget("checkbox1", 50, 200,false);
     cy.forceClickOnCanvas();
     verifyComponent("checkbox1");
 
-    cy.resizeWidget("checkbox1", 650, 400);
-
     openEditorSidebar("checkbox1");
     editAndVerifyWidgetName("checkbox2");
+    cy.resizeWidget("checkbox2", 650, 400, false);
 
     verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
     cy.forceClickOnCanvas();
@@ -96,18 +96,15 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("checkbox2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Radio Button", () => {
-    cy.dragAndDropWidget("Radio Button", 50, 50);
-    // cy.resizeWidget("radiobutton1", 100, 200);
+    cy.dragAndDropWidget("Radio Button", 200, 200);
+    // cy.resizeWidget("radiobutton1", 100, 200,false);
     cy.forceClickOnCanvas();
     verifyComponent("radiobutton1");
 
-    cy.resizeWidget("radiobutton1", 650, 400);
+    cy.resizeWidget("radiobutton1", 650, 400, false);
 
     openEditorSidebar("radiobutton1");
     editAndVerifyWidgetName("radiobutton2");
@@ -125,20 +122,17 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("radiobutton2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
   it("Should verify Dropdown", () => {
-    cy.dragAndDropWidget("Dropdown", 50, 50);
-    // cy.resizeWidget("radiobutton1", 100, 200);
+    resizeQueryPanel("0");
+    cy.dragAndDropWidget("Dropdown", 200, 200);
+    cy.resizeWidget("dropdown1", 400, 500, false);
     cy.forceClickOnCanvas();
     verifyComponent("dropdown1");
 
-    cy.resizeWidget("dropdown1", 650, 400);
-
     openEditorSidebar("dropdown1");
     editAndVerifyWidgetName("dropdown2");
+    cy.resizeWidget("dropdown2", 650, 400, false);
 
     verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
     cy.forceClickOnCanvas();
@@ -153,22 +147,18 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("dropdown2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
   //pending
-  it.skip("Should verify Rating", () => {
+  it("Should verify Rating", () => {
     cy.dragAndDropWidget("Rating", 200, 200);
     cy.get('[data-cy="draggable-widget-starrating1"]').click({ force: true });
-    cy.resizeWidget("starrating1", 200, 500);
+    cy.resizeWidget("starrating1", 400, 500, false);
     cy.forceClickOnCanvas();
     verifyComponent("starrating1");
 
-    cy.resizeWidget("starrating1", 650, 400);
-
     openEditorSidebar("starrating1");
     editAndVerifyWidgetName("starrating2");
+    cy.resizeWidget("starrating2", 650, 400, false);
 
     verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
     cy.forceClickOnCanvas();
@@ -183,9 +173,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("starrating2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Button Group", () => {
@@ -193,7 +180,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("buttongroup1");
 
-    cy.resizeWidget("buttongroup1", 650, 400);
+    cy.resizeWidget("buttongroup1", 650, 400, false);
 
     openEditorSidebar("buttongroup1");
     editAndVerifyWidgetName("buttongroup2");
@@ -210,18 +197,15 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("buttongroup2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Calendar", () => {
-    cy.dragAndDropWidget("Calendar", 50, 50);
+    cy.dragAndDropWidget("Calendar", 200, 200);
     cy.get('[data-cy="draggable-widget-calendar1"]').click({ force: true });
     cy.forceClickOnCanvas();
     verifyComponent("calendar1");
 
-    cy.resizeWidget("calendar1", 650, 400);
+    cy.resizeWidget("calendar1", 650, 400, false);
 
     openEditorSidebar("calendar1");
     editAndVerifyWidgetName("calendar2");
@@ -232,38 +216,31 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("calendar2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Chart", () => {
-    cy.dragAndDropWidget("Chart", 50, 50);
+    cy.dragAndDropWidget("Chart", 200, 200);
     cy.get('[data-cy="draggable-widget-chart1"]').click({ force: true });
-    cy.forceClickOnCanvas();
     verifyComponent("chart1");
 
-    cy.resizeWidget("chart1", 650, 400);
-
     openEditorSidebar("chart1");
     editAndVerifyWidgetName("chart2", ["Chart data", "Properties"]);
+    // cy.resizeWidget("chart1", 650, 400, false);
 
     verifyAndModifyParameter("Title", "label");
     cy.forceClickOnCanvas();
-    cy.waitForAutoSave();
+    cy.resizeWidget("chart2", 650, 400, false);
     cy.get('[data-cy="draggable-widget-chart2"]').should(
       "contain.text",
       "label"
     );
+    cy.waitForAutoSave();
 
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
     verifyComponent("chart2");
 
     cy.go("back");
     deleteComponentAndVerify("chart2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Circular Progress Bar", () => {
@@ -271,7 +248,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("circularprogressbar1");
 
-    cy.resizeWidget("circularprogressbar1", 650, 400);
+    cy.resizeWidget("circularprogressbar1", 650, 400, false);
 
     openEditorSidebar("circularprogressbar1");
     editAndVerifyWidgetName("circularprogressbar2");
@@ -284,9 +261,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("circularprogressbar2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Code Editor", () => {
@@ -295,7 +269,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("codeeditor1");
 
-    cy.resizeWidget("codeeditor1", 650, 400);
+    cy.resizeWidget("codeeditor1", 650, 400, false);
 
     openEditorSidebar("codeeditor1");
     editAndVerifyWidgetName("codeeditor2");
@@ -307,9 +281,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("codeeditor2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Color Picker", () => {
@@ -318,7 +289,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("colorpicker1");
 
-    cy.resizeWidget("colorpicker1", 650, 400);
+    cy.resizeWidget("colorpicker1", 650, 400, false);
 
     openEditorSidebar("colorpicker1");
     editAndVerifyWidgetName("colorpicker2");
@@ -331,17 +302,13 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("colorpicker2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
-  //needed fix
-  it.skip("Should verify Custom Component", () => {
-    cy.dragAndDropWidget("Custom Component", 50, 50);
-    cy.get('[data-cy="draggable-widget-customcomponent1"]').click({
-      force: true,
-    });
-    cy.forceClickOnCanvas();
+  it("Should verify Custom Component", () => {
+    cy.dragAndDropWidget("Custom Component", 200, 200);
+    // cy.get('[data-cy="draggable-widget-customcomponent1"]').click({
+    //   force: true,
+    // });
+    // cy.forceClickOnCanvas();
     verifyComponent("customcomponent1");
     openEditorSidebar("customcomponent1");
 
@@ -352,39 +319,33 @@ describe("Basic components", () => {
       { delay: 30 }
     );
     cy.forceClickOnCanvas();
-
-    cy.get(commonWidgetSelector.draggableWidget(name)).trigger("mouseover");
-    cy.get(commonWidgetSelector.widgetConfigHandle(name))
-      .click()
-      .should("have.text", name);
-
-    cy.resizeWidget("customcomponent1", 650, 400);
-
-    openEditorSidebar("customcomponent1");
-    cy.forceClickOnCanvas();
     cy.waitForAutoSave();
+    cy.resizeWidget("customcomponent2", 650, 400, false);
+    cy.wait(2000);
+    cy.get(
+      commonWidgetSelector.draggableWidget("customcomponent2")
+    ).realHover();
+    cy.get(commonWidgetSelector.widgetConfigHandle("customcomponent2"))
+      .click()
+      .should("have.text", "customcomponent2");
 
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
     verifyComponent("customcomponent2", ["Code"]);
 
     cy.go("back");
     deleteComponentAndVerify("customcomponent2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Container", () => {
-    cy.dragAndDropWidget("Container", 50, 50);
+    cy.dragAndDropWidget("Container", 200, 200);
     cy.forceClickOnCanvas();
     verifyComponent("container1");
 
-    cy.resizeWidget("container1", 650, 400);
-
     openEditorSidebar("container1");
     editAndVerifyWidgetName("container2", ["Layout"]);
 
     cy.forceClickOnCanvas();
+    cy.resizeWidget("container2", 650, 400, false);
     cy.waitForAutoSave();
 
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
@@ -392,9 +353,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("container2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Date-Range Picker", () => {
@@ -403,7 +361,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("daterangepicker1");
 
-    cy.resizeWidget("daterangepicker1", 650, 400);
+    cy.resizeWidget("daterangepicker1", 650, 400, false);
 
     openEditorSidebar("daterangepicker1");
     editAndVerifyWidgetName("daterangepicker2");
@@ -416,11 +374,8 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("daterangepicker2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
-  //visible issue
+  // visible issue
   it.skip("Should verify Divider", () => {
     verifyComponentWithOutLabel(
       "Divider",
@@ -440,10 +395,10 @@ describe("Basic components", () => {
   });
 
   it("Should verify Form", () => {
-    cy.dragAndDropWidget("Form", 50, 50);
+    cy.dragAndDropWidget("Form", 200, 200);
     verifyComponent("form1");
 
-    cy.resizeWidget("form1", 650, 400);
+    cy.resizeWidget("form1", 650, 400, false);
 
     openEditorSidebar("form1");
     editAndVerifyWidgetName("form2");
@@ -455,16 +410,13 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("form2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify HTML", () => {
-    cy.dragAndDropWidget("HTML Viewe", 50, 50, "HTML Viewer"); // search logic WIP
+    cy.dragAndDropWidget("HTML Viewe", 200, 200, "HTML Viewer"); // search logic WIP
     verifyComponent("html1");
 
-    cy.resizeWidget("html1", 650, 400);
+    cy.resizeWidget("html1", 650, 400, false);
 
     openEditorSidebar("html1");
     editAndVerifyWidgetName("html2");
@@ -476,9 +428,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("html2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Icon", () => {
@@ -489,7 +438,7 @@ describe("Basic components", () => {
     verifyComponentWithOutLabel("Iframe", "iframe1", "iframe2", data.appName);
   });
 
-  it.skip("Should verify Kamban", () => {
+  it.skip("Should verify Kanban", () => {
     verifyComponentWithOutLabel("Kanban", "kanban1", "kanban2", data.appName);
   });
 
@@ -498,7 +447,7 @@ describe("Basic components", () => {
   });
 
   it("Should verify Map", () => {
-    cy.dragAndDropWidget("Map", 50, 50);
+    cy.dragAndDropWidget("Map", 200, 200);
     cy.get("body").then(($body) => {
       if ($body.find(".dismissButton").length > 0) {
         cy.get(".dismissButton").click();
@@ -507,7 +456,7 @@ describe("Basic components", () => {
 
     verifyComponent("map1");
 
-    cy.resizeWidget("map1", 650, 400);
+    cy.resizeWidget("map1", 650, 400, false);
 
     openEditorSidebar("map1");
     editAndVerifyWidgetName("map2");
@@ -519,9 +468,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("map2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Modal", () => {
@@ -529,10 +475,10 @@ describe("Basic components", () => {
   });
 
   it("Should verify PDF", () => {
-    cy.dragAndDropWidget("PDF", 50, 50);
+    cy.dragAndDropWidget("PDF", 200, 200);
     verifyComponent("pdf1");
 
-    cy.resizeWidget("pdf1", 650, 400);
+    cy.resizeWidget("pdf1", 650, 400, false);
 
     openEditorSidebar("pdf1");
     editAndVerifyWidgetName("pdf2");
@@ -544,9 +490,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("pdf2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Pagination", () => {
@@ -567,7 +510,7 @@ describe("Basic components", () => {
     );
   });
 
-  it.skip("Should verify Range Slider", () => {
+  it("Should verify Range Slider", () => {
     verifyComponentWithOutLabel(
       "Range Slider",
       "rangeslider1",
@@ -619,11 +562,11 @@ describe("Basic components", () => {
   it("Should verify Tabs", () => {
     cy.viewport(1200, 1300);
     resizeQueryPanel("0");
-    cy.dragAndDropWidget("Tabs", 100, 100);
+    cy.dragAndDropWidget("Tabs", 200, 200);
     verifyComponent("tabs1");
     deleteComponentAndVerify("image1");
 
-    cy.resizeWidget("tabs1", 650, 400);
+    cy.resizeWidget("tabs1", 650, 400, false);
 
     openEditorSidebar("tabs1");
     editAndVerifyWidgetName("tabs2");
@@ -635,9 +578,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("tabs2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Tags", () => {
diff --git a/cypress-tests/cypress/e2e/editor/widget/csa.cy.js b/cypress-tests/cypress/e2e/editor/widget/csa.cy.js
index 70aa7fcaff..2d4c34f2ac 100644
--- a/cypress-tests/cypress/e2e/editor/widget/csa.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/csa.cy.js
@@ -16,8 +16,13 @@ import { commonWidgetText } from "Texts/common";
 describe("Editor- CSA", () => {
   const toolJetImage = "cypress/fixtures/Image/tooljet.png";
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
+  });
+
+  afterEach(() => {
+    cy.apiDeleteApp();
   });
 
   it("Should verify Tabs CSA", () => {
@@ -54,7 +59,7 @@ describe("Editor- CSA", () => {
     selectCSA("form1", "Reset Form");
 
     openEditorSidebar("form1");
-    cy.get('[data-cy="button-to-submit-form-fx-button"]').eq(1).click();
+    cy.get('[data-cy="button-to-submit-form-fx-button"] > svg').click();
     cy.get(
       '[data-cy="button-to-submit-form-input-field"]'
     ).clearAndTypeOnCodeMirror(`{{components.button2`);
diff --git a/cypress-tests/cypress/e2e/editor/widget/datePickerHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/datePickerHappyPath.cy.js
index 32cbd814dc..26960868b8 100644
--- a/cypress-tests/cypress/e2e/editor/widget/datePickerHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/datePickerHappyPath.cy.js
@@ -32,11 +32,14 @@ import {
 
 describe("Date Picker widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Date Picker");
   });
-
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
   it("should verify the properties of the date picker widget", () => {
     const data = {};
     data.alertMessage = fake.randomSentence;
@@ -231,7 +234,7 @@ describe("Date Picker widget", () => {
     cy.get(
       `${commonWidgetSelector.parameterFxButton(
         datePickerText.labelEnableDateSection
-      )}:eq(1)`
+      )}:eq(0)`
     ).click();
     cy.get(
       commonWidgetSelector.parameterInputField(
@@ -245,7 +248,7 @@ describe("Date Picker widget", () => {
     cy.get(
       `${commonWidgetSelector.parameterFxButton(
         datePickerText.labelEnableTimeSection
-      )}:eq(1)`
+      )}:eq(0)`
     ).click();
     cy.get(
       commonWidgetSelector.parameterInputField(
@@ -278,7 +281,7 @@ describe("Date Picker widget", () => {
       commonWidgetText.borderRadiusInput
     );
 
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     cy.get(
       commonWidgetSelector.stylePicker(commonWidgetText.parameterBoxShadow)
diff --git a/cypress-tests/cypress/e2e/editor/widget/listViewHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/listViewHappyPath.cy.js
index 854998c8ff..725c841bc3 100644
--- a/cypress-tests/cypress/e2e/editor/widget/listViewHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/listViewHappyPath.cy.js
@@ -34,13 +34,17 @@ import {
 
 describe("List view widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.viewport(1200, 1200);
     cy.dragAndDropWidget("List View", 50, 500);
     cy.modifyCanvasSize(1200, 700);
     cy.intercept("PUT", "/api/apps/**").as("apps");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the list view widget", () => {
     const data = {};
@@ -224,7 +228,7 @@ describe("List view widget", () => {
     ).should("have.attr", "data-disabled", "true");
     cy.get("[data-cy='disable-toggle-button']").click();
 
-    cy.get("[data-cy='border-radius-fx-button']:eq(1)").click();
+    cy.get("[data-cy='border-radius-fx-button']:eq(0)").click();
     verifyAndModifyParameter(
       commonWidgetText.parameterBorderRadius,
       commonWidgetText.borderRadiusInput
@@ -236,15 +240,15 @@ describe("List view widget", () => {
 
     openEditorSidebar(listviewText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     verifyAndModifyToggleFx(
       commonWidgetText.parameterBoxShadow,
-      commonWidgetText.boxShadowDefaultValue,
+      "0px 0px 0px 0px #00000040",
       false
     );
 
-    cy.get('[data-cy="border-radius-fx-button"]').click();
+    cy.get('[data-cy="border-radius-fx-button"] > svg').click();
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
 
     fillBoxShadowParams(
@@ -369,7 +373,7 @@ describe("List view widget", () => {
       )
     ).click();
 
-    cy.get("[data-cy='border-radius-fx-button']:eq(1)").click();
+    cy.get("[data-cy='border-radius-fx-button']:eq(0)").click();
     verifyAndModifyParameter(
       commonWidgetText.parameterBorderRadius,
       commonWidgetText.borderRadiusInput
@@ -382,11 +386,11 @@ describe("List view widget", () => {
 
     openEditorSidebar(listviewText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     verifyAndModifyToggleFx(
       commonWidgetText.parameterBoxShadow,
-      commonWidgetText.boxShadowDefaultValue,
+      "0px 0px 0px 0px #00000040",
       false
     );
 
diff --git a/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js
index 0ae3465b6f..96cf357270 100644
--- a/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js
@@ -40,10 +40,14 @@ import {
 
 describe("Modal", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Modal");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the modal component", () => {
     const data = {};
@@ -54,7 +58,6 @@ describe("Modal", () => {
     data.tooltipText = fake.randomSentence;
     data.buttonText = fake.companyName;
 
-    cy.renameApp(data.appName);
     launchModal("modal1");
     cy.get('[data-cy="modal-title"]').verifyVisibleElement(
       "have.text",
@@ -161,11 +164,8 @@ describe("Modal", () => {
 
     cy.get(commonWidgetSelector.widgetDocumentationLink).should(
       "have.text",
-      "Modal documentation"
+      "Read documentation for Modal"
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the styles of the modal widget", () => {
@@ -176,7 +176,6 @@ describe("Modal", () => {
     data.boxShadowParam = fake.boxShadowParam;
     data.backgroundColor = fake.randomRgba;
 
-    cy.renameApp(data.appName);
     launchModal("modal1");
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -246,9 +245,6 @@ describe("Modal", () => {
       "have.text",
       "This title can be changed"
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -261,19 +257,18 @@ describe("Modal", () => {
     data.buttonTextColor = fake.randomRgba;
     data.customTitle = fake.randomSentence;
 
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 50);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 100);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 150);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 200);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 250);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
 
-    cy.renameApp(data.appName);
     launchModal("modal1");
     verifyAndModifyParameter("Title", data.customTitle);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
@@ -329,7 +324,7 @@ describe("Modal", () => {
       commonWidgetText.parameterDisable,
       "{{components.toggleswitch2.value"
     );
-    cy.get('[data-cy="sidebar-option-properties"]').click();
+    cy.get("#inspector-tab-properties").click();
 
     typeOnFx("Loading State", "{{components.toggleswitch3.value");
     cy.get("[data-cy='modal-header']").realClick();
@@ -437,7 +432,7 @@ describe("Modal", () => {
       "This title can be changed"
     );
 
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget("Button", 500, 300, "Button", "[id*=canvas]:eq(2)");
     selectEvent("On click", "Control Component");
     selectCSA("modal1", "close");
diff --git a/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js
index f63f23b174..2403ef32b7 100644
--- a/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js
@@ -40,10 +40,14 @@ import {
 
 describe("Multiselect widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget(multiselectText.multiselect);
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the widget", () => {
     const data = {};
@@ -219,12 +223,14 @@ describe("Multiselect widget", () => {
 
     openEditorSidebar(multiselectText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     verifyAndModifyStylePickerFx(
       commonWidgetText.parameterBoxShadow,
       commonWidgetText.boxShadowDefaultValue,
-      commonWidgetText.boxShadowFxValue
+      commonWidgetText.boxShadowFxValue,
+      0,
+      "0px 0px 0px 0px "
     );
     cy.get(
       commonWidgetSelector.parameterFxButton(
@@ -287,7 +293,7 @@ describe("Multiselect widget", () => {
 
     openEditorSidebar(data.widgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     cy.get(
       commonWidgetSelector.stylePicker(commonWidgetText.parameterBoxShadow)
diff --git a/cypress-tests/cypress/e2e/editor/widget/numberInputHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/numberInputHappyPath.cy.js
index 03d7a9b5e0..2d42455b65 100644
--- a/cypress-tests/cypress/e2e/editor/widget/numberInputHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/numberInputHappyPath.cy.js
@@ -23,10 +23,14 @@ import {
 
 describe("Number Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Number Input");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the number input widget", () => {
     const data = {};
@@ -37,8 +41,6 @@ describe("Number Input", () => {
     data.minimumvalue = `${randomNumber(5, 10)}`;
     data.maximumValue = `${randomNumber(90, 99)}`;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(numberInputText.defaultWidgetName);
     editAndVerifyWidgetName(data.widgetName);
     cy.get(
@@ -78,9 +80,10 @@ describe("Number Input", () => {
       commonWidgetSelector.draggableWidget(data.widgetName),
       randomNumber(1, 4)
     );
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", `${data.minimumvalue}.00`);
+    ).verifyVisibleElement("have.value", `${data.minimumvalue}`);
 
     openEditorSidebar(data.widgetName);
     openAccordion(commonWidgetText.accordionProperties, [
@@ -96,9 +99,10 @@ describe("Number Input", () => {
       commonWidgetSelector.draggableWidget(data.widgetName),
       randomNumber(100, 110)
     );
+    cy.forceClickOnCanvas;
     cy.get(
       commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", `${data.maximumValue}.00`);
+    ).verifyVisibleElement("have.value", `${data.maximumValue}`);
 
     openEditorSidebar(data.widgetName);
     openAccordion(commonWidgetText.accordionProperties, [
@@ -130,9 +134,6 @@ describe("Number Input", () => {
       "have.text",
       numberInputText.numberInputDocumentationLink
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
   it("should verify the styles of the number input widget", () => {
     const data = {};
@@ -141,8 +142,6 @@ describe("Number Input", () => {
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(numberInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -192,9 +191,6 @@ describe("Number Input", () => {
       data.boxShadowColor,
       3
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -208,8 +204,6 @@ describe("Number Input", () => {
     data.minimumvalue = randomNumber(5, 10);
     data.maximumValue = randomNumber(90, 99);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(numberInputText.defaultWidgetName);
     verifyAndModifyParameter(
       commonWidgetText.labelDefaultValue,
@@ -243,7 +237,7 @@ describe("Number Input", () => {
 
     openEditorSidebar(numberInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
 
     fillBoxShadowParams(
@@ -268,16 +262,18 @@ describe("Number Input", () => {
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName),
       randomNumber(1, 4)
     );
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", `${data.minimumvalue}.00`);
+    ).verifyVisibleElement("have.value", `${data.minimumvalue}`);
     cy.clearAndType(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName),
       randomNumber(100, 110)
     );
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", `${data.maximumValue}.00`);
+    ).verifyVisibleElement("have.value", `${data.maximumValue}`);
     cy.get(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
     )
@@ -300,8 +296,5 @@ describe("Number Input", () => {
       data.boxShadowColor,
       data.boxShadowParam
     );
-
-    cy.get(commonSelectors.viewerPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/editor/widget/passwordInputHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/passwordInputHappyPath.cy.js
index ee91136339..c313d2d71e 100644
--- a/cypress-tests/cypress/e2e/editor/widget/passwordInputHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/passwordInputHappyPath.cy.js
@@ -25,11 +25,15 @@ import { randomString } from "Support/utils/textInput";
 
 describe("Password Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.modifyCanvasSize(1200, 780);
     cy.dragAndDropWidget("Password Input", 350, 300);
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the password input widget", () => {
     const data = {};
@@ -41,8 +45,6 @@ describe("Password Input", () => {
     data.maximumLength = randomNumber(8, 10);
     data.customText = randomString(12);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(passwordInputText.defaultWidgetName);
     closeAccordions(["Events", "Validation", "Properties", "Layout"]);
     editAndVerifyWidgetName(data.widgetName);
@@ -169,11 +171,8 @@ describe("Password Input", () => {
 
     cy.get(commonWidgetSelector.widgetDocumentationLink).should(
       "have.text",
-      "PasswordInput documentation"
+      "Read documentation for PasswordInput"
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
   it("should verify the styles of the password input widget", () => {
     const data = {};
@@ -182,8 +181,6 @@ describe("Password Input", () => {
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(passwordInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -233,9 +230,6 @@ describe("Password Input", () => {
       data.boxShadowColor,
       1
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -251,8 +245,6 @@ describe("Password Input", () => {
     data.customText = randomString(12);
     data.maxLengthText = randomString(data.maximumLength);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(passwordInputText.defaultWidgetName);
     verifyAndModifyParameter("Placeholder", data.customText);
 
@@ -304,7 +296,7 @@ describe("Password Input", () => {
 
     openEditorSidebar(passwordInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
 
     fillBoxShadowParams(
@@ -327,6 +319,11 @@ describe("Password Input", () => {
       .should("contain", data.customText);
 
     cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
+    cy.get(
+      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
+    )
+      .type(" ")
+      .type("{selectAll}{backspace}");
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(
         passwordInputText.defaultWidgetName
@@ -355,6 +352,13 @@ describe("Password Input", () => {
       data.customText.toUpperCase()
     );
     cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
+
+    // cy.get(
+    //   commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
+    // )
+    //   .type("1")
+    //   .type("{selectAll}{backspace}");
+
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(
         passwordInputText.defaultWidgetName
@@ -383,8 +387,5 @@ describe("Password Input", () => {
       commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName),
       data.tooltipText
     );
-
-    cy.get(commonSelectors.viewerPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 });
diff --git a/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js b/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js
index e1c7dcdbcf..10dd23461b 100644
--- a/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js
@@ -55,8 +55,9 @@ import { resizeQueryPanel } from "Support/utils/dataSource";
 
 describe("Table", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     deleteDownloadsFolder();
     cy.viewport(1400, 2200);
     cy.modifyCanvasSize(900, 800);
@@ -65,6 +66,9 @@ describe("Table", () => {
     resizeQueryPanel("1");
     cy.get(`[data-cy="allow-selection-toggle-button"]`).click({ force: true });
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("Should verify the table components and labels", () => {
     cy.get(
@@ -85,6 +89,9 @@ describe("Table", () => {
       "have.text",
       tableText.defaultPageIndexDetails
     );
+    cy.get(`${tableSelector.pageIndexDetails}>input`)
+      .invoke("val")
+      .should("equal", "1");
     cy.get(tableSelector.paginationButtonToFirst).should("be.visible");
     cy.get(tableSelector.paginationButtonToPrevious).should("be.visible");
     cy.get(tableSelector.paginationButtonToNext).should("be.visible");
@@ -208,24 +215,13 @@ describe("Table", () => {
     const data = {};
     data.widgetName = fake.widgetName;
     openEditorSidebar(tableText.defaultWidgetName);
-    editAndVerifyWidgetName(data.widgetName, [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    editAndVerifyWidgetName(data.widgetName, []);
     cy.forceClickOnCanvas();
 
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
-      "Options",
-      "Columns",
-      "Layout",
-    ]);
-    verifyAndModifyParameter(
-      "Table data",
+    cy.get('[data-cy="table-data-input-field"]').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(`[{id:1,name:"Mike",email:"mike@example.com" },{id:2,name:"Nina",email:"nina@example.com" },{id:3,name:"Steph",email:"steph@example.com" },{id:4,name:"Oliver",email:"oliver@example.com" },
-      ]`)
+        ]`)
     );
     // cy.get('[data-cy="inspector-close-icon"]').click();
     cy.forceClickOnCanvas();
@@ -238,21 +234,16 @@ describe("Table", () => {
     ]);
     //cy.get('[data-cy="inspector-close-icon"]').click();
     openEditorSidebar(data.widgetName);
-    openAccordion("Columns", ["Options", "Properties", "Layout"]);
+    openAccordion("Columns", []);
     deleteAndVerifyColumn("email");
     openEditorSidebar(data.widgetName);
-    openAccordion("Action buttons", [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
-    cy.get('[data-cy="message-no-action-button"]').should(
+    openAccordion("Action buttons");
+    cy.get('[data-cy="no-items-banner-action-button"]').should(
       "have.text",
-      "This table doesn't have any action buttons"
+      "There are no action buttons"
     );
     cy.get('[data-cy="button-add-new-action-button"]')
-      .should("have.text", "+ Add button")
+      .should("have.text", "New action button")
       .click();
     cy.get('[data-cy="action-button-button-0"]').verifyVisibleElement(
       "have.text",
@@ -303,12 +294,7 @@ describe("Table", () => {
     cy.get('[data-cy="leftActions-cell-0"]').eq(0).find("button").click();
     cy.verifyToastMessage(commonSelectors.toastMessage, "Hello world!");
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionEvents, [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    openAccordion(commonWidgetText.accordionEvents, []);
     cy.get('[data-cy="add-event-handler"]').click();
     cy.get('[data-cy="event-handler-card"]').click();
     cy.get('[data-cy="event-selection"]>')
@@ -320,11 +306,7 @@ describe("Table", () => {
     cy.get('[data-cy="inspector-close-icon"]').click();
 
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionLayout, [
-      "Options",
-      "Properties",
-      "Columns",
-    ]);
+    openAccordion(commonWidgetText.accordionLayout, []);
 
     verifyAndModifyToggleFx(
       "Show on desktop",
@@ -348,28 +330,21 @@ describe("Table", () => {
     const data = {};
     data.widgetName = fake.widgetName;
     openEditorSidebar(tableText.defaultWidgetName);
-    editAndVerifyWidgetName(data.widgetName, [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    editAndVerifyWidgetName(data.widgetName, []);
 
     //String/default
     openEditorSidebar(data.widgetName);
+    cy.wait(500);
     deleteAndVerifyColumn("id");
     deleteAndVerifyColumn("name");
     deleteAndVerifyColumn("email");
+    cy.wait(500);
     addAndOpenColumnOption("Fake-String", `string`);
     selectDropdownOption('[data-cy="input-overflow"] >>:eq(0)', `wrap`);
     cy.get('[data-index="0"]>.select-search-option:eq(1)').realClick();
-    cy.wait(2000);
     verifyAndEnterColumnOptionInput("key", "name");
     verifyAndEnterColumnOptionInput("Text color", "red");
-    verifyAndEnterColumnOptionInput(
-      "Cell Background Color",
-      "{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}yellow"
-    );
+    verifyAndEnterColumnOptionInput("Cell Background Color", "yellow");
     cy.get(
       '[data-cy="input-and-label-cell-background-color"] > .form-label'
     ).click();
@@ -392,17 +367,22 @@ describe("Table", () => {
     verifyAndEnterColumnOptionInput("Regex", "AABb");
     verifyAndEnterColumnOptionInput("Min length", "4");
     verifyAndEnterColumnOptionInput("Max length", "5");
-    verifyAndEnterColumnOptionInput("Custom rule", "{backspace}");
+    verifyAndEnterColumnOptionInput("Custom rule", " ");
     verifyInvalidFeedback(0, 0, "The input should match pattern");
     addInputOnTable(0, 0, "AABb");
 
     // cy.notVisible('[data-cy="stringsarah-cell-0"] >>>.invalid-feedback');
     openEditorSidebar(data.widgetName);
-    deleteAndVerifyColumn("Fake-String");
+    deleteAndVerifyColumn("fake-string");
 
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-number", `number`);
+    // cy.intercept("PUT", "/api/apps/**").as("appSave");
+    // cy.wait("@appSave");
+    // cy.wait(1000);
     verifyAndEnterColumnOptionInput("key", "id");
+    // cy.wait("@appSave");
+
     // verifyAndEnterColumnOptionInput("Cell Background Color", "black");
     cy.get('[data-cy="make-editable-toggle-button"]').click();
     cy.get('[data-cy="header-validation"]').verifyVisibleElement(
@@ -430,7 +410,7 @@ describe("Table", () => {
 
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-badge", `badge`);
-    verifyAndEnterColumnOptionInput("key", "");
+    verifyAndEnterColumnOptionInput("key", " ");
     verifyAndEnterColumnOptionInput("Values", "{{[1,2,3]");
     verifyAndEnterColumnOptionInput("Labels", '{{["One","Two","Three"]');
 
@@ -445,9 +425,9 @@ describe("Table", () => {
 
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-multiple-badge", `multipleBadges`);
-
     verifyAndEnterColumnOptionInput("key", "id");
     verifyAndEnterColumnOptionInput("Values", "{{[1,2,3]");
+    cy.wait(500);
     verifyAndEnterColumnOptionInput("Labels", '{{["One","Two","Three"]');
     // verifyAndEnterColumnOptionInput("Cell Background Color", "fakeString");
     cy.get('[data-cy="make-editable-toggle-button"]').click();
@@ -469,12 +449,14 @@ describe("Table", () => {
     deleteAndVerifyColumn("fake-multiple-badge");
 
     openEditorSidebar(data.widgetName);
-    verifyAndModifyParameter(
-      "Table data",
+    cy.get('[data-cy="table-data-input-field"]').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(`[{id:1,name:"Mike",email:"mike@example.com", tags:['One','Two','Three'] },{id:2,name:"Nina",email:"nina@example.com" },{id:3,name:"Steph",email:"steph@example.com", tags:['One','Two','Three'] },{id:4,name:"Oliver",email:"oliver@example.com" },
-      ]`)
+        ]`)
     );
-    closeAccordions(["Options"]);
+
+    // closeAccordions(["Options"]);
+    cy.get('[data-cy="widget-accordion-data"]').click();
+    deleteAndVerifyColumn("tags");
     addAndOpenColumnOption("fake-tags", `tags`);
     verifyAndEnterColumnOptionInput("key", "tags");
 
@@ -483,14 +465,14 @@ describe("Table", () => {
     cy.get('[data-cy="make-editable-toggle-button"]').click();
     cy.forceClickOnCanvas();
 
-    cy.get(`${tableSelector.column(1)}:eq(0) .badge`)
+    cy.get(`${tableSelector.column(0)}:eq(0) .badge`)
       .eq(0)
       .should("have.text", "Onex")
       .next()
       .should("have.text", "Twox")
       .next()
       .should("have.text", "Threex");
-    cy.get(`${tableSelector.column(1)}:eq(0) .badge`)
+    cy.get(`${tableSelector.column(0)}:eq(0) .badge`)
       .first()
       .click({ force: true })
       .trigger("mouseover")
@@ -524,7 +506,7 @@ describe("Table", () => {
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-radio", `radio`);
 
-    verifyAndEnterColumnOptionInput("key", "");
+    verifyAndEnterColumnOptionInput("key", " ");
     verifyAndEnterColumnOptionInput("Values", "{{[1,2,3]");
     verifyAndEnterColumnOptionInput("Labels", '{{["One","Two","Three"]');
 
@@ -546,17 +528,16 @@ describe("Table", () => {
     deleteAndVerifyColumn("fake-multiselect");
 
     // openEditorSidebar(data.widgetName);
-    addAndOpenColumnOption("fake-toggleSwitch", `toggleSwitch`);
+    addAndOpenColumnOption("fake-toggleswitch", `toggleSwitch`);
 
     verifyAndEnterColumnOptionInput("key", "fakeString");
     // verifyAndEnterColumnOptionInput("Active color", "green"); //use color Picker
     // verifyAndEnterColumnOptionInput("Cell Background Color", "fakeString");
     cy.get('[data-cy="make-editable-toggle-button"]').click();
-    deleteAndVerifyColumn("fake-toggleSwitch");
+    deleteAndVerifyColumn("fake-toggleswitch");
 
-    //Toggle Switch
-    // openEditorSidebar(data.widgetName);
-    addAndOpenColumnOption("fake-datePicker", `datePicker`);
+    openEditorSidebar(data.widgetName);
+    addAndOpenColumnOption("fake-datepicker", `datePicker`);
 
     verifyAndEnterColumnOptionInput("key", "fakeString");
     // verifyAndEnterColumnOptionInput("Date Display format", "fakeString");
@@ -568,15 +549,14 @@ describe("Table", () => {
     // verifyAndEnterColumnOptionInput("Parse in timezone", "fakeString");
 
     // verifyAndEnterColumnOptionInput("Display in timezone", "fakeString");
-    deleteAndVerifyColumn("fake-datePicker");
+    deleteAndVerifyColumn("fake-datepicker");
 
     verifyAndModifyToggleFx(
       tableText.labelDynamicColumn,
       commonWidgetText.codeMirrorLabelFalse
     );
     cy.get('[data-cy*="-cell-1"]').should("have.class", "has-text");
-    verifyAndModifyParameter(
-      "Column data",
+    cy.get('[data-cy="column-data-input-field"] ').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(
         `[{name: 'User email', key: 'email'}, {name: 'Full name', key: 'name', isEditable: false}]`
       )
@@ -588,15 +568,16 @@ describe("Table", () => {
     cy.get('[data-cy*="-cell-1"]').should("not.have.class", "has-text");
 
     openEditorSidebar(data.widgetName);
-    verifyAndModifyParameter(
-      "Column data",
+    cy.get('[data-cy="column-data-input-field"] ').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(
         `[{name: 'User email', key: 'email'}, {name: 'Full name', key: 'name', isEditable: true}]`
       )
     );
     cy.forceClickOnCanvas();
+    cy.waitForAutoSave();
     cy.get('[data-cy*="-cell-1"]')
       .eq(0)
+      .find("input")
       .click()
       .type(`{selectAll}{backspace}Mike Jon`);
     cy.forceClickOnCanvas();
@@ -607,8 +588,7 @@ describe("Table", () => {
     cy.get('[data-cy="table-button-save-changes"]').should("be.visible");
 
     openEditorSidebar(data.widgetName);
-    verifyAndModifyParameter(
-      "Column data",
+    cy.get('[data-cy="column-data-input-field"] ').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(
         `[{name: 'email', key: 'email', cellBackgroundColor: '#000', textColor: '#fff'}, {name: 'Full name', key: 'name', minLength: 5, maxLength: 6, isEditable: true}]`
       )
@@ -666,15 +646,10 @@ describe("Table", () => {
 
     cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
     openEditorSidebar(tableText.defaultWidgetName);
-    openAccordion("Columns", ["Options", "Properties", "Layout"]);
+    openAccordion("Columns");
     deleteAndVerifyColumn("email");
     openEditorSidebar(tableText.defaultWidgetName);
-    openAccordion("Action buttons", [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    openAccordion("Action buttons");
     cy.get('[data-cy="button-add-new-action-button"]').click();
 
     cy.get('[data-cy="rightActions-cell-2"]')
@@ -702,7 +677,8 @@ describe("Table", () => {
     verifyAndModifyToggleFx(
       commonWidgetText.parameterBoxShadow,
       commonWidgetText.boxShadowDefaultValue,
-      false
+      false,
+      "0px 0px 0px 0px "
     );
 
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
@@ -727,9 +703,7 @@ describe("Table", () => {
       "have.text",
       "Table type"
     );
-    cy.get(
-      '[data-cy="table-type-fx-button"][class*="fx-button  unselectable"]'
-    ).click();
+    cy.get('[data-cy="table-type-fx-button"] > svg').click();
     cy.get('[data-cy="table-type-input-field"]').clearAndTypeOnCodeMirror(
       `randomText`
     );
@@ -743,7 +717,7 @@ describe("Table", () => {
     ).click();
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
-    cy.get('[data-cy="table-type-fx-button"]').click();
+    cy.get('[data-cy="table-type-fx-button"]>svg').click();
     cy.get('[data-cy="dropdown-table-type"]').click();
     selectFromSidebarDropdown('[data-cy="dropdown-table-type"]', "Classic");
     cy.forceClickOnCanvas();
@@ -754,25 +728,20 @@ describe("Table", () => {
       .and("contain", "classic");
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    selectFromSidebarDropdown(
-      '[data-cy="dropdown-table-type"]',
-      "Striped & bordered"
-    );
+    selectFromSidebarDropdown('[data-cy="dropdown-table-type"]', "Striped");
     cy.forceClickOnCanvas();
     cy.get(commonWidgetSelector.draggableWidget(tableText.defaultWidgetName))
       .click()
       .find("table")
       .invoke("attr", "class")
-      .and("contain", "table-striped table-bordered ");
+      .and("contain", "table-striped");
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
     cy.get('[data-cy="label-cell-size"]').verifyVisibleElement(
       "have.text",
       "Cell size"
     );
-    cy.get(
-      '[data-cy="cell-size-fx-button"][class*="fx-button  unselectable"]'
-    ).click();
+    cy.get('[data-cy="cell-size-fx-button"] > svg').click();
 
     cy.get('[data-cy="cell-size-input-field"]').clearAndTypeOnCodeMirror(
       `randomText`
@@ -788,8 +757,8 @@ describe("Table", () => {
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
-    cy.get('[data-cy="cell-size-fx-button"]').click();
-    selectFromSidebarDropdown('[data-cy="dropdown-cell-size"]', "Spacious");
+    cy.get('[data-cy="cell-size-fx-button"] >svg').click();
+    selectFromSidebarDropdown('[data-cy="dropdown-cell-size"]', "Condensed");
     cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(tableText.defaultWidgetName)
@@ -798,7 +767,7 @@ describe("Table", () => {
     cy.get(tableSelector.column(0))
       .eq(0)
       .invoke("attr", "class")
-      .and("contain", "spacious");
+      .and("contain", "condensed");
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
     cy.get('[data-cy="label-text-color"]').verifyVisibleElement(
@@ -822,42 +791,37 @@ describe("Table", () => {
 
   it("should verify table options", () => {
     openEditorSidebar(tableText.defaultWidgetName);
-    closeAccordions(["Action buttons", "Columns", "Properties"]);
-    verifyAndModifyToggleFx("Client-side pagination", "{{true}}", true);
-    cy.get('[data-cy="server-side-pagination-toggle-button"]').click();
+    verifyAndModifyToggleFx("Enable pagination", "{{true}}", true);
+    cy.get('[data-cy="enable-pagination-toggle-button"]').click();
     cy.get(tableSelector.paginationButtonToPrevious).should("be.visible");
     cy.get(tableSelector.paginationButtonToNext).should("be.visible");
 
-    verifyAndModifyToggleFx("Enable previous page button", "{{true}}", true);
-    cy.get(tableSelector.paginationButtonToPrevious).should("be.disabled");
-    verifyAndModifyToggleFx("Enable next page button", "{{true}}", true);
-    cy.get(tableSelector.paginationButtonToNext).should("be.disabled");
+    cy.get("[data-state=off]:eq(3)").click();
     cy.get('[data-cy="label-total-records-server-side"]').verifyVisibleElement(
       "have.text",
       "Total records server side"
     );
-    cy.get('[data-cy="server-side-pagination-toggle-button"]').click();
 
-    cy.get('[data-cy="client-side-pagination-toggle-button"]').click();
+    // cy.get('[data-cy="enable-pagination-toggle-button"]').click();
+    cy.get("[data-state=off]:eq(3)").click();
 
     cy.get('[data-cy="label-number-of-rows-per-page"]').verifyVisibleElement(
       "have.text",
       "Number of rows per page"
     );
 
-    verifyAndModifyToggleFx("Enable sorting", "{{true}}", true); //inputfield
-    cy.get('[data-cy="enable-sorting-toggle-button"]').click();
-    verifyAndModifyToggleFx("Server-side sort", "{{false}}", true);
+    verifyAndModifyToggleFx("Enable column sorting", "{{true}}", true); //inputfield
+    cy.get('[data-cy="enable-column-sorting-toggle-button"]').click();
 
     verifyAndModifyToggleFx("Show download button", "{{true}}", true);
     cy.notVisible('[data-tooltip-id="tooltip-for-download"]');
 
-    verifyAndModifyToggleFx("Show filter button", "{{true}}", true);
+    verifyAndModifyToggleFx("Enable filtering", "{{true}}", true);
     cy.notVisible('[data-tooltip-id="tooltip-for-filter-data"]');
 
-    cy.get('[data-cy="show-filter-button-toggle-button"]').click();
-    verifyAndModifyToggleFx("Server-side filter", "{{false}}", true);
-    verifyAndModifyToggleFx("Show update buttons", "{{true}}", true);
+    // cy.get('[data-cy="show-filter-button-toggle-button"]').click();
+    // verifyAndModifyToggleFx("Server-side filter", "{{false}}", true);
+    // verifyAndModifyToggleFx("Show update buttons", "{{true}}", true);
 
     cy.get(`[data-cy="allow-selection-toggle-button"]`).click({ force: true });
     verifyAndModifyToggleFx("Bulk selection", "{{false}}", true);
@@ -867,12 +831,12 @@ describe("Table", () => {
     verifyAndModifyToggleFx("Hide column selector button", "{{false}}", true);
     cy.notVisible('[data-cy="select-column-icon"]');
 
-    verifyAndModifyToggleFx("Show search box", "{{true}}", true);
+    verifyAndModifyToggleFx("Show search", "{{true}}", true);
     cy.notVisible('[data-cy="search-input-field"]');
 
-    cy.get('[data-cy="show-search-box-toggle-button"]').click();
+    // cy.get('[data-cy="show-search-box-toggle-button"]').click();
 
-    verifyAndModifyToggleFx("Server-side search", "", true);
+    // verifyAndModifyToggleFx("Server-side search", " ", true);
     verifyAndModifyToggleFx("Loading State", "{{false}}", true);
   });
 
@@ -900,7 +864,7 @@ describe("Table", () => {
     cy.get(
       commonWidgetSelector.draggableWidget(tableText.defaultWidgetName)
     ).should("be.visible");
-    cy.get(tableSelector.filterButton).click();
+    // cy.get(tableSelector.filterButton).click();
     addFilter(
       [{ column: "name", operation: "contains", value: "Sarah" }],
       true
@@ -1009,6 +973,7 @@ describe("Table", () => {
   });
 
   it("should verify table CSA", () => {
+    deleteDownloadsFolder();
     cy.get('[data-cy="column-id"]').click();
     cy.get('[data-cy="make-editable-toggle-button"]').click();
     cy.get(`[data-cy="allow-selection-toggle-button"]`).click({ force: true });
@@ -1072,7 +1037,10 @@ describe("Table", () => {
 
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();
     cy.get('[data-cy*="-cell-1"] ').eq(1).should("have.text", "Jon");
-    cy.get('[data-cy="page-index-details"]').should("have.text", "2 of 2");
+    cy.get('[data-cy="page-index-details"]').should("have.text", "of 2");
+    cy.get(`${tableSelector.pageIndexDetails}>input`)
+      .invoke("val")
+      .should("equal", "2");
 
     cy.get('[data-cy="3-cell-0"]')
       .click()
@@ -1093,7 +1061,7 @@ describe("Table", () => {
     cy.get(".tooltip-inner").invoke("hide");
     verifyNodeData("components", "Object", "9 entries ");
     openNode("components");
-    verifyNodeData(tableText.defaultWidgetName, "Object", "21 entries ");
+    verifyNodeData(tableText.defaultWidgetName, "Object", "23 entries ");
     openNode(tableText.defaultWidgetName);
     verifyNodeData("newRows", "Array", "0 item ");
 
@@ -1127,10 +1095,10 @@ describe("Table", () => {
     cy.get(".tooltip-inner").invoke("hide");
     verifyNodeData("components", "Object", "1 entry ");
     openNode("components");
-    verifyNodeData(tableText.defaultWidgetName, "Object", "17 entries ");
+    verifyNodeData(tableText.defaultWidgetName, "Object", "22 entries ");
     cy.wait(1000);
-    openNode(tableText.defaultWidgetName);
-    cy.wait(500);
+    openNode(tableText.defaultWidgetName, 0, 1);
+    openNode(tableText.defaultWidgetName, 0, 1);
     verifyNodeData("newRows", "Array", "1 item ");
     openNode("newRows");
     verifyNodeData("0", "Object", "3 entries ");
@@ -1142,7 +1110,7 @@ describe("Table", () => {
 
   it("should verify Disable action button", () => {
     cy.get('[data-cy="button-add-new-action-button"]')
-      .should("have.text", "+ Add button")
+      .should("have.text", "New action button")
       .click();
 
     cy.get('[data-cy="action-button-button-0"]').verifyVisibleElement(
@@ -1196,7 +1164,7 @@ describe("Table", () => {
     cy.get('[data-cy="action-button-button-0"]').click();
     cy.get(tableSelector.fxButton(tableText.lableDisableActionButton))
       .should("be.visible")
-      .eq(1)
+      .eq(0)
       .click();
     cy.get(
       commonWidgetSelector.parameterInputField(
@@ -1237,9 +1205,7 @@ describe("Table", () => {
       "Column Email"
     );
     openEditorSidebar(tableText.defaultWidgetName);
-    cy.get(tableSelector.draggableHandleColumn("email"))
-      .should("be.visible")
-      .click();
+    cy.get('[data-cy="pages-name-email"]').should("be.visible").click();
     cy.get(`[data-cy="input-and-label-column-name"]`)
       .find("label")
       .should("have.text", "Column name");
@@ -1249,7 +1215,7 @@ describe("Table", () => {
       .clearAndTypeOnCodeMirror(`{{components.text1.text`);
     cy.forceClickOnCanvas();
     openEditorSidebar(tableText.defaultWidgetName);
-    cy.get(tableSelector.draggableHandleColumn("Column Email"))
+    cy.get('[data-cy="pages-name-column email"]')
       .scrollIntoView()
       .should("be.visible");
     cy.get(tableSelector.columnHeader("column-email"))
@@ -1259,30 +1225,30 @@ describe("Table", () => {
 
     cy.dragAndDropWidget("Toggle Switch", 800, 300);
     openEditorSidebar(tableText.defaultWidgetName);
-    cy.get(tableSelector.draggableHandleColumn("name"))
-      .should("be.visible")
-      .click();
-    verifyAndModifyToggleFx(tableText.makeEditable, "{{false}}");
+    cy.get('[data-cy="column-Column Email"]').should("be.visible").click();
+    verifyAndModifyToggleFx(tableText.makeEditable, "{{false}}", 0);
     cy.get(tableSelector.toggleButton(tableText.makeEditable)).click();
     cy.get(tableSelector.fxButton(tableText.makeEditable))
       .should("be.visible")
-      .eq(1)
+      .eq(0)
       .click();
     cy.get(commonWidgetSelector.parameterInputField(tableText.makeEditable))
       .click()
       .clearAndTypeOnCodeMirror(`{{components.toggleswitch1.value`);
     cy.forceClickOnCanvas();
-    cy.get('[data-cy*="-cell-0"]').should("not.have.class", "has-text");
+    cy.waitForAutoSave();
+    cy.get('[data-cy*="-cell-1"]').eq(0).should("not.have.class", "has-text");
     cy.get(
       '[data-cy="draggable-widget-toggleswitch1"] [type="checkbox"]'
     ).click();
-    cy.get('[data-cy*="-cell-0"]')
+    cy.get('[data-cy*="-cell-1"]')
       .eq(0)
       .click()
-      .type(`{selectAll}{backspace}Jack`);
-    cy.forceClickOnCanvas();
-    cy.get('[data-cy*="-cell-0"]').should("have.class", "has-text");
-    cy.get('[data-cy*="-cell-0"] [type="text"]')
+      .find("input")
+      .type(`{selectAll}{backspace}{Enter}`)
+      .realType("Jack");
+    cy.get('[data-cy*="-cell-1"]').should("have.class", "has-text");
+    cy.get('[data-cy*="-cell-1"] [type="text"]')
       .eq(0)
       .verifyVisibleElement("have.value", "Jack");
   });
diff --git a/cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js
index 8ee32c3201..7d7ecaf3fa 100644
--- a/cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js
@@ -32,11 +32,15 @@ import {
 
 describe("Text Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Text");
   });
 
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
   it("should verify CSA", () => {
     const data = {};
     data.customText = randomString(12);
diff --git a/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js
index 1a4f2bfb9d..a246504684 100644
--- a/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js
@@ -32,9 +32,13 @@ import {
 
 describe("Text Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
-    cy.dragAndDropWidget("Text Input");
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
+    cy.dragAndDropWidget("Text Input", 500, 500);
+  });
+  afterEach(() => {
+    cy.apiDeleteApp();
   });
 
   it("should verify the properties of the text input widget", () => {
@@ -46,8 +50,6 @@ describe("Text Input", () => {
     data.maximumLength = randomNumber(8, 10);
     data.customText = randomString(12);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(textInputText.defaultWidgetName);
     closeAccordions(["Validation", "General", "Properties", "Layout"]);
     editAndVerifyWidgetName(data.widgetName);
@@ -191,9 +193,6 @@ describe("Text Input", () => {
     );
     data.customText = fake.firstName;
     verifyControlComponentAction(data.widgetName, data.customText);
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
   it("should verify the styles of the text input widget", () => {
     const data = {};
@@ -202,8 +201,6 @@ describe("Text Input", () => {
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(textInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -254,9 +251,6 @@ describe("Text Input", () => {
       data.boxShadowColor,
       4
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -273,8 +267,6 @@ describe("Text Input", () => {
     data.customText = randomString(12);
     data.maxLengthText = randomString(data.maximumLength);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(textInputText.defaultWidgetName);
     verifyAndModifyParameter(
       commonWidgetText.labelDefaultValue,
@@ -344,10 +336,12 @@ describe("Text Input", () => {
       .invoke("attr", "placeholder")
       .should("contain", data.customText);
 
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName),
-      data.customText
-    );
+    cy.get(
+      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
+    )
+      .type(`{selectAll}{backspace}{enter}`)
+      .type(data.customText);
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(
         textInputText.defaultWidgetName
@@ -416,29 +410,29 @@ describe("Text Input", () => {
     selectCSA("textinput1", "Visibility");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget("Text input", 500, 50);
+    cy.dragAndDropWidget("Text input", 50, 50);
     selectEvent("On change", "Control Component");
     selectCSA("textinput1", "Set text", "500");
     addSupportCSAData("text", "{{components.textinput2.value");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 275);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 200);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Clear", "500");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 350);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 400);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Disable", "500");
     cy.get('[data-cy="Value-toggle-button"]').click();
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 425);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 50);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Set blur", "500");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 500);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 200);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Set focus");
 
diff --git a/cypress-tests/cypress/e2e/globalDataSources/globalDataSourcePermissions.cy.js b/cypress-tests/cypress/e2e/globalDataSources/globalDataSourcePermissions.cy.js
index 5d6aec5c6b..cee157fc7f 100644
--- a/cypress-tests/cypress/e2e/globalDataSources/globalDataSourcePermissions.cy.js
+++ b/cypress-tests/cypress/e2e/globalDataSources/globalDataSourcePermissions.cy.js
@@ -6,7 +6,13 @@ import {
     fillConnectionForm,
 } from "Support/utils/postgreSql";
 import { commonText } from "Texts/common";
-import { closeDSModal, deleteDatasource, addQuery, addQueryN } from "Support/utils/dataSource";
+import {
+    closeDSModal,
+    deleteDatasource,
+    addQuery,
+    addQueryN,
+    verifyValueOnInspector,
+} from "Support/utils/dataSource";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { dataSourceText } from "Texts/dataSource";
 import { addNewUserMW } from "Support/utils/userPermissions";
@@ -28,16 +34,17 @@ data.appName = `${fake.companyName}-App`;
 
 describe("Global Datasource Manager", () => {
     beforeEach(() => {
-        cy.appUILogin();
+        cy.apiLogin();
         cy.viewport(1200, 1300);
+        cy.visit('/')
     });
     before(() => {
-        cy.appUILogin();
-        cy.createApp();
+        cy.apiLogin();
+        cy.apiCreateApp();
+        cy.openApp();
         cy.renameApp(data.appName);
-        cy.dragAndDropWidget("Button", 50, 50);
+        cy.dragAndDropWidget("Table", 250, 250);
         cy.get(commonSelectors.editorPageLogo).click();
-        cy.reloadAppForTheElement(data.appName);
         addNewUserMW(data.firstName, data.email);
         logout();
     });
@@ -109,8 +116,11 @@ describe("Global Datasource Manager", () => {
             .invoke("attr", "placeholder")
             .should("eq", "Search for Data Sources");
 
-
-        selectAndAddDataSource("databases", dataSourceText.postgreSQL, data.dsName1);
+        selectAndAddDataSource(
+            "databases",
+            dataSourceText.postgreSQL,
+            data.dsName1
+        );
         cy.clearAndType(
             dataSourceSelector.dsNameInputField,
             `cypress-${data.dsName1}-postgresql1`
@@ -170,11 +180,10 @@ describe("Global Datasource Manager", () => {
         deleteDatasource(`cypress-${data.dsName1}-postgresql1`);
     });
     it("Should verify the Datasource connection and query creation using global data source", () => {
-        selectAndAddDataSource("databases", dataSourceText.postgreSQL, data.dsName1);
-
-        cy.clearAndType(
-            dataSourceSelector.dsNameInputField,
-            `cypress-${data.dsName1}-postgresql`
+        selectAndAddDataSource(
+            "databases",
+            dataSourceText.postgreSQL,
+            data.dsName1
         );
 
         cy.intercept("GET", "api/v2/data_sources").as("datasource");
@@ -195,7 +204,7 @@ describe("Global Datasource Manager", () => {
         navigateToAppEditor(data.appName);
 
         pinInspector();
-        cy.get(".tooltip-inner").invoke("hide");
+        // cy.get(".tooltip-inner").invoke("hide");
 
         addQuery(
             "table_preview",
@@ -205,33 +214,23 @@ describe("Global Datasource Manager", () => {
 
         cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
             "have.text",
-            'table_preview '
+            "table_preview "
         );
 
-        cy.get(".tooltip-inner").invoke("hide");
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").click();
-            });
-        cy.get('[data-cy="inspector-node-table_preview"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "7 items "
-        );
+        verifyValueOnInspector("table_preview", "7 items ");
         cy.get('[data-cy="show-ds-popover-button"]').click();
 
-        cy.get(
-            ".p-2 > .tj-base-btn"
-        )
+        cy.get(".p-2 > .tj-base-btn")
             .should("be.visible")
-            .and("have.text", "+ Add new datasource");
-        cy.get(
-            ".p-2 > .tj-base-btn"
-        ).click();
+            .and("have.text", "+ Add new data source");
+        cy.get(".p-2 > .tj-base-btn").click();
 
-        selectAndAddDataSource("databases", dataSourceText.postgreSQL, data.dsName2);
+        selectAndAddDataSource(
+            "databases",
+            dataSourceText.postgreSQL,
+            data.dsName2
+        );
         cy.intercept("GET", "api/v2/data_sources").as("datasource");
         fillConnectionForm(
             {
@@ -267,7 +266,8 @@ describe("Global Datasource Manager", () => {
     });
     it("Should validate the user's global data source permissions on apps created by admin", () => {
         logout();
-        cy.login(data.email, "password");
+        cy.apiLogin(data.email, "password");
+        cy.visit('/')
 
         cy.get(commonSelectors.globalDataSourceIcon).should("not.exist");
 
@@ -275,61 +275,37 @@ describe("Global Datasource Manager", () => {
 
         cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
             "have.text",
-            'table_preview '
+            "table_preview "
         );
 
         pinInspector();
-        cy.get(".tooltip-inner").invoke("hide");
+        // cy.get(".tooltip-inner").invoke("hide");
 
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").click();
-            });
-        cy.get('[data-cy="inspector-node-table_preview"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "7 items "
-        );
+        verifyValueOnInspector("table_preview", "7 items ");
 
-        cy.get('[data-cy="show-ds-popover-button"]').click()
+        cy.get('[data-cy="show-ds-popover-button"]').click();
         addQueryN(
             "student_data",
             `SELECT * FROM student_data;`,
             `cypress-${data.dsName2}-postgresql`
         );
 
-        // addQueryN(
-        //     "student_data",
-        //     `SELECT * FROM student_data;`,
-        //     `cypress-huel-postgresql`
-        // );
-
         cy.get('[data-cy="list-query-student_data"]').verifyVisibleElement(
             "have.text",
-            'student_data '
+            "student_data "
         );
-        cy.get(".tooltip-inner").invoke("hide");
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").dblclick();
-            });
-        cy.get('[data-cy="inspector-node-student_data"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "8 items "
-        );
-
+        verifyValueOnInspector("student_data", "8 items ");
     });
     it("Should verify the query creation and scope changing functionality.", () => {
         logout();
-        cy.login(data.email, "password");
-        cy.createApp();
+        cy.apiLogin(data.email, "password");
+        cy.visit('/')
+        cy.apiCreateApp();
+        cy.openApp();
         cy.renameApp(data.appName);
-        cy.dragAndDropWidget("Button", 50, 50);
+        cy.dragAndDropWidget("Table", 250, 250);
 
         addQuery(
             "table_preview",
@@ -339,22 +315,13 @@ describe("Global Datasource Manager", () => {
 
         cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
             "have.text",
-            'table_preview '
+            "table_preview "
         );
 
         pinInspector();
-        cy.get(".tooltip-inner").invoke("hide");
+        // cy.get(".tooltip-inner").invoke("hide");
 
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").click();
-            });
-        cy.get('[data-cy="inspector-node-table_preview"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "7 items "
-        );
+        verifyValueOnInspector("table_preview", "7 items ");
     });
 });
diff --git a/cypress-tests/cypress/e2e/regressionSuite/appBuilder/queryPanel/queryEditorRegression.cy.js b/cypress-tests/cypress/e2e/regressionSuite/appBuilder/queryPanel/queryEditorRegression.cy.js
new file mode 100644
index 0000000000..d5beb28e02
--- /dev/null
+++ b/cypress-tests/cypress/e2e/regressionSuite/appBuilder/queryPanel/queryEditorRegression.cy.js
@@ -0,0 +1,16 @@
+describe("Query Editor", () => {
+  beforeEach(() => {
+    cy.appUILogin();
+    cy.createApp();
+  });
+
+  it("should verify Elements on query editor", () => {});
+
+  it("should verify Functionality of query editor", () => {});
+
+  it("should verify imported app's queries", () => {});
+
+  it("should verify transformation", () => {});
+
+  it("should verify Event Handler", () => {});
+});
diff --git a/cypress-tests/cypress/e2e/regressionSuite/appBuilder/queryPanel/queryManagerRegression.cy.js b/cypress-tests/cypress/e2e/regressionSuite/appBuilder/queryPanel/queryManagerRegression.cy.js
new file mode 100644
index 0000000000..79c89eda10
--- /dev/null
+++ b/cypress-tests/cypress/e2e/regressionSuite/appBuilder/queryPanel/queryManagerRegression.cy.js
@@ -0,0 +1,16 @@
+describe("Query Manager", () => {
+  beforeEach(() => {
+    cy.appUILogin();
+    cy.createApp();
+  });
+
+  it("should verify Elements on query Manager", () => {});
+
+  it("should verify Filter", () => {});
+
+  it("should verify Sort", () => {});
+
+  it("should verify Filetr", () => {});
+
+  it("should verify Curd operation", () => {});
+});
diff --git a/cypress-tests/cypress/e2e/workspace/dashboard.cy.js b/cypress-tests/cypress/e2e/workspace/dashboard.cy.js
index 039c90df4d..8ac3e7bae4 100644
--- a/cypress-tests/cypress/e2e/workspace/dashboard.cy.js
+++ b/cypress-tests/cypress/e2e/workspace/dashboard.cy.js
@@ -167,15 +167,16 @@ describe("dashboard", () => {
   });
 
   it("Should verify app card elements and app card operations", () => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.renameApp(data.appName);
     cy.dragAndDropWidget("Table", 250, 250);
 
+
     cy.get(commonSelectors.editorPageLogo).click();
 
     cy.wait(500);
-    cy.reloadAppForTheElement(data.appName);
     cy.get(commonSelectors.appCard(data.appName))
       .parent()
       .within(() => {
diff --git a/cypress-tests/cypress/e2e/workspace/shareApp.cy.js b/cypress-tests/cypress/e2e/workspace/shareApp.cy.js
index b8146687e6..ff6c9452ed 100644
--- a/cypress-tests/cypress/e2e/workspace/shareApp.cy.js
+++ b/cypress-tests/cypress/e2e/workspace/shareApp.cy.js
@@ -18,7 +18,9 @@ describe("App share functionality", () => {
   });
 
   it("Verify private and public app share funtionality", () => {
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.renameApp(data.appName);
     cy.dragAndDropWidget("Table", 250, 250);
 
@@ -79,6 +81,7 @@ describe("App share functionality", () => {
 
     cy.appUILogin();
     navigateToAppEditor(data.appName);
+    cy.skipEditorPopover()
     cy.get(commonWidgetSelector.shareAppButton).click();
     cy.get(commonWidgetSelector.makePublicAppToggle).uncheck();
     cy.get(commonWidgetSelector.modalCloseButton).click();
@@ -114,8 +117,6 @@ describe("App share functionality", () => {
     cy.appUILogin();
 
     navigateToAppEditor(data.appName);
-    cy.reloadAppForTheElement("skip");
-    cy.wait(4000);
     cy.skipEditorPopover();
     cy.get(commonWidgetSelector.shareAppButton).click();
     cy.get(commonWidgetSelector.makePublicAppToggle).check();
diff --git a/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js b/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js
index 0916fc75c8..e5c4f3b26b 100644
--- a/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js
+++ b/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js
@@ -33,237 +33,239 @@ describe("Workspace constants", () => {
     const envVar = Cypress.env("environment");
     beforeEach(() => {
         cy.appUILogin();
-        cy.intercept("GET", "/api/apps?page=1&folder=&searchKey=").as("homePage");
+        cy.intercept("GET", "/api/library_apps").as("homePage");
     });
-    it("Verify workspace constants UI and CRUD operations", () => {
-        cy.get(commonSelectors.workspaceSettingsIcon).click();
-        cy.get(commonSelectors.workspaceConstantsOption)
-            .should(($el) => {
-                expect($el.contents().first().text().trim()).to.eq(
-                    "Workspace constants"
-                );
-            })
-            .click();
+    if (envVar === "Community") {
+        it("Verify workspace constants UI and CRUD operations", () => {
+            cy.get(commonSelectors.workspaceSettingsIcon).click();
+            cy.get(commonSelectors.workspaceConstantsOption)
+                .should(($el) => {
+                    expect($el.contents().first().text().trim()).to.eq(
+                        "Workspace constants"
+                    );
+                })
+                .click();
 
-        cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
-            expect($el.contents().first().text().trim()).to.eq("Workspace settings");
+            cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+                expect($el.contents().first().text().trim()).to.eq("Workspace settings");
+            });
+            cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+                "have.text",
+                " Workspace constants"
+            );
+
+            cy.get(
+                workspaceConstantsSelectors.workspaceConstantsHelperText
+            ).verifyVisibleElement(
+                "have.text",
+                workspaceConstantsText.workspaceConstantsHelperText
+            );
+
+            cy.get(commonSelectors.documentationLink).verifyVisibleElement(
+                "have.text",
+                commonText.documentationLink
+            );
+
+            cy.get("body").then(($body) => {
+                if ($body.find(workspaceConstantsSelectors.emptyStateImage).length > 0) {
+                    cy.get(workspaceConstantsSelectors.emptyStateImage).should(
+                        "be.visible"
+                    );
+                    cy.get(
+                        workspaceConstantsSelectors.emptyStateHeader
+                    ).verifyVisibleElement(
+                        "have.text",
+                        workspaceConstantsText.emptyStateHeader
+                    );
+                    cy.get(workspaceConstantsSelectors.emptyStateText).verifyVisibleElement(
+                        "have.text",
+                        workspaceConstantsText.emptyStateText
+                    );
+                    cy.get(
+                        workspaceConstantsSelectors.addNewConstantButton
+                    ).verifyVisibleElement(
+                        "have.text",
+                        workspaceConstantsText.addNewConstantButton
+                    );
+                }
+            });
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+            cy.get(workspaceConstantsSelectors.contantFormTitle).verifyVisibleElement(
+                "have.text",
+                workspaceConstantsText.addConstatntText
+            );
+            cy.get(commonSelectors.nameLabel).verifyVisibleElement("have.text", "Name");
+            cy.get(commonSelectors.nameInputField)
+                .invoke("attr", "placeholder")
+                .should("eq", "Enter Constant Name");
+            cy.get(commonSelectors.nameInputField).should("be.visible");
+            cy.get(commonSelectors.valueLabel).verifyVisibleElement(
+                "have.text",
+                "Value"
+            );
+            cy.get(commonSelectors.valueInputField)
+                .invoke("attr", "placeholder")
+                .should("eq", "Enter Value");
+            cy.get(commonSelectors.valueInputField).should("be.visible");
+            cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+                "have.text",
+                "Cancel"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).verifyVisibleElement(
+                "have.text",
+                "Add constant"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
+
+            contantsNameValidation(" ", commonText.constantsNameError);
+            contantsNameValidation("9", commonText.constantsNameError);
+            contantsNameValidation("%", commonText.constantsNameError);
+            contantsNameValidation(
+                "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`a",
+                "Maximum length has been reached"
+            );
+            contantsNameValidation(
+                "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`afgg",
+                "Constant name should be between 1 and 32 characters"
+            );
+
+            cy.clearAndType(commonSelectors.valueInputField, " ");
+            cy.get(commonSelectors.valueErrorText).verifyVisibleElement(
+                "have.text",
+                commonText.constantsValueError
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+
+            cy.clearAndType(commonSelectors.nameInputField, data.constName);
+            cy.clearAndType(commonSelectors.valueInputField, data.constName);
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(workspaceConstantsSelectors.constantName(data.constName)).should(
+                "not.exist"
+            );
+
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+            cy.clearAndType(commonSelectors.nameInputField, data.constName);
+            cy.clearAndType(commonSelectors.valueInputField, data.constName);
+            cy.get(workspaceConstantsSelectors.addConstantButton).click();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                workspaceConstantsText.constantCreatedToast
+            );
+
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+            contantsNameValidation(
+                data.constName,
+                "Constant with this name already exists in Production environment"
+            );
+            cy.get(commonSelectors.cancelButton).click();
+
+            cy.get(workspaceConstantsSelectors.envName).verifyVisibleElement(
+                "have.text",
+                "Production"
+            );
+            cy.get(
+                workspaceConstantsSelectors.addNewConstantButton
+            ).verifyVisibleElement("have.text", "Create new constant");
+            cy.get(
+                workspaceConstantsSelectors.constantsTableNameHeader
+            ).verifyVisibleElement("have.text", "Name");
+            cy.get(
+                workspaceConstantsSelectors.constantsTableValueHeader
+            ).verifyVisibleElement("have.text", "Value");
+            cy.get(
+                workspaceConstantsSelectors.constantName(data.constName)
+            ).verifyVisibleElement("have.text", data.constName);
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.constName);
+            cy.get(
+                workspaceConstantsSelectors.constEditButton(data.constName)
+            ).verifyVisibleElement("have.text", "Edit");
+            cy.get(
+                workspaceConstantsSelectors.constDeleteButton(data.constName)
+            ).verifyVisibleElement("have.text", "Delete");
+            cy.get(commonSelectors.pagination).should("be.visible");
+
+            cy.get(workspaceConstantsSelectors.constEditButton(data.constName)).click();
+
+            cy.get(workspaceConstantsSelectors.contantFormTitle).verifyVisibleElement(
+                "have.text",
+                "Update constant in production "
+            );
+            cy.get(commonSelectors.nameLabel).verifyVisibleElement("have.text", "Name");
+            cy.get(commonSelectors.nameInputField).should("have.value", data.constName);
+            cy.get(commonSelectors.nameInputField)
+                .should("be.visible")
+                .and("be.disabled");
+            cy.get(commonSelectors.valueLabel).verifyVisibleElement(
+                "have.text",
+                "Value"
+            );
+            cy.get(commonSelectors.valueInputField)
+                .should("be.visible")
+                .and("have.value", data.constName);
+            cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+                "have.text",
+                "Cancel"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).verifyVisibleElement(
+                "have.text",
+                "Update"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
+
+            cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.constName);
+
+            cy.get(workspaceConstantsSelectors.constEditButton(data.constName)).click();
+            cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
+            cy.get(workspaceConstantsSelectors.addConstantButton).click();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                "Constant updated successfully"
+            );
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.newConstvalue);
+
+            cy.get(
+                workspaceConstantsSelectors.constDeleteButton(data.constName)
+            ).click();
+            cy.get(commonSelectors.modalMessage).verifyVisibleElement(
+                "have.text",
+                `Are you sure you want to delete ${data.constName} from production?`
+            );
+            cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+                "have.text",
+                "Cancel"
+            );
+            cy.get(commonSelectors.yesButton).verifyVisibleElement("have.text", "Yes");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.newConstvalue);
+
+            cy.get(
+                workspaceConstantsSelectors.constDeleteButton(data.constName)
+            ).click();
+            cy.get(commonSelectors.yesButton).click();
+            cy.get(workspaceConstantsSelectors.constantValue(data.constName)).should(
+                "not.exist"
+            );
+
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                "Constant deleted successfully"
+            );
         });
-        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-            "have.text",
-            " Workspace constants"
-        );
-
-        cy.get(
-            workspaceConstantsSelectors.workspaceConstantsHelperText
-        ).verifyVisibleElement(
-            "have.text",
-            workspaceConstantsText.workspaceConstantsHelperText
-        );
-
-        cy.get(commonSelectors.documentationLink).verifyVisibleElement(
-            "have.text",
-            commonText.documentationLink
-        );
-
-        cy.get("body").then(($body) => {
-            if ($body.find(workspaceConstantsSelectors.emptyStateImage).length > 0) {
-                cy.get(workspaceConstantsSelectors.emptyStateImage).should(
-                    "be.visible"
-                );
-                cy.get(
-                    workspaceConstantsSelectors.emptyStateHeader
-                ).verifyVisibleElement(
-                    "have.text",
-                    workspaceConstantsText.emptyStateHeader
-                );
-                cy.get(workspaceConstantsSelectors.emptyStateText).verifyVisibleElement(
-                    "have.text",
-                    workspaceConstantsText.emptyStateText
-                );
-                cy.get(
-                    workspaceConstantsSelectors.addNewConstantButton
-                ).verifyVisibleElement(
-                    "have.text",
-                    workspaceConstantsText.addNewConstantButton
-                );
-            }
-        });
-        cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
-        cy.get(workspaceConstantsSelectors.contantFormTitle).verifyVisibleElement(
-            "have.text",
-            workspaceConstantsText.addConstatntText
-        );
-        cy.get(commonSelectors.nameLabel).verifyVisibleElement("have.text", "Name");
-        cy.get(commonSelectors.nameInputField)
-            .invoke("attr", "placeholder")
-            .should("eq", "Enter Constant Name");
-        cy.get(commonSelectors.nameInputField).should("be.visible");
-        cy.get(commonSelectors.valueLabel).verifyVisibleElement(
-            "have.text",
-            "Value"
-        );
-        cy.get(commonSelectors.valueInputField)
-            .invoke("attr", "placeholder")
-            .should("eq", "Enter Value");
-        cy.get(commonSelectors.valueInputField).should("be.visible");
-        cy.get(commonSelectors.cancelButton).verifyVisibleElement(
-            "have.text",
-            "Cancel"
-        );
-        cy.get(workspaceConstantsSelectors.addConstantButton).verifyVisibleElement(
-            "have.text",
-            "Add constant"
-        );
-        cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
-
-        contantsNameValidation(" ", commonText.constantsNameError);
-        contantsNameValidation("9", commonText.constantsNameError);
-        contantsNameValidation("%", commonText.constantsNameError);
-        contantsNameValidation(
-            "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`a",
-            "Maximum length has been reached"
-        );
-        contantsNameValidation(
-            "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`afgg",
-            "Constant name should be between 1 and 32 characters"
-        );
-
-        cy.clearAndType(commonSelectors.valueInputField, " ");
-        cy.get(commonSelectors.valueErrorText).verifyVisibleElement(
-            "have.text",
-            commonText.constantsValueError
-        );
-        cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
-        cy.get(commonSelectors.cancelButton).click();
-        cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
-
-        cy.clearAndType(commonSelectors.nameInputField, data.constName);
-        cy.clearAndType(commonSelectors.valueInputField, data.constName);
-        cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
-        cy.get(commonSelectors.cancelButton).click();
-        cy.get(workspaceConstantsSelectors.constantName(data.constName)).should(
-            "not.exist"
-        );
-
-        cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
-        cy.clearAndType(commonSelectors.nameInputField, data.constName);
-        cy.clearAndType(commonSelectors.valueInputField, data.constName);
-        cy.get(workspaceConstantsSelectors.addConstantButton).click();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            workspaceConstantsText.constantCreatedToast
-        );
-
-        cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
-        contantsNameValidation(
-            data.constName,
-            "Constant with this name already exists in Production environment"
-        );
-        cy.get(commonSelectors.cancelButton).click();
-
-        cy.get(workspaceConstantsSelectors.envName).verifyVisibleElement(
-            "have.text",
-            "Production"
-        );
-        cy.get(
-            workspaceConstantsSelectors.addNewConstantButton
-        ).verifyVisibleElement("have.text", "Create new constant");
-        cy.get(
-            workspaceConstantsSelectors.constantsTableNameHeader
-        ).verifyVisibleElement("have.text", "Name");
-        cy.get(
-            workspaceConstantsSelectors.constantsTableValueHeader
-        ).verifyVisibleElement("have.text", "Value");
-        cy.get(
-            workspaceConstantsSelectors.constantName(data.constName)
-        ).verifyVisibleElement("have.text", data.constName);
-        cy.get(
-            workspaceConstantsSelectors.constantValue(data.constName)
-        ).verifyVisibleElement("have.text", data.constName);
-        cy.get(
-            workspaceConstantsSelectors.constEditButton(data.constName)
-        ).verifyVisibleElement("have.text", "Edit");
-        cy.get(
-            workspaceConstantsSelectors.constDeleteButton(data.constName)
-        ).verifyVisibleElement("have.text", "Delete");
-        cy.get(commonSelectors.pagination).should("be.visible");
-
-        cy.get(workspaceConstantsSelectors.constEditButton(data.constName)).click();
-
-        cy.get(workspaceConstantsSelectors.contantFormTitle).verifyVisibleElement(
-            "have.text",
-            "Update constant in production "
-        );
-        cy.get(commonSelectors.nameLabel).verifyVisibleElement("have.text", "Name");
-        cy.get(commonSelectors.nameInputField).should("have.value", data.constName);
-        cy.get(commonSelectors.nameInputField)
-            .should("be.visible")
-            .and("be.disabled");
-        cy.get(commonSelectors.valueLabel).verifyVisibleElement(
-            "have.text",
-            "Value"
-        );
-        cy.get(commonSelectors.valueInputField)
-            .should("be.visible")
-            .and("have.value", data.constName);
-        cy.get(commonSelectors.cancelButton).verifyVisibleElement(
-            "have.text",
-            "Cancel"
-        );
-        cy.get(workspaceConstantsSelectors.addConstantButton).verifyVisibleElement(
-            "have.text",
-            "Update"
-        );
-        cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
-
-        cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
-        cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
-        cy.get(commonSelectors.cancelButton).click();
-        cy.get(
-            workspaceConstantsSelectors.constantValue(data.constName)
-        ).verifyVisibleElement("have.text", data.constName);
-
-        cy.get(workspaceConstantsSelectors.constEditButton(data.constName)).click();
-        cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
-        cy.get(workspaceConstantsSelectors.addConstantButton).click();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            "Constant updated successfully"
-        );
-        cy.get(
-            workspaceConstantsSelectors.constantValue(data.constName)
-        ).verifyVisibleElement("have.text", data.newConstvalue);
-
-        cy.get(
-            workspaceConstantsSelectors.constDeleteButton(data.constName)
-        ).click();
-        cy.get(commonSelectors.modalMessage).verifyVisibleElement(
-            "have.text",
-            `Are you sure you want to delete ${data.constName} from production?`
-        );
-        cy.get(commonSelectors.cancelButton).verifyVisibleElement(
-            "have.text",
-            "Cancel"
-        );
-        cy.get(commonSelectors.yesButton).verifyVisibleElement("have.text", "Yes");
-        cy.get(commonSelectors.cancelButton).click();
-        cy.get(
-            workspaceConstantsSelectors.constantValue(data.constName)
-        ).verifyVisibleElement("have.text", data.newConstvalue);
-
-        cy.get(
-            workspaceConstantsSelectors.constDeleteButton(data.constName)
-        ).click();
-        cy.get(commonSelectors.yesButton).click();
-        cy.get(workspaceConstantsSelectors.constantValue(data.constName)).should(
-            "not.exist"
-        );
-
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            "Constant deleted successfully"
-        );
-    });
+    }
 
     it("should verify the constants resolving value on components and query", () => {
         common.navigateToworkspaceConstants();
@@ -294,6 +296,7 @@ describe("Workspace constants", () => {
         cy.waitForAutoSave();
 
         common.pinInspector();
+        cy.get(".tooltip-inner").invoke("hide");
         cy.get(commonWidgetSelector.sidebarinspector).click();
         cy.get(commonWidgetSelector.inspectorNodeComponents).click();
         cy.get(commonWidgetSelector.nodeComponent(data.constantsName)).click();
@@ -310,31 +313,47 @@ describe("Workspace constants", () => {
             `[data-cy="inspector-node-${data.constantsName}"] > .mx-2`
         ).verifyVisibleElement("have.text", `"dJ_8Q~BcaMPd"`);
 
-        cy.get('[data-cy="button-release"]').click();
-        cy.get('[data-cy="yes-button"]').click();
-        cy.verifyToastMessage(commonSelectors.toastMessage, "Version v1 released");
 
-        cy.get(commonWidgetSelector.shareAppButton).click();
-        cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${data.slug}`);
-        cy.get(commonWidgetSelector.modalCloseButton).click();
-        cy.forceClickOnCanvas();
-        cy.waitForAutoSave();
-        cy.openInCurrentTab(commonWidgetSelector.previewButton);
-        cy.wait(4000);
-
-        cy.get(
-            commonWidgetSelector.draggableWidget(data.constantsName)
-        ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
-
-        cy.get('[data-cy="viewer-page-logo"]').click();
-        cy.wait("@homePage");
         if (envVar === "Community") {
+            cy.get('[data-cy="button-release"]').click();
+            cy.get('[data-cy="yes-button"]').click();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                "Version v1 released"
+            );
+
+            cy.get(commonWidgetSelector.shareAppButton).click();
+            cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${data.slug}`);
+            cy.get(commonWidgetSelector.modalCloseButton).click();
+            cy.forceClickOnCanvas();
+            cy.waitForAutoSave();
+            cy.openInCurrentTab(commonWidgetSelector.previewButton);
+            cy.wait(4000);
+
+            cy.get(
+                commonWidgetSelector.draggableWidget(data.constantsName)
+            ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
+
+            cy.get('[data-cy="viewer-page-logo"]').click();
+            cy.wait("@homePage");
             cy.visit(`/applications/${data.slug}`);
             cy.wait(4000);
 
             cy.get(
                 commonWidgetSelector.draggableWidget(data.constantsName)
             ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
+        } else {
+            cy.forceClickOnCanvas();
+            cy.waitForAutoSave();
+            cy.openInCurrentTab(commonWidgetSelector.previewButton);
+            cy.wait(4000);
+
+            cy.get(
+                commonWidgetSelector.draggableWidget(data.constantsName)
+            ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
+
+            cy.get('[data-cy="viewer-page-logo"]').click();
+            cy.wait("@homePage");
         }
     });
-});
+});
\ No newline at end of file
diff --git a/cypress-tests/cypress/support/commands.js b/cypress-tests/cypress/support/commands.js
deleted file mode 100644
index 3fbfb1b09e..0000000000
--- a/cypress-tests/cypress/support/commands.js
+++ /dev/null
@@ -1,286 +0,0 @@
-import { commonSelectors, commonWidgetSelector } from "Selectors/common";
-import { dashboardSelector } from "Selectors/dashboard";
-import { ssoSelector } from "Selectors/manageSSO";
-import { commonText, createBackspaceText } from "Texts/common";
-import { passwordInputText } from "Texts/passwordInput";
-
-Cypress.Commands.add(
-  "login",
-  (email = "dev@tooljet.io", password = "password") => {
-    cy.visit("/");
-    cy.clearAndType(commonSelectors.workEmailInputField, email);
-    cy.clearAndType(commonSelectors.passwordInputField, password);
-    cy.get(commonSelectors.signInButton).click();
-    cy.intercept("GET", "api/library_apps").as("apps");
-    cy.wait("@apps");
-    cy.wait(4000);
-    cy.get(commonSelectors.homePageLogo).should("be.visible");
-  }
-);
-
-Cypress.Commands.add("clearAndType", (selector, text) => {
-  cy.get(selector).clear().type(text, { log: false });
-});
-
-Cypress.Commands.add("forceClickOnCanvas", () => {
-  cy.get(commonSelectors.canvas).click("topRight", { force: true });
-});
-
-Cypress.Commands.add(
-  "verifyToastMessage",
-  (selector, message, closeAction = true) => {
-    cy.get(selector).as("toast").should("contain.text", message);
-    if (closeAction) {
-      cy.get("body").then(($body) => {
-        if ($body.find(commonSelectors.toastCloseButton).length > 0) {
-          cy.closeToastMessage();
-          cy.wait(200);
-        }
-      });
-    }
-  }
-);
-
-Cypress.Commands.add("waitForAutoSave", () => {
-  cy.wait(200);
-  cy.get(commonSelectors.autoSave, { timeout: 20000 }).should(
-    "have.text",
-    commonText.autoSave,
-    { timeout: 20000 }
-  );
-});
-
-Cypress.Commands.add("createApp", (appName) => {
-  const getAppButtonSelector = ($title) =>
-    $title.text().includes(commonText.introductionMessage)
-      ? commonSelectors.emptyAppCreateButton
-      : commonSelectors.appCreateButton;
-
-  cy.get("body").then(($title) => {
-    cy.get(getAppButtonSelector($title)).click();
-  });
-  cy.waitForAppLoad();
-  cy.skipEditorPopover();
-});
-
-Cypress.Commands.add(
-  "dragAndDropWidget",
-  (
-    widgetName,
-    positionX = 190,
-    positionY = 80,
-    widgetName2 = widgetName,
-    canvas = commonSelectors.canvas
-  ) => {
-    const dataTransfer = new DataTransfer();
-
-    cy.clearAndType(commonSelectors.searchField, widgetName);
-    cy.get(commonWidgetSelector.widgetBox(widgetName2)).trigger(
-      "dragstart",
-      { dataTransfer },
-      { force: true }
-    );
-    cy.get(canvas).trigger("drop", positionX, positionY, {
-      dataTransfer,
-      force: true,
-    });
-    cy.waitForAutoSave();
-  }
-);
-
-Cypress.Commands.add("appUILogin", () => {
-  cy.visit("/");
-  cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io");
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
-  cy.get(commonSelectors.signInButton).click();
-  cy.intercept("GET", "api/library_apps").as("apps");
-  cy.wait("@apps");
-  cy.wait(3000);
-  cy.get(commonSelectors.homePageLogo).should("be.visible");
-});
-
-Cypress.Commands.add(
-  "clearAndTypeOnCodeMirror",
-  {
-    prevSubject: "optional",
-  },
-  (subject, value) => {
-    cy.wrap(subject)
-      .click()
-      .find("pre.CodeMirror-line")
-      .invoke("text")
-      .then((text) => {
-        cy.wrap(subject).type(createBackspaceText(text)),
-          {
-            delay: 0,
-          };
-      });
-    if (!Array.isArray(value)) {
-      cy.wrap(subject).type(value, {
-        parseSpecialCharSequences: false,
-        delay: 0,
-      });
-    } else {
-      cy.wrap(subject)
-        .type(value[1], {
-          parseSpecialCharSequences: false,
-          delay: 0,
-        })
-        .type(`{home}${value[0]}`, { delay: 0 });
-    }
-  }
-);
-
-Cypress.Commands.add("deleteApp", (appName) => {
-  cy.intercept("DELETE", "/api/apps/*").as("appDeleted");
-  cy.get(commonSelectors.appCard(appName))
-    .realHover()
-    .find(commonSelectors.appCardOptionsButton)
-    .realHover()
-    .click();
-  cy.get(commonSelectors.deleteAppOption).click();
-  cy.get(commonSelectors.buttonSelector(commonText.modalYesButton)).click();
-  cy.wait("@appDeleted");
-});
-
-Cypress.Commands.add(
-  "verifyVisibleElement",
-  {
-    prevSubject: "element",
-  },
-  (subject, assertion, value, ...arg) => {
-    return cy
-      .wrap(subject)
-      .scrollIntoView()
-      .should("be.visible")
-      .and(assertion, value, ...arg);
-  }
-);
-
-Cypress.Commands.add("openInCurrentTab", (selector) => {
-  cy.get(selector).invoke("removeAttr", "target").click();
-});
-
-Cypress.Commands.add("modifyCanvasSize", (x, y) => {
-  cy.get("[data-cy='left-sidebar-settings-button']").click();
-  cy.clearAndType("[data-cy='maximum-canvas-width-input-field']", x);
-  cy.forceClickOnCanvas();
-  cy.intercept("/api/apps/**").as("app");
-  cy.wait("@app");
-});
-
-Cypress.Commands.add("renameApp", (appName) => {
-  cy.get(commonSelectors.appNameInput).type(
-    `{selectAll}{backspace}${appName}`,
-    { force: true }
-  );
-  cy.forceClickOnCanvas();
-  cy.waitForAutoSave();
-});
-
-Cypress.Commands.add(
-  "clearCodeMirror",
-  {
-    prevSubject: "element",
-  },
-  (subject, value) => {
-    cy.wrap(subject)
-      .click()
-      .find("pre.CodeMirror-line")
-      .invoke("text")
-      .then((text) => {
-        cy.wrap(subject).type(createBackspaceText(text)),
-          {
-            delay: 0,
-          };
-      });
-  }
-);
-
-Cypress.Commands.add("closeToastMessage", () => {
-  cy.get(`${commonSelectors.toastCloseButton}:eq(0)`).click();
-});
-
-Cypress.Commands.add("notVisible", (dataCy) => {
-  cy.get("body").then(($body) => {
-    if ($body.find(dataCy).length > 0) {
-      cy.get(dataCy).should("not.be.visible");
-    }
-  });
-  const log = Cypress.log({
-    name: "notVisible",
-    displayName: "Not Visible",
-    message: dataCy,
-  });
-});
-
-Cypress.Commands.add("resizeWidget", (widgetName, x, y) => {
-  cy.get(`[data-cy="draggable-widget-${widgetName}"]`).trigger("mouseover", {
-    force: true,
-  });
-
-  cy.get('[class="bottom-right"]').trigger("mousedown", {
-    which: 1,
-    force: true,
-  });
-  cy.get(commonSelectors.canvas)
-    .trigger("mousemove", {
-      which: 1,
-      clientX: x,
-      ClientY: y,
-      clientX: x,
-      clientY: y,
-      pageX: x,
-      pageY: y,
-      screenX: x,
-      screenY: y,
-    })
-    .trigger("mouseup");
-
-  cy.waitForAutoSave();
-});
-
-Cypress.Commands.add("reloadAppForTheElement", (elementText) => {
-  cy.get("body").then(($title) => {
-    if (!$title.text().includes(elementText)) {
-      cy.reload();
-    }
-  });
-});
-
-Cypress.Commands.add("skipEditorPopover", () => {
-  cy.wait(2000);
-  cy.get("body").then(($el) => {
-    if ($el.text().includes("Skip", { timeout: 2000 })) {
-      cy.get(commonSelectors.skipButton).realClick();
-    }
-  });
-  const log = Cypress.log({
-    name: "Skip Popover",
-    displayName: "Skip Popover",
-    message: " Popover skipped",
-  });
-});
-
-Cypress.Commands.add("waitForAppLoad", () => {
-  const API_ENDPOINT =
-    Cypress.env("environment") === "Community"
-      ? "/api/v2/data_sources"
-      : "/api/app-environments/**";
-
-  const TIMEOUT = 15000;
-
-  cy.intercept("GET", API_ENDPOINT).as("appDs");
-  cy.wait("@appDs", { timeout: TIMEOUT });
-});
-
-Cypress.Commands.add("visitTheWorkspace", (workspaceName) => {
-  cy.task("updateId", {
-    dbconfig: Cypress.env("app_db"),
-    sql: `select id from organizations where name='${workspaceName}';`,
-  }).then((resp) => {
-    let workspaceId = resp.rows[0].id;
-    cy.visit(workspaceId);
-  });
-  cy.wait(2000);
-});
diff --git a/cypress-tests/cypress/support/e2e.js b/cypress-tests/cypress/support/e2e.js
index 1466a8818b..f9b943284c 100644
--- a/cypress-tests/cypress/support/e2e.js
+++ b/cypress-tests/cypress/support/e2e.js
@@ -14,11 +14,11 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "../commands/commands";
+import "../commands/apiCommands";
 import "cypress-real-events";
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
-Cypress.on('uncaught:exception', (err, runnable) => 
-{
-    return false;
-});
\ No newline at end of file
+Cypress.on("uncaught:exception", (err, runnable) => {
+  return false;
+});
diff --git a/cypress-tests/cypress/support/utils/basicComponents.js b/cypress-tests/cypress/support/utils/basicComponents.js
index a9045b0721..a7bb469fa3 100644
--- a/cypress-tests/cypress/support/utils/basicComponents.js
+++ b/cypress-tests/cypress/support/utils/basicComponents.js
@@ -30,11 +30,11 @@ export const verifyComponentWithOutLabel = (
   appName,
   properties = []
 ) => {
-  cy.dragAndDropWidget(component, 50, 50);
+  cy.dragAndDropWidget(component, 200, 200);
   cy.get(`[data-cy="draggable-widget-${defaultName}"]`).click({ force: true });
   verifyComponent(defaultName);
 
-  cy.resizeWidget(defaultName, 650, 400);
+  cy.resizeWidget(defaultName, 650, 400, false);
 
   openEditorSidebar(defaultName);
   editAndVerifyWidgetName(fakeName, properties);
@@ -47,7 +47,4 @@ export const verifyComponentWithOutLabel = (
 
   cy.go("back");
   deleteComponentAndVerify(fakeName);
-  cy.get(commonSelectors.editorPageLogo).click();
-
-  cy.deleteApp(appName);
 };
diff --git a/cypress-tests/cypress/support/utils/commonWidget.js b/cypress-tests/cypress/support/utils/commonWidget.js
index 2ff1feef33..a846fcb32e 100644
--- a/cypress-tests/cypress/support/utils/commonWidget.js
+++ b/cypress-tests/cypress/support/utils/commonWidget.js
@@ -27,12 +27,14 @@ export const verifyAndModifyParameter = (paramName, value) => {
   cy.get(commonWidgetSelector.parameterLabel(paramName))
     .scrollIntoView()
     .should("have.text", paramName);
-  cy.get(
-    commonWidgetSelector.parameterInputField(paramName)
-  ).clearAndTypeOnCodeMirror(value);
+  cy.get(commonWidgetSelector.parameterInputField(paramName))
+    .clearAndTypeOnCodeMirror(" ")
+    .clearAndTypeOnCodeMirror(value);
 };
 
 export const openEditorSidebar = (widgetName = "") => {
+  cy.hideTooltip();
+
   cy.get(`${commonWidgetSelector.draggableWidget(widgetName)}:eq(0)`).trigger(
     "mouseover"
   );
@@ -48,14 +50,7 @@ export const verifyAndModifyToggleFx = (
     "have.text",
     paramName
   );
-  cy.get(
-    commonWidgetSelector.parameterFxButton(
-      paramName,
-      "[class*='fx-button  unselectable']"
-    )
-  )
-    .should("have.text", "Fx")
-    .click();
+  cy.get(commonWidgetSelector.parameterFxButton(paramName, " > svg")).click();
   if (defaultValue)
     cy.get(commonWidgetSelector.parameterInputField(paramName))
       .find("pre.CodeMirror-line")
@@ -214,7 +209,8 @@ export const verifyAndModifyStylePickerFx = (
   paramName,
   defaultValue,
   value,
-  index = 0
+  index = 0,
+  boxShadow = ""
 ) => {
   cy.get(commonWidgetSelector.parameterLabel(paramName)).should(
     "have.text",
@@ -228,19 +224,12 @@ export const verifyAndModifyStylePickerFx = (
   cy.get(commonWidgetSelector.stylePickerValue(paramName))
     .should("be.visible")
     .verifyVisibleElement("have.text", defaultValue);
-  cy.get(
-    commonWidgetSelector.parameterFxButton(
-      paramName,
-      "[class*='fx-button  unselectable']"
-    )
-  )
-    .should("have.text", "Fx")
-    .click();
+  cy.get(commonWidgetSelector.parameterFxButton(paramName, " > svg")).click();
 
   cy.get(commonWidgetSelector.stylePickerFxInput(paramName)).within(() => {
     cy.get(".CodeMirror-line")
       .should("be.visible")
-      .and("have.text", defaultValue);
+      .and("have.text", `${boxShadow}${defaultValue}`);
   });
 
   cy.get(
@@ -321,11 +310,13 @@ export const verifyStylesGeneralAccordion = (
 ) => {
   openEditorSidebar(widgetName);
   cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-  openAccordion(commonWidgetText.accordionGenaral, []);
+  // openAccordion(commonWidgetText.accordionGenaral, []);
   verifyAndModifyStylePickerFx(
     commonWidgetText.parameterBoxShadow,
     commonWidgetText.boxShadowDefaultValue,
-    `${boxShadowParameter[0]}px ${boxShadowParameter[1]}px ${boxShadowParameter[2]}px ${boxShadowParameter[3]}px ${hexColor}`
+    `${boxShadowParameter[0]}px ${boxShadowParameter[1]}px ${boxShadowParameter[2]}px ${boxShadowParameter[3]}px ${hexColor}`,
+    0,
+    "0px 0px 0px 0px "
   );
   cy.get(
     commonWidgetSelector.parameterFxButton(commonWidgetText.parameterBoxShadow)
diff --git a/cypress-tests/cypress/support/utils/dataSource.js b/cypress-tests/cypress/support/utils/dataSource.js
index 36b449ddcb..3cdbc32e49 100644
--- a/cypress-tests/cypress/support/utils/dataSource.js
+++ b/cypress-tests/cypress/support/utils/dataSource.js
@@ -49,17 +49,15 @@ export const deleteDatasource = (datasourceName) => {
   cy.get(`[data-cy="${cyParamName(datasourceName)}-button"]`)
     .parent()
     .within(() => {
-      cy.get(`[data-cy="${cyParamName(datasourceName)}-delete-button"]`).invoke(
-        "click"
-      );
+      cy.get(dataSourceSelector.deleteDSButton(datasourceName)).invoke("click");
     });
   cy.get('[data-cy="yes-button"]').click();
-  cy.verifyToastMessage(commonSelectors.toastMessage, "Data Source Deleted");
-  cy.get(commonSelectors.breadcrumbTitle).click();
-  cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-    "have.text",
-    " Databases"
-  );
+  // cy.verifyToastMessage(commonSelectors.toastMessage, "Data Source Deleted");
+  // cy.get(commonSelectors.breadcrumbTitle).click()
+  // cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+  //   "have.text",
+  //   " Databases"
+  // );
 };
 
 export const closeDSModal = () => {
@@ -102,3 +100,23 @@ export const addQueryN = (queryName, query, dbName) => {
   cy.get(dataSourceSelector.queryInputField).clearAndTypeOnCodeMirror(query);
   cy.get(dataSourceSelector.queryCreateAndRunButton).click();
 };
+
+export const verifyValueOnInspector = (queryName, value) => {
+  cy.get('[data-cy="inspector-node-queries"]')
+    .parent()
+    .within(() => {
+      cy.get("span").first().scrollIntoView().contains("queries").click();
+    });
+  cy.get("body").then(($body) => {
+    if (
+      $body.find(`[data-cy="inspector-node-${queryName}"] > .node-key`).length >
+      0
+    ) {
+      cy.get(`[data-cy="inspector-node-${queryName}"] > .node-key`).click();
+      cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
+        "have.text",
+        value
+      );
+    }
+  });
+};
\ No newline at end of file
diff --git a/cypress-tests/cypress/support/utils/inspector.js b/cypress-tests/cypress/support/utils/inspector.js
index e40fe76d25..786c99f850 100644
--- a/cypress-tests/cypress/support/utils/inspector.js
+++ b/cypress-tests/cypress/support/utils/inspector.js
@@ -13,11 +13,11 @@ export const verifyNodeData = (node, type, children, index = 0) => {
     .verifyVisibleElement("have.text", type);
 };
 
-export const openNode = (node, index = 0) => {
+export const openNode = (node, index = 0, time = 1000) => {
   cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .node-key`)
     .eq(index)
     .click();
-  cy.wait(1000);
+  cy.wait(time);
 };
 
 export const verifyValue = (node, type, children, index = 0) => {
diff --git a/cypress-tests/cypress/support/utils/manageUsers.js b/cypress-tests/cypress/support/utils/manageUsers.js
index 20050477f3..9c6ece2105 100644
--- a/cypress-tests/cypress/support/utils/manageUsers.js
+++ b/cypress-tests/cypress/support/utils/manageUsers.js
@@ -134,10 +134,10 @@ export const manageUsersElements = () => {
 export const inviteUser = (firstName, email) => {
   fillUserInviteForm(firstName, email);
   cy.get(usersSelector.buttonInviteUsers).click();
-  cy.verifyToastMessage(
-    commonSelectors.toastMessage,
-    usersText.userCreatedToast
-  );
+  // cy.verifyToastMessage(
+  //   commonSelectors.toastMessage,
+  //   usersText.userCreatedToast
+  // );
   cy.wait(1000)
   fetchAndVisitInviteLink(email);
 };
@@ -318,4 +318,4 @@ export const fetchAndVisitInviteLink = (email) => {
       });
     });
   });
-};
+};
\ No newline at end of file
diff --git a/cypress-tests/cypress/support/utils/modal.js b/cypress-tests/cypress/support/utils/modal.js
index 75df99ccbe..cf1a368d84 100644
--- a/cypress-tests/cypress/support/utils/modal.js
+++ b/cypress-tests/cypress/support/utils/modal.js
@@ -52,7 +52,7 @@ export const addAndVerifyColor = (
 };
 
 export const typeOnFx = (fx, data) => {
-  cy.get(commonWidgetSelector.parameterFxButton(fx)).eq(1).realClick();
+  cy.get(commonWidgetSelector.parameterFxButton(fx)).eq(0).realClick();
   cy.get(commonWidgetSelector.parameterInputField(fx)).clearAndTypeOnCodeMirror(
     data
   );
diff --git a/cypress-tests/cypress/support/utils/multipage.js b/cypress-tests/cypress/support/utils/multipage.js
index 99bd4a3f74..1e62a3b01e 100644
--- a/cypress-tests/cypress/support/utils/multipage.js
+++ b/cypress-tests/cypress/support/utils/multipage.js
@@ -1,7 +1,7 @@
 import { multipageSelector } from "Selectors/multipage";
 
 export const searchPage = (pageName) => {
-  cy.get('[data-cy="search-page-option-icon"]').click();
+  cy.get('[title="Search"]').click();
   cy.get('[data-cy="search-input-filed"]').type(pageName);
 };
 
@@ -10,11 +10,14 @@ export const clearSearch = () => {
 };
 
 export const modifyPageHandle = (pageName, handle) => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).click();
-  cy.get(multipageSelector.pageMenuIcon).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
   cy.get(multipageSelector.pageHandleText).click();
   cy.get(multipageSelector.pageHandleInputField).clear().type(handle);
-  cy.get(multipageSelector.pageHandleSaveButton).click()
+  cy.get(multipageSelector.pageHandleSaveButton).click();
 };
 
 export const detetePage = (pageName) => {
@@ -26,14 +29,21 @@ export const detetePage = (pageName) => {
 };
 
 export const hideOrUnhidePage = (pageName, operation = "hide") => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).click();
-  cy.get(multipageSelector.pageMenuIcon).click();
-  cy.get(`[data-cy="${operation}-page-option-button"]`).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
+  cy.get(`[data-cy="${operation}-page-on-app-menu-option-button"]`).click();
 };
 
 export const setHomePage = (pageName) => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).trigger('mouseover').click();
-  cy.get(multipageSelector.pageMenuIcon).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .trigger("mouseover")
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
   cy.get(multipageSelector.markHomePageOptionButton).click();
 };
 
@@ -45,8 +55,11 @@ export const addNewPage = (pageName) => {
 };
 
 export const addEventHandler = (pageName) => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).click();
-  cy.get(multipageSelector.pageMenuIcon).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
   cy.get(multipageSelector.eventHandlerOptionButton).click();
   cy.get(multipageSelector.addEventHandlerLink).click();
   cy.get(multipageSelector.eventName).verifyVisibleElement(
diff --git a/cypress-tests/cypress/support/utils/postgreSql.js b/cypress-tests/cypress/support/utils/postgreSql.js
index dc2ddb4ee6..fc3f257627 100644
--- a/cypress-tests/cypress/support/utils/postgreSql.js
+++ b/cypress-tests/cypress/support/utils/postgreSql.js
@@ -48,29 +48,34 @@ export const selectAndAddDataSource = (
   dataSourceName
 ) => {
   cy.get(commonSelectors.globalDataSourceIcon).click();
+  cy.wait(1000)
   cy.get(`[data-cy="${cyParamName(dscategory)}-datasource-button"]`).click();
+  cy.wait(500)
   cy.get(postgreSqlSelector.dataSourceSearchInputField).type(dataSource);
-  cy.get(`[data-cy="data-source-${String(dataSource).toLowerCase()}"]`)
+  cy.get(`[data-cy="data-source-${(dataSource).toLowerCase()}"]`)
     .parent()
     .within(() => {
       cy.get(
-        `[data-cy="data-source-${String(
+        `[data-cy="data-source-${(
           dataSource
         ).toLowerCase()}"]>>>.datasource-card-title`
       ).realHover("mouse");
-      cy.get(`[data-cy="${cyParamName(dataSource)}-add-button"]`).click();
+      cy.get(
+        `[data-cy="${cyParamName(dataSource).toLowerCase()}-add-button"]`
+      ).click();
     });
-  cy.get(postgreSqlSelector.buttonSave).should("be.disabled");
+
+  cy.wait(1000)
+  cy.get(postgreSqlSelector.buttonSave).should("be.disabled")
   cy.clearAndType(
     '[data-cy="data-source-name-input-filed"]',
-    `cypress-${cyParamName(dataSourceName)}-${cyParamName(dataSource)}`
+    cyParamName(`cypress-${dataSourceName}-${dataSource}`)
   );
   cy.get(postgreSqlSelector.buttonSave).click();
   cy.verifyToastMessage(
     commonSelectors.toastMessage,
     postgreSqlText.toastDSAdded
   );
-
   cy.get(
     `[data-cy="cypress-${cyParamName(dataSourceName)}-${cyParamName(
       dataSource
@@ -179,4 +184,4 @@ export const addWidgetsToAddUser = () => {
   addEventHandlerToRunQuery("add_data_using_widgets");
 };
 
-export const addListviewToVerifyData = () => {};
+export const addListviewToVerifyData = () => { };
\ No newline at end of file
diff --git a/cypress-tests/cypress/support/utils/queryPanel/queryEditor.js b/cypress-tests/cypress/support/utils/queryPanel/queryEditor.js
new file mode 100644
index 0000000000..908afc6e68
--- /dev/null
+++ b/cypress-tests/cypress/support/utils/queryPanel/queryEditor.js
@@ -0,0 +1,50 @@
+export const verifyElemtsNoGds = (option) => {
+  cy.get('[data-cy="label-select-datasource"]').verifyVisibleElement(
+    "have.text",
+    "Connect to a datasource"
+  );
+  cy.get('[data-cy="querymanager-description"]').verifyVisibleElement(
+    "contain.text",
+    "Select a datasource to start creating a new query. To know more about queries in ToolJet, you can read our"
+  );
+  cy.get('[data-cy="querymanager-doc-link"]').verifyVisibleElement(
+    "have.text",
+    "documentation"
+  );
+
+  cy.get('[data-cy="landing-page-label-default"]').verifyVisibleElement(
+    "have.text",
+    "Default"
+  );
+  cy.get('[data-cy="restapi-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "REST API"
+  );
+  cy.get('[data-cy="runjs-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "JavaScript"
+  );
+  cy.get('[data-cy="runpy-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "Python"
+  );
+  cy.get('[data-cy="tooljetdb-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "ToolJet DB"
+  );
+
+  cy.get('[data-cy="label-avilable-ds"]').verifyVisibleElement(
+    "have.text",
+    "Available Datasources 0"
+  );
+  cy.get('[data-cy="landing-page-add-new-ds-button"]').verifyVisibleElement(
+    "have.text",
+    "Add new"
+  );
+  cy.get('[data-cy="empty-banner-queryManager"]').verifyVisibleElement(
+    "have.text",
+    "No global datasources have been added yet. Add new datasources to connect to your app! 🚀"
+  );
+};
+
+export const verifyElemtsWithGds = (option) => {};
diff --git a/cypress-tests/cypress/support/utils/table.js b/cypress-tests/cypress/support/utils/table.js
index 048734d5e7..44f55467a3 100644
--- a/cypress-tests/cypress/support/utils/table.js
+++ b/cypress-tests/cypress/support/utils/table.js
@@ -32,11 +32,12 @@ export const selectDropdownOption = (inputSelector, option) => {
     multipleBadges: 5,
     tags: 6,
     dropdown: 7,
-    radio: 8,
-    multiselect: 9,
-    toggleSwitch: 10,
-    datePicker: 11,
-    image: 12,
+    link: 8,
+    radio: 9,
+    multiselect: 10,
+    toggleSwitch: 11,
+    datePicker: 12,
+    image: 13,
     wrap: 0,
     scroll: 1,
     hide: 2,
@@ -65,13 +66,13 @@ export const verifyAndEnterColumnOptionInput = (label, value) => {
     .find("label")
     .should("have.text", label);
   cy.get(`[data-cy="input-and-label-${cyParamName(label)}"]`)
-    .realClick()
-    .realPress(["Meta", "A"])
-    .realType(`{backspace}{backspace}{backspace}{backspace}`)
-    .realPress(["Meta", "A"])
-    .realType(
-      `{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}${value}`
-    );
+    .find(`[data-cy="-input-field"]`)
+    // .click({ force: true })
+    // .realClick()
+    // .realPress(["Meta", "A"])
+    // .realType(`{backspace}{backspace}{backspace}{backspace}`)
+    // .realPress(["Meta", "A"])
+    .clearAndTypeOnCodeMirror(`${value}`);
 };
 
 export const addAndOpenColumnOption = (name, type) => {
@@ -86,7 +87,13 @@ export const addAndOpenColumnOption = (name, type) => {
 };
 
 export const deleteAndVerifyColumn = (columnName) => {
-  cy.get(`[data-cy="button-delete-${columnName}"]`).click();
+  cy.get(`[data-cy="pages-name-${columnName}"]`)
+    .parent()
+    .realHover()
+    .click()
+    .find(".tj-base-btn")
+    .click();
+  cy.get(".list-item-popover-option").click();
   cy.notVisible(`[data-cy="column-${columnName}"]`);
   cy.notVisible(tableSelector.columnHeader(columnName));
 };
@@ -128,20 +135,20 @@ export const verifySingleValueOnTable = (
 export const verifyAndModifyToggleFx = (
   paramName,
   defaultValue,
-  toggleModification = true
+  toggleModification = true,
+  helper = ""
 ) => {
   cy.get(`[data-cy="label-${cyParamName(paramName)}"]`).should(
     "have.text",
     paramName
   );
-  cy.get(commonWidgetSelector.parameterFxButton(paramName, ":eq(1)"))
+  cy.get(commonWidgetSelector.parameterFxButton(paramName, "> svg"))
     .scrollIntoView()
-    .should("have.text", "Fx")
     .click();
   if (defaultValue)
     cy.get(commonWidgetSelector.parameterInputField(paramName))
       .find("pre.CodeMirror-line")
-      .should("have.text", defaultValue);
+      .should("have.text", `${helper}${defaultValue}`);
   cy.get(commonWidgetSelector.parameterFxButton(paramName)).click();
   if (toggleModification == true)
     cy.get(commonWidgetSelector.parameterTogglebutton(paramName)).click();
diff --git a/docs/docs/setup/env-vars.md b/docs/docs/setup/env-vars.md
index 0299608bff..62e12a702b 100644
--- a/docs/docs/setup/env-vars.md
+++ b/docs/docs/setup/env-vars.md
@@ -325,4 +325,4 @@ By default, only embedding of public apps is permitted. By setting this variable
 
 :::caution
 The option is only available starting from ToolJet Enterprise Edition `2.8.0` or higher, and `2.10.0` for the Community edition and cloud version.
-:::
\ No newline at end of file
+:::
diff --git a/docs/versioned_docs/version-2.8.0/setup/env-vars.md b/docs/versioned_docs/version-2.8.0/setup/env-vars.md
index 6400f6f2a5..49e3d5fedd 100644
--- a/docs/versioned_docs/version-2.8.0/setup/env-vars.md
+++ b/docs/versioned_docs/version-2.8.0/setup/env-vars.md
@@ -325,4 +325,4 @@ By default, only embedding of public apps is permitted. By setting this variable
 
 :::caution
 The option is only available starting from ToolJet Enterprise Edition `2.8.0` or higher, and `2.10.0` for the Community edition and cloud version.
-:::
\ No newline at end of file
+:::
diff --git a/docs/versioned_docs/version-2.9.0/actions/generate-file.md b/docs/versioned_docs/version-2.9.0/actions/generate-file.md
index 82cab3a578..fc329c7f1e 100644
--- a/docs/versioned_docs/version-2.9.0/actions/generate-file.md
+++ b/docs/versioned_docs/version-2.9.0/actions/generate-file.md
@@ -49,4 +49,4 @@ To use the `Text` file format, the data field should contain a string.
 
 If you want to generate a text file based on an array of objects, you need to stringify the data before providing it. 
 
-For example, if you are using the table component to provide the data, you can enter **`{{JSON.stringify(components.table1.currentPageData)}}`** in the Data field.
\ No newline at end of file
+For example, if you are using the table component to provide the data, you can enter **`{{JSON.stringify(components.table1.currentPageData)}}`** in the Data field.
diff --git a/docs/versioned_docs/version-2.9.0/setup/env-vars.md b/docs/versioned_docs/version-2.9.0/setup/env-vars.md
index 6400f6f2a5..49e3d5fedd 100644
--- a/docs/versioned_docs/version-2.9.0/setup/env-vars.md
+++ b/docs/versioned_docs/version-2.9.0/setup/env-vars.md
@@ -325,4 +325,4 @@ By default, only embedding of public apps is permitted. By setting this variable
 
 :::caution
 The option is only available starting from ToolJet Enterprise Edition `2.8.0` or higher, and `2.10.0` for the Community edition and cloud version.
-:::
\ No newline at end of file
+:::
diff --git a/docs/versioned_docs/version-2.9.4/actions/generate-file.md b/docs/versioned_docs/version-2.9.4/actions/generate-file.md
index 82cab3a578..fc329c7f1e 100644
--- a/docs/versioned_docs/version-2.9.4/actions/generate-file.md
+++ b/docs/versioned_docs/version-2.9.4/actions/generate-file.md
@@ -49,4 +49,4 @@ To use the `Text` file format, the data field should contain a string.
 
 If you want to generate a text file based on an array of objects, you need to stringify the data before providing it. 
 
-For example, if you are using the table component to provide the data, you can enter **`{{JSON.stringify(components.table1.currentPageData)}}`** in the Data field.
\ No newline at end of file
+For example, if you are using the table component to provide the data, you can enter **`{{JSON.stringify(components.table1.currentPageData)}}`** in the Data field.
diff --git a/docs/versioned_docs/version-2.9.4/setup/env-vars.md b/docs/versioned_docs/version-2.9.4/setup/env-vars.md
index 6400f6f2a5..49e3d5fedd 100644
--- a/docs/versioned_docs/version-2.9.4/setup/env-vars.md
+++ b/docs/versioned_docs/version-2.9.4/setup/env-vars.md
@@ -325,4 +325,4 @@ By default, only embedding of public apps is permitted. By setting this variable
 
 :::caution
 The option is only available starting from ToolJet Enterprise Edition `2.8.0` or higher, and `2.10.0` for the Community edition and cloud version.
-:::
\ No newline at end of file
+:::
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index cf38665116..1ce034d415 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -59,7 +59,12 @@ module.exports = {
         'jest/no-identical-title': 'error',
         'jest/prefer-to-have-length': 'warn',
         'jest/valid-expect': 'error',
-        'import/no-unresolved': ['error', { ignore: ['^@/', 'react-hot-toast', 'react-i18next'] }],
+        'import/no-unresolved': [
+          'error',
+          {
+            ignore: ['^@/', 'react-hot-toast', 'react-i18next'],
+          },
+        ],
         'react/no-unknown-property': 'off',
       },
       settings: {
@@ -77,4 +82,5 @@ module.exports = {
       },
     },
   ],
+  extends: ['plugin:storybook/recommended'],
 };
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
new file mode 100644
index 0000000000..cb029aadbe
--- /dev/null
+++ b/frontend/.storybook/main.js
@@ -0,0 +1,32 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+import custom from '../webpack.config'
+const path = require('path');
+
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      module: { ...config.module, rules: [...config.module.rules, ...custom.module.rules] },
+      resolve : {
+        alias : {
+          '@': path.resolve(__dirname, 'src/')
+        }
+      }
+    };
+  },
+};
+export default config;
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
new file mode 100644
index 0000000000..a10ed0da6e
--- /dev/null
+++ b/frontend/.storybook/preview.js
@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react').Preview } */
+// import 'bootstrap/dist/css/bootstrap.min.css';
+import '../src/_styles/theme.scss';
+import './preview.scss'
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/frontend/.storybook/preview.scss b/frontend/.storybook/preview.scss
new file mode 100644
index 0000000000..0599e02f36
--- /dev/null
+++ b/frontend/.storybook/preview.scss
@@ -0,0 +1,2 @@
+@import '~bootstrap/scss/bootstrap';
+
diff --git a/frontend/.version b/frontend/.version
new file mode 100644
index 0000000000..d76bd2ba3e
--- /dev/null
+++ b/frontend/.version
@@ -0,0 +1 @@
+2.17.0
diff --git a/frontend/assets/images/avatar.png b/frontend/assets/images/avatar.png
new file mode 100644
index 0000000000..dea3e7aed1
Binary files /dev/null and b/frontend/assets/images/avatar.png differ
diff --git a/frontend/assets/images/icons/editor/left-sidebar/comments.svg b/frontend/assets/images/icons/editor/left-sidebar/comments.svg
new file mode 100644
index 0000000000..126eb76315
--- /dev/null
+++ b/frontend/assets/images/icons/editor/left-sidebar/comments.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1665 8.5H16.8332C20.9753 8.5 24.3332 11.8579 24.3332 16C24.3332 20.1421 20.9753 23.5 16.8332 23.5H10.9998C9.15889 23.5 7.6665 22.0076 7.6665 20.1667V16C7.6665 11.8579 11.0244 8.5 15.1665 8.5ZM12.6665 18.2917C12.3213 18.2917 12.0415 18.0118 12.0415 17.6667C12.0415 17.3215 12.3213 17.0417 12.6665 17.0417H15.9998C16.345 17.0417 16.6248 17.3215 16.6248 17.6667C16.6248 18.0118 16.345 18.2917 15.9998 18.2917H12.6665ZM12.6665 14.9583C12.3213 14.9583 12.0415 14.6785 12.0415 14.3333C12.0415 13.9882 12.3213 13.7083 12.6665 13.7083H19.3332C19.6783 13.7083 19.9582 13.9882 19.9582 14.3333C19.9582 14.6785 19.6783 14.9583 19.3332 14.9583H12.6665Z" fill="#C1C8CD"/>
+</svg>
diff --git a/frontend/assets/images/icons/editor/left-sidebar/debugger.svg b/frontend/assets/images/icons/editor/left-sidebar/debugger.svg
index 29017d7e5e..73b6d15966 100644
--- a/frontend/assets/images/icons/editor/left-sidebar/debugger.svg
+++ b/frontend/assets/images/icons/editor/left-sidebar/debugger.svg
@@ -1,3 +1,5 @@
-<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3633 10.7383C15.8328 10.7383 15.3241 10.949 14.9491 11.3241C14.574 11.6991 14.3633 12.2078 14.3633 12.7383H18.3633C18.3633 12.2078 18.1526 11.6991 17.7775 11.3241C17.4024 10.949 16.8937 10.7383 16.3633 10.7383ZM12.9304 14.7383C12.6003 15.3649 12.4062 16.0564 12.3633 16.7671V19.7383C12.3633 20.7991 12.7847 21.8166 13.5349 22.5667C14.0444 23.0763 14.6773 23.4341 15.3633 23.6113V18.7383C15.3633 18.186 15.811 17.7383 16.3633 17.7383C16.9156 17.7383 17.3633 18.186 17.3633 18.7383V23.6113C18.0493 23.4341 18.6822 23.0763 19.1917 22.5667C19.9419 21.8166 20.3633 20.7991 20.3633 19.7383V16.7671C20.3203 16.0564 20.1263 15.3649 19.7961 14.7383H12.9304ZM21.8879 14.5098C22.1596 15.2014 22.3205 15.9349 22.3618 16.6832C22.3628 16.7016 22.3633 16.7199 22.3633 16.7383H25.3633C25.9156 16.7383 26.3633 17.186 26.3633 17.7383C26.3633 18.2906 25.9156 18.7383 25.3633 18.7383H22.3633V19.7383C22.3633 20.257 22.2961 20.7689 22.1666 21.2621L24.8759 22.8797C25.3501 23.1628 25.505 23.7767 25.2219 24.2509C24.9388 24.7251 24.3249 24.88 23.8507 24.5969L21.3361 23.0956C21.123 23.4111 20.879 23.7078 20.6059 23.9809C19.4807 25.1061 17.9546 25.7383 16.3633 25.7383C14.772 25.7383 13.2459 25.1061 12.1206 23.9809C11.8476 23.7078 11.6035 23.4111 11.3905 23.0956L8.87589 24.5969C8.40169 24.88 7.78777 24.7251 7.50466 24.2509C7.22155 23.7767 7.37647 23.1628 7.85067 22.8797L10.56 21.2621C10.4305 20.7689 10.3633 20.257 10.3633 19.7383V18.7383H7.36328C6.811 18.7383 6.36328 18.2906 6.36328 17.7383C6.36328 17.186 6.811 16.7383 7.36328 16.7383H10.3633C10.3633 16.7199 10.3638 16.7016 10.3648 16.6832C10.4061 15.9349 10.567 15.2014 10.8386 14.5098L7.82423 12.5806C7.35905 12.2828 7.2233 11.6644 7.52101 11.1992C7.81872 10.7341 8.43716 10.5983 8.90233 10.896L11.933 12.8356C12.0654 12.7724 12.2121 12.7383 12.3633 12.7383C12.3633 11.6774 12.7847 10.66 13.5349 9.90985C14.285 9.15971 15.3024 8.73828 16.3633 8.73828C17.4241 8.73828 18.4416 9.15971 19.1917 9.90985C19.9419 10.66 20.3633 11.6774 20.3633 12.7383C20.5145 12.7383 20.6611 12.7724 20.7936 12.8356L23.8242 10.896C24.2894 10.5983 24.9078 10.7341 25.2056 11.1992C25.5033 11.6644 25.3675 12.2828 24.9023 12.5806L21.8879 14.5098Z" fill="#C1C8CD"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="#C1C8CD" xmlns="http://www.w3.org/2000/svg">
+<g id="Bug">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M16.5107 3.24181C16.5107 2.91246 16.397 2.5966 16.1946 2.36372C15.9922 2.13083 15.7177 2 15.4315 2C15.1452 2 14.8707 2.13083 14.6683 2.36372C14.4659 2.5966 14.3522 2.91246 14.3522 3.24181C14.3522 3.66095 14.2674 4.07434 14.1047 4.44935C13.942 4.82436 13.7058 5.15074 13.4147 5.40272C12.4801 5.19066 11.5184 5.19066 10.5837 5.40272C10.2929 5.15055 10.057 4.82409 9.89457 4.44909C9.73215 4.07409 9.64767 3.6608 9.64779 3.24181C9.64779 2.91246 9.53408 2.5966 9.33168 2.36372C9.12928 2.13083 8.85477 2 8.56853 2C8.28229 2 8.00778 2.13083 7.80538 2.36372C7.60298 2.5966 7.48927 2.91246 7.48927 3.24181C7.48971 4.36073 7.80441 5.44952 8.38646 6.34589C7.70144 6.79746 7.08449 7.37367 6.55954 8.05215C5.55234 7.19515 4.33194 6.73438 3.07926 6.73813C2.93753 6.73848 2.79725 6.77095 2.66643 6.83368C2.5356 6.89641 2.4168 6.98818 2.31679 7.10374C2.21679 7.2193 2.13755 7.35639 2.08359 7.50719C2.02964 7.65799 2.00202 7.81954 2.00233 7.98261C2.00263 8.14569 2.03085 8.3071 2.08537 8.45763C2.13989 8.60816 2.21965 8.74486 2.32008 8.85992C2.42051 8.97499 2.53966 9.06616 2.67072 9.12825C2.80178 9.19033 2.94218 9.2221 3.08391 9.22175C3.91711 9.21857 4.72645 9.54176 5.37879 10.1382C5.10952 10.8145 4.92034 11.5292 4.8163 12.2634H3.07926C2.79303 12.2634 2.51851 12.3943 2.31611 12.6271C2.11371 12.86 2 13.1759 2 13.5052C2 13.8346 2.11371 14.1504 2.31611 14.3833C2.51851 14.6162 2.79303 14.747 3.07926 14.747H4.78376C4.87364 15.5137 5.05339 16.2465 5.31061 16.9329C4.66963 17.4921 3.88673 17.7934 3.08236 17.7905C2.79613 17.7896 2.52128 17.9195 2.3183 18.1517C2.11532 18.3839 2.00083 18.6994 2 19.0287C1.99918 19.3581 2.1121 19.6743 2.31392 19.9079C2.51574 20.1414 2.78993 20.2732 3.07616 20.2741C4.28481 20.2786 5.46476 19.8505 6.45263 19.0492C7.13547 19.9753 7.98548 20.7189 8.9435 21.2285C9.90153 21.7381 10.9446 22.0014 12 22C13.0554 22.0014 14.0985 21.7381 15.0565 21.2285C16.0145 20.7189 16.8645 19.9753 17.5474 19.0492C18.5351 19.8508 19.7151 20.2789 20.9238 20.2741C21.2101 20.2732 21.4843 20.1414 21.6861 19.9079C21.8879 19.6743 22.0008 19.3581 22 19.0287C21.9992 18.6994 21.8847 18.3839 21.6817 18.1517C21.4787 17.9195 21.2039 17.7896 20.9176 17.7905C20.1133 17.7934 19.3304 17.4921 18.6894 16.9329C18.9466 16.2483 19.1264 15.5137 19.2162 14.747H20.9207C21.207 14.747 21.4815 14.6162 21.6839 14.3833C21.8863 14.1504 22 13.8346 22 13.5052C22 13.1759 21.8863 12.86 21.6839 12.6271C21.4815 12.3943 21.207 12.2634 20.9207 12.2634H19.1852C19.0817 11.5293 18.893 10.8145 18.6243 10.1382C19.2762 9.54215 20.085 9.21897 20.9176 9.22175C21.2039 9.22269 21.4787 9.09277 21.6817 8.86055C21.8847 8.62834 21.9992 8.31285 22 7.98351C22.0008 7.65416 21.8879 7.33792 21.6861 7.10437C21.4843 6.87082 21.2101 6.73908 20.9238 6.73813C19.6701 6.73361 18.4485 7.19442 17.4405 8.05215C16.9154 7.37431 16.2984 6.7987 15.6135 6.34767C16.1955 5.45124 16.5102 4.36071 16.5107 3.24181Z" fill="#11181C"/>
+</g>
 </svg>
diff --git a/frontend/assets/images/icons/editor/left-sidebar/file-accept.svg b/frontend/assets/images/icons/editor/left-sidebar/file-accept.svg
new file mode 100644
index 0000000000..2f13eacd3d
--- /dev/null
+++ b/frontend/assets/images/icons/editor/left-sidebar/file-accept.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.36621 3.33333V11.5C1.36621 12.6966 2.35306 13.6667 3.54967 13.6667C4.72788 13.6667 5.69954 12.7115 5.69954 11.5333C5.69954 11.2388 5.93833 11 6.23288 11H12.0329V3.33333C12.0329 2.22876 11.1374 1.33333 10.0329 1.33333H3.36621C2.26164 1.33333 1.36621 2.22876 1.36621 3.33333ZM9.02882 4.95705C9.23663 5.13889 9.25769 5.45477 9.07585 5.66259L7.16258 7.84918C6.75145 8.31904 6.04329 8.38196 5.55576 7.99194L4.38722 7.0571C4.17158 6.8846 4.13662 6.56995 4.30913 6.35432C4.48163 6.13869 4.79628 6.10373 5.01191 6.27623L6.18046 7.21107C6.2501 7.26679 6.35127 7.2578 6.41 7.19068L8.32327 5.00408C8.50512 4.79626 8.821 4.77521 9.02882 4.95705Z" fill="#C1C8CD"/>
+  <path d="M14.6173 12.6599C14.3236 13.8135 13.2779 14.6667 12.0329 14.6667H4.03288C5.27787 14.6667 6.32358 13.8135 6.61726 12.6599C6.7081 12.3031 6.99802 12 7.36621 12H14.0329C14.4011 12 14.7081 12.3031 14.6173 12.6599Z" fill="#C1C8CD"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/editor/left-sidebar/file-remove.svg b/frontend/assets/images/icons/editor/left-sidebar/file-remove.svg
new file mode 100644
index 0000000000..4f9b6babee
--- /dev/null
+++ b/frontend/assets/images/icons/editor/left-sidebar/file-remove.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.3335 3.33334V11.5C1.3335 12.6966 2.32034 13.6667 3.51696 13.6667C4.69517 13.6667 5.66683 12.7115 5.66683 11.5333C5.66683 11.2388 5.90561 11 6.20016 11H12.0002V3.33334C12.0002 2.22877 11.1047 1.33334 10.0002 1.33334H3.3335C2.22893 1.33334 1.3335 2.22877 1.3335 3.33334ZM7.72751 8.43442C7.92277 8.62969 8.23935 8.62969 8.43461 8.43442C8.62988 8.23916 8.62988 7.92258 8.43461 7.72732L7.37394 6.66665L8.43459 5.606C8.62985 5.41074 8.62985 5.09416 8.43458 4.8989C8.23932 4.70363 7.92274 4.70363 7.72748 4.8989L6.66684 5.95954L5.60619 4.89889C5.41092 4.70363 5.09434 4.70363 4.89908 4.89889C4.70382 5.09415 4.70382 5.41074 4.89908 5.606L5.95973 6.66665L4.89905 7.72732C4.70379 7.92259 4.70379 8.23917 4.89905 8.43443C5.09431 8.62969 5.4109 8.62969 5.60616 8.43443L6.66684 7.37375L7.72751 8.43442Z" fill="#C1C8CD"/>
+  <path d="M14.5845 12.6599C14.2909 13.8135 13.2452 14.6667 12.0002 14.6667H4.00016C5.24515 14.6667 6.29087 13.8135 6.58454 12.6599C6.67538 12.3031 6.96531 12 7.3335 12H14.0002C14.3684 12 14.6754 12.3031 14.5845 12.6599Z" fill="#C1C8CD"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/editor/left-sidebar/inspect.svg b/frontend/assets/images/icons/editor/left-sidebar/inspect.svg
index dbd16cbc36..b3a1ee96bd 100644
--- a/frontend/assets/images/icons/editor/left-sidebar/inspect.svg
+++ b/frontend/assets/images/icons/editor/left-sidebar/inspect.svg
@@ -1,4 +1,3 @@
-<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.66177 9.5081C9.93805 9.23612 10.3466 9.14834 10.7102 9.28284L22.4972 13.6428C22.5151 13.6495 22.5328 13.6566 22.5503 13.6642C22.7905 13.769 22.9952 13.9413 23.1395 14.1601C23.2838 14.379 23.3615 14.6349 23.3633 14.8971L23.3634 14.9104C23.3616 15.1725 23.2838 15.4285 23.1395 15.6473C22.9952 15.8661 22.7905 16.0384 22.5503 16.1433L22.5348 16.1498L18.1104 17.9928L16.0893 22.4284L16.08 22.4481C15.9677 22.6809 15.7917 22.8771 15.5724 23.0139C15.3547 23.1496 15.1032 23.2213 14.8468 23.2207C14.5904 23.221 14.339 23.149 14.1216 23.0131C13.9024 22.876 13.7267 22.6796 13.6149 22.4466C13.5991 22.4138 13.5852 22.3802 13.5731 22.3459L9.42009 10.5529C9.29131 10.1872 9.3855 9.78007 9.66177 9.5081ZM14.8468 23.2207C14.8448 23.2207 14.8429 23.2207 14.8409 23.2207L14.8473 22.2207L14.8527 23.2207C14.8507 23.2207 14.8487 23.2207 14.8468 23.2207ZM12.014 11.8975L14.9243 20.1617L16.4533 16.8061C16.558 16.5763 16.7457 16.3947 16.9788 16.2976L20.2385 14.9398L12.014 11.8975Z" fill="#C1C8CD"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1562 17.0136C17.5467 16.6231 18.1799 16.6231 18.5704 17.0136L23.0704 21.5136C23.4609 21.9041 23.4609 22.5373 23.0704 22.9278C22.6799 23.3184 22.0467 23.3184 21.6562 22.9278L17.1562 18.4278C16.7657 18.0373 16.7657 17.4041 17.1562 17.0136Z" fill="#C1C8CD"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9063 17.4546L22.7631 16.169C24.8565 15.4712 24.8565 12.51 22.7631 11.8122L10.6928 7.7888C8.89773 7.19043 7.18995 8.89822 7.78831 10.6933L11.8117 22.7636C12.5095 24.857 15.4707 24.857 16.1685 22.7636L17.4541 18.9068C17.6826 18.2212 18.2207 17.6831 18.9063 17.4546Z" fill="#C1C8CD"/>
 </svg>
diff --git a/frontend/assets/images/icons/editor/left-sidebar/page.svg b/frontend/assets/images/icons/editor/left-sidebar/page.svg
index 651c4fa552..de85014037 100644
--- a/frontend/assets/images/icons/editor/left-sidebar/page.svg
+++ b/frontend/assets/images/icons/editor/left-sidebar/page.svg
@@ -1,3 +1,4 @@
-<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3633 8.73828C11.0981 8.73828 10.8437 8.84364 10.6562 9.03117C10.4686 9.21871 10.3633 9.47306 10.3633 9.73828V23.7383C10.3633 24.0035 10.4686 24.2579 10.6562 24.4454C10.8437 24.6329 11.0981 24.7383 11.3633 24.7383H21.3633C21.6285 24.7383 21.8829 24.6329 22.0704 24.4454C22.2579 24.2579 22.3633 24.0035 22.3633 23.7383V13.7383H19.3633C18.8328 13.7383 18.3241 13.5276 17.9491 13.1525C17.574 12.7774 17.3633 12.2687 17.3633 11.7383V8.73828H11.3633ZM19.3633 10.1525L20.9491 11.7383H19.3633V10.1525ZM9.24196 7.61696C9.80457 7.05435 10.5676 6.73828 11.3633 6.73828H18.3633C18.6285 6.73828 18.8829 6.84364 19.0704 7.03117L24.0704 12.0312C24.2579 12.2187 24.3633 12.4731 24.3633 12.7383V23.7383C24.3633 24.5339 24.0472 25.297 23.4846 25.8596C22.922 26.4222 22.1589 26.7383 21.3633 26.7383H11.3633C10.5676 26.7383 9.80457 26.4222 9.24196 25.8596C8.67935 25.297 8.36328 24.5339 8.36328 23.7383V9.73828C8.36328 8.94263 8.67935 8.17957 9.24196 7.61696ZM12.3633 17.7383C12.3633 17.186 12.811 16.7383 13.3633 16.7383H19.3633C19.9156 16.7383 20.3633 17.186 20.3633 17.7383C20.3633 18.2906 19.9156 18.7383 19.3633 18.7383H13.3633C12.811 18.7383 12.3633 18.2906 12.3633 17.7383ZM12.3633 21.7383C12.3633 21.186 12.811 20.7383 13.3633 20.7383H19.3633C19.9156 20.7383 20.3633 21.186 20.3633 21.7383C20.3633 22.2906 19.9156 22.7383 19.3633 22.7383H13.3633C12.811 22.7383 12.3633 22.2906 12.3633 21.7383Z" fill="#C1C8CD"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70801 10.167C7.70801 8.78628 8.8273 7.66699 10.208 7.66699H18.5413C19.9221 7.66699 21.0413 8.78628 21.0413 10.167V19.7503H13.7913C13.4232 19.7503 13.1247 20.0488 13.1247 20.417C13.1247 21.8898 11.9101 23.0837 10.4373 23.0837C8.94156 23.0837 7.70801 21.8711 7.70801 20.3753V10.167ZM11.0413 11.2087C10.6962 11.2087 10.4163 11.4885 10.4163 11.8337C10.4163 12.1788 10.6962 12.4587 11.0413 12.4587H17.708C18.0532 12.4587 18.333 12.1788 18.333 11.8337C18.333 11.4885 18.0532 11.2087 17.708 11.2087H11.0413ZM10.4163 16.0003C10.4163 15.6551 10.6962 15.3753 11.0413 15.3753H14.3747C14.7199 15.3753 14.9997 15.6551 14.9997 16.0003C14.9997 16.3455 14.7199 16.6253 14.3747 16.6253H11.0413C10.6962 16.6253 10.4163 16.3455 10.4163 16.0003Z" fill="#C1C8CD"/>
+<path d="M24.2718 21.8252C23.9047 23.2672 22.5976 24.3337 21.0413 24.3337H11.0413C12.5976 24.3337 13.9047 23.2672 14.2718 21.8252C14.3854 21.3792 14.7478 21.0003 15.208 21.0003H23.5413C24.0016 21.0003 24.3854 21.3792 24.2718 21.8252Z" fill="#C1C8CD"/>
 </svg>
diff --git a/frontend/assets/images/icons/editor/left-sidebar/settings.svg b/frontend/assets/images/icons/editor/left-sidebar/settings.svg
index d924977414..556b6e8a3f 100644
--- a/frontend/assets/images/icons/editor/left-sidebar/settings.svg
+++ b/frontend/assets/images/icons/editor/left-sidebar/settings.svg
@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.832 9.91667C12.832 9.27233 13.3544 8.75 13.9987 8.75C14.643 8.75 15.1654 9.27233 15.1654 9.91667C15.1654 10.561 14.643 11.0833 13.9987 11.0833C13.3544 11.0833 12.832 10.561 12.832 9.91667ZM12.832 14C12.832 13.3557 13.3544 12.8333 13.9987 12.8333C14.643 12.8333 15.1654 13.3557 15.1654 14C15.1654 14.6443 14.643 15.1667 13.9987 15.1667C13.3544 15.1667 12.832 14.6443 12.832 14ZM12.832 18.0833C12.832 17.439 13.3544 16.9167 13.9987 16.9167C14.643 16.9167 15.1654 17.439 15.1654 18.0833C15.1654 18.7277 14.643 19.25 13.9987 19.25C13.3544 19.25 12.832 18.7277 12.832 18.0833Z" fill="#C1C8CD"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.116 7.66406H16.8841C17.8606 7.66406 18.6522 8.41045 18.6522 9.33116C18.6522 10.3848 19.7795 11.0546 20.7049 10.5509L20.7989 10.4997C21.6446 10.0394 22.726 10.3126 23.2142 11.1099L24.0983 12.5537C24.5866 13.351 24.2968 14.3706 23.4511 14.831C22.5253 15.3349 22.5253 16.6641 23.4511 17.1681C24.2968 17.6285 24.5866 18.648 24.0983 19.4454L23.2142 20.8891C22.726 21.6865 21.6446 21.9597 20.7989 21.4993L20.7049 21.4482C19.7795 20.9444 18.6522 21.6143 18.6522 22.6679C18.6522 23.5886 17.8606 24.335 16.8841 24.335H15.116C14.1394 24.335 13.3478 23.5886 13.3478 22.6679C13.3478 21.6143 12.2205 20.9444 11.2951 21.4482L11.2011 21.4993C10.3554 21.9597 9.27406 21.6865 8.7858 20.8891L7.90173 19.4454C7.41347 18.648 7.70323 17.6285 8.54891 17.1681C9.47475 16.6641 9.47475 15.3349 8.54892 14.831C7.70323 14.3706 7.41348 13.351 7.90173 12.5537L8.7858 11.1099C9.27406 10.3126 10.3554 10.0394 11.2011 10.4997L11.2951 10.5509C12.2205 11.0546 13.3478 10.3848 13.3478 9.33116C13.3478 8.41045 14.1394 7.66406 15.116 7.66406ZM16 18.778C17.5345 18.778 18.7785 17.5341 18.7785 15.9995C18.7785 14.465 17.5345 13.221 16 13.221C14.4655 13.221 13.2215 14.465 13.2215 15.9995C13.2215 17.5341 14.4655 18.778 16 18.778Z" fill="#C1C8CD"/>
 </svg>
diff --git a/frontend/assets/images/icons/editor/play.svg b/frontend/assets/images/icons/editor/play.svg
index a2d3b25e89..4accfa58d5 100644
--- a/frontend/assets/images/icons/editor/play.svg
+++ b/frontend/assets/images/icons/editor/play.svg
@@ -1,3 +1,3 @@
 <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.495 6.87126L1.54125 11.4863C0.86625 11.8775 0 11.4038 0 10.615V1.38501C0 0.597508 0.865 0.122508 1.54125 0.515008L9.495 5.13001C9.64855 5.21766 9.77618 5.34437 9.86496 5.49727C9.95373 5.65017 10.0005 5.82383 10.0005 6.00063C10.0005 6.17744 9.95373 6.3511 9.86496 6.504C9.77618 6.6569 9.64855 6.7836 9.495 6.87126Z" fill="#292D37"/>
+<path d="M9.495 6.87126L1.54125 11.4863C0.86625 11.8775 0 11.4038 0 10.615V1.38501C0 0.597508 0.865 0.122508 1.54125 0.515008L9.495 5.13001C9.64855 5.21766 9.77618 5.34437 9.86496 5.49727C9.95373 5.65017 10.0005 5.82383 10.0005 6.00063C10.0005 6.17744 9.95373 6.3511 9.86496 6.504C9.77618 6.6569 9.64855 6.7836 9.495 6.87126Z" fill="#C1C8CD"/>
 </svg>
diff --git a/frontend/assets/images/icons/eye1.svg b/frontend/assets/images/icons/eye1.svg
new file mode 100644
index 0000000000..e5cce5db80
--- /dev/null
+++ b/frontend/assets/images/icons/eye1.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
+<path d="M13.25 3.53894C13.25 3.12473 12.9142 2.78894 12.5 2.78894C12.0858 2.78894 11.75 3.12473 11.75 3.53894V5.53894C11.75 5.95315 12.0858 6.28894 12.5 6.28894C12.9142 6.28894 13.25 5.95315 13.25 5.53894V3.53894Z" fill="#11181C"/>
+<path d="M4.03033 6.00861C3.73744 5.71572 3.26256 5.71572 2.96967 6.00861C2.67678 6.3015 2.67678 6.77638 2.96967 7.06927L4.46967 8.56927C4.76256 8.86216 5.23744 8.86216 5.53033 8.56927C5.82322 8.27638 5.82322 7.8015 5.53033 7.50861L4.03033 6.00861Z" fill="#11181C"/>
+<path d="M22.0303 7.06927C22.3232 6.77638 22.3232 6.3015 22.0303 6.00861C21.7374 5.71572 21.2626 5.71572 20.9697 6.00861L19.4697 7.50861C19.1768 7.8015 19.1768 8.27638 19.4697 8.56927C19.7626 8.86216 20.2374 8.86216 20.5303 8.56927L22.0303 7.06927Z" fill="#11181C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3772 13.1102C22.8743 14.5433 22.8743 17.0349 21.3772 18.4679C19.3134 20.4436 16.1042 22.7891 12.5 22.7891C8.8958 22.7891 5.68661 20.4436 3.62281 18.4679C2.12573 17.0349 2.12573 14.5433 3.62281 13.1102C5.68661 11.1346 8.8958 8.78906 12.5 8.78906C16.1042 8.78906 19.3134 11.1346 21.3772 13.1102ZM15.5 15.7891C15.5 17.4459 14.1568 18.7891 12.5 18.7891C10.8431 18.7891 9.49997 17.4459 9.49997 15.7891C9.49997 14.1322 10.8431 12.7891 12.5 12.7891C14.1568 12.7891 15.5 14.1322 15.5 15.7891Z" fill="#11181C"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/filedownload.svg b/frontend/assets/images/icons/filedownload.svg
new file mode 100644
index 0000000000..65c519d092
--- /dev/null
+++ b/frontend/assets/images/icons/filedownload.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5.78906V18.0391C2.5 19.834 3.98027 21.2891 5.77519 21.2891C7.5425 21.2891 9 19.8564 9 18.0891C9 17.6472 9.35817 17.2891 9.8 17.2891H18.5V5.78906C18.5 4.13221 17.1569 2.78906 15.5 2.78906H5.5C3.84315 2.78906 2.5 4.13221 2.5 5.78906ZM9.75 11.9609C9.70334 11.9258 9.65858 11.887 9.61612 11.8446L8.03033 10.2588C7.73744 9.9659 7.26256 9.9659 6.96967 10.2588C6.67678 10.5517 6.67678 11.0266 6.96967 11.3195L8.55546 12.9052C9.6294 13.9792 11.3706 13.9792 12.4445 12.9052L14.0303 11.3195C14.3232 11.0266 14.3232 10.5517 14.0303 10.2588C13.7374 9.9659 13.2626 9.9659 12.9697 10.2588L11.3839 11.8446C11.3414 11.887 11.2967 11.9258 11.25 11.9609V7.78912C11.25 7.37491 10.9142 7.03912 10.5 7.03912C10.0858 7.03912 9.75 7.37491 9.75 7.78912V11.9609Z" fill="#11181C"/>
+<path d="M22.3766 19.7789C21.9361 21.5093 20.3675 22.7891 18.5 22.7891H6.5C8.36748 22.7891 9.93606 21.5093 10.3766 19.7789C10.5128 19.2437 10.9477 18.7891 11.5 18.7891H21.5C22.0523 18.7891 22.5128 19.2437 22.3766 19.7789Z" fill="#11181C"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/plus.svg b/frontend/assets/images/icons/plus.svg
index e3bcafdc9b..05694e4ff2 100644
--- a/frontend/assets/images/icons/plus.svg
+++ b/frontend/assets/images/icons/plus.svg
@@ -1,5 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-   <line x1="12" y1="5" x2="12" y2="19"></line>
-   <line x1="5" y1="12" x2="19" y2="12"></line>
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
+   <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 4.78906C13.0523 4.78906 13.5 5.23678 13.5 5.78906V11.7891H19.5C20.0523 11.7891 20.5 12.2368 20.5 12.7891C20.5 13.3413 20.0523 13.7891 19.5 13.7891H13.5V19.7891C13.5 20.3413 13.0523 20.7891 12.5 20.7891C11.9477 20.7891 11.5 20.3413 11.5 19.7891V13.7891H5.5C4.94772 13.7891 4.5 13.3413 4.5 12.7891C4.5 12.2368 4.94772 11.7891 5.5 11.7891H11.5V5.78906C11.5 5.23678 11.9477 4.78906 12.5 4.78906Z" fill="#11181C"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/Group.svg b/frontend/assets/images/icons/widgets/Group.svg
deleted file mode 100644
index 2f7bbf1be7..0000000000
--- a/frontend/assets/images/icons/widgets/Group.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.71429 0C4.19876 0 2.74531 0.602039 1.67368 1.67368C0.602039 2.74531 0 4.19876 0 5.71429C0 7.22981 0.602039 8.68326 1.67368 9.7549C2.74531 10.8265 4.19876 11.4286 5.71429 11.4286H14.2857C15.8012 11.4286 17.2547 10.8265 18.3263 9.7549C19.398 8.68326 20 7.22981 20 5.71429C20 4.19876 19.398 2.74531 18.3263 1.67368C17.2547 0.602039 15.8012 0 14.2857 0H5.71429ZM14.2857 8.57143C13.528 8.57143 12.8012 8.27041 12.2654 7.73459C11.7296 7.19877 11.4286 6.47205 11.4286 5.71429C11.4286 4.95652 11.7296 4.2298 12.2654 3.69398C12.8012 3.15816 13.528 2.85714 14.2857 2.85714C15.0435 2.85714 15.7702 3.15816 16.306 3.69398C16.8418 4.2298 17.1429 4.95652 17.1429 5.71429C17.1429 6.47205 16.8418 7.19877 16.306 7.73459C15.7702 8.27041 15.0435 8.57143 14.2857 8.57143Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/boundedbox.jsx b/frontend/assets/images/icons/widgets/boundedbox.jsx
new file mode 100644
index 0000000000..f76b9a40f9
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/boundedbox.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const BoundedBox = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M7.603 8.286A4.714 4.714 0 002.889 13v22a4.714 4.714 0 004.714 4.714h34.571A4.714 4.714 0 0046.89 35V13a4.714 4.714 0 00-4.715-4.714H7.603z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M12.526 15.75c1.085 0 1.964.88 1.964 1.964v12.572a1.964 1.964 0 01-3.928 0V17.714c0-1.084.879-1.964 1.964-1.964zm12.363 0c1.084 0 1.964.88 1.964 1.964v12.572a1.964 1.964 0 11-3.929 0V17.714c0-1.084.88-1.964 1.965-1.964zm14.326 1.964a1.964 1.964 0 10-3.928 0v12.572a1.964 1.964 0 103.928 0V17.714z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default BoundedBox;
diff --git a/frontend/assets/images/icons/widgets/boundedbox.svg b/frontend/assets/images/icons/widgets/boundedbox.svg
deleted file mode 100644
index e689103e73..0000000000
--- a/frontend/assets/images/icons/widgets/boundedbox.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg fill="#000000" width="44" height="44" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" stroke="#2c3e50">
-  <path d="M208,92a12.01343,12.01343,0,0,0,12-12V48a12.01343,12.01343,0,0,0-12-12H176a12.01343,12.01343,0,0,0-12,12V60H92V48A12.01343,12.01343,0,0,0,80,36H48A12.01343,12.01343,0,0,0,36,48V80A12.01343,12.01343,0,0,0,48,92H60v72H48a12.01343,12.01343,0,0,0-12,12v32a12.01343,12.01343,0,0,0,12,12H80a12.01343,12.01343,0,0,0,12-12V196h72v12a12.01343,12.01343,0,0,0,12,12h32a12.01343,12.01343,0,0,0,12-12V176a12.01343,12.01343,0,0,0-12-12H196V92ZM172,48a4.00427,4.00427,0,0,1,4-4h32a4.00427,4.00427,0,0,1,4,4V80a4.00427,4.00427,0,0,1-4,4H176a4.00427,4.00427,0,0,1-4-4ZM44,80V48a4.00427,4.00427,0,0,1,4-4H80a4.00427,4.00427,0,0,1,4,4V80a4.00427,4.00427,0,0,1-4,4H48A4.00427,4.00427,0,0,1,44,80ZM84,208a4.00427,4.00427,0,0,1-4,4H48a4.00427,4.00427,0,0,1-4-4V176a4.00427,4.00427,0,0,1,4-4H80a4.00427,4.00427,0,0,1,4,4Zm128-32v32a4.00427,4.00427,0,0,1-4,4H176a4.00427,4.00427,0,0,1-4-4V176a4.00427,4.00427,0,0,1,4-4h32A4.00427,4.00427,0,0,1,212,176Zm-24-12H176a12.01343,12.01343,0,0,0-12,12v12H92V176a12.01343,12.01343,0,0,0-12-12H68V92H80A12.01343,12.01343,0,0,0,92,80V68h72V80a12.01343,12.01343,0,0,0,12,12h12Z"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/button.jsx b/frontend/assets/images/icons/widgets/button.jsx
new file mode 100644
index 0000000000..cab3c2eedb
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/button.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Button = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M2.889 16.714A4.714 4.714 0 017.603 12h34.571a4.714 4.714 0 014.715 4.714v14.572A4.714 4.714 0 0142.174 36H7.603a4.714 4.714 0 01-4.714-4.714V16.714z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M18.603 24a3.143 3.143 0 11-6.286 0 3.143 3.143 0 016.286 0zm9.429 0a3.143 3.143 0 11-6.286 0 3.143 3.143 0 016.286 0zm6.285 3.143a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Button;
diff --git a/frontend/assets/images/icons/widgets/button.svg b/frontend/assets/images/icons/widgets/button.svg
deleted file mode 100644
index 376928f3d4..0000000000
--- a/frontend/assets/images/icons/widgets/button.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1_27)">
-<path d="M15.6646 20.0731C15.3499 20.0716 15.4998 20.0723 15.4998 20.0723C15.3826 20.0718 15.2733 20.0712 15.2733 20.0712L14.9998 20.07L4.99995 20.0232L4.95034 20.0229C4.95034 20.0229 4.86323 20.0225 4.75385 20.022C4.62105 20.0214 4.5594 20.0211 4.3936 20.0203C4.22781 20.0196 3.99996 20.0185 3.99996 20.0185L3.8984 20.018L3.74996 20.0173L2.49998 20.0115C1.83699 20.0084 1.20241 19.7245 0.735853 19.2222C0.269398 18.7199 0.00917443 18.0404 0.0124838 17.3331L0.0811132 2.66664C0.0844224 1.95945 0.350994 1.28239 0.822129 0.784433C1.29336 0.28658 1.93057 0.00859812 2.59356 0.0117005L17.5934 0.0818897C18.2564 0.0849922 18.891 0.368925 19.3575 0.871166C19.824 1.37351 20.0842 2.05303 20.0809 2.76022L20.0123 17.4267C20.009 18.134 19.7424 18.811 19.2712 19.3089C18.8 19.8068 18.1628 20.0848 17.4998 20.0817L16.2498 20.0758L15.9998 20.0746C15.9998 20.0746 15.8303 20.0739 15.6646 20.0731ZM17.501 15.088C18.2081 15.0877 18.788 14.5275 18.8126 13.8208L18.8275 13.3941L18.8309 2.75438C18.8326 2.40078 18.7025 2.06097 18.4692 1.80985C18.236 1.55872 17.9187 1.41676 17.5872 1.41521L2.58732 1.34502C2.25583 1.34347 1.93717 1.48246 1.70161 1.73138C1.46604 1.98031 1.33275 2.31889 1.3311 2.67249L1.26918 13.3996L1.26909 13.6913C1.26888 14.4171 1.85728 15.0055 2.58304 15.0053V15.0053L9.5 15L17.501 15.088V15.088Z" fill="#61656F"/>
-<path d="M9.44886 7.98864C9.44886 6.08523 8.26704 5 6.72443 5C5.17329 5 4 6.08523 4 7.98864C4 9.88353 5.17329 10.9772 6.72443 10.9772C8.26704 10.9772 9.44886 9.89205 9.44886 7.98864ZM8.2017 7.98864C8.2017 9.22159 7.61648 9.88921 6.72443 9.88921C5.82954 9.88921 5.24716 9.22159 5.24716 7.98864C5.24716 6.75568 5.82954 6.08807 6.72443 6.08807C7.61648 6.08807 8.2017 6.75568 8.2017 7.98864ZM10.2601 10.8977L11.4902 10.8977L11.4902 9.24432L12.0953 8.50568L13.6891 10.8977L15.1607 10.8977L12.976 7.68466L15.1351 5.07955L13.6607 5.07955L11.5669 7.64489L11.4902 7.64489L11.4902 5.07955L10.2601 5.07955L10.2601 10.8977Z" fill="#61656F"/>
-</g>
-<defs>
-<clipPath id="clip0_1_27">
-<rect width="20" height="20" fill="white" transform="translate(19.9998 20.0934) rotate(-179.732)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/buttongroup.jsx b/frontend/assets/images/icons/widgets/buttongroup.jsx
new file mode 100644
index 0000000000..c29c05d530
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/buttongroup.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ButtonGroup = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M2.889 16.964c0-2.603 1.558-4.714 3.48-4.714h14.038c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H6.37c-1.922 0-3.48-2.11-3.48-4.714V16.964zM25.893 16.964c0-2.603 1.558-4.714 3.48-4.714h14.034c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H29.373c-1.922 0-3.48-2.11-3.48-4.714V16.964z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M36.429 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286zM13.511 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default ButtonGroup;
diff --git a/frontend/assets/images/icons/widgets/buttongroup.svg b/frontend/assets/images/icons/widgets/buttongroup.svg
deleted file mode 100644
index 37ea972271..0000000000
--- a/frontend/assets/images/icons/widgets/buttongroup.svg
+++ /dev/null
@@ -1,48 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 591.6 591.6" style="enable-background:new 0 0 591.6 591.6;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M540.6,0H153c-28.152,0-51,22.848-51,51v51H51c-28.152,0-51,22.848-51,51v387.6c0,28.152,22.848,51,51,51h387.6
-			c28.152,0,51-22.848,51-51v-51h51c28.152,0,51-22.848,51-51V51C591.6,22.848,568.752,0,540.6,0z M469.2,540.6
-			c0,16.932-13.668,30.6-30.6,30.6H51c-16.932,0-30.6-13.668-30.6-30.6V153c0-16.932,13.668-30.6,30.6-30.6h387.6
-			c16.932,0,30.6,13.668,30.6,30.6V540.6z M571.2,438.6c0,16.932-13.668,30.6-30.6,30.6h-51V153c0-28.152-22.848-51-51-51H122.4V51
-			c0-16.932,13.668-30.6,30.6-30.6h387.6c16.932,0,30.6,13.668,30.6,30.6V438.6z"/>
-		<path d="M193.8,147.9H51c-2.856,0-5.1,2.244-5.1,5.1v142.8c0,2.856,2.244,5.1,5.1,5.1s5.1-2.244,5.1-5.1V158.1h137.7
-			c2.856,0,5.1-2.244,5.1-5.1S196.656,147.9,193.8,147.9z"/>
-		<path d="M438.6,392.7c-2.856,0-5.1,2.244-5.1,5.1v137.7H295.8c-2.856,0-5.1,2.244-5.1,5.1c0,2.856,2.244,5.1,5.1,5.1h142.8
-			c2.856,0,5.1-2.244,5.1-5.1V397.8C443.7,394.944,441.456,392.7,438.6,392.7z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/calendar.jsx b/frontend/assets/images/icons/widgets/calendar.jsx
new file mode 100644
index 0000000000..a728caf1b6
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/calendar.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Calendar = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox={viewBox}>
+    <path fill={fill} d="M2.889 16.476V40.5a5.5 5.5 0 005.5 5.5h33a5.5 5.5 0 005.5-5.5V16.476h-44z"></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M13.889 2a3.143 3.143 0 013.143 3.143v1.571h15.714V5.143a3.143 3.143 0 016.286 0v1.571h2.357c2.788 0 5.5 2.08 5.5 5.174v4.604H2.889v-4.604c0-3.093 2.711-5.174 5.5-5.174h2.357V5.143A3.143 3.143 0 0113.889 2zM24.888 21.967c1.085 0 1.965.88 1.965 1.965v12.177h2.75a1.964 1.964 0 010 3.929h-9.429a1.964 1.964 0 110-3.929h2.75v-6.905a5.5 5.5 0 01-1.571.227h-1.179a1.964 1.964 0 010-3.928h1.179c.867 0 1.571-.704 1.571-1.571 0-1.085.88-1.965 1.964-1.965z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Calendar;
diff --git a/frontend/assets/images/icons/widgets/calendar.svg b/frontend/assets/images/icons/widgets/calendar.svg
deleted file mode 100644
index 598afe2fd1..0000000000
--- a/frontend/assets/images/icons/widgets/calendar.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.05625 14.61V7.9425H7.265C6.6983 8.24459 6.15062 8.58105 5.625 8.95V9.81875C6.09375 9.4975 6.83625 9.04375 7.1975 8.8475H7.2125V14.61H8.05625V14.61ZM9.54125 12.9788C9.6 13.7788 10.2838 14.7363 11.67 14.7363C13.2425 14.7363 14.17 13.4038 14.17 11.1475C14.17 8.73 13.1937 7.8125 11.7287 7.8125C10.5712 7.8125 9.4825 8.6525 9.4825 10.0738C9.4825 11.5238 10.5125 12.2863 11.5775 12.2863C12.51 12.2863 13.115 11.8162 13.3062 11.2987H13.34C13.335 12.9437 12.7637 14.0038 11.7087 14.0038C10.8787 14.0038 10.4488 13.4413 10.3963 12.9788H9.54125V12.9788ZM13.2325 10.0825C13.2325 10.9525 12.5337 11.5575 11.7525 11.5575C11.0013 11.5575 10.3225 11.0787 10.3225 10.0575C10.3225 9.02875 11.05 8.545 11.7825 8.545C12.5737 8.545 13.2325 9.0425 13.2325 10.0825Z" fill="#61656F"/>
-<path d="M4.375 0C4.54076 0 4.69973 0.065848 4.81694 0.183058C4.93415 0.300269 5 0.45924 5 0.625V1.25H15V0.625C15 0.45924 15.0658 0.300269 15.1831 0.183058C15.3003 0.065848 15.4592 0 15.625 0C15.7908 0 15.9497 0.065848 16.0669 0.183058C16.1842 0.300269 16.25 0.45924 16.25 0.625V1.25H17.5C18.163 1.25 18.7989 1.51339 19.2678 1.98223C19.7366 2.45107 20 3.08696 20 3.75V17.5C20 18.163 19.7366 18.7989 19.2678 19.2678C18.7989 19.7366 18.163 20 17.5 20H2.5C1.83696 20 1.20107 19.7366 0.732233 19.2678C0.263392 18.7989 0 18.163 0 17.5V3.75C0 3.08696 0.263392 2.45107 0.732233 1.98223C1.20107 1.51339 1.83696 1.25 2.5 1.25H3.75V0.625C3.75 0.45924 3.81585 0.300269 3.93306 0.183058C4.05027 0.065848 4.20924 0 4.375 0V0ZM1.25 5V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H17.5C17.8315 18.75 18.1495 18.6183 18.3839 18.3839C18.6183 18.1495 18.75 17.8315 18.75 17.5V5H1.25Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/chart.jsx b/frontend/assets/images/icons/widgets/chart.jsx
new file mode 100644
index 0000000000..72582a9084
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/chart.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Chart = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M34.3224 2.69424C34.9975 2.01676 36.0151 1.81372 36.8986 2.1801L43.5954 4.95701C44.7949 5.4544 45.3675 6.82726 44.8768 8.02956L42.1445 14.7248C41.7835 15.6094 40.9248 16.1891 39.9693 16.1934C39.014 16.1977 38.1503 15.6256 37.7815 14.7442L36.7003 12.1611L9.51308 23.7811C8.31427 24.2935 6.92706 23.737 6.41468 22.5382C5.9023 21.3394 6.45875 19.9522 7.65759 19.4398L34.8773 7.80587L33.8168 5.27207C33.4475 4.38971 33.6472 3.37172 34.3224 2.69424Z"
+      fill="#3E63DD"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M42.9868 19.2466C43.8216 19.2466 44.6223 19.5782 45.2124 20.1685C45.8026 20.7587 46.1343 21.5593 46.1343 22.394V44.4263C46.1343 45.2953 45.4296 46 44.5606 46H36.6919C35.8229 46 35.1182 45.2953 35.1182 44.4263V22.394C35.1182 21.5593 35.4499 20.7587 36.0401 20.1685C36.6302 19.5782 37.4309 19.2466 38.2656 19.2466H42.9868ZM27.2495 23.9678C28.0843 23.9678 28.8849 24.2994 29.4751 24.8897C30.0654 25.4799 30.397 26.2805 30.397 27.1152V44.4263C30.397 45.2953 29.6924 46 28.8233 46H20.9546C20.0855 46 19.3809 45.2953 19.3809 44.4263V27.1152C19.3809 26.2805 19.7125 25.4799 20.3027 24.8897C20.893 24.2994 21.6936 23.9678 22.5283 23.9678H27.2495ZM13.7378 29.6109C13.1475 29.0206 12.347 28.689 11.5122 28.689H6.79102C5.95626 28.689 5.15569 29.0206 4.56542 29.6109C3.97516 30.2011 3.64355 31.0017 3.64355 31.8364V44.4263C3.64355 45.2953 4.34814 46 5.21729 46H13.0859C13.9551 46 14.6597 45.2953 14.6597 44.4263V31.8364C14.6597 31.0017 14.3281 30.2011 13.7378 29.6109Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Chart;
diff --git a/frontend/assets/images/icons/widgets/chart.svg b/frontend/assets/images/icons/widgets/chart.svg
deleted file mode 100644
index 7884c642d9..0000000000
--- a/frontend/assets/images/icons/widgets/chart.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.3438 15.4688H3.90625V3.28125C3.90625 3.19531 3.83594 3.125 3.75 3.125H2.65625C2.57031 3.125 2.5 3.19531 2.5 3.28125V16.7188C2.5 16.8047 2.57031 16.875 2.65625 16.875H17.3438C17.4297 16.875 17.5 16.8047 17.5 16.7188V15.625C17.5 15.5391 17.4297 15.4688 17.3438 15.4688ZM5.3125 14.2188H15.7812C15.8672 14.2188 15.9375 14.1484 15.9375 14.0625V5.54688C15.9375 5.40625 15.7676 5.33789 15.6699 5.43555L11.5625 9.54297L9.11328 7.12109C9.08391 7.09202 9.04426 7.0757 9.00293 7.0757C8.9616 7.0757 8.92194 7.09202 8.89258 7.12109L5.20117 10.8242C5.18683 10.8386 5.17548 10.8556 5.16777 10.8744C5.16006 10.8932 5.15615 10.9133 5.15625 10.9336V14.0625C5.15625 14.1484 5.22656 14.2188 5.3125 14.2188Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/checkbox.jsx b/frontend/assets/images/icons/widgets/checkbox.jsx
new file mode 100644
index 0000000000..5f57aaa8e2
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/checkbox.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Checkbox = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M35.8887 2H13.8887C7.81354 2 2.88867 6.92487 2.88867 13V35C2.88867 41.0751 7.81354 46 13.8887 46H35.8887C41.9638 46 46.8887 41.0751 46.8887 35V13C46.8887 6.92487 41.9638 2 35.8887 2Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M35.307 12.8753C36.2442 13.4221 36.5604 14.625 36.0135 15.5619L25.9264 32.8453C25.6711 33.2836 25.3237 33.6634 24.9092 33.956C24.4979 34.2461 24.0295 34.4453 23.5352 34.5399C23.0334 34.6392 22.5158 34.6264 22.0195 34.5022C21.5243 34.3784 21.0625 34.1471 20.6671 33.8243L14.2329 28.677C13.3858 27.9994 13.2484 26.7632 13.9261 25.9161C14.6038 25.069 15.8399 24.9317 16.687 25.6094L22.7636 30.4706L32.6205 13.5817C33.1674 12.6447 34.3701 12.3285 35.307 12.8753Z"
+      fill="#3E63DD"
+    />
+  </svg>
+);
+
+export default Checkbox;
diff --git a/frontend/assets/images/icons/widgets/checkbox.svg b/frontend/assets/images/icons/widgets/checkbox.svg
deleted file mode 100644
index d09e52b14b..0000000000
--- a/frontend/assets/images/icons/widgets/checkbox.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.3333 0H1.66667C1.22464 0 0.800716 0.175595 0.488155 0.488155C0.175595 0.800716 0 1.22464 0 1.66667V18.3333C0 18.7754 0.175595 19.1993 0.488155 19.5118C0.800716 19.8244 1.22464 20 1.66667 20H18.3333C18.7754 20 19.1993 19.8244 19.5118 19.5118C19.8244 19.1993 20 18.7754 20 18.3333V1.66667C20 1.22464 19.8244 0.800716 19.5118 0.488155C19.1993 0.175595 18.7754 0 18.3333 0ZM1.66667 18.3333V1.66667H18.3333V18.3333H1.66667Z" fill="#61656F"/>
-<path d="M8.33333 14.5833L4.16667 10.45L5.49167 9.16667L8.33333 11.9583L14.5083 5.83333L15.8333 7.15L8.33333 14.5833Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/circularprogressbar.jsx b/frontend/assets/images/icons/widgets/circularprogressbar.jsx
new file mode 100644
index 0000000000..1c71be8992
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/circularprogressbar.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const Circularprogressbar = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M30.7557 42.9109C30.9849 44.185 30.1415 45.4134 28.8582 45.6517C27.5749 45.8809 26.2457 46 24.889 46C23.5324 46 22.5332 44.9459 22.5332 43.6442C22.5332 42.3425 23.5874 41.2883 24.889 41.2883C25.9615 41.2883 27.0065 41.1967 28.0149 41.0133C29.2982 40.775 30.5174 41.6275 30.7557 42.9109Z"
+      fill="#3E63DD"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M43.0022 36.5034C41.4805 38.6942 39.583 40.5917 37.3922 42.1134C36.3197 42.8467 34.853 42.5809 34.1105 41.5084C33.3772 40.445 33.643 38.9692 34.7155 38.2359C36.4388 37.0442 37.933 35.55 39.1247 33.8267C39.858 32.7542 41.3338 32.4884 42.3972 33.2217C43.4697 33.9642 43.7355 35.4309 43.0022 36.5034Z"
+      fill="#3E63DD"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.6287 42.4159C17.0054 43.5617 15.5754 43.9834 14.4295 43.36C7.56368 39.6475 2.88867 32.3692 2.88867 24C2.88867 11.8542 12.7428 2 24.8887 2C33.2212 2 40.4629 6.62917 44.1937 13.44C44.8262 14.5858 44.4045 16.0158 43.2587 16.6392C42.122 17.2717 40.692 16.85 40.0595 15.7133C37.1262 10.3417 31.4337 6.72084 24.8887 6.72084C15.3462 6.72084 7.60951 14.4575 7.60951 24C7.60951 30.5725 11.267 36.2925 16.6754 39.2167C17.8212 39.84 18.252 41.27 17.6287 42.4159Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M46.8889 23.9999C46.8889 25.3566 46.7698 26.6858 46.5406 27.9691C46.3023 29.2524 45.0739 30.0958 43.7998 29.8666C42.5164 29.6283 41.6639 28.4091 41.9023 27.1258C42.0856 26.1174 42.1773 25.0724 42.1773 23.9999C42.1773 22.6983 43.2314 21.6441 44.5331 21.6441C45.8348 21.6441 46.8889 22.6983 46.8889 23.9999Z"
+      fill="#3E63DD"
+    />
+  </svg>
+);
+
+export default Circularprogressbar;
diff --git a/frontend/assets/images/icons/widgets/circularprogressbar.svg b/frontend/assets/images/icons/widgets/circularprogressbar.svg
deleted file mode 100644
index 3c61410e4f..0000000000
--- a/frontend/assets/images/icons/widgets/circularprogressbar.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/codeeditor.jsx b/frontend/assets/images/icons/widgets/codeeditor.jsx
new file mode 100644
index 0000000000..a749e3d3f0
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/codeeditor.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Codeeditor = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.28103 2C5.30291 2 2.88867 4.41424 2.88867 7.39235V40.6074C2.88867 43.5858 5.30291 46 8.28103 46H41.4963C44.4743 46 46.8885 43.5858 46.8885 40.6074V7.39235C46.8885 4.41424 44.4743 2 41.4963 2H8.28103Z"
+      fill={fill}
+    />
+    <path
+      d="M8.28103 2C5.30291 2 2.88867 4.41424 2.88867 7.39235V12.9268H46.8885V7.39235C46.8885 4.41424 44.4743 2 41.4963 2H8.28103Z"
+      fill="#3E63DD"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.1446 22.6951C16.2577 21.7303 14.7567 21.6672 13.7919 22.5541C12.8271 23.4409 12.764 24.942 13.6508 25.9067L16.9203 29.4633L13.6508 33.0198C12.764 33.9845 12.8271 35.4857 13.7919 36.3725C14.7567 37.2593 16.2577 37.1963 17.1446 36.2314L21.8901 31.0691C22.7247 30.1612 22.7247 28.7654 21.8901 27.8575L17.1446 22.6951ZM29.6344 27.0904C28.324 27.0904 27.2616 28.1527 27.2616 29.4632C27.2616 30.7736 28.324 31.836 29.6344 31.836H35.9618C37.2723 31.836 38.3346 30.7736 38.3346 29.4632C38.3346 28.1527 37.2723 27.0904 35.9618 27.0904H29.6344Z"
+      fill="#3E63DD"
+    />
+  </svg>
+);
+
+export default Codeeditor;
diff --git a/frontend/assets/images/icons/widgets/codeeditor.svg b/frontend/assets/images/icons/widgets/codeeditor.svg
deleted file mode 100644
index 62c9b6ca8f..0000000000
--- a/frontend/assets/images/icons/widgets/codeeditor.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.83333 6.66675L2.5 10.0001L5.83333 13.3334" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.1667 6.66675L17.5001 10.0001L14.1667 13.3334" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.6667 3.33337L8.33337 16.6667" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/colorpicker.jsx b/frontend/assets/images/icons/widgets/colorpicker.jsx
new file mode 100644
index 0000000000..196d9e8f86
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/colorpicker.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Colorpicker = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M3.923 37.848l3.943-3.942c-2.177-4.1-1.398-9.283 1.886-12.562l9.311-9.31 17.793 17.792-9.312 9.31c-3.279 3.285-8.462 4.063-12.56 1.886l-3.944 3.943a3.56 3.56 0 01-5.017 0l-2.1-2.1a3.558 3.558 0 010-5.017z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M24.628 5.802C29.656.734 38.06.732 43.09 5.8c5.066 5.03 5.065 13.434-.004 18.462l-2.559 2.559 3.355 3.355a2.36 2.36 0 01-3.337 3.336L15.377 8.344a2.36 2.36 0 013.337-3.337l3.355 3.355 2.559-2.56z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Colorpicker;
diff --git a/frontend/assets/images/icons/widgets/colorpicker.svg b/frontend/assets/images/icons/widgets/colorpicker.svg
deleted file mode 100644
index ce41ffee8a..0000000000
--- a/frontend/assets/images/icons/widgets/colorpicker.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-   <path d="M12 21a9 9 0 1 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"></path>
-   <circle cx="7.5" cy="10.5" r=".5" fill="currentColor"></circle>
-   <circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
-   <circle cx="16.5" cy="10.5" r=".5" fill="currentColor"></circle>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/container.jsx b/frontend/assets/images/icons/widgets/container.jsx
new file mode 100644
index 0000000000..fbbd7297e3
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/container.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Container = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path fill={fill} d="M41.389 7.5h-33v33h33v-33z"></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M9.174 14.571A6.286 6.286 0 109.174 2a6.286 6.286 0 000 12.571zm31.429 0a6.286 6.286 0 100-12.57 6.286 6.286 0 000 12.57zM15.46 39.714a6.286 6.286 0 11-12.571 0 6.286 6.286 0 0112.571 0zM40.603 46a6.286 6.286 0 100-12.571 6.286 6.286 0 000 12.571zM16.639 16.929c0-1.085.88-1.965 1.964-1.965h12.571a1.964 1.964 0 110 3.929H18.603a1.964 1.964 0 01-1.964-1.964zm0 7.071c0-1.085.88-1.964 1.964-1.964h12.571a1.964 1.964 0 010 3.928H18.603A1.964 1.964 0 0116.639 24zm1.964 5.107a1.964 1.964 0 100 3.929h12.571a1.964 1.964 0 000-3.929H18.603z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Container;
diff --git a/frontend/assets/images/icons/widgets/container.svg b/frontend/assets/images/icons/widgets/container.svg
deleted file mode 100644
index 2f6e4287f8..0000000000
--- a/frontend/assets/images/icons/widgets/container.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.9993 18.2563V19.3571C19.9993 19.7131 19.713 19.9993 19.3571 19.9993H0.642887C0.28695 19.9993 0.000732422 19.7131 0.000732422 19.3571V18.2563C0.000732422 17.9022 0.28695 17.6141 0.642887 17.6141C0.99699 17.6141 1.28504 17.9022 1.28504 18.2563V18.715H9.35784V18.2563C9.35784 17.9022 9.6459 17.6141 10 17.6141C10.3541 17.6141 10.6422 17.9022 10.6422 18.2563V18.715H18.715V18.2563C18.715 17.9022 19.003 17.6141 19.3571 17.6141C19.713 17.6141 19.9993 17.9022 19.9993 18.2563Z" fill="#434B53"/>
-<path d="M0.642887 12.8971C0.28695 12.8971 0.000732422 13.1833 0.000732422 13.5392V15.8987C0.000732422 16.2528 0.28695 16.5408 0.642887 16.5408C0.99699 16.5408 1.28504 16.2528 1.28504 15.8987V13.5392C1.28504 13.1833 0.99699 12.8971 0.642887 12.8971ZM0.642887 3.45923C0.28695 3.45923 0.000732422 3.74728 0.000732422 4.10138V6.46084C0.000732422 6.81678 0.28695 7.103 0.642887 7.103C0.99699 7.103 1.28504 6.81678 1.28504 6.46084V4.10138C1.28504 3.74728 0.99699 3.45923 0.642887 3.45923Z" fill="#434B53"/>
-<path d="M2.38588 9.99999C2.38588 10.3541 2.09783 10.6421 1.74372 10.6421H1.28504V11.1797C1.28504 11.534 0.99699 11.8219 0.642887 11.8219C0.28695 11.8219 0.000732422 11.534 0.000732422 11.1797V8.82026C0.000732422 8.46615 0.28695 8.1781 0.642887 8.1781C0.99699 8.1781 1.28504 8.46615 1.28504 8.82026V9.35783H1.74372C2.09783 9.35783 2.38588 9.64588 2.38588 9.99999Z" fill="#434B53"/>
-<path d="M0.642155 2.38515C0.287502 2.38515 0 2.09764 0 1.74299V0.642155C0 0.287502 0.287502 0 0.642155 0H1.74299C2.09764 0 2.38515 0.287502 2.38515 0.642155C2.38515 0.996808 2.09764 1.28431 1.74299 1.28431H1.28431V1.74299C1.28431 2.09764 0.996808 2.38515 0.642155 2.38515Z" fill="#434B53"/>
-<path d="M15.8987 0.000732422H13.5392C13.1833 0.000732422 12.8971 0.28695 12.8971 0.642887C12.8971 0.99699 13.1833 1.28504 13.5392 1.28504H15.8987C16.2528 1.28504 16.5408 0.99699 16.5408 0.642887C16.5408 0.28695 16.2528 0.000732422 15.8987 0.000732422ZM6.46084 0.000732422H4.10138C3.74728 0.000732422 3.45923 0.28695 3.45923 0.642887C3.45923 0.99699 3.74728 1.28504 4.10138 1.28504H6.46084C6.81678 1.28504 7.103 0.99699 7.103 0.642887C7.103 0.28695 6.81678 0.000732422 6.46084 0.000732422Z" fill="#434B53"/>
-<path d="M11.8219 0.642887C11.8219 0.99699 11.534 1.28504 11.1797 1.28504H10.6421V1.74372C10.6421 2.09783 10.3541 2.38588 9.99999 2.38588C9.64588 2.38588 9.35783 2.09783 9.35783 1.74372V1.28504H8.82026C8.46615 1.28504 8.1781 0.99699 8.1781 0.642887C8.1781 0.28695 8.46615 0.000732422 8.82026 0.000732422H11.1797C11.5338 0.000732422 11.8219 0.28695 11.8219 0.642887Z" fill="#434B53"/>
-<path d="M19.3579 2.38515C19.0032 2.38515 18.7157 2.09764 18.7157 1.74299V1.28431H18.257C17.9024 1.28431 17.6149 0.996808 17.6149 0.642155C17.6149 0.287502 17.9024 0 18.257 0H19.3579C19.7125 0 20 0.287502 20 0.642155V1.74299C20 2.09764 19.7125 2.38515 19.3579 2.38515Z" fill="#434B53"/>
-<path d="M19.3572 3.45923C19.0031 3.45923 18.7151 3.74728 18.7151 4.10138V6.46084C18.7151 6.81678 19.0031 7.103 19.3572 7.103C19.7132 7.103 19.9994 6.81678 19.9994 6.46084V4.10138C19.9994 3.74728 19.7132 3.45923 19.3572 3.45923ZM19.3572 12.8971C19.0031 12.8971 18.7151 13.1833 18.7151 13.5392V15.8987C18.7151 16.2528 19.0031 16.5408 19.3572 16.5408C19.7132 16.5408 19.9994 16.2528 19.9994 15.8987V13.5392C19.9994 13.1833 19.7132 12.8971 19.3572 12.8971Z" fill="#434B53"/>
-<path d="M19.9994 8.82026V11.1797C19.9994 11.534 19.7132 11.8219 19.3572 11.8219C19.0031 11.8219 18.7151 11.534 18.7151 11.1797V10.6421H18.2564C17.9023 10.6421 17.6143 10.3541 17.6143 9.99999C17.6143 9.64588 17.9023 9.35783 18.2564 9.35783H18.7151V8.82026C18.7151 8.46615 19.0031 8.1781 19.3572 8.1781C19.7132 8.1781 19.9994 8.46615 19.9994 8.82026Z" fill="#434B53"/>
-<path d="M9.99994 12.8971C9.64584 12.8971 9.35779 13.1833 9.35779 13.5392V15.8987C9.35779 16.2528 9.64584 16.5408 9.99994 16.5408C10.354 16.5408 10.6421 16.2528 10.6421 15.8987V13.5392C10.6421 13.1833 10.354 12.8971 9.99994 12.8971ZM9.99994 3.45923C9.64584 3.45923 9.35779 3.74728 9.35779 4.10138V6.46084C9.35779 6.81678 9.64584 7.103 9.99994 7.103C10.354 7.103 10.6421 6.81678 10.6421 6.46084V4.10138C10.6421 3.74728 10.354 3.45923 9.99994 3.45923Z" fill="#434B53"/>
-<path d="M6.46084 9.35791H4.10138C3.74728 9.35791 3.45923 9.64596 3.45923 10.0001C3.45923 10.3542 3.74728 10.6422 4.10138 10.6422H6.46084C6.81678 10.6422 7.103 10.3542 7.103 10.0001C7.103 9.64596 6.81678 9.35791 6.46084 9.35791ZM15.8987 9.35791H13.5392C13.1833 9.35791 12.8971 9.64596 12.8971 10.0001C12.8971 10.3542 13.1833 10.6422 13.5392 10.6422H15.8987C16.2528 10.6422 16.5408 10.3542 16.5408 10.0001C16.5408 9.64596 16.2528 9.35791 15.8987 9.35791Z" fill="#434B53"/>
-<path d="M11.8219 9.99999C11.8219 10.3541 11.534 10.6421 11.1797 10.6421H10.6421V11.1797C10.6421 11.534 10.3541 11.8219 9.99999 11.8219C9.64588 11.8219 9.35783 11.534 9.35783 11.1797V10.6421H8.82026C8.46615 10.6421 8.1781 10.3541 8.1781 9.99999C8.1781 9.64588 8.46615 9.35783 8.82026 9.35783H9.35783V8.82026C9.35783 8.46615 9.64588 8.1781 9.99999 8.1781C10.3541 8.1781 10.6421 8.46615 10.6421 8.82026V9.35783H11.1797C11.5338 9.35783 11.8219 9.64588 11.8219 9.99999Z" fill="#434B53"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/customcomponent.jsx b/frontend/assets/images/icons/widgets/customcomponent.jsx
new file mode 100644
index 0000000000..9b6379580e
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/customcomponent.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Customcomponent = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M34.977 3.55l-8.314 16.632a1.898 1.898 0 001.697 2.747h16.629a1.898 1.898 0 001.697-2.747L38.371 3.549c-.699-1.399-2.695-1.399-3.394 0zM2.89 5.643c0-.867.703-1.571 1.571-1.571h15.714c.868 0 1.572.704 1.572 1.571V21.36c0 .868-.704 1.571-1.572 1.571H4.46A1.571 1.571 0 012.89 21.36V5.644zM12.317 46.5a9.429 9.429 0 100-18.857 9.429 9.429 0 000 18.857z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M29.603 27.643a2.357 2.357 0 100 4.714h14.143a2.357 2.357 0 100-4.714H29.603zm-2.357 9.428a2.357 2.357 0 012.357-2.357h14.143a2.357 2.357 0 010 4.715H29.603a2.357 2.357 0 01-2.357-2.358zm0 7.072a2.357 2.357 0 012.357-2.357h14.143a2.357 2.357 0 010 4.714H29.603a2.357 2.357 0 01-2.357-2.357z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Customcomponent;
diff --git a/frontend/assets/images/icons/widgets/customcomponent.svg b/frontend/assets/images/icons/widgets/customcomponent.svg
deleted file mode 100644
index ebf2b793af..0000000000
--- a/frontend/assets/images/icons/widgets/customcomponent.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tools" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <path d="M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4" />
-  <line x1="14.5" y1="5.5" x2="18.5" y2="9.5" />
-  <polyline points="12 8 7 3 3 7 8 12" />
-  <line x1="7" y1="8" x2="5.5" y2="9.5" />
-  <polyline points="16 12 21 17 17 21 12 16" />
-  <line x1="16" y1="17" x2="14.5" y2="18.5" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/datepicker.jsx b/frontend/assets/images/icons/widgets/datepicker.jsx
new file mode 100644
index 0000000000..92b0cc3832
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/datepicker.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const Datepicker = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M4.722 16.476V40.5c0 3.038 2.257 5.5 5.041 5.5h30.25c2.785 0 5.042-2.462 5.042-5.5V16.476H4.722z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M14.805 2c1.591 0 2.881 1.407 2.881 3.143v1.571h14.405V5.143c0-1.736 1.29-3.143 2.881-3.143 1.591 0 2.88 1.407 2.88 3.143v1.571h2.161c2.556 0 5.042 2.08 5.042 5.174v4.604H4.722v-4.604c0-3.093 2.485-5.174 5.041-5.174h2.161V5.143c0-1.736 1.29-3.143 2.881-3.143z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M13.365 28.148c1.59 0 2.88-1.407 2.88-3.142 0-1.736-1.29-3.143-2.88-3.143-1.591 0-2.881 1.407-2.881 3.143 0 1.735 1.29 3.142 2.88 3.142zM24.888 28.148c1.591 0 2.881-1.407 2.881-3.142 0-1.736-1.29-3.143-2.88-3.143-1.592 0-2.882 1.407-2.882 3.143 0 1.735 1.29 3.142 2.881 3.142zM13.365 40.717c1.59 0 2.88-1.407 2.88-3.143 0-1.736-1.29-3.143-2.88-3.143-1.591 0-2.881 1.407-2.881 3.143 0 1.736 1.29 3.143 2.88 3.143zM24.888 40.717c1.591 0 2.881-1.407 2.881-3.143 0-1.736-1.29-3.143-2.88-3.143-1.592 0-2.882 1.407-2.882 3.143 0 1.736 1.29 3.143 2.881 3.143zM36.413 28.148c1.59 0 2.88-1.407 2.88-3.142 0-1.736-1.29-3.143-2.88-3.143-1.591 0-2.881 1.407-2.881 3.143 0 1.735 1.29 3.142 2.88 3.142z"
+    ></path>
+  </svg>
+);
+
+export default Datepicker;
diff --git a/frontend/assets/images/icons/widgets/datepicker.svg b/frontend/assets/images/icons/widgets/datepicker.svg
deleted file mode 100644
index d26fedc569..0000000000
--- a/frontend/assets/images/icons/widgets/datepicker.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.7778 2H16.6667V0H14.4444V2H5.55556V0H3.33333V2H2.22222C0.988889 2 0.0111111 2.9 0.0111111 4L0 18C0 18.5304 0.234126 19.0391 0.650874 19.4142C1.06762 19.7893 1.63285 20 2.22222 20H17.7778C19 20 20 19.1 20 18V4C20 2.9 19 2 17.7778 2ZM17.7778 18H2.22222V7H17.7778V18Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/daterangepicker.jsx b/frontend/assets/images/icons/widgets/daterangepicker.jsx
new file mode 100644
index 0000000000..01f13545c4
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/daterangepicker.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Daterangepicker = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path fill={fill} d="M2.889 16.476V40.5a5.5 5.5 0 005.5 5.5h33a5.5 5.5 0 005.5-5.5V16.476h-44z"></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M13.889 2a3.143 3.143 0 013.143 3.143v1.571h15.714V5.143a3.143 3.143 0 016.286 0v1.571h2.357c2.788 0 5.5 2.08 5.5 5.174v4.604H2.889v-4.604c0-3.093 2.711-5.174 5.5-5.174h2.357V5.143A3.143 3.143 0 0113.889 2zM14.674 31.29a2.357 2.357 0 012.358-2.357h15.714a2.357 2.357 0 110 4.714H17.03a2.357 2.357 0 01-2.357-2.357z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Daterangepicker;
diff --git a/frontend/assets/images/icons/widgets/daterangepicker.svg b/frontend/assets/images/icons/widgets/daterangepicker.svg
deleted file mode 100644
index 30e89a16eb..0000000000
--- a/frontend/assets/images/icons/widgets/daterangepicker.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.7778 2H16.6667V0H14.4444V2H5.55556V0H3.33333V2H2.22222C0.988889 2 0.0111111 2.9 0.0111111 4L0 18C0 18.5304 0.234126 19.0391 0.650874 19.4142C1.06762 19.7893 1.63285 20 2.22222 20H17.7778C19 20 20 19.1 20 18V4C20 2.9 19 2 17.7778 2ZM17.7778 18H2.22222V7H17.7778V18Z" fill="#61656F"/>
-<path d="M11.1111 11.3889C11.1111 11.0205 11.2574 10.6673 11.5179 10.4068C11.7784 10.1463 12.1316 10 12.5 10H19.4444V12.7778H12.5C12.1316 12.7778 11.7784 12.6314 11.5179 12.371C11.2574 12.1105 11.1111 11.7572 11.1111 11.3889ZM0 13.0556H5.55556C5.92391 13.0556 6.27718 13.2019 6.53765 13.4624C6.79812 13.7228 6.94444 14.0761 6.94444 14.4444C6.94444 14.8128 6.79812 15.1661 6.53765 15.4265C6.27718 15.687 5.92391 15.8333 5.55556 15.8333H0V13.0556Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/divider.jsx b/frontend/assets/images/icons/widgets/divider.jsx
new file mode 100644
index 0000000000..893bdbc356
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/divider.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Divider = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M22.889 1.714a3.143 3.143 0 013.143 3.143v37.715a3.143 3.143 0 11-6.286 0V4.856a3.143 3.143 0 013.143-3.143z"
+      clipRule="evenodd"
+    ></path>
+    <circle cx="22.889" cy="23.714" r="5.153" fill="#3E63DD" transform="rotate(90 22.889 23.714)"></circle>
+  </svg>
+);
+
+export default Divider;
diff --git a/frontend/assets/images/icons/widgets/divider.svg b/frontend/assets/images/icons/widgets/divider.svg
deleted file mode 100644
index a4805d524d..0000000000
--- a/frontend/assets/images/icons/widgets/divider.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 2V2.01M7.45455 2H16.5455M22 2V2.01" stroke="#61656F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/dividerhorizontal.jsx b/frontend/assets/images/icons/widgets/dividerhorizontal.jsx
new file mode 100644
index 0000000000..17895914c6
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/dividerhorizontal.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const DividerHorizondal = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M2.889 16.964c0-2.603 1.558-4.714 3.48-4.714h14.038c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H6.37c-1.922 0-3.48-2.11-3.48-4.714V16.964zM25.893 16.964c0-2.603 1.558-4.714 3.48-4.714h14.034c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H29.373c-1.922 0-3.48-2.11-3.48-4.714V16.964z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M36.429 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286zM13.511 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default DividerHorizondal;
diff --git a/frontend/assets/images/icons/widgets/downstatistics.svg b/frontend/assets/images/icons/widgets/downstatistics.jsx
similarity index 78%
rename from frontend/assets/images/icons/widgets/downstatistics.svg
rename to frontend/assets/images/icons/widgets/downstatistics.jsx
index bf1d06ba0d..48ad5b1917 100644
--- a/frontend/assets/images/icons/widgets/downstatistics.svg
+++ b/frontend/assets/images/icons/widgets/downstatistics.jsx
@@ -1,3 +1,12 @@
-<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.78199 11.3232C9.66186 11.2031 9.59438 11.0401 9.59438 10.8702C9.59438 10.7004 9.66186 10.5374 9.78199 10.4173C9.90212 10.2972 10.0651 10.2297 10.2349 10.2297H14.0079L9.54698 4.77721L6.20452 8.12095C6.13902 8.18638 6.06011 8.23684 5.97322 8.26885C5.88634 8.30085 5.79356 8.31364 5.70126 8.30634C5.60896 8.29903 5.51934 8.2718 5.43857 8.22653C5.35781 8.18125 5.28782 8.119 5.23343 8.04408L0.108928 0.997891C0.0164671 0.860327 -0.0190707 0.692278 0.00978223 0.529059C0.0386352 0.36584 0.129633 0.220159 0.263652 0.12263C0.397671 0.025101 0.564277 -0.0166822 0.728459 0.00606107C0.892641 0.0288043 1.04162 0.114303 1.14408 0.24459L5.82787 6.6848L9.14214 3.37053C9.20542 3.30737 9.28122 3.25815 9.36467 3.22605C9.44812 3.19394 9.53736 3.17966 9.62666 3.18413C9.71596 3.18859 9.80333 3.2117 9.88316 3.25197C9.96299 3.29224 10.0335 3.34877 10.0902 3.41794L14.7189 9.07666V5.74574C14.7189 5.57585 14.7864 5.41292 14.9065 5.29279C15.0266 5.17267 15.1895 5.10518 15.3594 5.10518C15.5293 5.10518 15.6923 5.17267 15.8124 5.29279C15.9325 5.41292 16 5.57585 16 5.74574V10.8702C16 11.0401 15.9325 11.2031 15.8124 11.3232C15.6923 11.4433 15.5293 11.5108 15.3594 11.5108H10.2349C10.0651 11.5108 9.90212 11.4433 9.78199 11.3232Z" fill="#EE2C4D"/>
-</svg>
+import React from 'react';
+
+const Downstatistics = () => (
+  <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9.78199 11.3232C9.66186 11.2031 9.59438 11.0401 9.59438 10.8702C9.59438 10.7004 9.66186 10.5374 9.78199 10.4173C9.90212 10.2972 10.0651 10.2297 10.2349 10.2297H14.0079L9.54698 4.77721L6.20452 8.12095C6.13902 8.18638 6.06011 8.23684 5.97322 8.26885C5.88634 8.30085 5.79356 8.31364 5.70126 8.30634C5.60896 8.29903 5.51934 8.2718 5.43857 8.22653C5.35781 8.18125 5.28782 8.119 5.23343 8.04408L0.108928 0.997891C0.0164671 0.860327 -0.0190707 0.692278 0.00978223 0.529059C0.0386352 0.36584 0.129633 0.220159 0.263652 0.12263C0.397671 0.025101 0.564277 -0.0166822 0.728459 0.00606107C0.892641 0.0288043 1.04162 0.114303 1.14408 0.24459L5.82787 6.6848L9.14214 3.37053C9.20542 3.30737 9.28122 3.25815 9.36467 3.22605C9.44812 3.19394 9.53736 3.17966 9.62666 3.18413C9.71596 3.18859 9.80333 3.2117 9.88316 3.25197C9.96299 3.29224 10.0335 3.34877 10.0902 3.41794L14.7189 9.07666V5.74574C14.7189 5.57585 14.7864 5.41292 14.9065 5.29279C15.0266 5.17267 15.1895 5.10518 15.3594 5.10518C15.5293 5.10518 15.6923 5.17267 15.8124 5.29279C15.9325 5.41292 16 5.57585 16 5.74574V10.8702C16 11.0401 15.9325 11.2031 15.8124 11.3232C15.6923 11.4433 15.5293 11.5108 15.3594 11.5108H10.2349C10.0651 11.5108 9.90212 11.4433 9.78199 11.3232Z"
+      fill="#EE2C4D"
+    />
+  </svg>
+);
+
+export default Downstatistics;
diff --git a/frontend/assets/images/icons/widgets/dropdown.jsx b/frontend/assets/images/icons/widgets/dropdown.jsx
new file mode 100644
index 0000000000..c838fa2ca6
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/dropdown.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Dropdown = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M8.271 12.575a5.382 5.382 0 00-5.382 5.382v12.086a5.383 5.383 0 005.382 5.382h33.236a5.382 5.382 0 005.382-5.382V17.957a5.382 5.382 0 00-5.383-5.382H8.272z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M41.506 35.425a5.383 5.383 0 005.382-5.382V17.957a5.382 5.382 0 00-5.382-5.382H24.888v22.85h16.618z"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M30.741 21.823a1.574 1.574 0 011.455-.971h6.296a1.574 1.574 0 011.113 2.687l-3.148 3.148a1.574 1.574 0 01-2.226 0l-3.148-3.148a1.574 1.574 0 01-.342-1.716z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Dropdown;
diff --git a/frontend/assets/images/icons/widgets/dropdown.svg b/frontend/assets/images/icons/widgets/dropdown.svg
deleted file mode 100644
index 7820e1ad1d..0000000000
--- a/frontend/assets/images/icons/widgets/dropdown.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.95 8.46761C17.0421 8.62345 17.0421 8.83125 16.95 8.9871L15.3103 11.6365C15.2182 11.7923 15.0339 11.8962 14.8313 11.8962C14.6286 11.8962 14.4443 11.7923 14.3522 11.6365L12.7125 8.9871C12.6204 8.83125 12.6204 8.62345 12.7125 8.46761C12.8046 8.31176 12.9889 8.20786 13.1915 8.20786H16.4526C16.6552 8.20786 16.8395 8.31176 16.95 8.46761ZM9.85679 13.8703C9.85679 14.1647 9.7094 14.3898 9.51687 14.3898H1.81383C1.6213 14.3898 1.47391 14.1647 1.47391 13.8703V5.55847C1.47391 5.26409 1.6213 5.03898 1.81383 5.03898H9.51687C9.7094 5.03898 9.85679 5.26409 9.85679 5.55847V13.8703ZM2.09185 4C0.929855 4 0 4.16624 0 5.55847V13.8703C0 15.4288 0.929855 15.4288 2.09185 15.4288H17.8981C19.0601 15.4288 19.9899 15.2625 19.9899 13.8703V5.64159C20.1146 4.41559 19.0601 4 17.8981 4H2.09185Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/filepicker.jsx b/frontend/assets/images/icons/widgets/filepicker.jsx
new file mode 100644
index 0000000000..e520df6282
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/filepicker.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const Filepicker = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#3E63DD"
+      d="M31.174 33.428a3.143 3.143 0 01-3.142 3.143h-22a3.143 3.143 0 01-3.143-3.142V5.142A3.143 3.143 0 016.032 2h12.84c.834 0 1.634.331 2.223.92l9.159 9.16c.59.589.92 1.388.92 2.222v19.127z"
+    ></path>
+    <path
+      fill={fill}
+      d="M46.889 42.857A3.143 3.143 0 0143.746 46h-22a3.143 3.143 0 01-3.143-3.143V14.571a3.143 3.143 0 013.143-3.142h12.841c.833 0 1.633.33 2.222.92l9.16 9.16c.588.588.92 1.388.92 2.221v19.127z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M35.103 24a2.357 2.357 0 10-4.714 0v3.928H26.46a2.357 2.357 0 000 4.715h3.929v3.928a2.357 2.357 0 004.714 0v-3.928h3.929a2.357 2.357 0 100-4.715h-3.929V24z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Filepicker;
diff --git a/frontend/assets/images/icons/widgets/filepicker.svg b/frontend/assets/images/icons/widgets/filepicker.svg
deleted file mode 100644
index f330e30b99..0000000000
--- a/frontend/assets/images/icons/widgets/filepicker.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.77778 8.77778V15.4444M8.77778 8.77778L5.44444 12.1111M8.77778 8.77778L12.1111 12.1111M14.3333 21H3.22222C2.63285 21 2.06762 20.7659 1.65087 20.3491C1.23413 19.9324 1 19.3671 1 18.7778V3.22222C1 2.63285 1.23413 2.06762 1.65087 1.65087C2.06762 1.23413 2.63285 1 3.22222 1H11L16.5556 6.55556V18.7778C16.5556 19.3671 16.3214 19.9324 15.9047 20.3491C15.4879 20.7659 14.9227 21 14.3333 21Z" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/form.jsx b/frontend/assets/images/icons/widgets/form.jsx
new file mode 100644
index 0000000000..357fa54f1a
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/form.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Form = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M43.746 16.143H6.032a3.143 3.143 0 00-3.143 3.143v9.428a3.143 3.143 0 003.143 3.143h37.714a3.143 3.143 0 003.143-3.143v-9.428a3.143 3.143 0 00-3.143-3.143z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M13.103 9.857A2.357 2.357 0 0115.46 7.5h6.286a2.357 2.357 0 010 4.714h-.786v23.572h.786a2.357 2.357 0 010 4.714H15.46a2.357 2.357 0 010-4.714h.786V12.214h-.786a2.357 2.357 0 01-2.357-2.357z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Form;
diff --git a/frontend/assets/images/icons/widgets/form.svg b/frontend/assets/images/icons/widgets/form.svg
deleted file mode 100644
index cfbd6d1054..0000000000
--- a/frontend/assets/images/icons/widgets/form.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notes" width="56" height="56" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <rect x="5" y="3" width="14" height="18" rx="2" />
-  <line x1="9" y1="7" x2="15" y2="7" />
-  <line x1="9" y1="11" x2="15" y2="11" />
-  <line x1="9" y1="15" x2="13" y2="15" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/frame.jsx b/frontend/assets/images/icons/widgets/frame.jsx
new file mode 100644
index 0000000000..764d8b77d3
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/frame.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Frame = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M2.889 16.964c0-2.603 1.558-4.714 3.48-4.714h14.038c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H6.37c-1.922 0-3.48-2.11-3.48-4.714V16.964zM25.893 16.964c0-2.603 1.558-4.714 3.48-4.714h14.034c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H29.373c-1.922 0-3.48-2.11-3.48-4.714V16.964z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M36.429 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286zM13.511 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Frame;
diff --git a/frontend/assets/images/icons/widgets/group.jsx b/frontend/assets/images/icons/widgets/group.jsx
new file mode 100644
index 0000000000..a942f77afc
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/group.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Group = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M2.889 16.964c0-2.603 1.558-4.714 3.48-4.714h14.038c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H6.37c-1.922 0-3.48-2.11-3.48-4.714V16.964zM25.893 16.964c0-2.603 1.558-4.714 3.48-4.714h14.034c1.922 0 3.48 2.11 3.48 4.714v14.572c0 2.603-1.558 4.714-3.48 4.714H29.373c-1.922 0-3.48-2.11-3.48-4.714V16.964z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M36.429 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286zM13.511 27.393a3.143 3.143 0 100-6.286 3.143 3.143 0 000 6.286z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Group;
diff --git a/frontend/assets/images/icons/widgets/html.jsx b/frontend/assets/images/icons/widgets/html.jsx
new file mode 100644
index 0000000000..75bf3e3c0e
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/html.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Html = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M4.46 2a1.571 1.571 0 00-1.552 1.817l4.714 29.857c.067.421.302.797.651 1.042l15.715 11a1.572 1.572 0 001.802 0l15.714-11c.35-.245.585-.62.651-1.042L46.87 3.817A1.572 1.572 0 0045.317 2H4.46z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M14.536 10.004c.373-.455.93-.72 1.52-.72h17.666a1.964 1.964 0 110 3.93h-15.27l.98 4.904h12.523c1.085 0 1.965.88 1.965 1.965v8.833c0 .618-.291 1.2-.786 1.571l-7.067 5.3a1.964 1.964 0 01-2.357 0l-7.067-5.3A1.964 1.964 0 0119 27.345l5.889 4.416 5.102-3.827v-5.887h-12.17c-.936 0-1.742-.661-1.925-1.58l-1.767-8.833a1.964 1.964 0 01.407-1.63z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Html;
diff --git a/frontend/assets/images/icons/widgets/html.svg b/frontend/assets/images/icons/widgets/html.svg
deleted file mode 100644
index 989d1508d8..0000000000
--- a/frontend/assets/images/icons/widgets/html.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-html5" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-   <path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z"></path>
-   <path d="M15.5 8h-7l.5 4h6l-.5 3.5l-2.5 .75l-2.5 -.75l-.1 -.5"></path>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/icon.jsx b/frontend/assets/images/icons/widgets/icon.jsx
new file mode 100644
index 0000000000..7103d829ba
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/icon.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Icon = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M24.889 2c-12.15 0-22 9.85-22 22s9.85 22 22 22 22-9.85 22-22-9.85-22-22-22z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M17.285 20.782a3.22 3.22 0 01.012-6.44h.013a3.22 3.22 0 01-.013 6.44h-.012zm-3.104 6.275a.786.786 0 00-.785.786c0 1.736.846 4.202 2.675 6.234 1.855 2.061 4.728 3.686 8.767 3.686s6.912-1.625 8.767-3.686c1.829-2.032 2.676-4.498 2.676-6.234a.786.786 0 00-.786-.786H14.18zm18.292-6.275a3.22 3.22 0 01.008-6.44h.007a3.22 3.22 0 01-.007 6.44h-.008z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Icon;
diff --git a/frontend/assets/images/icons/widgets/icon.svg b/frontend/assets/images/icons/widgets/icon.svg
deleted file mode 100644
index e1ff81c375..0000000000
--- a/frontend/assets/images/icons/widgets/icon.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-category-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-   <path d="M14 4h6v6h-6z"></path>
-   <path d="M4 14h6v6h-6z"></path>
-   <circle cx="17" cy="17" r="3"></circle>
-   <circle cx="7" cy="7" r="3"></circle>
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/iframe.jsx b/frontend/assets/images/icons/widgets/iframe.jsx
new file mode 100644
index 0000000000..6ba31a2b3b
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/iframe.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Iframe = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path fill="#3E63DD" d="M24.889 35c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11z"></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M7.833 6.944a.786.786 0 01.556-.23h4.714a2.357 2.357 0 000-4.714H8.389a5.5 5.5 0 00-5.5 5.5v4.714a2.357 2.357 0 004.714 0V7.5c0-.208.083-.408.23-.556zM46.89 35.786a2.357 2.357 0 00-4.715 0V40.5a.786.786 0 01-.785.786h-4.715a2.357 2.357 0 000 4.714h4.715a5.5 5.5 0 005.5-5.5v-4.714zM5.246 33.429a2.357 2.357 0 012.357 2.357V40.5a.786.786 0 00.786.786h4.714a2.357 2.357 0 010 4.714H8.389a5.5 5.5 0 01-5.5-5.5v-4.714a2.357 2.357 0 012.357-2.357zM36.674 2a2.357 2.357 0 000 4.714h4.715a.786.786 0 01.785.786v4.714a2.357 2.357 0 004.715 0V7.5a5.5 5.5 0 00-5.5-5.5h-4.715z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Iframe;
diff --git a/frontend/assets/images/icons/widgets/iframe.svg b/frontend/assets/images/icons/widgets/iframe.svg
deleted file mode 100644
index 3d3548c6ea..0000000000
--- a/frontend/assets/images/icons/widgets/iframe.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.33337 1V21" stroke="#61656F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M17.6666 1V21" stroke="#61656F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M1 4.33337H21" stroke="#61656F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.33329 7.66663H13.6666C13.8434 7.66663 14.013 7.73686 14.138 7.86189C14.2631 7.98691 14.3333 8.15648 14.3333 8.33329V13.6666C14.3333 13.8434 14.2631 14.013 14.138 14.138C14.013 14.2631 13.8434 14.3333 13.6666 14.3333H8.33329C8.15648 14.3333 7.98691 14.2631 7.86189 14.138C7.73686 14.013 7.66663 13.8434 7.66663 13.6666V8.33329C7.66663 8.15648 7.73686 7.98691 7.86189 7.86189C7.98691 7.73686 8.15648 7.66663 8.33329 7.66663V7.66663Z" fill="#61656F"/>
-<path d="M1 17.6666H21" stroke="#61656F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/image.jsx b/frontend/assets/images/icons/widgets/image.jsx
new file mode 100644
index 0000000000..a571dd11c2
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/image.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Image = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M42.174 46a4.714 4.714 0 004.715-4.714V6.714A4.714 4.714 0 0042.174 2H7.603a4.714 4.714 0 00-4.714 4.714v34.572A4.714 4.714 0 007.603 46h34.571z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M33.931 20.235a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM9.86 26.31c4.719-.115 9.347 1.575 13.056 4.811 3.033 2.646 5.292 6.187 6.505 10.188H8.365a.786.786 0 01-.785-.785V26.427c.736-.08 1.476-.12 2.216-.117h.064zM42.198 40.64c0 .37-.3.67-.668.67h-7.22a27.408 27.408 0 00-3.684-8.445 29.238 29.238 0 017.677-1.008c1.305 0 2.608.087 3.895.26v8.524z"
+    ></path>
+  </svg>
+);
+
+export default Image;
diff --git a/frontend/assets/images/icons/widgets/image.svg b/frontend/assets/images/icons/widgets/image.svg
deleted file mode 100644
index f088761cac..0000000000
--- a/frontend/assets/images/icons/widgets/image.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_640_18031)">
-<path d="M7.50244 6.875C7.50244 7.37228 7.3049 7.84919 6.95327 8.20083C6.60164 8.55246 6.12472 8.75 5.62744 8.75C5.13016 8.75 4.65325 8.55246 4.30162 8.20083C3.94999 7.84919 3.75244 7.37228 3.75244 6.875C3.75244 6.37772 3.94999 5.90081 4.30162 5.54917C4.65325 5.19754 5.13016 5 5.62744 5C6.12472 5 6.60164 5.19754 6.95327 5.54917C7.3049 5.90081 7.50244 6.37772 7.50244 6.875V6.875Z" fill="#61656F"/>
-<path d="M2.50244 1.25C1.8394 1.25 1.20352 1.51339 0.734674 1.98223C0.265834 2.45107 0.00244141 3.08696 0.00244141 3.75V16.25C0.00244141 16.913 0.265834 17.5489 0.734674 18.0178C1.20352 18.4866 1.8394 18.75 2.50244 18.75H17.5024C18.1655 18.75 18.8014 18.4866 19.2702 18.0178C19.7391 17.5489 20.0024 16.913 20.0024 16.25V3.75C20.0024 3.08696 19.7391 2.45107 19.2702 1.98223C18.8014 1.51339 18.1655 1.25 17.5024 1.25H2.50244V1.25ZM17.5024 2.5C17.834 2.5 18.1519 2.6317 18.3863 2.86612C18.6207 3.10054 18.7524 3.41848 18.7524 3.75V11.875L14.0312 9.44125C13.914 9.38253 13.7812 9.36216 13.6518 9.38302C13.5224 9.40388 13.4028 9.46492 13.3099 9.5575L8.67244 14.195L5.34744 11.98C5.22739 11.9001 5.08339 11.8641 4.93986 11.8783C4.79634 11.8924 4.66211 11.9557 4.55994 12.0575L1.25244 15V3.75C1.25244 3.41848 1.38414 3.10054 1.61856 2.86612C1.85298 2.6317 2.17092 2.5 2.50244 2.5H17.5024Z" fill="#61656F"/>
-</g>
-<defs>
-<clipPath id="clip0_640_18031">
-<rect width="20" height="20" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/index.jsx b/frontend/assets/images/icons/widgets/index.jsx
new file mode 100644
index 0000000000..a6d04bf1a6
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/index.jsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import BoundedBox from './boundedbox.jsx';
+import Button from './button.jsx';
+import ButtonGroup from './buttongroup.jsx';
+import Calendar from './calendar.jsx';
+import Chart from './chart.jsx';
+import Checkbox from './checkbox.jsx';
+import Circularprogressbar from './circularprogressbar.jsx';
+import Codeeditor from './codeeditor.jsx';
+import Colorpicker from './colorpicker.jsx';
+import Container from './container.jsx';
+import Customcomponent from './customcomponent.jsx';
+import Datepicker from './datepicker.jsx';
+import Daterangepicker from './daterangepicker.jsx';
+import Divider from './divider.jsx';
+import DividerHorizondal from './dividerhorizontal.jsx';
+import Downstatistics from './downstatistics.jsx';
+import Dropdown from './dropdown.jsx';
+import Filepicker from './filepicker.jsx';
+import Form from './form.jsx';
+import Frame from './frame.jsx';
+import Group from './group.jsx';
+import Html from './html.jsx';
+import Icon from './icon.jsx';
+import Iframe from './iframe.jsx';
+import Image from './image.jsx';
+import Kanban from './kanban.jsx';
+import Kanbanboard from './kanbanboard.jsx';
+import Link from './link.jsx';
+import Listview from './listview.jsx';
+import Map from './map.jsx';
+import Modal from './modal.jsx';
+import Multiselect from './multiselect.jsx';
+import Numberinput from './numberinput.jsx';
+import Pagination from './pagination.jsx';
+import Passwordinput from './passwordinput.jsx';
+import Pdf from './pdf.jsx';
+import Qrscanner from './qrscanner.jsx';
+import RadioButton from './radio-button.jsx';
+import Rangeslider from './rangeslider.jsx';
+import Rating from './rating.jsx';
+import Spinner from './spinner.jsx';
+import Statistics from './statistics.jsx';
+import Steps from './steps.jsx';
+import Svgimage from './svgimage.jsx';
+import Table from './table.jsx';
+import Tabs from './tabs.jsx';
+import Tags from './tags.jsx';
+import Text from './text.jsx';
+import TextArea from './textarea.jsx';
+import Texteditor from './texteditor.jsx';
+import Textinput from './textinput.jsx';
+import Timeline from './timeline.jsx';
+import Timer from './timer.jsx';
+import Toggleswitch from './toggleswitch.jsx';
+import Treeselect from './treeselect.jsx';
+import Upstatistics from './upstatistics.jsx';
+import Verticaldivider from './verticaldivider.jsx';
+
+const WidgetIcon = (props) => {
+  switch (props.name) {
+    case 'boundedbox':
+      return <BoundedBox {...props} />;
+    case 'button':
+      return <Button {...props} />;
+    case 'buttongroup':
+      return <ButtonGroup {...props} />;
+    case 'calendar':
+      return <Calendar {...props} />;
+    case 'chart':
+      return <Chart {...props} />;
+    case 'checkbox':
+      return <Checkbox {...props} />;
+    case 'circularprogressbar':
+      return <Circularprogressbar {...props} />;
+    case 'codeeditor':
+      return <Codeeditor {...props} />;
+    case 'colorpicker':
+      return <Colorpicker {...props} />;
+    case 'container':
+      return <Container {...props} />;
+    case 'customcomponent':
+      return <Customcomponent {...props} />;
+    case 'datepicker':
+      return <Datepicker {...props} />;
+    case 'daterangepicker':
+      return <Daterangepicker {...props} />;
+    case 'divider':
+      return <Divider {...props} />;
+    case 'divider-horizondal':
+      return <DividerHorizondal {...props} />;
+    case 'downstatistics':
+      return <Downstatistics {...props} />;
+    case 'dropdown':
+      return <Dropdown {...props} />;
+    case 'filepicker':
+      return <Filepicker {...props} />;
+    case 'form':
+      return <Form {...props} />;
+    case 'frame':
+      return <Frame {...props} />;
+    case 'group':
+      return <Group {...props} />;
+    case 'html':
+      return <Html {...props} />;
+    case 'icon':
+      return <Icon {...props} />;
+    case 'iframe':
+      return <Iframe {...props} />;
+    case 'image':
+      return <Image {...props} />;
+    case 'kanban':
+      return <Kanban {...props} />;
+    case 'kanbanboard':
+      return <Kanbanboard {...props} />;
+    case 'link':
+      return <Link {...props} />;
+    case 'listview':
+      return <Listview {...props} />;
+    case 'map':
+      return <Map {...props} />;
+    case 'modal':
+      return <Modal {...props} />;
+    case 'multiselect':
+      return <Multiselect {...props} />;
+    case 'numberinput':
+      return <Numberinput {...props} />;
+    case 'pagination':
+      return <Pagination {...props} />;
+    case 'passwordinput':
+      return <Passwordinput {...props} />;
+    case 'pdf':
+      return <Pdf {...props} />;
+    case 'qrscanner':
+      return <Qrscanner {...props} />;
+    case 'radio-button':
+      return <RadioButton {...props} />;
+    case 'rangeslider':
+      return <Rangeslider {...props} />;
+    case 'rating':
+      return <Rating {...props} />;
+    case 'richtexteditor':
+      return <Texteditor {...props} />;
+    case 'spinner':
+      return <Spinner {...props} />;
+    case 'starrating':
+      return <Rating {...props} />;
+    case 'statistics':
+      return <Statistics {...props} />;
+    case 'steps':
+      return <Steps {...props} />;
+    case 'svgimage':
+      return <Svgimage {...props} />;
+    case 'table':
+      return <Table {...props} />;
+    case 'tabs':
+      return <Tabs {...props} />;
+    case 'tags':
+      return <Tags {...props} />;
+    case 'text':
+      return <Text {...props} />;
+    case 'textarea':
+      return <TextArea {...props} />;
+    case 'textinput':
+      return <Textinput {...props} />;
+    case 'timeline':
+      return <Timeline {...props} />;
+    case 'timer':
+      return <Timer {...props} />;
+    case 'toggleswitch':
+      return <Toggleswitch {...props} />;
+    case 'treeselect':
+      return <Treeselect {...props} />;
+    case 'upstatistics':
+      return <Upstatistics {...props} />;
+    case 'verticaldivider':
+      return <Verticaldivider {...props} />;
+
+    default:
+      return <BoundedBox {...props} />;
+  }
+};
+export default WidgetIcon;
diff --git a/frontend/assets/images/icons/widgets/kanban.jsx b/frontend/assets/images/icons/widgets/kanban.jsx
new file mode 100644
index 0000000000..af3b54802d
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/kanban.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Kanban = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M20.452 3.558H6.555A3.667 3.667 0 002.89 7.226v6.82h21.23v-6.82a3.666 3.666 0 00-3.667-3.666zm-2.622 7.609a2.164 2.164 0 11.002-4.327 2.164 2.164 0 01-.002 4.327zM2.889 17.382v19.855h21.23V17.382H2.889zm15.986 14.942h-4.198a1.375 1.375 0 010-2.75h4.198a1.375 1.375 0 010 2.75zm0-5.83H8.39a1.375 1.375 0 010-2.75h10.486a1.375 1.375 0 010 2.75zM43.222 3.558H32.736a3.667 3.667 0 00-3.667 3.667v6.82h17.82v-6.82a3.667 3.667 0 00-3.667-3.666zM40.6 11.168a2.163 2.163 0 110-4.326 2.163 2.163 0 010 4.326zM29.069 17.382v13.566h17.82V17.383h-17.82zm12.576 8.653h-7.333a1.375 1.375 0 010-2.75h7.334a1.375 1.375 0 110 2.75zM46.889 34.157h-17.82v10.285h17.82V34.157z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M16.623 10.793a2.163 2.163 0 102.416-3.589 2.163 2.163 0 00-2.416 3.59zM14.677 32.32h4.198a1.375 1.375 0 100-2.75h-4.198a1.375 1.375 0 000 2.75zm-6.288-5.83h10.486a1.375 1.375 0 100-2.75H8.39a1.375 1.375 0 000 2.75zM39.398 10.797A2.163 2.163 0 1041.802 7.2a2.163 2.163 0 00-2.404 3.597zM34.312 26.03h7.333a1.375 1.375 0 000-2.75h-7.333a1.375 1.375 0 000 2.75z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Kanban;
diff --git a/frontend/assets/images/icons/widgets/kanban.svg b/frontend/assets/images/icons/widgets/kanban.svg
deleted file mode 100644
index 1f8cab3656..0000000000
--- a/frontend/assets/images/icons/widgets/kanban.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-kanban" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <line x1="4" y1="4" x2="10" y2="4" />
-  <line x1="14" y1="4" x2="20" y2="4" />
-  <rect x="4" y="8" width="6" height="12" rx="2" />
-  <rect x="14" y="8" width="6" height="6" rx="2" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/kanbanboard.jsx b/frontend/assets/images/icons/widgets/kanbanboard.jsx
new file mode 100644
index 0000000000..aa2ebd2625
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/kanbanboard.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Kanbanboard = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="44"
+    height="44"
+    fill="none"
+    stroke="#597e8d"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    className="icon icon-tabler icon-tabler-layout-board-split"
+    viewBox="0 0 24 24"
+  >
+    <path stroke="none" d="M0 0h24v24H0z"></path>
+    <rect width="16" height="16" x="4" y="4" rx="2"></rect>
+    <path d="M4 12h8M12 15h8M12 9h8M12 4v16"></path>
+  </svg>
+);
+
+export default Kanbanboard;
diff --git a/frontend/assets/images/icons/widgets/kanbanboard.svg b/frontend/assets/images/icons/widgets/kanbanboard.svg
deleted file mode 100644
index b826e73a7a..0000000000
--- a/frontend/assets/images/icons/widgets/kanbanboard.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-board-split" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#597e8d" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <rect x="4" y="4" width="16" height="16" rx="2" />
-  <path d="M4 12h8" />
-  <path d="M12 15h8" />
-  <path d="M12 9h8" />
-  <path d="M12 4v16" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/link.jsx b/frontend/assets/images/icons/widgets/link.jsx
new file mode 100644
index 0000000000..3a16208d01
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/link.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+const Link = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#3E63DD"
+      d="M40.974 7.915a4.1 4.1 0 00-5.799 0L33.341 9.75a2.357 2.357 0 11-3.333-3.333l1.834-1.834a8.814 8.814 0 1112.465 12.465l-1.834 1.834a2.357 2.357 0 11-3.334-3.334l1.835-1.834a4.1 4.1 0 000-5.798z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M36.782 12.107c.92.92.92 2.413 0 3.333l-4.857 4.857a2.357 2.357 0 01-3.334-3.333l4.858-4.857c.92-.92 2.413-.92 3.333 0z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M26.352 16.738a2.357 2.357 0 00-3.333-3.333l-1.834 1.834A8.814 8.814 0 1033.65 27.704l1.834-1.834a2.357 2.357 0 00-3.334-3.333l-1.833 1.834a4.1 4.1 0 11-5.799-5.799l1.834-1.834z"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M18.407 30.482c4.976 4.976 13.044 4.976 18.02 0l1.033-1.032v11.836A4.714 4.714 0 0132.746 46H7.603a4.714 4.714 0 01-4.714-4.714V16.143a4.714 4.714 0 014.714-4.715h11.836l-1.032 1.033c-4.977 4.976-4.977 13.045 0 18.02z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Link;
diff --git a/frontend/assets/images/icons/widgets/link.svg b/frontend/assets/images/icons/widgets/link.svg
deleted file mode 100644
index f1b4d3af81..0000000000
--- a/frontend/assets/images/icons/widgets/link.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
-  <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/listview.jsx b/frontend/assets/images/icons/widgets/listview.jsx
new file mode 100644
index 0000000000..fe2a53ab7f
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/listview.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Listview = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M6.032 3.57a3.143 3.143 0 00-3.143 3.143v12.573a3.143 3.143 0 003.143 3.142h12.57a3.143 3.143 0 003.144-3.142V6.713a3.143 3.143 0 00-3.143-3.143H6.032zm0 22a3.143 3.143 0 00-3.143 3.143v12.573a3.143 3.143 0 003.143 3.142h12.57a3.143 3.143 0 003.144-3.142V28.713a3.143 3.143 0 00-3.143-3.143H6.032z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M26.46 5.143a2.357 2.357 0 012.357-2.357h15.714a2.357 2.357 0 010 4.714H28.817a2.357 2.357 0 01-2.357-2.357zm0 9.428a2.357 2.357 0 012.357-2.357h15.714a2.357 2.357 0 010 4.714H28.817a2.357 2.357 0 01-2.357-2.357zm2.357 7.072a2.357 2.357 0 100 4.714h15.714a2.357 2.357 0 000-4.714H28.817zM26.46 33.428a2.357 2.357 0 012.357-2.357h15.714a2.357 2.357 0 010 4.715H28.817a2.357 2.357 0 01-2.357-2.358zm2.357 7.072a2.357 2.357 0 100 4.714h15.714a2.357 2.357 0 000-4.714H28.817z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Listview;
diff --git a/frontend/assets/images/icons/widgets/listview.svg b/frontend/assets/images/icons/widgets/listview.svg
deleted file mode 100644
index 092b6c6d9f..0000000000
--- a/frontend/assets/images/icons/widgets/listview.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 5H21" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13 9H18" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13 15H21" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13 19H18" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 4H4C3.44772 4 3 4.44772 3 5V9C3 9.55228 3.44772 10 4 10H8C8.55228 10 9 9.55228 9 9V5C9 4.44772 8.55228 4 8 4Z" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 14H4C3.44772 14 3 14.4477 3 15V19C3 19.5523 3.44772 20 4 20H8C8.55228 20 9 19.5523 9 19V15C9 14.4477 8.55228 14 8 14Z" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/map.jsx b/frontend/assets/images/icons/widgets/map.jsx
new file mode 100644
index 0000000000..f51a412322
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/map.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Map = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M24.889 2c-12.15 0-22 9.85-22 22s9.85 22 22 22 22-9.85 22-22-9.85-22-22-22z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M33.978 14.91c.371.372.532.905.43 1.42l-2.31 11.546-.017-.017L21.03 16.807l-.017-.017 11.546-2.309a1.571 1.571 0 011.42.43zm-16.299 5.214L15.37 31.67a1.571 1.571 0 001.85 1.849l11.546-2.31a2.709 2.709 0 01-.017-.017L17.696 20.142l-.017-.017z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Map;
diff --git a/frontend/assets/images/icons/widgets/map.svg b/frontend/assets/images/icons/widgets/map.svg
deleted file mode 100644
index 7e2426876d..0000000000
--- a/frontend/assets/images/icons/widgets/map.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5 12.5H15.8333L18.3333 18.3333H1.66663L4.16663 12.5H7.49996H12.5ZM10.8333 6.66663C10.8333 6.88764 10.7455 7.0996 10.5892 7.25588C10.4329 7.41216 10.221 7.49996 9.99996 7.49996C9.77895 7.49996 9.56698 7.41216 9.4107 7.25588C9.25442 7.0996 9.16663 6.88764 9.16663 6.66663C9.16663 6.44561 9.25442 6.23365 9.4107 6.07737C9.56698 5.92109 9.77895 5.83329 9.99996 5.83329C10.221 5.83329 10.4329 5.92109 10.5892 6.07737C10.7455 6.23365 10.8333 6.44561 10.8333 6.66663ZM4.99996 6.66663C4.99996 10.8333 9.99996 15 9.99996 15C9.99996 15 15 10.8333 15 6.66663C15 3.81913 12.7616 1.66663 9.99996 1.66663C7.23829 1.66663 4.99996 3.81913 4.99996 6.66663Z" stroke="#61656F" stroke-width="2"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/modal.jsx b/frontend/assets/images/icons/widgets/modal.jsx
new file mode 100644
index 0000000000..061ea399ca
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/modal.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Modal = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M17.163 2h24.306c2.993 0 5.42 2.414 5.42 5.392v20.531c0 2.979-2.427 5.393-5.42 5.393h-4.541v-5.463c0-5.162-4.206-9.347-9.395-9.347h-15.79V7.394C11.743 4.415 14.17 2 17.163 2z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M41.469 2H17.163c-2.993 0-5.42 2.415-5.42 5.393v4.005H46.89V7.392c0-2.978-2.427-5.392-5.42-5.392z"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M27.533 22.46l-19.225.001c-2.993 0-5.42 2.415-5.42 5.393v12.754c0 2.978 2.427 5.392 5.42 5.392h19.225c2.993 0 5.42-2.415 5.42-5.393V27.853c0-2.978-2.427-5.392-5.42-5.392z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M27.533 22.46l-19.225.001c-2.993 0-5.42 2.415-5.42 5.393v4.108h30.065v-4.109c0-2.978-2.427-5.392-5.42-5.392z"
+    ></path>
+  </svg>
+);
+
+export default Modal;
diff --git a/frontend/assets/images/icons/widgets/modal.svg b/frontend/assets/images/icons/widgets/modal.svg
deleted file mode 100644
index 85dd30c234..0000000000
--- a/frontend/assets/images/icons/widgets/modal.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 1.25V18.75H20V1.25H0ZM18.75 17.5H1.25V5H18.75V17.5ZM18.75 3.75H17.5V2.5H18.75V3.75Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/multiselect.jsx b/frontend/assets/images/icons/widgets/multiselect.jsx
new file mode 100644
index 0000000000..18920c4e73
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/multiselect.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Multiselect = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M13.889 8.8a4.714 4.714 0 014.714-4.715h23.571A4.714 4.714 0 0146.89 8.8v8.115a4.714 4.714 0 01-4.715 4.714H18.603a4.714 4.714 0 01-4.714-4.714V8.799zm0 22.286a4.714 4.714 0 014.714-4.714h23.571a4.714 4.714 0 014.715 4.714V39.2a4.714 4.714 0 01-4.715 4.715H18.603a4.714 4.714 0 01-4.714-4.715v-8.114z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M6.032 4.085a3.143 3.143 0 100 6.286 3.143 3.143 0 000-6.286zm0 22.287a3.143 3.143 0 100 6.286 3.143 3.143 0 000-6.286z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Multiselect;
diff --git a/frontend/assets/images/icons/widgets/multiselect.svg b/frontend/assets/images/icons/widgets/multiselect.svg
deleted file mode 100644
index 7256449a45..0000000000
--- a/frontend/assets/images/icons/widgets/multiselect.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.02536 0.307442C6.22223 0.504552 6.33281 0.771744 6.33281 1.05033C6.33281 1.32891 6.22223 1.5961 6.02536 1.79321L3.22203 4.59655C3.02492 4.79341 2.75773 4.90399 2.47914 4.90399C2.20056 4.90399 1.93337 4.79341 1.73626 4.59655L0.33459 3.19488C0.148897 2.9956 0.047804 2.73202 0.0526092 2.45967C0.0574145 2.18733 0.167743 1.92748 0.36035 1.73487C0.552958 1.54226 0.812806 1.43194 1.08515 1.42713C1.3575 1.42232 1.62108 1.52342 1.82036 1.70911L2.47914 2.36789L4.5396 0.307442C4.73671 0.110577 5.0039 0 5.28248 0C5.56106 0 5.82825 0.110577 6.02536 0.307442ZM7.38498 2.80241C7.38498 2.5236 7.49574 2.25621 7.69289 2.05906C7.89003 1.86192 8.15742 1.75116 8.43623 1.75116H18.9487C19.2276 1.75116 19.4949 1.86192 19.6921 2.05906C19.8892 2.25621 20 2.5236 20 2.80241C20 3.08122 19.8892 3.34861 19.6921 3.54576C19.4949 3.74291 19.2276 3.85366 18.9487 3.85366H8.43623C8.15742 3.85366 7.89003 3.74291 7.69289 3.54576C7.49574 3.34861 7.38498 3.08122 7.38498 2.80241ZM7.38498 8.7595C7.38498 8.48069 7.49574 8.2133 7.69289 8.01616C7.89003 7.81901 8.15742 7.70825 8.43623 7.70825H18.9487C19.2276 7.70825 19.4949 7.81901 19.6921 8.01616C19.8892 8.2133 20 8.48069 20 8.7595C20 9.03831 19.8892 9.3057 19.6921 9.50285C19.4949 9.7 19.2276 9.81075 18.9487 9.81075H8.43623C8.15742 9.81075 7.89003 9.7 7.69289 9.50285C7.49574 9.3057 7.38498 9.03831 7.38498 8.7595ZM6.02536 5.91412C6.22223 6.11123 6.33281 6.37842 6.33281 6.657C6.33281 6.93558 6.22223 7.20277 6.02536 7.39988L3.22203 10.2032C3.02492 10.4001 2.75773 10.5107 2.47914 10.5107C2.20056 10.5107 1.93337 10.4001 1.73626 10.2032L0.33459 8.80155C0.231306 8.70531 0.148464 8.58925 0.0910065 8.4603C0.0335494 8.33135 0.00265407 8.19214 0.000163604 8.05099C-0.00232686 7.90984 0.0236385 7.76963 0.0765109 7.63873C0.129383 7.50783 0.208079 7.38893 0.307904 7.2891C0.40773 7.18927 0.526638 7.11058 0.657538 7.05771C0.788437 7.00483 0.928645 6.97887 1.0698 6.98136C1.21095 6.98385 1.35015 7.01474 1.47911 7.0722C1.60806 7.12966 1.72412 7.2125 1.82036 7.31579L2.47914 7.97457L4.5396 5.91412C4.73671 5.71725 5.0039 5.60667 5.28248 5.60667C5.56106 5.60667 5.82825 5.71725 6.02536 5.91412ZM7.38498 14.7166C7.38498 14.4378 7.49574 14.1704 7.69289 13.9732C7.89003 13.7761 8.15742 13.6653 8.43623 13.6653H18.9487C19.2276 13.6653 19.4949 13.7761 19.6921 13.9732C19.8892 14.1704 20 14.4378 20 14.7166C20 14.9954 19.8892 15.2628 19.6921 15.4599C19.4949 15.6571 19.2276 15.7678 18.9487 15.7678H8.43623C8.15742 15.7678 7.89003 15.6571 7.69289 15.4599C7.49574 15.2628 7.38498 14.9954 7.38498 14.7166Z" fill="#61656F"/>
-<path d="M6.33281 12.2637C6.33281 11.9851 6.22223 11.7179 6.02536 11.5208C5.82825 11.3239 5.56106 11.2133 5.28248 11.2133C5.0039 11.2133 4.73671 11.3239 4.5396 11.5208L2.47914 13.5812L1.82036 12.9225C1.72412 12.8192 1.60806 12.7363 1.47911 12.6789C1.35015 12.6214 1.21095 12.5905 1.0698 12.588C0.928645 12.5855 0.788437 12.6115 0.657538 12.6644C0.526638 12.7173 0.40773 12.7959 0.307904 12.8958C0.208079 12.9956 0.129383 13.1145 0.0765109 13.2454C0.0236385 13.3763 -0.00232686 13.5165 0.000163604 13.6577C0.00265407 13.7988 0.0335494 13.938 0.0910065 14.067C0.148464 14.1959 0.231306 14.312 0.33459 14.4082L1.73626 15.8099C1.93337 16.0068 2.20056 16.1173 2.47914 16.1173C2.75773 16.1173 3.02492 16.0068 3.22203 15.8099L6.02536 13.0066C6.22223 12.8094 6.33281 12.5423 6.33281 12.2637Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/numberinput.jsx b/frontend/assets/images/icons/widgets/numberinput.jsx
new file mode 100644
index 0000000000..16aefac49b
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/numberinput.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Numberinput = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M7.603 9.857a4.714 4.714 0 00-4.714 4.715v18.857a4.714 4.714 0 004.714 4.714h34.571a4.714 4.714 0 004.715-4.714V14.57a4.714 4.714 0 00-4.715-4.714H7.603z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M17.425 18.266a1.964 1.964 0 00-3.929 0 .903.903 0 01-.902.903h-.956a1.964 1.964 0 000 3.928h.956c.308 0 .61-.029.902-.084v4.757h-1.858a1.964 1.964 0 000 3.928h7.646a1.964 1.964 0 000-3.928h-1.859v-9.504zm9.04 9.504a1.964 1.964 0 000 3.928h5.45a1.964 1.964 0 000-3.928h-5.45z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Numberinput;
diff --git a/frontend/assets/images/icons/widgets/numberinput.svg b/frontend/assets/images/icons/widgets/numberinput.svg
deleted file mode 100644
index c1175e1aab..0000000000
--- a/frontend/assets/images/icons/widgets/numberinput.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.997 2.63211C13.4143 2.21705 12.7143 1.99758 11.9985 2.00579H10V3.61117H11.9985C12.4915 3.56937 12.931 3.91948 13.0006 4.40844V15.5919C12.9337 16.0831 12.4934 16.4359 11.9985 16.3944H10V17.9998H11.9985C12.7135 18.0073 13.4124 17.79 13.997 17.3791C14.5831 17.7871 15.2813 18.0039 15.9959 17.9998H18V16.3944H16.0011C15.5062 16.4359 15.066 16.0831 14.999 15.5919V4.40271C15.0685 3.91338 15.5081 3.56364 16.0011 3.60544H17.9996V2.00006H16.0011C15.2835 1.99595 14.5823 2.21691 13.997 2.6316V2.63211Z" fill="#61656F"/>
-<path d="M8 16H2V11.2857C2 10.8689 2.15804 10.4692 2.43934 10.1745C2.72064 9.87985 3.10218 9.71429 3.5 9.71429H6.5V6.57143H2V5H6.5C6.89782 5 7.27936 5.16556 7.56066 5.46026C7.84196 5.75496 8 6.15466 8 6.57143V9.71429C8 10.1311 7.84196 10.5308 7.56066 10.8255C7.27936 11.1202 6.89782 11.2857 6.5 11.2857H3.5V14.4286H8V16Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/pagination.jsx b/frontend/assets/images/icons/widgets/pagination.jsx
new file mode 100644
index 0000000000..d871bc37a1
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/pagination.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Pagination = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M9.174 41.286A4.714 4.714 0 0013.89 46h22a4.714 4.714 0 004.714-4.714V13.38c0-1.25-.497-2.45-1.38-3.333L32.554 3.38A4.714 4.714 0 0029.222 2H13.889a4.714 4.714 0 00-4.715 4.714v34.572z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M5.246 23.214a2.357 2.357 0 000 4.715h3.143a2.357 2.357 0 100-4.715H5.246zm12.048 0a2.357 2.357 0 000 4.715h3.142a2.357 2.357 0 100-4.715h-3.142zm9.69 2.357a2.357 2.357 0 012.357-2.357h3.143a2.357 2.357 0 010 4.715H29.34a2.357 2.357 0 01-2.357-2.358zm14.405-2.357a2.357 2.357 0 000 4.715h3.142a2.357 2.357 0 100-4.715H41.39z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Pagination;
diff --git a/frontend/assets/images/icons/widgets/pagination.svg b/frontend/assets/images/icons/widgets/pagination.svg
deleted file mode 100644
index 3bca54e3e4..0000000000
--- a/frontend/assets/images/icons/widgets/pagination.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1263_16114)">
-<path d="M11 16V4L7 7.74996" stroke="#61656F" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3.8165 13.8158C3.87283 13.7577 3.91751 13.689 3.94798 13.6131C3.97847 13.5372 3.99415 13.456 3.99415 13.3739C3.99415 13.2918 3.97847 13.2105 3.94798 13.1346C3.91751 13.0588 3.87283 12.9898 3.8165 12.9319L1.46555 10.4995L3.82258 8.06701C3.93617 7.94978 4 7.79081 4 7.62503C4 7.45927 3.93617 7.30028 3.82258 7.18307C3.709 7.06584 3.55494 7 3.39431 7C3.23366 7 3.07961 7.06584 2.96602 7.18307L0.177689 10.0606C-0.0592295 10.3051 -0.0592295 10.7 0.177689 10.9445L2.96602 13.822C3.07985 13.9372 3.23317 14.0011 3.39252 14C3.55187 13.9987 3.70429 13.9325 3.8165 13.8158Z" fill="#61656F"/>
-<path d="M16.1835 7.18422C16.1272 7.24225 16.0825 7.31103 16.052 7.38691C16.0215 7.46278 16.0058 7.54403 16.0058 7.62614C16.0058 7.70825 16.0215 7.78949 16.052 7.86537C16.0825 7.94124 16.1272 8.01024 16.1835 8.06806L18.5345 10.5005L16.1774 12.933C16.0638 13.0502 16 13.2092 16 13.375C16 13.5407 16.0638 13.6997 16.1774 13.8169C16.291 13.9342 16.4451 14 16.6057 14C16.7663 14 16.9204 13.9342 17.034 13.8169L19.8223 10.9394C20.0592 10.6949 20.0592 10.3 19.8223 10.0555L17.034 7.17798C16.9202 7.06278 16.7668 6.99894 16.6075 7.00001C16.4481 7.0013 16.2957 7.0675 16.1835 7.18422Z" fill="#61656F"/>
-</g>
-<defs>
-<clipPath id="clip0_1263_16114">
-<rect width="20" height="20" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/passwordinput.jsx b/frontend/assets/images/icons/widgets/passwordinput.jsx
new file mode 100644
index 0000000000..1d09b85b24
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/passwordinput.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Passwordinput = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M2.889 15a4.714 4.714 0 014.714-4.714h34.571A4.714 4.714 0 0146.89 15v15.714a4.714 4.714 0 01-4.715 4.715H7.603a4.714 4.714 0 01-4.714-4.715V15z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M12.882 22.857a3.15 3.15 0 11-6.3 0 3.15 3.15 0 016.3 0zm11 0a3.15 3.15 0 11-6.3 0 3.15 3.15 0 016.3 0zm7.064 1.179a1.964 1.964 0 100 3.928h6.286a1.964 1.964 0 000-3.928h-6.286z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Passwordinput;
diff --git a/frontend/assets/images/icons/widgets/passwordinput.svg b/frontend/assets/images/icons/widgets/passwordinput.svg
deleted file mode 100644
index b5ddb4b408..0000000000
--- a/frontend/assets/images/icons/widgets/passwordinput.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.61691 8.38657C9.47711 8.25409 9.29219 8.18196 9.10113 8.18539C8.91007 8.18882 8.72777 8.26753 8.59265 8.40494C8.45752 8.54236 8.38012 8.72774 8.37675 8.92204C8.37338 9.11634 8.4443 9.30439 8.57458 9.44657L9.28258 10.1666L8.57458 10.8866C8.50212 10.9552 8.444 11.038 8.40369 11.13C8.36338 11.222 8.34171 11.3213 8.33996 11.422C8.33821 11.5227 8.35643 11.6228 8.39352 11.7162C8.43061 11.8096 8.48582 11.8944 8.55585 11.9656C8.62589 12.0368 8.70931 12.093 8.80114 12.1307C8.89297 12.1684 8.99133 12.1869 9.09036 12.1852C9.18938 12.1834 9.28704 12.1613 9.37751 12.1203C9.46797 12.0794 9.54939 12.0203 9.61691 11.9466L10.3249 11.2266L11.0329 11.9466C11.1714 12.0871 11.3591 12.166 11.5548 12.1658C11.7504 12.1656 11.938 12.0864 12.0762 11.9456C12.2145 11.8047 12.292 11.6138 12.2918 11.4149C12.2916 11.2159 12.2137 11.0251 12.0753 10.8846L11.3682 10.1666L12.0762 9.44657C12.1466 9.37735 12.2028 9.29456 12.2414 9.20304C12.28 9.11152 12.3003 9.01309 12.3011 8.91351C12.3019 8.81393 12.2832 8.71517 12.2461 8.62302C12.209 8.53087 12.1542 8.44716 12.0849 8.37677C12.0156 8.30638 11.9332 8.25073 11.8426 8.21307C11.7519 8.1754 11.6548 8.15647 11.5569 8.15738C11.459 8.15829 11.3622 8.17903 11.2722 8.21838C11.1823 8.25773 11.1009 8.3149 11.0329 8.38657L10.3249 9.10657L9.61691 8.38657V8.38657Z" fill="#61656F"/>
-<path d="M3.16612 8.38666C3.30441 8.24621 3.49185 8.16732 3.68729 8.16732C3.88273 8.16732 4.07018 8.24621 4.20846 8.38666L4.91646 9.10666L5.62447 8.38666C5.69199 8.31297 5.77341 8.25387 5.86387 8.21288C5.95434 8.17188 6.052 8.14984 6.15102 8.14807C6.25005 8.14629 6.34841 8.16481 6.44024 8.20254C6.53207 8.24026 6.61549 8.2964 6.68553 8.36762C6.75556 8.43884 6.81077 8.52367 6.84786 8.61706C6.88495 8.71045 6.90317 8.81048 6.90142 8.91118C6.89967 9.01188 6.878 9.1112 6.83769 9.2032C6.79738 9.2952 6.73926 9.378 6.6668 9.44666L5.95979 10.1667L6.66779 10.8847C6.73636 10.9543 6.79076 11.037 6.8279 11.1281C6.86503 11.2191 6.88417 11.3167 6.88421 11.4153C6.88426 11.5139 6.86521 11.6115 6.82816 11.7026C6.79111 11.7937 6.73679 11.8764 6.66828 11.9462C6.59977 12.0159 6.51843 12.0712 6.4289 12.109C6.33937 12.1467 6.2434 12.1662 6.14648 12.1663C6.04955 12.1663 5.95356 12.1469 5.864 12.1093C5.77443 12.0716 5.69304 12.0163 5.62447 11.9467L4.91646 11.2267L4.20846 11.9467C4.06866 12.0791 3.88374 12.1513 3.69268 12.1478C3.50162 12.1444 3.31932 12.0657 3.1842 11.9283C3.04907 11.7909 2.97167 11.6055 2.9683 11.4112C2.96493 11.2169 3.03585 11.0288 3.16612 10.8867L3.87413 10.1667L3.16612 9.44666C3.02801 9.30603 2.95044 9.11541 2.95044 8.91666C2.95044 8.71791 3.02801 8.52728 3.16612 8.38666V8.38666Z" fill="#61656F"/>
-<path d="M14.2584 11.6666C14.0628 11.6666 13.8752 11.7456 13.7369 11.8863C13.5986 12.0269 13.5209 12.2177 13.5209 12.4166C13.5209 12.6155 13.5986 12.8063 13.7369 12.947C13.8752 13.0876 14.0628 13.1666 14.2584 13.1666H15.9792C16.1748 13.1666 16.3624 13.0876 16.5007 12.947C16.639 12.8063 16.7167 12.6155 16.7167 12.4166C16.7167 12.2177 16.639 12.0269 16.5007 11.8863C16.3624 11.7456 16.1748 11.6666 15.9792 11.6666H14.2584Z" fill="#61656F"/>
-<path d="M3.19585 3.16663C2.34826 3.16663 1.53538 3.50904 0.936042 4.11853C0.336704 4.72802 0 5.55467 0 6.41663V13.9166C0 14.7786 0.336704 15.6052 0.936042 16.2147C1.53538 16.8242 2.34826 17.1666 3.19585 17.1666H16.4709C16.8906 17.1666 17.3062 17.0826 17.6939 16.9192C18.0816 16.7559 18.4339 16.5165 18.7307 16.2147C19.0275 15.9129 19.2629 15.5547 19.4235 15.1603C19.5841 14.766 19.6667 14.3434 19.6667 13.9166V6.41663C19.6667 5.98983 19.5841 5.56721 19.4235 5.1729C19.2629 4.7786 19.0275 4.42032 18.7307 4.11853C18.4339 3.81674 18.0816 3.57735 17.6939 3.41402C17.3062 3.25069 16.8906 3.16663 16.4709 3.16663H3.19585ZM1.47501 6.41663C1.47501 5.44963 2.24496 4.66663 3.19585 4.66663H16.4709C17.4218 4.66663 18.1917 5.44963 18.1917 6.41663V13.9166C18.1917 14.3808 18.0104 14.8259 17.6877 15.1541C17.365 15.4823 16.9273 15.6666 16.4709 15.6666H3.19585C2.73945 15.6666 2.30175 15.4823 1.97903 15.1541C1.65631 14.8259 1.47501 14.3808 1.47501 13.9166V6.41663Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/pdf.jsx b/frontend/assets/images/icons/widgets/pdf.jsx
new file mode 100644
index 0000000000..28409abd86
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/pdf.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Pdf = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M10.939 2a4.715 4.715 0 00-4.715 4.715v34.57A4.715 4.715 0 0010.94 46h27.9a4.715 4.715 0 004.714-4.715V16.14a7.408 7.408 0 00-2.163-5.232l-6.58-6.726-.013-.012A7.409 7.409 0 0029.56 2h-18.62z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M22.325 16.587c.002-1.527-.09-2.942-.341-4.006-.13-.548-.367-1.313-.9-1.9-.3-.33-.754-.67-1.375-.792a2.52 2.52 0 00-1.612.227c-.972.48-1.39 1.37-1.494 2.151-.093.698.04 1.395.206 1.965.298 1.027.87 2.21 1.57 3.419-.12 4.074-.863 9.485-1.905 13.203-1.112.546-2.144 1.18-2.843 1.905-.434.45-.964 1.164-1.034 2.116-.079 1.085.466 1.928 1.112 2.47.652.546 1.56.896 2.573.648.883-.216 1.494-.806 1.878-1.284.616-.767 1.114-1.836 1.524-2.981 2.892-1.162 6.842-2.184 10.02-2.598 1.035.831 2.1 1.537 3.095 1.9.602.22 1.427.408 2.289.176.996-.268 1.66-.988 1.987-1.836.325-.84.363-1.897-.313-2.816-.57-.775-1.417-1.113-2.033-1.279-1.044-.281-2.373-.313-3.74-.22-2.959-2.704-6.5-7.011-8.664-10.468zm3.79 11.172a64.338 64.338 0 01-4.186-4.909 68.483 68.483 0 01-.994 6.263c1.665-.53 3.45-.996 5.18-1.354z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Pdf;
diff --git a/frontend/assets/images/icons/widgets/pdf.svg b/frontend/assets/images/icons/widgets/pdf.svg
deleted file mode 100644
index e50c0d128a..0000000000
--- a/frontend/assets/images/icons/widgets/pdf.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 115.28 122.88" style="enable-background:new 0 0 115.28 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M25.38,57h64.88V37.34H69.59c-2.17,0-5.19-1.17-6.62-2.6c-1.43-1.43-2.3-4.01-2.3-6.17V7.64l0,0H8.15 c-0.18,0-0.32,0.09-0.41,0.18C7.59,7.92,7.55,8.05,7.55,8.24v106.45c0,0.14,0.09,0.32,0.18,0.41c0.09,0.14,0.28,0.18,0.41,0.18 c22.78,0,58.09,0,81.51,0c0.18,0,0.17-0.09,0.27-0.18c0.14-0.09,0.33-0.28,0.33-0.41v-11.16H25.38c-4.14,0-7.56-3.4-7.56-7.56 V64.55C17.82,60.4,21.22,57,25.38,57L25.38,57z M29.5,67.4h13.19c2.87,0,5.02,0.68,6.46,2.05c1.43,1.37,2.14,3.31,2.14,5.84 c0,2.59-0.78,4.62-2.34,6.08c-1.56,1.46-3.94,2.19-7.14,2.19h-4.35v9.49H29.5V67.4L29.5,67.4z M37.45,78.37h1.95 c1.54,0,2.62-0.27,3.24-0.8c0.62-0.53,0.93-1.21,0.93-2.04c0-0.81-0.27-1.49-0.81-2.05c-0.54-0.56-1.55-0.84-3.05-0.84h-2.27V78.37 L37.45,78.37z M54.99,67.4h11.78c2.32,0,4.2,0.32,5.63,0.94c1.43,0.63,2.61,1.53,3.55,2.71c0.93,1.18,1.61,2.55,2.02,4.11 c0.42,1.56,0.63,3.22,0.63,4.97c0,2.74-0.31,4.87-0.94,6.38c-0.62,1.51-1.49,2.78-2.6,3.8c-1.11,1.02-2.3,1.7-3.57,2.04 c-1.74,0.47-3.31,0.7-4.72,0.7H54.99V67.4L54.99,67.4z M62.9,73.21v14.01h1.95c1.66,0,2.84-0.19,3.55-0.55 c0.7-0.37,1.25-1.01,1.65-1.92c0.4-0.92,0.6-2.4,0.6-4.45c0-2.72-0.44-4.57-1.33-5.58c-0.89-1-2.36-1.5-4.42-1.5H62.9L62.9,73.21z M82.25,67.4h19.6v5.52H90.21v4.48h9.96v5.2h-9.96v10.46h-7.95V67.4L82.25,67.4z M97.79,57h9.93c4.16,0,7.56,3.41,7.56,7.56v31.42 c0,4.15-3.41,7.56-7.56,7.56h-9.93v13.55c0,1.61-0.65,3.04-1.7,4.1c-1.06,1.06-2.49,1.7-4.1,1.7c-29.44,0-56.59,0-86.18,0 c-1.61,0-3.04-0.64-4.1-1.7c-1.06-1.06-1.7-2.49-1.7-4.1V5.85c0-1.61,0.65-3.04,1.7-4.1c1.06-1.06,2.53-1.7,4.1-1.7h58.72 C64.66,0,64.8,0,64.94,0c0.64,0,1.29,0.28,1.75,0.69h0.09c0.09,0.05,0.14,0.09,0.23,0.18l29.99,30.36c0.51,0.51,0.88,1.2,0.88,1.98 c0,0.23-0.05,0.41-0.09,0.65V57L97.79,57z M67.52,27.97V8.94l21.43,21.7H70.19c-0.74,0-1.38-0.32-1.89-0.78 C67.84,29.4,67.52,28.71,67.52,27.97L67.52,27.97z" fill='#61656F'/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/qrscanner.jsx b/frontend/assets/images/icons/widgets/qrscanner.jsx
new file mode 100644
index 0000000000..7fd0c4fed3
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/qrscanner.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Qrscanner = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M8.29 2A5.401 5.401 0 002.889 7.4v4.527a2.383 2.383 0 104.766 0V7.4a.635.635 0 01.635-.635h4.527a2.383 2.383 0 100-4.766H8.29zm28.67 0a2.383 2.383 0 000 4.766h4.528a.635.635 0 01.635.635v4.527a2.383 2.383 0 004.766 0V7.401a5.402 5.402 0 00-5.401-5.4H36.96zM5.273 33.69a2.383 2.383 0 012.383 2.383V40.6a.635.635 0 00.635.635h4.527a2.383 2.383 0 110 4.766H8.29A5.402 5.402 0 012.889 40.6v-4.527a2.383 2.383 0 012.383-2.383zm41.617 2.383a2.383 2.383 0 00-4.767 0V40.6a.635.635 0 01-.634.635H36.96a2.383 2.383 0 000 4.766h4.527a5.402 5.402 0 005.4-5.401v-4.527z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M15.343 10.482a3.972 3.972 0 00-3.972 3.972v6.586a3.972 3.972 0 003.972 3.972h6.587A3.972 3.972 0 0025.9 21.04v-6.586a3.972 3.972 0 00-3.971-3.972h-6.587zm.794 9.764v-4.998h4.998v4.998h-4.998zm0 10.713a2.383 2.383 0 10-4.766 0v4.175a2.383 2.383 0 002.383 2.383h4.176a2.383 2.383 0 100-4.766h-1.793V30.96zm4.64 0a2.383 2.383 0 012.383-2.383h1.728a2.383 2.383 0 012.383 2.383v4.175a2.383 2.383 0 01-4.766 0v-1.883a2.384 2.384 0 01-1.729-2.292zM34.23 12.865a2.383 2.383 0 10-4.767 0v4.176a2.383 2.383 0 002.384 2.383h4.175a2.383 2.383 0 100-4.767h-1.792v-1.792zM29.464 24a2.383 2.383 0 012.384-2.383h4.175A2.383 2.383 0 0138.406 24v2.03a2.383 2.383 0 01-4.74.353h-1.818A2.383 2.383 0 0129.465 24zm4.767 6.959a2.383 2.383 0 10-4.767 0v4.175a2.383 2.383 0 002.384 2.383h4.175a2.383 2.383 0 100-4.766h-1.792V30.96z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Qrscanner;
diff --git a/frontend/assets/images/icons/widgets/qrscanner.svg b/frontend/assets/images/icons/widgets/qrscanner.svg
deleted file mode 100644
index 9dd1cb7e97..0000000000
--- a/frontend/assets/images/icons/widgets/qrscanner.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.33337 3.33337H5.5556V5.5556H3.33337V3.33337Z" fill="#61656F"/>
-<path d="M0 8.88889V0H8.88889V8.88889H0ZM2.22222 2.22222V6.66667H6.66667V2.22222H2.22222Z" fill="#61656F"/>
-<path d="M11.1111 11.1111H14.4444V13.3333H11.1111V11.1111Z" fill="#61656F"/>
-<path d="M14.4444 13.3333H16.6666V11.1111H20V14.4444H16.6666V15.5555H17.7778V16.6666H20V20H17.7778V17.7778H15.5555V20H11.1111V15.5555H13.3333V17.7778H14.4444V13.3333Z" fill="#61656F"/>
-<path d="M16.6667 3.33337H14.4445V5.5556H16.6667V3.33337Z" fill="#61656F"/>
-<path d="M11.1111 0V8.88889H20V0H11.1111ZM17.7778 2.22222V6.66667H13.3333V2.22222H17.7778Z" fill="#61656F"/>
-<path d="M3.33337 14.4445H5.5556V16.6667H3.33337V14.4445Z" fill="#61656F"/>
-<path d="M0 20V11.1111H8.88889V20H0ZM2.22222 13.3333V17.7778H6.66667V13.3333H2.22222Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/radio-button.jsx b/frontend/assets/images/icons/widgets/radio-button.jsx
new file mode 100644
index 0000000000..ba393ce2c5
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/radio-button.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const RadioButton = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path fill={fill} d="M24.889 46c12.15 0 22-9.85 22-22s-9.85-22-22-22-22 9.85-22 22 9.85 22 22 22z"></path>
+    <path fill="#3E63DD" d="M24.889 33a9 9 0 100-18 9 9 0 000 18z"></path>
+  </svg>
+);
+
+export default RadioButton;
diff --git a/frontend/assets/images/icons/widgets/radio-button.svg b/frontend/assets/images/icons/widgets/radio-button.svg
deleted file mode 100644
index 59e264575e..0000000000
--- a/frontend/assets/images/icons/widgets/radio-button.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.99996 5.83329C7.69996 5.83329 5.83329 7.69996 5.83329 9.99996C5.83329 12.3 7.69996 14.1666 9.99996 14.1666C12.3 14.1666 14.1666 12.3 14.1666 9.99996C14.1666 7.69996 12.3 5.83329 9.99996 5.83329ZM9.99996 1.66663C5.39996 1.66663 1.66663 5.39996 1.66663 9.99996C1.66663 14.6 5.39996 18.3333 9.99996 18.3333C14.6 18.3333 18.3333 14.6 18.3333 9.99996C18.3333 5.39996 14.6 1.66663 9.99996 1.66663ZM9.99996 16.6666C6.31663 16.6666 3.33329 13.6833 3.33329 9.99996C3.33329 6.31663 6.31663 3.33329 9.99996 3.33329C13.6833 3.33329 16.6666 6.31663 16.6666 9.99996C16.6666 13.6833 13.6833 16.6666 9.99996 16.6666Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/rangepicker.jsx b/frontend/assets/images/icons/widgets/rangepicker.jsx
new file mode 100644
index 0000000000..97c1de2521
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/rangepicker.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const RangePicker = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path fill={fill} d="M2.889 16.476V40.5a5.5 5.5 0 005.5 5.5h33a5.5 5.5 0 005.5-5.5V16.476h-44z"></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M13.889 2a3.143 3.143 0 013.143 3.143v1.571h15.714V5.143a3.143 3.143 0 016.286 0v1.571h2.357c2.788 0 5.5 2.08 5.5 5.174v4.604H2.889v-4.604c0-3.093 2.711-5.174 5.5-5.174h2.357V5.143A3.143 3.143 0 0113.889 2zM14.674 31.29a2.357 2.357 0 012.358-2.357h15.714a2.357 2.357 0 110 4.714H17.03a2.357 2.357 0 01-2.357-2.357z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default RangePicker;
diff --git a/frontend/assets/images/icons/widgets/rangeslider.jsx b/frontend/assets/images/icons/widgets/rangeslider.jsx
new file mode 100644
index 0000000000..2fccd59898
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/rangeslider.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Rangeslider = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M2.889 24a2.357 2.357 0 012.357-2.357H44.53a2.357 2.357 0 010 4.714H5.247A2.357 2.357 0 012.889 24z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M2.889 24a2.357 2.357 0 012.357-2.357h24.096a2.357 2.357 0 010 4.714H5.246A2.357 2.357 0 012.889 24z"
+      clipRule="evenodd"
+    ></path>
+    <rect width="5.459" height="13.783" x="27.755" y="17.109" fill="#3E63DD" rx="2.729"></rect>
+  </svg>
+);
+
+export default Rangeslider;
diff --git a/frontend/assets/images/icons/widgets/rangeslider.svg b/frontend/assets/images/icons/widgets/rangeslider.svg
deleted file mode 100644
index 8228d237a5..0000000000
--- a/frontend/assets/images/icons/widgets/rangeslider.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-adjustments-horizontal" width="36" height="36" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <circle cx="14" cy="6" r="2" />
-  <line x1="4" y1="6" x2="12" y2="6" />
-  <line x1="16" y1="6" x2="20" y2="6" />
-  <circle cx="8" cy="12" r="2" />
-  <line x1="4" y1="12" x2="6" y2="12" />
-  <line x1="10" y1="12" x2="20" y2="12" />
-  <circle cx="17" cy="18" r="2" />
-  <line x1="4" y1="18" x2="15" y2="18" />
-  <line x1="19" y1="18" x2="20" y2="18" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/rating.jsx b/frontend/assets/images/icons/widgets/rating.jsx
new file mode 100644
index 0000000000..4e79facf0b
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/rating.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Rating = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path fill={fill} d="M24.889 46c12.15 0 22-9.85 22-22s-9.85-22-22-22-22 9.85-22 22 9.85 22 22 22z"></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M27.101 13.284l-1.395.722 1.407-.7 2.553 5.137 5.66.86a2.482 2.482 0 011.358 4.27l-3.942 3.746.831 5.85a2.482 2.482 0 01-3.658 2.612l-5.026-2.66-5.026 2.66a2.485 2.485 0 01-3.532-1.268 2.482 2.482 0 01-.122-1.368l.96-5.702-4.084-3.91-.032-.03a2.484 2.484 0 011.37-4.196l.024-.004 5.665-.83 2.547-5.123a2.482 2.482 0 014.442-.066z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Rating;
diff --git a/frontend/assets/images/icons/widgets/richtexteditor.jsx b/frontend/assets/images/icons/widgets/richtexteditor.jsx
new file mode 100644
index 0000000000..4eb3456248
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/richtexteditor.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Richtexteditor = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.88867 24C2.88867 22.6982 3.944 21.6428 5.24581 21.6428H44.5315C45.8333 21.6428 46.8887 22.6982 46.8887 24C46.8887 25.3018 45.8333 26.3571 44.5315 26.3571H5.24581C3.944 26.3571 2.88867 25.3018 2.88867 24Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.88867 24C2.88867 22.6982 3.944 21.6428 5.24581 21.6428H29.3421C30.6438 21.6428 31.6992 22.6982 31.6992 24C31.6992 25.3018 30.6438 26.3571 29.3421 26.3571H5.24581C3.944 26.3571 2.88867 25.3018 2.88867 24Z"
+      fill="#3E63DD"
+    />
+    <rect x="27.7549" y="17.1086" width="5.45898" height="13.7825" rx="2.72949" fill="#3E63DD" />
+  </svg>
+);
+
+export default Richtexteditor;
diff --git a/frontend/assets/images/icons/widgets/richtexteditor.svg b/frontend/assets/images/icons/widgets/richtexteditor.svg
deleted file mode 100644
index 0124184b3d..0000000000
--- a/frontend/assets/images/icons/widgets/richtexteditor.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.87502 2.125C1.87502 1.62772 2.07257 1.15081 2.4242 0.799175C2.77583 0.447544 3.25274 0.25 3.75002 0.25H16.25C16.7473 0.25 17.2242 0.447544 17.5759 0.799175C17.9275 1.15081 18.125 1.62772 18.125 2.125V6.57875C18.6622 6.71687 19.1382 7.02973 19.4781 7.46806C19.818 7.9064 20.0025 8.44532 20.0025 9C20.0025 9.55468 19.818 10.0936 19.4781 10.5319C19.1382 10.9703 18.6622 11.2831 18.125 11.4213V15.875C18.125 16.3723 17.9275 16.8492 17.5759 17.2008C17.2242 17.5525 16.7473 17.75 16.25 17.75H3.75002C3.25274 17.75 2.77583 17.5525 2.4242 17.2008C2.07257 16.8492 1.87502 16.3723 1.87502 15.875V11.4213C1.33782 11.2831 0.861807 10.9703 0.521915 10.5319C0.182024 10.0936 -0.00244141 9.55468 -0.00244141 9C-0.00244141 8.44532 0.182024 7.9064 0.521915 7.46806C0.861807 7.02973 1.33782 6.71687 1.87502 6.57875V2.125ZM3.12502 6.57875C3.66223 6.71687 4.13824 7.02973 4.47813 7.46806C4.81803 7.9064 5.00249 8.44532 5.00249 9C5.00249 9.55468 4.81803 10.0936 4.47813 10.5319C4.13824 10.9703 3.66223 11.2831 3.12502 11.4213V15.875C3.12502 16.0408 3.19087 16.1997 3.30808 16.3169C3.42529 16.4342 3.58426 16.5 3.75002 16.5H16.25C16.4158 16.5 16.5748 16.4342 16.692 16.3169C16.8092 16.1997 16.875 16.0408 16.875 15.875V11.4213C16.3378 11.2831 15.8618 10.9703 15.5219 10.5319C15.182 10.0936 14.9976 9.55468 14.9976 9C14.9976 8.44532 15.182 7.9064 15.5219 7.46806C15.8618 7.02973 16.3378 6.71687 16.875 6.57875V2.125C16.875 1.95924 16.8092 1.80027 16.692 1.68306C16.5748 1.56585 16.4158 1.5 16.25 1.5H3.75002C3.58426 1.5 3.42529 1.56585 3.30808 1.68306C3.19087 1.80027 3.12502 1.95924 3.12502 2.125V6.57875ZM2.50002 7.75C2.1685 7.75 1.85056 7.8817 1.61614 8.11612C1.38172 8.35054 1.25002 8.66848 1.25002 9C1.25002 9.33152 1.38172 9.64946 1.61614 9.88388C1.85056 10.1183 2.1685 10.25 2.50002 10.25C2.83155 10.25 3.14949 10.1183 3.38391 9.88388C3.61833 9.64946 3.75002 9.33152 3.75002 9C3.75002 8.66848 3.61833 8.35054 3.38391 8.11612C3.14949 7.8817 2.83155 7.75 2.50002 7.75ZM17.5 7.75C17.1685 7.75 16.8506 7.8817 16.6161 8.11612C16.3817 8.35054 16.25 8.66848 16.25 9C16.25 9.33152 16.3817 9.64946 16.6161 9.88388C16.8506 10.1183 17.1685 10.25 17.5 10.25C17.8315 10.25 18.1495 10.1183 18.3839 9.88388C18.6183 9.64946 18.75 9.33152 18.75 9C18.75 8.66848 18.6183 8.35054 18.3839 8.11612C18.1495 7.8817 17.8315 7.75 17.5 7.75Z" fill="#61656F"/>
-<path d="M14.2925 4H5.70752L5.62502 6.4925H6.10752C6.37002 4.9275 6.87252 4.685 8.82377 4.62375L9.25252 4.61V12.5388C9.25252 13.21 9.10752 13.37 7.94127 13.4738V14H12.0588V13.4738C10.8863 13.37 10.7413 13.2113 10.7413 12.5388V4.61L11.1763 4.6225C13.1263 4.685 13.63 4.9275 13.8925 6.4925H14.375L14.2925 4Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/spinner.jsx b/frontend/assets/images/icons/widgets/spinner.jsx
new file mode 100644
index 0000000000..56bc3d15ae
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/spinner.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+const Spinner = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g fillRule="evenodd" clipPath="url(#clip0_873_270630)" clipRule="evenodd">
+      <path
+        fill={fill}
+        d="M11.529 26.36h-6.28c-1.3 0-2.36-1.06-2.36-2.36 0-1.3 1.06-2.36 2.36-2.36h6.28c1.3 0 2.36 1.06 2.36 2.36 0 1.3-1.06 2.36-2.36 2.36zM17.109 31.78c.92.92.92 2.41 0 3.33l-4.44 4.45c-.92.92-2.42.92-3.34 0-.92-.92-.92-2.42 0-3.34l4.45-4.44c.92-.92 2.41-.92 3.33 0zM17.109 12.89a2.354 2.354 0 11-3.33 3.33l-4.45-4.44c-.92-.92-.92-2.42 0-3.34.92-.92 2.42-.92 3.34 0l4.44 4.45z"
+      ></path>
+      <path
+        fill="#3E63DD"
+        d="M27.249 4.36v6.28c0 1.3-1.06 2.36-2.36 2.36-1.3 0-2.36-1.06-2.36-2.36V4.36c0-1.3 1.06-2.36 2.36-2.36 1.3 0 2.36 1.06 2.36 2.36z"
+      ></path>
+      <path
+        fill={fill}
+        d="M27.249 37.36v6.28c0 1.3-1.06 2.36-2.36 2.36-1.3 0-2.36-1.06-2.36-2.36v-6.28c0-1.3 1.06-2.36 2.36-2.36 1.3 0 2.36 1.06 2.36 2.36zM40.449 36.22c.92.92.92 2.42 0 3.34-.92.92-2.42.92-3.34 0l-4.44-4.45a2.354 2.354 0 113.33-3.33l4.45 4.44z"
+      ></path>
+      <path
+        fill="#3E63DD"
+        d="M32.669 16.22c-.92-.92-.92-2.41 0-3.33l4.44-4.45c.92-.92 2.42-.92 3.34 0 .92.92.92 2.42 0 3.34l-4.45 4.44c-.92.92-2.41.92-3.33 0zM46.889 24c0 1.3-1.06 2.36-2.36 2.36h-6.28c-1.3 0-2.36-1.06-2.36-2.36 0-1.3 1.06-2.36 2.36-2.36h6.28c1.3 0 2.36 1.06 2.36 2.36z"
+      ></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_873_270630">
+        <path fill="#fff" d="M0 0H44V44H0z" transform="translate(2.889 2)"></path>
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Spinner;
diff --git a/frontend/assets/images/icons/widgets/spinner.svg b/frontend/assets/images/icons/widgets/spinner.svg
deleted file mode 100644
index 17314b7d72..0000000000
--- a/frontend/assets/images/icons/widgets/spinner.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-loader" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <line x1="12" y1="6" x2="12" y2="3" />
-  <line x1="16.25" y1="7.75" x2="18.4" y2="5.6" />
-  <line x1="18" y1="12" x2="21" y2="12" />
-  <line x1="16.25" y1="16.25" x2="18.4" y2="18.4" />
-  <line x1="12" y1="18" x2="12" y2="21" />
-  <line x1="7.75" y1="16.25" x2="5.6" y2="18.4" />
-  <line x1="6" y1="12" x2="3" y2="12" />
-  <line x1="7.75" y1="7.75" x2="5.6" y2="5.6" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/starrating.jsx b/frontend/assets/images/icons/widgets/starrating.jsx
new file mode 100644
index 0000000000..18ca8c777a
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/starrating.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Starrating = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.88867 24C2.88867 22.6982 3.944 21.6428 5.24581 21.6428H44.5315C45.8333 21.6428 46.8887 22.6982 46.8887 24C46.8887 25.3018 45.8333 26.3571 44.5315 26.3571H5.24581C3.944 26.3571 2.88867 25.3018 2.88867 24Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.88867 24C2.88867 22.6982 3.944 21.6428 5.24581 21.6428H29.3421C30.6438 21.6428 31.6992 22.6982 31.6992 24C31.6992 25.3018 30.6438 26.3571 29.3421 26.3571H5.24581C3.944 26.3571 2.88867 25.3018 2.88867 24Z"
+      fill="#3E63DD"
+    />
+    <rect x="27.7549" y="17.1086" width="5.45898" height="13.7825" rx="2.72949" fill="#3E63DD" />
+  </svg>
+);
+
+export default Starrating;
diff --git a/frontend/assets/images/icons/widgets/starrating.svg b/frontend/assets/images/icons/widgets/starrating.svg
deleted file mode 100644
index 54cbccf0b7..0000000000
--- a/frontend/assets/images/icons/widgets/starrating.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_640_18038)">
-<path d="M19.0826 7.05928L13.087 6.18792L10.4068 0.754323C10.3336 0.605555 10.2131 0.485123 10.0644 0.41192C9.69127 0.22773 9.23788 0.381221 9.05133 0.754323L6.37113 6.18792L0.37552 7.05928C0.210222 7.08289 0.0590916 7.16082 -0.0566173 7.27889C-0.196503 7.42267 -0.273586 7.6161 -0.27093 7.81668C-0.268273 8.01726 -0.186093 8.20858 -0.0424489 8.34861L4.29545 12.5779L3.2706 18.5499C3.24657 18.6888 3.26194 18.8317 3.31498 18.9623C3.36802 19.0929 3.45659 19.2061 3.57066 19.2889C3.68474 19.3718 3.81974 19.421 3.96037 19.4311C4.101 19.4411 4.24162 19.4115 4.3663 19.3457L9.72905 16.5262L15.0918 19.3457C15.2382 19.4236 15.4082 19.4496 15.5712 19.4212C15.9821 19.3504 16.2583 18.9608 16.1875 18.5499L15.1626 12.5779L19.5006 8.34861C19.6186 8.2329 19.6965 8.08177 19.7202 7.91647C19.7839 7.50322 19.4958 7.12067 19.0826 7.05928V7.05928ZM13.3373 11.9828L14.1897 16.9488L9.72905 14.6063L5.26835 16.9512L6.12082 11.9852L2.51259 8.46668L7.49988 7.74172L9.72905 3.22435L11.9582 7.74172L16.9455 8.46668L13.3373 11.9828Z" fill="#61656F"/>
-</g>
-<defs>
-<clipPath id="clip0_640_18038">
-<rect width="20" height="20" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/statistics.jsx b/frontend/assets/images/icons/widgets/statistics.jsx
new file mode 100644
index 0000000000..e9e54a0d5b
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/statistics.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Statistics = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M2.889 43.564a2.37 2.37 0 012.37-2.37h39.26a2.37 2.37 0 010 4.74H5.258a2.37 2.37 0 01-2.37-2.37z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M5.26 2.065a1.58 1.58 0 00-1.58 1.58V36.2c0 .873.708 1.58 1.58 1.58h8.33a1.58 1.58 0 001.58-1.58V3.646a1.58 1.58 0 00-1.58-1.58H5.26zM20.726 18.48a1.58 1.58 0 00-1.58 1.58v16.138c0 .873.707 1.58 1.58 1.58h8.33a1.58 1.58 0 001.58-1.58V20.06a1.58 1.58 0 00-1.58-1.58h-8.33zM34.609 8.143c0-.873.707-1.58 1.58-1.58h8.33c.873 0 1.58.707 1.58 1.58v28.055a1.58 1.58 0 01-1.58 1.58h-8.33a1.58 1.58 0 01-1.58-1.58V8.143z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Statistics;
diff --git a/frontend/assets/images/icons/widgets/statistics.svg b/frontend/assets/images/icons/widgets/statistics.svg
deleted file mode 100644
index d07751c7ad..0000000000
--- a/frontend/assets/images/icons/widgets/statistics.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Download SVG icon from http://tabler-icons.io/i/chart-line -->
-	<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="4" y1="19" x2="20" y2="19" />
-    <polyline points="4 15 8 9 12 11 16 6 20 10" /></svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/steps.jsx b/frontend/assets/images/icons/widgets/steps.jsx
new file mode 100644
index 0000000000..ab932c6565
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/steps.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Steps = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M11.532 24c0-1.42 1.055-2.572 2.357-2.572h26.374c1.302 0 2.357 1.152 2.357 2.572 0 1.42-1.055 2.571-2.357 2.571H13.89c-1.302 0-2.357-1.151-2.357-2.571z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M9.174 17.834c-3.471 0-6.285 2.76-6.285 6.166 0 3.405 2.814 6.165 6.285 6.165 3.472 0 6.286-2.76 6.286-6.165 0-3.405-2.814-6.166-6.286-6.166zm15.715 0c-3.472 0-6.286 2.76-6.286 6.166 0 3.405 2.814 6.165 6.286 6.165 3.471 0 6.285-2.76 6.285-6.165 0-3.405-2.814-6.166-6.285-6.166zM34.317 24c0-3.405 2.814-6.166 6.286-6.166 3.472 0 6.286 2.76 6.286 6.166 0 3.405-2.814 6.165-6.286 6.165-3.472 0-6.286-2.76-6.286-6.165z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Steps;
diff --git a/frontend/assets/images/icons/widgets/steps.svg b/frontend/assets/images/icons/widgets/steps.svg
deleted file mode 100644
index 2fc26b8c98..0000000000
--- a/frontend/assets/images/icons/widgets/steps.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dots" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <circle cx="5" cy="12" r="1" />
-  <circle cx="12" cy="12" r="1" />
-  <circle cx="19" cy="12" r="1" />
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/svgimage.jsx b/frontend/assets/images/icons/widgets/svgimage.jsx
new file mode 100644
index 0000000000..8b01d7f748
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/svgimage.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Svgimage = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M10.939 2a4.715 4.715 0 00-4.715 4.715v34.57A4.715 4.715 0 0010.94 46h27.9a4.715 4.715 0 004.714-4.715V16.14a7.408 7.408 0 00-2.163-5.232l-6.58-6.726-.013-.012A7.409 7.409 0 0029.56 2h-18.62z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      d="M17.989 32.159c-.479 0-.845-.422-1.202-.741a1.21 1.21 0 00-.086-.07c-.262-.193-.617-.29-1.065-.29-.305 0-.563.044-.772.13-.21.084-.371.2-.484.35a.84.84 0 00-.163.509.726.726 0 00.099.414c.075.117.177.22.306.306.13.083.279.157.449.22.17.06.35.112.543.155l.794.19a5.6 5.6 0 011.061.345c.322.144.601.32.837.53.236.21.418.458.548.742.132.285.2.612.202.98-.003.54-.14 1.009-.414 1.406-.27.394-.661.7-1.173.919-.509.215-1.123.323-1.842.323-.713 0-1.334-.11-1.863-.328-.527-.218-.938-.542-1.234-.97a2.501 2.501 0 01-.32-.67c-.153-.495.285-.93.803-.93h.067c.448 0 .78.384 1.05.741.153.196.355.344.608.445.257.097.546.146.867.146.317 0 .591-.046.824-.138.236-.092.419-.22.548-.384a.887.887 0 00.194-.565.734.734 0 00-.177-.5 1.34 1.34 0 00-.509-.345 5.17 5.17 0 00-.815-.259l-.962-.242c-.745-.18-1.332-.464-1.764-.85-.431-.385-.646-.904-.643-1.556-.002-.535.14-1.003.428-1.402.29-.4.688-.712 1.194-.936.506-.225 1.082-.337 1.726-.337.655 0 1.228.112 1.716.337.492.224.875.536 1.148.936.1.146.182.3.246.464.192.484-.25.925-.77.925zM21.198 29.618c.423 0 .798.274.926.677l1.907 5.996a.056.056 0 00.107 0l1.912-5.997a.97.97 0 111.842.61l-2.21 6.41a1.688 1.688 0 01-3.191 0l-2.212-6.407a.972.972 0 01.919-1.289zM35.373 32.474c-.364 0-.665-.256-.87-.557a1.721 1.721 0 00-.936-.677 2.26 2.26 0 00-.66-.09c-.45 0-.847.112-1.19.336-.339.224-.604.55-.793.979-.19.425-.285.946-.285 1.561 0 .616.094 1.14.28 1.57.187.432.452.761.794.988.342.225.746.337 1.212.337.423 0 .784-.075 1.083-.225.302-.152.532-.366.69-.642.157-.269.237-.585.241-.95 0-.015.015-.027.03-.025.032.005.029.052-.003.052h-1.769a.156.156 0 01-.155-.156v-.547c0-.389.314-.703.703-.703h1.88c.615 0 1.113.498 1.113 1.112 0 .777-.164 1.444-.491 2.002-.328.555-.78.983-1.355 1.285-.575.3-1.234.449-1.975.449-.829 0-1.556-.183-2.183-.548a3.802 3.802 0 01-1.467-1.566c-.348-.678-.522-1.484-.522-2.415 0-.716.104-1.355.311-1.915.21-.564.503-1.041.88-1.433a3.802 3.802 0 011.316-.893 4.262 4.262 0 011.626-.306c.5 0 .966.074 1.397.22.432.144.814.348 1.148.613a3.317 3.317 0 01.887 1.057c.285.535-.194 1.087-.8 1.087h-.137z"
+    ></path>
+  </svg>
+);
+
+export default Svgimage;
diff --git a/frontend/assets/images/icons/widgets/svgimage.svg b/frontend/assets/images/icons/widgets/svgimage.svg
deleted file mode 100644
index 315020129d..0000000000
--- a/frontend/assets/images/icons/widgets/svgimage.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="175px" height="175px" viewBox="-16.5 0 175 175" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M141.02 93.0761C141.2 109.353 141.445 125.636 141.528 141.916C141.559 147.861 141.102 153.808 141.057 159.755C140.995 168.12 134.466 173.177 126.874 173.334C111.609 173.649 96.3382 174.018 81.0725 173.935C62.5447 173.835 44.0176 173.357 25.4945 172.885C21.3465 172.675 17.214 172.227 13.1178 171.541C7.98585 170.81 2.93286 164.92 2.74778 159.328C2.28046 145.194 1.74544 131.056 1.58989 116.917C1.24728 85.8065 1.18042 54.6961 0.848309 23.5856C0.797771 18.8068 0.913967 14.1772 2.89152 9.75607C4.36893 6.44876 6.48497 3.76678 10.1519 2.77637C11.4512 2.43963 12.7838 2.24844 14.1254 2.20656C19.846 1.97947 25.5779 1.96199 31.2906 1.62201C51.053 0.445851 70.8113 0.879736 90.573 1.53804C93.3775 1.63124 96.1853 1.7625 98.9872 1.70277C100.916 1.67233 102.778 2.40762 104.164 3.74773C113.401 11.9471 122.634 20.1514 131.862 28.3604C133.204 29.5543 134.47 30.8434 135.885 31.9427C138.83 34.232 139.66 37.3445 139.716 40.8651C139.921 54.0017 140.182 67.137 140.384 80.2729C140.449 84.5391 140.394 88.8053 140.394 93.0715L141.02 93.0761ZM93.7129 9.8708C91.7747 9.71197 90.1188 9.48271 88.4622 9.45449C74.3181 9.21427 60.1735 8.99702 46.0286 8.80228C39.6345 8.71368 33.2392 8.67824 26.8445 8.63886C23.5956 8.61917 20.3396 8.51612 17.098 8.68086C12.4629 8.91649 11.1002 10.2599 10.2719 14.9494C9.4804 19.1462 9.31769 23.4378 9.78901 27.6826C10.0089 29.4652 10.1241 31.2589 10.1341 33.0551C10.2089 73.1353 10.2713 113.215 10.3212 153.292C10.2807 154.301 10.3179 155.312 10.4322 156.316C11.2375 161.436 13.9363 164.546 19.5211 164.771C41.1855 165.645 62.8499 165.641 84.5209 165.276C95.5224 165.09 106.525 165 117.527 164.875C120.218 164.845 122.917 164.951 125.6 164.806C130.02 164.568 132.356 162.145 132.307 157.704C132.252 152.772 131.887 147.843 131.805 142.911C131.709 137.187 131.904 131.456 131.739 125.735C131.335 111.486 130.64 97.2452 130.368 82.9948C130.146 71.3238 130.368 59.6441 130.379 47.9679C130.379 47.026 130.265 46.084 130.231 45.5655C122.735 45.5655 115.665 45.6188 108.597 45.5329C106.467 45.5299 104.344 45.2876 102.268 44.8108C98.0198 43.7784 96.7143 42.1496 96.2201 37.8433C96.0797 36.6186 96.0724 35.3779 95.9576 34.1492C95.233 26.2213 94.4966 18.2949 93.7129 9.8708ZM105.811 37.387C111.269 37.0772 116.413 36.7912 121.557 36.4887C122.768 36.4178 123.976 36.2915 125.916 36.1275L103.053 15.3782L102.534 15.7589C103.605 22.827 104.676 29.8955 105.811 37.387Z" fill="black"/>
-<path d="M111.037 128.213C110.829 125.397 109.133 124.645 107.517 123.874C106.715 123.491 105.787 123.372 104.978 122.999C104.239 122.715 103.613 122.197 103.195 121.525C102.777 120.853 102.588 120.063 102.66 119.275C102.777 118.491 103.15 117.768 103.721 117.219C104.292 116.67 105.029 116.325 105.817 116.239C108.024 115.842 110.247 115.535 112.467 115.213C114.244 114.955 115.925 115.287 116.981 116.806C118.088 118.398 117.637 119.997 116.41 121.411C116.284 121.612 116.187 121.83 116.121 122.058C116.217 122.365 116.331 122.667 116.461 122.961C119.221 128.45 116.901 133.825 110.524 135.898C100.618 139.118 88.4417 133.372 89.0855 120.08C89.4905 111.728 93.4049 105.095 100.768 100.784C102.039 100.074 103.395 99.5268 104.803 99.1567C105.233 98.9827 105.695 98.9027 106.159 98.9217C106.623 98.9401 107.077 99.0582 107.492 99.2663C107.906 99.475 108.272 99.7697 108.563 100.131C108.855 100.492 109.066 100.911 109.183 101.36C109.455 102.377 108.694 103.07 107.624 103.586C105.687 104.451 103.862 105.547 102.189 106.851C100.272 108.425 98.7042 110.383 97.5864 112.598C96.4693 114.814 95.8261 117.237 95.6988 119.715C95.1823 127.02 101.458 131.993 108.224 129.741C109.206 129.319 110.148 128.808 111.037 128.213Z" fill="black"/>
-<path d="M73.1272 125.606C74.5462 120.167 75.7526 115.529 76.9675 110.895C77.5089 108.834 78.0242 106.765 78.651 104.73C79.0087 103.551 79.4812 102.411 80.0608 101.324C80.8149 99.925 82.0252 99.1328 83.6838 99.5122C85.4034 99.906 85.9409 101.247 85.9547 102.818C86.0098 103.941 85.9193 105.066 85.6863 106.165C83.4731 114.742 81.2173 123.308 78.9188 131.866C78.6241 132.949 78.2079 133.996 77.6776 134.986C76.0368 138.067 72.7341 138.449 70.5734 135.72C69.3165 134.136 68.2342 132.421 67.3456 130.604C63.8697 123.443 60.4667 116.245 57.1369 109.011C56.5204 107.567 56.089 106.052 55.8531 104.5C55.6043 103.106 55.9719 101.792 57.4244 101.112C58.6833 100.521 60.1627 100.993 61.2469 102.421C61.832 103.244 62.3398 104.119 62.7637 105.035C65.8183 111.158 68.8624 117.286 71.8966 123.419C72.1394 123.906 72.4302 124.37 73.1272 125.606Z" fill="black"/>
-<path d="M44.9895 103.998C39.4106 104.433 36.9737 106.509 36.2911 111.579C37.2533 112.043 38.3164 112.58 39.3994 113.074C41.438 114.004 43.5344 114.821 45.5218 115.849C47.9507 117.061 49.9767 118.95 51.3553 121.289C55.2054 127.898 51.27 135.764 43.6571 136.62C39.2597 137.115 35.5113 135.505 32.1161 132.888C31.6418 132.586 31.2824 132.134 31.0949 131.603C30.9459 130.677 30.7371 129.462 31.1933 128.823C31.6494 128.184 32.8669 127.959 33.7857 127.849C34.3837 127.777 35.038 128.264 35.6799 128.456C37.1651 128.959 38.6747 129.387 40.2028 129.738C43.1347 130.301 45.5192 129.393 46.4052 127.544C47.2453 125.788 46.1696 123.343 43.6414 121.647C42.413 120.868 41.1247 120.188 39.7886 119.613C38.0598 118.815 36.2346 118.215 34.5432 117.35C30.4903 115.276 29.183 111.604 31.0115 107.445C32.4555 104.164 34.6272 101.396 38.0303 100.089C39.793 99.4328 41.6879 99.2123 43.5541 99.4453C46.0121 99.7728 46.4242 101.387 44.9895 103.998Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="141.113" height="173.93" fill="white" transform="translate(0.706299 0.574219)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/table.jsx b/frontend/assets/images/icons/widgets/table.jsx
new file mode 100644
index 0000000000..2b2a4b364e
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/table.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Table = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path fill="#3E63DD" d="M7.369 14.678H22.101V28.847H7.369z"></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M42.146 16.399h-6.032v10.207h6.032V16.4zm-10.775 0h-6.008v10.207h6.008V16.4zm-10.751 0H7.632v10.207H20.62V16.4zm4.743 14.95h6.008v9.908h-6.008V31.35zM41.498 46H8.28a5.391 5.391 0 01-5.391-5.391V7.391A5.391 5.391 0 018.279 2h33.219a5.391 5.391 0 015.39 5.391V40.61A5.391 5.391 0 0141.499 46zm-5.384-14.65v9.907h5.384c.357 0 .648-.29.648-.648v-9.26h-6.032zm-15.494 0H7.632v9.259c0 .358.29.648.648.648h12.34V31.35z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Table;
diff --git a/frontend/assets/images/icons/widgets/table.svg b/frontend/assets/images/icons/widgets/table.svg
deleted file mode 100644
index 5f360c40ea..0000000000
--- a/frontend/assets/images/icons/widgets/table.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.22222 1H17.7778C18.3671 1 18.9324 1.23705 19.3491 1.65901C19.7659 2.08097 20 2.65326 20 3.25V16.75C20 17.3467 19.7659 17.919 19.3491 18.341C18.9324 18.7629 18.3671 19 17.7778 19H2.22222C1.63285 19 1.06762 18.7629 0.650874 18.341C0.234126 17.919 0 17.3467 0 16.75V3.25C0 2.65326 0.234126 2.08097 0.650874 1.65901C1.06762 1.23705 1.63285 1 2.22222 1ZM2.22222 5.5V10H8.88889V5.5H2.22222ZM11.1111 5.5V10H17.7778V5.5H11.1111ZM2.22222 12.25V16.75H8.88889V12.25H2.22222ZM11.1111 12.25V16.75H17.7778V12.25H11.1111Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/tabs.jsx b/frontend/assets/images/icons/widgets/tabs.jsx
new file mode 100644
index 0000000000..21f630addf
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/tabs.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Tabs = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#3E63DD"
+      d="M25.934 6.644V26.38a2 2 0 002 2H44.89a2 2 0 002-2V6.644a2 2 0 00-2-2H27.934a2 2 0 00-2 2z"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M9.174 5.143a6.286 6.286 0 00-6.285 6.285v25.143a6.286 6.286 0 006.285 6.286h31.429a6.286 6.286 0 006.286-6.286v-22H25.877L21.78 6.034a1.571 1.571 0 00-1.417-.891H9.174z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Tabs;
diff --git a/frontend/assets/images/icons/widgets/tabs.svg b/frontend/assets/images/icons/widgets/tabs.svg
deleted file mode 100644
index 72469cc400..0000000000
--- a/frontend/assets/images/icons/widgets/tabs.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.31456 13.4571C6.69344 13.4571 7.0568 13.3066 7.32471 13.0387C7.59262 12.7708 7.74313 12.4074 7.74313 12.0285C7.74313 11.6497 7.59262 11.2863 7.32471 11.0184C7.0568 10.7505 6.69344 10.6 6.31456 10.6C5.93568 10.6 5.57231 10.7505 5.30441 11.0184C5.0365 11.2863 4.88599 11.6497 4.88599 12.0285C4.88599 12.4074 5.0365 12.7708 5.30441 13.0387C5.57231 13.3066 5.93568 13.4571 6.31456 13.4571Z" fill="#61656F"/>
-<path d="M12.0287 12.0285C12.0287 12.4074 11.8781 12.7708 11.6102 13.0387C11.3423 13.3066 10.979 13.4571 10.6001 13.4571C10.2212 13.4571 9.85784 13.3066 9.58993 13.0387C9.32202 12.7708 9.17151 12.4074 9.17151 12.0285C9.17151 11.6497 9.32202 11.2863 9.58993 11.0184C9.85784 10.7505 10.2212 10.6 10.6001 10.6C10.979 10.6 11.3423 10.7505 11.6102 11.0184C11.8781 11.2863 12.0287 11.6497 12.0287 12.0285V12.0285Z" fill="#61656F"/>
-<path d="M14.8858 13.4571C15.2647 13.4571 15.6281 13.3066 15.896 13.0387C16.1639 12.7708 16.3144 12.4074 16.3144 12.0285C16.3144 11.6497 16.1639 11.2863 15.896 11.0184C15.6281 10.7505 15.2647 10.6 14.8858 10.6C14.507 10.6 14.1436 10.7505 13.8757 11.0184C13.6078 11.2863 13.4573 11.6497 13.4573 12.0285C13.4573 12.4074 13.6078 12.7708 13.8757 13.0387C14.1436 13.3066 14.507 13.4571 14.8858 13.4571V13.4571Z" fill="#61656F"/>
-<path d="M0.600098 4.1714C0.600098 3.2242 0.976372 2.3158 1.64614 1.64602C2.31592 0.97625 3.22432 0.599976 4.17153 0.599976H17.0287C17.9759 0.599976 18.8843 0.97625 19.5541 1.64602C20.2238 2.3158 20.6001 3.2242 20.6001 4.1714V17.0285C20.6001 17.9757 20.2238 18.8842 19.5541 19.5539C18.8843 20.2237 17.9759 20.6 17.0287 20.6H4.17153C3.22432 20.6 2.31592 20.2237 1.64614 19.5539C0.976372 18.8842 0.600098 17.9757 0.600098 17.0285V4.1714ZM4.17153 2.02855C3.60321 2.02855 3.05816 2.25431 2.6563 2.65618C2.25443 3.05804 2.02867 3.60308 2.02867 4.1714V17.0285C2.02867 17.5969 2.25443 18.1419 2.6563 18.5438C3.05816 18.9456 3.60321 19.1714 4.17153 19.1714H17.0287C17.597 19.1714 18.142 18.9456 18.5439 18.5438C18.9458 18.1419 19.1715 17.5969 19.1715 17.0285V6.31426H9.88581C9.31749 6.31426 8.77245 6.0885 8.37058 5.68663C7.96872 5.28477 7.74295 4.73973 7.74295 4.1714V2.02855H4.17153ZM19.1715 4.1714C19.1715 3.60308 18.9458 3.05804 18.5439 2.65618C18.142 2.25431 17.597 2.02855 17.0287 2.02855H9.17153V4.1714C9.17153 4.36084 9.24678 4.54253 9.38074 4.67648C9.51469 4.81043 9.69637 4.88569 9.88581 4.88569H19.1715V4.1714Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/tags.jsx b/frontend/assets/images/icons/widgets/tags.jsx
new file mode 100644
index 0000000000..8941c4c52d
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/tags.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Tags = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M20.507 2.176a2.703 2.703 0 00-1.292-.154L7.24 3.867a2.734 2.734 0 00-2.484 2.485L2.91 18.327a2.703 2.703 0 00.797 2.272L27.96 44.85a3.93 3.93 0 005.553.001L45.74 32.625a3.93 3.93 0 000-5.553L21.488 2.82a2.703 2.703 0 00-.98-.644z"
+    ></path>
+    <path fill="#3E63DD" d="M15.463 17.717a3.143 3.143 0 100-6.285 3.143 3.143 0 000 6.285z"></path>
+  </svg>
+);
+
+export default Tags;
diff --git a/frontend/assets/images/icons/widgets/tags.svg b/frontend/assets/images/icons/widgets/tags.svg
deleted file mode 100644
index b64882e3e8..0000000000
--- a/frontend/assets/images/icons/widgets/tags.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="tag"><path clip-rule="evenodd" d="M31.391,13.883l-5-8c-0.73-1.169-2.012-1.88-3.391-1.88H4   c-2.209,0-4,1.791-4,4v16c0,2.209,1.791,4,4,4h19c1.379,0,2.66-0.711,3.391-1.881l5-8C32.203,16.827,32.203,15.18,31.391,13.883z    M29.695,17.062l-5,8.002c-0.367,0.588-1.002,0.939-1.695,0.939H4c-1.103,0-2-0.898-2-2v-16c0-1.103,0.897-2,2-2h19   c0.693,0,1.328,0.352,1.695,0.939l5,8C30.098,15.587,30.098,16.419,29.695,17.062z" fill="#333333" fill-rule="evenodd"/><path clip-rule="evenodd" d="M23,13.003c-1.658,0-3,1.343-3,3c0,1.657,1.342,3,3,3   c1.656,0,3-1.344,3-3C26,14.346,24.656,13.003,23,13.003z M23,18.004c-1.105,0-2-0.896-2-2c0-1.104,0.895-2,2-2   c1.104,0,2,0.896,2,2C25,17.107,24.104,18.004,23,18.004z" fill="#333333" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/text.jsx b/frontend/assets/images/icons/widgets/text.jsx
new file mode 100644
index 0000000000..63c1dd4e21
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/text.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Text = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M18.341 6.714c-.842 0-1.577.574-1.78 1.39L11.538 28.19h6.802a2.357 2.357 0 110 4.715h-7.98L7.532 44.213a2.357 2.357 0 11-4.573-1.144L6.22 30.023l.025-.1 5.74-22.962a6.55 6.55 0 0112.71 0l1.66 6.645a2.357 2.357 0 01-4.573 1.144l-1.661-6.645a1.836 1.836 0 00-1.781-1.39z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M34.71 23.084a.393.393 0 00-.372.265l-3.53 10.297h7.804l-3.53-10.297a.393.393 0 00-.372-.265zm9.413 12.103L39.54 21.82a5.107 5.107 0 00-9.661 0l-4.583 13.367a2.435 2.435 0 00-.036.104l-2.601 7.587a2.357 2.357 0 104.46 1.529l2.072-6.046h11.037l2.073 6.046a2.357 2.357 0 104.46-1.53l-2.602-7.586a2.305 2.305 0 00-.036-.104z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Text;
diff --git a/frontend/assets/images/icons/widgets/text.svg b/frontend/assets/images/icons/widgets/text.svg
deleted file mode 100644
index ed2d71018a..0000000000
--- a/frontend/assets/images/icons/widgets/text.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.75 3C2.75 2.73478 2.85536 2.48043 3.04289 2.29289C3.23043 2.10536 3.48478 2 3.75 2H16.25C16.5152 2 16.7696 2.10536 16.9571 2.29289C17.1446 2.48043 17.25 2.73478 17.25 3V5C17.25 5.26522 17.1446 5.51957 16.9571 5.70711C16.7696 5.89464 16.5152 6 16.25 6C15.9848 6 15.7304 5.89464 15.5429 5.70711C15.3554 5.51957 15.25 5.26522 15.25 5V4H11V16H12C12.2652 16 12.5196 16.1054 12.7071 16.2929C12.8946 16.4804 13 16.7348 13 17C13 17.2652 12.8946 17.5196 12.7071 17.7071C12.5196 17.8946 12.2652 18 12 18H8C7.73478 18 7.48043 17.8946 7.29289 17.7071C7.10536 17.5196 7 17.2652 7 17C7 16.7348 7.10536 16.4804 7.29289 16.2929C7.48043 16.1054 7.73478 16 8 16H9V4H4.75V5C4.75 5.26522 4.64464 5.51957 4.45711 5.70711C4.26957 5.89464 4.01522 6 3.75 6C3.48478 6 3.23043 5.89464 3.04289 5.70711C2.85536 5.51957 2.75 5.26522 2.75 5V3Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/textarea.jsx b/frontend/assets/images/icons/widgets/textarea.jsx
new file mode 100644
index 0000000000..4de9918805
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/textarea.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const TextArea = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M8.389 4.357A2.357 2.357 0 0110.746 2H39.03a2.357 2.357 0 012.358 2.357v7.857a2.357 2.357 0 01-4.715 0v-5.5h-9.428V31.86h3.928a2.357 2.357 0 010 4.715H18.603a2.357 2.357 0 110-4.715h3.928V6.714h-9.428v5.5a2.357 2.357 0 01-4.714 0V4.357z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M2.889 43.643a2.357 2.357 0 012.357-2.357H44.53a2.357 2.357 0 010 4.714H5.247a2.357 2.357 0 01-2.357-2.357z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default TextArea;
diff --git a/frontend/assets/images/icons/widgets/textarea.svg b/frontend/assets/images/icons/widgets/textarea.svg
deleted file mode 100644
index 01c81aa299..0000000000
--- a/frontend/assets/images/icons/widgets/textarea.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5564 18.2444C14.4119 18.2444 14.2675 18.1892 14.1572 18.0791C13.9367 17.8587 13.9367 17.5012 14.1572 17.2808L16.9659 14.4721C17.1864 14.2516 17.5436 14.2516 17.7641 14.4721C17.9846 14.6924 17.9846 15.05 17.7641 15.2704L14.9554 18.0791C14.8452 18.1892 14.7009 18.2444 14.5564 18.2444Z" fill="#61656F"/>
-<path d="M16.4994 18.5593C16.3549 18.5593 16.2105 18.5041 16.1002 18.394C15.8797 18.1737 15.8797 17.8161 16.1002 17.5958L17.2808 16.4151C17.5013 16.1946 17.8586 16.1946 18.079 16.4151C18.2995 16.6354 18.2995 16.993 18.079 17.2133L16.8984 18.394C16.7882 18.5043 16.6437 18.5593 16.4994 18.5593Z" fill="#61656F"/>
-<path d="M19.2983 0.137085H0.701479C0.388737 0.137085 0.136963 0.388859 0.136963 0.701601V19.2984C0.136963 19.6111 0.388737 19.8629 0.701479 19.8629H19.2983C19.611 19.8629 19.8628 19.6111 19.8628 19.2984V0.701601C19.8628 0.388698 19.6112 0.137085 19.2983 0.137085ZM18.7337 18.7339H1.266V1.26612H18.7337V18.7339Z" fill="#61656F"/>
-<path d="M8.8902 3.57422V5.69019H8.04665L8.03052 5.63067C7.96745 5.40325 7.916 5.2339 7.87891 5.12261C7.84197 5.01938 7.8031 4.93067 7.76132 4.8597C7.71762 4.78873 7.67245 4.7289 7.62745 4.6839C7.58229 4.63874 7.53391 4.60148 7.48229 4.57406C7.43068 4.54664 7.36616 4.52728 7.28874 4.51277C7.20649 4.49825 7.09697 4.4918 6.96149 4.4918H6.67439V9.51454C6.67439 9.69341 6.67923 9.8289 6.68891 9.91777C6.69858 10.0031 6.71471 10.0708 6.73729 10.121C6.76149 10.1694 6.78891 10.2081 6.81955 10.2371C6.85181 10.2663 6.89858 10.2937 6.95987 10.3195C7.02294 10.3452 7.11149 10.3662 7.22455 10.3824L7.29391 10.3921V10.8808H4.30632V10.3937L4.37407 10.3824C4.50794 10.3599 4.616 10.3308 4.69326 10.2937C4.76262 10.2615 4.811 10.2178 4.84326 10.1615C4.87891 10.1002 4.90133 10.0195 4.91116 9.91954C4.92084 9.81148 4.92568 9.67599 4.92568 9.5147V4.49196H4.59181C4.39826 4.49196 4.25149 4.51293 4.1531 4.55648C4.05616 4.59841 3.97084 4.66615 3.89987 4.75809C3.82568 4.85164 3.76116 4.98228 3.70471 5.1468C3.64826 5.31777 3.59987 5.47906 3.56439 5.62728L3.54987 5.69019H2.70471V3.57422H8.8902Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/texteditor.jsx b/frontend/assets/images/icons/widgets/texteditor.jsx
new file mode 100644
index 0000000000..8e61cf2396
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/texteditor.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Texteditor = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M26.46 5.143a2.357 2.357 0 012.357-2.357h15.715a2.357 2.357 0 010 4.714H28.817a2.357 2.357 0 01-2.357-2.357zm2.357 7.071a2.357 2.357 0 000 4.714h15.715a2.357 2.357 0 100-4.714H28.817zM26.46 24a2.357 2.357 0 012.357-2.357h15.715a2.357 2.357 0 110 4.714H28.817A2.357 2.357 0 0126.46 24zM2.89 33.428a2.357 2.357 0 012.357-2.357H44.53a2.357 2.357 0 110 4.715H5.247a2.357 2.357 0 01-2.357-2.358zM5.246 40.5a2.357 2.357 0 000 4.714H44.53a2.357 2.357 0 000-4.714H5.247z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M13.889 7.882l-2.492 7.475h4.983L13.89 7.882zm7.98 9.035L18.193 5.888a4.537 4.537 0 00-8.609 0L5.908 16.917a2.333 2.333 0 00-.035.103l-2.078 6.235a2.357 2.357 0 104.473 1.49l1.558-4.674h8.126l1.558 4.674a2.357 2.357 0 004.472-1.49l-2.078-6.235a2.176 2.176 0 00-.035-.103z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Texteditor;
diff --git a/frontend/assets/images/icons/widgets/texteditor.svg b/frontend/assets/images/icons/widgets/texteditor.svg
deleted file mode 100644
index 9fa609d87f..0000000000
--- a/frontend/assets/images/icons/widgets/texteditor.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_640_18045)">
-<path d="M1.87502 3.125C1.87502 2.62772 2.07257 2.15081 2.4242 1.79917C2.77583 1.44754 3.25274 1.25 3.75002 1.25H16.25C16.7473 1.25 17.2242 1.44754 17.5759 1.79917C17.9275 2.15081 18.125 2.62772 18.125 3.125V7.57875C18.6622 7.71687 19.1382 8.02973 19.4781 8.46806C19.818 8.9064 20.0025 9.44532 20.0025 10C20.0025 10.5547 19.818 11.0936 19.4781 11.5319C19.1382 11.9703 18.6622 12.2831 18.125 12.4213V16.875C18.125 17.3723 17.9275 17.8492 17.5759 18.2008C17.2242 18.5525 16.7473 18.75 16.25 18.75H3.75002C3.25274 18.75 2.77583 18.5525 2.4242 18.2008C2.07257 17.8492 1.87502 17.3723 1.87502 16.875V12.4213C1.33782 12.2831 0.861806 11.9703 0.521915 11.5319C0.182024 11.0936 -0.00244141 10.5547 -0.00244141 10C-0.00244141 9.44532 0.182024 8.9064 0.521915 8.46806C0.861806 8.02973 1.33782 7.71687 1.87502 7.57875V3.125ZM3.12502 7.57875C3.66223 7.71687 4.13824 8.02973 4.47813 8.46806C4.81803 8.9064 5.00249 9.44532 5.00249 10C5.00249 10.5547 4.81803 11.0936 4.47813 11.5319C4.13824 11.9703 3.66223 12.2831 3.12502 12.4213V16.875C3.12502 17.0408 3.19087 17.1997 3.30808 17.3169C3.42529 17.4342 3.58426 17.5 3.75002 17.5H16.25C16.4158 17.5 16.5748 17.4342 16.692 17.3169C16.8092 17.1997 16.875 17.0408 16.875 16.875V12.4213C16.3378 12.2831 15.8618 11.9703 15.5219 11.5319C15.182 11.0936 14.9976 10.5547 14.9976 10C14.9976 9.44532 15.182 8.9064 15.5219 8.46806C15.8618 8.02973 16.3378 7.71687 16.875 7.57875V3.125C16.875 2.95924 16.8092 2.80027 16.692 2.68306C16.5748 2.56585 16.4158 2.5 16.25 2.5H3.75002C3.58426 2.5 3.42529 2.56585 3.30808 2.68306C3.19087 2.80027 3.12502 2.95924 3.12502 3.125V7.57875ZM2.50002 8.75C2.1685 8.75 1.85056 8.8817 1.61614 9.11612C1.38172 9.35054 1.25002 9.66848 1.25002 10C1.25002 10.3315 1.38172 10.6495 1.61614 10.8839C1.85056 11.1183 2.1685 11.25 2.50002 11.25C2.83155 11.25 3.14949 11.1183 3.38391 10.8839C3.61833 10.6495 3.75002 10.3315 3.75002 10C3.75002 9.66848 3.61833 9.35054 3.38391 9.11612C3.14949 8.8817 2.83155 8.75 2.50002 8.75ZM17.5 8.75C17.1685 8.75 16.8506 8.8817 16.6161 9.11612C16.3817 9.35054 16.25 9.66848 16.25 10C16.25 10.3315 16.3817 10.6495 16.6161 10.8839C16.8506 11.1183 17.1685 11.25 17.5 11.25C17.8315 11.25 18.1495 11.1183 18.3839 10.8839C18.6183 10.6495 18.75 10.3315 18.75 10C18.75 9.66848 18.6183 9.35054 18.3839 9.11612C18.1495 8.8817 17.8315 8.75 17.5 8.75Z" fill="#61656F"/>
-<path d="M14.2925 5H5.7075L5.625 7.4925H6.1075C6.37 5.9275 6.8725 5.685 8.82375 5.62375L9.2525 5.61V13.5388C9.2525 14.21 9.1075 14.37 7.94125 14.4738V15H12.0588V14.4738C10.8863 14.37 10.7413 14.2113 10.7413 13.5388V5.61L11.1762 5.6225C13.1262 5.685 13.63 5.9275 13.8925 7.4925H14.375L14.2925 5Z" fill="#61656F"/>
-</g>
-<defs>
-<clipPath id="clip0_640_18045">
-<rect width="20" height="20" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/textinput.jsx b/frontend/assets/images/icons/widgets/textinput.jsx
new file mode 100644
index 0000000000..91dc0e1231
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/textinput.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Textinput = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M7.603 9.857a4.714 4.714 0 00-4.714 4.715v18.857a4.714 4.714 0 004.714 4.714h34.571a4.714 4.714 0 004.715-4.714V14.57a4.714 4.714 0 00-4.715-4.714H7.603z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M9.864 16.62a1.964 1.964 0 000 3.929h2.824v8.867a1.964 1.964 0 003.928 0v-8.867h2.824a1.964 1.964 0 000-3.929H9.864zM21.11 29.416c0-1.085.88-1.965 1.965-1.965h6.035a1.964 1.964 0 110 3.929h-6.035a1.964 1.964 0 01-1.965-1.964z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Textinput;
diff --git a/frontend/assets/images/icons/widgets/textinput.svg b/frontend/assets/images/icons/widgets/textinput.svg
deleted file mode 100644
index 7f82aea1d6..0000000000
--- a/frontend/assets/images/icons/widgets/textinput.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6929 0.406086H2.25207C1.92027 0.400265 1.59955 0.520281 1.35949 0.739864C1.11942 0.959446 0.979562 1.26084 0.970215 1.57878V12.0028C0.978938 12.3208 1.1182 12.6228 1.35778 12.8431C1.59736 13.0634 1.91778 13.1843 2.24988 13.1797H19.6907C20.023 13.1855 20.3442 13.0649 20.5839 12.8443C20.8238 12.6238 20.9626 12.3212 20.9702 12.0028V1.57875C20.9621 1.26125 20.8232 0.959721 20.5839 0.740143C20.3445 0.520411 20.0243 0.400266 19.6929 0.406086ZM19.4071 11.489C19.4082 11.5508 19.3814 11.6102 19.3334 11.6515C19.2839 11.6949 19.2195 11.7193 19.1525 11.72L2.75688 11.6515C2.68928 11.6511 2.62463 11.6258 2.57603 11.5809C2.52867 11.54 2.50172 11.4816 2.50219 11.4204V2.04727C2.5039 1.98652 2.53039 1.92889 2.57603 1.88665C2.62541 1.84336 2.68974 1.81888 2.75688 1.81828L19.1593 1.8868C19.2263 1.8874 19.2908 1.91158 19.3402 1.95517C19.3867 1.99756 19.4134 2.05623 19.4139 2.11788L19.4071 11.489Z" fill="#61656F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.97019 3.84499C5.72735 3.67899 5.43559 3.59122 5.13727 3.59451H4.30434V4.23654H5.13727C5.34273 4.21982 5.52592 4.35984 5.55491 4.55539V9.02796C5.52702 9.22441 5.34352 9.36547 5.13727 9.3489H4.30434V9.99093H5.13727C5.43526 9.99392 5.72654 9.90704 5.97019 9.74269C6.21445 9.90585 6.50543 9.99258 6.80328 9.99093H7.63852V9.3489H6.80543C6.59919 9.36547 6.41569 9.22441 6.38779 9.02796V4.5531C6.41677 4.3574 6.59996 4.21753 6.80543 4.23425H7.63836V3.59221H6.80543C6.50635 3.59057 6.21413 3.67914 5.97019 3.84499Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/timeline.jsx b/frontend/assets/images/icons/widgets/timeline.jsx
new file mode 100644
index 0000000000..9435b85f3c
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/timeline.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Timeline = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M20.187 18.007a2.37 2.37 0 012.37 2.37v9.482a2.37 2.37 0 11-4.74 0v-9.482a2.37 2.37 0 012.37-2.37zm2.37 16.592a2.37 2.37 0 012.37-2.37h12.346v-2.505a2.37 2.37 0 014.047-1.676l4.874 4.875a2.36 2.36 0 01.691 1.798 2.36 2.36 0 01-.702 1.566L41.32 41.15a2.37 2.37 0 01-4.047-1.676V36.97H24.927a2.37 2.37 0 01-2.37-2.37zM5.259 32.23a2.37 2.37 0 100 4.74h10.187a2.37 2.37 0 000-4.74H5.26z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M20.187 28.279a6.32 6.32 0 100 12.641 6.32 6.32 0 000-12.642zM10.705 6.155a1.58 1.58 0 00-1.58 1.58v12.642c0 .873.707 1.58 1.58 1.58h18.963a1.58 1.58 0 001.58-1.58V7.736a1.58 1.58 0 00-1.58-1.58H10.705z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Timeline;
diff --git a/frontend/assets/images/icons/widgets/timeline.svg b/frontend/assets/images/icons/widgets/timeline.svg
deleted file mode 100644
index 943091dfab..0000000000
--- a/frontend/assets/images/icons/widgets/timeline.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#61656F" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <path d="M4 16l6 -7l5 5l5 -6" />
-  <circle cx="15" cy="14" r="1" />
-  <circle cx="10" cy="9" r="1" />
-  <circle cx="4" cy="16" r="1" />
-  <circle cx="20" cy="8" r="1" />
-</svg>
-
diff --git a/frontend/assets/images/icons/widgets/timer.jsx b/frontend/assets/images/icons/widgets/timer.jsx
new file mode 100644
index 0000000000..4af305bb8c
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/timer.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Timer = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M24.889 46c10.414 0 18.857-8.443 18.857-18.857 0-10.415-8.443-18.857-18.857-18.857-10.415 0-18.857 8.442-18.857 18.857C6.032 37.557 14.474 46 24.889 46z"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M15.183 3.25a2.357 2.357 0 01-.972 3.188 24.955 24.955 0 00-7.179 5.743A2.357 2.357 0 013.46 9.105a29.669 29.669 0 018.536-6.828 2.357 2.357 0 013.188.972zm19.411 0a2.357 2.357 0 013.188-.973 29.669 29.669 0 018.536 6.828 2.357 2.357 0 01-3.573 3.076 24.953 24.953 0 00-7.179-5.743 2.357 2.357 0 01-.972-3.189zm-7.741 14.465a1.964 1.964 0 00-3.929 0v9.428c0 1.085.88 1.965 1.965 1.965h7.857a1.964 1.964 0 100-3.929h-5.893v-7.464z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Timer;
diff --git a/frontend/assets/images/icons/widgets/timer.svg b/frontend/assets/images/icons/widgets/timer.svg
deleted file mode 100644
index 7bfa800d2d..0000000000
--- a/frontend/assets/images/icons/widgets/timer.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 7V12L15 15" stroke="#61656F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/toggleswitch.jsx b/frontend/assets/images/icons/widgets/toggleswitch.jsx
new file mode 100644
index 0000000000..44f1d207c7
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/toggleswitch.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Toggleswitch = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M12.317 2a9.429 9.429 0 000 18.857H37.46A9.429 9.429 0 1037.46 2H12.317zm0 25.143a9.429 9.429 0 000 18.857H37.46a9.428 9.428 0 009.429-9.429 9.428 9.428 0 00-9.429-9.428H12.317z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M35.889 16.141a4.714 4.714 0 100-9.428 4.714 4.714 0 000 9.428zm-22 25.143a4.714 4.714 0 100-9.429 4.714 4.714 0 000 9.429z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Toggleswitch;
diff --git a/frontend/assets/images/icons/widgets/toggleswitch.svg b/frontend/assets/images/icons/widgets/toggleswitch.svg
deleted file mode 100644
index 76915bc1ef..0000000000
--- a/frontend/assets/images/icons/widgets/toggleswitch.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.75 12.5C14.413 12.5 15.0489 12.2366 15.5178 11.7678C15.9866 11.2989 16.25 10.663 16.25 10C16.25 9.33696 15.9866 8.70107 15.5178 8.23223C15.0489 7.76339 14.413 7.5 13.75 7.5C13.087 7.5 12.4511 7.76339 11.9822 8.23223C11.5134 8.70107 11.25 9.33696 11.25 10C11.25 10.663 11.5134 11.2989 11.9822 11.7678C12.4511 12.2366 13.087 12.5 13.75 12.5Z" fill="#61656F"/>
-<path d="M1.25 10C1.25 8.67392 1.77678 7.40215 2.71447 6.46447C3.65215 5.52678 4.92392 5 6.25 5H13.75C15.0761 5 16.3479 5.52678 17.2855 6.46447C18.2232 7.40215 18.75 8.67392 18.75 10C18.75 11.3261 18.2232 12.5979 17.2855 13.5355C16.3479 14.4732 15.0761 15 13.75 15H6.25C4.92392 15 3.65215 14.4732 2.71447 13.5355C1.77678 12.5979 1.25 11.3261 1.25 10ZM6.25 6.25C5.25544 6.25 4.30161 6.64509 3.59835 7.34835C2.89509 8.05161 2.5 9.00544 2.5 10C2.5 10.9946 2.89509 11.9484 3.59835 12.6517C4.30161 13.3549 5.25544 13.75 6.25 13.75H13.75C14.7446 13.75 15.6984 13.3549 16.4017 12.6517C17.1049 11.9484 17.5 10.9946 17.5 10C17.5 9.00544 17.1049 8.05161 16.4017 7.34835C15.6984 6.64509 14.7446 6.25 13.75 6.25H6.25Z" fill="#61656F"/>
-</svg>
diff --git a/frontend/assets/images/icons/widgets/treeselect.jsx b/frontend/assets/images/icons/widgets/treeselect.jsx
new file mode 100644
index 0000000000..2bcea97060
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/treeselect.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Treeselect = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M22.532 26.357v11.786h4.714V26.357H37.46c.434 0 .786.352.786.786v11a2.357 2.357 0 104.714 0v-11a5.5 5.5 0 00-5.5-5.5H27.246V9.857h-4.714v11.786H12.317a5.5 5.5 0 00-5.5 5.5v11a2.357 2.357 0 004.715 0v-11c0-.434.351-.786.785-.786h10.215z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="#3E63DD"
+      fillRule="evenodd"
+      d="M31.174 9.859a6.286 6.286 0 11-12.571 0 6.286 6.286 0 0112.571 0zm-22 34.568a6.286 6.286 0 100-12.571 6.286 6.286 0 000 12.571zm15.715 0a6.286 6.286 0 100-12.571 6.286 6.286 0 000 12.571zm15.714 0a6.286 6.286 0 100-12.571 6.286 6.286 0 000 12.571z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Treeselect;
diff --git a/frontend/assets/images/icons/widgets/treeselect.svg b/frontend/assets/images/icons/widgets/treeselect.svg
deleted file mode 100644
index 5785d38415..0000000000
--- a/frontend/assets/images/icons/widgets/treeselect.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="24px" height="24px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#000" d="M249.28 106.28V250h-77.186v-56.25H22.47V319.406h149.624v-50.719h77.187v148.407h18.69V357.22h71.686v50.718H489.28V282.28H339.657v56.251H267.97V189.407h71.686v50.72H489.28V114.47H339.657V170.718H267.97v-64.44h-18.69zm109.064 26.876h112.25v88.28h-112.25v-88.28zm-317.188 79.28h112.25v88.283H41.156v-88.283zm317.188 88.533h112.25v88.28h-112.25v-88.28z"/></svg>
\ No newline at end of file
diff --git a/frontend/assets/images/icons/widgets/upstatistics.svg b/frontend/assets/images/icons/widgets/upstatistics.jsx
similarity index 70%
rename from frontend/assets/images/icons/widgets/upstatistics.svg
rename to frontend/assets/images/icons/widgets/upstatistics.jsx
index 40fcabff3d..31c976e19a 100644
--- a/frontend/assets/images/icons/widgets/upstatistics.svg
+++ b/frontend/assets/images/icons/widgets/upstatistics.jsx
@@ -1,3 +1,14 @@
-<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.78199 0.187617C9.66186 0.307745 9.59438 0.470675 9.59438 0.640562C9.59438 0.81045 9.66186 0.97338 9.78199 1.09351C9.90212 1.21364 10.0651 1.28112 10.2349 1.28112H14.0079L9.54698 6.73359L6.20452 3.38986C6.13902 3.32442 6.06011 3.27396 5.97322 3.24195C5.88634 3.20995 5.79356 3.19716 5.70126 3.20447C5.60896 3.21177 5.51934 3.239 5.43857 3.28428C5.35781 3.32955 5.28782 3.3918 5.23343 3.46672L0.108928 10.5129C0.0164671 10.6505 -0.0190707 10.8185 0.00978223 10.9817C0.0386352 11.145 0.129633 11.2906 0.263652 11.3882C0.397671 11.4857 0.564277 11.5275 0.728459 11.5047C0.892641 11.482 1.04162 11.3965 1.14408 11.2662L5.82787 4.826L9.14214 8.14027C9.20542 8.20343 9.28122 8.25265 9.36467 8.28475C9.44812 8.31686 9.53736 8.33114 9.62666 8.32667C9.71596 8.32221 9.80333 8.2991 9.88316 8.25883C9.96299 8.21856 10.0335 8.16203 10.0902 8.09287L14.7189 2.43414V5.76506C14.7189 5.93495 14.7864 6.09788 14.9065 6.21801C15.0266 6.33814 15.1895 6.40562 15.3594 6.40562C15.5293 6.40562 15.6923 6.33814 15.8124 6.21801C15.9325 6.09788 16 5.93495 16 5.76506V0.640562C16 0.470675 15.9325 0.307745 15.8124 0.187617C15.6923 0.0674878 15.5293 0 15.3594 0H10.2349C10.0651 0 9.90212 0.0674878 9.78199 0.187617Z" fill="#36AF8B"/>
-</svg>
+import React from 'react';
+
+const Upstatistics = () => (
+  <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9.78199 0.187617C9.66186 0.307745 9.59438 0.470675 9.59438 0.640562C9.59438 0.81045 9.66186 0.97338 9.78199 1.09351C9.90212 1.21364 10.0651 1.28112 10.2349 1.28112H14.0079L9.54698 6.73359L6.20452 3.38986C6.13902 3.32442 6.06011 3.27396 5.97322 3.24195C5.88634 3.20995 5.79356 3.19716 5.70126 3.20447C5.60896 3.21177 5.51934 3.239 5.43857 3.28428C5.35781 3.32955 5.28782 3.3918 5.23343 3.46672L0.108928 10.5129C0.0164671 10.6505 -0.0190707 10.8185 0.00978223 10.9817C0.0386352 11.145 0.129633 11.2906 0.263652 11.3882C0.397671 11.4857 0.564277 11.5275 0.728459 11.5047C0.892641 11.482 1.04162 11.3965 1.14408 11.2662L5.82787 4.826L9.14214 8.14027C9.20542 8.20343 9.28122 8.25265 9.36467 8.28475C9.44812 8.31686 9.53736 8.33114 9.62666 8.32667C9.71596 8.32221 9.80333 8.2991 9.88316 8.25883C9.96299 8.21856 10.0335 8.16203 10.0902 8.09287L14.7189 2.43414V5.76506C14.7189 5.93495 14.7864 6.09788 14.9065 6.21801C15.0266 6.33814 15.1895 6.40562 15.3594 6.40562C15.5293 6.40562 15.6923 6.33814 15.8124 6.21801C15.9325 6.09788 16 5.93495 16 5.76506V0.640562C16 0.470675 15.9325 0.307745 15.8124 0.187617C15.6923 0.0674878 15.5293 0 15.3594 0H10.2349C10.0651 0 9.90212 0.0674878 9.78199 0.187617Z"
+      fill="#36AF8B"
+    />
+
+    <rect x="27.7549" y="17.1086" width="5.45898" height="13.7825" rx="2.72949" fill="#3E63DD" />
+  </svg>
+);
+
+export default Upstatistics;
diff --git a/frontend/assets/images/icons/widgets/verticaldivider.jsx b/frontend/assets/images/icons/widgets/verticaldivider.jsx
new file mode 100644
index 0000000000..9f37eb4cd1
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/verticaldivider.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Verticaldivider = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M22.889 1.714a3.143 3.143 0 013.143 3.143v37.715a3.143 3.143 0 11-6.286 0V4.856a3.143 3.143 0 013.143-3.143z"
+      clipRule="evenodd"
+    ></path>
+    <circle cx="22.889" cy="23.714" r="5.153" fill="#3E63DD" transform="rotate(90 22.889 23.714)"></circle>
+  </svg>
+);
+
+export default Verticaldivider;
diff --git a/frontend/assets/images/icons/widgets/verticaldivider.svg b/frontend/assets/images/icons/widgets/verticaldivider.svg
deleted file mode 100644
index c57d739728..0000000000
--- a/frontend/assets/images/icons/widgets/verticaldivider.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="17px" viewBox="0 0 17 17" version="1.1" >
-<g>
-</g>
-	<path d="M2.207 8h3.772v1h-3.772l1.646 1.646-0.707 0.707-2.853-2.853 2.854-2.854 0.707 0.707-1.647 1.647zM13.854 5.646l-0.707 0.707 1.646 1.647h-3.772v1h3.772l-1.646 1.646 0.707 0.707 2.853-2.853-2.853-2.854zM8 17h1v-17h-1v17z" stroke="#61656F" stroke-width="0"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/assets/images/rocket.svg b/frontend/assets/images/rocket.svg
index 16fb357cec..41138a1c7f 100644
--- a/frontend/assets/images/rocket.svg
+++ b/frontend/assets/images/rocket.svg
@@ -1,4 +1,4 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.1996 25.4001C15.1996 24.2001 15.1996 22.8001 15.1996 21.6001C15.1996 21.4001 15.1996 21.2001 14.9996 21.0001C13.5996 19.6001 12.3996 18.4001 10.9996 17.0001C10.7996 16.8001 10.7996 16.8001 10.5996 16.8001C9.39961 16.8001 7.99961 16.8001 6.79961 16.8001H6.59961C6.99961 15.8001 7.39961 14.8001 8.19961 14.0001C8.79961 13.2001 9.39961 12.8001 10.3996 12.6001C10.7996 12.6001 10.9996 12.6001 11.3996 12.6001C11.9996 12.6001 12.5996 12.6001 12.9996 12.6001C13.1996 12.6001 13.1996 12.6001 13.3996 12.4001C14.9996 10.4001 16.9996 8.8001 19.5996 7.6001C20.9996 7.0001 22.3996 6.6001 23.9996 6.6001C24.5996 6.6001 25.1996 6.6001 25.7996 6.6001C25.7996 7.4001 25.7996 8.2001 25.7996 9.2001C25.7996 10.6001 25.1996 12.0001 24.5996 13.2001C23.5996 15.4001 21.9996 17.2001 20.1996 18.6001C19.9996 18.6001 19.9996 18.8001 19.9996 19.0001C19.9996 19.6001 19.9996 20.2001 19.9996 21.0001C19.9996 22.0001 19.5996 23.0001 18.7996 23.6001C18.3996 24.0001 17.9996 24.2001 17.3996 24.4001C16.3996 24.8001 15.7996 25.0001 15.1996 25.4001ZM20.9996 12.4001C20.9996 11.6001 20.3996 11.0001 19.5996 11.0001C18.7996 11.0001 17.9996 11.6001 17.9996 12.4001C17.9996 13.2001 18.7996 14.0001 19.5996 14.0001C20.3996 14.0001 20.9996 13.2001 20.9996 12.4001Z" fill="#3E63DD"/>
-<path d="M12.0004 22.4C10.8004 23.8 9.20039 24.4 7.40039 24.8C7.60039 22.8 8.00039 21.2 9.60039 20C10.4004 20.8 11.2004 21.6 12.0004 22.4Z" fill="#3E63DD"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M5.65881 16.7711C4.45833 18.3654 2.68998 18.9397 0.722656 19.2389C1.10286 17.3358 1.57754 15.5249 3.2044 14.3145C4.01626 15.1269 4.83914 15.951 5.65881 16.7711Z" fill="#3E63DD"/>
+  <path d="M9.11953 20C9.11953 18.6097 9.11046 17.2692 9.12689 15.9299C9.13053 15.6325 9.0441 15.4305 8.83238 15.2223C7.41676 13.829 6.01444 12.4223 4.61154 11.0156C4.50146 10.9052 4.39196 10.8597 4.23503 10.8603C2.90691 10.8664 1.57823 10.8639 0.250199 10.8639C0.168683 10.8639 0.0865519 10.8639 0.00624955 10.8639C0.00381376 10.8318 -0.00348679 10.8142 0.00199195 10.8032C0.529443 9.78252 0.955299 8.70596 1.63973 7.77082C2.21825 6.98076 2.94649 6.3969 3.9503 6.25491C4.27881 6.20819 4.61647 6.22033 4.94983 6.21733C5.54178 6.21183 6.13373 6.21005 6.72567 6.21976C6.88811 6.22219 6.98539 6.16455 7.08454 6.04012C8.83909 3.82878 10.9854 2.11201 13.5807 0.974773C15.0335 0.337579 16.5465 -0.0350255 18.1477 0.00260279C18.7536 0.0171669 19.3608 0.00503123 19.9655 0.00503123C19.9801 0.035981 19.9984 0.0553952 19.9977 0.0748164C19.9922 0.975373 20.0184 1.87837 19.9704 2.77651C19.8888 4.31185 19.3918 5.73912 18.7098 7.1039C17.5679 9.39052 15.9679 11.3075 13.9615 12.889C13.8307 12.9921 13.7705 13.0941 13.773 13.2658C13.7839 13.9546 13.759 14.6446 13.7815 15.3328C13.8198 16.5088 13.3464 17.441 12.4363 18.1473C12.0026 18.4841 11.5214 18.7675 11.0383 19.0333C10.4233 19.3713 9.78448 19.6674 9.11831 19.9994L9.11953 20ZM15.3328 6.20333C15.3273 5.34527 14.6381 4.66256 13.779 4.66442C12.9231 4.6662 12.2265 5.35863 12.2253 6.20883C12.2241 7.06326 12.9425 7.77511 13.796 7.76475C14.6514 7.75446 15.3383 7.05661 15.3328 6.20276V6.20333Z" fill="#3E63DD"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/assets/translations/en.json b/frontend/assets/translations/en.json
index da907d4854..e493560f62 100644
--- a/frontend/assets/translations/en.json
+++ b/frontend/assets/translations/en.json
@@ -38,7 +38,8 @@
         "query": "Query",
         "requestBody": "Request Body",
         "page": "Page",
-        "searchItem": "Search item"
+        "searchItem": "Search item",
+        "searchComponents": "Search components"
     },
     "errorBoundary": "Something went wrong.",
     "viewer": "Sorry!. This app is under maintenance",
@@ -204,7 +205,7 @@
                 "table": "Table",
                 "pageIndex": "Page index",
                 "component": "Component",
-                "addHandler": "Add handler",
+                "addHandler": "New event handler",
                 "addEventHandler": "+ Add event handler",
                 "emptyMessage": "This {{componentName}} doesn't have any event handlers",
                 "page": "Page"
@@ -493,7 +494,7 @@
             "styles": "Styles",
             "general": "General",
             "validation": "Validation",
-            "documentation": "{{componentMeta}} documentation",
+            "documentation": "Read documentation for {{componentMeta}}",
             "widgetNameEmptyError": "Widget name cannot be empty",
             "componentNameExistsError": "Component name already exists",
             "invalidWidgetName": "Invalid widget name. Should be unique and only include letters, numbers and underscore."
@@ -717,8 +718,10 @@
             "buttonPosition": "Button Position",
             "remove": "Remove",
             "addButton": "+ Add button",
-            "addColumn": "+ Add column",
-            "noActionMessage": "This table doesn't have any action buttons"
+            "addColumn": "Add column",
+            "addNewColumn": "Add new column",
+            "noActionMessage": "This table doesn't have any action buttons",
+            "horizontalAlignment":"horizontal alignment"
         },
         "Button": {
             "displayName": "Button",
@@ -926,7 +929,7 @@
         },
         "Comments": {
             "text": "Comments",
-            "tip": "toggle comments",
+            "tip": "Toggle comments",
             "commentBody": "There are no comments to display",
             "typeComment": "Type your comment here"
         },
@@ -935,9 +938,9 @@
             "tip": "Global Settings",
             "hideHeader": "Hide header for launched apps",
             "maintenanceMode": "Maintenance mode",
-            "maxWidthOfCanvas": "Max canvas width",
-            "maxHeightOfCanvas": "Max canvas height",
-            "backgroundColorOfCanvas": "Canvas BG",
+            "maxWidthOfCanvas": "Max width of canvas",
+            "maxHeightOfCanvas": "Max height of canvas",
+            "backgroundColorOfCanvas": "Canvas background",
             "exportApp": "Export app"
         },
         "Back": {
diff --git a/frontend/ee/components/UsersPage/UsersFilter.jsx b/frontend/ee/components/UsersPage/UsersFilter.jsx
index 231997abbc..8c872dd354 100644
--- a/frontend/ee/components/UsersPage/UsersFilter.jsx
+++ b/frontend/ee/components/UsersPage/UsersFilter.jsx
@@ -65,7 +65,6 @@ const UsersFilter = ({ filterList }) => {
               height="32px"
               useMenuPortal={true}
               closeMenuOnSelect={true}
-              customWrap={true}
               width="161.25px"
             />
           </div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f0b5174edd..e44e76c767 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,9 +15,11 @@
         "@emoji-mart/react": "^1.1.1",
         "@radix-ui/colors": "^0.1.8",
         "@radix-ui/react-popover": "^1.0.3",
+        "@radix-ui/react-toggle-group": "^1.0.4",
         "@react-google-maps/api": "^2.18.1",
-        "@sentry/react": "^7.37.2",
-        "@sentry/tracing": "^7.37.2",
+        "@sentry/react": "^7.60.0",
+        "@sentry/tracing": "^7.60.0",
+        "@sentry/webpack-plugin": "^2.5.0",
         "@tabler/icons-react": "^2.4.0",
         "@tooljet/plugins": "../plugins",
         "@uiw/react-codemirror": "^3.0.6",
@@ -116,6 +118,14 @@
         "@babel/plugin-transform-runtime": "^7.19.6",
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-react": "^7.18.6",
+        "@storybook/addon-essentials": "^7.2.1",
+        "@storybook/addon-interactions": "^7.2.1",
+        "@storybook/addon-links": "^7.2.1",
+        "@storybook/addon-onboarding": "^1.0.8",
+        "@storybook/blocks": "^7.2.1",
+        "@storybook/react": "^7.2.1",
+        "@storybook/react-webpack5": "^7.2.1",
+        "@storybook/testing-library": "^0.2.0",
         "@svgr/webpack": "^6.5.1",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -134,6 +144,7 @@
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-storybook": "^0.6.13",
         "html-loader": "^4.2.0",
         "html-webpack-plugin": "^5.5.0",
         "jest": "^29.4.2",
@@ -141,6 +152,7 @@
         "path": "^0.12.7",
         "prettier": "^2.8.4",
         "sass-loader": "^13.2.0",
+        "storybook": "^7.2.1",
         "style-loader": "^3.3.1",
         "terser-webpack-plugin": "^5.3.6",
         "webpack": "^5.75.0",
@@ -20478,42 +20490,58 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.18.6",
-      "license": "MIT",
+    "node_modules/@aw-web-design/x-default-browser": {
+      "version": "1.4.126",
+      "resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz",
+      "integrity": "sha512-Xk1sIhyNC/esHGGVjL/niHLowM0csl/kFO5uawBy4IrWwy0o1G8LGt3jP6nmWGz+USxeeqbihAmp/oVZju6wug==",
+      "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.18.6"
+        "default-browser-id": "3.0.0"
+      },
+      "bin": {
+        "x-default-browser": "bin/x-default-browser.js"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+      "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+      "dependencies": {
+        "@babel/highlight": "^7.22.10",
+        "chalk": "^2.4.2"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.20.14",
-      "license": "MIT",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.20.12",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.10.tgz",
+      "integrity": "sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==",
       "dependencies": {
-        "@ampproject/remapping": "^2.1.0",
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.20.7",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helpers": "^7.20.7",
-        "@babel/parser": "^7.20.7",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.12",
-        "@babel/types": "^7.20.7",
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.22.10",
+        "@babel/generator": "^7.22.10",
+        "@babel/helper-compilation-targets": "^7.22.10",
+        "@babel/helper-module-transforms": "^7.22.9",
+        "@babel/helpers": "^7.22.10",
+        "@babel/parser": "^7.22.10",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.10",
+        "@babel/types": "^7.22.10",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.2.2",
-        "semver": "^6.3.0"
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -20524,8 +20552,9 @@
       }
     },
     "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.0",
-      "license": "ISC",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -20556,11 +20585,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.20.14",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
+      "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
       "dependencies": {
-        "@babel/types": "^7.20.7",
+        "@babel/types": "^7.22.10",
         "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
       },
       "engines": {
@@ -20580,63 +20611,64 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.18.9",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.10.tgz",
+      "integrity": "sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==",
       "dependencies": {
-        "@babel/helper-explode-assignable-expression": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.22.10"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz",
+      "integrity": "sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==",
       "dependencies": {
-        "@babel/compat-data": "^7.20.5",
-        "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.21.3",
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-validator-option": "^7.22.5",
+        "browserslist": "^4.21.9",
         "lru-cache": "^5.1.1",
-        "semver": "^6.3.0"
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.0",
-      "license": "ISC",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz",
-      "integrity": "sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
+      "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-member-expression-to-functions": "^7.21.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/helper-split-export-declaration": "^7.18.6"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -20645,12 +20677,22 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.20.5",
-      "license": "MIT",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz",
+      "integrity": "sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "regexpu-core": "^5.2.1"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -20659,6 +20701,14 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-define-polyfill-provider": {
       "version": "0.3.3",
       "license": "MIT",
@@ -20682,107 +20732,103 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.18.9",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-explode-assignable-expression": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.18.6"
-      },
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
-      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
       "dependencies": {
-        "@babel/template": "^7.20.7",
-        "@babel/types": "^7.21.0"
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
-      "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
+      "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
       "dependencies": {
-        "@babel/types": "^7.21.0"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+      "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.20.11",
-      "license": "MIT",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+      "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.20.2",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/helper-validator-identifier": "^7.19.1",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.10",
-        "@babel/types": "^7.20.7"
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.20.2",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.18.9",
-      "license": "MIT",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz",
+      "integrity": "sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-wrap-function": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-wrap-function": "^7.22.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -20792,102 +20838,111 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz",
+      "integrity": "sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-member-expression-to-functions": "^7.20.7",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.7",
-        "@babel/types": "^7.20.7"
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-simple-access": {
-      "version": "7.20.2",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
       "dependencies": {
-        "@babel/types": "^7.20.2"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.20.0",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
       "dependencies": {
-        "@babel/types": "^7.20.0"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.19.4",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+      "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.20.5",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz",
+      "integrity": "sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==",
       "dependencies": {
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.20.5",
-        "@babel/types": "^7.20.5"
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.10"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.20.13",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.10.tgz",
+      "integrity": "sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==",
       "dependencies": {
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.13",
-        "@babel/types": "^7.20.7"
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.10",
+        "@babel/types": "^7.22.10"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
+      "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.18.6",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "chalk": "^2.4.2",
         "js-tokens": "^4.0.0"
       },
       "engines": {
@@ -20895,8 +20950,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.20.13",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -20905,10 +20961,11 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
+      "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -20918,12 +20975,13 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
+      "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -20935,6 +20993,7 @@
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
       "version": "7.20.7",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-plugin-utils": "^7.20.2",
@@ -20962,35 +21021,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-class-static-block": {
-      "version": "7.20.7",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.20.7",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.12.0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-dynamic-import": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-export-default-from": {
       "version": "7.18.10",
       "license": "MIT",
@@ -21006,48 +21036,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.18.9",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-json-strings": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.20.7",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
       "version": "7.18.6",
       "license": "MIT",
@@ -21062,23 +21050,10 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-numeric-separator": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-object-rest-spread": {
       "version": "7.20.7",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/compat-data": "^7.20.5",
         "@babel/helper-compilation-targets": "^7.20.7",
@@ -21096,6 +21071,7 @@
     "node_modules/@babel/plugin-proposal-optional-catch-binding": {
       "version": "7.18.6",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
@@ -21122,29 +21098,10 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-methods": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.20.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.20.5",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      },
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
       "engines": {
         "node": ">=6.9.0"
       },
@@ -21152,20 +21109,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
       "license": "MIT",
@@ -21199,7 +21142,8 @@
     },
     "node_modules/@babel/plugin-syntax-class-static-block": {
       "version": "7.14.5",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
       },
@@ -21236,7 +21180,8 @@
     },
     "node_modules/@babel/plugin-syntax-export-namespace-from": {
       "version": "7.8.3",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.3"
       },
@@ -21245,11 +21190,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-flow": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "peer": true,
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz",
+      "integrity": "sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21259,10 +21204,25 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.20.0",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz",
+      "integrity": "sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.19.0"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz",
+      "integrity": "sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21273,7 +21233,6 @@
     },
     "node_modules/@babel/plugin-syntax-import-meta": {
       "version": "7.10.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
@@ -21293,10 +21252,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
+      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21367,7 +21327,8 @@
     },
     "node_modules/@babel/plugin-syntax-private-property-in-object": {
       "version": "7.14.5",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
       },
@@ -21404,11 +21365,44 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.20.7",
-      "license": "MIT",
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
+      "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.10.tgz",
+      "integrity": "sha512-eueE8lvKVzq5wIObKK/7dvoeKJ+xc6TvRn6aysIjS6pSCeLy7S/eVi7pEQknZqyqvzaNKdDtem8nUNTBgDVR2g==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.9",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21418,12 +21412,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
+      "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-remap-async-to-generator": "^7.18.9"
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21433,10 +21428,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
+      "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21446,10 +21442,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.20.14",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.10.tgz",
+      "integrity": "sha512-1+kVpGAOOI1Albt6Vse7c8pHzcZQdQKW+wJH+g8mCaszOdDVwRXa/slHPqIw+oJAJANTKDMuM2cBdV0Dg618Vg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21458,18 +21455,50 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.20.7",
-      "license": "MIT",
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz",
+      "integrity": "sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz",
+      "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz",
+      "integrity": "sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -21480,11 +21509,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
+      "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/template": "^7.20.7"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/template": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21494,10 +21524,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.10.tgz",
+      "integrity": "sha512-dPJrL0VOyxqLM9sritNbMSGx/teueHF/htMKrPT7DNxccXxRDPYqlgPFFdr8u+F+qUZOkZoXue/6rL5O5GduEw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21507,11 +21538,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
+      "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21521,10 +21553,26 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.18.9",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
+      "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz",
+      "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21534,11 +21582,27 @@
       }
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
+      "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz",
+      "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21548,12 +21612,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-flow-strip-types": {
-      "version": "7.19.0",
-      "license": "MIT",
-      "peer": true,
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.22.5.tgz",
+      "integrity": "sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.19.0",
-        "@babel/plugin-syntax-flow": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-flow": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21563,10 +21627,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.18.8",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
+      "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21576,12 +21641,28 @@
       }
     },
     "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.18.9",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
+      "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz",
+      "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21591,10 +21672,26 @@
       }
     },
     "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.18.9",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
+      "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz",
+      "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21604,10 +21701,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
+      "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21617,11 +21715,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.20.11",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
+      "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21631,12 +21730,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.20.11",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz",
+      "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-simple-access": "^7.20.2"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21646,13 +21746,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.20.11",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
+      "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
       "dependencies": {
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-identifier": "^7.19.1"
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21662,11 +21763,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
+      "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21676,11 +21778,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.20.5",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21690,10 +21793,59 @@
       }
     },
     "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
+      "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz",
+      "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz",
+      "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
+      "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21703,11 +21855,43 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
+      "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz",
+      "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz",
+      "integrity": "sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21717,10 +21901,43 @@
       }
     },
     "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
+      "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz",
+      "integrity": "sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz",
+      "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21730,10 +21947,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
+      "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21757,10 +21975,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-display-name": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz",
+      "integrity": "sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21770,14 +21989,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.20.13",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz",
+      "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.20.7"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21787,11 +22007,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-development": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+      "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.18.6"
+        "@babel/plugin-transform-react-jsx": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21829,12 +22050,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz",
+      "integrity": "sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21844,11 +22066,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.20.5",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz",
+      "integrity": "sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "regenerator-transform": "^0.15.1"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "regenerator-transform": "^0.15.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21858,10 +22081,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
+      "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21896,10 +22120,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
+      "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21909,11 +22134,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
+      "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21923,10 +22149,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
+      "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21936,10 +22163,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.18.9",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
+      "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21949,10 +22177,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.18.9",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
+      "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21977,10 +22206,26 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.18.10",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz",
+      "integrity": "sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz",
+      "integrity": "sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -21990,11 +22235,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.18.6",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
+      "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -22003,37 +22249,41 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/preset-env": {
-      "version": "7.20.2",
-      "license": "MIT",
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz",
+      "integrity": "sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==",
       "dependencies": {
-        "@babel/compat-data": "^7.20.1",
-        "@babel/helper-compilation-targets": "^7.20.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-async-generator-functions": "^7.20.1",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-class-static-block": "^7.18.6",
-        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
-        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-        "@babel/plugin-proposal-json-strings": "^7.18.6",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-        "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
-        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.10.tgz",
+      "integrity": "sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.10",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.5",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-class-properties": "^7.12.13",
         "@babel/plugin-syntax-class-static-block": "^7.14.5",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-import-assertions": "^7.20.0",
+        "@babel/plugin-syntax-import-assertions": "^7.22.5",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
         "@babel/plugin-syntax-json-strings": "^7.8.3",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
@@ -22043,45 +22293,62 @@
         "@babel/plugin-syntax-optional-chaining": "^7.8.3",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-transform-arrow-functions": "^7.18.6",
-        "@babel/plugin-transform-async-to-generator": "^7.18.6",
-        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
-        "@babel/plugin-transform-block-scoping": "^7.20.2",
-        "@babel/plugin-transform-classes": "^7.20.2",
-        "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.20.2",
-        "@babel/plugin-transform-dotall-regex": "^7.18.6",
-        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
-        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
-        "@babel/plugin-transform-for-of": "^7.18.8",
-        "@babel/plugin-transform-function-name": "^7.18.9",
-        "@babel/plugin-transform-literals": "^7.18.9",
-        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
-        "@babel/plugin-transform-modules-amd": "^7.19.6",
-        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
-        "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
-        "@babel/plugin-transform-new-target": "^7.18.6",
-        "@babel/plugin-transform-object-super": "^7.18.6",
-        "@babel/plugin-transform-parameters": "^7.20.1",
-        "@babel/plugin-transform-property-literals": "^7.18.6",
-        "@babel/plugin-transform-regenerator": "^7.18.6",
-        "@babel/plugin-transform-reserved-words": "^7.18.6",
-        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-        "@babel/plugin-transform-spread": "^7.19.0",
-        "@babel/plugin-transform-sticky-regex": "^7.18.6",
-        "@babel/plugin-transform-template-literals": "^7.18.9",
-        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
-        "@babel/plugin-transform-unicode-escapes": "^7.18.10",
-        "@babel/plugin-transform-unicode-regex": "^7.18.6",
-        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.1",
-        "core-js-compat": "^3.25.1",
-        "semver": "^6.3.0"
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.22.5",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.10",
+        "@babel/plugin-transform-async-to-generator": "^7.22.5",
+        "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
+        "@babel/plugin-transform-block-scoping": "^7.22.10",
+        "@babel/plugin-transform-class-properties": "^7.22.5",
+        "@babel/plugin-transform-class-static-block": "^7.22.5",
+        "@babel/plugin-transform-classes": "^7.22.6",
+        "@babel/plugin-transform-computed-properties": "^7.22.5",
+        "@babel/plugin-transform-destructuring": "^7.22.10",
+        "@babel/plugin-transform-dotall-regex": "^7.22.5",
+        "@babel/plugin-transform-duplicate-keys": "^7.22.5",
+        "@babel/plugin-transform-dynamic-import": "^7.22.5",
+        "@babel/plugin-transform-exponentiation-operator": "^7.22.5",
+        "@babel/plugin-transform-export-namespace-from": "^7.22.5",
+        "@babel/plugin-transform-for-of": "^7.22.5",
+        "@babel/plugin-transform-function-name": "^7.22.5",
+        "@babel/plugin-transform-json-strings": "^7.22.5",
+        "@babel/plugin-transform-literals": "^7.22.5",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.22.5",
+        "@babel/plugin-transform-member-expression-literals": "^7.22.5",
+        "@babel/plugin-transform-modules-amd": "^7.22.5",
+        "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+        "@babel/plugin-transform-modules-systemjs": "^7.22.5",
+        "@babel/plugin-transform-modules-umd": "^7.22.5",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+        "@babel/plugin-transform-new-target": "^7.22.5",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.5",
+        "@babel/plugin-transform-numeric-separator": "^7.22.5",
+        "@babel/plugin-transform-object-rest-spread": "^7.22.5",
+        "@babel/plugin-transform-object-super": "^7.22.5",
+        "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.22.10",
+        "@babel/plugin-transform-parameters": "^7.22.5",
+        "@babel/plugin-transform-private-methods": "^7.22.5",
+        "@babel/plugin-transform-private-property-in-object": "^7.22.5",
+        "@babel/plugin-transform-property-literals": "^7.22.5",
+        "@babel/plugin-transform-regenerator": "^7.22.10",
+        "@babel/plugin-transform-reserved-words": "^7.22.5",
+        "@babel/plugin-transform-shorthand-properties": "^7.22.5",
+        "@babel/plugin-transform-spread": "^7.22.5",
+        "@babel/plugin-transform-sticky-regex": "^7.22.5",
+        "@babel/plugin-transform-template-literals": "^7.22.5",
+        "@babel/plugin-transform-typeof-symbol": "^7.22.5",
+        "@babel/plugin-transform-unicode-escapes": "^7.22.10",
+        "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
+        "@babel/plugin-transform-unicode-regex": "^7.22.5",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "@babel/types": "^7.22.10",
+        "babel-plugin-polyfill-corejs2": "^0.4.5",
+        "babel-plugin-polyfill-corejs3": "^0.8.3",
+        "babel-plugin-polyfill-regenerator": "^0.5.2",
+        "core-js-compat": "^3.31.0",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -22090,21 +22357,73 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz",
+      "integrity": "sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
+      "integrity": "sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.6",
+        "@babel/helper-define-polyfill-provider": "^0.4.2",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz",
+      "integrity": "sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.2",
+        "core-js-compat": "^3.31.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz",
+      "integrity": "sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
-      "version": "6.3.0",
-      "license": "ISC",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/@babel/preset-flow": {
-      "version": "7.18.6",
-      "license": "MIT",
-      "peer": true,
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.22.5.tgz",
+      "integrity": "sha512-ta2qZ+LSiGCrP5pgcGt8xMnnkXQrq8Sa4Ulhy06BOlF5QbLw9q5hIx7bn5MrsvyTGAfh6kTOo07Q+Pfld/8Y5Q==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-transform-flow-strip-types": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-transform-flow-strip-types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -22114,30 +22433,30 @@
       }
     },
     "node_modules/@babel/preset-modules": {
-      "version": "0.1.5",
-      "license": "MIT",
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-        "@babel/plugin-transform-dotall-regex": "^7.4.4",
         "@babel/types": "^7.4.4",
         "esutils": "^2.0.2"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
     "node_modules/@babel/preset-react": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.22.5.tgz",
+      "integrity": "sha512-M+Is3WikOpEJHgR385HbuCITPTaPRaNkibTEa9oiofmJvIsrceb4yp9RL9Kb+TE8LznmeyZqpP+Lopwcx59xPQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-transform-react-display-name": "^7.18.6",
-        "@babel/plugin-transform-react-jsx": "^7.18.6",
-        "@babel/plugin-transform-react-jsx-development": "^7.18.6",
-        "@babel/plugin-transform-react-pure-annotations": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-transform-react-display-name": "^7.22.5",
+        "@babel/plugin-transform-react-jsx": "^7.22.5",
+        "@babel/plugin-transform-react-jsx-development": "^7.22.5",
+        "@babel/plugin-transform-react-pure-annotations": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -22164,7 +22483,6 @@
     "node_modules/@babel/register": {
       "version": "7.18.9",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "clone-deep": "^4.0.1",
         "find-cache-dir": "^2.0.0",
@@ -22182,7 +22500,6 @@
     "node_modules/@babel/register/node_modules/find-cache-dir": {
       "version": "2.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "commondir": "^1.0.1",
         "make-dir": "^2.0.0",
@@ -22195,7 +22512,6 @@
     "node_modules/@babel/register/node_modules/find-up": {
       "version": "3.0.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "locate-path": "^3.0.0"
       },
@@ -22206,7 +22522,6 @@
     "node_modules/@babel/register/node_modules/locate-path": {
       "version": "3.0.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
@@ -22218,7 +22533,6 @@
     "node_modules/@babel/register/node_modules/make-dir": {
       "version": "2.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -22230,7 +22544,6 @@
     "node_modules/@babel/register/node_modules/p-locate": {
       "version": "3.0.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-limit": "^2.0.0"
       },
@@ -22241,7 +22554,6 @@
     "node_modules/@babel/register/node_modules/path-exists": {
       "version": "3.0.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -22249,7 +22561,6 @@
     "node_modules/@babel/register/node_modules/pkg-dir": {
       "version": "3.0.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "find-up": "^3.0.0"
       },
@@ -22260,11 +22571,15 @@
     "node_modules/@babel/register/node_modules/semver": {
       "version": "5.7.1",
       "license": "ISC",
-      "peer": true,
       "bin": {
         "semver": "bin/semver"
       }
     },
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+    },
     "node_modules/@babel/runtime": {
       "version": "7.20.13",
       "license": "MIT",
@@ -22276,29 +22591,31 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
       "dependencies": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7"
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.20.13",
-      "license": "MIT",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz",
+      "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==",
       "dependencies": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.20.7",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.20.13",
-        "@babel/types": "^7.20.7",
+        "@babel/code-frame": "^7.22.10",
+        "@babel/generator": "^7.22.10",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.22.10",
+        "@babel/types": "^7.22.10",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -22307,18 +22624,24 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.21.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.3.tgz",
-      "integrity": "sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz",
+      "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.19.4",
-        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@base2/pretty-print-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz",
+      "integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==",
+      "dev": true
+    },
     "node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
       "dev": true,
@@ -22347,6 +22670,16 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
     "node_modules/@daybrush/utils": {
       "version": "1.10.2",
       "license": "MIT"
@@ -22575,6 +22908,54 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/darwin-arm64": {
       "version": "0.17.8",
       "cpu": [
@@ -22590,6 +22971,294 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -22703,6 +23372,12 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fal-works/esbuild-plugin-global-externals": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz",
+      "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
+      "dev": true
+    },
     "node_modules/@floating-ui/core": {
       "version": "0.7.3",
       "license": "MIT"
@@ -22726,6 +23401,12 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
+      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
+      "dev": true
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "dev": true,
@@ -22796,6 +23477,102 @@
         "react": "*"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "dev": true,
@@ -24027,7 +24804,6 @@
     "node_modules/@jest/types": {
       "version": "27.5.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/istanbul-lib-coverage": "^2.0.0",
         "@types/istanbul-reports": "^3.0.0",
@@ -24042,7 +24818,6 @@
     "node_modules/@jest/types/node_modules/ansi-styles": {
       "version": "4.3.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -24056,7 +24831,6 @@
     "node_modules/@jest/types/node_modules/chalk": {
       "version": "4.1.2",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -24071,7 +24845,6 @@
     "node_modules/@jest/types/node_modules/color-convert": {
       "version": "2.0.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -24081,13 +24854,11 @@
     },
     "node_modules/@jest/types/node_modules/color-name": {
       "version": "1.1.4",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@jest/types/node_modules/has-flag": {
       "version": "4.0.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -24095,7 +24866,6 @@
     "node_modules/@jest/types/node_modules/supports-color": {
       "version": "7.2.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -24160,6 +24930,12 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "dev": true
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "dev": true,
@@ -24228,6 +25004,34 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@mdx-js/react": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
+      "integrity": "sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==",
+      "dev": true,
+      "dependencies": {
+        "@types/mdx": "^2.0.0",
+        "@types/react": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@ndelangen/get-tarball": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz",
+      "integrity": "sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==",
+      "dev": true,
+      "dependencies": {
+        "gunzip-maybe": "^1.4.2",
+        "pump": "^3.0.0",
+        "tar-fs": "^2.1.1"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "dev": true,
@@ -24292,6 +25096,16 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@plotly/d3": {
       "version": "3.8.0",
       "license": "BSD-3-Clause",
@@ -24348,6 +25162,15 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-0.1.8.tgz",
       "integrity": "sha512-jwRMXYwC0hUo0mv6wGpuw254Pd9p/R6Td5xsRpOmaWkUHlooNWqVcadgyzlRumMq3xfOTXwJReU0Jv+EIy4Jbw=="
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+      "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.0",
       "license": "MIT",
@@ -24367,6 +25190,107 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.0",
       "license": "MIT",
@@ -24387,6 +25311,23 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.0.2",
       "license": "MIT",
@@ -24522,6 +25463,647 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz",
+      "integrity": "sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.4",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.3",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.2",
+        "@radix-ui/react-portal": "1.0.3",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@floating-ui/core": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+      "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@floating-ui/dom": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
+      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.4.1",
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@floating-ui/react-dom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz",
+      "integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
+      "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
+      "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
+      "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+      "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.1",
       "license": "MIT",
@@ -24533,6 +26115,279 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "license": "MIT",
@@ -24575,6 +26430,24 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.0.0",
       "license": "MIT",
@@ -24597,6 +26470,91 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.0.0",
       "license": "MIT",
@@ -26511,49 +28469,248 @@
         "@daybrush/utils": "^1.4.0"
       }
     },
-    "node_modules/@sentry/browser": {
-      "version": "7.37.2",
-      "license": "MIT",
+    "node_modules/@sentry-internal/tracing": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.66.0.tgz",
+      "integrity": "sha512-3vCgC2hC3T45pn53yTDVcRpHoJTBxelDPPZVsipAbZnoOVPkj7n6dNfDhj3I3kwWCBPahPkXmE+R4xViR8VqJg==",
       "dependencies": {
-        "@sentry/core": "7.37.2",
-        "@sentry/replay": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
-        "tslib": "^1.9.3"
+        "@sentry/core": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@sentry/browser/node_modules/tslib": {
-      "version": "1.14.1",
-      "license": "0BSD"
+    "node_modules/@sentry/browser": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.66.0.tgz",
+      "integrity": "sha512-rW037rf8jkhyykG38+HUdwkRCKHJEMM5NkCqPIO5zuuxfLKukKdI2rbvgJ93s3/9UfsTuDFcKFL1u43mCn6sDw==",
+      "dependencies": {
+        "@sentry-internal/tracing": "7.66.0",
+        "@sentry/core": "7.66.0",
+        "@sentry/replay": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.7.0.tgz",
+      "integrity": "sha512-ZxJG/DsRXJ9BMaKv+butL3TaiHsuuUy1bNkl56/FCbCt1rYuzltEPT2cBuuveieg66ZWtzerSF17QX3v6svtJQ==",
+      "dependencies": {
+        "@sentry/cli": "^2.20.1",
+        "@sentry/node": "^7.60.0",
+        "@sentry/utils": "^7.60.0",
+        "dotenv": "^16.3.1",
+        "find-up": "5.0.0",
+        "glob": "9.3.2",
+        "magic-string": "0.27.0",
+        "unplugin": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/glob": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-9.3.2.tgz",
+      "integrity": "sha512-BTv/JhKXFEHsErMte/AnfiSv8yYOLLiyH2lTg8vn02O21zWFgHPTfxtgn1QRe7NRgggUhC8hacR2Re94svHqeA==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "minimatch": "^7.4.1",
+        "minipass": "^4.2.4",
+        "path-scurry": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/minimatch": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+      "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/minipass": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+      "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sentry/bundler-plugin-core/node_modules/unplugin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.0.1.tgz",
+      "integrity": "sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==",
+      "dependencies": {
+        "acorn": "^8.8.1",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.5.0"
+      }
+    },
+    "node_modules/@sentry/cli": {
+      "version": "2.20.6",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.20.6.tgz",
+      "integrity": "sha512-j4OFbDCIo/dB/uXDmXnRqCbku0KquekSFSG0Wb6RKwkGqpKwFMRauKXZJrgL4as3qIfDX8HrjNRv257QYMwdQA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "sentry-cli": "bin/sentry-cli"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
     },
     "node_modules/@sentry/core": {
-      "version": "7.37.2",
-      "license": "MIT",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.66.0.tgz",
+      "integrity": "sha512-WMAEPN86NeCJ1IT48Lqiz4MS5gdDjBwP4M63XP4msZn9aujSf2Qb6My5uT87AJr9zBtgk8MyJsuHr35F0P3q1w==",
       "dependencies": {
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
-        "tslib": "^1.9.3"
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@sentry/core/node_modules/tslib": {
-      "version": "1.14.1",
-      "license": "0BSD"
+    "node_modules/@sentry/node": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.66.0.tgz",
+      "integrity": "sha512-PxqIqLr4Sh5xcDfECiBQ4PuZ7v8yTgLhaRkruWrZPYxQrcJFPkwbFkw/IskzVnhT2VwXUmeWEIlRMQKBJ0t83A==",
+      "dependencies": {
+        "@sentry-internal/tracing": "7.66.0",
+        "@sentry/core": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "cookie": "^0.4.1",
+        "https-proxy-agent": "^5.0.0",
+        "lru_map": "^0.3.3",
+        "tslib": "^2.4.1 || ^1.9.3"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/node/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
     },
     "node_modules/@sentry/react": {
-      "version": "7.37.2",
-      "license": "MIT",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.66.0.tgz",
+      "integrity": "sha512-TC7kCkLoo+Klp9uywdV6tg8DDyn1CrTdndJghO6PoGz6sCa9k+t7K+z4E7MlgDoh3wiZwS2G2zhkT/xVeDRvJA==",
       "dependencies": {
-        "@sentry/browser": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
+        "@sentry/browser": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
         "hoist-non-react-statics": "^3.3.2",
-        "tslib": "^1.9.3"
+        "tslib": "^2.4.1 || ^1.9.3"
       },
       "engines": {
         "node": ">=8"
@@ -26562,60 +28719,87 @@
         "react": "15.x || 16.x || 17.x || 18.x"
       }
     },
-    "node_modules/@sentry/react/node_modules/tslib": {
-      "version": "1.14.1",
-      "license": "0BSD"
-    },
     "node_modules/@sentry/replay": {
-      "version": "7.37.2",
-      "license": "MIT",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.66.0.tgz",
+      "integrity": "sha512-5Y2SlVTOFTo3uIycv0mRneBakQtLgWkOnsJaC5LB0Ip0TqVKiMCbQ578vvXp+yvRj4LcS1gNd98xTTNojBoQNg==",
       "dependencies": {
-        "@sentry/core": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2"
+        "@sentry/core": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry/tracing": {
-      "version": "7.37.2",
-      "license": "MIT",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.66.0.tgz",
+      "integrity": "sha512-9bnz2EcOwjeMZAuYJnrwcRrImu9c10p7A0iDB8b2HLcp7gpuCkJbJyGoC1xeKD7reVD0BPq3VIbeHSwCcQufoQ==",
       "dependencies": {
-        "@sentry/core": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
-        "tslib": "^1.9.3"
+        "@sentry-internal/tracing": "7.66.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@sentry/tracing/node_modules/tslib": {
-      "version": "1.14.1",
-      "license": "0BSD"
-    },
     "node_modules/@sentry/types": {
-      "version": "7.37.2",
-      "license": "MIT",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.66.0.tgz",
+      "integrity": "sha512-uUMSoSiar6JhuD8p7ON/Ddp4JYvrVd2RpwXJRPH1A4H4Bd4DVt1mKJy1OLG6HdeQv39XyhB1lPZckKJg4tATPw==",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/utils": {
-      "version": "7.37.2",
-      "license": "MIT",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.66.0.tgz",
+      "integrity": "sha512-9GYUVgXjK66uXXcLXVMXVzlptqMtq1eJENCuDeezQiEFrNA71KkLDg00wESp+LL+bl3wpVTBApArpbF6UEG5hQ==",
       "dependencies": {
-        "@sentry/types": "7.37.2",
-        "tslib": "^1.9.3"
+        "@sentry/types": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@sentry/utils/node_modules/tslib": {
-      "version": "1.14.1",
-      "license": "0BSD"
+    "node_modules/@sentry/webpack-plugin": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-2.7.0.tgz",
+      "integrity": "sha512-RN/Z72P2rNPiNsnH2OCHx3rOSDZa/HDLKUUMn2QO//kkTZS/Iu0HCNgCg1Ik5Z6evxtPC0bPhWo9aBksKaXDbg==",
+      "dependencies": {
+        "@sentry/bundler-plugin-core": "2.7.0",
+        "unplugin": "1.0.1",
+        "uuid": "^9.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "webpack": ">=4.40.0"
+      }
+    },
+    "node_modules/@sentry/webpack-plugin/node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@sentry/webpack-plugin/node_modules/unplugin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.0.1.tgz",
+      "integrity": "sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==",
+      "dependencies": {
+        "acorn": "^8.8.1",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.5.0"
+      }
     },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
@@ -26653,6 +28837,2951 @@
         "@sinonjs/commons": "^2.0.0"
       }
     },
+    "node_modules/@storybook/addon-actions": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.2.1.tgz",
+      "integrity": "sha512-YUiKksgRIUm80eZacj/x14BEYCQY5iel1/Wo6mrTP7bVQrUNiCmnINSrup0DObg7lmIaq00h3ow7gKeYJ+x6zw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "polished": "^4.2.2",
+        "prop-types": "^15.7.2",
+        "react-inspector": "^6.0.0",
+        "telejson": "^7.0.3",
+        "ts-dedent": "^2.0.0",
+        "uuid": "^9.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-backgrounds": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.2.1.tgz",
+      "integrity": "sha512-F+/eERFnCIjDaOkCbCS0erre1AbjsHoM0IdLu2sGIBwuroFwKYy/ijadSsJ1zk4eBqZFxdyN4CuMN6EsK1Xm+Q==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-controls": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.2.1.tgz",
+      "integrity": "sha512-ioILEP4wZo6n8ifr1b+o8xCdMVLWyhHqNWoQoBRixxWwpzR4/fHaKo7wBGSkOOWubkhen6wUMUuiJbDdoGyR7g==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/blocks": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "lodash": "^4.17.21",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-docs": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.2.1.tgz",
+      "integrity": "sha512-QlUM22wK0cE9glMRt1auP3BccjafdRvcsAnaLvDIL12HRaUqMpH6vvNN3A3MXo6XuzbOmDwAov5mXdCenpz02A==",
+      "dev": true,
+      "dependencies": {
+        "@jest/transform": "^29.3.1",
+        "@mdx-js/react": "^2.1.5",
+        "@storybook/blocks": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/csf-plugin": "7.2.1",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/mdx2-csf": "^1.0.0",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/postinstall": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/react-dom-shim": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "fs-extra": "^11.1.0",
+        "remark-external-links": "^8.0.0",
+        "remark-slug": "^6.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-docs/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/addon-docs/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/addon-essentials": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.2.1.tgz",
+      "integrity": "sha512-+ICPYpuljKOoO1oTRfoax4n+3UD2/xAY8qQmAsRNN3xOBNJfdrsrCocrfY1j74xqoX+Zflvp5V481zq+MpP4XQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-actions": "7.2.1",
+        "@storybook/addon-backgrounds": "7.2.1",
+        "@storybook/addon-controls": "7.2.1",
+        "@storybook/addon-docs": "7.2.1",
+        "@storybook/addon-highlight": "7.2.1",
+        "@storybook/addon-measure": "7.2.1",
+        "@storybook/addon-outline": "7.2.1",
+        "@storybook/addon-toolbars": "7.2.1",
+        "@storybook/addon-viewport": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-highlight": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.2.1.tgz",
+      "integrity": "sha512-6nNqpSMImn1mSGmEKF1o+C6o4lWJjduGYnCIO/ouXExaNLMrdcGKUEWrluABLOeDRPcNC9/EkuIEd8IsDnUX4A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/preview-api": "7.2.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-interactions": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.2.1.tgz",
+      "integrity": "sha512-EuQMvigfEfQedNBojZhVs8x2mG8tL2n2yhtuYUsmHCmwAITcVxgPRV0xCgv676B8uRQvUru+cm9/nBIf2rUg/A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/instrumenter": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "jest-mock": "^27.0.6",
+        "polished": "^4.2.2",
+        "ts-dedent": "^2.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-interactions/node_modules/jest-mock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-links": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.2.1.tgz",
+      "integrity": "sha512-3UQfOZ1+wGlPsHWWjXjPskq6nsDXuB+8QvOcpqy51mK+5Zv/EQe386hWj9VUpjLNMxXarWETa5CXGfoQdFzJTA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/router": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "prop-types": "^15.7.2",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-measure": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.2.1.tgz",
+      "integrity": "sha512-3Rq/B3Iurbo5dZvUN735GHK+9EDm0xw+liK0PdeYvl21/RkXTV+a4aBcWyyeWwwu1S7pdK1B/0WEc9d5Lot8sA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-onboarding": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-1.0.8.tgz",
+      "integrity": "sha512-3WwCocUuTibHWO89uzAbeONEn6x9NkmxA0mOU4rYPhEsMQ4NDNDD1GXcievZmpwt5VviFgw5FRx8+BxPn54YmQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/telemetry": "^7.1.0-alpha.32",
+        "react-confetti": "^6.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-outline": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.2.1.tgz",
+      "integrity": "sha512-v2dYDhfSzV8Nsi1pmjcLEOHGJLlUnpnSXlQymb338YJEFKP2G5ylHzKAHG16MmzKeZZd3rthTB0246SFCyf0hg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-toolbars": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.2.1.tgz",
+      "integrity": "sha512-SEDj9f0EgifPK/Eyh703N1tbk7SZ7yAZOnNUK8T0mwdKrMa7jskvYuift8iSnJA2ldp1siqwe1Obq+Oielp9hQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-viewport": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.2.1.tgz",
+      "integrity": "sha512-aHl3rCh4MNByfWVtjBzkwMtz0iHQHFhatWXVt7mQoTQFBbZHpeynKvLfKBprp+2whK9RoDHqBUjqGTZrECdpRA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "prop-types": "^15.7.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addons": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.2.1.tgz",
+      "integrity": "sha512-I49JOSU5Imv91IWiNQvqGJDZ/llnSxQvttWAh+exhw7+Pq3xfwRmD+fNfyqm1C68/dVGNgwY/w40AP5cQb2PLA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/blocks": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.2.1.tgz",
+      "integrity": "sha512-1fPsFC6n9R267KwxGHiL80OuIdMDRC9QuIW4sRF0tF/G/yvucbofySYRQl/Y8LjsMJq8D4NpG5xLsneSxMP5cg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/docs-tools": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/lodash": "^4.14.167",
+        "color-convert": "^2.0.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "markdown-to-jsx": "^7.1.8",
+        "memoizerific": "^1.11.3",
+        "polished": "^4.2.2",
+        "react-colorful": "^5.1.2",
+        "telejson": "^7.0.3",
+        "tocbot": "^4.20.1",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/blocks/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@storybook/blocks/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@storybook/builder-manager": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.2.1.tgz",
+      "integrity": "sha512-X8B1cUfDaTtsJY3xJNwPy6W4UN7LWXkKktJBoNUGESigQGKpAMvUAmABCZIjZD8GcdGMtU8y/fA7YimUpy/ZKQ==",
+      "dev": true,
+      "dependencies": {
+        "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/manager": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@types/ejs": "^3.1.1",
+        "@types/find-cache-dir": "^3.2.1",
+        "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
+        "browser-assert": "^1.2.1",
+        "ejs": "^3.1.8",
+        "esbuild": "^0.18.0",
+        "esbuild-plugin-alias": "^0.2.1",
+        "express": "^4.17.3",
+        "find-cache-dir": "^3.0.0",
+        "fs-extra": "^11.1.0",
+        "process": "^0.11.10",
+        "util": "^0.12.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/esbuild": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.2.1.tgz",
+      "integrity": "sha512-llN66MbvsGfjgHArVZxfNXxgwhUzQRjpiyqFBfzzP5q83ck16pkqYjffRKRH/Y6CR4VNwXn2XMurPJQqT+aWVA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.22.9",
+        "@storybook/addons": "7.2.1",
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-api": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/core-webpack": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/router": "7.2.1",
+        "@storybook/store": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@swc/core": "^1.3.49",
+        "@types/node": "^16.0.0",
+        "@types/semver": "^7.3.4",
+        "babel-loader": "^9.0.0",
+        "babel-plugin-named-exports-order": "^0.0.2",
+        "browser-assert": "^1.2.1",
+        "case-sensitive-paths-webpack-plugin": "^2.4.0",
+        "constants-browserify": "^1.0.0",
+        "css-loader": "^6.7.1",
+        "express": "^4.17.3",
+        "fork-ts-checker-webpack-plugin": "^8.0.0",
+        "fs-extra": "^11.1.0",
+        "html-webpack-plugin": "^5.5.0",
+        "path-browserify": "^1.0.1",
+        "process": "^0.11.10",
+        "semver": "^7.3.7",
+        "style-loader": "^3.3.1",
+        "swc-loader": "^0.2.3",
+        "terser-webpack-plugin": "^5.3.1",
+        "ts-dedent": "^2.0.0",
+        "url": "^0.11.0",
+        "util": "^0.12.4",
+        "util-deprecate": "^1.0.2",
+        "webpack": "5",
+        "webpack-dev-middleware": "^6.1.1",
+        "webpack-hot-middleware": "^2.25.1",
+        "webpack-virtual-modules": "^0.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/@swc/core": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.75.tgz",
+      "integrity": "sha512-YLqd5oZVnaOq/OzkjRSsJUQqAfKYiD0fzUyVUPVlNNCoQEfVfSMcXH80hLmYe9aDH0T/a7qEMjWyIr/0kWqy1A==",
+      "dev": true,
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.3.75",
+        "@swc/core-darwin-x64": "1.3.75",
+        "@swc/core-linux-arm-gnueabihf": "1.3.75",
+        "@swc/core-linux-arm64-gnu": "1.3.75",
+        "@swc/core-linux-arm64-musl": "1.3.75",
+        "@swc/core-linux-x64-gnu": "1.3.75",
+        "@swc/core-linux-x64-musl": "1.3.75",
+        "@swc/core-win32-arm64-msvc": "1.3.75",
+        "@swc/core-win32-ia32-msvc": "1.3.75",
+        "@swc/core-win32-x64-msvc": "1.3.75"
+      },
+      "peerDependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/@swc/helpers": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/@types/node": {
+      "version": "16.18.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+      "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+      "dev": true
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/swc-loader": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz",
+      "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==",
+      "dev": true,
+      "peerDependencies": {
+        "@swc/core": "^1.2.147",
+        "webpack": ">=2"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/webpack-dev-middleware": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.1.tgz",
+      "integrity": "sha512-y51HrHaFeeWir0YO4f0g+9GwZawuigzcAdRNon6jErXy/SqV/+O6eaVAzDqE6t3e3NpGeR5CS+cCDaTC+V3yEQ==",
+      "dev": true,
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.12",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/channels": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.2.1.tgz",
+      "integrity": "sha512-3ZogzjwlFG+oarwnI7TTvWvHVOUtJbjrgZkM5QuLMlxNzIR1XuBY8f01yf4K8+VpdNy9DY+7Q/j6tBThfwYvpA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.0.3",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.2.1.tgz",
+      "integrity": "sha512-rPZDUvM0FRHZU4Wcm0ASOr/0xZq/6uySulqpLgoSkeZIC0xLXh/bI6YoDrD9UJV6GIRiqHMWMdxWd1e+TH8XHg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.22.9",
+        "@babel/preset-env": "^7.22.9",
+        "@babel/types": "^7.22.5",
+        "@ndelangen/get-tarball": "^3.0.7",
+        "@storybook/codemod": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-server": "7.2.1",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/telemetry": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/semver": "^7.3.4",
+        "@yarnpkg/fslib": "2.10.3",
+        "@yarnpkg/libzip": "2.3.0",
+        "chalk": "^4.1.0",
+        "commander": "^6.2.1",
+        "cross-spawn": "^7.0.3",
+        "detect-indent": "^6.1.0",
+        "envinfo": "^7.7.3",
+        "execa": "^5.0.0",
+        "express": "^4.17.3",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "get-npm-tarball-url": "^2.0.3",
+        "get-port": "^5.1.1",
+        "giget": "^1.0.0",
+        "globby": "^11.0.2",
+        "jscodeshift": "^0.14.0",
+        "leven": "^3.1.0",
+        "ora": "^5.4.1",
+        "prettier": "^2.8.0",
+        "prompts": "^2.4.0",
+        "puppeteer-core": "^2.1.1",
+        "read-pkg-up": "^7.0.1",
+        "semver": "^7.3.7",
+        "simple-update-notifier": "^2.0.0",
+        "strip-json-comments": "^3.0.1",
+        "tempy": "^1.0.1",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "bin": {
+        "getstorybook": "bin/index.js",
+        "sb": "bin/index.js"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/ast-types": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.15.2.tgz",
+      "integrity": "sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@storybook/cli/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/jscodeshift": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.14.0.tgz",
+      "integrity": "sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.13.16",
+        "@babel/parser": "^7.13.16",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+        "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+        "@babel/preset-flow": "^7.13.13",
+        "@babel/preset-typescript": "^7.13.0",
+        "@babel/register": "^7.13.16",
+        "babel-core": "^7.0.0-bridge.0",
+        "chalk": "^4.1.2",
+        "flow-parser": "0.*",
+        "graceful-fs": "^4.2.4",
+        "micromatch": "^4.0.4",
+        "neo-async": "^2.5.0",
+        "node-dir": "^0.1.17",
+        "recast": "^0.21.0",
+        "temp": "^0.8.4",
+        "write-file-atomic": "^2.3.0"
+      },
+      "bin": {
+        "jscodeshift": "bin/jscodeshift.js"
+      },
+      "peerDependencies": {
+        "@babel/preset-env": "^7.1.6"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/recast": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.21.5.tgz",
+      "integrity": "sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==",
+      "dev": true,
+      "dependencies": {
+        "ast-types": "0.15.2",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/temp": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.4.tgz",
+      "integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==",
+      "dev": true,
+      "dependencies": {
+        "rimraf": "~2.6.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/write-file-atomic": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+      "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/@storybook/client-api": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-7.2.1.tgz",
+      "integrity": "sha512-VeRUxc4ufSaGAQPe/LM4aucpEx2UHHw9c+tzolV3hzGIp6pmIAS8XI6thL2IccYmsNMS2zz9oDESYP9cNlTsyA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/client-logger": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.2.1.tgz",
+      "integrity": "sha512-Lyht/lJg2S65CXRy9rXAZXP/Mgye7jbi/aqQL8z9VRMGChbL+k/3pSZnXTTrD1OVSpCEr4UWA+9bStzT4VjtYA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.2.1.tgz",
+      "integrity": "sha512-R19fdPfslupxfbtyuGcRa2m1nCug2Zm8bS0GhnPtUl7eGBA4glcf4KKwP52pEqgJAsarfiL2cLSnN5wqQGQ/Sw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.22.9",
+        "@babel/preset-env": "^7.22.9",
+        "@babel/types": "^7.22.5",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/cross-spawn": "^6.0.2",
+        "cross-spawn": "^7.0.3",
+        "globby": "^11.0.2",
+        "jscodeshift": "^0.14.0",
+        "lodash": "^4.17.21",
+        "prettier": "^2.8.0",
+        "recast": "^0.23.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@storybook/codemod/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/jscodeshift": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.14.0.tgz",
+      "integrity": "sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.13.16",
+        "@babel/parser": "^7.13.16",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+        "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+        "@babel/preset-flow": "^7.13.13",
+        "@babel/preset-typescript": "^7.13.0",
+        "@babel/register": "^7.13.16",
+        "babel-core": "^7.0.0-bridge.0",
+        "chalk": "^4.1.2",
+        "flow-parser": "0.*",
+        "graceful-fs": "^4.2.4",
+        "micromatch": "^4.0.4",
+        "neo-async": "^2.5.0",
+        "node-dir": "^0.1.17",
+        "recast": "^0.21.0",
+        "temp": "^0.8.4",
+        "write-file-atomic": "^2.3.0"
+      },
+      "bin": {
+        "jscodeshift": "bin/jscodeshift.js"
+      },
+      "peerDependencies": {
+        "@babel/preset-env": "^7.1.6"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/jscodeshift/node_modules/ast-types": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.15.2.tgz",
+      "integrity": "sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/jscodeshift/node_modules/recast": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.21.5.tgz",
+      "integrity": "sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==",
+      "dev": true,
+      "dependencies": {
+        "ast-types": "0.15.2",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/recast": {
+      "version": "0.23.3",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.3.tgz",
+      "integrity": "sha512-HbCVFh2ANP6a09nzD4lx7XthsxMOJWKX5pIcUwtLrmeEIl3I0DwjCoVXDE0Aobk+7k/mS3H50FK4iuYArpcT6Q==",
+      "dev": true,
+      "dependencies": {
+        "assert": "^2.0.0",
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/temp": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.4.tgz",
+      "integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==",
+      "dev": true,
+      "dependencies": {
+        "rimraf": "~2.6.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/write-file-atomic": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+      "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/@storybook/components": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.1.tgz",
+      "integrity": "sha512-7JuMT2yK9FGPu9hFCo38tC3FDyr/hJ3CQwU6dSR6E5rT9E658dq31Xl3y/fM5OMzl8MX8Off7TWiybHSuwYJTA==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/core-client": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.2.1.tgz",
+      "integrity": "sha512-ujJdkaY6LXGCA8pqFBYTNMySmawm3GPcORYevkmM2edSbNKlu904+HvheRirajluzV7ropzGxUBZR9TMwgmDGg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-common": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.2.1.tgz",
+      "integrity": "sha512-g1MQ04lgL16Ct89tPj6RSw72yd+a+ZJ4ceH3Ev+SmnU8efBLPmr6+G5Bx7+rY1W2c6NdpFgtSidjgOGqQ8gppw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/find-cache-dir": "^3.2.1",
+        "@types/node": "^16.0.0",
+        "@types/node-fetch": "^2.6.4",
+        "@types/pretty-hrtime": "^1.0.0",
+        "chalk": "^4.1.0",
+        "esbuild": "^0.18.0",
+        "esbuild-register": "^3.4.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@types/node": {
+      "version": "16.18.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+      "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+      "dev": true
+    },
+    "node_modules/@storybook/core-common/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@storybook/core-common/node_modules/esbuild": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/glob": {
+      "version": "10.3.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.3.tgz",
+      "integrity": "sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.0.3",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/minipass": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.2.tgz",
+      "integrity": "sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/pkg-dir": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+      "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/core-events": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.1.tgz",
+      "integrity": "sha512-EUXYb3gyQ2EzpDAWkgfoDl1EPabj3OE6+zntsD/gwvzQU85BTocs10ksnRyS55bfrQpYbf+Z+gw2CZboyagLgg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.2.1.tgz",
+      "integrity": "sha512-jhS918Frl5j6LSB3x7qzHHuRL5e3RXqCkBQe5KtR2zXMgYlalSyGcX5uT8byWFznUsQIjGmUrf6ZIoKdRdslWg==",
+      "dev": true,
+      "dependencies": {
+        "@aw-web-design/x-default-browser": "1.4.126",
+        "@discoveryjs/json-ext": "^0.5.3",
+        "@storybook/builder-manager": "7.2.1",
+        "@storybook/channels": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/docs-mdx": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/telemetry": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/detect-port": "^1.3.0",
+        "@types/node": "^16.0.0",
+        "@types/pretty-hrtime": "^1.0.0",
+        "@types/semver": "^7.3.4",
+        "better-opn": "^3.0.2",
+        "chalk": "^4.1.0",
+        "cli-table3": "^0.6.1",
+        "compression": "^1.7.4",
+        "detect-port": "^1.3.0",
+        "express": "^4.17.3",
+        "fs-extra": "^11.1.0",
+        "globby": "^11.0.2",
+        "ip": "^2.0.0",
+        "lodash": "^4.17.21",
+        "open": "^8.4.0",
+        "pretty-hrtime": "^1.0.3",
+        "prompts": "^2.4.0",
+        "read-pkg-up": "^7.0.1",
+        "semver": "^7.3.7",
+        "serve-favicon": "^2.5.0",
+        "telejson": "^7.0.3",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0",
+        "util": "^0.12.4",
+        "util-deprecate": "^1.0.2",
+        "watchpack": "^2.2.0",
+        "ws": "^8.2.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/@types/node": {
+      "version": "16.18.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+      "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+      "dev": true
+    },
+    "node_modules/@storybook/core-server/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@storybook/core-server/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/ws": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/core-webpack": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.2.1.tgz",
+      "integrity": "sha512-8Oc6HJFphDVid8DRKSlFc3wK64zuCAbbRFRI9Flf6he4wPncaDL1tXfCJjCbeujJQHLrgG7BjXYNHwIUiB2wRA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-common": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/node": "^16.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-webpack/node_modules/@types/node": {
+      "version": "16.18.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+      "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+      "dev": true
+    },
+    "node_modules/@storybook/csf": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.1.tgz",
+      "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/@storybook/csf-plugin": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.2.1.tgz",
+      "integrity": "sha512-qhxkKOsUjCS/hqsDgwgoM81ZXAXfTNrJJPHCs4Wa1dHoUVUn7rro7VANIO0GVNrRDnha3YR4fEmnD8kklLKmCQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/csf-tools": "7.2.1",
+        "unplugin": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/csf-tools": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.2.1.tgz",
+      "integrity": "sha512-QqZOBd6lmhPoIBLutyYYJ3wBwEZF+fUjiL8vhw3lgq+Mrer14lmKrImKDSjd1PsqVbbGQEJZ4TAJHZc3vdQs0w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/generator": "^7.22.9",
+        "@babel/parser": "^7.22.7",
+        "@babel/traverse": "^7.22.8",
+        "@babel/types": "^7.22.5",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/types": "7.2.1",
+        "fs-extra": "^11.1.0",
+        "prettier": "^2.8.0",
+        "recast": "^0.23.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/csf-tools/node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@storybook/csf-tools/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/csf-tools/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/csf-tools/node_modules/recast": {
+      "version": "0.23.3",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.3.tgz",
+      "integrity": "sha512-HbCVFh2ANP6a09nzD4lx7XthsxMOJWKX5pIcUwtLrmeEIl3I0DwjCoVXDE0Aobk+7k/mS3H50FK4iuYArpcT6Q==",
+      "dev": true,
+      "dependencies": {
+        "assert": "^2.0.0",
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@storybook/csf/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/docs-mdx": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz",
+      "integrity": "sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==",
+      "dev": true
+    },
+    "node_modules/@storybook/docs-tools": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.2.1.tgz",
+      "integrity": "sha512-snRdkqdaxAwlalIEtuElySzC68Lo/0KfrGRR6xSDxWIhjAPNqsRLPHEXlZrJ43Tn/V2oxCRU8eb21pP5/58krw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-common": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/doctrine": "^0.0.3",
+        "doctrine": "^3.0.0",
+        "lodash": "^4.17.21"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/global": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+      "dev": true
+    },
+    "node_modules/@storybook/icons": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.1.6.tgz",
+      "integrity": "sha512-co5gDCYPojRAc5lRMnWxbjrR1V37/rTmAo9Vok4a1hDpHZIwkGTWesdzvYivSQXYFxZTpxdM1b5K3W87brnahw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/instrumenter": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.2.1.tgz",
+      "integrity": "sha512-eA1xke6JWhqDNhrn/qK3KxeE9yXySyzK1gUhu1jtIt8npenebZsuG5Uu/IzJkSB8se1F419Pmbcpeq0V8GA1lQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/preview-api": "7.2.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/manager": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.2.1.tgz",
+      "integrity": "sha512-wD2tRH8gLk2VNFMVcWmGZTXGTMNXdM3rnXiyKtmSVwFzacmOtLzEsCOprwI6WJpZv3v1vHY0s6idN9iadTVMhw==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/manager-api": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.2.1.tgz",
+      "integrity": "sha512-jRuYTrsNKq+g1u9kbQRvBsRKVITOdiNu9c633MeCH73oBVo8WNnZF/tW/ER86oTnru0H7EmRdgz3v9ft/wS2GQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "semver": "^7.3.7",
+        "store2": "^2.14.2",
+        "telejson": "^7.0.3",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/mdx2-csf": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
+      "integrity": "sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==",
+      "dev": true
+    },
+    "node_modules/@storybook/node-logger": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.2.1.tgz",
+      "integrity": "sha512-Ywjqi8iAc26RYbZfmpzvzdKbaQZaD1T/IRNfVGReM/jTXnX0VSdsa6P/pfurbyHcQw//D3TSdqRHOMtbp0nIJg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/postinstall": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.2.1.tgz",
+      "integrity": "sha512-xOzX1MygQ+9xpku6FuODhXvfv/CcKlQPOGpZk8ejE/04Eow0JHluGI1cxdnpqGcCBygkw7DP+xrtQCv75c7Gjg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.2.1.tgz",
+      "integrity": "sha512-PhWql1hxpUxy+SJ9jLrt+Db2yc0Qgo8ivRWU0eqZJIrXnZXtUQiGByMqYWdr0MzNbBEJIqrxO4RCpowKmDh/Xw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/preset-flow": "^7.22.5",
+        "@babel/preset-react": "^7.22.5",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+        "@storybook/core-webpack": "7.2.1",
+        "@storybook/docs-tools": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/react": "7.2.1",
+        "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
+        "@types/node": "^16.0.0",
+        "@types/semver": "^7.3.4",
+        "babel-plugin-add-react-displayname": "^0.0.5",
+        "babel-plugin-react-docgen": "^4.2.1",
+        "fs-extra": "^11.1.0",
+        "react-refresh": "^0.11.0",
+        "semver": "^7.3.7",
+        "webpack": "5"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.22.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz",
+      "integrity": "sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-html-community": "^0.0.8",
+        "common-path-prefix": "^3.0.0",
+        "core-js-pure": "^3.23.3",
+        "error-stack-parser": "^2.0.6",
+        "find-up": "^5.0.0",
+        "html-entities": "^2.1.0",
+        "loader-utils": "^2.0.4",
+        "schema-utils": "^3.0.0",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "@types/webpack": "4.x || 5.x",
+        "react-refresh": ">=0.10.0 <1.0.0",
+        "sockjs-client": "^1.4.0",
+        "type-fest": ">=0.17.0 <4.0.0",
+        "webpack": ">=4.43.0 <6.0.0",
+        "webpack-dev-server": "3.x || 4.x",
+        "webpack-hot-middleware": "2.x",
+        "webpack-plugin-serve": "0.x || 1.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/webpack": {
+          "optional": true
+        },
+        "sockjs-client": {
+          "optional": true
+        },
+        "type-fest": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        },
+        "webpack-hot-middleware": {
+          "optional": true
+        },
+        "webpack-plugin-serve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/@types/node": {
+      "version": "16.18.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+      "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+      "dev": true
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/react-refresh": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
+      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/@storybook/preset-react-webpack/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@storybook/preview": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.2.1.tgz",
+      "integrity": "sha512-5mLNhuaePx3Zv8mO93Y/M+U7ppqV5bS13rPfMHcVmSb7mQ/3hN7zkF6NhPOX6LoBUxetHiAJh5dA5McNE3adLQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/preview-api": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.2.1.tgz",
+      "integrity": "sha512-WKecuOdeh9+og6bPR9KoQf/JCeSRPCcfZv9uNfJzAp3IiTnS3UpfCz+HBZzZJQrisgbd7OulNY400HQUmxY2Ag==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.2.1",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/react": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.2.1.tgz",
+      "integrity": "sha512-WRAVrSQKAtCoypUrrIXWGOvyGRVkrh73hSkKVC0gEqxWDmjZIZJ1uc3VrUd/yHJdLsqNphcAyU8Ahu52yozubg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-client": "7.2.1",
+        "@storybook/docs-tools": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/react-dom-shim": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/escodegen": "^0.0.6",
+        "@types/estree": "^0.0.51",
+        "@types/node": "^16.0.0",
+        "acorn": "^7.4.1",
+        "acorn-jsx": "^5.3.1",
+        "acorn-walk": "^7.2.0",
+        "escodegen": "^2.0.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "react-element-to-jsx-string": "^15.0.0",
+        "ts-dedent": "^2.0.0",
+        "type-fest": "~2.19",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/react-docgen-typescript-plugin": {
+      "version": "1.0.6--canary.9.0c3f3b7.0",
+      "resolved": "https://registry.npmjs.org/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.6--canary.9.0c3f3b7.0.tgz",
+      "integrity": "sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "endent": "^2.0.1",
+        "find-cache-dir": "^3.3.1",
+        "flat-cache": "^3.0.4",
+        "micromatch": "^4.0.2",
+        "react-docgen-typescript": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.x",
+        "webpack": ">= 4"
+      }
+    },
+    "node_modules/@storybook/react-dom-shim": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.2.1.tgz",
+      "integrity": "sha512-QzQQN2nZkG7c0Mg5HvhfQuH10HjAJEnA8vDlENIFMj3XqtUAq4HE2n73gEcvdFJMXL4G16N58+TgR1e2cFdRKw==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/react-webpack5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react-webpack5/-/react-webpack5-7.2.1.tgz",
+      "integrity": "sha512-hkJ+PzVDXTuA4v/wZF6YQTEuUswiZfYPdKl/c5rJp8XvK6WhcMkSTlwzZ2+vnk4s0vbVdlBZLG78LFUmGZy4jQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/builder-webpack5": "7.2.1",
+        "@storybook/preset-react-webpack": "7.2.1",
+        "@storybook/react": "7.2.1",
+        "@types/node": "^16.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.22.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/react-webpack5/node_modules/@types/node": {
+      "version": "16.18.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+      "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+      "dev": true
+    },
+    "node_modules/@storybook/react/node_modules/@types/node": {
+      "version": "16.18.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+      "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+      "dev": true
+    },
+    "node_modules/@storybook/react/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/router": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.2.1.tgz",
+      "integrity": "sha512-9Cn5boUS+7yhrKlSy1kt7ruNs/znk3555kclBD6+uuhH/dD84feGeiGYE4GUuLmcKrDFtNF185/Gr1huJ556tA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/store": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-7.2.1.tgz",
+      "integrity": "sha512-0EBD3GMCZpVk2y/Yzk7koH91Ny+kyq+krWaGFgZQ8JrGouuw1JAszxzgO1VVgnRio88UKeK3UALx9hGSHqDXeg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.2.1.tgz",
+      "integrity": "sha512-ewYvX+ZzuTCl9a8DUbKkSPD6GhxUStl/+Eni1faE1OEnyduwbJFlse0EBpOa4YZTcghlngrHV3pulEW8qOgNFA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/csf-tools": "7.2.1",
+        "chalk": "^4.1.0",
+        "detect-package-manager": "^2.0.1",
+        "fetch-retry": "^5.0.2",
+        "fs-extra": "^11.1.0",
+        "read-pkg-up": "^7.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@storybook/telemetry/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/testing-library": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.2.0.tgz",
+      "integrity": "sha512-Ff6jNnrsosmDshgCf0Eb5Cz7IA34p/1Ps5N3Kp3598kfXpBSccSkQQvVFUXC3kIHw/isIXWPqntZuKqnWUz7Gw==",
+      "dev": true,
+      "dependencies": {
+        "@testing-library/dom": "^9.0.0",
+        "@testing-library/user-event": "^14.0.0",
+        "ts-dedent": "^2.2.0"
+      }
+    },
+    "node_modules/@storybook/testing-library/node_modules/@testing-library/dom": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
+      "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.1.3",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@storybook/testing-library/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/testing-library/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/testing-library/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@storybook/testing-library/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@storybook/testing-library/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/testing-library/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/theming": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.1.tgz",
+      "integrity": "sha512-cfnNCLvKmzxjmoYKfLl7Q64gSTouLvd23CtvBAOlWcRYnMJ9v4/7A2tK3xQyVRlJYh9OuXiHFLL8AXbN58Hkzw==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/types": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.2.1.tgz",
+      "integrity": "sha512-YwlIY1uyxfJjijbB5x1d1QOKaUUDJnMX8BSb8oGqU4cyT76X/Is4CbGs+vccFsJo0tZu1GfuahYXl0EDT0nnSQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.2.1",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "6.5.1",
       "dev": true,
@@ -26907,6 +32036,166 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.75.tgz",
+      "integrity": "sha512-anDnx9L465lGbjB2mvcV54NGHW6illr0IDvVV7JmkabYUVneaRdQvTr0tbHv3xjHnjrK1wuwVOHKV0LcQF2tnQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.75.tgz",
+      "integrity": "sha512-dIHDfrLmeZfr2xwi1whO7AmzdI3HdamgvxthaL+S8L1x8TeczAZEvsmZTjy3s8p3Va4rbGXcb3+uBhmfkqCbfw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.75.tgz",
+      "integrity": "sha512-qeJmvMGrjC6xt+G0R4kVqqxvlhxJx7tTzhcEoWgLJnfvGZiF6SJdsef4OSM7HuReXrlBoEtJbfGPrLJtbV+C0w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.75.tgz",
+      "integrity": "sha512-sqA9JqHEJBF4AdNuwo5zRqq0HC3l31SPsG9zpRa4nRzG5daBBJ80H7fi6PZQud1rfNNq+Q08gjYrdrxwHstvjw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.75.tgz",
+      "integrity": "sha512-95rQT5xTAL3eKhMJbJbLsZHHP9EUlh1rcrFoLf0gUApoVF8g94QjZ9hYZiI72mMP5WPjgTEXQVnVB9O2GxeaLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.75.tgz",
+      "integrity": "sha512-If7UpAhnPduMmtC+TSgPpZ1UXZfp2hIpjUFxpeCmHHYLS6Fn/2GZC5hpEiu+wvFJF0hzPh93eNAHa9gUxGUG+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.75.tgz",
+      "integrity": "sha512-HOhxX0YNHTElCZqIviquka3CGYTN8rSQ6BdFfSk/K0O+ZEHx3qGte0qr+gGLPF/237GxreUkp3OMaWKuURtuCg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.75.tgz",
+      "integrity": "sha512-7QPI+mvBXAerVfWahrgBNe+g7fK8PuetxFnZSEmXUcDXvWcdJXAndD7GjAJzbDyjQpLKHbsDKMiHYvfNxZoN/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.75.tgz",
+      "integrity": "sha512-EfABCy4Wlq7O5ShWsm32FgDkSjyeyj/SQ4wnUIvWpkXhgfT1iNXky7KRU1HtX+SmnVk/k/NnabVZpIklYbjtZA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.75.tgz",
+      "integrity": "sha512-cTvP0pOD9C3pSp1cwtt85ZsrUkQz8RZfSPhM+jCGxKxmoowDCnInoOQ4Ica/ehyuUnQ4/IstSdYtYpO5yzPDJg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.4.14",
       "license": "MIT",
@@ -27285,9 +32574,47 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cross-spawn": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@types/cross-spawn/-/cross-spawn-6.0.2.tgz",
+      "integrity": "sha512-KuwNhp3eza+Rhu8IFI5HUXRP0LIhqH5cAjubUvGXXthh4YYBuP2ntwEX+Cz8GJoZUHlKo247wPWOfA9LYEq4cw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/detect-port": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.3.tgz",
+      "integrity": "sha512-bV/jQlAJ/nPY3XqSatkGpu+nGzou+uSwrH1cROhn+jBFg47yaNH+blW4C7p9KhopC7QxCv/6M86s37k8dMk0Yg==",
+      "dev": true
+    },
+    "node_modules/@types/doctrine": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.3.tgz",
+      "integrity": "sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==",
+      "dev": true
+    },
+    "node_modules/@types/ejs": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.2.tgz",
+      "integrity": "sha512-ZmiaE3wglXVWBM9fyVC17aGPkLo/UgaOjEiI2FXQfyczrCefORPxIe+2dVmnmk3zkVIbizjrlQzmPGhSYGXG5g==",
+      "dev": true
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.39.7",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.7.tgz",
+      "integrity": "sha512-tLqYV94vuqDrXh515F/FOGtBcRMTPGvVV1LzLbtYDcQmmhtpf/gLYf+hikBbQk8MzOHNz37wpFfJbYAuSn8HqA==",
+      "dev": true
+    },
+    "node_modules/@types/escodegen": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/escodegen/-/escodegen-0.0.6.tgz",
+      "integrity": "sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.10",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
@@ -27296,7 +32623,6 @@
     },
     "node_modules/@types/eslint-scope": {
       "version": "3.7.4",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/eslint": "*",
@@ -27305,7 +32631,6 @@
     },
     "node_modules/@types/estree": {
       "version": "0.0.51",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/express": {
@@ -27329,6 +32654,12 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/find-cache-dir": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
+      "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==",
+      "dev": true
+    },
     "node_modules/@types/google.maps": {
       "version": "3.50.5",
       "license": "MIT"
@@ -27420,7 +32751,6 @@
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/json5": {
@@ -27432,11 +32762,23 @@
       "version": "4.14.191",
       "license": "MIT"
     },
+    "node_modules/@types/mdx": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.6.tgz",
+      "integrity": "sha512-sVcwEG10aFU2KcM7cIA0M410UPv/DesOPyG8zMVk0QUDexHA3lYmGucpEpZ2dtWWhi2ip3CG+5g/iH0PwoW4Fw==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.2",
       "dev": true,
@@ -27446,6 +32788,30 @@
       "version": "18.11.18",
       "license": "MIT"
     },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.4.tgz",
+      "integrity": "sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      }
+    },
+    "node_modules/@types/node-fetch/node_modules/form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
       "dev": true,
@@ -27460,6 +32826,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/pretty-hrtime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz",
+      "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "license": "MIT"
@@ -27490,7 +32862,7 @@
     },
     "node_modules/@types/react-dom": {
       "version": "18.0.10",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -27572,6 +32944,12 @@
         "@types/jest": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.7.tgz",
+      "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==",
+      "dev": true
+    },
     "node_modules/@types/warning": {
       "version": "3.0.0",
       "license": "MIT"
@@ -27587,7 +32965,6 @@
     "node_modules/@types/yargs": {
       "version": "16.0.5",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -27715,7 +33092,6 @@
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.1",
@@ -27724,22 +33100,18 @@
     },
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
@@ -27749,12 +33121,10 @@
     },
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -27765,7 +33135,6 @@
     },
     "node_modules/@webassemblyjs/ieee754": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
@@ -27773,7 +33142,6 @@
     },
     "node_modules/@webassemblyjs/leb128": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@xtuc/long": "4.2.2"
@@ -27781,12 +33149,10 @@
     },
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -27801,7 +33167,6 @@
     },
     "node_modules/@webassemblyjs/wasm-gen": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -27813,7 +33178,6 @@
     },
     "node_modules/@webassemblyjs/wasm-opt": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -27824,7 +33188,6 @@
     },
     "node_modules/@webassemblyjs/wasm-parser": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -27837,7 +33200,6 @@
     },
     "node_modules/@webassemblyjs/wast-printer": {
       "version": "1.11.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
@@ -27887,12 +33249,10 @@
     },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
-      "devOptional": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
-      "devOptional": true,
       "license": "Apache-2.0"
     },
     "node_modules/@y-presence/client": {
@@ -27915,6 +33275,59 @@
         "react": "^18.0.0"
       }
     },
+    "node_modules/@yarnpkg/esbuild-plugin-pnp": {
+      "version": "3.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz",
+      "integrity": "sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.10.0"
+      }
+    },
+    "node_modules/@yarnpkg/fslib": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/fslib/-/fslib-2.10.3.tgz",
+      "integrity": "sha512-41H+Ga78xT9sHvWLlFOZLIhtU6mTGZ20pZ29EiZa97vnxdohJD2AF42rCoAoWfqUz486xY6fhjMH+DYEM9r14A==",
+      "dev": true,
+      "dependencies": {
+        "@yarnpkg/libzip": "^2.3.0",
+        "tslib": "^1.13.0"
+      },
+      "engines": {
+        "node": ">=12 <14 || 14.2 - 14.9 || >14.10.0"
+      }
+    },
+    "node_modules/@yarnpkg/fslib/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/@yarnpkg/libzip": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/libzip/-/libzip-2.3.0.tgz",
+      "integrity": "sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==",
+      "dev": true,
+      "dependencies": {
+        "@types/emscripten": "^1.39.6",
+        "tslib": "^1.13.0"
+      },
+      "engines": {
+        "node": ">=12 <14 || 14.2 - 14.9 || >14.10.0"
+      }
+    },
+    "node_modules/@yarnpkg/libzip/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "dev": true,
@@ -27993,7 +33406,6 @@
     "node_modules/acorn": {
       "version": "7.4.1",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -28010,6 +33422,24 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/address": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/adler-32": {
       "version": "1.3.1",
       "license": "Apache-2.0",
@@ -28019,7 +33449,6 @@
     },
     "node_modules/agent-base": {
       "version": "6.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "4"
@@ -28055,7 +33484,6 @@
     },
     "node_modules/ajv": {
       "version": "6.12.6",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -28106,7 +33534,6 @@
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
-      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "ajv": "^6.9.1"
@@ -28246,6 +33673,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/app-root-dir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
+      "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==",
+      "dev": true
+    },
     "node_modules/appdirsjs": {
       "version": "1.2.7",
       "license": "MIT",
@@ -28481,6 +33914,31 @@
       "version": "2.0.6",
       "license": "MIT"
     },
+    "node_modules/assert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
+      "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
+      "dev": true,
+      "dependencies": {
+        "es6-object-assign": "^1.1.0",
+        "is-nan": "^1.2.1",
+        "object-is": "^1.0.1",
+        "util": "^0.12.0"
+      }
+    },
+    "node_modules/assert/node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/assign-symbols": {
       "version": "1.0.0",
       "license": "MIT",
@@ -28557,8 +34015,7 @@
     },
     "node_modules/async": {
       "version": "3.2.4",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/async-foreach": {
       "version": "0.1.3",
@@ -28619,7 +34076,6 @@
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
@@ -28724,6 +34180,12 @@
         "webpack": ">=5"
       }
     },
+    "node_modules/babel-plugin-add-react-displayname": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
+      "integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==",
+      "dev": true
+    },
     "node_modules/babel-plugin-console-source": {
       "version": "2.0.5",
       "dev": true,
@@ -28780,6 +34242,12 @@
         "npm": ">=6"
       }
     },
+    "node_modules/babel-plugin-named-exports-order": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-named-exports-order/-/babel-plugin-named-exports-order-0.0.2.tgz",
+      "integrity": "sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==",
+      "dev": true
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "license": "MIT",
@@ -28820,6 +34288,29 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-react-docgen": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.2.1.tgz",
+      "integrity": "sha512-UQ0NmGHj/HAqi5Bew8WvNfCk8wSsmdgNd8ZdMjBCICtyCJCq9LiqgqvjCYe570/Wg7AQArSq1VQ60Dd/CHN7mQ==",
+      "dev": true,
+      "dependencies": {
+        "ast-types": "^0.14.2",
+        "lodash": "^4.17.15",
+        "react-docgen": "^5.0.0"
+      }
+    },
+    "node_modules/babel-plugin-react-docgen/node_modules/ast-types": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+      "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/babel-plugin-syntax-trailing-function-commas": {
       "version": "7.0.0-beta.0",
       "license": "MIT",
@@ -28966,18 +34457,37 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/better-opn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+      "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "dev": true,
+      "dependencies": {
+        "open": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": "*"
       }
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -29135,6 +34645,18 @@
         "@popperjs/core": "^2.11.6"
       }
     },
+    "node_modules/bplist-parser": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
+      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
+      "dev": true,
+      "dependencies": {
+        "big-integer": "^1.6.44"
+      },
+      "engines": {
+        "node": ">= 5.10.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "license": "MIT",
@@ -29157,6 +34679,12 @@
       "version": "2.0.2",
       "license": "MIT"
     },
+    "node_modules/browser-assert": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
+      "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
+      "dev": true
+    },
     "node_modules/browser-resolve": {
       "version": "1.11.3",
       "license": "MIT",
@@ -29177,8 +34705,19 @@
         "browser-resolve": "^1.8.1"
       }
     },
+    "node_modules/browserify-zlib": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
+      "integrity": "sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==",
+      "dev": true,
+      "dependencies": {
+        "pako": "~0.2.0"
+      }
+    },
     "node_modules/browserslist": {
-      "version": "4.21.5",
+      "version": "4.21.10",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+      "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -29187,14 +34726,17 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
+        "caniuse-lite": "^1.0.30001517",
+        "electron-to-chromium": "^1.4.477",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.11"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -29242,6 +34784,15 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "license": "MIT"
@@ -29253,6 +34804,122 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/c8": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/c8/-/c8-7.14.0.tgz",
+      "integrity": "sha512-i04rtkkcNcCf7zsQcSv/T9EbUn4RXQ6mropeMcjFOsQXQ0iGLAr/xT6TImQg4+U9hmNpN9XdvPkjUL1IzbgxJw==",
+      "dev": true,
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@istanbuljs/schema": "^0.1.3",
+        "find-up": "^5.0.0",
+        "foreground-child": "^2.0.0",
+        "istanbul-lib-coverage": "^3.2.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-reports": "^3.1.4",
+        "rimraf": "^3.0.2",
+        "test-exclude": "^6.0.0",
+        "v8-to-istanbul": "^9.0.0",
+        "yargs": "^16.2.0",
+        "yargs-parser": "^20.2.9"
+      },
+      "bin": {
+        "c8": "bin/c8.js"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/c8/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/c8/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/c8/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/c8/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/c8/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/c8/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cacache": {
       "version": "16.1.3",
       "dev": true,
@@ -29444,7 +35111,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001449",
+      "version": "1.0.30001519",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
+      "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
       "funding": [
         {
           "type": "opencollective",
@@ -29453,9 +35122,12 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/canvas-fit": {
       "version": "1.5.0",
@@ -29483,6 +35155,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/case-sensitive-paths-webpack-plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cfb": {
       "version": "1.2.2",
       "license": "Apache-2.0",
@@ -29496,7 +35177,8 @@
     },
     "node_modules/chalk": {
       "version": "2.4.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -29516,7 +35198,6 @@
     },
     "node_modules/chokidar": {
       "version": "3.5.3",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -29550,7 +35231,6 @@
     },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0"
@@ -29700,7 +35380,6 @@
     "node_modules/cli-cursor": {
       "version": "3.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "restore-cursor": "^3.1.0"
       },
@@ -29711,7 +35390,6 @@
     "node_modules/cli-spinners": {
       "version": "2.7.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       },
@@ -29719,6 +35397,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-table3": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+      "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "license": "ISC",
@@ -29734,7 +35427,6 @@
     "node_modules/clone": {
       "version": "1.0.4",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -29913,6 +35605,12 @@
         "node": ">= 12"
       }
     },
+    "node_modules/common-path-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
+      "dev": true
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "license": "MIT"
@@ -30004,7 +35702,6 @@
         "node >= 0.8"
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "inherits": "^2.0.3",
@@ -30014,13 +35711,11 @@
     },
     "node_modules/concat-stream/node_modules/isarray": {
       "version": "1.0.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/concat-stream/node_modules/readable-stream": {
       "version": "2.3.7",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -30033,13 +35728,11 @@
     },
     "node_modules/concat-stream/node_modules/safe-buffer": {
       "version": "5.1.2",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/concat-stream/node_modules/string_decoder": {
       "version": "1.1.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -30134,6 +35827,12 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
+      "dev": true
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "dev": true,
@@ -30195,16 +35894,28 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.27.2",
-      "license": "MIT",
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.0.tgz",
+      "integrity": "sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==",
       "dependencies": {
-        "browserslist": "^4.21.4"
+        "browserslist": "^4.21.9"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-js-pure": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.32.0.tgz",
+      "integrity": "sha512-qsev1H+dTNYpDUEURRuOXMvpdtAnNEvQWS/FMJ2Vb5AY8ZP4rAPQldkE27joykZPJTe0+IVgHZYh1P5Xu1/i1g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "license": "MIT"
@@ -30258,6 +35969,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/css-box-model": {
       "version": "1.2.1",
       "license": "MIT",
@@ -30713,6 +36433,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/default-browser-id": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
+      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
+      "dev": true,
+      "dependencies": {
+        "bplist-parser": "^0.2.0",
+        "untildify": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/default-gateway": {
       "version": "6.0.3",
       "dev": true,
@@ -30727,7 +36463,6 @@
     "node_modules/defaults": {
       "version": "1.0.4",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "clone": "^1.0.2"
       },
@@ -30789,6 +36524,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.2.tgz",
+      "integrity": "sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==",
+      "dev": true
+    },
+    "node_modules/del": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+      "integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
+      "dev": true,
+      "dependencies": {
+        "globby": "^11.0.1",
+        "graceful-fs": "^4.2.4",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.2",
+        "p-map": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "license": "MIT",
@@ -30839,6 +36602,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-kerning": {
       "version": "2.1.2",
       "license": "MIT",
@@ -30861,6 +36633,32 @@
       "version": "1.1.0",
       "license": "MIT"
     },
+    "node_modules/detect-package-manager": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
+      "integrity": "sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^5.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/detect-port": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+      "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
+      "dev": true,
+      "dependencies": {
+        "address": "^1.0.1",
+        "debug": "4"
+      },
+      "bin": {
+        "detect": "bin/detect-port.js",
+        "detect-port": "bin/detect-port.js"
+      }
+    },
     "node_modules/diff-sequences": {
       "version": "29.4.2",
       "dev": true,
@@ -31027,9 +36825,21 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
-      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
+      "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -31102,7 +36912,6 @@
     "node_modules/duplexify": {
       "version": "3.7.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "end-of-stream": "^1.0.0",
         "inherits": "^2.0.1",
@@ -31112,13 +36921,11 @@
     },
     "node_modules/duplexify/node_modules/isarray": {
       "version": "1.0.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/duplexify/node_modules/readable-stream": {
       "version": "2.3.7",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -31131,13 +36938,11 @@
     },
     "node_modules/duplexify/node_modules/safe-buffer": {
       "version": "5.1.2",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/duplexify/node_modules/string_decoder": {
       "version": "1.1.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -31147,13 +36952,35 @@
       "license": "ISC",
       "peer": true
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "license": "MIT"
     },
+    "node_modules/ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dev": true,
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.284",
-      "license": "ISC"
+      "version": "1.4.488",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.488.tgz",
+      "integrity": "sha512-Dv4sTjiW7t/UWGL+H8ZkgIjtUAVZDgb/PwGWvMsCT7jipzUV/u5skbLXPFKb6iV0tiddVi/bcS2/kUrczeWgIQ=="
     },
     "node_modules/element-size": {
       "version": "1.1.1",
@@ -31189,9 +37016,8 @@
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -31227,11 +37053,21 @@
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "once": "^1.4.0"
       }
     },
+    "node_modules/endent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/endent/-/endent-2.1.0.tgz",
+      "integrity": "sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==",
+      "dev": true,
+      "dependencies": {
+        "dedent": "^0.7.0",
+        "fast-json-parse": "^1.0.3",
+        "objectorarray": "^1.0.5"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "0.9.1",
       "dev": true,
@@ -31307,7 +37143,6 @@
     "node_modules/error-stack-parser": {
       "version": "2.1.4",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "stackframe": "^1.3.4"
       }
@@ -31390,7 +37225,6 @@
     },
     "node_modules/es-module-lexer": {
       "version": "0.9.3",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/es-set-tostringtag": {
@@ -31451,6 +37285,12 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "node_modules/es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==",
+      "dev": true
+    },
     "node_modules/es6-symbol": {
       "version": "3.1.3",
       "license": "ISC",
@@ -31507,6 +37347,360 @@
         "@esbuild/win32-x64": "0.17.8"
       }
     },
+    "node_modules/esbuild-plugin-alias": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz",
+      "integrity": "sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==",
+      "dev": true
+    },
+    "node_modules/esbuild-register": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.4.2.tgz",
+      "integrity": "sha512-kG/XyTDyz6+YDuyfB9ZoSIOOmgyFCH+xPRtsCa8W85HLRV5Csp+o3jWVbOSHgSLfyLc5DmP+KFDNwty4mEjC+Q==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.12 <1"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/android-arm": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.8.tgz",
+      "integrity": "sha512-0/rb91GYKhrtbeglJXOhAv9RuYimgI8h623TplY2X+vA4EXnk3Zj1fXZreJ0J3OJJu1bwmb0W7g+2cT/d8/l/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/android-arm64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.8.tgz",
+      "integrity": "sha512-oa/N5j6v1svZQs7EIRPqR8f+Bf8g6HBDjD/xHC02radE/NjKHK7oQmtmLxPs1iVwYyvE+Kolo6lbpfEQ9xnhxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/android-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.8.tgz",
+      "integrity": "sha512-bTliMLqD7pTOoPg4zZkXqCDuzIUguEWLpeqkNfC41ODBHwoUgZ2w5JBeYimv4oP6TDVocoYmEhZrCLQTrH89bg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/darwin-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.8.tgz",
+      "integrity": "sha512-n5WOpyvZ9TIdv2V1K3/iIkkJeKmUpKaCTdun9buhGRWfH//osmUjlv4Z5mmWdPWind/VGcVxTHtLfLCOohsOXw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.8.tgz",
+      "integrity": "sha512-a/SATTaOhPIPFWvHZDoZYgxaZRVHn0/LX1fHLGfZ6C13JqFUZ3K6SMD6/HCtwOQ8HnsNaEeokdiDSFLuizqv5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.8.tgz",
+      "integrity": "sha512-xpFJb08dfXr5+rZc4E+ooZmayBW6R3q59daCpKZ/cDU96/kvDM+vkYzNeTJCGd8rtO6fHWMq5Rcv/1cY6p6/0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-arm": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.8.tgz",
+      "integrity": "sha512-6Ij8gfuGszcEwZpi5jQIJCVIACLS8Tz2chnEBfYjlmMzVsfqBP1iGmHQPp7JSnZg5xxK9tjCc+pJ2WtAmPRFVA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-arm64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.8.tgz",
+      "integrity": "sha512-v3iwDQuDljLTxpsqQDl3fl/yihjPAyOguxuloON9kFHYwopeJEf1BkDXODzYyXEI19gisEsQlG1bM65YqKSIww==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-ia32": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.8.tgz",
+      "integrity": "sha512-8svILYKhE5XetuFk/B6raFYIyIqydQi+GngEXJgdPdI7OMKUbSd7uzR02wSY4kb53xBrClLkhH4Xs8P61Q2BaA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-loong64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.8.tgz",
+      "integrity": "sha512-B6FyMeRJeV0NpyEOYlm5qtQfxbdlgmiGdD+QsipzKfFky0K5HW5Td6dyK3L3ypu1eY4kOmo7wW0o94SBqlqBSA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.8.tgz",
+      "integrity": "sha512-CCb67RKahNobjm/eeEqeD/oJfJlrWyw29fgiyB6vcgyq97YAf3gCOuP6qMShYSPXgnlZe/i4a8WFHBw6N8bYAA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.8.tgz",
+      "integrity": "sha512-bytLJOi55y55+mGSdgwZ5qBm0K9WOCh0rx+vavVPx+gqLLhxtSFU0XbeYy/dsAAD6xECGEv4IQeFILaSS2auXw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.8.tgz",
+      "integrity": "sha512-2YpRyQJmKVBEHSBLa8kBAtbhucaclb6ex4wchfY0Tj3Kg39kpjeJ9vhRU7x4mUpq8ISLXRXH1L0dBYjAeqzZAw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-s390x": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.8.tgz",
+      "integrity": "sha512-QgbNY/V3IFXvNf11SS6exkpVcX0LJcob+0RWCgV9OiDAmVElnxciHIisoSix9uzYzScPmS6dJFbZULdSAEkQVw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/linux-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.8.tgz",
+      "integrity": "sha512-mM/9S0SbAFDBc4OPoyP6SEOo5324LpUxdpeIUUSrSTOfhHU9hEfqRngmKgqILqwx/0DVJBzeNW7HmLEWp9vcOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.8.tgz",
+      "integrity": "sha512-eKUYcWaWTaYr9zbj8GertdVtlt1DTS1gNBWov+iQfWuWyuu59YN6gSEJvFzC5ESJ4kMcKR0uqWThKUn5o8We6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.8.tgz",
+      "integrity": "sha512-Vc9J4dXOboDyMXKD0eCeW0SIeEzr8K9oTHJU+Ci1mZc5njPfhKAqkRt3B/fUNU7dP+mRyralPu8QUkiaQn7iIg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/sunos-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.8.tgz",
+      "integrity": "sha512-0xvOTNuPXI7ft1LYUgiaXtpCEjp90RuBBYovdd2lqAFxje4sEucurg30M1WIm03+3jxByd3mfo+VUmPtRSVuOw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/win32-arm64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.8.tgz",
+      "integrity": "sha512-G0JQwUI5WdEFEnYNKzklxtBheCPkuDdu1YrtRrjuQv30WsYbkkoixKxLLv8qhJmNI+ATEWquZe/N0d0rpr55Mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/win32-ia32": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.8.tgz",
+      "integrity": "sha512-Fqy63515xl20OHGFykjJsMnoIWS+38fqfg88ClvPXyDbLtgXal2DTlhb1TfTX34qWi3u4I7Cq563QcHpqgLx8w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/win32-x64": {
+      "version": "0.17.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.8.tgz",
+      "integrity": "sha512-1iuezdyDNngPnz8rLRDO2C/ZZ/emJLb72OsZeqQ6gL6Avko/XCXZw+NuxBSNhBAP13Hie418V7VMt9et1FMvpg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "license": "MIT",
@@ -31520,11 +37714,33 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "engines": {
         "node": ">=0.8.0"
       }
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
     "node_modules/eslint": {
       "version": "8.37.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.37.0.tgz",
@@ -31848,9 +38064,35 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-storybook": {
+      "version": "0.6.13",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.13.tgz",
+      "integrity": "sha512-smd+CS0WH1jBqUEJ3znGS7DU4ayBE9z6lkQAK2yrSUv1+rq8BT/tiI5C/rKE7rmiqiAfojtNYZRhzo5HrulccQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/csf": "^0.0.1",
+        "@typescript-eslint/utils": "^5.45.0",
+        "requireindex": "^1.1.0",
+        "ts-dedent": "^2.2.0"
+      },
+      "engines": {
+        "node": "12.x || 14.x || >= 16"
+      },
+      "peerDependencies": {
+        "eslint": ">=6"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@storybook/csf": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz",
+      "integrity": "sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -31862,7 +38104,6 @@
     },
     "node_modules/eslint-scope/node_modules/estraverse": {
       "version": "4.3.0",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -32167,7 +38408,6 @@
     },
     "node_modules/esrecurse": {
       "version": "4.3.0",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -32178,12 +38418,25 @@
     },
     "node_modules/estraverse": {
       "version": "5.3.0",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-to-babel": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/estree-to-babel/-/estree-to-babel-3.2.1.tgz",
+      "integrity": "sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.1.6",
+        "@babel/types": "^7.2.0",
+        "c8": "^7.6.0"
+      },
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "license": "BSD-2-Clause",
@@ -32585,6 +38838,12 @@
       "license": "ISC",
       "peer": true
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "node_modules/extend-shallow": {
       "version": "3.0.2",
       "license": "MIT",
@@ -32645,6 +38904,48 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/extract-zip": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz",
+      "integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==",
+      "dev": true,
+      "dependencies": {
+        "concat-stream": "^1.6.2",
+        "debug": "^2.6.9",
+        "mkdirp": "^0.5.4",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      }
+    },
+    "node_modules/extract-zip/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/extract-zip/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/extract-zip/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
     "node_modules/falafel": {
       "version": "2.2.5",
       "license": "MIT",
@@ -32689,9 +38990,14 @@
         "is-string-blank": "^1.0.1"
       }
     },
+    "node_modules/fast-json-parse": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-json-parse/-/fast-json-parse-1.0.3.tgz",
+      "integrity": "sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==",
+      "dev": true
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
@@ -32774,6 +39080,21 @@
       "version": "1.0.2",
       "license": "MIT"
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/fetch-retry": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-5.0.6.tgz",
+      "integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==",
+      "dev": true
+    },
     "node_modules/fflate": {
       "version": "0.4.8",
       "license": "MIT"
@@ -32837,6 +39158,72 @@
         "node": ">= 12"
       }
     },
+    "node_modules/file-system-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
+      "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==",
+      "dev": true,
+      "dependencies": {
+        "fs-extra": "11.1.1",
+        "ramda": "0.29.0"
+      }
+    },
+    "node_modules/file-system-cache/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/file-system-cache/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "license": "MIT",
@@ -32951,7 +39338,6 @@
     "node_modules/flow-parser": {
       "version": "0.185.2",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -33025,6 +39411,170 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
+      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz",
+      "integrity": "sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.16.7",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.3",
+        "cosmiconfig": "^7.0.1",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^10.0.0",
+        "memfs": "^3.4.1",
+        "minimatch": "^3.0.4",
+        "node-abort-controller": "^3.0.1",
+        "schema-utils": "^3.1.1",
+        "semver": "^7.3.5",
+        "tapable": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=12.13.0",
+        "yarn": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "typescript": ">3.6.0",
+        "webpack": "^5.11.0"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "license": "MIT",
@@ -33115,6 +39665,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
     "node_modules/fs-extra": {
       "version": "8.1.0",
       "license": "MIT",
@@ -33285,6 +39841,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/get-npm-tarball-url": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/get-npm-tarball-url/-/get-npm-tarball-url-2.0.3.tgz",
+      "integrity": "sha512-R/PW6RqyaBQNWYaSyfrh54/qtcnOp22FHCCiRhSSZj0FP3KQWCsxxt0DzIdVTbwTqe9CtQfvl/FPD4UIPt4pqw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "dev": true,
@@ -33293,6 +39858,18 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-port": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
+      "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-stdin": {
       "version": "4.0.1",
       "dev": true,
@@ -33333,6 +39910,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/giget": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-1.1.2.tgz",
+      "integrity": "sha512-HsLoS07HiQ5oqvObOI+Qb2tyZH4Gj5nYGfF9qQcZNrPw+uEFhdXtgJr01aO2pWadGHucajYDLxxbtQkm97ON2A==",
+      "dev": true,
+      "dependencies": {
+        "colorette": "^2.0.19",
+        "defu": "^6.1.2",
+        "https-proxy-agent": "^5.0.1",
+        "mri": "^1.2.0",
+        "node-fetch-native": "^1.0.2",
+        "pathe": "^1.1.0",
+        "tar": "^6.1.13"
+      },
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
+    "node_modules/github-slugger": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
+      "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==",
+      "dev": true
+    },
     "node_modules/gl-mat4": {
       "version": "1.2.0",
       "license": "Zlib",
@@ -33401,7 +40002,6 @@
     },
     "node_modules/glob-parent": {
       "version": "5.1.2",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -33412,7 +40012,6 @@
     },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
-      "devOptional": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/global-cache": {
@@ -33722,11 +40321,49 @@
       "license": "ISC",
       "peer": true
     },
+    "node_modules/gunzip-maybe": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz",
+      "integrity": "sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==",
+      "dev": true,
+      "dependencies": {
+        "browserify-zlib": "^0.1.4",
+        "is-deflate": "^1.0.0",
+        "is-gzip": "^1.0.0",
+        "peek-stream": "^1.1.0",
+        "pumpify": "^1.3.3",
+        "through2": "^2.0.3"
+      },
+      "bin": {
+        "gunzip-maybe": "bin.js"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
     "node_modules/hard-rejection": {
       "version": "2.1.0",
       "dev": true,
@@ -33754,7 +40391,8 @@
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "engines": {
         "node": ">=4"
       }
@@ -34114,6 +40752,18 @@
         "void-elements": "3.1.0"
       }
     },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.0",
       "dev": true,
@@ -34272,7 +40922,6 @@
     },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "agent-base": "6",
@@ -34533,6 +41182,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-absolute-url": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-accessor-descriptor": {
       "version": "1.0.0",
       "license": "MIT",
@@ -34592,7 +41250,6 @@
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -34697,6 +41354,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-deflate": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-deflate/-/is-deflate-1.0.0.tgz",
+      "integrity": "sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==",
+      "dev": true
+    },
     "node_modules/is-descriptor": {
       "version": "1.0.2",
       "license": "MIT",
@@ -34745,7 +41408,6 @@
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -34790,9 +41452,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -34801,6 +41477,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-gzip": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-gzip/-/is-gzip-1.0.0.tgz",
+      "integrity": "sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-iexplorer": {
       "version": "1.0.0",
       "license": "MIT",
@@ -34812,7 +41497,6 @@
     "node_modules/is-interactive": {
       "version": "1.0.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -34835,6 +41519,22 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.2",
       "license": "MIT",
@@ -34873,6 +41573,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/is-path-inside": {
       "version": "3.0.3",
       "dev": true,
@@ -35001,7 +41710,6 @@
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -35192,6 +41900,112 @@
         "node": ">=8"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.2.2.tgz",
+      "integrity": "sha512-mgNtVv4vUuaKA97yxUHoA3+FkuhtxkjdXEWOyB/N76fjy0FjezEt34oy3epBtvCvS+7DyKwqCFWx/oJLV5+kCg==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jake/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jake/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jake/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jake/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/jake/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jake/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jest": {
       "version": "29.4.2",
       "dev": true,
@@ -38121,7 +44935,6 @@
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
@@ -38236,6 +45049,20 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/lazy-universal-dotenv": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-4.0.0.tgz",
+      "integrity": "sha512-aXpZJRnTkpK6gQ/z4nk+ZBLd/Qdp118cvPruLSIQzQNRhKwEcdXCOzXuF55VDqIiuAaY3UGZ10DJtvZzDcvsxg==",
+      "dev": true,
+      "dependencies": {
+        "app-root-dir": "^1.0.2",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^10.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/level": {
       "version": "6.0.1",
       "license": "MIT",
@@ -38444,7 +45271,6 @@
     },
     "node_modules/loader-runner": {
       "version": "4.3.0",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.11.5"
@@ -38452,9 +45278,8 @@
     },
     "node_modules/loader-utils": {
       "version": "2.0.4",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -38520,7 +45345,6 @@
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -38535,7 +45359,6 @@
     "node_modules/log-symbols/node_modules/ansi-styles": {
       "version": "4.3.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -38549,7 +45372,6 @@
     "node_modules/log-symbols/node_modules/chalk": {
       "version": "4.1.2",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -38564,7 +45386,6 @@
     "node_modules/log-symbols/node_modules/color-convert": {
       "version": "2.0.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -38574,13 +45395,11 @@
     },
     "node_modules/log-symbols/node_modules/color-name": {
       "version": "1.1.4",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/log-symbols/node_modules/has-flag": {
       "version": "4.0.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -38588,7 +45407,6 @@
     "node_modules/log-symbols/node_modules/supports-color": {
       "version": "7.2.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -38726,6 +45544,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/lru_map": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz",
+      "integrity": "sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ=="
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "license": "ISC",
@@ -38746,13 +45569,25 @@
       }
     },
     "node_modules/lz-string": {
-      "version": "1.4.4",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
-      "license": "WTFPL",
       "bin": {
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/make-cancellable-promise": {
       "version": "1.2.0",
       "license": "MIT",
@@ -38886,6 +45721,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/map-or-similar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
+      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
+      "dev": true
+    },
     "node_modules/map-visit": {
       "version": "1.0.0",
       "license": "MIT",
@@ -38930,6 +45771,18 @@
         "node": ">=6.4.0"
       }
     },
+    "node_modules/markdown-to-jsx": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz",
+      "integrity": "sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/material-colors": {
       "version": "1.2.6",
       "license": "ISC"
@@ -38942,6 +45795,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mdast-util-definitions": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
+      "integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-visit": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
+      "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "dev": true,
@@ -38970,6 +45846,15 @@
       "version": "5.2.1",
       "license": "MIT"
     },
+    "node_modules/memoizerific": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+      "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
+      "dev": true,
+      "dependencies": {
+        "map-or-similar": "^1.5.0"
+      }
+    },
     "node_modules/memory-fs": {
       "version": "0.2.0",
       "dev": true,
@@ -39876,6 +46761,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "license": "MIT",
@@ -39921,6 +46812,15 @@
         "to-px": "^1.0.1"
       }
     },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "license": "MIT"
@@ -40074,10 +46974,15 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/node-abort-controller": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
+      "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==",
+      "dev": true
+    },
     "node_modules/node-dir": {
       "version": "0.1.17",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "minimatch": "^3.0.2"
       },
@@ -40103,6 +47008,12 @@
         }
       }
     },
+    "node_modules/node-fetch-native": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.2.0.tgz",
+      "integrity": "sha512-5IAMBTl9p6PaAjYCnMv5FmqIF6GcZnawAVnzaCG0rX2aYZJ4CxEkZNtVPuTRug7fL7wyM5BQYTlAzcyMPi6oTQ==",
+      "dev": true
+    },
     "node_modules/node-fetch/node_modules/tr46": {
       "version": "0.0.3",
       "license": "MIT"
@@ -40312,8 +47223,9 @@
       "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.8",
-      "license": "MIT"
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
     },
     "node_modules/node-sass": {
       "version": "8.0.0",
@@ -40727,6 +47639,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/objectorarray": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/objectorarray/-/objectorarray-1.0.5.tgz",
+      "integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==",
+      "dev": true
+    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "dev": true,
@@ -40804,7 +47722,6 @@
     "node_modules/ora": {
       "version": "5.4.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "bl": "^4.1.0",
         "chalk": "^4.1.0",
@@ -40826,7 +47743,6 @@
     "node_modules/ora/node_modules/ansi-styles": {
       "version": "4.3.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -40840,7 +47756,6 @@
     "node_modules/ora/node_modules/bl": {
       "version": "4.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -40864,7 +47779,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.1.13"
@@ -40873,7 +47787,6 @@
     "node_modules/ora/node_modules/chalk": {
       "version": "4.1.2",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -40888,7 +47801,6 @@
     "node_modules/ora/node_modules/color-convert": {
       "version": "2.0.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -40898,13 +47810,11 @@
     },
     "node_modules/ora/node_modules/color-name": {
       "version": "1.1.4",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/ora/node_modules/has-flag": {
       "version": "4.0.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -40912,7 +47822,6 @@
     "node_modules/ora/node_modules/supports-color": {
       "version": "7.2.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -41007,6 +47916,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "dev": true
+    },
     "node_modules/papaparse": {
       "version": "5.3.2",
       "license": "MIT"
@@ -41124,6 +48039,12 @@
         "util": "^0.10.3"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "license": "MIT",
@@ -41150,6 +48071,37 @@
       "version": "1.0.7",
       "license": "MIT"
     },
+    "node_modules/path-scurry": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "dependencies": {
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.0.tgz",
+      "integrity": "sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/path-scurry/node_modules/minipass": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.2.tgz",
+      "integrity": "sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "license": "MIT",
@@ -41157,6 +48109,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "dev": true
+    },
     "node_modules/pbf": {
       "version": "3.2.1",
       "license": "BSD-3-Clause",
@@ -41185,6 +48143,23 @@
         }
       }
     },
+    "node_modules/peek-stream": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
+      "integrity": "sha512-FhJ+YbOSBb9/rIl2ZeE/QHEsWn7PqNYt8ARAY3kIgNGOk13g9FGyIY6JIl/xB/3TFRVoTv5as0l11weORrTekA==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "duplexify": "^3.5.0",
+        "through2": "^2.0.3"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "license": "MIT"
@@ -41211,7 +48186,6 @@
     "node_modules/pify": {
       "version": "4.0.1",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -41304,6 +48278,18 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/polished": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",
+      "integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/polybooljs": {
       "version": "1.2.0",
       "license": "MIT",
@@ -41488,6 +48474,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/probe-image-size": {
       "version": "7.2.3",
       "license": "MIT",
@@ -41510,6 +48505,14 @@
       "version": "2.0.1",
       "license": "MIT"
     },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/promise": {
       "version": "7.3.1",
       "license": "MIT",
@@ -41615,7 +48618,27 @@
     "node_modules/pump": {
       "version": "3.0.0",
       "license": "MIT",
-      "peer": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dev": true,
+      "dependencies": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      }
+    },
+    "node_modules/pumpify/node_modules/pump": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "dev": true,
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -41623,12 +48646,87 @@
     },
     "node_modules/punycode": {
       "version": "2.3.0",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/puppeteer-core": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-2.1.1.tgz",
+      "integrity": "sha512-n13AWriBMPYxnpbb6bnaY5YoY6rGj8vPLrz6CZF3o0qJNEwlcfJVxBzYZ0NJsQ21UbdJoijPCDrM++SUVEz7+w==",
+      "dev": true,
+      "dependencies": {
+        "@types/mime-types": "^2.1.0",
+        "debug": "^4.1.0",
+        "extract-zip": "^1.6.6",
+        "https-proxy-agent": "^4.0.0",
+        "mime": "^2.0.3",
+        "mime-types": "^2.1.25",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.0.0",
+        "rimraf": "^2.6.1",
+        "ws": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=8.16.0"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/agent-base": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+      "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/https-proxy-agent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
+      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "5",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/ws": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "dev": true,
+      "dependencies": {
+        "async-limiter": "~1.0.0"
+      }
+    },
     "node_modules/pure-color": {
       "version": "1.3.0",
       "license": "MIT"
@@ -41732,6 +48830,16 @@
       "version": "4.0.3",
       "license": "MIT"
     },
+    "node_modules/ramda": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
+      "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "license": "MIT",
@@ -41970,6 +49078,31 @@
         "react": "*"
       }
     },
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "dev": true,
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-confetti": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
+      "integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
+      "dev": true,
+      "dependencies": {
+        "tween-functions": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-copy-to-clipboard": {
       "version": "5.1.0",
       "license": "MIT",
@@ -42126,6 +49259,57 @@
         "dnd-core": "^16.0.1"
       }
     },
+    "node_modules/react-docgen": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.3.tgz",
+      "integrity": "sha512-xlLJyOlnfr8lLEEeaDZ+X2J/KJoe6Nr9AzxnkdQWush5hz2ZSu66w6iLMOScMmxoSHWpWMn+k3v5ZiyCfcWsOA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.7.5",
+        "@babel/generator": "^7.12.11",
+        "@babel/runtime": "^7.7.6",
+        "ast-types": "^0.14.2",
+        "commander": "^2.19.0",
+        "doctrine": "^3.0.0",
+        "estree-to-babel": "^3.1.0",
+        "neo-async": "^2.6.1",
+        "node-dir": "^0.1.10",
+        "strip-indent": "^3.0.0"
+      },
+      "bin": {
+        "react-docgen": "bin/react-docgen.js"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/react-docgen-typescript": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
+      "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
+      "dev": true,
+      "peerDependencies": {
+        "typescript": ">= 4.3.x"
+      }
+    },
+    "node_modules/react-docgen/node_modules/ast-types": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+      "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/react-docgen/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "license": "MIT",
@@ -42190,6 +49374,36 @@
       "version": "2.0.1",
       "license": "0BSD"
     },
+    "node_modules/react-element-to-jsx-string": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz",
+      "integrity": "sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==",
+      "dev": true,
+      "dependencies": {
+        "@base2/pretty-print-object": "1.0.1",
+        "is-plain-object": "5.0.0",
+        "react-is": "18.1.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0",
+        "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
+    "node_modules/react-element-to-jsx-string/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-element-to-jsx-string/node_modules/react-is": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
+      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
+      "dev": true
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.0",
       "license": "MIT"
@@ -42350,6 +49564,15 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/react-inspector": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz",
+      "integrity": "sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.4 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "license": "MIT"
@@ -43616,7 +50839,6 @@
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -43691,11 +50913,13 @@
     },
     "node_modules/regenerate": {
       "version": "1.4.2",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
     },
     "node_modules/regenerate-unicode-properties": {
       "version": "10.1.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "dependencies": {
         "regenerate": "^1.4.2"
       },
@@ -43708,8 +50932,9 @@
       "license": "MIT"
     },
     "node_modules/regenerator-transform": {
-      "version": "0.15.1",
-      "license": "MIT",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
       }
@@ -43747,12 +50972,13 @@
       }
     },
     "node_modules/regexpu-core": {
-      "version": "5.2.2",
-      "license": "MIT",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
       "dependencies": {
+        "@babel/regjsgen": "^0.8.0",
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.1.0",
-        "regjsgen": "^0.7.1",
         "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.1.0"
@@ -43761,13 +50987,10 @@
         "node": ">=4"
       }
     },
-    "node_modules/regjsgen": {
-      "version": "0.7.1",
-      "license": "MIT"
-    },
     "node_modules/regjsparser": {
       "version": "0.9.1",
-      "license": "BSD-2-Clause",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "dependencies": {
         "jsesc": "~0.5.0"
       },
@@ -43777,6 +51000,8 @@
     },
     "node_modules/regjsparser/node_modules/jsesc": {
       "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
       "bin": {
         "jsesc": "bin/jsesc"
       }
@@ -43866,6 +51091,38 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/remark-external-links": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz",
+      "integrity": "sha512-5vPSX0kHoSsqtdftSHhIYofVINC8qmp0nctkeU9YoJwV3YfiBRiI6cbFRJ0oI/1F9xS+bopXG0m2KS8VFscuKA==",
+      "dev": true,
+      "dependencies": {
+        "extend": "^3.0.0",
+        "is-absolute-url": "^3.0.0",
+        "mdast-util-definitions": "^4.0.0",
+        "space-separated-tokens": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-slug": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.1.0.tgz",
+      "integrity": "sha512-oGCxDF9deA8phWvxFuyr3oSJsdyUAxMFbA0mZ7Y1Sas+emILtO+e5WutF9564gDsEN4IXaQXm5pFo6MLH+YmwQ==",
+      "dev": true,
+      "dependencies": {
+        "github-slugger": "^1.0.0",
+        "mdast-util-to-string": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "dev": true,
@@ -43914,6 +51171,15 @@
       "license": "ISC",
       "peer": true
     },
+    "node_modules/requireindex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.5"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "dev": true,
@@ -43989,7 +51255,6 @@
     "node_modules/restore-cursor": {
       "version": "3.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -44305,8 +51570,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.3.8",
-      "license": "ISC",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -44385,12 +51651,39 @@
     },
     "node_modules/serialize-javascript": {
       "version": "6.0.1",
-      "devOptional": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/serve-favicon": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
+      "integrity": "sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA==",
+      "dev": true,
+      "dependencies": {
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "ms": "2.1.1",
+        "parseurl": "~1.3.2",
+        "safe-buffer": "5.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-favicon/node_modules/ms": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+      "dev": true
+    },
+    "node_modules/serve-favicon/node_modules/safe-buffer": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+      "dev": true
+    },
     "node_modules/serve-index": {
       "version": "1.9.1",
       "dev": true,
@@ -44616,6 +51909,18 @@
       "version": "0.3.2",
       "license": "MIT"
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "license": "MIT"
@@ -44927,6 +52232,16 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "dev": true,
@@ -45068,8 +52383,7 @@
     },
     "node_modules/stackframe": {
       "version": "1.3.4",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/stacktrace-parser": {
       "version": "0.1.10",
@@ -45324,6 +52638,29 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/store2": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz",
+      "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==",
+      "dev": true
+    },
+    "node_modules/storybook": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.2.1.tgz",
+      "integrity": "sha512-uNNqJrWUVaxdZdd3GpMTHt9h2EftoUKxtpAWeQlzx20DDvcliVC1yvLT54sLAzY8nlxxN+fBUuBbTSJ1Dx4TPg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/cli": "7.2.1"
+      },
+      "bin": {
+        "sb": "index.js",
+        "storybook": "index.js"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/stream-parser": {
       "version": "0.3.1",
       "license": "MIT",
@@ -45347,8 +52684,7 @@
     },
     "node_modules/stream-shift": {
       "version": "1.0.1",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/string_decoder": {
       "version": "1.3.0",
@@ -45402,6 +52738,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
       "dev": true,
@@ -45454,6 +52805,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "dev": true,
@@ -45561,7 +52925,8 @@
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -45656,6 +53021,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/synchronous-promise": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
+      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
+      "dev": true
+    },
     "node_modules/tabbable": {
       "version": "6.0.1",
       "license": "MIT"
@@ -45684,6 +53055,75 @@
         "node": ">=10"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-fs/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar-stream/node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/tar-stream/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/tar/node_modules/minipass": {
       "version": "4.0.1",
       "dev": true,
@@ -45697,6 +53137,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/telejson": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.1.0.tgz",
+      "integrity": "sha512-jFJO4P5gPebZAERPkJsqMAQ0IMA1Hi0AoSfxpnUaV6j6R2SZqlpkbS20U6dEUtA3RUYt2Ak/mTlkQzHH9Rv/hA==",
+      "dev": true,
+      "dependencies": {
+        "memoizerific": "^1.11.3"
+      }
+    },
     "node_modules/temp": {
       "version": "0.8.3",
       "engines": [
@@ -45709,6 +53158,15 @@
         "rimraf": "~2.2.6"
       }
     },
+    "node_modules/temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/temp/node_modules/rimraf": {
       "version": "2.2.8",
       "license": "MIT",
@@ -45717,6 +53175,37 @@
         "rimraf": "bin.js"
       }
     },
+    "node_modules/tempy": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-1.0.1.tgz",
+      "integrity": "sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==",
+      "dev": true,
+      "dependencies": {
+        "del": "^6.0.0",
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tempy/node_modules/type-fest": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+      "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/terser": {
       "version": "5.16.2",
       "license": "BSD-2-Clause",
@@ -45735,7 +53224,6 @@
     },
     "node_modules/terser-webpack-plugin": {
       "version": "5.3.6",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.14",
@@ -45768,7 +53256,6 @@
     },
     "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
       "version": "3.1.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -45835,7 +53322,6 @@
     "node_modules/through2": {
       "version": "2.0.5",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "readable-stream": "~2.3.6",
         "xtend": "~4.0.1"
@@ -45843,13 +53329,11 @@
     },
     "node_modules/through2/node_modules/isarray": {
       "version": "1.0.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/through2/node_modules/readable-stream": {
       "version": "2.3.7",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -45862,13 +53346,11 @@
     },
     "node_modules/through2/node_modules/safe-buffer": {
       "version": "5.1.2",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/through2/node_modules/string_decoder": {
       "version": "1.1.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -45992,6 +53474,12 @@
         "to-array-buffer": "^3.0.0"
       }
     },
+    "node_modules/tocbot": {
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/tocbot/-/tocbot-4.21.1.tgz",
+      "integrity": "sha512-IfajhBTeg0HlMXu1f+VMbPef05QpDTsZ9X2Yn1+8npdaXsXg/+wrm9Ze1WG5OS1UDC3qJ5EQN/XOZ3gfXjPFCw==",
+      "dev": true
+    },
     "node_modules/toggle-selection": {
       "version": "1.0.6",
       "license": "MIT"
@@ -46034,6 +53522,15 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "dev": true,
@@ -46087,6 +53584,12 @@
       "dev": true,
       "license": "0BSD"
     },
+    "node_modules/tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
+      "dev": true
+    },
     "node_modules/type": {
       "version": "1.2.0",
       "license": "ISC",
@@ -46152,8 +53655,7 @@
     },
     "node_modules/typedarray": {
       "version": "0.0.6",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/typedarray-pool": {
       "version": "1.2.0",
@@ -46214,6 +53716,19 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/uglify-js": {
+      "version": "3.17.4",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
+      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "license": "MIT",
@@ -46242,14 +53757,16 @@
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/unicode-match-property-ecmascript": {
       "version": "2.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "dependencies": {
         "unicode-canonical-property-names-ecmascript": "^2.0.0",
         "unicode-property-aliases-ecmascript": "^2.0.0"
@@ -46260,14 +53777,16 @@
     },
     "node_modules/unicode-match-property-value-ecmascript": {
       "version": "2.1.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/unicode-property-aliases-ecmascript": {
       "version": "2.1.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "engines": {
         "node": ">=4"
       }
@@ -46316,6 +53835,66 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+      "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+      "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit-parents": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+      "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "license": "MIT",
@@ -46323,6 +53902,30 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/unplugin": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.4.0.tgz",
+      "integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.5.0"
+      }
+    },
+    "node_modules/unplugin/node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/unquote": {
       "version": "1.1.1",
       "license": "MIT",
@@ -46377,8 +53980,19 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.10",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
       "funding": [
         {
           "type": "opencollective",
@@ -46387,15 +54001,18 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
       },
       "bin": {
-        "browserslist-lint": "cli.js"
+        "update-browserslist-db": "cli.js"
       },
       "peerDependencies": {
         "browserslist": ">= 4.21.0"
@@ -46408,7 +54025,6 @@
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -46419,6 +54035,16 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/url": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.1.tgz",
+      "integrity": "sha512-rWS3H04/+mzzJkv0eZ7vEDGiQbgquI1fGfOad6zKvgYQi1SzMmhl7c/DdRGxhaWrVH6z0qWITo8rpnxK/RfEhA==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^1.4.1",
+        "qs": "^6.11.0"
+      }
+    },
     "node_modules/url-join": {
       "version": "5.0.0",
       "license": "MIT",
@@ -46426,6 +54052,12 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/url/node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+      "dev": true
+    },
     "node_modules/use": {
       "version": "3.1.1",
       "license": "MIT",
@@ -46502,6 +54134,19 @@
         "react-router-dom": ">=6.0.0"
       }
     },
+    "node_modules/use-resize-observer": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+      "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+      "dev": true,
+      "dependencies": {
+        "@juggle/resize-observer": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": "16.8.0 - 18",
+        "react-dom": "16.8.0 - 18"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "license": "MIT",
@@ -46753,7 +54398,6 @@
     },
     "node_modules/watchpack": {
       "version": "2.4.0",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
@@ -46774,7 +54418,6 @@
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "defaults": "^1.0.3"
       }
@@ -46801,7 +54444,6 @@
     },
     "node_modules/webpack": {
       "version": "5.75.0",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -47001,6 +54643,17 @@
         }
       }
     },
+    "node_modules/webpack-hot-middleware": {
+      "version": "2.25.4",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.4.tgz",
+      "integrity": "sha512-IRmTspuHM06aZh98OhBJtqLpeWFM8FXJS5UYpKYxCJzyFoyWj1w6VGFfomZU7OPA55dMLrQK0pRT1eQ3PACr4w==",
+      "dev": true,
+      "dependencies": {
+        "ansi-html-community": "0.0.8",
+        "html-entities": "^2.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "5.8.0",
       "dev": true,
@@ -47015,15 +54668,18 @@
     },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+      "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw=="
+    },
     "node_modules/webpack/node_modules/acorn": {
       "version": "8.8.2",
-      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -47034,7 +54690,6 @@
     },
     "node_modules/webpack/node_modules/acorn-import-assertions": {
       "version": "1.8.0",
-      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^8"
@@ -47042,7 +54697,6 @@
     },
     "node_modules/webpack/node_modules/enhanced-resolve": {
       "version": "5.12.0",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -47054,7 +54708,6 @@
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "3.1.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -47071,7 +54724,6 @@
     },
     "node_modules/webpack/node_modules/tapable": {
       "version": "2.2.1",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -47116,7 +54768,6 @@
     },
     "node_modules/which": {
       "version": "2.0.2",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -47213,6 +54864,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "dev": true
+    },
     "node_modules/world-calendars": {
       "version": "1.0.3",
       "license": "MIT",
@@ -47236,6 +54893,57 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
       "version": "4.3.0",
       "license": "MIT",
@@ -47454,6 +55162,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yjs": {
       "version": "13.5.46",
       "license": "MIT",
@@ -47516,37 +55234,55 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
-    "@babel/code-frame": {
-      "version": "7.18.6",
+    "@aw-web-design/x-default-browser": {
+      "version": "1.4.126",
+      "resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz",
+      "integrity": "sha512-Xk1sIhyNC/esHGGVjL/niHLowM0csl/kFO5uawBy4IrWwy0o1G8LGt3jP6nmWGz+USxeeqbihAmp/oVZju6wug==",
+      "dev": true,
       "requires": {
-        "@babel/highlight": "^7.18.6"
+        "default-browser-id": "3.0.0"
+      }
+    },
+    "@babel/code-frame": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+      "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+      "requires": {
+        "@babel/highlight": "^7.22.10",
+        "chalk": "^2.4.2"
       }
     },
     "@babel/compat-data": {
-      "version": "7.20.14"
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ=="
     },
     "@babel/core": {
-      "version": "7.20.12",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.10.tgz",
+      "integrity": "sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==",
       "requires": {
-        "@ampproject/remapping": "^2.1.0",
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.20.7",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helpers": "^7.20.7",
-        "@babel/parser": "^7.20.7",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.12",
-        "@babel/types": "^7.20.7",
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.22.10",
+        "@babel/generator": "^7.22.10",
+        "@babel/helper-compilation-targets": "^7.22.10",
+        "@babel/helper-module-transforms": "^7.22.9",
+        "@babel/helpers": "^7.22.10",
+        "@babel/parser": "^7.22.10",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.10",
+        "@babel/types": "^7.22.10",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.2.2",
-        "semver": "^6.3.0"
+        "semver": "^6.3.1"
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.0"
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
         }
       }
     },
@@ -47566,10 +55302,13 @@
       }
     },
     "@babel/generator": {
-      "version": "7.20.14",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
+      "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
       "requires": {
-        "@babel/types": "^7.20.7",
+        "@babel/types": "^7.22.10",
         "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
       },
       "dependencies": {
@@ -47584,53 +55323,78 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.18.9",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.10.tgz",
+      "integrity": "sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==",
       "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.22.10"
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.20.7",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz",
+      "integrity": "sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==",
       "requires": {
-        "@babel/compat-data": "^7.20.5",
-        "@babel/helper-validator-option": "^7.18.6",
-        "browserslist": "^4.21.3",
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-validator-option": "^7.22.5",
+        "browserslist": "^4.21.9",
         "lru-cache": "^5.1.1",
-        "semver": "^6.3.0"
+        "semver": "^6.3.1"
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.0"
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
         }
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz",
-      "integrity": "sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
+      "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-member-expression-to-functions": "^7.21.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/helper-split-export-declaration": "^7.18.6"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "semver": "^6.3.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+        }
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.20.5",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz",
+      "integrity": "sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "regexpu-core": "^5.2.1"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+        }
       }
     },
     "@babel/helper-define-polyfill-provider": {
@@ -47650,156 +55414,183 @@
       }
     },
     "@babel/helper-environment-visitor": {
-      "version": "7.18.9"
-    },
-    "@babel/helper-explode-assignable-expression": {
-      "version": "7.18.6",
-      "requires": {
-        "@babel/types": "^7.18.6"
-      }
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q=="
     },
     "@babel/helper-function-name": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
-      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
       "requires": {
-        "@babel/template": "^7.20.7",
-        "@babel/types": "^7.21.0"
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
-      "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
+      "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
       "requires": {
-        "@babel/types": "^7.21.0"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+      "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.20.11",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+      "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
       "requires": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-simple-access": "^7.20.2",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/helper-validator-identifier": "^7.19.1",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.10",
-        "@babel/types": "^7.20.7"
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.5"
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.20.2"
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.18.9",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz",
+      "integrity": "sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-wrap-function": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-wrap-function": "^7.22.9"
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.20.7",
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz",
+      "integrity": "sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==",
       "requires": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-member-expression-to-functions": "^7.20.7",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.7",
-        "@babel/types": "^7.20.7"
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5"
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.20.2",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
       "requires": {
-        "@babel/types": "^7.20.2"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.20.0",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
       "requires": {
-        "@babel/types": "^7.20.0"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.18.6",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.19.4"
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.19.1"
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ=="
     },
     "@babel/helper-validator-option": {
-      "version": "7.18.6"
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+      "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw=="
     },
     "@babel/helper-wrap-function": {
-      "version": "7.20.5",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz",
+      "integrity": "sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==",
       "requires": {
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.20.5",
-        "@babel/types": "^7.20.5"
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.10"
       }
     },
     "@babel/helpers": {
-      "version": "7.20.13",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.10.tgz",
+      "integrity": "sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==",
       "requires": {
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.20.13",
-        "@babel/types": "^7.20.7"
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.10",
+        "@babel/types": "^7.22.10"
       }
     },
     "@babel/highlight": {
-      "version": "7.18.6",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
+      "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.18.6",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "chalk": "^2.4.2",
         "js-tokens": "^4.0.0"
       }
     },
     "@babel/parser": {
-      "version": "7.20.13"
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
+      "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.20.7",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
+      "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.22.5"
       }
     },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.20.7",
+      "peer": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-plugin-utils": "^7.20.2",
@@ -47814,21 +55605,6 @@
         "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
-    "@babel/plugin-proposal-class-static-block": {
-      "version": "7.20.7",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.20.7",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
-      }
-    },
-    "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.18.6",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-      }
-    },
     "@babel/plugin-proposal-export-default-from": {
       "version": "7.18.10",
       "peer": true,
@@ -47837,27 +55613,6 @@
         "@babel/plugin-syntax-export-default-from": "^7.18.6"
       }
     },
-    "@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.18.9",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-      }
-    },
-    "@babel/plugin-proposal-json-strings": {
-      "version": "7.18.6",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
-      }
-    },
-    "@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.20.7",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-      }
-    },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
       "version": "7.18.6",
       "requires": {
@@ -47865,15 +55620,9 @@
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       }
     },
-    "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.18.6",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      }
-    },
     "@babel/plugin-proposal-object-rest-spread": {
       "version": "7.20.7",
+      "peer": true,
       "requires": {
         "@babel/compat-data": "^7.20.5",
         "@babel/helper-compilation-targets": "^7.20.7",
@@ -47884,6 +55633,7 @@
     },
     "@babel/plugin-proposal-optional-catch-binding": {
       "version": "7.18.6",
+      "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
@@ -47897,28 +55647,11 @@
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       }
     },
-    "@babel/plugin-proposal-private-methods": {
-      "version": "7.18.6",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
-    },
     "@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.20.5",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.20.5",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      }
-    },
-    "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.18.6",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "requires": {}
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
@@ -47941,6 +55674,8 @@
     },
     "@babel/plugin-syntax-class-static-block": {
       "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -47960,26 +55695,38 @@
     },
     "@babel/plugin-syntax-export-namespace-from": {
       "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-syntax-flow": {
-      "version": "7.18.6",
-      "peer": true,
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz",
+      "integrity": "sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-syntax-import-assertions": {
-      "version": "7.20.0",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz",
+      "integrity": "sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-syntax-import-attributes": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz",
+      "integrity": "sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-syntax-import-meta": {
       "version": "7.10.4",
-      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4"
       }
@@ -47991,9 +55738,11 @@
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
+      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-syntax-logical-assignment-operators": {
@@ -48034,6 +55783,8 @@
     },
     "@babel/plugin-syntax-private-property-in-object": {
       "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
       }
@@ -48050,174 +55801,365 @@
         "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
-    "@babel/plugin-transform-arrow-functions": {
-      "version": "7.20.7",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@babel/plugin-transform-async-to-generator": {
-      "version": "7.20.7",
-      "requires": {
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-remap-async-to-generator": "^7.18.9"
-      }
-    },
-    "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.18.6",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
-    },
-    "@babel/plugin-transform-block-scoping": {
-      "version": "7.20.14",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@babel/plugin-transform-classes": {
-      "version": "7.20.7",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-replace-supers": "^7.20.7",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "globals": "^11.1.0"
-      }
-    },
-    "@babel/plugin-transform-computed-properties": {
-      "version": "7.20.7",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/template": "^7.20.7"
-      }
-    },
-    "@babel/plugin-transform-destructuring": {
-      "version": "7.20.7",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
-      }
-    },
-    "@babel/plugin-transform-dotall-regex": {
+    "@babel/plugin-syntax-unicode-sets-regex": {
       "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.18.6",
         "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
-    "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.18.9",
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
+      "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-async-generator-functions": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.10.tgz",
+      "integrity": "sha512-eueE8lvKVzq5wIObKK/7dvoeKJ+xc6TvRn6aysIjS6pSCeLy7S/eVi7pEQknZqyqvzaNKdDtem8nUNTBgDVR2g==",
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.9",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
+      "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
+      "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.10.tgz",
+      "integrity": "sha512-1+kVpGAOOI1Albt6Vse7c8pHzcZQdQKW+wJH+g8mCaszOdDVwRXa/slHPqIw+oJAJANTKDMuM2cBdV0Dg618Vg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-class-properties": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz",
+      "integrity": "sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-class-static-block": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz",
+      "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz",
+      "integrity": "sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
+      "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/template": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.10.tgz",
+      "integrity": "sha512-dPJrL0VOyxqLM9sritNbMSGx/teueHF/htMKrPT7DNxccXxRDPYqlgPFFdr8u+F+qUZOkZoXue/6rL5O5GduEw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
+      "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
+      "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-dynamic-import": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz",
+      "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
+      "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
       "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-export-namespace-from": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz",
+      "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       }
     },
     "@babel/plugin-transform-flow-strip-types": {
-      "version": "7.19.0",
-      "peer": true,
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.22.5.tgz",
+      "integrity": "sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0",
-        "@babel/plugin-syntax-flow": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-flow": "^7.22.5"
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.18.8",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
+      "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.18.9",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
+      "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
       "requires": {
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-json-strings": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz",
+      "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.18.9",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
+      "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz",
+      "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
+      "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.20.11",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
+      "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.20.11",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz",
+      "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-simple-access": "^7.20.2"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.20.11",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
+      "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
       "requires": {
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-module-transforms": "^7.20.11",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-identifier": "^7.19.1"
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
+      "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.20.5",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.20.5",
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
+      "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz",
+      "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-numeric-separator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz",
+      "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-object-rest-spread": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
+      "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==",
+      "requires": {
+        "@babel/compat-data": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.22.5"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
+      "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz",
+      "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz",
+      "integrity": "sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.20.7",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
+      "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-private-methods": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz",
+      "integrity": "sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-private-property-in-object": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz",
+      "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
+      "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-react-constant-elements": {
@@ -48228,26 +56170,32 @@
       }
     },
     "@babel/plugin-transform-react-display-name": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz",
+      "integrity": "sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-react-jsx": {
-      "version": "7.20.13",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz",
+      "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-jsx": "^7.18.6",
-        "@babel/types": "^7.20.7"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/plugin-transform-react-jsx-development": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+      "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
       "dev": true,
       "requires": {
-        "@babel/plugin-transform-react-jsx": "^7.18.6"
+        "@babel/plugin-transform-react-jsx": "^7.22.5"
       }
     },
     "@babel/plugin-transform-react-jsx-self": {
@@ -48265,24 +56213,30 @@
       }
     },
     "@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz",
+      "integrity": "sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.20.5",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz",
+      "integrity": "sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "regenerator-transform": "^0.15.1"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "regenerator-transform": "^0.15.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
+      "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-runtime": {
@@ -48302,34 +56256,44 @@
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
+      "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.20.7",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
+      "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
+      "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.18.9",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
+      "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.18.9",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
+      "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-typescript": {
@@ -48341,48 +56305,60 @@
       }
     },
     "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.18.10",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz",
+      "integrity": "sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz",
+      "integrity": "sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
+      "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz",
+      "integrity": "sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/preset-env": {
-      "version": "7.20.2",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.10.tgz",
+      "integrity": "sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==",
       "requires": {
-        "@babel/compat-data": "^7.20.1",
-        "@babel/helper-compilation-targets": "^7.20.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-async-generator-functions": "^7.20.1",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-class-static-block": "^7.18.6",
-        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
-        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-        "@babel/plugin-proposal-json-strings": "^7.18.6",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-        "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
-        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.10",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.5",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-class-properties": "^7.12.13",
         "@babel/plugin-syntax-class-static-block": "^7.14.5",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-import-assertions": "^7.20.0",
+        "@babel/plugin-syntax-import-assertions": "^7.22.5",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
         "@babel/plugin-syntax-json-strings": "^7.8.3",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
@@ -48392,81 +56368,142 @@
         "@babel/plugin-syntax-optional-chaining": "^7.8.3",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-transform-arrow-functions": "^7.18.6",
-        "@babel/plugin-transform-async-to-generator": "^7.18.6",
-        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
-        "@babel/plugin-transform-block-scoping": "^7.20.2",
-        "@babel/plugin-transform-classes": "^7.20.2",
-        "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.20.2",
-        "@babel/plugin-transform-dotall-regex": "^7.18.6",
-        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
-        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
-        "@babel/plugin-transform-for-of": "^7.18.8",
-        "@babel/plugin-transform-function-name": "^7.18.9",
-        "@babel/plugin-transform-literals": "^7.18.9",
-        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
-        "@babel/plugin-transform-modules-amd": "^7.19.6",
-        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
-        "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
-        "@babel/plugin-transform-new-target": "^7.18.6",
-        "@babel/plugin-transform-object-super": "^7.18.6",
-        "@babel/plugin-transform-parameters": "^7.20.1",
-        "@babel/plugin-transform-property-literals": "^7.18.6",
-        "@babel/plugin-transform-regenerator": "^7.18.6",
-        "@babel/plugin-transform-reserved-words": "^7.18.6",
-        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-        "@babel/plugin-transform-spread": "^7.19.0",
-        "@babel/plugin-transform-sticky-regex": "^7.18.6",
-        "@babel/plugin-transform-template-literals": "^7.18.9",
-        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
-        "@babel/plugin-transform-unicode-escapes": "^7.18.10",
-        "@babel/plugin-transform-unicode-regex": "^7.18.6",
-        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.1",
-        "core-js-compat": "^3.25.1",
-        "semver": "^6.3.0"
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.22.5",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.10",
+        "@babel/plugin-transform-async-to-generator": "^7.22.5",
+        "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
+        "@babel/plugin-transform-block-scoping": "^7.22.10",
+        "@babel/plugin-transform-class-properties": "^7.22.5",
+        "@babel/plugin-transform-class-static-block": "^7.22.5",
+        "@babel/plugin-transform-classes": "^7.22.6",
+        "@babel/plugin-transform-computed-properties": "^7.22.5",
+        "@babel/plugin-transform-destructuring": "^7.22.10",
+        "@babel/plugin-transform-dotall-regex": "^7.22.5",
+        "@babel/plugin-transform-duplicate-keys": "^7.22.5",
+        "@babel/plugin-transform-dynamic-import": "^7.22.5",
+        "@babel/plugin-transform-exponentiation-operator": "^7.22.5",
+        "@babel/plugin-transform-export-namespace-from": "^7.22.5",
+        "@babel/plugin-transform-for-of": "^7.22.5",
+        "@babel/plugin-transform-function-name": "^7.22.5",
+        "@babel/plugin-transform-json-strings": "^7.22.5",
+        "@babel/plugin-transform-literals": "^7.22.5",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.22.5",
+        "@babel/plugin-transform-member-expression-literals": "^7.22.5",
+        "@babel/plugin-transform-modules-amd": "^7.22.5",
+        "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+        "@babel/plugin-transform-modules-systemjs": "^7.22.5",
+        "@babel/plugin-transform-modules-umd": "^7.22.5",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+        "@babel/plugin-transform-new-target": "^7.22.5",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.5",
+        "@babel/plugin-transform-numeric-separator": "^7.22.5",
+        "@babel/plugin-transform-object-rest-spread": "^7.22.5",
+        "@babel/plugin-transform-object-super": "^7.22.5",
+        "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.22.10",
+        "@babel/plugin-transform-parameters": "^7.22.5",
+        "@babel/plugin-transform-private-methods": "^7.22.5",
+        "@babel/plugin-transform-private-property-in-object": "^7.22.5",
+        "@babel/plugin-transform-property-literals": "^7.22.5",
+        "@babel/plugin-transform-regenerator": "^7.22.10",
+        "@babel/plugin-transform-reserved-words": "^7.22.5",
+        "@babel/plugin-transform-shorthand-properties": "^7.22.5",
+        "@babel/plugin-transform-spread": "^7.22.5",
+        "@babel/plugin-transform-sticky-regex": "^7.22.5",
+        "@babel/plugin-transform-template-literals": "^7.22.5",
+        "@babel/plugin-transform-typeof-symbol": "^7.22.5",
+        "@babel/plugin-transform-unicode-escapes": "^7.22.10",
+        "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
+        "@babel/plugin-transform-unicode-regex": "^7.22.5",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "@babel/types": "^7.22.10",
+        "babel-plugin-polyfill-corejs2": "^0.4.5",
+        "babel-plugin-polyfill-corejs3": "^0.8.3",
+        "babel-plugin-polyfill-regenerator": "^0.5.2",
+        "core-js-compat": "^3.31.0",
+        "semver": "^6.3.1"
       },
       "dependencies": {
+        "@babel/helper-define-polyfill-provider": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz",
+          "integrity": "sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==",
+          "requires": {
+            "@babel/helper-compilation-targets": "^7.22.6",
+            "@babel/helper-plugin-utils": "^7.22.5",
+            "debug": "^4.1.1",
+            "lodash.debounce": "^4.0.8",
+            "resolve": "^1.14.2"
+          }
+        },
+        "babel-plugin-polyfill-corejs2": {
+          "version": "0.4.5",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
+          "integrity": "sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==",
+          "requires": {
+            "@babel/compat-data": "^7.22.6",
+            "@babel/helper-define-polyfill-provider": "^0.4.2",
+            "semver": "^6.3.1"
+          }
+        },
+        "babel-plugin-polyfill-corejs3": {
+          "version": "0.8.3",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz",
+          "integrity": "sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==",
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.4.2",
+            "core-js-compat": "^3.31.0"
+          }
+        },
+        "babel-plugin-polyfill-regenerator": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz",
+          "integrity": "sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==",
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.4.2"
+          }
+        },
         "semver": {
-          "version": "6.3.0"
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
         }
       }
     },
     "@babel/preset-flow": {
-      "version": "7.18.6",
-      "peer": true,
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.22.5.tgz",
+      "integrity": "sha512-ta2qZ+LSiGCrP5pgcGt8xMnnkXQrq8Sa4Ulhy06BOlF5QbLw9q5hIx7bn5MrsvyTGAfh6kTOo07Q+Pfld/8Y5Q==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-transform-flow-strip-types": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-transform-flow-strip-types": "^7.22.5"
       }
     },
     "@babel/preset-modules": {
-      "version": "0.1.5",
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-        "@babel/plugin-transform-dotall-regex": "^7.4.4",
         "@babel/types": "^7.4.4",
         "esutils": "^2.0.2"
       }
     },
     "@babel/preset-react": {
-      "version": "7.18.6",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.22.5.tgz",
+      "integrity": "sha512-M+Is3WikOpEJHgR385HbuCITPTaPRaNkibTEa9oiofmJvIsrceb4yp9RL9Kb+TE8LznmeyZqpP+Lopwcx59xPQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-transform-react-display-name": "^7.18.6",
-        "@babel/plugin-transform-react-jsx": "^7.18.6",
-        "@babel/plugin-transform-react-jsx-development": "^7.18.6",
-        "@babel/plugin-transform-react-pure-annotations": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
+        "@babel/plugin-transform-react-display-name": "^7.22.5",
+        "@babel/plugin-transform-react-jsx": "^7.22.5",
+        "@babel/plugin-transform-react-jsx-development": "^7.22.5",
+        "@babel/plugin-transform-react-pure-annotations": "^7.22.5"
       }
     },
     "@babel/preset-typescript": {
@@ -48479,7 +56516,6 @@
     },
     "@babel/register": {
       "version": "7.18.9",
-      "peer": true,
       "requires": {
         "clone-deep": "^4.0.1",
         "find-cache-dir": "^2.0.0",
@@ -48490,7 +56526,6 @@
       "dependencies": {
         "find-cache-dir": {
           "version": "2.1.0",
-          "peer": true,
           "requires": {
             "commondir": "^1.0.1",
             "make-dir": "^2.0.0",
@@ -48499,14 +56534,12 @@
         },
         "find-up": {
           "version": "3.0.0",
-          "peer": true,
           "requires": {
             "locate-path": "^3.0.0"
           }
         },
         "locate-path": {
           "version": "3.0.0",
-          "peer": true,
           "requires": {
             "p-locate": "^3.0.0",
             "path-exists": "^3.0.0"
@@ -48514,7 +56547,6 @@
         },
         "make-dir": {
           "version": "2.1.0",
-          "peer": true,
           "requires": {
             "pify": "^4.0.1",
             "semver": "^5.6.0"
@@ -48522,28 +56554,29 @@
         },
         "p-locate": {
           "version": "3.0.0",
-          "peer": true,
           "requires": {
             "p-limit": "^2.0.0"
           }
         },
         "path-exists": {
-          "version": "3.0.0",
-          "peer": true
+          "version": "3.0.0"
         },
         "pkg-dir": {
           "version": "3.0.0",
-          "peer": true,
           "requires": {
             "find-up": "^3.0.0"
           }
         },
         "semver": {
-          "version": "5.7.1",
-          "peer": true
+          "version": "5.7.1"
         }
       }
     },
+    "@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+    },
     "@babel/runtime": {
       "version": "7.20.13",
       "requires": {
@@ -48551,38 +56584,48 @@
       }
     },
     "@babel/template": {
-      "version": "7.20.7",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
       "requires": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7"
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/traverse": {
-      "version": "7.20.13",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz",
+      "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==",
       "requires": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.20.7",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.20.13",
-        "@babel/types": "^7.20.7",
+        "@babel/code-frame": "^7.22.10",
+        "@babel/generator": "^7.22.10",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.22.10",
+        "@babel/types": "^7.22.10",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.21.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.3.tgz",
-      "integrity": "sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==",
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz",
+      "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==",
       "requires": {
-        "@babel/helper-string-parser": "^7.19.4",
-        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5",
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@base2/pretty-print-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz",
+      "integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==",
+      "dev": true
+    },
     "@bcoe/v8-coverage": {
       "version": "0.2.3",
       "dev": true
@@ -48606,6 +56649,13 @@
         }
       }
     },
+    "@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "dev": true,
+      "optional": true
+    },
     "@daybrush/utils": {
       "version": "1.10.2"
     },
@@ -48763,11 +56813,158 @@
       "version": "1.0.0",
       "requires": {}
     },
+    "@esbuild/android-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "dev": true,
+      "optional": true
+    },
     "@esbuild/darwin-arm64": {
       "version": "0.17.8",
       "dev": true,
       "optional": true
     },
+    "@esbuild/darwin-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-mips64el": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ppc64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-riscv64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-s390x": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/netbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/sunos-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "dev": true,
+      "optional": true
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -48846,6 +57043,12 @@
       "integrity": "sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==",
       "dev": true
     },
+    "@fal-works/esbuild-plugin-global-externals": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz",
+      "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
+      "dev": true
+    },
     "@floating-ui/core": {
       "version": "0.7.3"
     },
@@ -48862,6 +57065,12 @@
         "use-isomorphic-layout-effect": "^1.1.1"
       }
     },
+    "@floating-ui/utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
+      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
+      "dev": true
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "dev": true
@@ -48911,6 +57120,71 @@
       "version": "0.2.4",
       "requires": {}
     },
+    "@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+          "dev": true,
+          "requires": {
+            "eastasianwidth": "^0.2.0",
+            "emoji-regex": "^9.2.2",
+            "strip-ansi": "^7.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+          "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^6.1.0",
+            "string-width": "^5.0.1",
+            "strip-ansi": "^7.0.1"
+          }
+        }
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "dev": true,
@@ -49737,7 +58011,6 @@
     },
     "@jest/types": {
       "version": "27.5.1",
-      "peer": true,
       "requires": {
         "@types/istanbul-lib-coverage": "^2.0.0",
         "@types/istanbul-reports": "^3.0.0",
@@ -49748,14 +58021,12 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "peer": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
           "version": "4.1.2",
-          "peer": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -49763,22 +58034,18 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "peer": true,
           "requires": {
             "color-name": "~1.1.4"
           }
         },
         "color-name": {
-          "version": "1.1.4",
-          "peer": true
+          "version": "1.1.4"
         },
         "has-flag": {
-          "version": "4.0.0",
-          "peer": true
+          "version": "4.0.0"
         },
         "supports-color": {
           "version": "7.2.0",
-          "peer": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -49825,6 +58092,12 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "dev": true
+    },
     "@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "dev": true
@@ -49873,6 +58146,27 @@
       "version": "3.1.0",
       "peer": true
     },
+    "@mdx-js/react": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
+      "integrity": "sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==",
+      "dev": true,
+      "requires": {
+        "@types/mdx": "^2.0.0",
+        "@types/react": ">=16"
+      }
+    },
+    "@ndelangen/get-tarball": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz",
+      "integrity": "sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==",
+      "dev": true,
+      "requires": {
+        "gunzip-maybe": "^1.4.2",
+        "pump": "^3.0.0",
+        "tar-fs": "^2.1.1"
+      }
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "dev": true,
@@ -49916,6 +58210,13 @@
         "rimraf": "^3.0.2"
       }
     },
+    "@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true
+    },
     "@plotly/d3": {
       "version": "3.8.0",
       "peer": true
@@ -49963,6 +58264,15 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-0.1.8.tgz",
       "integrity": "sha512-jwRMXYwC0hUo0mv6wGpuw254Pd9p/R6Td5xsRpOmaWkUHlooNWqVcadgyzlRumMq3xfOTXwJReU0Jv+EIy4Jbw=="
     },
+    "@radix-ui/number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+      "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "@radix-ui/primitive": {
       "version": "1.0.0",
       "requires": {
@@ -49976,6 +58286,54 @@
         "@radix-ui/react-primitive": "1.0.1"
       }
     },
+    "@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "dependencies": {
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-compose-refs": {
       "version": "1.0.0",
       "requires": {
@@ -49988,6 +58346,14 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "@radix-ui/react-dismissable-layer": {
       "version": "1.0.2",
       "requires": {
@@ -50080,6 +58446,359 @@
         "@radix-ui/react-slot": "1.0.1"
       }
     },
+    "@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-id": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+          "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+          "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
+    "@radix-ui/react-select": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz",
+      "integrity": "sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.4",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.3",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.2",
+        "@radix-ui/react-portal": "1.0.3",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "dependencies": {
+        "@floating-ui/core": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+          "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+          "dev": true,
+          "requires": {
+            "@floating-ui/utils": "^0.1.1"
+          }
+        },
+        "@floating-ui/dom": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
+          "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
+          "dev": true,
+          "requires": {
+            "@floating-ui/core": "^1.4.1",
+            "@floating-ui/utils": "^0.1.1"
+          }
+        },
+        "@floating-ui/react-dom": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz",
+          "integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==",
+          "dev": true,
+          "requires": {
+            "@floating-ui/dom": "^1.3.0"
+          }
+        },
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-arrow": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+          "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.3"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-dismissable-layer": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
+          "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-escape-keydown": "1.0.3"
+          }
+        },
+        "@radix-ui/react-focus-guards": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+          "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-focus-scope": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
+          "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-id": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+          "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
+          "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "^2.0.0",
+            "@radix-ui/react-arrow": "1.0.3",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-layout-effect": "1.0.1",
+            "@radix-ui/react-use-rect": "1.0.1",
+            "@radix-ui/react-use-size": "1.0.1",
+            "@radix-ui/rect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-portal": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+          "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.3"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-escape-keydown": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+          "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+          "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-rect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+          "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/rect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-size": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+          "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/rect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+          "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
     "@radix-ui/react-slot": {
       "version": "1.0.1",
       "requires": {
@@ -50087,6 +58806,146 @@
         "@radix-ui/react-compose-refs": "1.0.0"
       }
     },
+    "@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        }
+      }
+    },
+    "@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "requires": {
@@ -50113,6 +58972,15 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "@radix-ui/react-use-rect": {
       "version": "1.0.0",
       "requires": {
@@ -50127,6 +58995,47 @@
         "@radix-ui/react-use-layout-effect": "1.0.0"
       }
     },
+    "@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "dependencies": {
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/rect": {
       "version": "1.0.0",
       "requires": {
@@ -51374,83 +60283,241 @@
         "@daybrush/utils": "^1.4.0"
       }
     },
-    "@sentry/browser": {
-      "version": "7.37.2",
+    "@sentry-internal/tracing": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.66.0.tgz",
+      "integrity": "sha512-3vCgC2hC3T45pn53yTDVcRpHoJTBxelDPPZVsipAbZnoOVPkj7n6dNfDhj3I3kwWCBPahPkXmE+R4xViR8VqJg==",
       "requires": {
-        "@sentry/core": "7.37.2",
-        "@sentry/replay": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
-        "tslib": "^1.9.3"
+        "@sentry/core": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
+      }
+    },
+    "@sentry/browser": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.66.0.tgz",
+      "integrity": "sha512-rW037rf8jkhyykG38+HUdwkRCKHJEMM5NkCqPIO5zuuxfLKukKdI2rbvgJ93s3/9UfsTuDFcKFL1u43mCn6sDw==",
+      "requires": {
+        "@sentry-internal/tracing": "7.66.0",
+        "@sentry/core": "7.66.0",
+        "@sentry/replay": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
+      }
+    },
+    "@sentry/bundler-plugin-core": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.7.0.tgz",
+      "integrity": "sha512-ZxJG/DsRXJ9BMaKv+butL3TaiHsuuUy1bNkl56/FCbCt1rYuzltEPT2cBuuveieg66ZWtzerSF17QX3v6svtJQ==",
+      "requires": {
+        "@sentry/cli": "^2.20.1",
+        "@sentry/node": "^7.60.0",
+        "@sentry/utils": "^7.60.0",
+        "dotenv": "^16.3.1",
+        "find-up": "5.0.0",
+        "glob": "9.3.2",
+        "magic-string": "0.27.0",
+        "unplugin": "1.0.1"
       },
       "dependencies": {
-        "tslib": {
-          "version": "1.14.1"
+        "acorn": {
+          "version": "8.10.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw=="
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "glob": {
+          "version": "9.3.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-9.3.2.tgz",
+          "integrity": "sha512-BTv/JhKXFEHsErMte/AnfiSv8yYOLLiyH2lTg8vn02O21zWFgHPTfxtgn1QRe7NRgggUhC8hacR2Re94svHqeA==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "minimatch": "^7.4.1",
+            "minipass": "^4.2.4",
+            "path-scurry": "^1.6.1"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "7.4.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+          "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "minipass": {
+          "version": "4.2.8",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+          "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ=="
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "unplugin": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.0.1.tgz",
+          "integrity": "sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==",
+          "requires": {
+            "acorn": "^8.8.1",
+            "chokidar": "^3.5.3",
+            "webpack-sources": "^3.2.3",
+            "webpack-virtual-modules": "^0.5.0"
+          }
         }
       }
     },
-    "@sentry/core": {
-      "version": "7.37.2",
+    "@sentry/cli": {
+      "version": "2.20.6",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.20.6.tgz",
+      "integrity": "sha512-j4OFbDCIo/dB/uXDmXnRqCbku0KquekSFSG0Wb6RKwkGqpKwFMRauKXZJrgL4as3qIfDX8HrjNRv257QYMwdQA==",
       "requires": {
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
-        "tslib": "^1.9.3"
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "which": "^2.0.2"
+      }
+    },
+    "@sentry/core": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.66.0.tgz",
+      "integrity": "sha512-WMAEPN86NeCJ1IT48Lqiz4MS5gdDjBwP4M63XP4msZn9aujSf2Qb6My5uT87AJr9zBtgk8MyJsuHr35F0P3q1w==",
+      "requires": {
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
+      }
+    },
+    "@sentry/node": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.66.0.tgz",
+      "integrity": "sha512-PxqIqLr4Sh5xcDfECiBQ4PuZ7v8yTgLhaRkruWrZPYxQrcJFPkwbFkw/IskzVnhT2VwXUmeWEIlRMQKBJ0t83A==",
+      "requires": {
+        "@sentry-internal/tracing": "7.66.0",
+        "@sentry/core": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
+        "cookie": "^0.4.1",
+        "https-proxy-agent": "^5.0.0",
+        "lru_map": "^0.3.3",
+        "tslib": "^2.4.1 || ^1.9.3"
       },
       "dependencies": {
-        "tslib": {
-          "version": "1.14.1"
+        "cookie": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+          "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
         }
       }
     },
     "@sentry/react": {
-      "version": "7.37.2",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.66.0.tgz",
+      "integrity": "sha512-TC7kCkLoo+Klp9uywdV6tg8DDyn1CrTdndJghO6PoGz6sCa9k+t7K+z4E7MlgDoh3wiZwS2G2zhkT/xVeDRvJA==",
       "requires": {
-        "@sentry/browser": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
+        "@sentry/browser": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0",
         "hoist-non-react-statics": "^3.3.2",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1"
-        }
+        "tslib": "^2.4.1 || ^1.9.3"
       }
     },
     "@sentry/replay": {
-      "version": "7.37.2",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.66.0.tgz",
+      "integrity": "sha512-5Y2SlVTOFTo3uIycv0mRneBakQtLgWkOnsJaC5LB0Ip0TqVKiMCbQ578vvXp+yvRj4LcS1gNd98xTTNojBoQNg==",
       "requires": {
-        "@sentry/core": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2"
+        "@sentry/core": "7.66.0",
+        "@sentry/types": "7.66.0",
+        "@sentry/utils": "7.66.0"
       }
     },
     "@sentry/tracing": {
-      "version": "7.37.2",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.66.0.tgz",
+      "integrity": "sha512-9bnz2EcOwjeMZAuYJnrwcRrImu9c10p7A0iDB8b2HLcp7gpuCkJbJyGoC1xeKD7reVD0BPq3VIbeHSwCcQufoQ==",
       "requires": {
-        "@sentry/core": "7.37.2",
-        "@sentry/types": "7.37.2",
-        "@sentry/utils": "7.37.2",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1"
-        }
+        "@sentry-internal/tracing": "7.66.0"
       }
     },
     "@sentry/types": {
-      "version": "7.37.2"
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.66.0.tgz",
+      "integrity": "sha512-uUMSoSiar6JhuD8p7ON/Ddp4JYvrVd2RpwXJRPH1A4H4Bd4DVt1mKJy1OLG6HdeQv39XyhB1lPZckKJg4tATPw=="
     },
     "@sentry/utils": {
-      "version": "7.37.2",
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.66.0.tgz",
+      "integrity": "sha512-9GYUVgXjK66uXXcLXVMXVzlptqMtq1eJENCuDeezQiEFrNA71KkLDg00wESp+LL+bl3wpVTBApArpbF6UEG5hQ==",
       "requires": {
-        "@sentry/types": "7.37.2",
-        "tslib": "^1.9.3"
+        "@sentry/types": "7.66.0",
+        "tslib": "^2.4.1 || ^1.9.3"
+      }
+    },
+    "@sentry/webpack-plugin": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-2.7.0.tgz",
+      "integrity": "sha512-RN/Z72P2rNPiNsnH2OCHx3rOSDZa/HDLKUUMn2QO//kkTZS/Iu0HCNgCg1Ik5Z6evxtPC0bPhWo9aBksKaXDbg==",
+      "requires": {
+        "@sentry/bundler-plugin-core": "2.7.0",
+        "unplugin": "1.0.1",
+        "uuid": "^9.0.0"
       },
       "dependencies": {
-        "tslib": {
-          "version": "1.14.1"
+        "acorn": {
+          "version": "8.10.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw=="
+        },
+        "unplugin": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.0.1.tgz",
+          "integrity": "sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==",
+          "requires": {
+            "acorn": "^8.8.1",
+            "chokidar": "^3.5.3",
+            "webpack-sources": "^3.2.3",
+            "webpack-virtual-modules": "^0.5.0"
+          }
         }
       }
     },
@@ -51484,6 +60551,2110 @@
         "@sinonjs/commons": "^2.0.0"
       }
     },
+    "@storybook/addon-actions": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.2.1.tgz",
+      "integrity": "sha512-YUiKksgRIUm80eZacj/x14BEYCQY5iel1/Wo6mrTP7bVQrUNiCmnINSrup0DObg7lmIaq00h3ow7gKeYJ+x6zw==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "polished": "^4.2.2",
+        "prop-types": "^15.7.2",
+        "react-inspector": "^6.0.0",
+        "telejson": "^7.0.3",
+        "ts-dedent": "^2.0.0",
+        "uuid": "^9.0.0"
+      }
+    },
+    "@storybook/addon-backgrounds": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.2.1.tgz",
+      "integrity": "sha512-F+/eERFnCIjDaOkCbCS0erre1AbjsHoM0IdLu2sGIBwuroFwKYy/ijadSsJ1zk4eBqZFxdyN4CuMN6EsK1Xm+Q==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/addon-controls": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.2.1.tgz",
+      "integrity": "sha512-ioILEP4wZo6n8ifr1b+o8xCdMVLWyhHqNWoQoBRixxWwpzR4/fHaKo7wBGSkOOWubkhen6wUMUuiJbDdoGyR7g==",
+      "dev": true,
+      "requires": {
+        "@storybook/blocks": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "lodash": "^4.17.21",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/addon-docs": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.2.1.tgz",
+      "integrity": "sha512-QlUM22wK0cE9glMRt1auP3BccjafdRvcsAnaLvDIL12HRaUqMpH6vvNN3A3MXo6XuzbOmDwAov5mXdCenpz02A==",
+      "dev": true,
+      "requires": {
+        "@jest/transform": "^29.3.1",
+        "@mdx-js/react": "^2.1.5",
+        "@storybook/blocks": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/csf-plugin": "7.2.1",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/mdx2-csf": "^1.0.0",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/postinstall": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/react-dom-shim": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "fs-extra": "^11.1.0",
+        "remark-external-links": "^8.0.0",
+        "remark-slug": "^6.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/addon-essentials": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.2.1.tgz",
+      "integrity": "sha512-+ICPYpuljKOoO1oTRfoax4n+3UD2/xAY8qQmAsRNN3xOBNJfdrsrCocrfY1j74xqoX+Zflvp5V481zq+MpP4XQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/addon-actions": "7.2.1",
+        "@storybook/addon-backgrounds": "7.2.1",
+        "@storybook/addon-controls": "7.2.1",
+        "@storybook/addon-docs": "7.2.1",
+        "@storybook/addon-highlight": "7.2.1",
+        "@storybook/addon-measure": "7.2.1",
+        "@storybook/addon-outline": "7.2.1",
+        "@storybook/addon-toolbars": "7.2.1",
+        "@storybook/addon-viewport": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/addon-highlight": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.2.1.tgz",
+      "integrity": "sha512-6nNqpSMImn1mSGmEKF1o+C6o4lWJjduGYnCIO/ouXExaNLMrdcGKUEWrluABLOeDRPcNC9/EkuIEd8IsDnUX4A==",
+      "dev": true,
+      "requires": {
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/preview-api": "7.2.1"
+      }
+    },
+    "@storybook/addon-interactions": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.2.1.tgz",
+      "integrity": "sha512-EuQMvigfEfQedNBojZhVs8x2mG8tL2n2yhtuYUsmHCmwAITcVxgPRV0xCgv676B8uRQvUru+cm9/nBIf2rUg/A==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/instrumenter": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "jest-mock": "^27.0.6",
+        "polished": "^4.2.2",
+        "ts-dedent": "^2.2.0"
+      },
+      "dependencies": {
+        "jest-mock": {
+          "version": "27.5.1",
+          "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+          "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^27.5.1",
+            "@types/node": "*"
+          }
+        }
+      }
+    },
+    "@storybook/addon-links": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.2.1.tgz",
+      "integrity": "sha512-3UQfOZ1+wGlPsHWWjXjPskq6nsDXuB+8QvOcpqy51mK+5Zv/EQe386hWj9VUpjLNMxXarWETa5CXGfoQdFzJTA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/router": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "prop-types": "^15.7.2",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/addon-measure": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.2.1.tgz",
+      "integrity": "sha512-3Rq/B3Iurbo5dZvUN735GHK+9EDm0xw+liK0PdeYvl21/RkXTV+a4aBcWyyeWwwu1S7pdK1B/0WEc9d5Lot8sA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "tiny-invariant": "^1.3.1"
+      }
+    },
+    "@storybook/addon-onboarding": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-1.0.8.tgz",
+      "integrity": "sha512-3WwCocUuTibHWO89uzAbeONEn6x9NkmxA0mOU4rYPhEsMQ4NDNDD1GXcievZmpwt5VviFgw5FRx8+BxPn54YmQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/telemetry": "^7.1.0-alpha.32",
+        "react-confetti": "^6.1.0"
+      }
+    },
+    "@storybook/addon-outline": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.2.1.tgz",
+      "integrity": "sha512-v2dYDhfSzV8Nsi1pmjcLEOHGJLlUnpnSXlQymb338YJEFKP2G5ylHzKAHG16MmzKeZZd3rthTB0246SFCyf0hg==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/addon-toolbars": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.2.1.tgz",
+      "integrity": "sha512-SEDj9f0EgifPK/Eyh703N1tbk7SZ7yAZOnNUK8T0mwdKrMa7jskvYuift8iSnJA2ldp1siqwe1Obq+Oielp9hQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1"
+      }
+    },
+    "@storybook/addon-viewport": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.2.1.tgz",
+      "integrity": "sha512-aHl3rCh4MNByfWVtjBzkwMtz0iHQHFhatWXVt7mQoTQFBbZHpeynKvLfKBprp+2whK9RoDHqBUjqGTZrECdpRA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@storybook/addons": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.2.1.tgz",
+      "integrity": "sha512-I49JOSU5Imv91IWiNQvqGJDZ/llnSxQvttWAh+exhw7+Pq3xfwRmD+fNfyqm1C68/dVGNgwY/w40AP5cQb2PLA==",
+      "dev": true,
+      "requires": {
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1"
+      }
+    },
+    "@storybook/blocks": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.2.1.tgz",
+      "integrity": "sha512-1fPsFC6n9R267KwxGHiL80OuIdMDRC9QuIW4sRF0tF/G/yvucbofySYRQl/Y8LjsMJq8D4NpG5xLsneSxMP5cg==",
+      "dev": true,
+      "requires": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/docs-tools": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/lodash": "^4.14.167",
+        "color-convert": "^2.0.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "markdown-to-jsx": "^7.1.8",
+        "memoizerific": "^1.11.3",
+        "polished": "^4.2.2",
+        "react-colorful": "^5.1.2",
+        "telejson": "^7.0.3",
+        "tocbot": "^4.20.1",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
+    "@storybook/builder-manager": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.2.1.tgz",
+      "integrity": "sha512-X8B1cUfDaTtsJY3xJNwPy6W4UN7LWXkKktJBoNUGESigQGKpAMvUAmABCZIjZD8GcdGMtU8y/fA7YimUpy/ZKQ==",
+      "dev": true,
+      "requires": {
+        "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/manager": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@types/ejs": "^3.1.1",
+        "@types/find-cache-dir": "^3.2.1",
+        "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
+        "browser-assert": "^1.2.1",
+        "ejs": "^3.1.8",
+        "esbuild": "^0.18.0",
+        "esbuild-plugin-alias": "^0.2.1",
+        "express": "^4.17.3",
+        "find-cache-dir": "^3.0.0",
+        "fs-extra": "^11.1.0",
+        "process": "^0.11.10",
+        "util": "^0.12.4"
+      },
+      "dependencies": {
+        "@esbuild/darwin-arm64": {
+          "version": "0.18.20",
+          "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+          "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+          "dev": true,
+          "optional": true
+        },
+        "esbuild": {
+          "version": "0.18.20",
+          "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+          "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+          "dev": true,
+          "requires": {
+            "@esbuild/android-arm": "0.18.20",
+            "@esbuild/android-arm64": "0.18.20",
+            "@esbuild/android-x64": "0.18.20",
+            "@esbuild/darwin-arm64": "0.18.20",
+            "@esbuild/darwin-x64": "0.18.20",
+            "@esbuild/freebsd-arm64": "0.18.20",
+            "@esbuild/freebsd-x64": "0.18.20",
+            "@esbuild/linux-arm": "0.18.20",
+            "@esbuild/linux-arm64": "0.18.20",
+            "@esbuild/linux-ia32": "0.18.20",
+            "@esbuild/linux-loong64": "0.18.20",
+            "@esbuild/linux-mips64el": "0.18.20",
+            "@esbuild/linux-ppc64": "0.18.20",
+            "@esbuild/linux-riscv64": "0.18.20",
+            "@esbuild/linux-s390x": "0.18.20",
+            "@esbuild/linux-x64": "0.18.20",
+            "@esbuild/netbsd-x64": "0.18.20",
+            "@esbuild/openbsd-x64": "0.18.20",
+            "@esbuild/sunos-x64": "0.18.20",
+            "@esbuild/win32-arm64": "0.18.20",
+            "@esbuild/win32-ia32": "0.18.20",
+            "@esbuild/win32-x64": "0.18.20"
+          }
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "util": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+          "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "is-arguments": "^1.0.4",
+            "is-generator-function": "^1.0.7",
+            "is-typed-array": "^1.1.3",
+            "which-typed-array": "^1.1.2"
+          }
+        }
+      }
+    },
+    "@storybook/builder-webpack5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.2.1.tgz",
+      "integrity": "sha512-llN66MbvsGfjgHArVZxfNXxgwhUzQRjpiyqFBfzzP5q83ck16pkqYjffRKRH/Y6CR4VNwXn2XMurPJQqT+aWVA==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.22.9",
+        "@storybook/addons": "7.2.1",
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-api": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/components": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/core-webpack": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/router": "7.2.1",
+        "@storybook/store": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@swc/core": "^1.3.49",
+        "@types/node": "^16.0.0",
+        "@types/semver": "^7.3.4",
+        "babel-loader": "^9.0.0",
+        "babel-plugin-named-exports-order": "^0.0.2",
+        "browser-assert": "^1.2.1",
+        "case-sensitive-paths-webpack-plugin": "^2.4.0",
+        "constants-browserify": "^1.0.0",
+        "css-loader": "^6.7.1",
+        "express": "^4.17.3",
+        "fork-ts-checker-webpack-plugin": "^8.0.0",
+        "fs-extra": "^11.1.0",
+        "html-webpack-plugin": "^5.5.0",
+        "path-browserify": "^1.0.1",
+        "process": "^0.11.10",
+        "semver": "^7.3.7",
+        "style-loader": "^3.3.1",
+        "swc-loader": "^0.2.3",
+        "terser-webpack-plugin": "^5.3.1",
+        "ts-dedent": "^2.0.0",
+        "url": "^0.11.0",
+        "util": "^0.12.4",
+        "util-deprecate": "^1.0.2",
+        "webpack": "5",
+        "webpack-dev-middleware": "^6.1.1",
+        "webpack-hot-middleware": "^2.25.1",
+        "webpack-virtual-modules": "^0.5.0"
+      },
+      "dependencies": {
+        "@swc/core": {
+          "version": "1.3.75",
+          "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.75.tgz",
+          "integrity": "sha512-YLqd5oZVnaOq/OzkjRSsJUQqAfKYiD0fzUyVUPVlNNCoQEfVfSMcXH80hLmYe9aDH0T/a7qEMjWyIr/0kWqy1A==",
+          "dev": true,
+          "requires": {
+            "@swc/core-darwin-arm64": "1.3.75",
+            "@swc/core-darwin-x64": "1.3.75",
+            "@swc/core-linux-arm-gnueabihf": "1.3.75",
+            "@swc/core-linux-arm64-gnu": "1.3.75",
+            "@swc/core-linux-arm64-musl": "1.3.75",
+            "@swc/core-linux-x64-gnu": "1.3.75",
+            "@swc/core-linux-x64-musl": "1.3.75",
+            "@swc/core-win32-arm64-msvc": "1.3.75",
+            "@swc/core-win32-ia32-msvc": "1.3.75",
+            "@swc/core-win32-x64-msvc": "1.3.75"
+          }
+        },
+        "@swc/helpers": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+          "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "tslib": "^2.4.0"
+          }
+        },
+        "@types/node": {
+          "version": "16.18.40",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+          "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "swc-loader": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz",
+          "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==",
+          "dev": true,
+          "requires": {}
+        },
+        "util": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+          "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "is-arguments": "^1.0.4",
+            "is-generator-function": "^1.0.7",
+            "is-typed-array": "^1.1.3",
+            "which-typed-array": "^1.1.2"
+          }
+        },
+        "webpack-dev-middleware": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.1.tgz",
+          "integrity": "sha512-y51HrHaFeeWir0YO4f0g+9GwZawuigzcAdRNon6jErXy/SqV/+O6eaVAzDqE6t3e3NpGeR5CS+cCDaTC+V3yEQ==",
+          "dev": true,
+          "requires": {
+            "colorette": "^2.0.10",
+            "memfs": "^3.4.12",
+            "mime-types": "^2.1.31",
+            "range-parser": "^1.2.1",
+            "schema-utils": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/channels": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.2.1.tgz",
+      "integrity": "sha512-3ZogzjwlFG+oarwnI7TTvWvHVOUtJbjrgZkM5QuLMlxNzIR1XuBY8f01yf4K8+VpdNy9DY+7Q/j6tBThfwYvpA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.0.3",
+        "tiny-invariant": "^1.3.1"
+      }
+    },
+    "@storybook/cli": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.2.1.tgz",
+      "integrity": "sha512-rPZDUvM0FRHZU4Wcm0ASOr/0xZq/6uySulqpLgoSkeZIC0xLXh/bI6YoDrD9UJV6GIRiqHMWMdxWd1e+TH8XHg==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.22.9",
+        "@babel/preset-env": "^7.22.9",
+        "@babel/types": "^7.22.5",
+        "@ndelangen/get-tarball": "^3.0.7",
+        "@storybook/codemod": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-server": "7.2.1",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/telemetry": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/semver": "^7.3.4",
+        "@yarnpkg/fslib": "2.10.3",
+        "@yarnpkg/libzip": "2.3.0",
+        "chalk": "^4.1.0",
+        "commander": "^6.2.1",
+        "cross-spawn": "^7.0.3",
+        "detect-indent": "^6.1.0",
+        "envinfo": "^7.7.3",
+        "execa": "^5.0.0",
+        "express": "^4.17.3",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "get-npm-tarball-url": "^2.0.3",
+        "get-port": "^5.1.1",
+        "giget": "^1.0.0",
+        "globby": "^11.0.2",
+        "jscodeshift": "^0.14.0",
+        "leven": "^3.1.0",
+        "ora": "^5.4.1",
+        "prettier": "^2.8.0",
+        "prompts": "^2.4.0",
+        "puppeteer-core": "^2.1.1",
+        "read-pkg-up": "^7.0.1",
+        "semver": "^7.3.7",
+        "simple-update-notifier": "^2.0.0",
+        "strip-json-comments": "^3.0.1",
+        "tempy": "^1.0.1",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "ast-types": {
+          "version": "0.15.2",
+          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.15.2.tgz",
+          "integrity": "sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jscodeshift": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.14.0.tgz",
+          "integrity": "sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==",
+          "dev": true,
+          "requires": {
+            "@babel/core": "^7.13.16",
+            "@babel/parser": "^7.13.16",
+            "@babel/plugin-proposal-class-properties": "^7.13.0",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+            "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+            "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+            "@babel/preset-flow": "^7.13.13",
+            "@babel/preset-typescript": "^7.13.0",
+            "@babel/register": "^7.13.16",
+            "babel-core": "^7.0.0-bridge.0",
+            "chalk": "^4.1.2",
+            "flow-parser": "0.*",
+            "graceful-fs": "^4.2.4",
+            "micromatch": "^4.0.4",
+            "neo-async": "^2.5.0",
+            "node-dir": "^0.1.17",
+            "recast": "^0.21.0",
+            "temp": "^0.8.4",
+            "write-file-atomic": "^2.3.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "recast": {
+          "version": "0.21.5",
+          "resolved": "https://registry.npmjs.org/recast/-/recast-0.21.5.tgz",
+          "integrity": "sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==",
+          "dev": true,
+          "requires": {
+            "ast-types": "0.15.2",
+            "esprima": "~4.0.0",
+            "source-map": "~0.6.1",
+            "tslib": "^2.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "temp": {
+          "version": "0.8.4",
+          "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.4.tgz",
+          "integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==",
+          "dev": true,
+          "requires": {
+            "rimraf": "~2.6.2"
+          }
+        },
+        "write-file-atomic": {
+          "version": "2.4.3",
+          "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "imurmurhash": "^0.1.4",
+            "signal-exit": "^3.0.2"
+          }
+        }
+      }
+    },
+    "@storybook/client-api": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-7.2.1.tgz",
+      "integrity": "sha512-VeRUxc4ufSaGAQPe/LM4aucpEx2UHHw9c+tzolV3hzGIp6pmIAS8XI6thL2IccYmsNMS2zz9oDESYP9cNlTsyA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1"
+      }
+    },
+    "@storybook/client-logger": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.2.1.tgz",
+      "integrity": "sha512-Lyht/lJg2S65CXRy9rXAZXP/Mgye7jbi/aqQL8z9VRMGChbL+k/3pSZnXTTrD1OVSpCEr4UWA+9bStzT4VjtYA==",
+      "dev": true,
+      "requires": {
+        "@storybook/global": "^5.0.0"
+      }
+    },
+    "@storybook/codemod": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.2.1.tgz",
+      "integrity": "sha512-R19fdPfslupxfbtyuGcRa2m1nCug2Zm8bS0GhnPtUl7eGBA4glcf4KKwP52pEqgJAsarfiL2cLSnN5wqQGQ/Sw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.22.9",
+        "@babel/preset-env": "^7.22.9",
+        "@babel/types": "^7.22.5",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/cross-spawn": "^6.0.2",
+        "cross-spawn": "^7.0.3",
+        "globby": "^11.0.2",
+        "jscodeshift": "^0.14.0",
+        "lodash": "^4.17.21",
+        "prettier": "^2.8.0",
+        "recast": "^0.23.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "ast-types": {
+          "version": "0.16.1",
+          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+          "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jscodeshift": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.14.0.tgz",
+          "integrity": "sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==",
+          "dev": true,
+          "requires": {
+            "@babel/core": "^7.13.16",
+            "@babel/parser": "^7.13.16",
+            "@babel/plugin-proposal-class-properties": "^7.13.0",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+            "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+            "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+            "@babel/preset-flow": "^7.13.13",
+            "@babel/preset-typescript": "^7.13.0",
+            "@babel/register": "^7.13.16",
+            "babel-core": "^7.0.0-bridge.0",
+            "chalk": "^4.1.2",
+            "flow-parser": "0.*",
+            "graceful-fs": "^4.2.4",
+            "micromatch": "^4.0.4",
+            "neo-async": "^2.5.0",
+            "node-dir": "^0.1.17",
+            "recast": "^0.21.0",
+            "temp": "^0.8.4",
+            "write-file-atomic": "^2.3.0"
+          },
+          "dependencies": {
+            "ast-types": {
+              "version": "0.15.2",
+              "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.15.2.tgz",
+              "integrity": "sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==",
+              "dev": true,
+              "requires": {
+                "tslib": "^2.0.1"
+              }
+            },
+            "recast": {
+              "version": "0.21.5",
+              "resolved": "https://registry.npmjs.org/recast/-/recast-0.21.5.tgz",
+              "integrity": "sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==",
+              "dev": true,
+              "requires": {
+                "ast-types": "0.15.2",
+                "esprima": "~4.0.0",
+                "source-map": "~0.6.1",
+                "tslib": "^2.0.1"
+              }
+            }
+          }
+        },
+        "recast": {
+          "version": "0.23.3",
+          "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.3.tgz",
+          "integrity": "sha512-HbCVFh2ANP6a09nzD4lx7XthsxMOJWKX5pIcUwtLrmeEIl3I0DwjCoVXDE0Aobk+7k/mS3H50FK4iuYArpcT6Q==",
+          "dev": true,
+          "requires": {
+            "assert": "^2.0.0",
+            "ast-types": "^0.16.1",
+            "esprima": "~4.0.0",
+            "source-map": "~0.6.1",
+            "tslib": "^2.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "temp": {
+          "version": "0.8.4",
+          "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.4.tgz",
+          "integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==",
+          "dev": true,
+          "requires": {
+            "rimraf": "~2.6.2"
+          }
+        },
+        "write-file-atomic": {
+          "version": "2.4.3",
+          "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "imurmurhash": "^0.1.4",
+            "signal-exit": "^3.0.2"
+          }
+        }
+      }
+    },
+    "@storybook/components": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.2.1.tgz",
+      "integrity": "sha512-7JuMT2yK9FGPu9hFCo38tC3FDyr/hJ3CQwU6dSR6E5rT9E658dq31Xl3y/fM5OMzl8MX8Off7TWiybHSuwYJTA==",
+      "dev": true,
+      "requires": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.1.0",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "@storybook/core-client": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.2.1.tgz",
+      "integrity": "sha512-ujJdkaY6LXGCA8pqFBYTNMySmawm3GPcORYevkmM2edSbNKlu904+HvheRirajluzV7ropzGxUBZR9TMwgmDGg==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1"
+      }
+    },
+    "@storybook/core-common": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.2.1.tgz",
+      "integrity": "sha512-g1MQ04lgL16Ct89tPj6RSw72yd+a+ZJ4ceH3Ev+SmnU8efBLPmr6+G5Bx7+rY1W2c6NdpFgtSidjgOGqQ8gppw==",
+      "dev": true,
+      "requires": {
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/find-cache-dir": "^3.2.1",
+        "@types/node": "^16.0.0",
+        "@types/node-fetch": "^2.6.4",
+        "@types/pretty-hrtime": "^1.0.0",
+        "chalk": "^4.1.0",
+        "esbuild": "^0.18.0",
+        "esbuild-register": "^3.4.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "dependencies": {
+        "@esbuild/darwin-arm64": {
+          "version": "0.18.20",
+          "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+          "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+          "dev": true,
+          "optional": true
+        },
+        "@types/node": {
+          "version": "16.18.40",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+          "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "esbuild": {
+          "version": "0.18.20",
+          "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+          "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+          "dev": true,
+          "requires": {
+            "@esbuild/android-arm": "0.18.20",
+            "@esbuild/android-arm64": "0.18.20",
+            "@esbuild/android-x64": "0.18.20",
+            "@esbuild/darwin-arm64": "0.18.20",
+            "@esbuild/darwin-x64": "0.18.20",
+            "@esbuild/freebsd-arm64": "0.18.20",
+            "@esbuild/freebsd-x64": "0.18.20",
+            "@esbuild/linux-arm": "0.18.20",
+            "@esbuild/linux-arm64": "0.18.20",
+            "@esbuild/linux-ia32": "0.18.20",
+            "@esbuild/linux-loong64": "0.18.20",
+            "@esbuild/linux-mips64el": "0.18.20",
+            "@esbuild/linux-ppc64": "0.18.20",
+            "@esbuild/linux-riscv64": "0.18.20",
+            "@esbuild/linux-s390x": "0.18.20",
+            "@esbuild/linux-x64": "0.18.20",
+            "@esbuild/netbsd-x64": "0.18.20",
+            "@esbuild/openbsd-x64": "0.18.20",
+            "@esbuild/sunos-x64": "0.18.20",
+            "@esbuild/win32-arm64": "0.18.20",
+            "@esbuild/win32-ia32": "0.18.20",
+            "@esbuild/win32-x64": "0.18.20"
+          }
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "foreground-child": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+          "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "signal-exit": "^4.0.1"
+          }
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "glob": {
+          "version": "10.3.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.3.tgz",
+          "integrity": "sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==",
+          "dev": true,
+          "requires": {
+            "foreground-child": "^3.1.0",
+            "jackspeak": "^2.0.3",
+            "minimatch": "^9.0.1",
+            "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+            "path-scurry": "^1.10.1"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "minipass": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.2.tgz",
+          "integrity": "sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==",
+          "dev": true
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "pkg-dir": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+          "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+          "dev": true,
+          "requires": {
+            "find-up": "^5.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+          "dev": true
+        },
+        "signal-exit": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/core-events": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.2.1.tgz",
+      "integrity": "sha512-EUXYb3gyQ2EzpDAWkgfoDl1EPabj3OE6+zntsD/gwvzQU85BTocs10ksnRyS55bfrQpYbf+Z+gw2CZboyagLgg==",
+      "dev": true
+    },
+    "@storybook/core-server": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.2.1.tgz",
+      "integrity": "sha512-jhS918Frl5j6LSB3x7qzHHuRL5e3RXqCkBQe5KtR2zXMgYlalSyGcX5uT8byWFznUsQIjGmUrf6ZIoKdRdslWg==",
+      "dev": true,
+      "requires": {
+        "@aw-web-design/x-default-browser": "1.4.126",
+        "@discoveryjs/json-ext": "^0.5.3",
+        "@storybook/builder-manager": "7.2.1",
+        "@storybook/channels": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/csf-tools": "7.2.1",
+        "@storybook/docs-mdx": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/telemetry": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/detect-port": "^1.3.0",
+        "@types/node": "^16.0.0",
+        "@types/pretty-hrtime": "^1.0.0",
+        "@types/semver": "^7.3.4",
+        "better-opn": "^3.0.2",
+        "chalk": "^4.1.0",
+        "cli-table3": "^0.6.1",
+        "compression": "^1.7.4",
+        "detect-port": "^1.3.0",
+        "express": "^4.17.3",
+        "fs-extra": "^11.1.0",
+        "globby": "^11.0.2",
+        "ip": "^2.0.0",
+        "lodash": "^4.17.21",
+        "open": "^8.4.0",
+        "pretty-hrtime": "^1.0.3",
+        "prompts": "^2.4.0",
+        "read-pkg-up": "^7.0.1",
+        "semver": "^7.3.7",
+        "serve-favicon": "^2.5.0",
+        "telejson": "^7.0.3",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0",
+        "util": "^0.12.4",
+        "util-deprecate": "^1.0.2",
+        "watchpack": "^2.2.0",
+        "ws": "^8.2.3"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "16.18.40",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+          "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "util": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+          "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "is-arguments": "^1.0.4",
+            "is-generator-function": "^1.0.7",
+            "is-typed-array": "^1.1.3",
+            "which-typed-array": "^1.1.2"
+          }
+        },
+        "ws": {
+          "version": "8.13.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+          "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
+    "@storybook/core-webpack": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.2.1.tgz",
+      "integrity": "sha512-8Oc6HJFphDVid8DRKSlFc3wK64zuCAbbRFRI9Flf6he4wPncaDL1tXfCJjCbeujJQHLrgG7BjXYNHwIUiB2wRA==",
+      "dev": true,
+      "requires": {
+        "@storybook/core-common": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/node": "^16.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "16.18.40",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+          "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+          "dev": true
+        }
+      }
+    },
+    "@storybook/csf": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.1.tgz",
+      "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^2.19.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+          "dev": true
+        }
+      }
+    },
+    "@storybook/csf-plugin": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.2.1.tgz",
+      "integrity": "sha512-qhxkKOsUjCS/hqsDgwgoM81ZXAXfTNrJJPHCs4Wa1dHoUVUn7rro7VANIO0GVNrRDnha3YR4fEmnD8kklLKmCQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/csf-tools": "7.2.1",
+        "unplugin": "^1.3.1"
+      }
+    },
+    "@storybook/csf-tools": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.2.1.tgz",
+      "integrity": "sha512-QqZOBd6lmhPoIBLutyYYJ3wBwEZF+fUjiL8vhw3lgq+Mrer14lmKrImKDSjd1PsqVbbGQEJZ4TAJHZc3vdQs0w==",
+      "dev": true,
+      "requires": {
+        "@babel/generator": "^7.22.9",
+        "@babel/parser": "^7.22.7",
+        "@babel/traverse": "^7.22.8",
+        "@babel/types": "^7.22.5",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/types": "7.2.1",
+        "fs-extra": "^11.1.0",
+        "prettier": "^2.8.0",
+        "recast": "^0.23.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "dependencies": {
+        "ast-types": {
+          "version": "0.16.1",
+          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+          "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "recast": {
+          "version": "0.23.3",
+          "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.3.tgz",
+          "integrity": "sha512-HbCVFh2ANP6a09nzD4lx7XthsxMOJWKX5pIcUwtLrmeEIl3I0DwjCoVXDE0Aobk+7k/mS3H50FK4iuYArpcT6Q==",
+          "dev": true,
+          "requires": {
+            "assert": "^2.0.0",
+            "ast-types": "^0.16.1",
+            "esprima": "~4.0.0",
+            "source-map": "~0.6.1",
+            "tslib": "^2.0.1"
+          }
+        }
+      }
+    },
+    "@storybook/docs-mdx": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz",
+      "integrity": "sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==",
+      "dev": true
+    },
+    "@storybook/docs-tools": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.2.1.tgz",
+      "integrity": "sha512-snRdkqdaxAwlalIEtuElySzC68Lo/0KfrGRR6xSDxWIhjAPNqsRLPHEXlZrJ43Tn/V2oxCRU8eb21pP5/58krw==",
+      "dev": true,
+      "requires": {
+        "@storybook/core-common": "7.2.1",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/doctrine": "^0.0.3",
+        "doctrine": "^3.0.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "@storybook/global": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+      "dev": true
+    },
+    "@storybook/icons": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.1.6.tgz",
+      "integrity": "sha512-co5gDCYPojRAc5lRMnWxbjrR1V37/rTmAo9Vok4a1hDpHZIwkGTWesdzvYivSQXYFxZTpxdM1b5K3W87brnahw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@storybook/instrumenter": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.2.1.tgz",
+      "integrity": "sha512-eA1xke6JWhqDNhrn/qK3KxeE9yXySyzK1gUhu1jtIt8npenebZsuG5Uu/IzJkSB8se1F419Pmbcpeq0V8GA1lQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/preview-api": "7.2.1"
+      }
+    },
+    "@storybook/manager": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.2.1.tgz",
+      "integrity": "sha512-wD2tRH8gLk2VNFMVcWmGZTXGTMNXdM3rnXiyKtmSVwFzacmOtLzEsCOprwI6WJpZv3v1vHY0s6idN9iadTVMhw==",
+      "dev": true
+    },
+    "@storybook/manager-api": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.2.1.tgz",
+      "integrity": "sha512-jRuYTrsNKq+g1u9kbQRvBsRKVITOdiNu9c633MeCH73oBVo8WNnZF/tW/ER86oTnru0H7EmRdgz3v9ft/wS2GQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.2.1",
+        "@storybook/theming": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "semver": "^7.3.7",
+        "store2": "^2.14.2",
+        "telejson": "^7.0.3",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/mdx2-csf": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
+      "integrity": "sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==",
+      "dev": true
+    },
+    "@storybook/node-logger": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.2.1.tgz",
+      "integrity": "sha512-Ywjqi8iAc26RYbZfmpzvzdKbaQZaD1T/IRNfVGReM/jTXnX0VSdsa6P/pfurbyHcQw//D3TSdqRHOMtbp0nIJg==",
+      "dev": true
+    },
+    "@storybook/postinstall": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.2.1.tgz",
+      "integrity": "sha512-xOzX1MygQ+9xpku6FuODhXvfv/CcKlQPOGpZk8ejE/04Eow0JHluGI1cxdnpqGcCBygkw7DP+xrtQCv75c7Gjg==",
+      "dev": true
+    },
+    "@storybook/preset-react-webpack": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.2.1.tgz",
+      "integrity": "sha512-PhWql1hxpUxy+SJ9jLrt+Db2yc0Qgo8ivRWU0eqZJIrXnZXtUQiGByMqYWdr0MzNbBEJIqrxO4RCpowKmDh/Xw==",
+      "dev": true,
+      "requires": {
+        "@babel/preset-flow": "^7.22.5",
+        "@babel/preset-react": "^7.22.5",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+        "@storybook/core-webpack": "7.2.1",
+        "@storybook/docs-tools": "7.2.1",
+        "@storybook/node-logger": "7.2.1",
+        "@storybook/react": "7.2.1",
+        "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
+        "@types/node": "^16.0.0",
+        "@types/semver": "^7.3.4",
+        "babel-plugin-add-react-displayname": "^0.0.5",
+        "babel-plugin-react-docgen": "^4.2.1",
+        "fs-extra": "^11.1.0",
+        "react-refresh": "^0.11.0",
+        "semver": "^7.3.7",
+        "webpack": "5"
+      },
+      "dependencies": {
+        "@pmmmwh/react-refresh-webpack-plugin": {
+          "version": "0.5.10",
+          "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz",
+          "integrity": "sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==",
+          "dev": true,
+          "requires": {
+            "ansi-html-community": "^0.0.8",
+            "common-path-prefix": "^3.0.0",
+            "core-js-pure": "^3.23.3",
+            "error-stack-parser": "^2.0.6",
+            "find-up": "^5.0.0",
+            "html-entities": "^2.1.0",
+            "loader-utils": "^2.0.4",
+            "schema-utils": "^3.0.0",
+            "source-map": "^0.7.3"
+          }
+        },
+        "@types/node": {
+          "version": "16.18.40",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+          "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "react-refresh": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
+          "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+          "dev": true
+        }
+      }
+    },
+    "@storybook/preview": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.2.1.tgz",
+      "integrity": "sha512-5mLNhuaePx3Zv8mO93Y/M+U7ppqV5bS13rPfMHcVmSb7mQ/3hN7zkF6NhPOX6LoBUxetHiAJh5dA5McNE3adLQ==",
+      "dev": true
+    },
+    "@storybook/preview-api": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.2.1.tgz",
+      "integrity": "sha512-WKecuOdeh9+og6bPR9KoQf/JCeSRPCcfZv9uNfJzAp3IiTnS3UpfCz+HBZzZJQrisgbd7OulNY400HQUmxY2Ag==",
+      "dev": true,
+      "requires": {
+        "@storybook/channels": "7.2.1",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-events": "7.2.1",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.2.1",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "@storybook/react": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.2.1.tgz",
+      "integrity": "sha512-WRAVrSQKAtCoypUrrIXWGOvyGRVkrh73hSkKVC0gEqxWDmjZIZJ1uc3VrUd/yHJdLsqNphcAyU8Ahu52yozubg==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-client": "7.2.1",
+        "@storybook/docs-tools": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/preview-api": "7.2.1",
+        "@storybook/react-dom-shim": "7.2.1",
+        "@storybook/types": "7.2.1",
+        "@types/escodegen": "^0.0.6",
+        "@types/estree": "^0.0.51",
+        "@types/node": "^16.0.0",
+        "acorn": "^7.4.1",
+        "acorn-jsx": "^5.3.1",
+        "acorn-walk": "^7.2.0",
+        "escodegen": "^2.0.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "react-element-to-jsx-string": "^15.0.0",
+        "ts-dedent": "^2.0.0",
+        "type-fest": "~2.19",
+        "util-deprecate": "^1.0.2"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "16.18.40",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+          "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+          "dev": true
+        }
+      }
+    },
+    "@storybook/react-docgen-typescript-plugin": {
+      "version": "1.0.6--canary.9.0c3f3b7.0",
+      "resolved": "https://registry.npmjs.org/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.6--canary.9.0c3f3b7.0.tgz",
+      "integrity": "sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "endent": "^2.0.1",
+        "find-cache-dir": "^3.3.1",
+        "flat-cache": "^3.0.4",
+        "micromatch": "^4.0.2",
+        "react-docgen-typescript": "^2.2.2",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@storybook/react-dom-shim": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.2.1.tgz",
+      "integrity": "sha512-QzQQN2nZkG7c0Mg5HvhfQuH10HjAJEnA8vDlENIFMj3XqtUAq4HE2n73gEcvdFJMXL4G16N58+TgR1e2cFdRKw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@storybook/react-webpack5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react-webpack5/-/react-webpack5-7.2.1.tgz",
+      "integrity": "sha512-hkJ+PzVDXTuA4v/wZF6YQTEuUswiZfYPdKl/c5rJp8XvK6WhcMkSTlwzZ2+vnk4s0vbVdlBZLG78LFUmGZy4jQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/builder-webpack5": "7.2.1",
+        "@storybook/preset-react-webpack": "7.2.1",
+        "@storybook/react": "7.2.1",
+        "@types/node": "^16.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "16.18.40",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.40.tgz",
+          "integrity": "sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==",
+          "dev": true
+        }
+      }
+    },
+    "@storybook/router": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.2.1.tgz",
+      "integrity": "sha512-9Cn5boUS+7yhrKlSy1kt7ruNs/znk3555kclBD6+uuhH/dD84feGeiGYE4GUuLmcKrDFtNF185/Gr1huJ556tA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0"
+      }
+    },
+    "@storybook/store": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-7.2.1.tgz",
+      "integrity": "sha512-0EBD3GMCZpVk2y/Yzk7koH91Ny+kyq+krWaGFgZQ8JrGouuw1JAszxzgO1VVgnRio88UKeK3UALx9hGSHqDXeg==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/preview-api": "7.2.1"
+      }
+    },
+    "@storybook/telemetry": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.2.1.tgz",
+      "integrity": "sha512-ewYvX+ZzuTCl9a8DUbKkSPD6GhxUStl/+Eni1faE1OEnyduwbJFlse0EBpOa4YZTcghlngrHV3pulEW8qOgNFA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/core-common": "7.2.1",
+        "@storybook/csf-tools": "7.2.1",
+        "chalk": "^4.1.0",
+        "detect-package-manager": "^2.0.1",
+        "fetch-retry": "^5.0.2",
+        "fs-extra": "^11.1.0",
+        "read-pkg-up": "^7.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/testing-library": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.2.0.tgz",
+      "integrity": "sha512-Ff6jNnrsosmDshgCf0Eb5Cz7IA34p/1Ps5N3Kp3598kfXpBSccSkQQvVFUXC3kIHw/isIXWPqntZuKqnWUz7Gw==",
+      "dev": true,
+      "requires": {
+        "@testing-library/dom": "^9.0.0",
+        "@testing-library/user-event": "^14.0.0",
+        "ts-dedent": "^2.2.0"
+      },
+      "dependencies": {
+        "@testing-library/dom": {
+          "version": "9.3.1",
+          "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
+          "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/runtime": "^7.12.5",
+            "@types/aria-query": "^5.0.1",
+            "aria-query": "5.1.3",
+            "chalk": "^4.1.0",
+            "dom-accessibility-api": "^0.5.9",
+            "lz-string": "^1.5.0",
+            "pretty-format": "^27.0.2"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/theming": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.2.1.tgz",
+      "integrity": "sha512-cfnNCLvKmzxjmoYKfLl7Q64gSTouLvd23CtvBAOlWcRYnMJ9v4/7A2tK3xQyVRlJYh9OuXiHFLL8AXbN58Hkzw==",
+      "dev": true,
+      "requires": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.2.1",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      }
+    },
+    "@storybook/types": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.2.1.tgz",
+      "integrity": "sha512-YwlIY1uyxfJjijbB5x1d1QOKaUUDJnMX8BSb8oGqU4cyT76X/Is4CbGs+vccFsJo0tZu1GfuahYXl0EDT0nnSQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/channels": "7.2.1",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "6.5.1",
       "dev": true,
@@ -51596,6 +62767,76 @@
         "@svgr/plugin-svgo": "^6.5.1"
       }
     },
+    "@swc/core-darwin-arm64": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.75.tgz",
+      "integrity": "sha512-anDnx9L465lGbjB2mvcV54NGHW6illr0IDvVV7JmkabYUVneaRdQvTr0tbHv3xjHnjrK1wuwVOHKV0LcQF2tnQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-darwin-x64": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.75.tgz",
+      "integrity": "sha512-dIHDfrLmeZfr2xwi1whO7AmzdI3HdamgvxthaL+S8L1x8TeczAZEvsmZTjy3s8p3Va4rbGXcb3+uBhmfkqCbfw==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-arm-gnueabihf": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.75.tgz",
+      "integrity": "sha512-qeJmvMGrjC6xt+G0R4kVqqxvlhxJx7tTzhcEoWgLJnfvGZiF6SJdsef4OSM7HuReXrlBoEtJbfGPrLJtbV+C0w==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-arm64-gnu": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.75.tgz",
+      "integrity": "sha512-sqA9JqHEJBF4AdNuwo5zRqq0HC3l31SPsG9zpRa4nRzG5daBBJ80H7fi6PZQud1rfNNq+Q08gjYrdrxwHstvjw==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-arm64-musl": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.75.tgz",
+      "integrity": "sha512-95rQT5xTAL3eKhMJbJbLsZHHP9EUlh1rcrFoLf0gUApoVF8g94QjZ9hYZiI72mMP5WPjgTEXQVnVB9O2GxeaLw==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-x64-gnu": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.75.tgz",
+      "integrity": "sha512-If7UpAhnPduMmtC+TSgPpZ1UXZfp2hIpjUFxpeCmHHYLS6Fn/2GZC5hpEiu+wvFJF0hzPh93eNAHa9gUxGUG+w==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-linux-x64-musl": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.75.tgz",
+      "integrity": "sha512-HOhxX0YNHTElCZqIviquka3CGYTN8rSQ6BdFfSk/K0O+ZEHx3qGte0qr+gGLPF/237GxreUkp3OMaWKuURtuCg==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-win32-arm64-msvc": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.75.tgz",
+      "integrity": "sha512-7QPI+mvBXAerVfWahrgBNe+g7fK8PuetxFnZSEmXUcDXvWcdJXAndD7GjAJzbDyjQpLKHbsDKMiHYvfNxZoN/A==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-win32-ia32-msvc": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.75.tgz",
+      "integrity": "sha512-EfABCy4Wlq7O5ShWsm32FgDkSjyeyj/SQ4wnUIvWpkXhgfT1iNXky7KRU1HtX+SmnVk/k/NnabVZpIklYbjtZA==",
+      "dev": true,
+      "optional": true
+    },
+    "@swc/core-win32-x64-msvc": {
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.75.tgz",
+      "integrity": "sha512-cTvP0pOD9C3pSp1cwtt85ZsrUkQz8RZfSPhM+jCGxKxmoowDCnInoOQ4Ica/ehyuUnQ4/IstSdYtYpO5yzPDJg==",
+      "dev": true,
+      "optional": true
+    },
     "@swc/helpers": {
       "version": "0.4.14",
       "requires": {
@@ -65889,9 +77130,47 @@
         "@types/node": "*"
       }
     },
+    "@types/cross-spawn": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@types/cross-spawn/-/cross-spawn-6.0.2.tgz",
+      "integrity": "sha512-KuwNhp3eza+Rhu8IFI5HUXRP0LIhqH5cAjubUvGXXthh4YYBuP2ntwEX+Cz8GJoZUHlKo247wPWOfA9LYEq4cw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/detect-port": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.3.tgz",
+      "integrity": "sha512-bV/jQlAJ/nPY3XqSatkGpu+nGzou+uSwrH1cROhn+jBFg47yaNH+blW4C7p9KhopC7QxCv/6M86s37k8dMk0Yg==",
+      "dev": true
+    },
+    "@types/doctrine": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.3.tgz",
+      "integrity": "sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==",
+      "dev": true
+    },
+    "@types/ejs": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.2.tgz",
+      "integrity": "sha512-ZmiaE3wglXVWBM9fyVC17aGPkLo/UgaOjEiI2FXQfyczrCefORPxIe+2dVmnmk3zkVIbizjrlQzmPGhSYGXG5g==",
+      "dev": true
+    },
+    "@types/emscripten": {
+      "version": "1.39.7",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.7.tgz",
+      "integrity": "sha512-tLqYV94vuqDrXh515F/FOGtBcRMTPGvVV1LzLbtYDcQmmhtpf/gLYf+hikBbQk8MzOHNz37wpFfJbYAuSn8HqA==",
+      "dev": true
+    },
+    "@types/escodegen": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/escodegen/-/escodegen-0.0.6.tgz",
+      "integrity": "sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "8.4.10",
-      "devOptional": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -65899,15 +77178,13 @@
     },
     "@types/eslint-scope": {
       "version": "3.7.4",
-      "devOptional": true,
       "requires": {
         "@types/eslint": "*",
         "@types/estree": "*"
       }
     },
     "@types/estree": {
-      "version": "0.0.51",
-      "devOptional": true
+      "version": "0.0.51"
     },
     "@types/express": {
       "version": "4.17.16",
@@ -65928,6 +77205,12 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/find-cache-dir": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
+      "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==",
+      "dev": true
+    },
     "@types/google.maps": {
       "version": "3.50.5"
     },
@@ -65999,8 +77282,7 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.11",
-      "devOptional": true
+      "version": "7.0.11"
     },
     "@types/json5": {
       "version": "0.0.29",
@@ -66009,10 +77291,22 @@
     "@types/lodash": {
       "version": "4.14.191"
     },
+    "@types/mdx": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.6.tgz",
+      "integrity": "sha512-sVcwEG10aFU2KcM7cIA0M410UPv/DesOPyG8zMVk0QUDexHA3lYmGucpEpZ2dtWWhi2ip3CG+5g/iH0PwoW4Fw==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "3.0.1",
       "dev": true
     },
+    "@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
     "@types/minimist": {
       "version": "1.2.2",
       "dev": true
@@ -66020,6 +77314,29 @@
     "@types/node": {
       "version": "18.11.18"
     },
+    "@types/node-fetch": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.4.tgz",
+      "integrity": "sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+          "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "@types/normalize-package-data": {
       "version": "2.4.1",
       "dev": true
@@ -66031,6 +77348,12 @@
       "version": "2.7.2",
       "dev": true
     },
+    "@types/pretty-hrtime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz",
+      "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.5"
     },
@@ -66056,7 +77379,7 @@
     },
     "@types/react-dom": {
       "version": "18.0.10",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/react": "*"
       }
@@ -66126,6 +77449,12 @@
         "@types/jest": "*"
       }
     },
+    "@types/unist": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.7.tgz",
+      "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==",
+      "dev": true
+    },
     "@types/warning": {
       "version": "3.0.0"
     },
@@ -66138,7 +77467,6 @@
     },
     "@types/yargs": {
       "version": "16.0.5",
-      "peer": true,
       "requires": {
         "@types/yargs-parser": "*"
       }
@@ -66208,27 +77536,22 @@
     },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.1",
-      "devOptional": true
+      "version": "1.11.1"
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.11.1",
-      "devOptional": true
+      "version": "1.11.1"
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.11.1",
-      "devOptional": true
+      "version": "1.11.1"
     },
     "@webassemblyjs/helper-numbers": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -66236,12 +77559,10 @@
       }
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.1",
-      "devOptional": true
+      "version": "1.11.1"
     },
     "@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -66251,25 +77572,21 @@
     },
     "@webassemblyjs/ieee754": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.11.1",
-      "devOptional": true
+      "version": "1.11.1"
     },
     "@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -66283,7 +77600,6 @@
     },
     "@webassemblyjs/wasm-gen": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -66294,7 +77610,6 @@
     },
     "@webassemblyjs/wasm-opt": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -66304,7 +77619,6 @@
     },
     "@webassemblyjs/wasm-parser": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -66316,7 +77630,6 @@
     },
     "@webassemblyjs/wast-printer": {
       "version": "1.11.1",
-      "devOptional": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -66338,12 +77651,10 @@
       "requires": {}
     },
     "@xtuc/ieee754": {
-      "version": "1.2.0",
-      "devOptional": true
+      "version": "1.2.0"
     },
     "@xtuc/long": {
-      "version": "4.2.2",
-      "devOptional": true
+      "version": "4.2.2"
     },
     "@y-presence/client": {
       "version": "2.0.1",
@@ -66360,6 +77671,51 @@
         "y-websocket": "^1.4.3"
       }
     },
+    "@yarnpkg/esbuild-plugin-pnp": {
+      "version": "3.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz",
+      "integrity": "sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@yarnpkg/fslib": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/fslib/-/fslib-2.10.3.tgz",
+      "integrity": "sha512-41H+Ga78xT9sHvWLlFOZLIhtU6mTGZ20pZ29EiZa97vnxdohJD2AF42rCoAoWfqUz486xY6fhjMH+DYEM9r14A==",
+      "dev": true,
+      "requires": {
+        "@yarnpkg/libzip": "^2.3.0",
+        "tslib": "^1.13.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "@yarnpkg/libzip": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/libzip/-/libzip-2.3.0.tgz",
+      "integrity": "sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==",
+      "dev": true,
+      "requires": {
+        "@types/emscripten": "^1.39.6",
+        "tslib": "^1.13.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "dev": true
@@ -66408,8 +77764,7 @@
       }
     },
     "acorn": {
-      "version": "7.4.1",
-      "peer": true
+      "version": "7.4.1"
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -66418,12 +77773,23 @@
       "dev": true,
       "requires": {}
     },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true
+    },
+    "address": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
+      "dev": true
+    },
     "adler-32": {
       "version": "1.3.1"
     },
     "agent-base": {
       "version": "6.0.2",
-      "dev": true,
       "requires": {
         "debug": "4"
       }
@@ -66447,7 +77813,6 @@
     },
     "ajv": {
       "version": "6.12.6",
-      "devOptional": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -66480,7 +77845,6 @@
     },
     "ajv-keywords": {
       "version": "3.5.2",
-      "devOptional": true,
       "requires": {}
     },
     "almost-equal": {
@@ -66565,6 +77929,12 @@
         "picomatch": "^2.0.4"
       }
     },
+    "app-root-dir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
+      "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==",
+      "dev": true
+    },
     "appdirsjs": {
       "version": "1.2.7",
       "peer": true
@@ -66711,6 +78081,33 @@
     "asap": {
       "version": "2.0.6"
     },
+    "assert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
+      "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
+      "dev": true,
+      "requires": {
+        "es6-object-assign": "^1.1.0",
+        "is-nan": "^1.2.1",
+        "object-is": "^1.0.1",
+        "util": "^0.12.0"
+      },
+      "dependencies": {
+        "util": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+          "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "is-arguments": "^1.0.4",
+            "is-generator-function": "^1.0.7",
+            "is-typed-array": "^1.1.3",
+            "which-typed-array": "^1.1.2"
+          }
+        }
+      }
+    },
     "assign-symbols": {
       "version": "1.0.0",
       "peer": true
@@ -66754,8 +78151,7 @@
       "version": "0.7.8"
     },
     "async": {
-      "version": "3.2.4",
-      "peer": true
+      "version": "3.2.4"
     },
     "async-foreach": {
       "version": "0.1.3",
@@ -66790,7 +78186,6 @@
     },
     "babel-core": {
       "version": "7.0.0-bridge.0",
-      "peer": true,
       "requires": {}
     },
     "babel-jest": {
@@ -66853,6 +78248,12 @@
         "schema-utils": "^4.0.0"
       }
     },
+    "babel-plugin-add-react-displayname": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
+      "integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==",
+      "dev": true
+    },
     "babel-plugin-console-source": {
       "version": "2.0.5",
       "dev": true
@@ -66895,6 +78296,12 @@
         "resolve": "^1.19.0"
       }
     },
+    "babel-plugin-named-exports-order": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-named-exports-order/-/babel-plugin-named-exports-order-0.0.2.tgz",
+      "integrity": "sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==",
+      "dev": true
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "requires": {
@@ -66921,6 +78328,28 @@
         "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
+    "babel-plugin-react-docgen": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.2.1.tgz",
+      "integrity": "sha512-UQ0NmGHj/HAqi5Bew8WvNfCk8wSsmdgNd8ZdMjBCICtyCJCq9LiqgqvjCYe570/Wg7AQArSq1VQ60Dd/CHN7mQ==",
+      "dev": true,
+      "requires": {
+        "ast-types": "^0.14.2",
+        "lodash": "^4.17.15",
+        "react-docgen": "^5.0.0"
+      },
+      "dependencies": {
+        "ast-types": {
+          "version": "0.14.2",
+          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+          "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        }
+      }
+    },
     "babel-plugin-syntax-trailing-function-commas": {
       "version": "7.0.0-beta.0",
       "peer": true
@@ -67023,14 +78452,27 @@
       "version": "0.6.1",
       "dev": true
     },
+    "better-opn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+      "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "dev": true,
+      "requires": {
+        "open": "^8.0.4"
+      }
+    },
+    "big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "dev": true
+    },
     "big.js": {
       "version": "5.2.2",
-      "optional": true,
-      "peer": true
+      "devOptional": true
     },
     "binary-extensions": {
-      "version": "2.2.0",
-      "dev": true
+      "version": "2.2.0"
     },
     "binary-search-bounds": {
       "version": "2.0.5",
@@ -67146,6 +78588,15 @@
       "version": "5.2.3",
       "requires": {}
     },
+    "bplist-parser": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
+      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
+      "dev": true,
+      "requires": {
+        "big-integer": "^1.6.44"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "requires": {
@@ -67162,6 +78613,12 @@
     "brcast": {
       "version": "2.0.2"
     },
+    "browser-assert": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
+      "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
+      "dev": true
+    },
     "browser-resolve": {
       "version": "1.11.3",
       "requires": {
@@ -67181,13 +78638,24 @@
         "browser-resolve": "^1.8.1"
       }
     },
-    "browserslist": {
-      "version": "4.21.5",
+    "browserify-zlib": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
+      "integrity": "sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==",
+      "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
+        "pako": "~0.2.0"
+      }
+    },
+    "browserslist": {
+      "version": "4.21.10",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+      "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
+      "requires": {
+        "caniuse-lite": "^1.0.30001517",
+        "electron-to-chromium": "^1.4.477",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.11"
       }
     },
     "bser": {
@@ -67206,12 +78674,103 @@
         "ieee754": "^1.2.1"
       }
     },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true
+    },
     "buffer-from": {
       "version": "1.1.2"
     },
     "bytes": {
       "version": "3.0.0"
     },
+    "c8": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/c8/-/c8-7.14.0.tgz",
+      "integrity": "sha512-i04rtkkcNcCf7zsQcSv/T9EbUn4RXQ6mropeMcjFOsQXQ0iGLAr/xT6TImQg4+U9hmNpN9XdvPkjUL1IzbgxJw==",
+      "dev": true,
+      "requires": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@istanbuljs/schema": "^0.1.3",
+        "find-up": "^5.0.0",
+        "foreground-child": "^2.0.0",
+        "istanbul-lib-coverage": "^3.2.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-reports": "^3.1.4",
+        "rimraf": "^3.0.2",
+        "test-exclude": "^6.0.0",
+        "v8-to-istanbul": "^9.0.0",
+        "yargs": "^16.2.0",
+        "yargs-parser": "^20.2.9"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        }
+      }
+    },
     "cacache": {
       "version": "16.1.3",
       "dev": true,
@@ -67342,7 +78901,9 @@
       "version": "1.0.1"
     },
     "caniuse-lite": {
-      "version": "1.0.30001449"
+      "version": "1.0.30001519",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
+      "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg=="
     },
     "canvas-fit": {
       "version": "1.5.0",
@@ -67365,6 +78926,12 @@
         "svg-pathdata": "^6.0.3"
       }
     },
+    "case-sensitive-paths-webpack-plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
+      "dev": true
+    },
     "cfb": {
       "version": "1.2.2",
       "requires": {
@@ -67374,6 +78941,8 @@
     },
     "chalk": {
       "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -67386,7 +78955,6 @@
     },
     "chokidar": {
       "version": "3.5.3",
-      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -67403,8 +78971,7 @@
       "dev": true
     },
     "chrome-trace-event": {
-      "version": "1.0.3",
-      "devOptional": true
+      "version": "1.0.3"
     },
     "ci-info": {
       "version": "3.7.1"
@@ -67501,14 +79068,22 @@
     },
     "cli-cursor": {
       "version": "3.1.0",
-      "peer": true,
       "requires": {
         "restore-cursor": "^3.1.0"
       }
     },
     "cli-spinners": {
-      "version": "2.7.0",
-      "peer": true
+      "version": "2.7.0"
+    },
+    "cli-table3": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+      "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
+      "dev": true,
+      "requires": {
+        "@colors/colors": "1.5.0",
+        "string-width": "^4.2.0"
+      }
     },
     "cliui": {
       "version": "8.0.1",
@@ -67519,8 +79094,7 @@
       }
     },
     "clone": {
-      "version": "1.0.4",
-      "peer": true
+      "version": "1.0.4"
     },
     "clone-deep": {
       "version": "4.0.1",
@@ -67649,6 +79223,12 @@
       "version": "8.3.0",
       "dev": true
     },
+    "common-path-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
+      "dev": true
+    },
     "commondir": {
       "version": "1.0.1"
     },
@@ -67712,7 +79292,6 @@
     },
     "concat-stream": {
       "version": "1.6.2",
-      "peer": true,
       "requires": {
         "buffer-from": "^1.0.0",
         "inherits": "^2.0.3",
@@ -67721,12 +79300,10 @@
       },
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "peer": true
+          "version": "1.0.0"
         },
         "readable-stream": {
           "version": "2.3.7",
-          "peer": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -67738,12 +79315,10 @@
           }
         },
         "safe-buffer": {
-          "version": "5.1.2",
-          "peer": true
+          "version": "5.1.2"
         },
         "string_decoder": {
           "version": "1.1.1",
-          "peer": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
@@ -67816,6 +79391,12 @@
       "version": "1.0.0",
       "peer": true
     },
+    "constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
+      "dev": true
+    },
     "content-disposition": {
       "version": "0.5.4",
       "dev": true,
@@ -67852,11 +79433,19 @@
       "version": "3.27.2"
     },
     "core-js-compat": {
-      "version": "3.27.2",
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.0.tgz",
+      "integrity": "sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==",
       "requires": {
-        "browserslist": "^4.21.4"
+        "browserslist": "^4.21.9"
       }
     },
+    "core-js-pure": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.32.0.tgz",
+      "integrity": "sha512-qsev1H+dTNYpDUEURRuOXMvpdtAnNEvQWS/FMJ2Vb5AY8ZP4rAPQldkE27joykZPJTe0+IVgHZYh1P5Xu1/i1g==",
+      "dev": true
+    },
     "core-util-is": {
       "version": "1.0.3"
     },
@@ -67892,6 +79481,12 @@
         "which": "^2.0.1"
       }
     },
+    "crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true
+    },
     "css-box-model": {
       "version": "1.2.1",
       "requires": {
@@ -68212,6 +79807,16 @@
       "version": "4.3.0",
       "dev": true
     },
+    "default-browser-id": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
+      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
+      "dev": true,
+      "requires": {
+        "bplist-parser": "^0.2.0",
+        "untildify": "^4.0.0"
+      }
+    },
     "default-gateway": {
       "version": "6.0.3",
       "dev": true,
@@ -68221,7 +79826,6 @@
     },
     "defaults": {
       "version": "1.0.4",
-      "peer": true,
       "requires": {
         "clone": "^1.0.2"
       }
@@ -68257,6 +79861,28 @@
       "version": "1.0.1",
       "peer": true
     },
+    "defu": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.2.tgz",
+      "integrity": "sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==",
+      "dev": true
+    },
+    "del": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+      "integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
+      "dev": true,
+      "requires": {
+        "globby": "^11.0.1",
+        "graceful-fs": "^4.2.4",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.2",
+        "p-map": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "slash": "^3.0.0"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0"
     },
@@ -68287,6 +79913,12 @@
     "destroy": {
       "version": "1.2.0"
     },
+    "detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true
+    },
     "detect-kerning": {
       "version": "2.1.2",
       "peer": true
@@ -68302,6 +79934,25 @@
     "detect-node-es": {
       "version": "1.1.0"
     },
+    "detect-package-manager": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
+      "integrity": "sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A==",
+      "dev": true,
+      "requires": {
+        "execa": "^5.1.1"
+      }
+    },
+    "detect-port": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+      "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
+      "dev": true,
+      "requires": {
+        "address": "^1.0.1",
+        "debug": "4"
+      }
+    },
     "diff-sequences": {
       "version": "29.4.2",
       "dev": true
@@ -68410,9 +80061,15 @@
       }
     },
     "dotenv": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
-      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ=="
+    },
+    "dotenv-expand": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
+      "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
+      "dev": true
     },
     "draft-js": {
       "version": "0.11.7",
@@ -68458,7 +80115,6 @@
     },
     "duplexify": {
       "version": "3.7.1",
-      "peer": true,
       "requires": {
         "end-of-stream": "^1.0.0",
         "inherits": "^2.0.1",
@@ -68467,12 +80123,10 @@
       },
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "peer": true
+          "version": "1.0.0"
         },
         "readable-stream": {
           "version": "2.3.7",
-          "peer": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -68484,12 +80138,10 @@
           }
         },
         "safe-buffer": {
-          "version": "5.1.2",
-          "peer": true
+          "version": "5.1.2"
         },
         "string_decoder": {
           "version": "1.1.1",
-          "peer": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
@@ -68500,11 +80152,28 @@
       "version": "2.2.4",
       "peer": true
     },
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "ee-first": {
       "version": "1.1.1"
     },
+    "ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dev": true,
+      "requires": {
+        "jake": "^10.8.5"
+      }
+    },
     "electron-to-chromium": {
-      "version": "1.4.284"
+      "version": "1.4.488",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.488.tgz",
+      "integrity": "sha512-Dv4sTjiW7t/UWGL+H8ZkgIjtUAVZDgb/PwGWvMsCT7jipzUV/u5skbLXPFKb6iV0tiddVi/bcS2/kUrczeWgIQ=="
     },
     "element-size": {
       "version": "1.1.1",
@@ -68529,8 +80198,7 @@
     },
     "emojis-list": {
       "version": "3.0.0",
-      "optional": true,
-      "peer": true
+      "devOptional": true
     },
     "encodeurl": {
       "version": "1.0.2"
@@ -68553,11 +80221,21 @@
     },
     "end-of-stream": {
       "version": "1.4.4",
-      "peer": true,
       "requires": {
         "once": "^1.4.0"
       }
     },
+    "endent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/endent/-/endent-2.1.0.tgz",
+      "integrity": "sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==",
+      "dev": true,
+      "requires": {
+        "dedent": "^0.7.0",
+        "fast-json-parse": "^1.0.3",
+        "objectorarray": "^1.0.5"
+      }
+    },
     "enhanced-resolve": {
       "version": "0.9.1",
       "dev": true,
@@ -68604,7 +80282,6 @@
     },
     "error-stack-parser": {
       "version": "2.1.4",
-      "peer": true,
       "requires": {
         "stackframe": "^1.3.4"
       }
@@ -68671,8 +80348,7 @@
       }
     },
     "es-module-lexer": {
-      "version": "0.9.3",
-      "devOptional": true
+      "version": "0.9.3"
     },
     "es-set-tostringtag": {
       "version": "2.0.1",
@@ -68714,6 +80390,12 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==",
+      "dev": true
+    },
     "es6-symbol": {
       "version": "3.1.3",
       "peer": true,
@@ -68758,6 +80440,170 @@
         "@esbuild/win32-arm64": "0.17.8",
         "@esbuild/win32-ia32": "0.17.8",
         "@esbuild/win32-x64": "0.17.8"
+      },
+      "dependencies": {
+        "@esbuild/android-arm": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.8.tgz",
+          "integrity": "sha512-0/rb91GYKhrtbeglJXOhAv9RuYimgI8h623TplY2X+vA4EXnk3Zj1fXZreJ0J3OJJu1bwmb0W7g+2cT/d8/l/w==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/android-arm64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.8.tgz",
+          "integrity": "sha512-oa/N5j6v1svZQs7EIRPqR8f+Bf8g6HBDjD/xHC02radE/NjKHK7oQmtmLxPs1iVwYyvE+Kolo6lbpfEQ9xnhxQ==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/android-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.8.tgz",
+          "integrity": "sha512-bTliMLqD7pTOoPg4zZkXqCDuzIUguEWLpeqkNfC41ODBHwoUgZ2w5JBeYimv4oP6TDVocoYmEhZrCLQTrH89bg==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/darwin-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.8.tgz",
+          "integrity": "sha512-n5WOpyvZ9TIdv2V1K3/iIkkJeKmUpKaCTdun9buhGRWfH//osmUjlv4Z5mmWdPWind/VGcVxTHtLfLCOohsOXw==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/freebsd-arm64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.8.tgz",
+          "integrity": "sha512-a/SATTaOhPIPFWvHZDoZYgxaZRVHn0/LX1fHLGfZ6C13JqFUZ3K6SMD6/HCtwOQ8HnsNaEeokdiDSFLuizqv5A==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/freebsd-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.8.tgz",
+          "integrity": "sha512-xpFJb08dfXr5+rZc4E+ooZmayBW6R3q59daCpKZ/cDU96/kvDM+vkYzNeTJCGd8rtO6fHWMq5Rcv/1cY6p6/0Q==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-arm": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.8.tgz",
+          "integrity": "sha512-6Ij8gfuGszcEwZpi5jQIJCVIACLS8Tz2chnEBfYjlmMzVsfqBP1iGmHQPp7JSnZg5xxK9tjCc+pJ2WtAmPRFVA==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-arm64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.8.tgz",
+          "integrity": "sha512-v3iwDQuDljLTxpsqQDl3fl/yihjPAyOguxuloON9kFHYwopeJEf1BkDXODzYyXEI19gisEsQlG1bM65YqKSIww==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-ia32": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.8.tgz",
+          "integrity": "sha512-8svILYKhE5XetuFk/B6raFYIyIqydQi+GngEXJgdPdI7OMKUbSd7uzR02wSY4kb53xBrClLkhH4Xs8P61Q2BaA==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-loong64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.8.tgz",
+          "integrity": "sha512-B6FyMeRJeV0NpyEOYlm5qtQfxbdlgmiGdD+QsipzKfFky0K5HW5Td6dyK3L3ypu1eY4kOmo7wW0o94SBqlqBSA==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-mips64el": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.8.tgz",
+          "integrity": "sha512-CCb67RKahNobjm/eeEqeD/oJfJlrWyw29fgiyB6vcgyq97YAf3gCOuP6qMShYSPXgnlZe/i4a8WFHBw6N8bYAA==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-ppc64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.8.tgz",
+          "integrity": "sha512-bytLJOi55y55+mGSdgwZ5qBm0K9WOCh0rx+vavVPx+gqLLhxtSFU0XbeYy/dsAAD6xECGEv4IQeFILaSS2auXw==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-riscv64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.8.tgz",
+          "integrity": "sha512-2YpRyQJmKVBEHSBLa8kBAtbhucaclb6ex4wchfY0Tj3Kg39kpjeJ9vhRU7x4mUpq8ISLXRXH1L0dBYjAeqzZAw==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-s390x": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.8.tgz",
+          "integrity": "sha512-QgbNY/V3IFXvNf11SS6exkpVcX0LJcob+0RWCgV9OiDAmVElnxciHIisoSix9uzYzScPmS6dJFbZULdSAEkQVw==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/linux-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.8.tgz",
+          "integrity": "sha512-mM/9S0SbAFDBc4OPoyP6SEOo5324LpUxdpeIUUSrSTOfhHU9hEfqRngmKgqILqwx/0DVJBzeNW7HmLEWp9vcOA==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/netbsd-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.8.tgz",
+          "integrity": "sha512-eKUYcWaWTaYr9zbj8GertdVtlt1DTS1gNBWov+iQfWuWyuu59YN6gSEJvFzC5ESJ4kMcKR0uqWThKUn5o8We6Q==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/openbsd-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.8.tgz",
+          "integrity": "sha512-Vc9J4dXOboDyMXKD0eCeW0SIeEzr8K9oTHJU+Ci1mZc5njPfhKAqkRt3B/fUNU7dP+mRyralPu8QUkiaQn7iIg==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/sunos-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.8.tgz",
+          "integrity": "sha512-0xvOTNuPXI7ft1LYUgiaXtpCEjp90RuBBYovdd2lqAFxje4sEucurg30M1WIm03+3jxByd3mfo+VUmPtRSVuOw==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/win32-arm64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.8.tgz",
+          "integrity": "sha512-G0JQwUI5WdEFEnYNKzklxtBheCPkuDdu1YrtRrjuQv30WsYbkkoixKxLLv8qhJmNI+ATEWquZe/N0d0rpr55Mg==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/win32-ia32": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.8.tgz",
+          "integrity": "sha512-Fqy63515xl20OHGFykjJsMnoIWS+38fqfg88ClvPXyDbLtgXal2DTlhb1TfTX34qWi3u4I7Cq563QcHpqgLx8w==",
+          "dev": true,
+          "optional": true
+        },
+        "@esbuild/win32-x64": {
+          "version": "0.17.8",
+          "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.8.tgz",
+          "integrity": "sha512-1iuezdyDNngPnz8rLRDO2C/ZZ/emJLb72OsZeqQ6gL6Avko/XCXZw+NuxBSNhBAP13Hie418V7VMt9et1FMvpg==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "esbuild-plugin-alias": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz",
+      "integrity": "sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==",
+      "dev": true
+    },
+    "esbuild-register": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.4.2.tgz",
+      "integrity": "sha512-kG/XyTDyz6+YDuyfB9ZoSIOOmgyFCH+xPRtsCa8W85HLRV5Csp+o3jWVbOSHgSLfyLc5DmP+KFDNwty4mEjC+Q==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.4"
       }
     },
     "escalade": {
@@ -68767,7 +80613,21 @@
       "version": "1.0.3"
     },
     "escape-string-regexp": {
-      "version": "1.0.5"
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+    },
+    "escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2",
+        "source-map": "~0.6.1"
+      }
     },
     "eslint": {
       "version": "8.37.0",
@@ -69104,17 +80964,38 @@
       "dev": true,
       "requires": {}
     },
+    "eslint-plugin-storybook": {
+      "version": "0.6.13",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.13.tgz",
+      "integrity": "sha512-smd+CS0WH1jBqUEJ3znGS7DU4ayBE9z6lkQAK2yrSUv1+rq8BT/tiI5C/rKE7rmiqiAfojtNYZRhzo5HrulccQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/csf": "^0.0.1",
+        "@typescript-eslint/utils": "^5.45.0",
+        "requireindex": "^1.1.0",
+        "ts-dedent": "^2.2.0"
+      },
+      "dependencies": {
+        "@storybook/csf": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz",
+          "integrity": "sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==",
+          "dev": true,
+          "requires": {
+            "lodash": "^4.17.15"
+          }
+        }
+      }
+    },
     "eslint-scope": {
       "version": "5.1.1",
-      "devOptional": true,
       "requires": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
       },
       "dependencies": {
         "estraverse": {
-          "version": "4.3.0",
-          "devOptional": true
+          "version": "4.3.0"
         }
       }
     },
@@ -69168,14 +81049,23 @@
     },
     "esrecurse": {
       "version": "4.3.0",
-      "devOptional": true,
       "requires": {
         "estraverse": "^5.2.0"
       }
     },
     "estraverse": {
-      "version": "5.3.0",
-      "devOptional": true
+      "version": "5.3.0"
+    },
+    "estree-to-babel": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/estree-to-babel/-/estree-to-babel-3.2.1.tgz",
+      "integrity": "sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==",
+      "dev": true,
+      "requires": {
+        "@babel/traverse": "^7.1.6",
+        "@babel/types": "^7.2.0",
+        "c8": "^7.6.0"
+      }
     },
     "esutils": {
       "version": "2.0.3"
@@ -69465,6 +81355,12 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "extend-shallow": {
       "version": "3.0.2",
       "peer": true,
@@ -69507,6 +81403,44 @@
         }
       }
     },
+    "extract-zip": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz",
+      "integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.6.2",
+        "debug": "^2.6.9",
+        "mkdirp": "^0.5.4",
+        "yauzl": "^2.10.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.6"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
     "falafel": {
       "version": "2.2.5",
       "peer": true,
@@ -69540,9 +81474,14 @@
         "is-string-blank": "^1.0.1"
       }
     },
+    "fast-json-parse": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-json-parse/-/fast-json-parse-1.0.3.tgz",
+      "integrity": "sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==",
+      "dev": true
+    },
     "fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "devOptional": true
+      "version": "2.1.0"
     },
     "fast-levenshtein": {
       "version": "2.0.6"
@@ -69610,6 +81549,21 @@
     "fbjs-css-vars": {
       "version": "1.0.2"
     },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "fetch-retry": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-5.0.6.tgz",
+      "integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==",
+      "dev": true
+    },
     "fflate": {
       "version": "0.4.8"
     },
@@ -69647,6 +81601,68 @@
         "tslib": "^2.4.0"
       }
     },
+    "file-system-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
+      "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==",
+      "dev": true,
+      "requires": {
+        "fs-extra": "11.1.1",
+        "ramda": "0.29.0"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+          "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        }
+      }
+    },
+    "filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^5.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "requires": {
@@ -69725,8 +81741,7 @@
       "peer": true
     },
     "flow-parser": {
-      "version": "0.185.2",
-      "peer": true
+      "version": "0.185.2"
     },
     "focus-trap": {
       "version": "7.2.0",
@@ -69768,6 +81783,125 @@
       "version": "1.0.2",
       "peer": true
     },
+    "foreground-child": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
+      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "fork-ts-checker-webpack-plugin": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz",
+      "integrity": "sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.16.7",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.3",
+        "cosmiconfig": "^7.0.1",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^10.0.0",
+        "memfs": "^3.4.1",
+        "minimatch": "^3.0.4",
+        "node-abort-controller": "^3.0.1",
+        "schema-utils": "^3.1.1",
+        "semver": "^7.3.5",
+        "tapable": "^2.2.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+          "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "tapable": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+          "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+          "dev": true
+        }
+      }
+    },
     "form-data": {
       "version": "4.0.0",
       "requires": {
@@ -69834,6 +81968,12 @@
         }
       }
     },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
     "fs-extra": {
       "version": "8.1.0",
       "peer": true,
@@ -69941,10 +82081,22 @@
     "get-nonce": {
       "version": "1.0.1"
     },
+    "get-npm-tarball-url": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/get-npm-tarball-url/-/get-npm-tarball-url-2.0.3.tgz",
+      "integrity": "sha512-R/PW6RqyaBQNWYaSyfrh54/qtcnOp22FHCCiRhSSZj0FP3KQWCsxxt0DzIdVTbwTqe9CtQfvl/FPD4UIPt4pqw==",
+      "dev": true
+    },
     "get-package-type": {
       "version": "0.1.0",
       "dev": true
     },
+    "get-port": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
+      "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
+      "dev": true
+    },
     "get-stdin": {
       "version": "4.0.1",
       "dev": true
@@ -69963,6 +82115,27 @@
       "version": "2.0.6",
       "peer": true
     },
+    "giget": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-1.1.2.tgz",
+      "integrity": "sha512-HsLoS07HiQ5oqvObOI+Qb2tyZH4Gj5nYGfF9qQcZNrPw+uEFhdXtgJr01aO2pWadGHucajYDLxxbtQkm97ON2A==",
+      "dev": true,
+      "requires": {
+        "colorette": "^2.0.19",
+        "defu": "^6.1.2",
+        "https-proxy-agent": "^5.0.1",
+        "mri": "^1.2.0",
+        "node-fetch-native": "^1.0.2",
+        "pathe": "^1.1.0",
+        "tar": "^6.1.13"
+      }
+    },
+    "github-slugger": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
+      "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==",
+      "dev": true
+    },
     "gl-mat4": {
       "version": "1.2.0",
       "peer": true
@@ -70020,14 +82193,12 @@
     },
     "glob-parent": {
       "version": "5.1.2",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
     },
     "glob-to-regexp": {
-      "version": "0.4.1",
-      "devOptional": true
+      "version": "0.4.1"
     },
     "global-cache": {
       "version": "1.2.1",
@@ -70269,10 +82440,37 @@
       "version": "1.1.0",
       "peer": true
     },
+    "gunzip-maybe": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz",
+      "integrity": "sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==",
+      "dev": true,
+      "requires": {
+        "browserify-zlib": "^0.1.4",
+        "is-deflate": "^1.0.0",
+        "is-gzip": "^1.0.0",
+        "peek-stream": "^1.1.0",
+        "pumpify": "^1.3.3",
+        "through2": "^2.0.3"
+      }
+    },
     "handle-thing": {
       "version": "2.0.1",
       "dev": true
     },
+    "handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4",
+        "wordwrap": "^1.0.0"
+      }
+    },
     "hard-rejection": {
       "version": "2.1.0",
       "dev": true
@@ -70287,7 +82485,9 @@
       "version": "1.0.2"
     },
     "has-flag": {
-      "version": "3.0.0"
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
     },
     "has-hover": {
       "version": "1.0.1",
@@ -70534,6 +82734,12 @@
         "void-elements": "3.1.0"
       }
     },
+    "html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true
+    },
     "html-webpack-plugin": {
       "version": "5.5.0",
       "dev": true,
@@ -70633,7 +82839,6 @@
     },
     "https-proxy-agent": {
       "version": "5.0.1",
-      "dev": true,
       "requires": {
         "agent-base": "6",
         "debug": "4"
@@ -70778,6 +82983,12 @@
       "version": "2.0.1",
       "dev": true
     },
+    "is-absolute-url": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+      "dev": true
+    },
     "is-accessor-descriptor": {
       "version": "1.0.0",
       "peer": true,
@@ -70816,7 +83027,6 @@
     },
     "is-binary-path": {
       "version": "2.1.0",
-      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -70862,6 +83072,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-deflate": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-deflate/-/is-deflate-1.0.0.tgz",
+      "integrity": "sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==",
+      "dev": true
+    },
     "is-descriptor": {
       "version": "1.0.2",
       "peer": true,
@@ -70887,8 +83103,7 @@
       }
     },
     "is-extglob": {
-      "version": "2.1.1",
-      "dev": true
+      "version": "2.1.1"
     },
     "is-finite": {
       "version": "1.1.0",
@@ -70909,20 +83124,33 @@
       "version": "2.1.0",
       "dev": true
     },
+    "is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-glob": {
       "version": "4.0.3",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
     },
+    "is-gzip": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-gzip/-/is-gzip-1.0.0.tgz",
+      "integrity": "sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==",
+      "dev": true
+    },
     "is-iexplorer": {
       "version": "1.0.0",
       "peer": true
     },
     "is-interactive": {
-      "version": "1.0.0",
-      "peer": true
+      "version": "1.0.0"
     },
     "is-lambda": {
       "version": "1.0.1",
@@ -70936,6 +83164,16 @@
       "version": "3.1.1",
       "peer": true
     },
+    "is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      }
+    },
     "is-negative-zero": {
       "version": "2.0.2"
     },
@@ -70952,6 +83190,12 @@
       "version": "1.0.1",
       "peer": true
     },
+    "is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+      "dev": true
+    },
     "is-path-inside": {
       "version": "3.0.3",
       "dev": true
@@ -71020,8 +83264,7 @@
       }
     },
     "is-unicode-supported": {
-      "version": "0.1.0",
-      "peer": true
+      "version": "0.1.0"
     },
     "is-weakmap": {
       "version": "2.0.1",
@@ -71143,6 +83386,79 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
+    "jackspeak": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.2.2.tgz",
+      "integrity": "sha512-mgNtVv4vUuaKA97yxUHoA3+FkuhtxkjdXEWOyB/N76fjy0FjezEt34oy3epBtvCvS+7DyKwqCFWx/oJLV5+kCg==",
+      "dev": true,
+      "requires": {
+        "@isaacs/cliui": "^8.0.2",
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "jest": {
       "version": "29.4.2",
       "dev": true,
@@ -73102,8 +85418,7 @@
       "version": "2.3.1"
     },
     "json-schema-traverse": {
-      "version": "0.4.1",
-      "devOptional": true
+      "version": "0.4.1"
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -73182,6 +85497,17 @@
       "version": "3.4.1",
       "peer": true
     },
+    "lazy-universal-dotenv": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-4.0.0.tgz",
+      "integrity": "sha512-aXpZJRnTkpK6gQ/z4nk+ZBLd/Qdp118cvPruLSIQzQNRhKwEcdXCOzXuF55VDqIiuAaY3UGZ10DJtvZzDcvsxg==",
+      "dev": true,
+      "requires": {
+        "app-root-dir": "^1.0.2",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^10.0.0"
+      }
+    },
     "level": {
       "version": "6.0.1",
       "optional": true,
@@ -73304,13 +85630,11 @@
       "version": "1.2.4"
     },
     "loader-runner": {
-      "version": "4.3.0",
-      "devOptional": true
+      "version": "4.3.0"
     },
     "loader-utils": {
       "version": "2.0.4",
-      "optional": true,
-      "peer": true,
+      "devOptional": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -73361,7 +85685,6 @@
     },
     "log-symbols": {
       "version": "4.1.0",
-      "peer": true,
       "requires": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -73369,14 +85692,12 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "peer": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
           "version": "4.1.2",
-          "peer": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -73384,22 +85705,18 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "peer": true,
           "requires": {
             "color-name": "~1.1.4"
           }
         },
         "color-name": {
-          "version": "1.1.4",
-          "peer": true
+          "version": "1.1.4"
         },
         "has-flag": {
-          "version": "4.0.0",
-          "peer": true
+          "version": "4.0.0"
         },
         "supports-color": {
           "version": "7.2.0",
-          "peer": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -73499,6 +85816,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "lru_map": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz",
+      "integrity": "sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ=="
+    },
     "lru-cache": {
       "version": "5.1.1",
       "requires": {
@@ -73513,9 +85835,19 @@
       "version": "3.2.1"
     },
     "lz-string": {
-      "version": "1.4.4",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true
     },
+    "magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      }
+    },
     "make-cancellable-promise": {
       "version": "1.2.0"
     },
@@ -73606,6 +85938,12 @@
       "version": "4.3.0",
       "dev": true
     },
+    "map-or-similar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
+      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
+      "dev": true
+    },
     "map-visit": {
       "version": "1.0.0",
       "peer": true,
@@ -73642,6 +85980,13 @@
         "vt-pbf": "^3.1.1"
       }
     },
+    "markdown-to-jsx": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz",
+      "integrity": "sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==",
+      "dev": true,
+      "requires": {}
+    },
     "material-colors": {
       "version": "1.2.6"
     },
@@ -73649,6 +85994,21 @@
       "version": "1.0.1",
       "peer": true
     },
+    "mdast-util-definitions": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
+      "integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==",
+      "dev": true,
+      "requires": {
+        "unist-util-visit": "^2.0.0"
+      }
+    },
+    "mdast-util-to-string": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
+      "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==",
+      "dev": true
+    },
     "mdn-data": {
       "version": "2.0.14",
       "dev": true
@@ -73667,6 +86027,15 @@
     "memoize-one": {
       "version": "5.2.1"
     },
+    "memoizerific": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+      "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
+      "dev": true,
+      "requires": {
+        "map-or-similar": "^1.5.0"
+      }
+    },
     "memory-fs": {
       "version": "0.2.0",
       "dev": true
@@ -74332,6 +86701,12 @@
       "version": "1.0.4",
       "dev": true
     },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true
+    },
     "moment": {
       "version": "2.29.4"
     },
@@ -74365,6 +86740,12 @@
         "to-px": "^1.0.1"
       }
     },
+    "mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2"
     },
@@ -74474,9 +86855,14 @@
       "version": "3.0.4",
       "peer": true
     },
+    "node-abort-controller": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
+      "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==",
+      "dev": true
+    },
     "node-dir": {
       "version": "0.1.17",
-      "peer": true,
       "requires": {
         "minimatch": "^3.0.2"
       }
@@ -74502,6 +86888,12 @@
         }
       }
     },
+    "node-fetch-native": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.2.0.tgz",
+      "integrity": "sha512-5IAMBTl9p6PaAjYCnMv5FmqIF6GcZnawAVnzaCG0rX2aYZJ4CxEkZNtVPuTRug7fL7wyM5BQYTlAzcyMPi6oTQ==",
+      "dev": true
+    },
     "node-forge": {
       "version": "1.3.1",
       "dev": true
@@ -74645,7 +87037,9 @@
       "version": "0.4.0"
     },
     "node-releases": {
-      "version": "2.0.8"
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
     },
     "node-sass": {
       "version": "8.0.0",
@@ -74903,6 +87297,12 @@
         "es-abstract": "^1.20.4"
       }
     },
+    "objectorarray": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/objectorarray/-/objectorarray-1.0.5.tgz",
+      "integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==",
+      "dev": true
+    },
     "obuf": {
       "version": "1.1.2",
       "dev": true
@@ -74951,7 +87351,6 @@
     },
     "ora": {
       "version": "5.4.1",
-      "peer": true,
       "requires": {
         "bl": "^4.1.0",
         "chalk": "^4.1.0",
@@ -74966,14 +87365,12 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "peer": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
         },
         "bl": {
           "version": "4.1.0",
-          "peer": true,
           "requires": {
             "buffer": "^5.5.0",
             "inherits": "^2.0.4",
@@ -74982,7 +87379,6 @@
         },
         "buffer": {
           "version": "5.7.1",
-          "peer": true,
           "requires": {
             "base64-js": "^1.3.1",
             "ieee754": "^1.1.13"
@@ -74990,7 +87386,6 @@
         },
         "chalk": {
           "version": "4.1.2",
-          "peer": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -74998,22 +87393,18 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "peer": true,
           "requires": {
             "color-name": "~1.1.4"
           }
         },
         "color-name": {
-          "version": "1.1.4",
-          "peer": true
+          "version": "1.1.4"
         },
         "has-flag": {
-          "version": "4.0.0",
-          "peer": true
+          "version": "4.0.0"
         },
         "supports-color": {
           "version": "7.2.0",
-          "peer": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -75070,6 +87461,12 @@
     "p-try": {
       "version": "2.2.0"
     },
+    "pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "dev": true
+    },
     "papaparse": {
       "version": "5.3.2"
     },
@@ -75151,6 +87548,12 @@
         "util": "^0.10.3"
       }
     },
+    "path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "path-exists": {
       "version": "4.0.0"
     },
@@ -75164,9 +87567,36 @@
     "path-parse": {
       "version": "1.0.7"
     },
+    "path-scurry": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "requires": {
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "10.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.0.tgz",
+          "integrity": "sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw=="
+        },
+        "minipass": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.2.tgz",
+          "integrity": "sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA=="
+        }
+      }
+    },
     "path-type": {
       "version": "4.0.0"
     },
+    "pathe": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "dev": true
+    },
     "pbf": {
       "version": "3.2.1",
       "peer": true,
@@ -75182,6 +87612,23 @@
         "web-streams-polyfill": "^3.2.1"
       }
     },
+    "peek-stream": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
+      "integrity": "sha512-FhJ+YbOSBb9/rIl2ZeE/QHEsWn7PqNYt8ARAY3kIgNGOk13g9FGyIY6JIl/xB/3TFRVoTv5as0l11weORrTekA==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "duplexify": "^3.5.0",
+        "through2": "^2.0.3"
+      }
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true
+    },
     "performance-now": {
       "version": "2.1.0"
     },
@@ -75196,8 +87643,7 @@
       "version": "2.3.1"
     },
     "pify": {
-      "version": "4.0.1",
-      "peer": true
+      "version": "4.0.1"
     },
     "pirates": {
       "version": "4.0.5"
@@ -75275,6 +87721,15 @@
       "version": "0.4.4-pre",
       "peer": true
     },
+    "polished": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",
+      "integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.17.8"
+      }
+    },
     "polybooljs": {
       "version": "1.2.0",
       "peer": true
@@ -75378,6 +87833,12 @@
         }
       }
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true
+    },
     "probe-image-size": {
       "version": "7.2.3",
       "peer": true,
@@ -75394,6 +87855,11 @@
     "process-nextick-args": {
       "version": "2.0.1"
     },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
+    },
     "promise": {
       "version": "7.3.1",
       "requires": {
@@ -75472,15 +87938,96 @@
     },
     "pump": {
       "version": "3.0.0",
-      "peer": true,
       "requires": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
       }
     },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dev": true,
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
     "punycode": {
-      "version": "2.3.0",
-      "devOptional": true
+      "version": "2.3.0"
+    },
+    "puppeteer-core": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-2.1.1.tgz",
+      "integrity": "sha512-n13AWriBMPYxnpbb6bnaY5YoY6rGj8vPLrz6CZF3o0qJNEwlcfJVxBzYZ0NJsQ21UbdJoijPCDrM++SUVEz7+w==",
+      "dev": true,
+      "requires": {
+        "@types/mime-types": "^2.1.0",
+        "debug": "^4.1.0",
+        "extract-zip": "^1.6.6",
+        "https-proxy-agent": "^4.0.0",
+        "mime": "^2.0.3",
+        "mime-types": "^2.1.25",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.0.0",
+        "rimraf": "^2.6.1",
+        "ws": "^6.1.0"
+      },
+      "dependencies": {
+        "agent-base": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+          "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
+          "dev": true
+        },
+        "https-proxy-agent": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
+          "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
+          "dev": true,
+          "requires": {
+            "agent-base": "5",
+            "debug": "4"
+          }
+        },
+        "mime": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "ws": {
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
     },
     "pure-color": {
       "version": "1.3.0"
@@ -75541,6 +88088,12 @@
     "raf-schd": {
       "version": "4.0.3"
     },
+    "ramda": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
+      "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+      "dev": true
+    },
     "randombytes": {
       "version": "2.1.0",
       "requires": {
@@ -75702,6 +88255,22 @@
         "tinycolor2": "^1.4.1"
       }
     },
+    "react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "dev": true,
+      "requires": {}
+    },
+    "react-confetti": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
+      "integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
+      "dev": true,
+      "requires": {
+        "tween-functions": "^1.2.0"
+      }
+    },
     "react-copy-to-clipboard": {
       "version": "5.1.0",
       "requires": {
@@ -75802,6 +88371,48 @@
         "dnd-core": "^16.0.1"
       }
     },
+    "react-docgen": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.3.tgz",
+      "integrity": "sha512-xlLJyOlnfr8lLEEeaDZ+X2J/KJoe6Nr9AzxnkdQWush5hz2ZSu66w6iLMOScMmxoSHWpWMn+k3v5ZiyCfcWsOA==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.7.5",
+        "@babel/generator": "^7.12.11",
+        "@babel/runtime": "^7.7.6",
+        "ast-types": "^0.14.2",
+        "commander": "^2.19.0",
+        "doctrine": "^3.0.0",
+        "estree-to-babel": "^3.1.0",
+        "neo-async": "^2.6.1",
+        "node-dir": "^0.1.10",
+        "strip-indent": "^3.0.0"
+      },
+      "dependencies": {
+        "ast-types": {
+          "version": "0.14.2",
+          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+          "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
+    "react-docgen-typescript": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
+      "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
+      "dev": true,
+      "requires": {}
+    },
     "react-dom": {
       "version": "18.2.0",
       "requires": {
@@ -75839,6 +88450,31 @@
         }
       }
     },
+    "react-element-to-jsx-string": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz",
+      "integrity": "sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==",
+      "dev": true,
+      "requires": {
+        "@base2/pretty-print-object": "1.0.1",
+        "is-plain-object": "5.0.0",
+        "react-is": "18.1.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+          "dev": true
+        },
+        "react-is": {
+          "version": "18.1.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
+          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
+          "dev": true
+        }
+      }
+    },
     "react-fast-compare": {
       "version": "3.2.0"
     },
@@ -75929,6 +88565,13 @@
         }
       }
     },
+    "react-inspector": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz",
+      "integrity": "sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==",
+      "dev": true,
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1"
     },
@@ -76756,7 +89399,6 @@
     },
     "readdirp": {
       "version": "3.6.0",
-      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -76809,10 +89451,14 @@
       "version": "0.2.0"
     },
     "regenerate": {
-      "version": "1.4.2"
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
     },
     "regenerate-unicode-properties": {
       "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
       "requires": {
         "regenerate": "^1.4.2"
       }
@@ -76821,7 +89467,9 @@
       "version": "0.13.11"
     },
     "regenerator-transform": {
-      "version": "0.15.1",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
       "requires": {
         "@babel/runtime": "^7.8.4"
       }
@@ -76847,27 +89495,30 @@
       }
     },
     "regexpu-core": {
-      "version": "5.2.2",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
       "requires": {
+        "@babel/regjsgen": "^0.8.0",
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.1.0",
-        "regjsgen": "^0.7.1",
         "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.1.0"
       }
     },
-    "regjsgen": {
-      "version": "0.7.1"
-    },
     "regjsparser": {
       "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "requires": {
         "jsesc": "~0.5.0"
       },
       "dependencies": {
         "jsesc": {
-          "version": "0.5.0"
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA=="
         }
       }
     },
@@ -76946,6 +89597,30 @@
       "version": "0.2.7",
       "dev": true
     },
+    "remark-external-links": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz",
+      "integrity": "sha512-5vPSX0kHoSsqtdftSHhIYofVINC8qmp0nctkeU9YoJwV3YfiBRiI6cbFRJ0oI/1F9xS+bopXG0m2KS8VFscuKA==",
+      "dev": true,
+      "requires": {
+        "extend": "^3.0.0",
+        "is-absolute-url": "^3.0.0",
+        "mdast-util-definitions": "^4.0.0",
+        "space-separated-tokens": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
+    "remark-slug": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.1.0.tgz",
+      "integrity": "sha512-oGCxDF9deA8phWvxFuyr3oSJsdyUAxMFbA0mZ7Y1Sas+emILtO+e5WutF9564gDsEN4IXaQXm5pFo6MLH+YmwQ==",
+      "dev": true,
+      "requires": {
+        "github-slugger": "^1.0.0",
+        "mdast-util-to-string": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
     "renderkid": {
       "version": "3.0.0",
       "dev": true,
@@ -76976,6 +89651,12 @@
       "version": "2.0.0",
       "peer": true
     },
+    "requireindex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+      "dev": true
+    },
     "requires-port": {
       "version": "1.0.0",
       "dev": true
@@ -77025,7 +89706,6 @@
     },
     "restore-cursor": {
       "version": "3.1.0",
-      "peer": true,
       "requires": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -77206,7 +89886,9 @@
       }
     },
     "semver": {
-      "version": "7.3.8",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "requires": {
         "lru-cache": "^6.0.0"
       },
@@ -77265,11 +89947,37 @@
     },
     "serialize-javascript": {
       "version": "6.0.1",
-      "devOptional": true,
       "requires": {
         "randombytes": "^2.1.0"
       }
     },
+    "serve-favicon": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
+      "integrity": "sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA==",
+      "dev": true,
+      "requires": {
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "ms": "2.1.1",
+        "parseurl": "~1.3.2",
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        },
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+          "dev": true
+        }
+      }
+    },
     "serve-index": {
       "version": "1.9.1",
       "dev": true,
@@ -77427,6 +90135,15 @@
         }
       }
     },
+    "simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.5.3"
+      }
+    },
     "sisteransi": {
       "version": "1.0.5"
     },
@@ -77646,6 +90363,12 @@
       "version": "0.4.1",
       "peer": true
     },
+    "space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "dev": true
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "dev": true,
@@ -77743,8 +90466,7 @@
       "optional": true
     },
     "stackframe": {
-      "version": "1.3.4",
-      "peer": true
+      "version": "1.3.4"
     },
     "stacktrace-parser": {
       "version": "0.1.10",
@@ -77927,6 +90649,21 @@
         "internal-slot": "^1.0.4"
       }
     },
+    "store2": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz",
+      "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==",
+      "dev": true
+    },
+    "storybook": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.2.1.tgz",
+      "integrity": "sha512-uNNqJrWUVaxdZdd3GpMTHt9h2EftoUKxtpAWeQlzx20DDvcliVC1yvLT54sLAzY8nlxxN+fBUuBbTSJ1Dx4TPg==",
+      "dev": true,
+      "requires": {
+        "@storybook/cli": "7.2.1"
+      }
+    },
     "stream-parser": {
       "version": "0.3.1",
       "peer": true,
@@ -77948,8 +90685,7 @@
       }
     },
     "stream-shift": {
-      "version": "1.0.1",
-      "peer": true
+      "version": "1.0.1"
     },
     "string_decoder": {
       "version": "1.3.0",
@@ -77991,6 +90727,17 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string-width-cjs": {
+      "version": "npm:string-width@4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      }
+    },
     "string.prototype.matchall": {
       "version": "4.0.8",
       "dev": true,
@@ -78027,6 +90774,15 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-ansi-cjs": {
+      "version": "npm:strip-ansi@6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
     "strip-bom": {
       "version": "4.0.0",
       "dev": true
@@ -78088,6 +90844,8 @@
     },
     "supports-color": {
       "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -78156,6 +90914,12 @@
         }
       }
     },
+    "synchronous-promise": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
+      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
+      "dev": true
+    },
     "tabbable": {
       "version": "6.0.1"
     },
@@ -78185,6 +90949,71 @@
         }
       }
     },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+          "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+          "dev": true
+        }
+      }
+    },
+    "tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "bl": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+          "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+          "dev": true,
+          "requires": {
+            "buffer": "^5.5.0",
+            "inherits": "^2.0.4",
+            "readable-stream": "^3.4.0"
+          }
+        },
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        }
+      }
+    },
+    "telejson": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.1.0.tgz",
+      "integrity": "sha512-jFJO4P5gPebZAERPkJsqMAQ0IMA1Hi0AoSfxpnUaV6j6R2SZqlpkbS20U6dEUtA3RUYt2Ak/mTlkQzHH9Rv/hA==",
+      "dev": true,
+      "requires": {
+        "memoizerific": "^1.11.3"
+      }
+    },
     "temp": {
       "version": "0.8.3",
       "peer": true,
@@ -78199,6 +91028,33 @@
         }
       }
     },
+    "temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true
+    },
+    "tempy": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-1.0.1.tgz",
+      "integrity": "sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==",
+      "dev": true,
+      "requires": {
+        "del": "^6.0.0",
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.16.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+          "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+          "dev": true
+        }
+      }
+    },
     "terser": {
       "version": "5.16.2",
       "requires": {
@@ -78218,7 +91074,6 @@
     },
     "terser-webpack-plugin": {
       "version": "5.3.6",
-      "devOptional": true,
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
@@ -78229,7 +91084,6 @@
       "dependencies": {
         "schema-utils": {
           "version": "3.1.1",
-          "devOptional": true,
           "requires": {
             "@types/json-schema": "^7.0.8",
             "ajv": "^6.12.5",
@@ -78267,19 +91121,16 @@
     },
     "through2": {
       "version": "2.0.5",
-      "peer": true,
       "requires": {
         "readable-stream": "~2.3.6",
         "xtend": "~4.0.1"
       },
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "peer": true
+          "version": "1.0.0"
         },
         "readable-stream": {
           "version": "2.3.7",
-          "peer": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -78291,12 +91142,10 @@
           }
         },
         "safe-buffer": {
-          "version": "5.1.2",
-          "peer": true
+          "version": "5.1.2"
         },
         "string_decoder": {
           "version": "1.1.1",
-          "peer": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
@@ -78393,6 +91242,12 @@
         "to-array-buffer": "^3.0.0"
       }
     },
+    "tocbot": {
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/tocbot/-/tocbot-4.21.1.tgz",
+      "integrity": "sha512-IfajhBTeg0HlMXu1f+VMbPef05QpDTsZ9X2Yn1+8npdaXsXg/+wrm9Ze1WG5OS1UDC3qJ5EQN/XOZ3gfXjPFCw==",
+      "dev": true
+    },
     "toggle-selection": {
       "version": "1.0.6"
     },
@@ -78420,6 +91275,12 @@
       "version": "2.2.1",
       "dev": true
     },
+    "ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "dev": true
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "dev": true,
@@ -78459,6 +91320,12 @@
         }
       }
     },
+    "tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
+      "dev": true
+    },
     "type": {
       "version": "1.2.0",
       "peer": true
@@ -78498,8 +91365,7 @@
       }
     },
     "typedarray": {
-      "version": "0.0.6",
-      "peer": true
+      "version": "0.0.6"
     },
     "typedarray-pool": {
       "version": "1.2.0",
@@ -78531,6 +91397,13 @@
         }
       }
     },
+    "uglify-js": {
+      "version": "3.17.4",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
+      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
+      "dev": true,
+      "optional": true
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "requires": {
@@ -78550,20 +91423,28 @@
       }
     },
     "unicode-canonical-property-names-ecmascript": {
-      "version": "2.0.0"
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ=="
     },
     "unicode-match-property-ecmascript": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "requires": {
         "unicode-canonical-property-names-ecmascript": "^2.0.0",
         "unicode-property-aliases-ecmascript": "^2.0.0"
       }
     },
     "unicode-match-property-value-ecmascript": {
-      "version": "2.1.0"
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA=="
     },
     "unicode-property-aliases-ecmascript": {
-      "version": "2.1.0"
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
     },
     "union-value": {
       "version": "1.0.1",
@@ -78595,9 +91476,71 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "unist-util-is": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+      "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+      "dev": true
+    },
+    "unist-util-visit": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+      "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit-parents": "^3.0.0"
+      }
+    },
+    "unist-util-visit-parents": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+      "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
     "unpipe": {
       "version": "1.0.0"
     },
+    "unplugin": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.4.0.tgz",
+      "integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.9.0",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.5.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.10.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+          "dev": true
+        }
+      }
+    },
     "unquote": {
       "version": "1.1.1",
       "peer": true
@@ -78638,8 +91581,16 @@
         }
       }
     },
+    "untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true
+    },
     "update-browserslist-db": {
-      "version": "1.0.10",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -78651,7 +91602,6 @@
     },
     "uri-js": {
       "version": "4.4.1",
-      "devOptional": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -78660,6 +91610,24 @@
       "version": "0.1.0",
       "peer": true
     },
+    "url": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.1.tgz",
+      "integrity": "sha512-rWS3H04/+mzzJkv0eZ7vEDGiQbgquI1fGfOad6zKvgYQi1SzMmhl7c/DdRGxhaWrVH6z0qWITo8rpnxK/RfEhA==",
+      "dev": true,
+      "requires": {
+        "punycode": "^1.4.1",
+        "qs": "^6.11.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+          "dev": true
+        }
+      }
+    },
     "url-join": {
       "version": "5.0.0"
     },
@@ -78695,6 +91663,15 @@
       "version": "4.0.1",
       "requires": {}
     },
+    "use-resize-observer": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+      "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+      "dev": true,
+      "requires": {
+        "@juggle/resize-observer": "^3.3.1"
+      }
+    },
     "use-sidecar": {
       "version": "1.1.2",
       "requires": {
@@ -78892,7 +91869,6 @@
     },
     "watchpack": {
       "version": "2.4.0",
-      "devOptional": true,
       "requires": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -78907,7 +91883,6 @@
     },
     "wcwidth": {
       "version": "1.0.1",
-      "peer": true,
       "requires": {
         "defaults": "^1.0.3"
       }
@@ -78928,7 +91903,6 @@
     },
     "webpack": {
       "version": "5.75.0",
-      "devOptional": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -78957,17 +91931,14 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.8.2",
-          "devOptional": true
+          "version": "8.8.2"
         },
         "acorn-import-assertions": {
           "version": "1.8.0",
-          "devOptional": true,
           "requires": {}
         },
         "enhanced-resolve": {
           "version": "5.12.0",
-          "devOptional": true,
           "requires": {
             "graceful-fs": "^4.2.4",
             "tapable": "^2.2.0"
@@ -78975,7 +91946,6 @@
         },
         "schema-utils": {
           "version": "3.1.1",
-          "devOptional": true,
           "requires": {
             "@types/json-schema": "^7.0.8",
             "ajv": "^6.12.5",
@@ -78983,8 +91953,7 @@
           }
         },
         "tapable": {
-          "version": "2.2.1",
-          "devOptional": true
+          "version": "2.2.1"
         }
       }
     },
@@ -79070,6 +92039,17 @@
         }
       }
     },
+    "webpack-hot-middleware": {
+      "version": "2.25.4",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.4.tgz",
+      "integrity": "sha512-IRmTspuHM06aZh98OhBJtqLpeWFM8FXJS5UYpKYxCJzyFoyWj1w6VGFfomZU7OPA55dMLrQK0pRT1eQ3PACr4w==",
+      "dev": true,
+      "requires": {
+        "ansi-html-community": "0.0.8",
+        "html-entities": "^2.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
     "webpack-merge": {
       "version": "5.8.0",
       "dev": true,
@@ -79079,8 +92059,12 @@
       }
     },
     "webpack-sources": {
-      "version": "3.2.3",
-      "devOptional": true
+      "version": "3.2.3"
+    },
+    "webpack-virtual-modules": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+      "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw=="
     },
     "webrtc-adapter": {
       "version": "7.7.1",
@@ -79107,7 +92091,6 @@
     },
     "which": {
       "version": "2.0.2",
-      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
@@ -79167,6 +92150,12 @@
     "word-wrap": {
       "version": "1.2.3"
     },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "dev": true
+    },
     "world-calendars": {
       "version": "1.0.3",
       "peer": true,
@@ -79199,6 +92188,43 @@
         }
       }
     },
+    "wrap-ansi-cjs": {
+      "version": "npm:wrap-ansi@7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
     "wrappy": {
       "version": "1.0.2"
     },
@@ -79301,6 +92327,16 @@
       "version": "20.2.9",
       "dev": true
     },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "yjs": {
       "version": "13.5.46",
       "requires": {
diff --git a/frontend/package.json b/frontend/package.json
index 6e986839d5..2b15fc10e6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,9 +10,11 @@
     "@emoji-mart/react": "^1.1.1",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-popover": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@react-google-maps/api": "^2.18.1",
-    "@sentry/react": "^7.37.2",
-    "@sentry/tracing": "^7.37.2",
+    "@sentry/react": "^7.60.0",
+    "@sentry/tracing": "^7.60.0",
+    "@sentry/webpack-plugin": "^2.5.0",
     "@tabler/icons-react": "^2.4.0",
     "@tooljet/plugins": "../plugins",
     "@uiw/react-codemirror": "^3.0.6",
@@ -111,6 +113,14 @@
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-interactions": "^7.2.1",
+    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.2.1",
+    "@storybook/react": "^7.2.1",
+    "@storybook/react-webpack5": "^7.2.1",
+    "@storybook/testing-library": "^0.2.0",
     "@svgr/webpack": "^6.5.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -129,6 +139,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.4.2",
@@ -136,6 +147,7 @@
     "path": "^0.12.7",
     "prettier": "^2.8.4",
     "sass-loader": "^13.2.0",
+    "storybook": "^7.2.1",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.75.0",
@@ -177,7 +189,9 @@
     "build": "webpack --mode=production && cp -a ./assets/. ./build/assets/",
     "lint": "eslint . '**/*.{js,jsx}'",
     "format": "eslint . --fix '**/*.{js,jsx}'",
-    "test": "jest"
+    "test": "jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/frontend/src/CopilotSettings/ApiKeyContainer.jsx b/frontend/src/CopilotSettings/ApiKeyContainer.jsx
index f1a8c66c04..fedbc34dc3 100644
--- a/frontend/src/CopilotSettings/ApiKeyContainer.jsx
+++ b/frontend/src/CopilotSettings/ApiKeyContainer.jsx
@@ -52,18 +52,18 @@ export const ApiKeyContainer = ({
             <img className="encrypted-icon" src="assets/images/icons/padlock2.svg" width="12" height="12" />
             <span className="text-success mx-2 font-500">API KEY</span>
           </small>
-          <div className="mb-3 col-6">
+          <div className="mb-3 col-6 tj-app-input">
             <input
               disabled={!isCopilotEnabled}
               type="password"
-              class="form-control mt-2"
+              class="form-control"
               name="example-text-input"
               placeholder=""
               value={inputValue}
               onChange={handleOnchange}
             />
           </div>
-          <div className="col-auto mt-1">
+          <div className="col-auto">
             <Button
               onClick={() => handleOnSave(inputValue)}
               darkMode={darkMode}
diff --git a/frontend/src/Editor/AppVersionsManager/CreateVersionModal.jsx b/frontend/src/Editor/AppVersionsManager/CreateVersionModal.jsx
index bca4fa74a0..cb445c9d8f 100644
--- a/frontend/src/Editor/AppVersionsManager/CreateVersionModal.jsx
+++ b/frontend/src/Editor/AppVersionsManager/CreateVersionModal.jsx
@@ -67,7 +67,6 @@ export const CreateVersion = ({
         setShowCreateAppVersion(false);
       }}
       title={t('editor.appVersionManager.createVersion', 'Create new version')}
-      checkForBackground={true}
     >
       <form
         onSubmit={(e) => {
@@ -76,7 +75,7 @@ export const CreateVersion = ({
         }}
       >
         <div className="mb-3 pb-2">
-          <div className="col">
+          <div className="col tj-app-input">
             <label className="form-label" data-cy="version-name-label">
               {t('editor.appVersionManager.versionName', 'Version Name')}
             </label>
@@ -109,7 +108,6 @@ export const CreateVersion = ({
               useMenuPortal={false}
               width="100%"
               maxMenuHeight={100}
-              customWrap={true}
             />
           </div>
         </div>
@@ -132,22 +130,6 @@ export const CreateVersion = ({
               data-cy="create-new-version-button"
               type="submit"
             >
-              <svg
-                className="icon"
-                width="21"
-                height="21"
-                viewBox="0 0 21 21"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M6.34375 4.42643C5.88351 4.42643 5.51042 4.79953 5.51042 5.25977C5.51042 5.72 5.88351 6.0931 6.34375 6.0931C6.80399 6.0931 7.17708 5.72 7.17708 5.25977C7.17708 4.79953 6.80399 4.42643 6.34375 4.42643ZM3.84375 5.25977C3.84375 3.87905 4.96304 2.75977 6.34375 2.75977C7.72446 2.75977 8.84375 3.87905 8.84375 5.25977C8.84375 6.34828 8.14808 7.27431 7.17708 7.61751V12.902C7.88743 13.1531 8.45042 13.7161 8.7015 14.4264H13.0104C13.2314 14.4264 13.4434 14.3386 13.5997 14.1824C13.756 14.0261 13.8438 13.8141 13.8438 13.5931V11.4383L12.7663 12.5157C12.4409 12.8411 11.9133 12.8411 11.5878 12.5157C11.2624 12.1903 11.2624 11.6626 11.5878 11.3372L14.0878 8.83718C14.4133 8.51174 14.9409 8.51174 15.2663 8.83718L17.7663 11.3372C18.0918 11.6626 18.0918 12.1903 17.7663 12.5157C17.4409 12.8411 16.9133 12.8411 16.5878 12.5157L15.5104 11.4383V13.5931C15.5104 14.2561 15.247 14.892 14.7782 15.3609C14.3093 15.8297 13.6735 16.0931 13.0104 16.0931H8.7015C8.3583 17.0641 7.43227 17.7598 6.34375 17.7598C4.96304 17.7598 3.84375 16.6405 3.84375 15.2598C3.84375 14.1712 4.53942 13.2452 5.51042 12.902V7.61751C4.53942 7.27431 3.84375 6.34828 3.84375 5.25977ZM14.6771 4.42643C14.2168 4.42643 13.8438 4.79953 13.8438 5.25977C13.8438 5.72 14.2168 6.0931 14.6771 6.0931C15.1373 6.0931 15.5104 5.72 15.5104 5.25977C15.5104 4.79953 15.1373 4.42643 14.6771 4.42643ZM12.1771 5.25977C12.1771 3.87905 13.2964 2.75977 14.6771 2.75977C16.0578 2.75977 17.1771 3.87905 17.1771 5.25977C17.1771 6.64048 16.0578 7.75977 14.6771 7.75977C13.2964 7.75977 12.1771 6.64048 12.1771 5.25977ZM6.34375 14.4264C5.88351 14.4264 5.51042 14.7995 5.51042 15.2598C5.51042 15.72 5.88351 16.0931 6.34375 16.0931C6.80399 16.0931 7.17708 15.72 7.17708 15.2598C7.17708 14.7995 6.80399 14.4264 6.34375 14.4264Z"
-                  fill="#FDFDFE"
-                />
-              </svg>
-
               {t('editor.appVersionManager.createVersion', 'Create Version')}
             </button>
           </div>
diff --git a/frontend/src/Editor/AppVersionsManager/CustomSelect.jsx b/frontend/src/Editor/AppVersionsManager/CustomSelect.jsx
index 4beca4e57f..53b43b5b2b 100644
--- a/frontend/src/Editor/AppVersionsManager/CustomSelect.jsx
+++ b/frontend/src/Editor/AppVersionsManager/CustomSelect.jsx
@@ -16,8 +16,10 @@ const Menu = (props) => {
           style={{ padding: '8px 12px' }}
           onClick={() => !props?.selectProps?.value?.isReleasedVersion && props.selectProps.setShowEditAppVersion(true)}
         >
-          <div className="row">
-            <div className="col-10 text-truncate">{props?.selectProps?.value?.appVersionName}</div>
+          <div className="row" style={{ padding: '8px 12px' }}>
+            <div className="col-10 text-truncate tj-text-xsm color-slate12">
+              {props?.selectProps?.value?.appVersionName}
+            </div>
             {!props?.selectProps?.value?.isReleasedVersion && (
               <div className="col-1">
                 <svg
@@ -43,7 +45,7 @@ const Menu = (props) => {
         <hr className="m-0" />
         <div>{props.children}</div>
         <div
-          className="cursor-pointer"
+          className="cursor-pointer tj-text-xsm"
           style={{ padding: '8px 12px', color: '#3E63DD' }}
           onClick={() => props.selectProps.setShowCreateAppVersion(true)}
         >
@@ -72,19 +74,28 @@ const Menu = (props) => {
 
 const SingleValue = ({ selectProps }) => {
   return (
-    <div className="d-inline-flex align-items-center" data-cy="app-version-label">
-      <svg className="me-2" width="35" height="21" viewBox="0 0 35 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M4.44531 6.13737C4.12315 6.13737 3.86198 6.39854 3.86198 6.7207C3.86198 7.04287 4.12315 7.30404 4.44531 7.30404C4.76748 7.30404 5.02865 7.04287 5.02865 6.7207C5.02865 6.39854 4.76748 6.13737 4.44531 6.13737ZM2.69531 6.7207C2.69531 5.7542 3.47881 4.9707 4.44531 4.9707C5.41181 4.9707 6.19531 5.7542 6.19531 6.7207C6.19531 7.48266 5.70834 8.13089 5.02865 8.37112V12.0703C5.52589 12.246 5.91998 12.6401 6.09573 13.1374H9.11198C9.26669 13.1374 9.41506 13.0759 9.52446 12.9665C9.63385 12.8571 9.69531 12.7087 9.69531 12.554V11.0457L8.94112 11.7998C8.71332 12.0277 8.34397 12.0277 8.11617 11.7998C7.88836 11.572 7.88836 11.2027 8.11617 10.9749L9.86617 9.22489C10.094 8.99709 10.4633 8.99709 10.6911 9.22489L12.4411 10.9749C12.6689 11.2027 12.6689 11.572 12.4411 11.7998C12.2133 12.0277 11.844 12.0277 11.6162 11.7998L10.862 11.0457V12.554C10.862 13.0182 10.6776 13.4633 10.3494 13.7915C10.0212 14.1197 9.57611 14.304 9.11198 14.304H6.09573C5.8555 14.9837 5.20727 15.4707 4.44531 15.4707C3.47881 15.4707 2.69531 14.6872 2.69531 13.7207C2.69531 12.9587 3.18228 12.3105 3.86198 12.0703V8.37112C3.18228 8.13089 2.69531 7.48266 2.69531 6.7207ZM10.2786 6.13737C9.95648 6.13737 9.69531 6.39854 9.69531 6.7207C9.69531 7.04287 9.95648 7.30404 10.2786 7.30404C10.6008 7.30404 10.862 7.04287 10.862 6.7207C10.862 6.39854 10.6008 6.13737 10.2786 6.13737ZM8.52865 6.7207C8.52865 5.7542 9.31215 4.9707 10.2786 4.9707C11.2451 4.9707 12.0286 5.7542 12.0286 6.7207C12.0286 7.6872 11.2451 8.4707 10.2786 8.4707C9.31215 8.4707 8.52865 7.6872 8.52865 6.7207ZM4.44531 13.1374C4.12315 13.1374 3.86198 13.3985 3.86198 13.7207C3.86198 14.0429 4.12315 14.304 4.44531 14.304C4.76748 14.304 5.02865 14.0429 5.02865 13.7207C5.02865 13.3985 4.76748 13.1374 4.44531 13.1374Z"
-          fill="#E93D82"
-        />
-        <path
-          d="M20.1074 12.9258L22.6211 5.68945H23.8457L20.6875 14.2207H19.8145L20.1074 12.9258ZM17.7578 5.68945L20.248 12.9258L20.5586 14.2207H19.6855L16.5332 5.68945H17.7578ZM27.2031 14.3379C26.7617 14.3379 26.3613 14.2637 26.002 14.1152C25.6465 13.9629 25.3398 13.75 25.082 13.4766C24.8281 13.2031 24.6328 12.8789 24.4961 12.5039C24.3594 12.1289 24.291 11.7188 24.291 11.2734V11.0273C24.291 10.5117 24.3672 10.0527 24.5195 9.65039C24.6719 9.24414 24.8789 8.90039 25.1406 8.61914C25.4023 8.33789 25.6992 8.125 26.0312 7.98047C26.3633 7.83594 26.707 7.76367 27.0625 7.76367C27.5156 7.76367 27.9062 7.8418 28.2344 7.99805C28.5664 8.1543 28.8379 8.37305 29.0488 8.6543C29.2598 8.93164 29.416 9.25977 29.5176 9.63867C29.6191 10.0137 29.6699 10.4238 29.6699 10.8691V11.3555H24.9355V10.4707H28.5859V10.3887C28.5703 10.1074 28.5117 9.83398 28.4102 9.56836C28.3125 9.30273 28.1562 9.08398 27.9414 8.91211C27.7266 8.74023 27.4336 8.6543 27.0625 8.6543C26.8164 8.6543 26.5898 8.70703 26.3828 8.8125C26.1758 8.91406 25.998 9.06641 25.8496 9.26953C25.7012 9.47266 25.5859 9.7207 25.5039 10.0137C25.4219 10.3066 25.3809 10.6445 25.3809 11.0273V11.2734C25.3809 11.5742 25.4219 11.8574 25.5039 12.123C25.5898 12.3848 25.7129 12.6152 25.873 12.8145C26.0371 13.0137 26.2344 13.1699 26.4648 13.2832C26.6992 13.3965 26.9648 13.4531 27.2617 13.4531C27.6445 13.4531 27.9688 13.375 28.2344 13.2188C28.5 13.0625 28.7324 12.8535 28.9316 12.5918L29.5879 13.1133C29.4512 13.3203 29.2773 13.5176 29.0664 13.7051C28.8555 13.8926 28.5957 14.0449 28.2871 14.1621C27.9824 14.2793 27.6211 14.3379 27.2031 14.3379ZM32.0195 8.87695V14.2207H30.9355V7.88086H31.9902L32.0195 8.87695ZM34 7.8457L33.9941 8.85352C33.9043 8.83398 33.8184 8.82227 33.7363 8.81836C33.6582 8.81055 33.5684 8.80664 33.4668 8.80664C33.2168 8.80664 32.9961 8.8457 32.8047 8.92383C32.6133 9.00195 32.4512 9.11133 32.3184 9.25195C32.1855 9.39258 32.0801 9.56055 32.002 9.75586C31.9277 9.94727 31.8789 10.1582 31.8555 10.3887L31.5508 10.5645C31.5508 10.1816 31.5879 9.82227 31.6621 9.48633C31.7402 9.15039 31.8594 8.85352 32.0195 8.5957C32.1797 8.33398 32.3828 8.13086 32.6289 7.98633C32.8789 7.83789 33.1758 7.76367 33.5195 7.76367C33.5977 7.76367 33.6875 7.77344 33.7891 7.79297C33.8906 7.80859 33.9609 7.82617 34 7.8457Z"
-          fill="#E03177"
-        />
-      </svg>
+    <div className="d-inline-flex align-items-center" data-cy="app-version-label" style={{ gap: '8px' }}>
+      <div className="d-inline-flex align-items-center" style={{ gap: '2px' }}>
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g id="layers">
+            <g id="Union">
+              <path
+                d="M6.28275 1.32756C6.73436 1.10175 7.26594 1.10175 7.71756 1.32756L11.9856 3.4616C12.738 3.8378 12.738 4.91152 11.9856 5.28772L7.71756 7.42177C7.26594 7.64758 6.73436 7.64758 6.28275 7.42177L2.01466 5.28772C1.26226 4.91152 1.26226 3.8378 2.01466 3.4616L6.28275 1.32756Z"
+                fill="#D6409F"
+              />
+              <path
+                d="M1.35032 10.0303C1.44845 9.80947 1.707 9.71003 1.92779 9.80816L6.70397 11.9309C6.8925 12.0147 7.10771 12.0147 7.29625 11.9309L12.0724 9.80816C12.2932 9.71003 12.5518 9.80947 12.6499 10.0303C12.748 10.2511 12.6486 10.5096 12.4278 10.6077L7.65162 12.7305C7.23684 12.9148 6.76338 12.9148 6.34859 12.7305L1.57242 10.6077C1.35162 10.5096 1.25218 10.2511 1.35032 10.0303Z"
+                fill="#D6409F"
+              />
+              <path
+                d="M1.92779 7.18316C1.707 7.08503 1.44845 7.18447 1.35032 7.40527C1.25218 7.62607 1.35162 7.88461 1.57242 7.98275L6.34859 10.1055C6.76338 10.2898 7.23684 10.2898 7.65162 10.1055L12.4278 7.98275C12.6486 7.88461 12.748 7.62607 12.6499 7.40527C12.5518 7.18447 12.2932 7.08503 12.0724 7.18316L7.29625 9.3059C7.10771 9.3897 6.8925 9.3897 6.70397 9.3059L1.92779 7.18316Z"
+                fill="#D6409F"
+              />
+            </g>
+          </g>
+        </svg>
+        <p className="tj-app-version-text tj-text-xsm"> ver</p>
+      </div>
       <div
         className={cx('app-version-name text-truncate', { 'color-light-green': selectProps.value.isReleasedVersion })}
         data-cy={`${selectProps.value?.appVersionName}-current-version-text`}
@@ -122,7 +133,6 @@ export const CustomSelect = ({ ...props }) => {
       />
       <Select
         width={'100%'}
-        classNamePrefix="custom-version-selector"
         data-cy={`test-version-selector`}
         hasSearch={false}
         components={{ Menu, SingleValue }}
diff --git a/frontend/src/Editor/AppVersionsManager/EditVersionModal.jsx b/frontend/src/Editor/AppVersionsManager/EditVersionModal.jsx
index 79dbb7ee8c..064655baa5 100644
--- a/frontend/src/Editor/AppVersionsManager/EditVersionModal.jsx
+++ b/frontend/src/Editor/AppVersionsManager/EditVersionModal.jsx
@@ -52,7 +52,6 @@ export const EditVersion = ({
         setShowEditAppVersion(false);
       }}
       title={t('editor.appVersionManager.editVersion', 'Edit Version')}
-      checkForBackground={true}
     >
       <form
         onSubmit={(e) => {
@@ -61,7 +60,7 @@ export const EditVersion = ({
         }}
       >
         <div className="row mb-3">
-          <div className="col modal-main">
+          <div className="col modal-main tj-app-input">
             <input
               type="text"
               onChange={(e) => setVersionName(e.target.value)}
diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
index 03cb1e9f24..1226848c82 100644
--- a/frontend/src/Editor/Box.jsx
+++ b/frontend/src/Editor/Box.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useContext, useRef } from 'react';
+import React, { useEffect, useState, useMemo, useContext, useRef, memo } from 'react';
 import { Button } from './Components/Button';
 import { Image } from './Components/Image';
 import { Text } from './Components/Text';
@@ -67,6 +67,7 @@ import _ from 'lodash';
 import { EditorContext } from '@/Editor/Context/EditorContextWrapper';
 import { useTranslation } from 'react-i18next';
 import { useCurrentState } from '@/_stores/currentStateStore';
+import WidgetIcon from '@/../assets/images/icons/widgets';
 
 const AllComponents = {
   Button,
@@ -123,257 +124,247 @@ const AllComponents = {
   BoundedBox,
 };
 
-export const Box = function Box({
-  id,
-  width,
-  height,
-  yellow,
-  preview,
-  component,
-  inCanvas,
-  onComponentClick,
-  onEvent,
-  onComponentOptionChanged,
-  onComponentOptionsChanged,
-  paramUpdated,
-  changeCanDrag,
-  containerProps,
-  darkMode,
-  removeComponent,
-  canvasWidth,
-  mode,
-  customResolvables,
-  parentId,
-  sideBarDebugger,
-  readOnly,
-  childComponents,
-}) {
-  const { t } = useTranslation();
-  const backgroundColor = yellow ? 'yellow' : '';
-  const currentState = useCurrentState();
+export const Box = memo(
+  ({
+    id,
+    width,
+    height,
+    yellow,
+    preview,
+    component,
+    inCanvas,
+    onComponentClick,
+    onEvent,
+    onComponentOptionChanged,
+    onComponentOptionsChanged,
+    paramUpdated,
+    changeCanDrag,
+    containerProps,
+    removeComponent,
+    canvasWidth,
+    mode,
+    customResolvables,
+    parentId,
+    sideBarDebugger,
+    readOnly,
+    childComponents,
+  }) => {
+    const { t } = useTranslation();
+    const backgroundColor = yellow ? 'yellow' : '';
+    const currentState = useCurrentState();
 
-  let styles = {
-    height: '100%',
-    padding: '1px',
-  };
-
-  if (inCanvas) {
-    styles = {
-      ...styles,
+    let styles = {
+      height: '100%',
+      padding: '1px',
     };
-  }
 
-  const componentMeta = useMemo(() => {
-    return componentTypes.find((comp) => component.component === comp.component);
-  }, [component]);
+    if (inCanvas) {
+      styles = {
+        ...styles,
+      };
+    }
 
-  const ComponentToRender = AllComponents[component.component];
-  const [renderCount, setRenderCount] = useState(0);
-  const [renderStartTime, setRenderStartTime] = useState(new Date());
-  const [resetComponent, setResetStatus] = useState(false);
+    const componentMeta = useMemo(() => {
+      return componentTypes.find((comp) => component.component === comp.component);
+    }, [component]);
 
-  const resolvedProperties = resolveProperties(component, currentState, null, customResolvables);
-  const [validatedProperties, propertyErrors] =
-    mode === 'edit' && component.validate
-      ? validateProperties(resolvedProperties, componentMeta.properties)
-      : [resolvedProperties, []];
+    const ComponentToRender = AllComponents[component.component];
+    const [renderCount, setRenderCount] = useState(0);
+    const [renderStartTime, setRenderStartTime] = useState(new Date());
+    const [resetComponent, setResetStatus] = useState(false);
 
-  const resolvedStyles = resolveStyles(component, currentState, null, customResolvables);
-  const [validatedStyles, styleErrors] =
-    mode === 'edit' && component.validate
-      ? validateProperties(resolvedStyles, componentMeta.styles)
-      : [resolvedStyles, []];
-  validatedStyles.visibility = validatedStyles.visibility !== false ? true : false;
+    const resolvedProperties = resolveProperties(component, currentState, null, customResolvables);
+    const [validatedProperties, propertyErrors] =
+      mode === 'edit' && component.validate
+        ? validateProperties(resolvedProperties, componentMeta.properties)
+        : [resolvedProperties, []];
 
-  const resolvedGeneralProperties = resolveGeneralProperties(component, currentState, null, customResolvables);
-  const [validatedGeneralProperties, generalPropertiesErrors] =
-    mode === 'edit' && component.validate
-      ? validateProperties(resolvedGeneralProperties, componentMeta.general)
-      : [resolvedGeneralProperties, []];
+    const resolvedStyles = resolveStyles(component, currentState, null, customResolvables);
+    const [validatedStyles, styleErrors] =
+      mode === 'edit' && component.validate
+        ? validateProperties(resolvedStyles, componentMeta.styles)
+        : [resolvedStyles, []];
+    validatedStyles.visibility = validatedStyles.visibility !== false ? true : false;
 
-  const resolvedGeneralStyles = resolveGeneralStyles(component, currentState, null, customResolvables);
-  resolvedStyles.visibility = resolvedStyles.visibility !== false ? true : false;
-  const [validatedGeneralStyles, generalStylesErrors] =
-    mode === 'edit' && component.validate
-      ? validateProperties(resolvedGeneralStyles, componentMeta.generalStyles)
-      : [resolvedGeneralStyles, []];
+    const resolvedGeneralProperties = resolveGeneralProperties(component, currentState, null, customResolvables);
+    const [validatedGeneralProperties, generalPropertiesErrors] =
+      mode === 'edit' && component.validate
+        ? validateProperties(resolvedGeneralProperties, componentMeta.general)
+        : [resolvedGeneralProperties, []];
 
-  const { variablesExposedForPreview, exposeToCodeHinter } = useContext(EditorContext) || {};
+    const resolvedGeneralStyles = resolveGeneralStyles(component, currentState, null, customResolvables);
+    resolvedStyles.visibility = resolvedStyles.visibility !== false ? true : false;
+    const [validatedGeneralStyles, generalStylesErrors] =
+      mode === 'edit' && component.validate
+        ? validateProperties(resolvedGeneralStyles, componentMeta.generalStyles)
+        : [resolvedGeneralStyles, []];
 
-  const componentActions = useRef(new Set());
+    const darkMode = localStorage.getItem('darkMode') === 'true';
+    const { variablesExposedForPreview, exposeToCodeHinter } = useContext(EditorContext) || {};
 
-  useEffect(() => {
-    const currentPage = currentState?.page;
-
-    const componentName = getComponentName(currentState, id);
-    const errorLog = Object.fromEntries(
-      [...propertyErrors, ...styleErrors, ...generalPropertiesErrors, ...generalStylesErrors].map((error) => [
-        `${componentName} - ${error.property}`,
-        {
-          page: currentPage,
-          type: 'component',
-          kind: 'component',
-          strace: 'page_level',
-          data: { message: `${error.message}`, status: true },
-          resolvedProperties: resolvedProperties,
-          effectiveProperties: validatedProperties,
-        },
-      ])
-    );
-    sideBarDebugger?.error(errorLog);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify({ propertyErrors, styleErrors, generalPropertiesErrors })]);
-
-  useEffect(() => {
-    setRenderCount(renderCount + 1);
-    if (renderCount > 10) {
-      setRenderCount(0);
-      const currentTime = new Date();
-      const timeDifference = Math.abs(currentTime - renderStartTime);
-      if (timeDifference < 1000) {
-        throw Error;
+    useEffect(() => {
+      if (!component?.parent) {
+        onComponentOptionChanged && onComponentOptionChanged(component, 'id', id);
       }
-      setRenderStartTime(currentTime);
-    }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); /*computeComponentState was not getting the id on initial render therefore exposed variables were not set.
+  computeComponentState was being executed before addNewWidgetToTheEditor was completed.*/
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify({ resolvedProperties, resolvedStyles })]);
+    useEffect(() => {
+      const currentPage = currentState?.page;
+      const componentName = getComponentName(currentState, id);
+      const errorLog = Object.fromEntries(
+        [...propertyErrors, ...styleErrors, ...generalPropertiesErrors, ...generalStylesErrors].map((error) => [
+          `${componentName} - ${error.property}`,
+          {
+            page: currentPage,
+            type: 'component',
+            kind: 'component',
+            strace: 'page_level',
+            data: { message: `${error.message}`, status: true },
+            resolvedProperties: resolvedProperties,
+            effectiveProperties: validatedProperties,
+          },
+        ])
+      );
+      sideBarDebugger?.error(errorLog);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify({ propertyErrors, styleErrors, generalPropertiesErrors })]);
 
-  useEffect(() => {
-    if (customResolvables && !readOnly && mode === 'edit') {
-      const newCustomResolvable = {};
-      newCustomResolvable[id] = { ...customResolvables };
-      exposeToCodeHinter((prevState) => ({ ...prevState, ...newCustomResolvable }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(customResolvables), readOnly]);
-
-  useEffect(() => {
-    if (resetComponent) setResetStatus(false);
-  }, [resetComponent]);
-
-  let exposedVariables = currentState?.components[component.name] ?? {};
-
-  const fireEvent = (eventName, options) => {
-    if (mode === 'edit' && eventName === 'onClick') {
-      onComponentClick(id, component);
-    }
-    onEvent(eventName, { ...options, customVariables: { ...customResolvables }, component });
-  };
-  const validate = (value) =>
-    validateWidget({
-      ...{ widgetValue: value },
-      ...{ validationObject: component.definition.validation, currentState },
-      customResolveObjects: customResolvables,
-    });
-
-  return (
-    <OverlayTrigger
-      placement={inCanvas ? 'auto' : 'top'}
-      delay={{ show: 500, hide: 0 }}
-      trigger={inCanvas && !validatedGeneralProperties.tooltip?.toString().trim() ? null : ['hover', 'focus']}
-      overlay={(props) =>
-        renderTooltip({
-          props,
-          text: inCanvas
-            ? `${validatedGeneralProperties.tooltip}`
-            : `${t(`widget.${component.name}.description`, component.description)}`,
-        })
+    useEffect(() => {
+      setRenderCount(renderCount + 1);
+      if (renderCount > 10) {
+        setRenderCount(0);
+        const currentTime = new Date();
+        const timeDifference = Math.abs(currentTime - renderStartTime);
+        if (timeDifference < 1000) {
+          throw Error;
+        }
+        setRenderStartTime(currentTime);
       }
-    >
-      <div
-        style={{
-          ...styles,
-          backgroundColor,
-        }}
-        role={preview ? 'BoxPreview' : 'Box'}
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify({ resolvedProperties, resolvedStyles })]);
+
+    useEffect(() => {
+      if (customResolvables && !readOnly && mode === 'edit') {
+        const newCustomResolvable = {};
+        newCustomResolvable[id] = { ...customResolvables };
+        exposeToCodeHinter((prevState) => ({ ...prevState, ...newCustomResolvable }));
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(customResolvables), readOnly]);
+
+    useEffect(() => {
+      if (resetComponent) setResetStatus(false);
+    }, [resetComponent]);
+
+    let exposedVariables = currentState?.components[component.name] ?? {};
+
+    const fireEvent = (eventName, options) => {
+      if (mode === 'edit' && eventName === 'onClick') {
+        onComponentClick(id, component);
+      }
+      onEvent(eventName, { ...options, customVariables: { ...customResolvables }, component });
+    };
+    const validate = (value) =>
+      validateWidget({
+        ...{ widgetValue: value },
+        ...{ validationObject: component.definition.validation, currentState },
+        customResolveObjects: customResolvables,
+      });
+
+    return (
+      <OverlayTrigger
+        placement={inCanvas ? 'auto' : 'top'}
+        delay={{ show: 500, hide: 0 }}
+        trigger={inCanvas && !validatedGeneralProperties.tooltip?.toString().trim() ? null : ['hover', 'focus']}
+        overlay={(props) =>
+          renderTooltip({
+            props,
+            text: inCanvas
+              ? `${validatedGeneralProperties.tooltip}`
+              : `${t(`widget.${component.name}.description`, component.description)}`,
+          })
+        }
       >
-        {inCanvas ? (
-          !resetComponent ? (
-            <ComponentToRender
-              onComponentClick={onComponentClick}
-              onComponentOptionChanged={onComponentOptionChanged}
-              currentState={currentState}
-              onEvent={onEvent}
-              id={id}
-              paramUpdated={paramUpdated}
-              width={width}
-              changeCanDrag={changeCanDrag}
-              onComponentOptionsChanged={onComponentOptionsChanged}
-              height={height}
-              component={component}
-              containerProps={containerProps}
-              darkMode={darkMode}
-              removeComponent={removeComponent}
-              canvasWidth={canvasWidth}
-              properties={validatedProperties}
-              exposedVariables={exposedVariables}
-              styles={{ ...validatedStyles, boxShadow: validatedGeneralStyles?.boxShadow }}
-              setExposedVariable={(variable, value) => onComponentOptionChanged(component, variable, value, id)}
-              setExposedVariables={(variableSet) => onComponentOptionsChanged(component, Object.entries(variableSet))}
-              registerAction={(actionName, func, dependencies = []) => {
-                if (
-                  Object.keys(currentState?.components ?? {}).includes(component.name) &&
-                  currentState?.components[component.name].id === id
-                ) {
-                  if (!Object.keys(exposedVariables).includes(actionName)) {
-                    func.dependencies = dependencies;
-                    componentActions.current.add(actionName);
-                    return onComponentOptionChanged(component, actionName, func);
-                  } else if (exposedVariables[actionName]?.dependencies?.length === 0) {
-                    return Promise.resolve();
-                  } else if (
-                    JSON.stringify(dependencies) !== JSON.stringify(exposedVariables[actionName]?.dependencies) ||
-                    !componentActions.current.has(actionName)
-                  ) {
-                    func.dependencies = dependencies;
-                    componentActions.current.add(actionName);
-                    return onComponentOptionChanged(component, actionName, func);
-                  }
-                }
-              }}
-              fireEvent={fireEvent}
-              validate={validate}
-              parentId={parentId}
-              customResolvables={customResolvables}
-              variablesExposedForPreview={variablesExposedForPreview}
-              exposeToCodeHinter={exposeToCodeHinter}
-              setProperty={(property, value) => {
-                paramUpdated(id, property, { value });
-              }}
-              mode={mode}
-              resetComponent={() => setResetStatus(true)}
-              childComponents={childComponents}
-              dataCy={`draggable-widget-${String(component.name).toLowerCase()}`}
-            ></ComponentToRender>
+        <div
+          style={{
+            ...styles,
+            backgroundColor,
+          }}
+          role={preview ? 'BoxPreview' : 'Box'}
+        >
+          {inCanvas ? (
+            !resetComponent ? (
+              <ComponentToRender
+                onComponentClick={onComponentClick}
+                onComponentOptionChanged={onComponentOptionChanged}
+                currentState={currentState}
+                onEvent={onEvent}
+                id={id}
+                paramUpdated={paramUpdated}
+                width={width}
+                changeCanDrag={changeCanDrag}
+                onComponentOptionsChanged={onComponentOptionsChanged}
+                height={height}
+                component={component}
+                containerProps={containerProps}
+                darkMode={darkMode}
+                removeComponent={removeComponent}
+                canvasWidth={canvasWidth}
+                properties={validatedProperties}
+                exposedVariables={exposedVariables}
+                styles={{ ...validatedStyles, boxShadow: validatedGeneralStyles?.boxShadow }}
+                setExposedVariable={(variable, value) => onComponentOptionChanged(component, variable, value, id)}
+                setExposedVariables={(variableSet) => onComponentOptionsChanged(component, Object.entries(variableSet))}
+                fireEvent={fireEvent}
+                validate={validate}
+                parentId={parentId}
+                customResolvables={customResolvables}
+                variablesExposedForPreview={variablesExposedForPreview}
+                exposeToCodeHinter={exposeToCodeHinter}
+                setProperty={(property, value) => {
+                  paramUpdated(id, property, { value });
+                }}
+                mode={mode}
+                resetComponent={() => setResetStatus(true)}
+                childComponents={childComponents}
+                dataCy={`draggable-widget-${String(component.name).toLowerCase()}`}
+              ></ComponentToRender>
+            ) : (
+              <></>
+            )
           ) : (
-            <></>
-          )
-        ) : (
-          <div className="m-1" style={{ height: '76px', width: '76px', marginLeft: '18px' }}>
-            <div
-              className="component-image-holder p-2 d-flex flex-column justify-content-center"
-              style={{ height: '100%' }}
-              data-cy={`widget-list-box-${component.displayName.toLowerCase().replace(/\s+/g, '-')}`}
-            >
-              <center>
-                <div
-                  style={{
-                    width: '20px',
-                    height: '20px',
-                    backgroundSize: 'contain',
-                    backgroundImage: `url(assets/images/icons/widgets/${component.name.toLowerCase()}.svg)`,
-                    backgroundRepeat: 'no-repeat',
-                  }}
-                ></div>
-              </center>
-              <span className="component-title">
-                {t(`widget.${component.name}.displayName`, component.displayName)}
-              </span>
+            <div className="component-image-wrapper" style={{ height: '56px', width: '72px' }}>
+              <div
+                className="component-image-holder d-flex flex-column justify-content-center"
+                style={{ height: '100%' }}
+                data-cy={`widget-list-box-${component.displayName.toLowerCase().replace(/\s+/g, '-')}`}
+              >
+                <center>
+                  <div
+                    className="widget-svg-container"
+                    style={{
+                      width: '32px',
+                      height: '32px',
+                      backgroundSize: 'contain',
+                      backgroundRepeat: 'no-repeat',
+                    }}
+                  >
+                    <WidgetIcon
+                      name={component.name.toLowerCase()}
+                      width="32"
+                      fill={darkMode ? '#3A3F42' : '#D7DBDF'}
+                    />
+                  </div>
+                </center>
+              </div>
+              <div className="component-title">{t(`widget.${component.name}.displayName`, component.displayName)}</div>
             </div>
-          </div>
-        )}
-      </div>
-    </OverlayTrigger>
-  );
-};
+          )}
+        </div>
+      </OverlayTrigger>
+    );
+  }
+);
diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
index 3cb65fe45b..2685d3d3d4 100644
--- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -34,6 +34,9 @@ import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
 import { Alert } from '@/_ui/Alert/Alert';
 import { useCurrentState } from '@/_stores/currentStateStore';
+import ClientServerSwitch from './Elements/ClientServerSwitch';
+
+const HIDDEN_CODE_HINTER_LABELS = ['Table data', 'Column data'];
 
 const AllElements = {
   Color,
@@ -43,6 +46,7 @@ const AllElements = {
   AlignButtons,
   Number,
   BoxShadow,
+  ClientServerSwitch,
 };
 
 export function CodeHinter({
@@ -73,6 +77,7 @@ export function CodeHinter({
   callgpt = () => null,
   isCopilotEnabled = false,
   currentState: _currentState,
+  verticalLine = true,
 }) {
   const darkMode = localStorage.getItem('darkMode') === 'true';
   const options = {
@@ -89,6 +94,11 @@ export function CodeHinter({
   const currentState = useCurrentState();
   const [realState, setRealState] = useState(currentState);
   const [currentValue, setCurrentValue] = useState(initialValue);
+
+  const [prevCurrentValue, setPrevCurrentValue] = useState(null);
+  const [resolvedValue, setResolvedValue] = useState(null);
+  const [resolvingError, setResolvingError] = useState(null);
+
   const [isFocused, setFocused] = useState(false);
   const [heightRef, currentHeight] = useHeight();
   const isPreviewFocused = useRef(false);
@@ -108,7 +118,6 @@ export function CodeHinter({
   });
   const { t } = useTranslation();
   const { variablesExposedForPreview } = useContext(EditorContext);
-
   const prevCountRef = useRef(false);
 
   useEffect(() => {
@@ -139,6 +148,28 @@ export function CodeHinter({
     };
   }, [wrapperRef, isFocused, isPreviewFocused, currentValue, prevCountRef, isOpen]);
 
+  useEffect(() => {
+    if (JSON.stringify(currentValue) !== JSON.stringify(prevCurrentValue)) {
+      const customResolvables = getCustomResolvables();
+      const [preview, error] = resolveReferences(currentValue, realState, null, customResolvables, true, true);
+      setPrevCurrentValue(currentValue);
+
+      if (error) {
+        setResolvingError(error);
+        setResolvedValue(null);
+      } else {
+        setResolvingError(null);
+        setResolvedValue(preview);
+      }
+    }
+
+    return () => {
+      setPrevCurrentValue(null);
+      setResolvedValue(null);
+      setResolvingError(null);
+    };
+  }, [JSON.stringify({ currentValue, realState })]);
+
   function valueChanged(editor, onChange, ignoreBraces) {
     if (editor.getValue()?.trim() !== currentValue) {
       handleChange(editor, onChange, ignoreBraces, realState, componentName);
@@ -185,13 +216,18 @@ export function CodeHinter({
 
   const getPreview = () => {
     if (!enablePreview) return;
-    const customResolvables = getCustomResolvables();
-    const [preview, error] = resolveReferences(currentValue, realState, null, customResolvables, true, true);
+    // const customResolvables = getCustomResolvables();
+    // const [preview, error] = resolveReferences(currentValue, realState, null, customResolvables, true, true);
+
     const themeCls = darkMode ? 'bg-dark  py-1' : 'bg-light  py-1';
+    const preview = resolvedValue;
+    const error = resolvingError;
 
     if (error) {
       const err = String(error);
-      const errorMessage = err.includes('.run()') ? `${err} in ${componentName.split('::')[0]}'s field` : err;
+      const errorMessage = err.includes('.run()')
+        ? `${err} in ${componentName ? componentName.split('::')[0] + "'s" : 'fx'} field`
+        : err;
       return (
         <animated.div className={isOpen ? themeCls : null} style={{ ...slideInStyles, overflow: 'hidden' }}>
           <div ref={heightRef} className="dynamic-variable-preview bg-red-lt px-1 py-1">
@@ -289,26 +325,60 @@ export function CodeHinter({
 
   return (
     <div ref={wrapperRef} className={cx({ 'codeShow-active': codeShow })}>
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        {paramLabel && (
-          <div className={`mb-2 field ${options.className}`} data-cy={`${cyLabel}-widget-parameter-label`}>
+      <div className={cx('d-flex align-items-center justify-content-between')}>
+        {paramLabel === 'Type' && <div className="field-type-vertical-line"></div>}
+        {paramLabel && !HIDDEN_CODE_HINTER_LABELS.includes(paramLabel) && (
+          <div className={`field ${options.className}`} data-cy={`${cyLabel}-widget-parameter-label`}>
             <ToolTip
               label={t(`widget.commonProperties.${camelCase(paramLabel)}`, paramLabel)}
               meta={fieldMeta}
-              labelClass={`form-label ${darkMode && 'color-whitish-darkmode'}`}
+              labelClass={`tj-text-xsm color-slate12 ${codeShow ? 'mb-2' : 'mb-0'} ${
+                darkMode && 'color-whitish-darkmode'
+              }`}
             />
           </div>
         )}
-        <div className={`col-auto ${(type ?? 'code') === 'code' ? 'd-none' : ''} `}>
-          <div style={{ width: width, display: codeShow ? 'flex' : 'none', marginTop: '-1px' }}>
-            <FxButton
-              active={true}
-              onPress={() => {
-                setForceCodeBox(false);
-                onFxPress(false);
-              }}
-              dataCy={cyLabel}
-            />
+        <div className={`${(type ?? 'code') === 'code' ? 'd-none' : ''} `}>
+          <div
+            style={{ width: width, marginBottom: codeShow ? '0.5rem' : '0px' }}
+            className="d-flex align-items-center"
+          >
+            <div className="col-auto pt-0 fx-common">
+              {paramLabel !== 'Type' && (
+                <FxButton
+                  active={codeShow}
+                  onPress={() => {
+                    if (codeShow) {
+                      setForceCodeBox(false);
+                      onFxPress(false);
+                    } else {
+                      setForceCodeBox(true);
+                      onFxPress(true);
+                    }
+                  }}
+                  dataCy={cyLabel}
+                />
+              )}
+            </div>
+            {!codeShow && (
+              <ElementToRender
+                value={resolveReferences(initialValue, realState)}
+                onChange={(value) => {
+                  if (value !== currentValue) {
+                    onChange(value);
+                    setCurrentValue(value);
+                  }
+                }}
+                paramName={paramName}
+                paramLabel={paramLabel}
+                forceCodeBox={() => {
+                  setForceCodeBox(true);
+                  onFxPress(true);
+                }}
+                meta={fieldMeta}
+                cyLabel={cyLabel}
+              />
+            )}
           </div>
         </div>
       </div>
@@ -317,94 +387,77 @@ export function CodeHinter({
         style={{ width: width, display: codeShow ? 'flex' : 'none' }}
       >
         <div className={`col code-hinter-col`}>
-          <div
-            className="code-hinter-wrapper position-relative"
-            style={{ width: '100%', backgroundColor: darkMode && '#272822' }}
-          >
-            <div
-              className={`${defaultClassName} ${className || 'codehinter-default-input'}`}
-              key={componentName}
-              style={{
-                height: height || 'auto',
-                minHeight,
-                maxHeight: '320px',
-                overflow: 'auto',
-                fontSize: ' .875rem',
-              }}
-              data-cy={`${cyLabel}-input-field`}
-            >
-              {usePortalEditor && (
-                <CodeHinter.PopupIcon
-                  callback={handleToggle}
-                  icon="portal-open"
-                  tip="Pop out code editor into a new window"
-                  transformation={componentName === 'transformation'}
-                />
-              )}
-              <CodeHinter.Portal
-                isCopilotEnabled={isCopilotEnabled}
-                isOpen={isOpen}
-                callback={setIsOpen}
-                componentName={componentName}
+          <div className="d-flex">
+            <div className={`${verticalLine && 'code-hinter-vertical-line'}`}></div>
+            <div className="code-hinter-wrapper position-relative" style={{ width: '100%' }}>
+              <div
+                className={`${defaultClassName} ${className || 'codehinter-default-input'}`}
                 key={componentName}
-                customComponent={getPreview}
-                forceUpdate={forceUpdate}
-                optionalProps={{ styles: { height: 300 }, cls: className }}
-                darkMode={darkMode}
-                selectors={{ className: 'preview-block-portal' }}
-                dragResizePortal={true}
-                callgpt={callgpt}
+                style={{
+                  height: height || 'auto',
+                  minHeight,
+                  maxHeight: '320px',
+                  overflow: 'auto',
+                  fontSize: ' .875rem',
+                }}
+                data-cy={`${cyLabel}-input-field`}
               >
-                <CodeMirror
-                  value={typeof initialValue === 'string' ? initialValue : ''}
-                  realState={realState}
-                  scrollbarStyle={null}
-                  height={'100%'}
-                  onFocus={() => setFocused(true)}
-                  onBlur={(editor, e) => {
-                    e.stopPropagation();
-                    const value = editor.getValue()?.trimEnd();
-                    onChange(value);
-                    if (!isPreviewFocused.current) {
-                      setFocused(false);
-                    }
-                  }}
-                  onChange={(editor) => valueChanged(editor, onChange, ignoreBraces)}
-                  onBeforeChange={(editor, change) => onBeforeChange(editor, change, ignoreBraces)}
-                  options={options}
-                  viewportMargin={Infinity}
-                />
-              </CodeHinter.Portal>
+                {usePortalEditor && (
+                  <CodeHinter.PopupIcon
+                    callback={handleToggle}
+                    icon="portal-open"
+                    tip="Pop out code editor into a new window"
+                    transformation={componentName === 'transformation'}
+                  />
+                )}
+                <CodeHinter.Portal
+                  isCopilotEnabled={isCopilotEnabled}
+                  isOpen={isOpen}
+                  callback={setIsOpen}
+                  componentName={componentName}
+                  key={componentName}
+                  customComponent={getPreview}
+                  forceUpdate={forceUpdate}
+                  optionalProps={{ styles: { height: 300 }, cls: className }}
+                  darkMode={darkMode}
+                  selectors={{ className: 'preview-block-portal' }}
+                  dragResizePortal={true}
+                  callgpt={callgpt}
+                >
+                  <CodeMirror
+                    value={typeof initialValue === 'string' ? initialValue : ''}
+                    realState={realState}
+                    scrollbarStyle={null}
+                    height={'100%'}
+                    onFocus={() => setFocused(true)}
+                    onBlur={(editor, e) => {
+                      e.stopPropagation();
+                      const value = editor.getValue()?.trimEnd();
+                      onChange(value);
+                      if (!isPreviewFocused.current) {
+                        setFocused(false);
+                      }
+                    }}
+                    onChange={(editor) => valueChanged(editor, onChange, ignoreBraces)}
+                    onBeforeChange={(editor, change) => onBeforeChange(editor, change, ignoreBraces)}
+                    options={options}
+                    viewportMargin={Infinity}
+                  />
+                </CodeHinter.Portal>
+              </div>
+              {enablePreview && !isOpen && getPreview()}
             </div>
-            {enablePreview && !isOpen && getPreview()}
           </div>
         </div>
       </div>
-      {!codeShow && (
-        <div style={{ display: !codeShow ? 'block' : 'none' }}>
-          <ElementToRender
-            value={resolveReferences(initialValue, realState)}
-            onChange={(value) => {
-              if (value !== currentValue) {
-                onChange(value);
-                setCurrentValue(value);
-              }
-            }}
-            paramName={paramName}
-            paramLabel={paramLabel}
-            forceCodeBox={() => {
-              setForceCodeBox(true);
-              onFxPress(true);
-            }}
-            meta={fieldMeta}
-            cyLabel={cyLabel}
-          />
-        </div>
-      )}
     </div>
   );
 }
 
+function CodeHinterInputField() {
+  return <></>;
+}
+
 const PopupIcon = ({ callback, icon, tip, transformation = false }) => {
   const size = transformation ? 20 : 12;
 
diff --git a/frontend/src/Editor/CodeBuilder/Elements/AlignButtons.jsx b/frontend/src/Editor/CodeBuilder/Elements/AlignButtons.jsx
index 62084b64dc..47669df9bd 100644
--- a/frontend/src/Editor/CodeBuilder/Elements/AlignButtons.jsx
+++ b/frontend/src/Editor/CodeBuilder/Elements/AlignButtons.jsx
@@ -1,108 +1,25 @@
 import React from 'react';
-import FxButton from './FxButton';
-import { useTranslation } from 'react-i18next';
+import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
+import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
+import AlignLeft from '@/_ui/Icon/solidIcons/AlignLeft';
+import AlignCenter from '@/_ui/Icon/solidIcons/AlignCenter';
+import AlignRight from '@/_ui/Icon/solidIcons/AlignRight';
 
 export const AlignButtons = ({ value, onChange, forceCodeBox, meta }) => {
-  function handleOptionChanged(event) {
-    onChange(event.currentTarget.value);
+  function handleOptionChanged(_value) {
+    onChange(_value);
   }
-  const { t } = useTranslation();
-
   return (
-    <div className="row fx-container">
-      <div className="col">
-        <div className={`mb-3 field ${meta?.options?.className}`}>
-          <div style={{ display: 'flex', gap: 10 }}>
-            <label className="radio-img">
-              <input
-                type="radio"
-                name="alignment"
-                value="left"
-                onChange={handleOptionChanged}
-                checked={value === 'left'}
-              />
-              <div className="action-icon">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M2 4H14M2 8H8.66667M2 12H12"
-                    stroke={value == 'left' ? '#fff' : '#8092AC'}
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                  />
-                </svg>
-              </div>
-              <span className="tooltiptext">{t('globals.left', 'Left')}</span>
-            </label>
-
-            <label className="radio-img">
-              <input
-                type="radio"
-                name="alignment"
-                value="center"
-                onChange={handleOptionChanged}
-                checked={value === 'center'}
-              />
-              <div className="action-icon">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M2 4H14M4.66667 8H11.3333M3.33333 12H12.6667"
-                    stroke={value == 'center' ? '#fff' : '#8092AC'}
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                  />
-                </svg>
-              </div>
-              <span className="tooltiptext">{t('globals.center', 'Center')}</span>
-            </label>
-
-            <label className="radio-img">
-              <input
-                type="radio"
-                name="alignment"
-                value="right"
-                onChange={handleOptionChanged}
-                checked={value === 'right'}
-              />
-              <div className="action-icon">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M2 4H14M7.33333 8H14M4 12H14"
-                    stroke={value == 'right' ? '#fff' : '#8092AC'}
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                  />
-                </svg>
-              </div>
-              <span className="tooltiptext">{t('globals.right', 'Right')}</span>
-            </label>
-
-            <label className="radio-img">
-              <input
-                type="radio"
-                name="alignment"
-                value="justify"
-                onChange={handleOptionChanged}
-                checked={value === 'justify'}
-              />
-              <div className="action-icon">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M2 8H14M2 12H14M2 4H8H14H2Z"
-                    stroke={value == 'justify' ? '#fff' : '#8092AC'}
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-              <span className="tooltiptext">{t('globals.justified', 'Justified')}</span>
-            </label>
-          </div>
-        </div>
-      </div>
-      <div className="col-auto pt-0 style-fx fx-common">
-        <FxButton active={false} onPress={forceCodeBox} />
-      </div>
-    </div>
+    <ToggleGroup onValueChange={handleOptionChanged} defaultValue={value} className="inspector-align-buttons">
+      <ToggleGroupItem value="left">
+        <AlignLeft width={14} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center">
+        <AlignCenter width={14} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right">
+        <AlignRight width={14} />
+      </ToggleGroupItem>
+    </ToggleGroup>
   );
 };
diff --git a/frontend/src/Editor/CodeBuilder/Elements/BoxShadow.jsx b/frontend/src/Editor/CodeBuilder/Elements/BoxShadow.jsx
index 91861bace3..747c165e97 100644
--- a/frontend/src/Editor/CodeBuilder/Elements/BoxShadow.jsx
+++ b/frontend/src/Editor/CodeBuilder/Elements/BoxShadow.jsx
@@ -3,10 +3,10 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import Slider from 'rc-slider';
 import { Color } from './Color';
-import FxButton from './FxButton';
 
-export const BoxShadow = ({ value, onChange, forceCodeBox, cyLabel }) => {
+export const BoxShadow = ({ value, onChange, cyLabel }) => {
   const defaultValue = { X: 0, Y: 0, Blur: 0, Spread: 0, Color: '#00000040' };
+  const [showPicker, setShowPicker] = useState(false);
 
   const popoverLabelstyle = {
     display: 'flex',
@@ -68,7 +68,6 @@ export const BoxShadow = ({ value, onChange, forceCodeBox, cyLabel }) => {
   };
 
   const clearBoxShadow = () => setDebouncedShadow(defaultValue);
-
   const renderSlider = (item, value) => {
     return (
       <div className="range-slider">
@@ -94,12 +93,8 @@ export const BoxShadow = ({ value, onChange, forceCodeBox, cyLabel }) => {
 
   const eventPopover = () => {
     return (
-      <Popover
-        id="popover-basic"
-        style={{ width: '350px', maxWidth: '350px' }}
-        className={`${darkMode && 'popover-dark-themed theme-dark'} shadow`}
-      >
-        <Popover.Body>
+      <Popover className={`${darkMode && 'dark-theme'}`} style={{ width: '350px', maxWidth: '350px' }}>
+        <Popover.Body className={`${darkMode && 'dark-theme'}`}>
           <>
             {input.map((item) => (
               <div className="row" key={item}>
@@ -133,6 +128,7 @@ export const BoxShadow = ({ value, onChange, forceCodeBox, cyLabel }) => {
               hideFx
               pickerStyle={colorPickerStyle}
               cyLabel={'box-shadow-color'}
+              asBoxShadowPopover={false}
             />
             <button
               data-cy={'box-shadow-clear-button'}
@@ -146,34 +142,58 @@ export const BoxShadow = ({ value, onChange, forceCodeBox, cyLabel }) => {
       </Popover>
     );
   };
-
+  const _value = `#${value.split('#')[1]}`;
+  const outerStyles = {
+    width: '142px',
+    height: '32px',
+    borderRadius: ' 6px',
+    display: 'flex',
+    paddingLeft: '4px',
+    alignItems: 'center',
+    gap: '4px',
+    background: showPicker && 'var(--indigo2)',
+    outline: showPicker && '1px solid var(--indigo9)',
+    boxShadow: showPicker && '0px 0px 0px 1px #C6D4F9',
+  };
   return (
     <div className="row fx-container">
       <div className="col">
-        <div className="field mb-2">
-          <OverlayTrigger trigger="click" placement={'left'} rootClose={true} overlay={eventPopover()}>
-            <div className="row mx-0 form-control color-picker-input" data-cy={`${cyLabel}-picker`}>
+        <div className="field">
+          <OverlayTrigger
+            onToggle={(showPicker) => {
+              setShowPicker(showPicker);
+            }}
+            show={showPicker}
+            trigger="click"
+            placement={'left'}
+            rootClose={true}
+            overlay={eventPopover()}
+          >
+            <div
+              className="row mx-0 color-picker-input d-flex align-items-center"
+              style={outerStyles}
+              data-cy={`${cyLabel}-picker`}
+            >
               <div
                 className="col-auto"
                 style={{
-                  float: 'right',
-                  width: '20px',
-                  height: '20px',
+                  width: '24px',
+                  height: '24px',
+                  borderRadius: ' 6px',
+                  border: `1px solid var(--slate7, #D7DBDF)`,
+                  boxShadow: `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`,
                   backgroundColor: boxShadow.Color,
-                  border: `0.25px solid ${['#ffffff', '#fff', '#1f2936'].includes(boxShadow.Color) && '#c5c8c9'}`,
+                  marginRight: '4px',
                 }}
                 data-cy={`${cyLabel}-picker-icon`}
               ></div>
               <small className="col p-0" data-cy={`${cyLabel}-value`}>
-                {value}
+                {_value}
               </small>
             </div>
           </OverlayTrigger>
         </div>
       </div>
-      <div className="col-auto pt-0 style-fx fx-common">
-        <FxButton active={false} onPress={forceCodeBox} dataCy={'box-shadow'} />
-      </div>
     </div>
   );
 };
diff --git a/frontend/src/Editor/CodeBuilder/Elements/ClientServerSwitch.jsx b/frontend/src/Editor/CodeBuilder/Elements/ClientServerSwitch.jsx
new file mode 100644
index 0000000000..0490ac5918
--- /dev/null
+++ b/frontend/src/Editor/CodeBuilder/Elements/ClientServerSwitch.jsx
@@ -0,0 +1,24 @@
+import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
+import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
+import React from 'react';
+
+const ClientServerSwitch = ({ value, onChange, cyLabel, meta, paramName }) => {
+  const options = meta?.options;
+  const defaultValue = value ? 'serverSide' : 'clientSide';
+  const handleChange = (_value) => {
+    onChange(_value === 'serverSide');
+  };
+  return (
+    <div>
+      <ToggleGroup onValueChange={handleChange} defaultValue={defaultValue}>
+        {options.map((option) => (
+          <ToggleGroupItem key={option.value} value={option.value}>
+            {option.displayName}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    </div>
+  );
+};
+
+export default ClientServerSwitch;
diff --git a/frontend/src/Editor/CodeBuilder/Elements/Color.jsx b/frontend/src/Editor/CodeBuilder/Elements/Color.jsx
index e6e4ccf87e..3144777c60 100644
--- a/frontend/src/Editor/CodeBuilder/Elements/Color.jsx
+++ b/frontend/src/Editor/CodeBuilder/Elements/Color.jsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { SketchPicker } from 'react-color';
-import FxButton from './FxButton';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
 
-export const Color = ({ value, onChange, forceCodeBox, hideFx = false, pickerStyle = {}, cyLabel }) => {
+export const Color = ({ value, onChange, pickerStyle = {}, cyLabel, asBoxShadowPopover = true }) => {
   const [showPicker, setShowPicker] = useState(false);
+  const darkMode = localStorage.getItem('darkMode') === 'true';
 
   const coverStyles = {
     position: 'fixed',
@@ -13,6 +15,19 @@ export const Color = ({ value, onChange, forceCodeBox, hideFx = false, pickerSty
     left: '0px',
   };
 
+  const outerStyles = {
+    width: '142px',
+    height: '32px',
+    borderRadius: ' 6px',
+    display: 'flex',
+    paddingLeft: '4px',
+    alignItems: 'center',
+    gap: '4px',
+    background: showPicker && 'var(--indigo2)',
+    outline: showPicker && '1px solid var(--indigo9)',
+    boxShadow: showPicker && '0px 0px 0px 1px #C6D4F9',
+  };
+
   const decimalToHex = (alpha) => {
     let aHex = Math.round(255 * alpha).toString(16);
     return alpha === 0 ? '00' : aHex.length < 2 ? `0${aHex}` : aHex;
@@ -21,52 +36,89 @@ export const Color = ({ value, onChange, forceCodeBox, hideFx = false, pickerSty
     const hexCode = `${color.hex}${decimalToHex(color?.rgb?.a ?? 1.0)}`;
     onChange(hexCode);
   };
+  const eventPopover = () => {
+    return (
+      <Popover className={`${darkMode && ' dark-theme'}`}>
+        <Popover.Body className={!asBoxShadowPopover && 'boxshadow-picker'}>
+          <>{ColorPicker()}</>
+        </Popover.Body>
+      </Popover>
+    );
+  };
+
+  const ColorPicker = () => {
+    return (
+      <>
+        {showPicker && (
+          <div>
+            <div style={coverStyles} onClick={() => setShowPicker(false)} />
+            <div style={pickerStyle}>
+              <SketchPicker
+                onFocus={() => setShowPicker(true)}
+                color={value}
+                onChangeComplete={handleColorChange}
+                style={{ bottom: 0 }}
+              />
+            </div>
+          </div>
+        )}
+      </>
+    );
+  };
+  const ColorPickerInputBox = () => {
+    return (
+      <div
+        className="row mx-0 color-picker-input d-flex"
+        onClick={() => setShowPicker(true)}
+        data-cy={`${String(cyLabel)}-picker`}
+        style={outerStyles}
+      >
+        <div
+          className="col-auto"
+          style={{
+            float: 'right',
+            width: '24px',
+            height: '24px',
+            borderRadius: ' 6px',
+            border: `1px solid var(--slate7, #D7DBDF)`,
+            boxShadow: `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`,
+            backgroundColor: value,
+          }}
+          data-cy={`${String(cyLabel)}-picker-icon`}
+        ></div>
+
+        <div className="col tj-text-xsm p-0 color-slate12" data-cy={`${String(cyLabel)}-value`}>
+          {value}
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div className="row fx-container" data-cy="color-picker-parent">
       <div className="col">
-        <div className="field mb-2">
-          {showPicker && (
-            <div>
-              <div style={coverStyles} onClick={() => setShowPicker(false)} />
-              <div style={pickerStyle}>
-                <SketchPicker
-                  onFocus={() => setShowPicker(true)}
-                  color={value}
-                  onChangeComplete={handleColorChange}
-                  style={{ bottom: 0 }}
-                />
-              </div>
-            </div>
-          )}
-
-          <div
-            className="row mx-0 form-control color-picker-input"
-            onClick={() => setShowPicker(true)}
-            data-cy={`${String(cyLabel)}-picker`}
-          >
-            <div
-              className="col-auto"
-              style={{
-                float: 'right',
-                width: '20px',
-                height: '20px',
-                backgroundColor: value,
-                border: `0.25px solid ${['#ffffff', '#fff', '#1f2936'].includes(value) && '#c5c8c9'}`,
+        <div className="field">
+          {!asBoxShadowPopover ? (
+            <>
+              {ColorPicker()}
+              {ColorPickerInputBox()}
+            </>
+          ) : (
+            <OverlayTrigger
+              onToggle={(showPicker) => {
+                setShowPicker(showPicker);
               }}
-              data-cy={`${String(cyLabel)}-picker-icon`}
-            ></div>
-            <div className="col" data-cy={`${String(cyLabel)}-value`}>
-              {value}
-            </div>
-          </div>
+              show={showPicker}
+              trigger="click"
+              placement={'left'}
+              rootClose={true}
+              overlay={eventPopover()}
+            >
+              {ColorPickerInputBox()}
+            </OverlayTrigger>
+          )}
         </div>
       </div>
-      {!hideFx && (
-        <div className="col-auto pt-0 style-fx fx-common">
-          <FxButton active={false} onPress={forceCodeBox} dataCy={String(cyLabel)} />
-        </div>
-      )}
     </div>
   );
 };
diff --git a/frontend/src/Editor/CodeBuilder/Elements/FxButton.jsx b/frontend/src/Editor/CodeBuilder/Elements/FxButton.jsx
index 303b6965db..b55c9fbf9c 100644
--- a/frontend/src/Editor/CodeBuilder/Elements/FxButton.jsx
+++ b/frontend/src/Editor/CodeBuilder/Elements/FxButton.jsx
@@ -1,3 +1,4 @@
+import Fx from '@/_ui/Icon/bulkIcons/Fx';
 import React from 'react';
 
 export default function FxButton({ active, onPress, dataCy }) {
@@ -8,7 +9,7 @@ export default function FxButton({ active, onPress, dataCy }) {
       onClick={onPress}
       data-cy={`${dataCy}-fx-button`}
     >
-      Fx
+      <Fx width={16} fill={active ? '#3E63DD' : '#889096'} />
     </div>
   );
 }
diff --git a/frontend/src/Editor/CodeBuilder/Elements/Number.jsx b/frontend/src/Editor/CodeBuilder/Elements/Number.jsx
index e3b3c743f3..7811562e12 100644
--- a/frontend/src/Editor/CodeBuilder/Elements/Number.jsx
+++ b/frontend/src/Editor/CodeBuilder/Elements/Number.jsx
@@ -1,36 +1,21 @@
 import React, { useState } from 'react';
-import FxButton from './FxButton';
 
-export const Number = ({ value, onChange, forceCodeBox, cyLabel }) => {
+export const Number = ({ value, onChange, cyLabel }) => {
   const [number, setNumber] = useState(value ? value : 0);
-  const darkMode = localStorage.getItem('darkMode') === 'true';
 
-  const numberTheme = {
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: darkMode && '#fff',
-    width: '100%',
-  };
   return (
     <>
-      <div className="row fx-container">
-        <div className="col">
-          <div className="field form-control" style={{ padding: '0.225rem 0.35rem' }}>
-            <input
-              style={numberTheme}
-              type="number"
-              onChange={(e) => {
-                setNumber(e.target.value);
-                onChange(`{{${e.target.value}}}`);
-              }}
-              value={number}
-              data-cy={`${String(cyLabel)}-input-field`}
-            />
-          </div>
-        </div>
-        <div className="col-auto pt-0 style-fx fx-common">
-          <FxButton active={false} onPress={forceCodeBox} dataCy={String(cyLabel)} />
-        </div>
+      <div className="field tj-app-input" style={{ padding: '0.225rem 0.35rem' }}>
+        <input
+          className={'inspector-field-number'}
+          type="number"
+          onChange={(e) => {
+            setNumber(e.target.value);
+            onChange(`{{${e.target.value}}}`);
+          }}
+          value={number}
+          data-cy={`${String(cyLabel)}-input-field`}
+        />
       </div>
     </>
   );
diff --git a/frontend/src/Editor/CodeBuilder/Elements/Select.jsx b/frontend/src/Editor/CodeBuilder/Elements/Select.jsx
index e695809417..cd2d1e170e 100644
--- a/frontend/src/Editor/CodeBuilder/Elements/Select.jsx
+++ b/frontend/src/Editor/CodeBuilder/Elements/Select.jsx
@@ -1,30 +1,77 @@
 import React from 'react';
 import SelectComponent from '@/_ui/Select';
-import FxButton from './FxButton';
+import { components } from 'react-select';
+import Check from '@/_ui/Icon/solidIcons/Check';
 
-export const Select = ({ value, onChange, forceCodeBox, meta }) => {
+const Option = (props) => {
+  return (
+    <components.Option {...props}>
+      <div className="d-flex justify-content-between">
+        <span>{props.label}</span>
+        {props.isSelected && (
+          <span>
+            <Check width={'20'} fill={'#3E63DD'} />
+          </span>
+        )}
+      </div>
+    </components.Option>
+  );
+};
+
+const selectCustomStyles = {
+  control: (base, state) => {
+    return {
+      ...base,
+      border: state.isFocused ? '1px solid #3E63DD' : '1px solid #cccccc',
+      boxShadow: state.isFocused ? '0px 0px 6px #3E63DD' : 'none',
+      backgroundColor: state.isFocused ? 'var(--indigo2)' : 'var(--base)',
+      '&:hover': {
+        border: '1px solid #3E63DD !important',
+        boxShadow: '0px 0px 6px #3E63DD',
+      },
+      borderRadius: '6px',
+      width: '144px',
+      minHeight: '32px',
+    };
+  },
+
+  dropdownIndicator: (base) => ({
+    ...base,
+    padding: '4px',
+  }),
+  menuList: (base) => ({
+    ...base,
+    padding: '4px',
+  }),
+  option: (base, state) => ({
+    ...base,
+    backgroundColor: state.isFocused ? '#F0F4FF !important' : 'white',
+    color: '#11181C',
+    borderRadius: '6px',
+  }),
+};
+
+export const Select = ({ value, onChange, meta }) => {
   return (
     <div
       className="row fx-container"
       data-cy={`dropdown-${meta.displayName ? String(meta.displayName).toLowerCase().replace(/\s+/g, '-') : 'common'}`}
     >
-      <div className="col">
-        <div className="field mb-3" onClick={(e) => e.stopPropagation()}>
-          <SelectComponent
-            options={meta.options}
-            value={value}
-            hasSearch={true}
-            onChange={onChange}
-            width={224}
-            height={32}
-          />
-        </div>
-      </div>
-      <div className="col-auto pt-0 style-fx fx-common">
-        <FxButton
-          active={false}
-          onPress={forceCodeBox}
-          dataCy={`${meta.displayName ? String(meta.displayName).toLowerCase().replace(/\s+/g, '-') : 'common'}`}
+      <div className="field" onClick={(e) => e.stopPropagation()}>
+        <SelectComponent
+          options={meta.options}
+          value={value}
+          hasSearch={true}
+          onChange={onChange}
+          width={224}
+          height={32}
+          styles={selectCustomStyles}
+          useCustomStyles={true}
+          classNamePrefix="inspector-select"
+          components={{
+            IndicatorSeparator: () => null,
+            Option,
+          }}
         />
       </div>
     </div>
diff --git a/frontend/src/Editor/CodeBuilder/Elements/Toggle.jsx b/frontend/src/Editor/CodeBuilder/Elements/Toggle.jsx
index 6f96a8066d..b4b9e5621e 100644
--- a/frontend/src/Editor/CodeBuilder/Elements/Toggle.jsx
+++ b/frontend/src/Editor/CodeBuilder/Elements/Toggle.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
-import FxButton from './FxButton';
 
-export const Toggle = ({ value, onChange, forceCodeBox, cyLabel }) => {
+export const Toggle = ({ value, onChange, cyLabel }) => {
   return (
     <div className="row fx-container">
-      <div className="col">
-        <div className="field mb-3">
-          <label className="form-check form-switch my-1">
+      <div className="col d-flex align-items-center">
+        <div className="field">
+          <label
+            className="form-check form-switch mb-0 d-flex justify-content-end"
+            style={{ marginBottom: '0px', paddingLeft: '28px' }}
+          >
             <input
               className="form-check-input"
               type="checkbox"
@@ -14,13 +16,9 @@ export const Toggle = ({ value, onChange, forceCodeBox, cyLabel }) => {
               checked={value}
               data-cy={`${cyLabel}-toggle-button`}
             />
-            {/* <ToolTip label={paramLabel} meta={{}} labelClass="form-check-label" /> */}
           </label>
         </div>
       </div>
-      <div className="col-auto pt-0 style-fx fx-common">
-        <FxButton active={false} onPress={forceCodeBox} dataCy={cyLabel} />
-      </div>
     </div>
   );
 };
diff --git a/frontend/src/Editor/CodeBuilder/TypeMapping.js b/frontend/src/Editor/CodeBuilder/TypeMapping.js
index e48af59cee..04f2a70f13 100644
--- a/frontend/src/Editor/CodeBuilder/TypeMapping.js
+++ b/frontend/src/Editor/CodeBuilder/TypeMapping.js
@@ -9,4 +9,5 @@ export const TypeMapping = {
   alignButtons: 'AlignButtons',
   number: 'Number',
   boxShadow: 'BoxShadow',
+  clientServerSwitch: 'ClientServerSwitch',
 };
diff --git a/frontend/src/Editor/Components/BoundedBox/RenderEditor.jsx b/frontend/src/Editor/Components/BoundedBox/RenderEditor.jsx
index d1a153ec32..fd272e00a0 100644
--- a/frontend/src/Editor/Components/BoundedBox/RenderEditor.jsx
+++ b/frontend/src/Editor/Components/BoundedBox/RenderEditor.jsx
@@ -46,7 +46,8 @@ export const RenderEditor = ({
               },
             });
 
-            setExposedVariable('annotations', getExposedAnnotations(annotations)).then(() => fireEvent('onChange'));
+            setExposedVariable('annotations', getExposedAnnotations(annotations));
+            fireEvent('onChange');
             return annotations;
           });
         }}
diff --git a/frontend/src/Editor/Components/BoundedBox/RenderHighlight.jsx b/frontend/src/Editor/Components/BoundedBox/RenderHighlight.jsx
index 60f281d363..e4b68330a2 100644
--- a/frontend/src/Editor/Components/BoundedBox/RenderHighlight.jsx
+++ b/frontend/src/Editor/Components/BoundedBox/RenderHighlight.jsx
@@ -51,7 +51,8 @@ export const RenderHighlight = ({
               const annotations = prevState.filter((annotation) => {
                 return annotation.data.id !== data.id;
               });
-              setExposedVariable('annotations', getExposedAnnotations(annotations)).then(() => fireEvent('onChange'));
+              setExposedVariable('annotations', getExposedAnnotations(annotations));
+              fireEvent('onChange');
               return annotations;
             });
           }}
@@ -95,7 +96,8 @@ export const RenderHighlight = ({
                   }
                   return acc;
                 }, []);
-                setExposedVariable('annotations', getExposedAnnotations(annotations)).then(() => fireEvent('onChange'));
+                setExposedVariable('annotations', getExposedAnnotations(annotations));
+                fireEvent('onChange');
 
                 return annotations;
               });
diff --git a/frontend/src/Editor/Components/Button.jsx b/frontend/src/Editor/Components/Button.jsx
index fa54e57ee0..635b994416 100644
--- a/frontend/src/Editor/Components/Button.jsx
+++ b/frontend/src/Editor/Components/Button.jsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 const tinycolor = require('tinycolor2');
 
 export const Button = function Button(props) {
-  const { height, properties, styles, fireEvent, registerAction, id, dataCy, setExposedVariable } = props;
+  const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable } = props;
   const { backgroundColor, textColor, borderRadius, loaderColor, disabledState, borderColor, boxShadow } = styles;
 
   const [label, setLabel] = useState(properties.text);
@@ -45,48 +45,31 @@ export const Button = function Button(props) {
     boxShadow: boxShadow,
   };
 
-  registerAction(
-    'click',
-    async function () {
+  useEffect(() => {
+    setExposedVariable('click', async function () {
       if (!disable) {
         fireEvent('onClick');
       }
-    },
-    [disable]
-  );
-
-  registerAction(
-    'setText',
-    async function (text) {
+    });
+    setExposedVariable('setText', async function (text) {
       setLabel(text);
       setExposedVariable('buttonText', text);
-    },
-    [setLabel]
-  );
+    });
 
-  registerAction(
-    'disable',
-    async function (value) {
+    setExposedVariable('disable', async function (value) {
       setDisable(value);
-    },
-    [setDisable]
-  );
+    });
 
-  registerAction(
-    'visibility',
-    async function (value) {
+    setExposedVariable('visibility', async function (value) {
       setVisibility(value);
-    },
-    [setVisibility]
-  );
+    });
 
-  registerAction(
-    'loading',
-    async function (value) {
+    setExposedVariable('loading', async function (value) {
       setLoading(value);
-    },
-    [setLoading]
-  );
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disable, setLabel, setDisable, setVisibility, setLoading]);
 
   const hasCustomBackground = backgroundColor?.charAt() === '#';
   if (hasCustomBackground) {
diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx
index 665cbebb1a..9711820bc7 100644
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@@ -65,16 +65,20 @@ export const ButtonGroup = function Button({
       const copyDefaultActive = defaultActive;
       copyDefaultActive?.splice(copyDefaultActive?.indexOf(values[index]), 1);
       setDefaultActive(copyDefaultActive);
-      setExposedVariable('selected', copyDefaultActive.join(',')).then(() => fireEvent('onClick'));
+      setExposedVariable('selected', copyDefaultActive.join(','));
+      fireEvent('onClick');
     } else if (multiSelection) {
-      setExposedVariable('selected', [...defaultActive, values[index]].join(',')).then(() => fireEvent('onClick'));
+      setExposedVariable('selected', [...defaultActive, values[index]].join(','));
+      fireEvent('onClick');
       setDefaultActive([...defaultActive, values[index]]);
     } else if (!multiSelection) {
-      setExposedVariable('selected', [values[index]]).then(() => fireEvent('onClick'));
+      setExposedVariable('selected', [values[index]]);
+      fireEvent('onClick');
       setDefaultActive([values[index]]);
     }
     if (values?.length == 0) {
-      setExposedVariable('selected', []).then(() => fireEvent('onClick'));
+      setExposedVariable('selected', []);
+      fireEvent('onClick');
     }
   };
   return (
diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx
index e118e2788b..5601faf9d9 100644
--- a/frontend/src/Editor/Components/Checkbox.jsx
+++ b/frontend/src/Editor/Components/Checkbox.jsx
@@ -6,7 +6,6 @@ export const Checkbox = function Checkbox({
   styles,
   fireEvent,
   setExposedVariable,
-  registerAction,
   darkMode,
   dataCy,
 }) {
@@ -28,20 +27,23 @@ export const Checkbox = function Checkbox({
     }
   }
   useEffect(() => {
+    const setCheckedAndNotify = async (status) => {
+      await setExposedVariable('value', status);
+      if (status) {
+        fireEvent('onCheck');
+      } else {
+        fireEvent('onUnCheck');
+      }
+      setChecked(status);
+    };
+
     setExposedVariable('value', defaultValueFromProperties);
     setDefaultvalue(defaultValueFromProperties);
     setChecked(defaultValueFromProperties);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValueFromProperties]);
+    setExposedVariable('setChecked', setCheckedAndNotify);
 
-  registerAction(
-    'setChecked',
-    async function (status) {
-      setExposedVariable('value', status).then(() => (status ? fireEvent('onCheck') : fireEvent('onUnCheck')));
-      setChecked(status);
-    },
-    [setChecked]
-  );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValueFromProperties, setChecked]);
 
   return (
     <div
diff --git a/frontend/src/Editor/Components/ColorPicker.jsx b/frontend/src/Editor/Components/ColorPicker.jsx
index ccb3ae04a7..3646ce8ba2 100644
--- a/frontend/src/Editor/Components/ColorPicker.jsx
+++ b/frontend/src/Editor/Components/ColorPicker.jsx
@@ -8,7 +8,6 @@ export const ColorPicker = function ({
   setExposedVariable,
   darkMode,
   height,
-  registerAction,
   fireEvent,
   dataCy,
 }) {
@@ -46,25 +45,26 @@ export const ColorPicker = function ({
     return `rgba(${rgbaArray[0]}, ${rgbaArray[1]}, ${rgbaArray[2]})`;
   };
 
-  registerAction(
-    'setColor',
-    async function (colorCode) {
+  useEffect(() => {
+    setExposedVariable('setColor', async function (colorCode) {
       if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(colorCode)) {
         if (colorCode !== color) {
           setColor(colorCode);
           setExposedVariable('selectedColorHex', `${colorCode}`);
           setExposedVariable('selectedColorRGB', hexToRgb(colorCode));
-          setExposedVariable('selectedColorRGBA', hexToRgba(colorCode)).then(() => fireEvent('onChange'));
+          setExposedVariable('selectedColorRGBA', hexToRgba(colorCode));
+          fireEvent('onChange');
         }
       } else {
         setExposedVariable('selectedColorHex', 'undefined');
         setExposedVariable('selectedColorRGB', 'undefined');
-        setExposedVariable('selectedColorRGBA', 'undefined').then(() => fireEvent('onChange'));
+        setExposedVariable('selectedColorRGBA', 'undefined');
+        fireEvent('onChange');
         setColor('Invalid Color');
       }
-    },
-    [setColor]
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setColor]);
 
   useEffect(() => {
     if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(defaultColor)) {
@@ -90,7 +90,8 @@ export const ColorPicker = function ({
       setColor(hexColor);
       setExposedVariable('selectedColorHex', `${hexColor}`);
       setExposedVariable('selectedColorRGB', `rgb(${r},${g},${b})`);
-      setExposedVariable('selectedColorRGBA', `rgb(${r},${g},${b},${a})`).then(() => fireEvent('onChange'));
+      setExposedVariable('selectedColorRGBA', `rgb(${r},${g},${b},${a})`);
+      fireEvent('onChange');
     }
   };
   //background color style for the div dispaying box filled by selected color
diff --git a/frontend/src/Editor/Components/Datepicker.jsx b/frontend/src/Editor/Components/Datepicker.jsx
index 2a46afc4d7..6e71e40582 100644
--- a/frontend/src/Editor/Components/Datepicker.jsx
+++ b/frontend/src/Editor/Components/Datepicker.jsx
@@ -23,6 +23,7 @@ export const Datepicker = function Datepicker({
 
   const [date, setDate] = useState(null);
   const [excludedDates, setExcludedDates] = useState([]);
+  const [showValidationError, setShowValidationError] = useState(false);
 
   const selectedDateFormat = enableTime ? `${format} LT` : format;
 
@@ -37,11 +38,11 @@ export const Datepicker = function Datepicker({
   };
 
   const onDateChange = (date) => {
+    setShowValidationError(true);
     setDate(date);
     const dateString = computeDateString(date);
-    setExposedVariable('value', dateString).then(() => {
-      fireEvent('onSelect');
-    });
+    setExposedVariable('value', dateString);
+    fireEvent('onSelect');
   };
 
   useEffect(() => {
@@ -89,9 +90,9 @@ export const Datepicker = function Datepicker({
       }}
     >
       <DatePickerComponent
-        className={`input-field form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon px-2 ${
-          darkMode ? 'bg-dark color-white' : 'bg-light'
-        }`}
+        className={`input-field form-control ${
+          !isValid && showValidationError ? 'is-invalid' : ''
+        } validation-without-icon px-2 ${darkMode ? 'bg-dark color-white' : 'bg-light'}`}
         selected={date}
         value={date !== null ? computeDateString(date) : 'select date'}
         onChange={(date) => onDateChange(date)}
@@ -109,7 +110,7 @@ export const Datepicker = function Datepicker({
       />
 
       <div data-cy="date-picker-invalid-feedback" className={`invalid-feedback ${isValid ? '' : 'd-flex'}`}>
-        {validationError}
+        {showValidationError && validationError}
       </div>
     </div>
   );
diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index 2e9ed3d735..c7152905e4 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React, { useState, useEffect } from 'react';
 import Select from 'react-select';
+
 export const DropDown = function DropDown({
   height,
   validate,
@@ -13,13 +14,16 @@ export const DropDown = function DropDown({
   id,
   component,
   exposedVariables,
-  registerAction,
   dataCy,
 }) {
   let { label, value, advanced, schema, placeholder, display_values, values } = properties;
   const { selectedTextColor, borderRadius, visibility, disabledState, justifyContent, boxShadow } = styles;
   const [currentValue, setCurrentValue] = useState(() => (advanced ? findDefaultItem(schema) : value));
   const { value: exposedValue } = exposedVariables;
+  const [showValidationError, setShowValidationError] = useState(false);
+
+  const validationData = validate(value);
+  const { isValid, validationError } = validationData;
 
   function findDefaultItem(schema) {
     const foundItem = schema?.find((item) => item?.default === true);
@@ -72,16 +76,12 @@ export const DropDown = function DropDown({
     }
   }
 
-  registerAction(
-    'selectOption',
-    async function (value) {
+  useEffect(() => {
+    setExposedVariable('selectOption', async function (value) {
       selectOption(value);
-    },
-    [JSON.stringify(values), setCurrentValue, JSON.stringify(display_values)]
-  );
-
-  const validationData = validate(value);
-  const { isValid, validationError } = validationData;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(values), setCurrentValue, JSON.stringify(display_values)]);
 
   useEffect(() => {
     setExposedVariable('isValid', isValid);
@@ -244,9 +244,11 @@ export const DropDown = function DropDown({
             isDisabled={disabledState}
             value={selectOptions.filter((option) => option.value === currentValue)[0] ?? null}
             onChange={(selectedOption, actionProps) => {
+              setShowValidationError(true);
               if (actionProps.action === 'select-option') {
                 setCurrentValue(selectedOption.value);
-                setExposedVariable('value', selectedOption.value).then(() => fireEvent('onSelect'));
+                setExposedVariable('value', selectedOption.value);
+                fireEvent('onSelect');
                 setExposedVariable('selectedOptionLabel', selectedOption.label);
               }
             }}
@@ -260,7 +262,9 @@ export const DropDown = function DropDown({
           />
         </div>
       </div>
-      <div className={`invalid-feedback ${isValid ? '' : visibility ? 'd-flex' : 'none'}`}>{validationError}</div>
+      <div className={`invalid-feedback ${isValid ? '' : visibility ? 'd-flex' : 'none'}`}>
+        {showValidationError && validationError}
+      </div>
     </>
   );
 };
diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx
index 6492e549ad..517acdf545 100644
--- a/frontend/src/Editor/Components/FilePicker.jsx
+++ b/frontend/src/Editor/Components/FilePicker.jsx
@@ -14,7 +14,7 @@ export const FilePicker = ({
   onEvent,
   darkMode,
   styles,
-  registerAction,
+  setExposedVariable,
   dataCy,
 }) => {
   const currentState = useCurrentState();
@@ -294,17 +294,12 @@ export const FilePicker = ({
       setShowSelectedFiles(false);
     }
     onComponentOptionChanged(component, 'file', selectedFiles, id);
+    setExposedVariable('clearFiles', async function () {
+      setSelectedFiles([]);
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFiles]);
 
-  registerAction(
-    'clearFiles',
-    async function () {
-      setSelectedFiles([]);
-    },
-    [setSelectedFiles]
-  );
-
   return (
     <section>
       <div className="container" {...getRootProps({ style, className: 'dropzone' })} data-cy={dataCy}>
diff --git a/frontend/src/Editor/Components/Form/Form.jsx b/frontend/src/Editor/Components/Form/Form.jsx
index 59fa0c043e..dd87fb0f10 100644
--- a/frontend/src/Editor/Components/Form/Form.jsx
+++ b/frontend/src/Editor/Components/Form/Form.jsx
@@ -7,7 +7,7 @@ import _, { omit } from 'lodash';
 import { Box } from '@/Editor/Box';
 import { generateUIComponents } from './FormUtils';
 import { useMounted } from '@/_hooks/use-mount';
-
+import { removeFunctionObjects } from '@/_helpers/appUtils';
 export const Form = function Form(props) {
   const {
     id,
@@ -22,7 +22,6 @@ export const Form = function Form(props) {
     currentState,
     fireEvent,
     properties,
-    registerAction,
     resetComponent,
     childComponents,
     onEvent,
@@ -51,20 +50,20 @@ export const Form = function Form(props) {
   const [isValid, setValidation] = useState(true);
   const [uiComponents, setUIComponents] = useState([]);
   const mounted = useMounted();
-  registerAction('resetForm', async function () {
-    resetComponent();
-  });
-  registerAction(
-    'submitForm',
-    async function () {
+
+  useEffect(() => {
+    setExposedVariable('resetForm', async function () {
+      resetComponent();
+    });
+    setExposedVariable('submitForm', async function () {
       if (isValid) {
         onEvent('onSubmit', { component }).then(() => resetComponent());
       } else {
         fireEvent('onInvalid');
       }
-    },
-    [isValid]
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isValid]);
 
   const extractData = (data) => {
     const result = {};
@@ -73,7 +72,7 @@ export const Form = function Form(props) {
       const item = data[key];
 
       if (item.name === 'Text') {
-        const textKey = item?.keyValue ?? item?.text;
+        const textKey = item?.formKey ?? item?.text;
         const nextItem = data[parseInt(key) + 1];
 
         if (nextItem && nextItem.name !== 'Text') {
@@ -87,11 +86,15 @@ export const Form = function Form(props) {
   };
 
   useEffect(() => {
-    // resetComponent()
     if (mounted) resetComponent();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(JSONSchema)]);
 
+  useEffect(() => {
+    advanced && setExposedVariable('children', []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [advanced]);
+
   useEffect(() => {
     setUIComponents(generateUIComponents(JSONSchema, advanced));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -108,6 +111,7 @@ export const Form = function Form(props) {
 
     if (childComponents === null) {
       setExposedVariable('data', formattedChildData);
+      !advanced && setExposedVariable('children', formattedChildData);
       setExposedVariable('isValid', childValidation);
       return setValidation(childValidation);
     }
@@ -125,10 +129,11 @@ export const Form = function Form(props) {
     }
     formattedChildData = Object.fromEntries(
       // eslint-disable-next-line no-unused-vars
-      Object.entries(formattedChildData).map(([key, { keyValue, ...rest }]) => [key, rest])
+      Object.entries(formattedChildData).map(([key, { formKey, ...rest }]) => [key, rest]) // removing formkey from final exposed data
     );
-
-    setExposedVariable('data', formattedChildData);
+    const formattedChildDataClone = _.cloneDeep(formattedChildData);
+    !advanced && setExposedVariable('children', formattedChildDataClone);
+    setExposedVariable('data', removeFunctionObjects(formattedChildData));
     setExposedVariable('isValid', childValidation);
     setValidation(childValidation);
 
@@ -184,18 +189,13 @@ export const Form = function Form(props) {
     onOptionChange({ component, optionName, value, componentId });
     return containerProps.onComponentOptionChanged(component, optionName, value);
   }
-  function findKeyByLabel(obj, label) {
-    const keys = Object.keys(obj);
-    return keys.find((key) => obj[key].label === label);
-  }
-  const onOptionChange = ({ component, optionName, value, componentId }) => {
-    let keyValue = JSONSchema?.properties && findKeyByLabel(JSONSchema.properties, value);
 
+  const onOptionChange = ({ component, optionName, value, componentId }) => {
     const optionData = {
       ...(childDataRef.current[componentId] ?? {}),
       name: component.name,
       [optionName]: value,
-      keyValue: keyValue, //adding this to use as exposed key
+      formKey: component?.formKey, //adding this to use as exposed key
     };
     childDataRef.current = { ...childDataRef.current, [componentId]: optionData };
     setChildrenData(childDataRef.current);
diff --git a/frontend/src/Editor/Components/Form/FormUtils.js b/frontend/src/Editor/Components/Form/FormUtils.js
index 040eae5e1e..440e6e568a 100644
--- a/frontend/src/Editor/Components/Form/FormUtils.js
+++ b/frontend/src/Editor/Components/Form/FormUtils.js
@@ -61,7 +61,6 @@ export function generateUIComponents(JSONSchema, advanced) {
               uiComponentsDraft[index * 2 + 1]['definition']['styles']['disabledState']['value'] =
                 value?.styles?.disabled;
             if (value?.styles?.visibility) {
-              console.log('value--', value?.styles?.visibility, typeof value?.styles?.visibility);
               uiComponentsDraft[index * 2 + 1]['definition']['styles']['visibility']['value'] = validBooleanChecker(
                 value?.styles?.visibility
               );
@@ -72,7 +71,7 @@ export function generateUIComponents(JSONSchema, advanced) {
             if (value?.styles?.justifyContent)
               uiComponentsDraft[index * 2 + 1]['definition']['styles']['justifyContent']['value'] =
                 value?.styles?.justifyContent;
-            if (value?.customRule)
+            if (value?.validation?.customRule)
               uiComponentsDraft[index * 2 + 1]['definition']['validation']['customRule']['value'] = value?.customRule;
             if (value?.displayValues)
               uiComponentsDraft[index * 2 + 1]['definition']['properties']['display_values']['value'] =
@@ -197,9 +196,9 @@ export function generateUIComponents(JSONSchema, advanced) {
               uiComponentsDraft[index * 2 + 1]['definition']['styles']['visibility']['value'] = validBooleanChecker(
                 value?.styles?.visibility
               );
-
-            if (value?.customRule)
-              uiComponentsDraft[index * 2 + 1]['definition']['validation']['customRule']['value'] = value?.customRule;
+            if (value?.validation?.customRule)
+              uiComponentsDraft[index * 2 + 1]['definition']['validation']['customRule']['value'] =
+                value?.validation?.customRule;
             if (value?.value)
               uiComponentsDraft[index * 2 + 1]['definition']['properties']['defaultValue']['value'] = value?.value;
             if (value?.disabledDates)
@@ -409,8 +408,9 @@ export function generateUIComponents(JSONSchema, advanced) {
           default:
             return;
         }
-        // converting label/key as text input
+        // converting label/key as text ui element/component
         uiComponentsDraft[index * 2]['definition']['properties']['text']['value'] = value?.label ?? key;
+        uiComponentsDraft[index * 2]['formKey'] = key;
       }
     });
     // adding title as first item
diff --git a/frontend/src/Editor/Components/Icon.jsx b/frontend/src/Editor/Components/Icon.jsx
index 67a0c4cabb..feac52b001 100644
--- a/frontend/src/Editor/Components/Icon.jsx
+++ b/frontend/src/Editor/Components/Icon.jsx
@@ -3,7 +3,17 @@ import React, { useState, useEffect } from 'react';
 import * as Icons from '@tabler/icons-react';
 import cx from 'classnames';
 
-export const Icon = ({ properties, styles, fireEvent, width, height, registerAction, darkMode, dataCy, component }) => {
+export const Icon = ({
+  properties,
+  styles,
+  fireEvent,
+  width,
+  height,
+  setExposedVariable,
+  darkMode,
+  dataCy,
+  component,
+}) => {
   const { icon } = properties;
   const { iconColor, visibility, boxShadow } = styles;
   // eslint-disable-next-line import/namespace
@@ -20,17 +30,15 @@ export const Icon = ({ properties, styles, fireEvent, width, height, registerAct
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visibility]);
 
-  registerAction(
-    'setVisibility',
-    async function (visibility) {
+  useEffect(() => {
+    setExposedVariable('setVisibility', async function (visibility) {
       setIconVisibility(visibility);
-    },
-    [setIconVisibility]
-  );
-
-  registerAction('click', async function () {
-    fireEvent('onClick');
-  });
+    });
+    setExposedVariable('click', async function () {
+      fireEvent('onClick');
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIconVisibility]);
 
   return (
     <div
@@ -39,7 +47,7 @@ export const Icon = ({ properties, styles, fireEvent, width, height, registerAct
     >
       <IconElement
         color={color}
-        style={{ width, height, boxShadow }}
+        style={{ width, height, boxShadow, color: iconColor }}
         onClick={(event) => {
           event.stopPropagation();
           fireEvent('onClick');
diff --git a/frontend/src/Editor/Components/Kanban/Components/Item.jsx b/frontend/src/Editor/Components/Kanban/Components/Item.jsx
index e4413008b0..ae4582d92f 100644
--- a/frontend/src/Editor/Components/Kanban/Components/Item.jsx
+++ b/frontend/src/Editor/Components/Kanban/Components/Item.jsx
@@ -60,10 +60,9 @@ export const Item = React.memo(
               target?.parent?.classList?.contains('resizer-active')
             )
               return;
-            setExposedVariable('lastSelectedCard', cardDataAsObj[value]).then(() => {
-              setShowModal(true);
-              fireEvent('onCardSelected');
-            });
+            setExposedVariable('lastSelectedCard', cardDataAsObj[value]);
+            setShowModal(true);
+            fireEvent('onCardSelected');
           }}
         >
           <div
diff --git a/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx b/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx
index 885a9964b3..ccc4954153 100644
--- a/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx
+++ b/frontend/src/Editor/Components/Kanban/KanbanBoard.jsx
@@ -37,8 +37,7 @@ const dropAnimation = {
 const TRASH_ID = 'void';
 
 export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
-  const { properties, fireEvent, setExposedVariable, setExposedVariables, registerAction, exposedVariables, styles } =
-    kanbanProps;
+  const { properties, fireEvent, setExposedVariable, setExposedVariables, exposedVariables, styles } = kanbanProps;
   const { lastSelectedCard = {} } = exposedVariables;
   const { columnData, cardData, cardWidth, cardHeight, showDeleteButton, enableAddCard } = properties;
   const { accentColor } = styles;
@@ -78,9 +77,7 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
   useEffect(() => {
     if (shouldUpdateData.current) {
       shouldUpdateData.current = false;
-      setExposedVariable('updatedCardData', getData(cardDataAsObj)).then(() => {
-        // fireEvent('onUpdate');
-      });
+      setExposedVariable('updatedCardData', getData(cardDataAsObj));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shouldUpdateData.current, JSON.stringify(cardDataAsObj)]);
@@ -89,15 +86,14 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
     droppableItemsColumnId.current = containers.find((container) => items[container]?.length > 0);
   }, [items, containers]);
 
-  registerAction(
-    'updateCardData',
-    async function (cardId, value) {
+  useEffect(() => {
+    setExposedVariable('updateCardData', async function (cardId, value) {
       if (cardDataAsObj[cardId] === undefined) return toast.error('Card not found');
       const cardToBeUpdated = { ...cardDataAsObj[cardId] };
       cardDataAsObj[cardId] = value;
       const diffKeys = Object.keys(diff(cardToBeUpdated, value));
       if (lastSelectedCard?.id === cardId) {
-        return setExposedVariables({
+        setExposedVariables({
           lastSelectedCard: cardDataAsObj[cardId],
           lastUpdatedCard: cardDataAsObj[cardId],
           lastCardUpdate: diffKeys.map((key) => {
@@ -106,20 +102,17 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
             };
           }),
           updatedCardData: getData(cardDataAsObj),
-        }).then(() => {
-          fireEvent('onUpdate');
         });
-      }
-      setExposedVariable('updatedCardData', getData(cardDataAsObj)).then(() => {
         fireEvent('onUpdate');
-      });
-    },
-    [lastSelectedCard, JSON.stringify(cardDataAsObj)]
-  );
+      }
+      setExposedVariable('updatedCardData', getData(cardDataAsObj));
+      fireEvent('onUpdate');
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastSelectedCard, JSON.stringify(cardDataAsObj)]);
 
-  registerAction(
-    'moveCard',
-    async function (cardId, columnId) {
+  useEffect(() => {
+    setExposedVariable('moveCard', async function (cardId, columnId) {
       if (cardDataAsObj[cardId] === undefined) return toast.error('Card not found');
       if (cardDataAsObj[cardId]['columnId'] === columnId) return;
       const cardToBeMoved = { ...cardDataAsObj[cardId] };
@@ -128,7 +121,7 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
       setItems((items) => ({
         ...items,
         [originColumnId]: items[originColumnId].filter((id) => id !== cardId),
-        [columnId]: [cardId, ...items[columnId]],
+        [columnId]: items[columnId] && [cardId, ...items[columnId]],
       }));
       cardDataAsObj[cardId] = { ...cardDataAsObj[cardId], columnId: columnId };
       const lastCardMovement = {
@@ -138,14 +131,14 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
         destinationIndex: 0,
         cardDetails: { ...cardDataAsObj[cardId] },
       };
-      setExposedVariable('lastCardMovement', lastCardMovement).then(() => fireEvent('onCardMoved'));
-    },
-    [items, JSON.stringify(cardDataAsObj)]
-  );
+      setExposedVariable('lastCardMovement', lastCardMovement);
+      fireEvent('onCardMoved');
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, JSON.stringify(cardDataAsObj)]);
 
-  registerAction(
-    'addCard',
-    async function (cardDetails) {
+  useEffect(() => {
+    setExposedVariable('addCard', async function (cardDetails) {
       if (cardDataAsObj[cardDetails.id]) return toast.error('Card already exists');
       if (cardDetails?.columnId === undefined || items[cardDetails?.columnId] === undefined)
         return toast.error('Column Id not found');
@@ -156,17 +149,14 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
         [columnId]: [...items[columnId], cardDetails.id],
       }));
 
-      setExposedVariables({ lastAddedCard: { ...cardDetails }, updatedCardData: getData(cardDataAsObj) }).then(() => {
-        fireEvent('onCardAdded');
-        // fireEvent('onUpdate');
-      });
-    },
-    [items, JSON.stringify(cardDataAsObj)]
-  );
+      setExposedVariables({ lastAddedCard: { ...cardDetails }, updatedCardData: getData(cardDataAsObj) });
+      fireEvent('onCardAdded');
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, JSON.stringify(cardDataAsObj)]);
 
-  registerAction(
-    'deleteCard',
-    async function (cardId) {
+  useEffect(() => {
+    setExposedVariable('deleteCard', async function (cardId) {
       if (cardDataAsObj[cardId] === undefined) return toast.error('Card not found');
       const columnId = cardDataAsObj[cardId]['columnId'];
       const deletedCard = cardDataAsObj[cardId];
@@ -176,13 +166,11 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
         ...items,
         [columnId]: items[columnId].filter((id) => id !== cardId),
       }));
-      setExposedVariables({ lastRemovedCard: { ...deletedCard }, updatedCardData: getData(cardDataAsObj) }).then(() => {
-        fireEvent('onCardRemoved');
-        // fireEvent('onUpdate');
-      });
-    },
-    [showModal, JSON.stringify(cardDataAsObj)]
-  );
+      setExposedVariables({ lastRemovedCard: { ...deletedCard }, updatedCardData: getData(cardDataAsObj) });
+      fireEvent('onCardRemoved');
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showModal, JSON.stringify(cardDataAsObj)]);
 
   const [clonedItems, setClonedItems] = useState(null);
   const sensors = useSensors(
@@ -292,9 +280,8 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
         ...items,
         [activeContainer]: items[activeContainer].filter((id) => id !== activeId),
       }));
-      setExposedVariable('lastRemovedCard', { ...deletedCard }).then(() => {
-        fireEvent('onCardRemoved');
-      });
+      setExposedVariable('lastRemovedCard', { ...deletedCard });
+      fireEvent('onCardRemoved');
       setActiveId(null);
       return;
     }
@@ -319,15 +306,15 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
           destinationIndex: overIndex,
           cardDetails: { ...cardDataAsObj[active.id] },
         };
-        setExposedVariable('lastCardMovement', lastCardMovement).then(() => fireEvent('onCardMoved'));
+        setExposedVariable('lastCardMovement', lastCardMovement);
+        fireEvent('onCardMoved');
       } else if (cardMovementRef.current !== null) {
         const { cardDetails, destinationColumnId } = cardMovementRef.current;
         if (cardDetails?.id === over?.id && destinationColumnId === overContainer) {
           shouldUpdateData.current = true;
-          setExposedVariable('lastCardMovement', { ...cardMovementRef.current }).then(() => {
-            cardMovementRef.current = null;
-            fireEvent('onCardMoved');
-          });
+          setExposedVariable('lastCardMovement', { ...cardMovementRef.current });
+          cardMovementRef.current = null;
+          fireEvent('onCardMoved');
         }
       }
     }
diff --git a/frontend/src/Editor/Components/KanbanBoard/Board.jsx b/frontend/src/Editor/Components/KanbanBoard/Board.jsx
index e1557cf194..86a7e9408a 100644
--- a/frontend/src/Editor/Components/KanbanBoard/Board.jsx
+++ b/frontend/src/Editor/Components/KanbanBoard/Board.jsx
@@ -31,7 +31,8 @@ function Board({ height, state, colStyles, setState, fireEvent, setExposedVariab
     if (!newState[keyIndex]['cards']) [(newState[keyIndex]['cards'] = [])];
     newState[keyIndex]['cards'].push(newItem);
     setState(newState);
-    setExposedVariable('lastAddedCard', newItem).then(() => fireEvent('onCardAdded'));
+    setExposedVariable('lastAddedCard', newItem);
+    fireEvent('onCardAdded');
   };
 
   function onDragEnd(result) {
@@ -71,7 +72,8 @@ function Board({ height, state, colStyles, setState, fireEvent, setExposedVariab
         destinationCardIndex: dInd,
         cardDetails,
       };
-      setExposedVariable('lastCardMovement', movementDetails).then(() => fireEvent('onCardMoved'));
+      setExposedVariable('lastCardMovement', movementDetails);
+      fireEvent('onCardMoved');
     }
   }
 
@@ -91,7 +93,8 @@ function Board({ height, state, colStyles, setState, fireEvent, setExposedVariab
     const newState = state.map((column, index) => (index === columnIndex ? updatedColumn : column));
     setState(newState);
 
-    setExposedVariable('lastUpdatedCard', updatedCard).then(() => fireEvent('onCardUpdated'));
+    setExposedVariable('lastUpdatedCard', updatedCard);
+    fireEvent('onCardUpdated');
   };
 
   return (
diff --git a/frontend/src/Editor/Components/KanbanBoard/Card.jsx b/frontend/src/Editor/Components/KanbanBoard/Card.jsx
index febcdae996..0642987029 100644
--- a/frontend/src/Editor/Components/KanbanBoard/Card.jsx
+++ b/frontend/src/Editor/Components/KanbanBoard/Card.jsx
@@ -34,7 +34,8 @@ export const Card = ({
     const newState = [...state];
     const removedCard = newState[colIndex]['cards'].splice(cardIndex, 1)[0];
     updateCb(newState);
-    setExposedVariable('lastRemovedCard', removedCard).then(() => fireEvent('onCardRemoved'));
+    setExposedVariable('lastRemovedCard', removedCard);
+    fireEvent('onCardRemoved');
   };
 
   const draggableId = item.id ?? uuidv4();
@@ -54,7 +55,8 @@ export const Card = ({
 
   const handleCardClick = (event) => {
     handleEventPopoverOptions(event);
-    setExposedVariable('selectedCard', item).then(() => fireEvent('onCardSelected'));
+    setExposedVariable('selectedCard', item);
+    fireEvent('onCardSelected');
   };
 
   const target = React.useRef(null);
diff --git a/frontend/src/Editor/Components/Link.jsx b/frontend/src/Editor/Components/Link.jsx
index a859022cbb..ff993acc17 100644
--- a/frontend/src/Editor/Components/Link.jsx
+++ b/frontend/src/Editor/Components/Link.jsx
@@ -1,7 +1,7 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import cx from 'classnames';
 
-export const Link = ({ height, properties, styles, fireEvent, registerAction, dataCy }) => {
+export const Link = ({ height, properties, styles, fireEvent, setExposedVariable, dataCy }) => {
   const { linkTarget, linkText, targetType } = properties;
   const { textColor, textSize, underline, visibility, boxShadow } = styles;
   const clickRef = useRef();
@@ -12,13 +12,13 @@ export const Link = ({ height, properties, styles, fireEvent, registerAction, da
     boxShadow,
   };
 
-  registerAction(
-    'click',
-    async function () {
+  useEffect(() => {
+    setExposedVariable('click', async function () {
       clickRef.current.click();
-    },
-    []
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div
       className={cx('link-widget', { 'd-none': !visibility }, `${underline}`)}
diff --git a/frontend/src/Editor/Components/Listview.jsx b/frontend/src/Editor/Components/Listview.jsx
index 53dc9b78a8..271acb6863 100644
--- a/frontend/src/Editor/Components/Listview.jsx
+++ b/frontend/src/Editor/Components/Listview.jsx
@@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { SubContainer } from '../SubContainer';
 import _ from 'lodash';
 import { Pagination } from '@/_components/Pagination';
+import { removeFunctionObjects } from '@/_helpers/appUtils';
 
 export const Listview = function Listview({
   id,
@@ -46,14 +47,9 @@ export const Listview = function Listview({
   };
   const [selectedRowIndex, setSelectedRowIndex] = useState(undefined);
   const [positiveColumns, setPositiveColumns] = useState(columns);
+  const parentRef = useRef(null);
+  const [childrenData, setChildrenData] = useState({});
 
-  function onRowClicked(index) {
-    setSelectedRowIndex(index);
-    setExposedVariable('selectedRowId', index);
-    setExposedVariable('selectedRow', childrenData[index]);
-    fireEvent('onRowClicked');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }
   function onRecordClicked(index) {
     setSelectedRowIndex(index);
     setExposedVariable('selectedRecordId', index);
@@ -61,10 +57,13 @@ export const Listview = function Listview({
     fireEvent('onRecordClicked');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }
-
-  const parentRef = useRef(null);
-
-  const [childrenData, setChildrenData] = useState({});
+  function onRowClicked(index) {
+    setSelectedRowIndex(index);
+    setExposedVariable('selectedRowId', index);
+    setExposedVariable('selectedRow', childrenData[index]);
+    fireEvent('onRowClicked');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }
 
   useEffect(() => {
     if (columns < 1) {
@@ -73,12 +72,9 @@ export const Listview = function Listview({
   }, [columns]);
 
   useEffect(() => {
-    setExposedVariable('data', {});
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    setExposedVariable('data', childrenData);
+    const childrenDataClone = _.cloneDeep(childrenData);
+    setExposedVariable('data', removeFunctionObjects(childrenDataClone));
+    setExposedVariable('children', childrenData);
     if (selectedRowIndex != undefined) {
       setExposedVariable('selectedRowId', selectedRowIndex);
       setExposedVariable('selectedRow', childrenData[selectedRowIndex]);
diff --git a/frontend/src/Editor/Components/Map/Map.jsx b/frontend/src/Editor/Components/Map/Map.jsx
index 0e003ff6ed..1867bcf1e5 100644
--- a/frontend/src/Editor/Components/Map/Map.jsx
+++ b/frontend/src/Editor/Components/Map/Map.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useCallback, useEffect } from 'react';
 import { GoogleMap, LoadScript, Marker, Autocomplete, Polygon } from '@react-google-maps/api';
 import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
@@ -16,8 +17,7 @@ export const Map = function Map({
   onComponentOptionsChanged,
   onEvent,
   styles,
-  // canvasWidth,
-  registerAction,
+  setExposedVariable,
   dataCy,
   properties,
 }) {
@@ -126,13 +126,11 @@ export const Map = function Map({
     setAutoComplete(autocompleteInstance);
   }
 
-  registerAction(
-    'setLocation',
-    async function (lat, lng) {
+  useEffect(() => {
+    setExposedVariable('setLocation', async function (lat, lng) {
       if (lat && lng) setMapCenter(resolveReferences({ lat, lng }, currentState));
-    },
-    [setMapCenter]
-  );
+    });
+  }, [setMapCenter]);
 
   return (
     <div
diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx
index 412dae93fb..8d0c48c0f3 100644
--- a/frontend/src/Editor/Components/Modal.jsx
+++ b/frontend/src/Editor/Components/Modal.jsx
@@ -14,7 +14,6 @@ export const Modal = function Modal({
   styles,
   exposedVariables,
   setExposedVariable,
-  registerAction,
   fireEvent,
   dataCy,
   height,
@@ -46,22 +45,17 @@ export const Modal = function Modal({
   const title = properties.title ?? '';
   const size = properties.size ?? 'lg';
 
-  registerAction(
-    'open',
-    async function () {
+  useEffect(() => {
+    setExposedVariable('open', async function () {
       setExposedVariable('show', true);
       setShowModal(true);
-    },
-    [setShowModal]
-  );
-  registerAction(
-    'close',
-    async function () {
+    });
+    setExposedVariable('close', async function () {
       setShowModal(false);
       setExposedVariable('show', false);
-    },
-    [setShowModal]
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setShowModal]);
 
   useEffect(() => {
     const canShowModal = exposedVariables.show ?? false;
@@ -129,7 +123,8 @@ export const Modal = function Modal({
 
   function hideModal() {
     setShowModal(false);
-    setExposedVariable('show', false).then(() => fireEvent('onClose'));
+    setExposedVariable('show', false);
+    fireEvent('onClose');
   }
   const backwardCompatibilityCheck = height == '34' || modalHeight != undefined ? true : false;
 
diff --git a/frontend/src/Editor/Components/Multiselect.jsx b/frontend/src/Editor/Components/Multiselect.jsx
index b08846ba08..83ac86641c 100644
--- a/frontend/src/Editor/Components/Multiselect.jsx
+++ b/frontend/src/Editor/Components/Multiselect.jsx
@@ -20,7 +20,6 @@ export const Multiselect = function Multiselect({
   onComponentClick,
   darkMode,
   fireEvent,
-  registerAction,
   dataCy,
 }) {
   const { label, value, values, display_values, showAllOption } = properties;
@@ -71,12 +70,12 @@ export const Multiselect = function Multiselect({
     setExposedVariable(
       'values',
       items.map((item) => item.value)
-    ).then(() => fireEvent('onSelect'));
+    );
+    fireEvent('onSelect');
   };
 
-  registerAction(
-    'selectOption',
-    async function (value) {
+  useEffect(() => {
+    setExposedVariable('selectOption', async function (value) {
       if (
         selectOptions.some((option) => option.value === value) &&
         !selected.some((option) => option.value === value)
@@ -92,14 +91,15 @@ export const Multiselect = function Multiselect({
         setExposedVariable(
           'values',
           newSelected.map((item) => item.value)
-        ).then(() => fireEvent('onSelect'));
+        );
+        fireEvent('onSelect');
       }
-    },
-    [selected, setSelected]
-  );
-  registerAction(
-    'deselectOption',
-    async function (value) {
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, setSelected]);
+
+  useEffect(() => {
+    setExposedVariable('deselectOption', async function (value) {
       if (selectOptions.some((option) => option.value === value) && selected.some((option) => option.value === value)) {
         const newSelected = [
           ...selected.filter(function (item) {
@@ -110,21 +110,23 @@ export const Multiselect = function Multiselect({
         setExposedVariable(
           'values',
           newSelected.map((item) => item.value)
-        ).then(() => fireEvent('onSelect'));
+        );
+        fireEvent('onSelect');
       }
-    },
-    [selected, setSelected]
-  );
-  registerAction(
-    'clearSelections',
-    async function () {
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, setSelected]);
+
+  useEffect(() => {
+    setExposedVariable('clearSelections', async function () {
       if (selected.length >= 1) {
         setSelected([]);
-        setExposedVariable('values', []).then(() => fireEvent('onSelect'));
+        setExposedVariable('values', []);
+        fireEvent('onSelect');
       }
-    },
-    [selected, setSelected]
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, setSelected]);
 
   const filterOptions = (options, filter) => {
     setSearched(filter);
diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index df329c3b0b..b13986a320 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -32,24 +32,21 @@ export const NumberInput = function NumberInput({
       !isNaN(parseFloat(properties.maxValue)) &&
       parseFloat(properties.minValue) > parseFloat(properties.maxValue)
     ) {
-      setValue(Number(parseFloat(properties.maxValue)).toFixed(properties.decimalPlaces));
+      setValue(Number(parseFloat(properties.maxValue)));
     } else if (
       !isNaN(parseFloat(properties.maxValue)) &&
       parseFloat(e.target.value) > parseFloat(properties.maxValue)
     ) {
-      setValue(Number(parseFloat(properties.maxValue)).toFixed(properties.decimalPlaces));
-    } else if (
-      !isNaN(parseFloat(properties.minValue)) &&
-      parseFloat(e.target.value) < parseFloat(properties.minValue)
-    ) {
-      setValue(Number(parseFloat(properties.minValue)).toFixed(properties.decimalPlaces));
+      setValue(Number(parseFloat(properties.maxValue)));
     } else {
       setValue(Number(parseFloat(e.target.value)));
     }
     fireEvent('onChange');
   };
   const handleBlur = (e) => {
-    setValue(Number(parseFloat(e.target.value).toFixed(properties.decimalPlaces)));
+    if (!isNaN(parseFloat(properties.minValue)) && parseFloat(e.target.value) < parseFloat(properties.minValue)) {
+      setValue(Number(parseFloat(properties.minValue)));
+    } else setValue(Number(parseFloat(e.target.value).toFixed(properties.decimalPlaces)));
   };
 
   useEffect(() => {
@@ -83,6 +80,8 @@ export const NumberInput = function NumberInput({
           style={computedStyles}
           value={value}
           data-cy={dataCy}
+          min={properties.minValue}
+          max={properties.maxValue}
         />
       )}
       {properties.loadingState === true && (
diff --git a/frontend/src/Editor/Components/PasswordInput.jsx b/frontend/src/Editor/Components/PasswordInput.jsx
index 80ee6494ad..f526e966bc 100644
--- a/frontend/src/Editor/Components/PasswordInput.jsx
+++ b/frontend/src/Editor/Components/PasswordInput.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 export const PasswordInput = ({
   height,
@@ -15,8 +15,9 @@ export const PasswordInput = ({
 
   const placeholder = properties.placeholder;
 
-  const [passwordValue, setPasswordValue] = React.useState('');
+  const [passwordValue, setPasswordValue] = useState('');
   const { isValid, validationError } = validate(passwordValue);
+  const [showValidationError, setShowValidationError] = useState(false);
 
   const computedStyles = {
     height,
@@ -39,10 +40,12 @@ export const PasswordInput = ({
         disabled={disabledState}
         onChange={(e) => {
           setPasswordValue(e.target.value);
-          setExposedVariable('value', e.target.value).then(() => fireEvent('onChange'));
+          setExposedVariable('value', e.target.value);
+          fireEvent('onChange');
+          setShowValidationError(true);
         }}
         type={'password'}
-        className={`form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon ${
+        className={`form-control ${!isValid && showValidationError ? 'is-invalid' : ''} validation-without-icon ${
           darkMode && 'dark-theme-placeholder'
         }`}
         placeholder={placeholder}
@@ -51,7 +54,7 @@ export const PasswordInput = ({
         data-cy={dataCy}
       />
       <div className="invalid-feedback" data-cy={`${String(component.name).toLowerCase()}-invalid-feedback`}>
-        {validationError}
+        {showValidationError && validationError}
       </div>
     </div>
   );
diff --git a/frontend/src/Editor/Components/RadioButton.jsx b/frontend/src/Editor/Components/RadioButton.jsx
index f3999ae5fa..9e2bece680 100644
--- a/frontend/src/Editor/Components/RadioButton.jsx
+++ b/frontend/src/Editor/Components/RadioButton.jsx
@@ -8,7 +8,6 @@ export const RadioButton = function RadioButton({
   styles,
   fireEvent,
   setExposedVariable,
-  registerAction,
   darkMode,
   dataCy,
 }) {
@@ -32,21 +31,17 @@ export const RadioButton = function RadioButton({
 
   function onSelect(selection) {
     setValue(selection);
-    setExposedVariable('value', selection).then(() => fireEvent('onSelectionChange'));
+    setExposedVariable('value', selection);
+    fireEvent('onSelectionChange');
   }
 
   useEffect(() => {
     setExposedVariable('value', value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-
-  registerAction(
-    'selectOption',
-    async function (option) {
+    setExposedVariable('selectOption', async function (option) {
       onSelect(option);
-    },
-    [setValue]
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, setValue]);
 
   return (
     <div
diff --git a/frontend/src/Editor/Components/Statistics.jsx b/frontend/src/Editor/Components/Statistics.jsx
index 9d747e1162..1ceeb9f5a3 100644
--- a/frontend/src/Editor/Components/Statistics.jsx
+++ b/frontend/src/Editor/Components/Statistics.jsx
@@ -1,3 +1,4 @@
+import WidgetIcon from '@/../assets/images/icons/widgets';
 import React from 'react';
 export const Statistics = function Statistics({ width, height, properties, styles, darkMode, dataCy }) {
   const {
@@ -97,15 +98,13 @@ export const Statistics = function Statistics({ width, height, properties, style
             <div>
               <div className="d-flex flex-row justify-content-center align-items-baseline">
                 {secondarySignDisplay !== 'negative' ? (
-                  <img
-                    src="assets/images/icons/widgets/upstatistics.svg"
-                    style={{ ...marginStyle, marginRight: '6.5px' }}
-                  />
+                  <span style={{ ...marginStyle, marginRight: '6.5px' }}>
+                    <WidgetIcon name={'upstatistics'} />
+                  </span>
                 ) : (
-                  <img
-                    src="assets/images/icons/widgets/downstatistics.svg"
-                    style={{ ...marginStyle, marginRight: '6.5px' }}
-                  />
+                  <span style={{ ...marginStyle, marginRight: '6.5px' }}>
+                    <WidgetIcon name={'downstatistics'} />
+                  </span>
                 )}
                 <p style={{ ...secondaryContainerStyle }}>{secondaryValue}</p>
               </div>
diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
index 5bb6937cb1..4a42e9362e 100644
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -15,7 +15,8 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
   };
   const activeStepHandler = (id) => {
     const active = steps.filter((item) => item.id == id);
-    setExposedVariable('currentStepId', active[0].id).then(() => fireEvent('onSelect'));
+    setExposedVariable('currentStepId', active[0].id);
+    fireEvent('onSelect');
     setActiveStep(active[0].id);
   };
 
diff --git a/frontend/src/Editor/Components/Table/AddNewRowComponent.jsx b/frontend/src/Editor/Components/Table/AddNewRowComponent.jsx
index 228cb1970e..bf92c668b6 100644
--- a/frontend/src/Editor/Components/Table/AddNewRowComponent.jsx
+++ b/frontend/src/Editor/Components/Table/AddNewRowComponent.jsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useTable, useBlockLayout } from 'react-table';
 import _ from 'lodash';
 import { Tooltip } from 'react-tooltip';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export function AddNewRowComponent({
   hideAddNewRowPopup,
@@ -49,7 +51,7 @@ export function AddNewRowComponent({
         accumulator[index] = nestedData;
         return accumulator;
       }, {});
-      setExposedVariable('newRows', newRowsState).then(() => {
+      setExposedVariable('newRows', newRowsState)?.then(() => {
         mergeToAddNewRowsDetails({ newRowsDataUpdates: newRowDataUpdates });
       });
     }
@@ -59,10 +61,10 @@ export function AddNewRowComponent({
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = newRowData;
 
   return (
-    <div className="table-add-new-row card">
+    <div className={`table-add-new-row card ${darkMode && 'dark-theme'}`}>
       <div className="card-header row">
         <div className="col">
-          <h4 data-cy={`header-filters`} className="font-weight-normal">
+          <h4 data-cy={`header-filters`} className="font-weight-500 tj-text-lg">
             Add new rows
           </h4>
         </div>
@@ -75,7 +77,7 @@ export function AddNewRowComponent({
       <div className="table-responsive jet-data-table">
         <table
           {...getTableProps()}
-          className={`table table-vcenter table-nowrap ${tableType} ${darkMode && 'table-dark'}`}
+          className={`table table-vcenter table-nowrap ${tableType} ${darkMode && 'dark-theme'}`}
         >
           <thead>
             {headerGroups.map((headerGroup, index) => {
@@ -84,7 +86,18 @@ export function AddNewRowComponent({
                   {headerGroup.headers.map((column, index) => {
                     return (
                       <th key={index} {...column.getHeaderProps()} className="th">
-                        <div>{column.render('Header')}</div>
+                        <div className="d-flex custom-gap-4 align-items-center thead-editable-icon-header-text-wrapper">
+                          <div>
+                            <SolidIcon
+                              name="editable"
+                              width="16px"
+                              height="16px"
+                              fill={darkMode ? '#4C5155' : '#C1C8CD'}
+                              vievBox="0 0 16 16"
+                            />
+                          </div>
+                          <div className="tj-text-xsm header-text">{column.render('Header')}</div>
+                        </div>
                       </th>
                     );
                   })}
@@ -131,7 +144,7 @@ export function AddNewRowComponent({
               accumulator.push(newRowDataUpdates[row]);
               return accumulator;
             }, []);
-            setExposedVariable('newRows', newRowAddedExposedVar).then(() => {
+            setExposedVariable('newRows', newRowAddedExposedVar)?.then(() => {
               mergeToAddNewRowsDetails({ newRowsDataUpdates: newRowDataUpdates });
               setNewRowsState(rowData);
             });
@@ -143,29 +156,35 @@ export function AddNewRowComponent({
         </button>
         <Tooltip id="tooltip-for-add-new-row" className="tooltip" />
       </div>
-      <div className="card-footer">
-        <button
-          className="btn btn-primary btn-sm mx-2"
+      <div className="card-footer d-flex custom-gap-4">
+        <ButtonSolid
+          variant="primary"
+          className={`tj-text-xsm`}
           onClick={() => {
             onEvent('onNewRowsAdded', { component }).then(() => {
               mergeToAddNewRowsDetails({ newRowsDataUpdates: {}, newRowsChangeSet: {}, addingNewRows: false });
               setNewRowsState([]);
             });
           }}
+          size="sm"
+          customStyles={{ padding: '10px 20px' }}
         >
-          Save
-        </button>
-        <button
+          <span>Save</span>
+        </ButtonSolid>
+        <ButtonSolid
+          variant="tertiary"
+          className={`tj-text-xsm`}
           onClick={() => {
-            setExposedVariable('newRows', []).then(() => {
+            setExposedVariable('newRows', [])?.then(() => {
               mergeToAddNewRowsDetails({ newRowsDataUpdates: {}, newRowsChangeSet: {}, addingNewRows: false });
               setNewRowsState([]);
             });
           }}
-          className="btn btn-light btn-sm"
+          size="sm"
+          customStyles={{ padding: '10px 20px' }}
         >
-          Discard
-        </button>
+          <span>Discard</span>
+        </ButtonSolid>
       </div>
     </div>
   );
diff --git a/frontend/src/Editor/Components/Table/Filter.jsx b/frontend/src/Editor/Components/Table/Filter.jsx
index f88bb0345b..1878dbf6bd 100644
--- a/frontend/src/Editor/Components/Table/Filter.jsx
+++ b/frontend/src/Editor/Components/Table/Filter.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Select from '@/_ui/Select';
 import defaultStyles from '@/_ui/Select/styles';
 import { useTranslation } from 'react-i18next';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import _ from 'lodash';
 // eslint-disable-next-line import/no-unresolved
 import { diff as deepDiff } from 'deep-object-diff';
@@ -110,7 +111,7 @@ export function Filter(props) {
   };
 
   return (
-    <div className="table-filters card">
+    <div className={`table-filters card ${darkMode && 'dark-theme'}`}>
       <div className="card-header row">
         <div className="col">
           <h4 data-cy={`header-filters`} className="font-weight-normal">
@@ -206,13 +207,28 @@ export function Filter(props) {
           </div>
         )}
       </div>
-      <div className="card-footer">
-        <button data-cy={`button-add-filter`} onClick={addFilter} className="btn btn-light btn-sm">
-          + add filter
-        </button>
-        <button data-cy={`button-clear-filters`} onClick={() => clearFilters()} className="btn btn-light btn-sm mx-2">
-          clear filters
-        </button>
+      <div className="card-footer d-flex custom-gap-8">
+        <ButtonSolid
+          variant="primary"
+          className={`tj-text-xsm`}
+          onClick={addFilter}
+          size="sm"
+          customStyles={{ padding: '10px 20px' }}
+          data-cy={'button-add-filter'}
+        >
+          <span>+ add filter</span>
+        </ButtonSolid>
+
+        <ButtonSolid
+          variant="tertiary"
+          className={`tj-text-xsm`}
+          onClick={clearFilters}
+          size="sm"
+          customStyles={{ padding: '10px 20px' }}
+          data-cy={'button-clear-filters'}
+        >
+          <span>clear filters</span>
+        </ButtonSolid>
       </div>
     </div>
   );
diff --git a/frontend/src/Editor/Components/Table/GenerateEachCellValue.jsx b/frontend/src/Editor/Components/Table/GenerateEachCellValue.jsx
index 3cd266e5ce..485fb773e7 100644
--- a/frontend/src/Editor/Components/Table/GenerateEachCellValue.jsx
+++ b/frontend/src/Editor/Components/Table/GenerateEachCellValue.jsx
@@ -113,7 +113,7 @@ export default function GenerateEachCellValue({
           setHighlighterCells(false);
         }
       }}
-      className="w-100 h-100"
+      className={`w-100 h-100 ${columnType === 'selector' && 'd-flex align-items-center justify-content-center'}`}
     >
       {!isColumnTypeAction && columnTypeAllowToRenderMarkElement.includes(columnType) && showHighlightedCells ? (
         <div className="d-flex justify-content-center flex-column w-100 h-100 generate-cell-value-component-div-wrapper">
diff --git a/frontend/src/Editor/Components/Table/GlobalFilter.jsx b/frontend/src/Editor/Components/Table/GlobalFilter.jsx
index 2cc92aeca2..554d350dd2 100644
--- a/frontend/src/Editor/Components/Table/GlobalFilter.jsx
+++ b/frontend/src/Editor/Components/Table/GlobalFilter.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 // Table Search
 export const GlobalFilter = ({
   globalFilter,
@@ -7,6 +8,7 @@ export const GlobalFilter = ({
   onComponentOptionChanged,
   component,
   onEvent,
+  // eslint-disable-next-line no-unused-vars
   darkMode,
 }) => {
   const [value, setValue] = React.useState(globalFilter);
@@ -19,23 +21,34 @@ export const GlobalFilter = ({
   }, 500);
 
   return (
-    <div className="ms-2 d-flex border px-2 mx-1 btn-light align-items-center" style={{ padding: '0.25rem 0' }}>
-      <img
-        src="assets/images/icons/search.svg"
-        alt="search icon"
-        style={{ width: '15px', height: '15px', marginRight: '0.25rem' }}
-      />
-      <input
-        type="text"
-        className={`global-search-field btn-light align-self-center ${darkMode && 'dark-theme-placeholder'}`}
-        defaultValue={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder="Search"
-        data-cy="search-input-field"
-        style={{
-          border: '0',
-        }}
-      />
+    <div
+      className="d-flex border align-items-center table-global-search"
+      style={{ padding: '0.4rem 0.6rem', borderRadius: '6px' }}
+    >
+      <div className="d-flex">
+        <SolidIcon name="search" width="16" height="16" />
+        <input
+          type="text"
+          className={`align-self-center bg-transparent tj-text tj-text-xsm mx-lg-1`}
+          defaultValue={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="Search"
+          data-cy="search-input-field"
+          style={{
+            border: '0',
+          }}
+        />
+        <div
+          className={`d-flex table-clear-icon align-items-center ${globalFilter ? 'visible' : 'invisible'}`}
+          style={{ width: '20px', height: '20px', padding: '4px', cursor: 'pointer' }}
+          onClick={() => {
+            setGlobalFilter(undefined);
+            setValue('');
+          }}
+        >
+          <SolidIcon name="remove" width="16" height="16px" fill={darkMode ? '#3E63DD' : '#3E63DD'} />
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/Editor/Components/Table/IndeterminateCheckbox.jsx b/frontend/src/Editor/Components/Table/IndeterminateCheckbox.jsx
index 16532d569c..6e6020c56d 100644
--- a/frontend/src/Editor/Components/Table/IndeterminateCheckbox.jsx
+++ b/frontend/src/Editor/Components/Table/IndeterminateCheckbox.jsx
@@ -14,14 +14,13 @@ const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref)
         data-cy={`checkbox-input`}
         type="checkbox"
         ref={resolvedRef}
-        style={{
-          width: 15,
-          height: 15,
-          marginTop: 8,
-          marginLeft: 10,
-        }}
         onClick={(event) => event.stopPropagation()}
         {...rest}
+        style={{
+          width: 16,
+          height: 16,
+        }}
+        onMouseDown={(e) => e.preventDefault()}
       />
     </>
   );
diff --git a/frontend/src/Editor/Components/Table/Link.jsx b/frontend/src/Editor/Components/Table/Link.jsx
index bcb4281da9..67083e6b05 100644
--- a/frontend/src/Editor/Components/Table/Link.jsx
+++ b/frontend/src/Editor/Components/Table/Link.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export const Link = ({ cellValue, linkTarget }) => {
   return (
-    <div>
+    <div className="w-100">
       <a
         href={cellValue}
         target={linkTarget}
diff --git a/frontend/src/Editor/Components/Table/OverlayTriggerComponent.jsx b/frontend/src/Editor/Components/Table/OverlayTriggerComponent.jsx
new file mode 100644
index 0000000000..3dbe2f7ca3
--- /dev/null
+++ b/frontend/src/Editor/Components/Table/OverlayTriggerComponent.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+
+// This overlayTriggerComponent is used in the Table component, for download and manage columns popover
+export const OverlayTriggerComponent = ({
+  trigger = 'click',
+  overlay,
+  rootClose = true,
+  placement = 'top',
+  children,
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const modifiedChild = React.cloneElement(children, {
+    className: `${children.props.className} ${isOpen && 'always-active-btn'}`,
+  });
+
+  return (
+    <OverlayTrigger
+      trigger={trigger}
+      overlay={overlay}
+      rootClose={rootClose}
+      placement={placement}
+      show={isOpen}
+      onToggle={(show) => {
+        setOpen(show);
+      }}
+    >
+      <span>
+        {''}
+        {modifiedChild}
+      </span>
+    </OverlayTrigger>
+  );
+};
diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx
index f8f54ea14f..1f875c595c 100644
--- a/frontend/src/Editor/Components/Table/Pagination.jsx
+++ b/frontend/src/Editor/Components/Table/Pagination.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 
 export const Pagination = function Pagination({
   onPageIndexChanged,
@@ -12,6 +13,9 @@ export const Pagination = function Pagination({
   setPageIndex,
   enablePrevButton,
   enableNextButton,
+  // eslint-disable-next-line no-unused-vars
+  darkMode,
+  tableWidth,
 }) {
   const [pageCount, setPageCount] = useState(autoPageCount);
 
@@ -47,51 +51,137 @@ export const Pagination = function Pagination({
   }
 
   return (
-    <div className="pagination justify-content-start">
-      {!serverSide && (
-        <button
-          data-cy={`pagination-button-to-first`}
-          className={`btn btn-sm btn-light mx-2 ${pageIndex === 1 ? 'cursor-not-allowed' : ''}`}
-          onClick={() => gotoPage(1)}
-          disabled={pageIndex === 1}
-        >
-          {'<<'}
-        </button>
-      )}
-      <button
-        data-cy={`pagination-button-to-previous`}
-        className={`btn btn-sm btn-light ${pageIndex === 1 ? 'cursor-not-allowed' : ''}`}
-        onClick={() => goToPreviousPage()}
-        disabled={pageIndex === 1 || !enablePrevButton}
-      >
-        {'<'}
-      </button>{' '}
-      <small className="p-1 mx-2" data-cy={`page-index-details`}>
-        {serverSide && <strong>{pageIndex}</strong>}
-        {!serverSide && (
-          <strong>
-            {pageIndex} of {autoPageOptions.length || 1}
-          </strong>
+    <div className="pagination-container d-flex h-100 align-items-center custom-gap-4" data-cy="pagination-section">
+      <div className="d-flex">
+        {!serverSide && tableWidth > 460 && (
+          <ButtonSolid
+            variant="ghostBlack"
+            className="tj-text-xsm"
+            style={{
+              minWidth: '28px',
+              width: '28px',
+              height: '28px',
+              padding: '7px',
+              borderRadius: '6px',
+              display: 'flex',
+              justifyContent: 'center',
+              cursor: pageIndex === 1 ? 'not-allowed' : 'pointer',
+            }}
+            leftIcon="cheveronleftdouble"
+            fill={`var(--slate12)`}
+            iconWidth="14"
+            size="md"
+            disabled={pageIndex === 1}
+            onClick={(event) => {
+              event.stopPropagation();
+              gotoPage(1);
+            }}
+            data-cy={`pagination-button-to-first`}
+          ></ButtonSolid>
         )}
-      </small>
-      <button
-        data-cy={`pagination-button-to-next`}
-        className={`btn btn-light btn-sm ${!autoCanNextPage && !serverSide ? 'cursor-not-allowed' : ''}`}
-        onClick={() => goToNextPage()}
-        disabled={(!autoCanNextPage && !serverSide) || !enableNextButton}
+        <ButtonSolid
+          variant="ghostBlack"
+          className="tj-text-xsm"
+          style={{
+            minWidth: '28px',
+            width: '28px',
+            height: '28px',
+            padding: '7px',
+            borderRadius: '6px',
+            display: 'flex',
+            justifyContent: 'center',
+            cursor: pageIndex === 1 || !enablePrevButton ? 'not-allowed' : 'pointer',
+          }}
+          leftIcon="cheveronleft"
+          fill={`var(--slate12)`}
+          iconWidth="14"
+          size="md"
+          disabled={pageIndex === 1 || !enablePrevButton}
+          onClick={(event) => {
+            event.stopPropagation();
+            goToPreviousPage();
+          }}
+          data-cy={`pagination-button-to-previous`}
+        ></ButtonSolid>
+      </div>
+
+      <div
+        className="d-flex align-items-center tj-text-xsm h-100 page-info custom-gap-4"
+        data-cy={`page-index-details`}
       >
-        {'>'}
-      </button>{' '}
-      {!serverSide && (
-        <button
-          data-cy={`pagination-button-to-last`}
-          className={`btn btn-light btn-sm mx-2 ${!autoCanNextPage && !serverSide ? 'cursor-not-allowed' : ''}`}
-          onClick={() => gotoPage(pageCount)}
-          disabled={!autoCanNextPage && !serverSide}
-        >
-          {'>>'}
-        </button>
-      )}
+        {serverSide && <span className="color-slate-11">{pageIndex}</span>}
+        {!serverSide && (
+          <>
+            <input
+              type="text"
+              className={`form-control h-100`}
+              value={pageIndex}
+              onChange={(event) => {
+                if (event.target.value <= pageCount) gotoPage(event.target.value);
+              }}
+            />
+            <span
+              className="font-weight-500 total-page-number"
+              style={{ width: 'max-content' }}
+              data-cy={`total-page-number-${autoPageOptions.length || 1}`}
+            >
+              of {pageCount || 1}
+            </span>
+          </>
+        )}
+      </div>
+      <div className="d-flex">
+        <ButtonSolid
+          variant="ghostBlack"
+          className="tj-text-xsm"
+          style={{
+            minWidth: '28px',
+            width: '28px',
+            height: '28px',
+            padding: '7px',
+            borderRadius: '6px',
+            display: 'flex',
+            justifyContent: 'center',
+            cursor: (!autoCanNextPage && !serverSide) || !enableNextButton ? 'not-allowed' : 'pointer',
+          }}
+          leftIcon="cheveronright"
+          fill={`var(--slate12)`}
+          iconWidth="14"
+          size="md"
+          disabled={(!autoCanNextPage && !serverSide) || !enableNextButton}
+          onClick={(event) => {
+            event.stopPropagation();
+            goToNextPage();
+          }}
+          data-cy={`pagination-button-to-next`}
+        ></ButtonSolid>
+        {!serverSide && tableWidth > 460 && (
+          <ButtonSolid
+            variant="ghostBlack"
+            className="tj-text-xsm"
+            style={{
+              minWidth: '28px',
+              width: '28px',
+              height: '28px',
+              padding: '7px',
+              borderRadius: '6px',
+              display: 'flex',
+              justifyContent: 'center',
+              cursor: !autoCanNextPage && !serverSide ? 'not-allowed' : 'pointer',
+            }}
+            leftIcon="cheveronrightdouble"
+            fill={`var(--slate12)`}
+            iconWidth="14"
+            size="md"
+            onClick={(event) => {
+              event.stopPropagation();
+              gotoPage(pageCount);
+            }}
+            disabled={!autoCanNextPage && !serverSide}
+            data-cy={`pagination-button-to-last`}
+          ></ButtonSolid>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index bc4556b0ee..f2f0509edf 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -14,7 +14,7 @@ import {
   useColumnOrder,
 } from 'react-table';
 import cx from 'classnames';
-import { resolveReferences, validateWidget } from '@/_helpers/utils';
+import { resolveReferences, validateWidget, determineJustifyContentValue } from '@/_helpers/utils';
 import { useExportData } from 'react-table-plugins';
 import Papa from 'papaparse';
 import { Pagination } from './Pagination';
@@ -46,6 +46,10 @@ import GenerateEachCellValue from './GenerateEachCellValue';
 import { toast } from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
 import { AddNewRowComponent } from './AddNewRowComponent';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { OverlayTriggerComponent } from './OverlayTriggerComponent';
 
 // utilityForNestedNewRow function is used to construct nested object while adding or updating new row when '.' is present in column key for adding new row
 const utilityForNestedNewRow = (row) => {
@@ -84,7 +88,6 @@ export function Table({
   fireEvent,
   setExposedVariable,
   setExposedVariables,
-  registerAction,
   styles,
   properties,
   variablesExposedForPreview,
@@ -97,7 +100,6 @@ export function Table({
   const {
     color,
     serverSidePagination,
-    clientSidePagination,
     serverSideSearch,
     serverSideSort,
     serverSideFilter,
@@ -125,6 +127,7 @@ export function Table({
     defaultSelectedRow,
     showAddNewRowButton,
     allowSelection,
+    enablePagination,
   } = loadPropertiesAndStyles(properties, styles, darkMode, component);
 
   const updatedDataReference = useRef([]);
@@ -133,11 +136,11 @@ export function Table({
   const getItemStyle = ({ isDragging, isDropAnimating }, draggableStyle) => ({
     ...draggableStyle,
     userSelect: 'none',
-    background: isDragging ? 'rgba(77, 114, 250, 0.2)' : '',
+    background: isDragging ? 'var(--slate4)' : '',
     top: 'auto',
     borderRadius: '4px',
     ...(isDragging && {
-      marginLeft: '-120px',
+      marginLeft: '-280px', // hack changing marginLeft to -280px to bring the draggable header to the correct position at the start of drag
       display: 'flex',
       alignItems: 'center',
       paddingLeft: '10px',
@@ -156,6 +159,8 @@ export function Table({
   const mergeToAddNewRowsDetails = (payload) => dispatch(reducerActions.mergeToAddNewRowsDetails(payload));
   const mounted = useMounted();
 
+  const [resizingColumnId, setResizingColumnId] = useState(null);
+
   const prevDataFromProps = useRef();
   useEffect(() => {
     if (mounted) prevDataFromProps.current = properties.data;
@@ -201,7 +206,7 @@ export function Table({
   const defaultColumn = React.useMemo(
     () => ({
       minWidth: 60,
-      width: 268,
+      width: 150,
     }),
     []
   );
@@ -233,7 +238,6 @@ export function Table({
         ..._.merge(clonedTableData[key], newChangeset[key]),
       };
     });
-
     const changesToBeSavedAndExposed = { dataUpdates: newDataUpdates, changeSet: newChangeset };
     mergeToTableDetails(changesToBeSavedAndExposed);
     fireEvent('onCellValueChanged');
@@ -340,17 +344,17 @@ export function Table({
     setExposedVariables({
       changeSet: {},
       dataUpdates: [],
-    }).then(() => mergeToTableDetails({ dataUpdates: {}, changeSet: {} }));
+    });
+    mergeToTableDetails({ dataUpdates: {}, changeSet: {} });
   }
 
   function handleChangesDiscarded() {
     setExposedVariables({
       changeSet: {},
       dataUpdates: [],
-    }).then(() => {
-      mergeToTableDetails({ dataUpdates: {}, changeSet: {} });
-      fireEvent('onCancelChanges');
     });
+    mergeToTableDetails({ dataUpdates: {}, changeSet: {} });
+    fireEvent('onCancelChanges');
   }
 
   const changeSet = tableDetails?.changeSet ?? {};
@@ -478,9 +482,8 @@ export function Table({
         !_.isEmpty(tableDetails.addNewRowsDetails.newRowsDataUpdates) ||
         tableDetails.addNewRowsDetails.addingNewRows
       ) {
-        setExposedVariable('newRows', []).then(() => {
-          mergeToAddNewRowsDetails({ newRowsDataUpdates: {}, newRowsChangeSet: {}, addingNewRows: false });
-        });
+        setExposedVariable('newRows', []);
+        mergeToAddNewRowsDetails({ newRowsDataUpdates: {}, newRowsChangeSet: {}, addingNewRows: false });
       }
     }
     return _.isEmpty(updatedDataReference.current) ? tableData : updatedDataReference.current;
@@ -588,11 +591,13 @@ export function Table({
         hooks.visibleColumns.push((columns) => [
           {
             id: 'selection',
-            Header: ({ getToggleAllPageRowsSelectedProps }) => (
-              <div className="d-flex flex-column align-items-center">
-                {showBulkSelector && <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />}
-              </div>
-            ),
+            Header: ({ getToggleAllPageRowsSelectedProps }) => {
+              return (
+                <div className="d-flex flex-column align-items-center">
+                  {showBulkSelector && <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />}
+                </div>
+              );
+            },
             Cell: ({ row }) => {
               return (
                 <div className="d-flex flex-column align-items-center">
@@ -608,7 +613,7 @@ export function Table({
     }
   );
   const currentColOrder = React.useRef();
-
+  const clientSidePagination = enablePagination && !serverSidePagination;
   const sortOptions = useMemo(() => {
     if (state?.sortBy?.length === 0) {
       return;
@@ -635,65 +640,57 @@ export function Table({
     if (!sortOptions) {
       setExposedVariable('sortApplied', []);
     }
-    if (mounted) setExposedVariable('sortApplied', sortOptions).then(() => fireEvent('onSort'));
+    if (mounted) setExposedVariable('sortApplied', sortOptions);
+    fireEvent('onSort');
   }, [sortOptions]);
 
-  registerAction(
-    'setPage',
-    async function (targetPageIndex) {
+  useEffect(() => {
+    setExposedVariable('setPage', async function (targetPageIndex) {
       setPaginationInternalPageIndex(targetPageIndex);
       setExposedVariable('pageIndex', targetPageIndex);
       if (!serverSidePagination && clientSidePagination) gotoPage(targetPageIndex - 1);
-    },
-    [serverSidePagination, clientSidePagination, setPaginationInternalPageIndex]
-  );
-  registerAction(
-    'selectRow',
-    async function (key, value) {
+    });
+  }, [serverSidePagination, clientSidePagination, setPaginationInternalPageIndex]);
+
+  useEffect(() => {
+    setExposedVariable('selectRow', async function (key, value) {
       const item = tableData.filter((item) => item[key] == value);
       const row = rows.find((item, index) => item.original[key] == value);
       if (row != undefined) {
         const selectedRowDetails = { selectedRow: item[0], selectedRowId: row.id };
-        setExposedVariables(selectedRowDetails).then(() => {
-          toggleRowSelected(row.id);
-          mergeToTableDetails(selectedRowDetails);
-          fireEvent('onRowClicked');
-        });
+        setExposedVariables(selectedRowDetails);
+        toggleRowSelected(row.id);
+        mergeToTableDetails(selectedRowDetails);
+        fireEvent('onRowClicked');
       }
-    },
-    [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]
-  );
-  registerAction(
-    'deselectRow',
-    async function () {
+    });
+  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]);
+
+  useEffect(() => {
+    setExposedVariable('deselectRow', async function () {
       if (!_.isEmpty(tableDetails.selectedRow)) {
         const selectedRowDetails = { selectedRow: {}, selectedRowId: {} };
-        setExposedVariables(selectedRowDetails).then(() => {
-          if (allowSelection && !showBulkSelector) toggleRowSelected(tableDetails.selectedRowId, false);
-          mergeToTableDetails(selectedRowDetails);
-        });
+        setExposedVariables(selectedRowDetails);
+        if (allowSelection && !showBulkSelector) toggleRowSelected(tableDetails.selectedRowId, false);
+        mergeToTableDetails(selectedRowDetails);
       }
       return;
-    },
-    [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]
-  );
-  registerAction(
-    'discardChanges',
-    async function () {
+    });
+  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.selectedRow)]);
+
+  useEffect(() => {
+    setExposedVariable('discardChanges', async function () {
       if (Object.keys(tableDetails.changeSet || {}).length > 0) {
         setExposedVariables({
           changeSet: {},
           dataUpdates: [],
-        }).then(() => {
-          mergeToTableDetails({ dataUpdates: {}, changeSet: {} });
         });
+        mergeToTableDetails({ dataUpdates: {}, changeSet: {} });
       }
-    },
-    [JSON.stringify(tableData), JSON.stringify(tableDetails.changeSet)]
-  );
-  registerAction(
-    'discardNewlyAddedRows',
-    async function () {
+    });
+  }, [JSON.stringify(tableData), JSON.stringify(tableDetails.changeSet)]);
+  useEffect(() => {
+    setExposedVariable('discardNewlyAddedRows', async function () {
       if (
         tableDetails.addNewRowsDetails.addingNewRows &&
         (Object.keys(tableDetails.addNewRowsDetails.newRowsChangeSet || {}).length > 0 ||
@@ -701,28 +698,26 @@ export function Table({
       ) {
         setExposedVariables({
           newRows: [],
-        }).then(() => {
-          mergeToAddNewRowsDetails({ newRowsChangeSet: {}, newRowsDataUpdates: {}, addingNewRows: false });
         });
+        mergeToAddNewRowsDetails({ newRowsChangeSet: {}, newRowsDataUpdates: {}, addingNewRows: false });
       }
-    },
-    [
-      JSON.stringify(tableDetails.addNewRowsDetails.newRowsChangeSet),
-      tableDetails.addNewRowsDetails.addingNewRows,
-      JSON.stringify(tableDetails.addNewRowsDetails.newRowsDataUpdates),
-    ]
-  );
+    });
+  }, [
+    JSON.stringify(tableDetails.addNewRowsDetails.newRowsChangeSet),
+    tableDetails.addNewRowsDetails.addingNewRows,
+    JSON.stringify(tableDetails.addNewRowsDetails.newRowsDataUpdates),
+  ]);
+
   useEffect(() => {
     if (showBulkSelector) {
       const selectedRowsOriginalData = selectedFlatRows.map((row) => row.original);
       const selectedRowsId = selectedFlatRows.map((row) => row.id);
-      setExposedVariables({ selectedRows: selectedRowsOriginalData, selectedRowsId: selectedRowsId }).then(() => {
-        const selectedRowsDetails = selectedFlatRows.reduce((accumulator, row) => {
-          accumulator.push({ selectedRowId: row.id, selectedRow: row.original });
-          return accumulator;
-        }, []);
-        mergeToTableDetails({ selectedRowsDetails });
-      });
+      setExposedVariables({ selectedRows: selectedRowsOriginalData, selectedRowsId: selectedRowsId });
+      const selectedRowsDetails = selectedFlatRows.reduce((accumulator, row) => {
+        accumulator.push({ selectedRowId: row.id, selectedRow: row.original });
+        return accumulator;
+      }, []);
+      mergeToTableDetails({ selectedRowsDetails });
     }
     if (
       (!showBulkSelector && !highlightSelectedRow) ||
@@ -730,35 +725,33 @@ export function Table({
     ) {
       const selectedRow = selectedFlatRows?.[0]?.original ?? {};
       const selectedRowId = selectedFlatRows?.[0]?.id ?? null;
-      setExposedVariables({ selectedRow, selectedRowId }).then(() => {
-        mergeToTableDetails({ selectedRow, selectedRowId });
-      });
+      setExposedVariables({ selectedRow, selectedRowId });
+      mergeToTableDetails({ selectedRow, selectedRowId });
     }
   }, [selectedFlatRows.length, selectedFlatRows]);
 
-  registerAction(
-    'downloadTableData',
-    async function (format) {
+  useEffect(() => {
+    setExposedVariable('downloadTableData', async function (format) {
       exportData(format, true);
-    },
-    [_.toString(globalFilteredRows), columns]
-  );
+    });
+  }, [_.toString(globalFilteredRows), columns]);
 
   useEffect(() => {
     if (mounted) {
-      setExposedVariables({ selectedRows: [], selectedRowsId: [], selectedRow: {}, selectedRowId: null }).then(() => {
-        mergeToTableDetails({ selectedRowsDetails: [], selectedRow: {}, selectedRowId: null });
-        toggleAllRowsSelected(false);
-      });
+      setExposedVariables({ selectedRows: [], selectedRowsId: [], selectedRow: {}, selectedRowId: null });
+      mergeToTableDetails({ selectedRowsDetails: [], selectedRow: {}, selectedRowId: null });
+      toggleAllRowsSelected(false);
     }
   }, [showBulkSelector, highlightSelectedRow, allowSelection]);
 
   React.useEffect(() => {
-    if (serverSidePagination || !clientSidePagination) {
-      setPageSize(rows?.length || 10);
-    }
-    if (!serverSidePagination && clientSidePagination) {
-      setPageSize(rowsPerPage || 10);
+    if (enablePagination) {
+      if (serverSidePagination || !clientSidePagination) {
+        setPageSize(rows?.length || 10);
+      }
+      if (!serverSidePagination && clientSidePagination) {
+        setPageSize(rowsPerPage || 10);
+      }
     }
   }, [clientSidePagination, serverSidePagination, rows, rowsPerPage]);
   useEffect(() => {
@@ -813,9 +806,8 @@ export function Table({
 
   const rowHover = () => {
     mergeToTableDetails(rowDetails);
-    setExposedVariables(rowDetails).then(() => {
-      fireEvent('onRowHovered');
-    });
+    setExposedVariables(rowDetails);
+    fireEvent('onRowHovered');
   };
   useEffect(() => {
     if (_.isEmpty(changeSet)) {
@@ -840,10 +832,9 @@ export function Table({
       const pageNumber = Math.floor(selectedRowId / rowsPerPage) + 1;
       preSelectRow.current = true;
       if (highlightSelectedRow) {
-        setExposedVariables({ selectedRow: selectedRow, selectedRowId: selectedRowId }).then(() => {
-          toggleRowSelected(selectedRowId, true);
-          mergeToTableDetails({ selectedRow: selectedRow, selectedRowId: selectedRowId });
-        });
+        setExposedVariables({ selectedRow: selectedRow, selectedRowId: selectedRowId });
+        toggleRowSelected(selectedRowId, true);
+        mergeToTableDetails({ selectedRow: selectedRow, selectedRowId: selectedRowId });
       } else {
         toggleRowSelected(selectedRowId, true);
       }
@@ -856,15 +847,20 @@ export function Table({
   }, [JSON.stringify(defaultSelectedRow), JSON.stringify(data)]);
 
   function downlaodPopover() {
+    const options = [
+      { dataCy: 'option-download-CSV', text: 'Download as CSV', value: 'csv' },
+      { dataCy: 'option-download-execel', text: 'Download as Excel', value: 'xlsx' },
+      { dataCy: 'option-download-pdf', text: 'Download as PDF', value: 'pdf' },
+    ];
     return (
       <Popover
         id="popover-basic"
         data-cy="popover-card"
-        className={`${darkMode && 'popover-dark-themed theme-dark'} shadow table-widget-download-popup`}
-        placement="bottom"
+        className={`${darkMode && 'dark-theme'} shadow table-widget-download-popup`}
+        placement="top-end"
       >
-        <Popover.Body>
-          <div className="d-flex flex-column">
+        <Popover.Body className="p-0">
+          <div className="table-download-option cursor-pointer">
             <span data-cy={`option-download-CSV`} className="cursor-pointer" onClick={() => exportData('csv', true)}>
               Download as CSV
             </span>
@@ -887,11 +883,70 @@ export function Table({
       </Popover>
     );
   }
+
+  function hideColumnsPopover() {
+    const heightOfTableComponent = document.querySelector('.card.jet-table.table-component')?.offsetHeight;
+    return (
+      <Popover
+        className={`${darkMode && 'dark-theme'}`}
+        style={{ maxHeight: `${heightOfTableComponent - 79}px`, overflowY: 'auto' }}
+      >
+        <div
+          data-cy={`dropdown-hide-column`}
+          className={`dropdown-table-column-hide-common ${
+            darkMode ? 'dropdown-table-column-hide-dark-themed dark-theme' : 'dropdown-table-column-hide'
+          } `}
+          placement="top-end"
+        >
+          <div className="dropdown-item cursor-pointer">
+            <IndeterminateCheckbox {...getToggleHideAllColumnsProps()} />
+            <span className="hide-column-name tj-text-xsm" data-cy={`options-select-all-coloumn`}>
+              Select All
+            </span>
+          </div>
+          {allColumns.map(
+            (column) =>
+              typeof column.Header === 'string' && (
+                <div key={column.id}>
+                  <div>
+                    <label className="dropdown-item d-flex cursor-pointer">
+                      <input
+                        type="checkbox"
+                        data-cy={`checkbox-coloumn-${String(column.Header).toLowerCase().replace(/\s+/g, '-')}`}
+                        {...column.getToggleHiddenProps()}
+                      />
+                      <span
+                        className="hide-column-name tj-text-xsm"
+                        data-cy={`options-coloumn-${String(column.Header).toLowerCase().replace(/\s+/g, '-')}`}
+                      >
+                        {` ${column.Header}`}
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              )
+          )}
+        </div>
+      </Popover>
+    );
+  }
+  const calculateWidthOfActionColumnHeader = (position) => {
+    let totalWidth = null;
+    if (position === 'rightActions') {
+      const rightActionBtn = document.querySelector('.has-right-actions');
+      totalWidth = rightActionBtn?.offsetWidth;
+    }
+    if (position === 'leftActions') {
+      const leftActionBtn = document.querySelector('.has-left-actions');
+      totalWidth = leftActionBtn?.offsetWidth;
+    }
+    return totalWidth;
+  };
   return (
     <div
       data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
       data-disabled={parsedDisabledState}
-      className="card jet-table"
+      className={`card jet-table table-component ${darkMode && 'dark-theme'}`}
       style={{
         width: `100%`,
         height: `${height}px`,
@@ -899,21 +954,82 @@ export function Table({
         overflow: 'hidden',
         borderRadius: Number.parseFloat(borderRadius),
         boxShadow: styles.boxShadow,
+        padding: '8px',
       }}
       onClick={(event) => {
         onComponentClick(id, component, event);
       }}
       ref={tableRef}
     >
-      {/* Show top bar unless search box is disabled and server pagination is enabled */}
-      {(displaySearchBox || showDownloadButton || showFilterButton || showAddNewRowButton) && (
-        <div className={`card-body border-bottom py-3 ${tableDetails.addNewRowsDetails.addingNewRows && 'disabled'}`}>
-          <div
-            className={`d-flex align-items-center ms-auto text-muted ${
-              displaySearchBox ? 'justify-content-between' : 'justify-content-end'
-            }`}
-          >
-            {displaySearchBox && (
+      {(displaySearchBox || showFilterButton) && (
+        <div
+          className={`table-card-header d-flex justify-content-between align-items-center ${
+            (tableDetails.addNewRowsDetails.addingNewRows || tableDetails.filterDetails.filtersVisible) && 'disabled'
+          }`}
+          style={{ padding: '12px', height: 56 }}
+        >
+          <div>
+            {loadingState && (
+              <SkeletonTheme baseColor="var(--slate3)">
+                <Skeleton count={1} width={83} height={28} className="mb-1" />
+              </SkeletonTheme>
+            )}
+            {showFilterButton && !loadingState && (
+              <div className="position-relative">
+                {''}
+                <Tooltip id="tooltip-for-filter-data" className="tooltip" />
+                <ButtonSolid
+                  variant="tertiary"
+                  className={`tj-text-xsm ${tableDetails.filterDetails.filtersVisible && 'always-active-btn'}`}
+                  customStyles={{ minWidth: '32px' }}
+                  leftIcon="filter"
+                  fill={`var(--slate11)`}
+                  iconWidth="16"
+                  onClick={(e) => {
+                    if (tableDetails?.filterDetails?.filtersVisible) {
+                      hideFilters();
+                      if (document.activeElement === e.currentTarget) {
+                        e.currentTarget.blur();
+                      }
+                    } else {
+                      showFilters();
+                    }
+                  }}
+                  size="md"
+                  data-tooltip-id="tooltip-for-filter-data"
+                  data-tooltip-content="Filter data"
+                ></ButtonSolid>
+                {(tableDetails?.filterDetails?.filtersVisible || !_.isEmpty(tableDetails.filterDetails.filters)) && (
+                  <div className="filter-applied-state position-absolute">
+                    <svg
+                      className="filter-applied-svg"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="17"
+                      height="17"
+                      viewBox="0 0 17 17"
+                      fill="none"
+                    >
+                      <circle
+                        cx="8.3606"
+                        cy="8.08325"
+                        r="6.08325"
+                        stroke="var(--slate1)"
+                        fill="var(--indigo9)"
+                        stroke-width="4"
+                      />
+                    </svg>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="d-flex custom-gap-8" style={{ maxHeight: 32 }}>
+            {loadingState && (
+              <SkeletonTheme baseColor="var(--slate3)">
+                <Skeleton count={1} width={100} height={28} className="mb-1" />
+              </SkeletonTheme>
+            )}
+            {displaySearchBox && !loadingState && (
               <GlobalFilter
                 globalFilter={state.globalFilter}
                 useAsyncDebounce={useAsyncDebounce}
@@ -924,120 +1040,19 @@ export function Table({
                 darkMode={darkMode}
               />
             )}
-            <div>
-              {showAddNewRowButton && (
-                <button
-                  className="btn btn-light btn-sm p-1 mx-1"
-                  onClick={(e) => {
-                    showAddNewRowPopup();
-                  }}
-                  data-tooltip-id="tooltip-for-add-new-row"
-                  data-tooltip-content="Add new row"
-                  disabled={tableDetails.addNewRowsDetails.addingNewRows}
-                >
-                  <img src="assets/images/icons/plus.svg" width="15" height="15" />
-                  {!tableDetails.addNewRowsDetails.addingNewRows &&
-                    !_.isEmpty(tableDetails.addNewRowsDetails.newRowsDataUpdates) && (
-                      <a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
-                    )}
-                </button>
-              )}
-              <Tooltip id="tooltip-for-add-new-row" className="tooltip" />
-              {showFilterButton && (
-                <>
-                  <span
-                    className="btn btn-light btn-sm p-1 mx-1"
-                    onClick={() => showFilters()}
-                    data-tooltip-id="tooltip-for-filter-data"
-                    data-tooltip-content="Filter data"
-                  >
-                    <img src="assets/images/icons/filter.svg" width="15" height="15" />
-                    {tableDetails.filterDetails.filters.length > 0 && (
-                      <a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
-                    )}
-                  </span>
-                  <Tooltip id="tooltip-for-filter-data" className="tooltip" />
-                </>
-              )}
-              {showDownloadButton && (
-                <>
-                  <OverlayTrigger trigger="click" overlay={downlaodPopover()} rootClose={true} placement={'bottom-end'}>
-                    <span
-                      className="btn btn-light btn-sm p-1"
-                      data-tooltip-id="tooltip-for-download"
-                      data-tooltip-content="Download"
-                    >
-                      <img src="assets/images/icons/download.svg" width="15" height="15" />
-                    </span>
-                  </OverlayTrigger>
-                  <Tooltip id="tooltip-for-download" className="tooltip" />
-                </>
-              )}
-              {!hideColumnSelectorButton && (
-                <OverlayTrigger
-                  trigger="click"
-                  rootClose={true}
-                  overlay={
-                    <Popover>
-                      <div
-                        data-cy={`dropdown-hide-column`}
-                        className={`dropdown-table-column-hide-common ${
-                          darkMode ? 'dropdown-table-column-hide-dark-themed' : 'dropdown-table-column-hide'
-                        } `}
-                      >
-                        <div className="dropdown-item">
-                          <IndeterminateCheckbox {...getToggleHideAllColumnsProps()} />
-                          <span className="hide-column-name" data-cy={`options-select-all-coloumn`}>
-                            Select All
-                          </span>
-                        </div>
-                        {allColumns.map(
-                          (column) =>
-                            typeof column.Header === 'string' && (
-                              <div key={column.id}>
-                                <div>
-                                  <label className="dropdown-item">
-                                    <input
-                                      type="checkbox"
-                                      data-cy={`checkbox-coloumn-${String(column.Header)
-                                        .toLowerCase()
-                                        .replace(/\s+/g, '-')}`}
-                                      {...column.getToggleHiddenProps()}
-                                    />
-                                    <span
-                                      className="hide-column-name"
-                                      data-cy={`options-coloumn-${String(column.Header)
-                                        .toLowerCase()
-                                        .replace(/\s+/g, '-')}`}
-                                    >
-                                      {` ${column.Header}`}
-                                    </span>
-                                  </label>
-                                </div>
-                              </div>
-                            )
-                        )}
-                      </div>
-                    </Popover>
-                  }
-                  placement={'bottom-end'}
-                >
-                  <span data-cy={`select-column-icon`} className={`btn btn-light btn-sm p-1 mb-0 mx-1 `}>
-                    <IconEyeOff style={{ width: '15', height: '15', margin: '0px' }} />
-                  </span>
-                </OverlayTrigger>
-              )}
-            </div>
           </div>
         </div>
       )}
-
-      <div className="table-responsive jet-data-table">
+      <div
+        className={`table-responsive jet-data-table ${(loadingState || page.length === 0) && 'overflow-hidden'} ${
+          page.length === 0 && 'position-relative'
+        }`}
+      >
         <table
           {...getTableProps()}
           className={`table table-vcenter table-nowrap ${tableType} ${darkMode && 'table-dark'} ${
             tableDetails.addNewRowsDetails.addingNewRows && 'disabled'
-          }`}
+          } ${!loadingState && page.length !== 0 && 'h-100'}`}
           style={computedStyles}
         >
           <thead>
@@ -1065,52 +1080,179 @@ export function Table({
                       ref={droppableProvided.innerRef}
                       key={index}
                       {...headerGroup.getHeaderGroupProps()}
-                      tabIndex="0"
                       className="tr"
                     >
-                      {headerGroup.headers.map((column, index) => (
-                        <Draggable
-                          key={column.id}
-                          draggableId={column.id}
-                          index={index}
-                          isDragDisabled={!column.accessor}
-                        >
-                          {(provided, snapshot) => {
-                            return (
-                              <th
-                                key={index}
-                                {...column.getHeaderProps()}
-                                className={
-                                  column.isSorted ? (column.isSortedDesc ? 'sort-desc th' : 'sort-asc th') : 'th'
+                      {loadingState && (
+                        <div className="w-100">
+                          <SkeletonTheme baseColor="var(--slate3)" width="100%">
+                            <Skeleton count={1} width={'100%'} height={28} className="mb-1" />
+                          </SkeletonTheme>
+                        </div>
+                      )}
+                      {!loadingState &&
+                        headerGroup.headers.map((column, index) => {
+                          return (
+                            <Draggable
+                              key={column.id}
+                              draggableId={column.id}
+                              index={index}
+                              isDragDisabled={!column.accessor}
+                            >
+                              {(provided, snapshot) => {
+                                let headerProps = { ...column.getHeaderProps() };
+                                if (column.columnType === 'selector') {
+                                  headerProps = {
+                                    ...headerProps,
+                                    style: {
+                                      ...headerProps.style,
+                                      width: 40,
+                                      padding: 0,
+                                      display: 'flex',
+                                      'align-items': 'center',
+                                      'justify-content': 'center',
+                                    },
+                                  };
                                 }
-                              >
-                                <div
-                                  data-cy={`column-header-${String(column.exportValue)
-                                    .toLowerCase()
-                                    .replace(/\s+/g, '-')}`}
-                                  {...column.getSortByToggleProps()}
-                                  {...provided.draggableProps}
-                                  {...provided.dragHandleProps}
-                                  // {...extraProps}
-                                  ref={provided.innerRef}
-                                  style={{ ...getItemStyle(snapshot, provided.draggableProps.style) }}
-                                >
-                                  {column.render('Header')}
-                                </div>
-                                <div
-                                  onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                  }}
-                                  draggable="true"
-                                  {...column.getResizerProps()}
-                                  className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
-                                />
-                              </th>
-                            );
-                          }}
-                        </Draggable>
-                      ))}
+                                if (column.Header === 'Actions') {
+                                  headerProps = {
+                                    ...headerProps,
+                                    style: {
+                                      ...headerProps.style,
+                                      width: calculateWidthOfActionColumnHeader(column.id),
+                                      maxWidth: calculateWidthOfActionColumnHeader(column.id),
+                                      padding: 0,
+                                      display: 'flex',
+                                      'align-items': 'center',
+                                      'justify-content': 'center',
+                                    },
+                                  };
+                                }
+                                if (
+                                  headerGroup?.headers?.[headerGroup?.headers?.length - 1]?.Header === 'Actions' &&
+                                  index === headerGroup?.headers?.length - 2
+                                ) {
+                                  headerProps = {
+                                    ...headerProps,
+                                    style: {
+                                      ...headerProps.style,
+                                      flex: '1 1 auto',
+                                    },
+                                  };
+                                }
+                                const isEditable = resolveReferences(column?.isEditable ?? false, currentState);
+                                return (
+                                  <th
+                                    key={index}
+                                    {...headerProps}
+                                    className={`th tj-text-xsm font-weight-400 ${
+                                      column.isSorted && (column.isSortedDesc ? '' : '')
+                                    } ${column.isResizing && 'resizing-column'} ${
+                                      column.Header === 'Actions' && 'has-actions'
+                                    } position-relative ${column.columnType === 'selector' && 'selector-header'}`}
+                                  >
+                                    <div
+                                      className={`${
+                                        column.columnType !== 'selector' &&
+                                        'd-flex justify-content-between custom-gap-12'
+                                      } ${column.columnType === 'selector' && 'd-flex justify-content-center w-100'}`}
+                                      {...column.getSortByToggleProps()}
+                                      {...provided.draggableProps}
+                                      {...provided.dragHandleProps}
+                                      // {...extraProps}
+                                      ref={provided.innerRef}
+                                      style={{
+                                        ...getItemStyle(snapshot, provided.draggableProps.style),
+                                      }}
+                                    >
+                                      <div
+                                        className={`d-flex thead-editable-icon-header-text-wrapper
+                                          ${
+                                            column.columnType === 'selector'
+                                              ? 'justify-content-center'
+                                              : `justify-content-${determineJustifyContentValue(
+                                                  column?.horizontalAlignment ?? ''
+                                                )}`
+                                          }
+                                          ${column.columnType !== 'selector' && isEditable && 'custom-gap-4'}
+                                          `}
+                                      >
+                                        <div>
+                                          {column.columnType !== 'selector' && isEditable && (
+                                            <SolidIcon
+                                              name="editable"
+                                              width="16px"
+                                              height="16px"
+                                              fill={darkMode ? '#4C5155' : '#C1C8CD'}
+                                              vievBox="0 0 16 16"
+                                            />
+                                          )}
+                                        </div>
+                                        <div
+                                          data-cy={`column-header-${String(column.exportValue)
+                                            .toLowerCase()
+                                            .replace(/\s+/g, '-')}`}
+                                          className={`header-text ${
+                                            column.id === 'selection' &&
+                                            column.columnType === 'selector' &&
+                                            'selector-column'
+                                          }`}
+                                        >
+                                          {column.render('Header')}
+                                        </div>
+                                      </div>
+                                      <div
+                                        style={{
+                                          display:
+                                            column?.columnType !== 'selector' && column?.isSorted ? 'block' : 'none',
+                                        }}
+                                      >
+                                        {column?.isSortedDesc ? (
+                                          <SolidIcon
+                                            name="arrowdown"
+                                            width="16"
+                                            height="16"
+                                            fill={darkMode ? '#ECEDEE' : '#11181C'}
+                                          />
+                                        ) : (
+                                          <SolidIcon
+                                            name="arrowup"
+                                            width="16"
+                                            height="16"
+                                            fill={darkMode ? '#ECEDEE' : '#11181C'}
+                                          />
+                                        )}
+                                      </div>
+                                    </div>
+                                    <div
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                      }}
+                                      onMouseMove={(e) => {
+                                        if (column.id !== resizingColumnId) {
+                                          setResizingColumnId(column.id);
+                                        }
+                                      }}
+                                      onMouseLeave={(e) => {
+                                        if (resizingColumnId) {
+                                          setResizingColumnId(null);
+                                        }
+                                      }}
+                                      draggable="true"
+                                      {...column.getResizerProps()}
+                                      className={`${
+                                        (column.id === 'selection' && column.columnType === 'selector') ||
+                                        column.Header === 'Actions'
+                                          ? ''
+                                          : 'resizer'
+                                      }  ${column.isResizing ? 'isResizing' : ''}`}
+                                    ></div>
+                                  </th>
+                                );
+                              }}
+                            </Draggable>
+                          );
+                        })}
                     </tr>
                   )}
                 </Droppable>
@@ -1118,12 +1260,6 @@ export function Table({
             ))}
           </thead>
 
-          {!loadingState && page.length === 0 && (
-            <center className="w-100">
-              <div className="py-5"> no data </div>
-            </center>
-          )}
-
           {!loadingState && (
             <tbody {...getTableBodyProps()} style={{ color: computeFontColor() }}>
               {page.map((row, index) => {
@@ -1150,10 +1286,9 @@ export function Table({
                       }
                       const selectedRow = row.original;
                       const selectedRowId = row.id;
-                      setExposedVariables({ selectedRow, selectedRowId }).then(() => {
-                        mergeToTableDetails({ selectedRow, selectedRowId });
-                        fireEvent('onRowClicked');
-                      });
+                      setExposedVariables({ selectedRow, selectedRowId });
+                      mergeToTableDetails({ selectedRow, selectedRowId });
+                      fireEvent('onRowClicked');
                     }}
                     onMouseOver={(e) => {
                       if (hoverAdded) {
@@ -1168,6 +1303,7 @@ export function Table({
                   >
                     {row.cells.map((cell, index) => {
                       let cellProps = cell.getCellProps();
+                      cellProps.style.textAlign = cell.column?.horizontalAlignment;
                       if (tableDetails.changeSet) {
                         if (tableDetails.changeSet[cell.row.index]) {
                           const currentColumn = columnData.find((column) => column.id === cell.column.id);
@@ -1175,11 +1311,25 @@ export function Table({
                             _.get(tableDetails.changeSet[cell.row.index], currentColumn?.accessor, undefined) !==
                             undefined
                           ) {
-                            cellProps.style.backgroundColor = darkMode ? '#1c252f' : '#ffffde';
-                            cellProps.style['--tblr-table-accent-bg'] = darkMode ? '#1c252f' : '#ffffde';
+                            cellProps.style.backgroundColor = 'var(--orange3)';
+                            cellProps.style['--tblr-table-accent-bg'] = 'var(--orange3)';
                           }
                         }
                       }
+                      if (cell.column.columnType === 'selector') {
+                        cellProps.style.width = 40;
+                        cellProps.style.padding = 0;
+                      }
+                      if (cell.column.Header === 'Actions') {
+                        cellProps.style.width = 'fit-content';
+                        cellProps.style.maxWidth = 'fit-content';
+                      }
+                      if (
+                        row.cells?.[row.cells?.length - 1]?.column.Header === 'Actions' &&
+                        index === row?.cells?.length - 2
+                      ) {
+                        cellProps.style.flex = '1 1 auto';
+                      }
                       const wrapAction = textWrapActions(cell.column.id);
                       const rowChangeSet = changeSet ? changeSet[cell.row.index] : null;
                       const cellValue = rowChangeSet ? rowChangeSet[cell.column.name] || cell.value : cell.value;
@@ -1210,6 +1360,7 @@ export function Table({
                         cellValue,
                         rowData,
                       });
+                      const horizontalAlignment = cell.column?.horizontalAlignment;
                       return (
                         // Does not require key as its already being passed by react-table via cellProps
                         // eslint-disable-next-line react/jsx-key
@@ -1217,15 +1368,25 @@ export function Table({
                           data-cy={`${cell.column.columnType ?? ''}${String(
                             cell.column.id === 'rightActions' || cell.column.id === 'leftActions' ? cell.column.id : ''
                           )}${String(cellValue ?? '').toLocaleLowerCase()}-cell-${index}`}
-                          className={cx(`${wrapAction ? wrapAction : 'wrap'}-wrapper`, {
-                            'has-actions': cell.column.id === 'rightActions' || cell.column.id === 'leftActions',
-                            'has-text': cell.column.columnType === 'text' || isEditable,
-                            'has-dropdown': cell.column.columnType === 'dropdown',
-                            'has-multiselect': cell.column.columnType === 'multiselect',
-                            'has-datepicker': cell.column.columnType === 'datepicker',
-                            'align-items-center flex-column': cell.column.columnType === 'selector',
-                            [cellSize]: true,
-                          })}
+                          className={cx(
+                            `table-text-align-${cell.column.horizontalAlignment} ${
+                              wrapAction ? wrapAction : cell?.column?.Header === 'Actions' ? '' : 'wrap'
+                            }-wrapper td`,
+                            {
+                              'has-actions': cell.column.id === 'rightActions' || cell.column.id === 'leftActions',
+                              'has-left-actions': cell.column.id === 'leftActions',
+                              'has-right-actions': cell.column.id === 'rightActions',
+                              'has-text': cell.column.columnType === 'text' || isEditable,
+                              'has-dropdown': cell.column.columnType === 'dropdown',
+                              'has-multiselect': cell.column.columnType === 'multiselect',
+                              'has-datepicker': cell.column.columnType === 'datepicker',
+                              'align-items-center flex-column': cell.column.columnType === 'selector',
+                              [cellSize]: true,
+                              'selector-column':
+                                cell.column.columnType === 'selector' && cell.column.id === 'selection',
+                              'resizing-column': cell.column.isResizing || cell.column.id === resizingColumnId,
+                            }
+                          )}
                           {...cellProps}
                           style={{ ...cellProps.style, backgroundColor: cellBackgroundColor ?? 'inherit' }}
                           onClick={(e) => {
@@ -1244,7 +1405,12 @@ export function Table({
                             <GenerateEachCellValue
                               cellValue={cellValue}
                               globalFilter={state.globalFilter}
-                              cellRender={cell.render('Cell', { cell, actionButtonsArray, isEditable })}
+                              cellRender={cell.render('Cell', {
+                                cell,
+                                actionButtonsArray,
+                                isEditable,
+                                horizontalAlignment,
+                              })}
                               rowChangeSet={rowChangeSet}
                               isEditable={isEditable}
                               columnType={cell.column.columnType}
@@ -1263,19 +1429,120 @@ export function Table({
             </tbody>
           )}
         </table>
+        {!loadingState && page.length === 0 && (
+          <div
+            className="d-flex flex-column align-items-center custom-gap-8 justify-content-center h-100"
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translateY(-50%) translateX(-50%)',
+            }}
+          >
+            <div className="warning-no-data">
+              <div className="warning-svg-wrapper">
+                <SolidIcon name="warning" width="16" />
+              </div>
+            </div>
+            <div className="warning-no-data-text">No data</div>
+          </div>
+        )}
         {loadingState === true && (
-          <div style={{ width: '100%' }} className="p-2">
-            <center>
-              <div className="spinner-border mt-5" role="status"></div>
-            </center>
+          <div style={{ width: '100%' }} className="p-2 h-100 ">
+            <div className="d-flex align-items-center justify-content-center h-100">
+              <svg
+                className="loading-spinner-table-component"
+                width="48"
+                height="48"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="var(--indigo6)"
+              >
+                <style>.spinner_ajPY{}</style>
+                <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
+                <path
+                  d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+                  class="spinner_ajPY"
+                  fill="var(--indigo9)"
+                />
+              </svg>
+            </div>
           </div>
         )}
       </div>
-      {(clientSidePagination || serverSidePagination || Object.keys(tableDetails.changeSet || {}).length > 0) && (
-        <div className="card-footer d-flex align-items-center jet-table-footer justify-content-center">
-          <div className="table-footer row gx-0">
-            <div className="col">
-              {(clientSidePagination || serverSidePagination) && (
+      {(enablePagination ||
+        Object.keys(tableDetails.changeSet || {}).length > 0 ||
+        showAddNewRowButton ||
+        showDownloadButton) && (
+        <div
+          className={`card-footer d-flex align-items-center jet-table-footer justify-content-center ${
+            darkMode && 'dark-theme'
+          } ${
+            (tableDetails.addNewRowsDetails.addingNewRows || tableDetails.filterDetails.filtersVisible) && 'disabled'
+          }`}
+        >
+          <div className={`table-footer row gx-0 d-flex align-items-center h-100`}>
+            <div className="col d-flex justify-content-start custom-gap-4">
+              {loadingState && (
+                <SkeletonTheme baseColor="var(--slate3)" width="100%">
+                  <Skeleton count={1} width={83} height={28} className="mb-1" />
+                </SkeletonTheme>
+              )}
+              {!loadingState &&
+                (showBulkUpdateActions && Object.keys(tableDetails.changeSet || {}).length > 0 ? (
+                  <>
+                    <ButtonSolid
+                      variant="primary"
+                      className={`tj-text-xsm`}
+                      onClick={() => {
+                        onEvent('onBulkUpdate', { component }).then(() => {
+                          handleChangesSaved();
+                        });
+                      }}
+                      data-cy={`table-button-save-changes`}
+                      size="md"
+                      isLoading={tableDetails.isSavingChanges ? true : false}
+                      customStyles={{ minWidth: '32px', padding: width > 650 ? '6px 16px' : 0 }}
+                      leftIcon={width > 650 ? '' : 'save'}
+                      fill="#FDFDFE"
+                      iconWidth="16"
+                    >
+                      {width > 650 ? <span>Save changes</span> : ''}
+                    </ButtonSolid>
+                    <ButtonSolid
+                      variant="tertiary"
+                      className={`tj-text-xsm`}
+                      onClick={() => {
+                        handleChangesDiscarded();
+                      }}
+                      data-cy={`table-button-discard-changes`}
+                      size="md"
+                      customStyles={{ minWidth: '32px', padding: width > 650 ? '6px 16px' : 0 }}
+                      leftIcon={width > 650 ? '' : 'cross'}
+                      fill={'var(--slate11)'}
+                      iconWidth="16"
+                    >
+                      {width > 650 ? <span>Discard</span> : ''}
+                    </ButtonSolid>
+                  </>
+                ) : (
+                  !loadingState && (
+                    <span data-cy={`footer-number-of-records`} className="font-weight-500 color-slate11">
+                      {`${globalFilteredRows.length} Records`}
+                    </span>
+                  )
+                ))}
+            </div>
+            <div className={`col d-flex justify-content-center h-100 ${loadingState && 'w-100'}`}>
+              {loadingState && (
+                <div className="w-100">
+                  <SkeletonTheme baseColor="var(--slate3)" width="100%">
+                    <Skeleton count={1} width={'100%'} height={28} className="mb-1" />
+                  </SkeletonTheme>
+                </div>
+              )}
+
+              {enablePagination && !loadingState && (
                 <Pagination
                   lastActivePageIndex={pageIndex}
                   serverSide={serverSidePagination}
@@ -1288,36 +1555,98 @@ export function Table({
                   setPageIndex={setPaginationInternalPageIndex}
                   enableNextButton={enableNextButton}
                   enablePrevButton={enablePrevButton}
+                  darkMode={darkMode}
+                  tableWidth={width}
                 />
               )}
             </div>
-            <div className="col d-flex justify-content-end">
-              {showBulkUpdateActions && Object.keys(tableDetails.changeSet || {}).length > 0 ? (
+            <div className="col d-flex justify-content-end ">
+              {loadingState && (
+                <SkeletonTheme baseColor="var(--slate3)" width="100%">
+                  <Skeleton count={1} width={83} height={28} className="mb-1" />
+                </SkeletonTheme>
+              )}
+              {!loadingState && showAddNewRowButton && (
                 <>
-                  <button
-                    className={`btn btn-primary btn-sm mx-2 ${tableDetails.isSavingChanges ? 'btn-loading' : ''}`}
-                    onClick={() =>
-                      onEvent('onBulkUpdate', { component }).then(() => {
-                        handleChangesSaved();
-                      })
-                    }
-                    data-cy={`table-button-save-changes`}
-                  >
-                    Save Changes
-                  </button>
-                  <button
-                    className="btn btn-light btn-sm"
-                    onClick={() => handleChangesDiscarded()}
-                    data-cy={`table-button-discard-changes`}
-                  >
-                    Discard changes
-                  </button>
+                  <Tooltip id="tooltip-for-add-new-row" className="tooltip" />
+                  <ButtonSolid
+                    variant="ghostBlack"
+                    fill={`var(--slate11)`}
+                    className={`tj-text-xsm ${
+                      tableDetails.addNewRowsDetails.addingNewRows && 'cursor-not-allowed always-active-btn'
+                    }`}
+                    customStyles={{ minWidth: '32px' }}
+                    leftIcon="plus"
+                    iconWidth="16"
+                    onClick={() => {
+                      if (!tableDetails.addNewRowsDetails.addingNewRows) {
+                        showAddNewRowPopup();
+                      }
+                    }}
+                    size="md"
+                    data-tooltip-id="tooltip-for-add-new-row"
+                    data-tooltip-content="Add new row"
+                  ></ButtonSolid>
+                </>
+              )}
+              {!loadingState && showDownloadButton && (
+                <div>
+                  <Tooltip id="tooltip-for-download" className="tooltip" />
+                  <OverlayTriggerComponent
+                    trigger="click"
+                    overlay={downlaodPopover()}
+                    rootClose={true}
+                    placement={'top-end'}
+                  >
+                    <ButtonSolid
+                      variant="ghostBlack"
+                      className={`tj-text-xsm `}
+                      customStyles={{
+                        minWidth: '32px',
+                      }}
+                      leftIcon="filedownload"
+                      fill={`var(--slate11)`}
+                      iconWidth="16"
+                      size="md"
+                      data-tooltip-id="tooltip-for-download"
+                      data-tooltip-content="Download"
+                      onClick={(e) => {
+                        if (document.activeElement === e.currentTarget) {
+                          e.currentTarget.blur();
+                        }
+                      }}
+                    ></ButtonSolid>
+                  </OverlayTriggerComponent>
+                </div>
+              )}
+              {!loadingState && !hideColumnSelectorButton && (
+                <>
+                  <Tooltip id="tooltip-for-manage-columns" className="tooltip" />
+                  <OverlayTriggerComponent
+                    trigger="click"
+                    rootClose={true}
+                    overlay={hideColumnsPopover()}
+                    placement={'top-end'}
+                  >
+                    <ButtonSolid
+                      variant="ghostBlack"
+                      className={`tj-text-xsm `}
+                      customStyles={{ minWidth: '32px' }}
+                      leftIcon="eye1"
+                      fill={`var(--slate11)`}
+                      iconWidth="16"
+                      size="md"
+                      data-cy={`select-column-icon`}
+                      onClick={(e) => {
+                        if (document.activeElement === e.currentTarget) {
+                          e.currentTarget.blur();
+                        }
+                      }}
+                      data-tooltip-id="tooltip-for-manage-columns"
+                      data-tooltip-content="Manage columns"
+                    ></ButtonSolid>
+                  </OverlayTriggerComponent>
                 </>
-              ) : (
-                <span data-cy={`footer-number-of-records`}>
-                  {clientSidePagination && !serverSidePagination && `${globalFilteredRows.length} Records`}
-                  {serverSidePagination && totalRecords ? `${totalRecords} Records` : ''}
-                </span>
               )}
             </div>
           </div>
diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index 2320e06121..6d8d4e4b7d 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import SelectSearch from 'react-select-search';
-import { resolveReferences, validateWidget } from '@/_helpers/utils';
+import { resolveReferences, validateWidget, determineJustifyContentValue } from '@/_helpers/utils';
 import { CustomSelect } from '../CustomSelect';
 import { Tags } from '../Tags';
 import { Radio } from '../Radio';
@@ -9,7 +9,6 @@ import { Toggle } from '../Toggle';
 import { Datepicker } from '../Datepicker';
 import { Link } from '../Link';
 import moment from 'moment';
-
 export default function generateColumnsData({
   columnProperties,
   columnSizes,
@@ -94,7 +93,8 @@ export default function generateColumnsData({
       customRule: column?.customRule,
       sortType,
       columnVisibility: column?.columnVisibility ?? true,
-      Cell: function ({ cell, isEditable, newRowsChangeSet = null }) {
+      horizontalAlignment: column?.horizontalAlignment ?? 'left',
+      Cell: function ({ cell, isEditable, newRowsChangeSet = null, horizontalAlignment }) {
         const updatedChangeSet = newRowsChangeSet === null ? changeSet : newRowsChangeSet;
         const rowChangeSet = updatedChangeSet ? updatedChangeSet[cell.row.index] : null;
         let cellValue = rowChangeSet ? rowChangeSet[column.key || column.name] ?? cell.value : cell.value;
@@ -183,7 +183,12 @@ export default function generateColumnsData({
               );
             }
             return (
-              <div className="d-flex align-items-center h-100" style={cellStyles}>
+              <div
+                className={`d-flex align-items-center h-100 w-100 justify-content-${determineJustifyContentValue(
+                  horizontalAlignment
+                )}`}
+                style={cellStyles}
+              >
                 {String(cellValue)}
               </div>
             );
@@ -251,7 +256,12 @@ export default function generateColumnsData({
               );
             }
             return (
-              <div className="d-flex align-items-center h-100" style={cellStyles}>
+              <div
+                className={`d-flex align-items-center h-100 w-100 justify-content-${determineJustifyContentValue(
+                  horizontalAlignment
+                )}`}
+                style={cellStyles}
+              >
                 {cellValue}
               </div>
             );
diff --git a/frontend/src/Editor/Components/Table/load-properties-and-styles.js b/frontend/src/Editor/Components/Table/load-properties-and-styles.js
index 6b8a39d8bc..c4ee5e648e 100644
--- a/frontend/src/Editor/Components/Table/load-properties-and-styles.js
+++ b/frontend/src/Editor/Components/Table/load-properties-and-styles.js
@@ -1,9 +1,8 @@
+import { has } from 'lodash';
+
 export default function loadPropertiesAndStyles(properties, styles, darkMode, component) {
   const color = styles.textColor !== '#000' ? styles.textColor : darkMode && '#fff';
 
-  let serverSidePagination = properties.serverSidePagination ?? false;
-  if (typeof serverSidePagination !== 'boolean') serverSidePagination = false;
-
   const serverSideSearch = properties.serverSideSearch ?? false;
   const enableNextButton = properties.enableNextButton ?? true;
   const enablePrevButton = properties.enablePrevButton ?? true;
@@ -28,8 +27,25 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co
 
   const highlightSelectedRow = properties.highlightSelectedRow ?? false;
   const rowsPerPage = properties.rowsPerPage ?? 10;
-  let clientSidePagination = properties.clientSidePagination ?? !serverSidePagination;
-  if (typeof clientSidePagination !== 'boolean') clientSidePagination = true;
+
+  let serverSidePagination = properties.serverSidePagination ?? false;
+  if (typeof serverSidePagination !== 'boolean') serverSidePagination = false;
+
+  let clientSidePagination = false;
+  if (
+    properties.clientSidePagination ||
+    typeof clientSidePagination !== 'boolean' ||
+    (properties.enablePagination && !serverSidePagination)
+  ) {
+    clientSidePagination = true;
+  }
+
+  let enablePagination;
+  if (!has(properties, 'enablePagination') && (properties.clientSidePagination || properties.serverSidePagination)) {
+    enablePagination = true;
+  } else {
+    enablePagination = properties.enablePagination;
+  }
 
   const loadingState = properties.loadingState ?? false;
 
@@ -63,7 +79,7 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co
   return {
     color,
     serverSidePagination,
-    clientSidePagination,
+    enablePagination,
     serverSideSearch,
     serverSideSort,
     serverSideFilter,
diff --git a/frontend/src/Editor/Components/Tabs.jsx b/frontend/src/Editor/Components/Tabs.jsx
index 57d832c24d..a873dbe73e 100644
--- a/frontend/src/Editor/Components/Tabs.jsx
+++ b/frontend/src/Editor/Components/Tabs.jsx
@@ -13,7 +13,6 @@ export const Tabs = function Tabs({
   removeComponent,
   setExposedVariable,
   fireEvent,
-  registerAction,
   styles,
   darkMode,
   dataCy,
@@ -70,11 +69,6 @@ export const Tabs = function Tabs({
     setCurrentTab(parsedDefaultTab);
   }, [parsedDefaultTab]);
 
-  useEffect(() => {
-    setExposedVariable('currentTab', currentTab);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentTab]);
-
   useEffect(() => {
     const currentTabData = parsedTabs.filter((tab) => tab.id === currentTab);
     setBgColor(currentTabData[0]?.backgroundColor ? currentTabData[0]?.backgroundColor : darkMode ? '#324156' : '#fff');
@@ -97,16 +91,18 @@ export const Tabs = function Tabs({
     return id === currentTab ? 'visible' : 'hidden';
   }
 
-  registerAction(
-    'setTab',
-    async function (id) {
+  useEffect(() => {
+    setExposedVariable('setTab', async function (id) {
       if (id) {
         setCurrentTab(id);
-        setExposedVariable('currentTab', id).then(() => fireEvent('onTabSwitch'));
+        setExposedVariable('currentTab', id);
+        fireEvent('onTabSwitch');
       }
-    },
-    [setCurrentTab]
-  );
+    });
+    setExposedVariable('currentTab', currentTab);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setCurrentTab, currentTab]);
 
   const renderTabContent = (id, tab) => (
     <div
@@ -153,7 +149,8 @@ export const Tabs = function Tabs({
             style={{ opacity: tab?.disabled && '0.5', width: tabWidth == 'split' && '33.3%' }}
             onClick={() => {
               !tab?.disabled && setCurrentTab(tab.id);
-              !tab?.disabled && setExposedVariable('currentTab', tab.id).then(() => fireEvent('onTabSwitch'));
+              !tab?.disabled && setExposedVariable('currentTab', tab.id);
+              fireEvent('onTabSwitch');
             }}
             key={tab.id}
           >
diff --git a/frontend/src/Editor/Components/Text.jsx b/frontend/src/Editor/Components/Text.jsx
index b7b4c28082..45b44f938b 100644
--- a/frontend/src/Editor/Components/Text.jsx
+++ b/frontend/src/Editor/Components/Text.jsx
@@ -1,15 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import DOMPurify from 'dompurify';
 
-export const Text = function Text({
-  height,
-  properties,
-  styles,
-  darkMode,
-  registerAction,
-  setExposedVariable,
-  dataCy,
-}) {
+export const Text = function Text({ height, properties, styles, darkMode, setExposedVariable, dataCy }) {
   let {
     textSize,
     textColor,
@@ -42,24 +34,18 @@ export const Text = function Text({
     const text = computeText();
     setText(text);
     setExposedVariable('text', text);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [properties.text]);
 
-  registerAction(
-    'setText',
-    async function (text) {
+    setExposedVariable('setText', async function (text) {
       setText(text);
       setExposedVariable('text', text);
-    },
-    [setText]
-  );
-  registerAction(
-    'visibility',
-    async function (value) {
+    });
+
+    setExposedVariable('visibility', async function (value) {
       setVisibility(value);
-    },
-    [setVisibility]
-  );
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties.text, setText, setVisibility]);
 
   function computeText() {
     return properties.text === 0 || properties.text === false ? properties.text?.toString() : properties.text;
diff --git a/frontend/src/Editor/Components/TextArea.jsx b/frontend/src/Editor/Components/TextArea.jsx
index 640b82ad7b..70e3650636 100644
--- a/frontend/src/Editor/Components/TextArea.jsx
+++ b/frontend/src/Editor/Components/TextArea.jsx
@@ -1,29 +1,23 @@
 import React, { useState, useEffect } from 'react';
 
-export const TextArea = function TextArea({ height, properties, styles, setExposedVariable, registerAction, dataCy }) {
+export const TextArea = function TextArea({ height, properties, styles, setExposedVariable, dataCy }) {
   const [value, setValue] = useState(properties.value);
   useEffect(() => {
     setValue(properties.value);
     setExposedVariable('value', properties.value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [properties.value]);
 
-  registerAction(
-    'setText',
-    async function (text) {
+    setExposedVariable('setText', async function (text) {
       setValue(text);
       setExposedVariable('value', text);
-    },
-    [setValue]
-  );
-  registerAction(
-    'clear',
-    async function () {
+    });
+
+    setExposedVariable('clear', async function () {
       setValue('');
       setExposedVariable('value', '');
-    },
-    [setValue]
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties.value, setValue]);
+
   return (
     <textarea
       disabled={styles.disabledState}
diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index 915eef6ead..1b2a8a34c9 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -7,7 +7,6 @@ export const TextInput = function TextInput({
   styles,
   setExposedVariable,
   fireEvent,
-  registerAction,
   component,
   darkMode,
   dataCy,
@@ -18,6 +17,7 @@ export const TextInput = function TextInput({
   const [value, setValue] = useState(properties.value);
   const [visibility, setVisibility] = useState(styles.visibility);
   const { isValid, validationError } = validate(value);
+  const [showValidationError, setShowValidationError] = useState(false);
 
   const computedStyles = {
     height,
@@ -49,34 +49,33 @@ export const TextInput = function TextInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [properties.value]);
 
-  registerAction('setFocus', async function () {
-    textInputRef.current.focus();
-  });
-  registerAction('setBlur', async function () {
-    textInputRef.current.blur();
-  });
-  registerAction('disable', async function (value) {
-    setDisable(value);
-  });
-  registerAction('visibility', async function (value) {
-    setVisibility(value);
-  });
-  registerAction(
-    'setText',
-    async function (text) {
+  useEffect(() => {
+    setExposedVariable('setFocus', async function () {
+      textInputRef.current.focus();
+    });
+    setExposedVariable('setBlur', async function () {
+      textInputRef.current.blur();
+    });
+    setExposedVariable('disable', async function (value) {
+      setDisable(value);
+    });
+    setExposedVariable('visibility', async function (value) {
+      setVisibility(value);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    setExposedVariable('setText', async function (text) {
       setValue(text);
       setExposedVariable('value', text).then(fireEvent('onChange'));
-    },
-    [setValue]
-  );
-  registerAction(
-    'clear',
-    async function () {
+    });
+    setExposedVariable('clear', async function () {
       setValue('');
       setExposedVariable('value', '').then(fireEvent('onChange'));
-    },
-    [setValue]
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setValue]);
 
   return (
     <div data-disabled={disable} className={`text-input ${visibility || 'invisible'}`}>
@@ -85,9 +84,8 @@ export const TextInput = function TextInput({
         onKeyUp={(e) => {
           if (e.key == 'Enter') {
             setValue(e.target.value);
-            setExposedVariable('value', e.target.value).then(() => {
-              fireEvent('onEnterPressed');
-            });
+            setExposedVariable('value', e.target.value);
+            fireEvent('onEnterPressed');
           }
         }}
         onChange={(e) => {
@@ -96,6 +94,7 @@ export const TextInput = function TextInput({
           fireEvent('onChange');
         }}
         onBlur={(e) => {
+          setShowValidationError(true);
           e.stopPropagation();
           fireEvent('onBlur');
         }}
@@ -117,7 +116,7 @@ export const TextInput = function TextInput({
         data-cy={`${String(component.name).toLowerCase()}-invalid-feedback`}
         style={{ color: styles.errTextColor }}
       >
-        {validationError}
+        {showValidationError && validationError}
       </div>
     </div>
   );
diff --git a/frontend/src/Editor/Components/TreeSelect.jsx b/frontend/src/Editor/Components/TreeSelect.jsx
index ff8461ab7f..6e421fe2f0 100644
--- a/frontend/src/Editor/Components/TreeSelect.jsx
+++ b/frontend/src/Editor/Components/TreeSelect.jsx
@@ -72,10 +72,9 @@ export const TreeSelect = ({ height, properties, styles, setExposedVariable, fir
     });
     setExposedVariable('checkedPathArray', checkedPathArray);
     setExposedVariable('checkedPathStrings', checkedPathString);
-    setExposedVariable('checked', checked).then(() => {
-      updatedNode.checked ? fireEvent('onCheck') : fireEvent('onUnCheck');
-      fireEvent('onChange');
-    });
+    setExposedVariable('checked', checked);
+    updatedNode.checked ? fireEvent('onCheck') : fireEvent('onUnCheck');
+    fireEvent('onChange');
     setChecked(checked);
   };
 
diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 37c2d6acab..b59fa5ec71 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -37,13 +37,10 @@ export const Container = ({
   zoomLevel,
   removeComponent,
   deviceWindowWidth,
-  selectedComponents,
   darkMode,
   socket,
   handleUndo,
   handleRedo,
-  onComponentHover,
-  hoveredComponent,
   sideBarDebugger,
   currentPageId,
 }) => {
@@ -65,10 +62,11 @@ export const Container = ({
     }),
     shallow
   );
-  const { showComments, currentLayout } = useEditorStore(
+  const { showComments, currentLayout, selectedComponents } = useEditorStore(
     (state) => ({
       showComments: state?.showComments,
       currentLayout: state?.currentLayout,
+      selectedComponents: state?.selectedComponents,
     }),
     shallow
   );
@@ -194,21 +192,24 @@ export const Container = ({
     return (x * 100) / canvasWidth;
   }
 
-  function updateCanvasHeight(components) {
-    const maxHeight = Object.values(components).reduce((max, component) => {
-      const layout = component?.layouts?.[currentLayout];
-      if (!layout) {
-        return max;
-      }
-      const sum = layout.top + layout.height;
-      return Math.max(max, sum);
-    }, 0);
+  const updateCanvasHeight = useCallback(
+    (components) => {
+      const maxHeight = Object.values(components).reduce((max, component) => {
+        const layout = component?.layouts?.[currentLayout];
+        if (!layout) {
+          return max;
+        }
+        const sum = layout.top + layout.height;
+        return Math.max(max, sum);
+      }, 0);
 
-    const bottomPadding = mode === 'view' ? 100 : 300;
-    const frameHeight = mode === 'view' ? (appDefinition.globalSettings?.hideHeader ? 0 : 45) : 85;
+      const bottomPadding = mode === 'view' ? 100 : 300;
+      const frameHeight = mode === 'view' ? 45 : 85;
 
-    setCanvasHeight(`max(100vh - ${frameHeight}px, ${maxHeight + bottomPadding}px)`);
-  }
+      setCanvasHeight(`max(100vh - ${frameHeight}px, ${maxHeight + bottomPadding}px)`);
+    },
+    [setCanvasHeight, currentLayout, mode]
+  );
 
   useEffect(() => {
     setIsDragging(draggingState);
@@ -242,7 +243,6 @@ export const Container = ({
         const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
         const componentMeta = componentTypes.find((component) => component.component === item.component.component);
         console.log('adding new component');
-
         const newComponent = addNewWidgetToTheEditor(
           componentMeta,
           monitor,
@@ -274,129 +274,136 @@ export const Container = ({
     [moveBox]
   );
 
-  function onDragStop(e, componentId, direction, currentLayout) {
-    if (isVersionReleased) {
-      enableReleasedVersionPopupState();
-      return;
-    }
-    // const id = componentId ? componentId : uuidv4();
+  const onDragStop = useCallback(
+    (e, componentId, direction, currentLayout) => {
+      if (isVersionReleased) {
+        enableReleasedVersionPopupState();
+        return;
+      }
+      // const id = componentId ? componentId : uuidv4();
 
-    // Get the width of the canvas
-    const canvasBounds = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
-    const canvasWidth = canvasBounds?.width;
-    const nodeBounds = direction.node.getBoundingClientRect();
+      // Get the width of the canvas
+      const canvasBounds = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
+      const canvasWidth = canvasBounds?.width;
+      const nodeBounds = direction.node.getBoundingClientRect();
 
-    // Computing the left offset
-    const leftOffset = nodeBounds.x - canvasBounds.x;
-    const currentLeftOffset = boxes[componentId].layouts[currentLayout].left;
-    const leftDiff = currentLeftOffset - convertXToPercentage(leftOffset, canvasWidth);
+      // Computing the left offset
+      const leftOffset = nodeBounds.x - canvasBounds.x;
+      const currentLeftOffset = boxes[componentId]?.layouts?.[currentLayout]?.left;
+      const leftDiff = currentLeftOffset - convertXToPercentage(leftOffset, canvasWidth);
 
-    // Computing the top offset
-    // const currentTopOffset = boxes[componentId].layouts[currentLayout].top;
-    const topDiff = boxes[componentId].layouts[currentLayout].top - (nodeBounds.y - canvasBounds.y);
+      // Computing the top offset
+      // const currentTopOffset = boxes[componentId].layouts[currentLayout].top;
+      const topDiff = boxes[componentId].layouts[currentLayout].top - (nodeBounds.y - canvasBounds.y);
 
-    let newBoxes = { ...boxes };
+      let newBoxes = { ...boxes };
 
-    for (const selectedComponent of selectedComponents) {
-      newBoxes = produce(newBoxes, (draft) => {
-        if (draft[selectedComponent.id]) {
-          const topOffset = draft[selectedComponent.id].layouts[currentLayout].top;
-          const leftOffset = draft[selectedComponent.id].layouts[currentLayout].left;
+      for (const selectedComponent of selectedComponents) {
+        newBoxes = produce(newBoxes, (draft) => {
+          if (draft[selectedComponent.id]) {
+            const topOffset = draft[selectedComponent.id].layouts[currentLayout].top;
+            const leftOffset = draft[selectedComponent.id].layouts[currentLayout].left;
 
-          draft[selectedComponent.id].layouts[currentLayout].top = topOffset - topDiff;
-          draft[selectedComponent.id].layouts[currentLayout].left = leftOffset - leftDiff;
-        }
-      });
-    }
+            draft[selectedComponent.id].layouts[currentLayout].top = topOffset - topDiff;
+            draft[selectedComponent.id].layouts[currentLayout].left = leftOffset - leftDiff;
+          }
+        });
+      }
 
-    setBoxes(newBoxes);
-    updateCanvasHeight(newBoxes);
-  }
+      setBoxes(newBoxes);
+      updateCanvasHeight(newBoxes);
+    },
+    [isVersionReleased, enableReleasedVersionPopupState, boxes, setBoxes, selectedComponents, updateCanvasHeight]
+  );
 
-  function onResizeStop(id, e, direction, ref, d, position) {
-    if (isVersionReleased) {
-      enableReleasedVersionPopupState();
-      return;
-    }
+  const onResizeStop = useCallback(
+    (id, e, direction, ref, d, position) => {
+      if (isVersionReleased) {
+        enableReleasedVersionPopupState();
+        return;
+      }
 
-    const deltaWidth = Math.round(d.width / gridWidth) * gridWidth; //rounding of width of element to nearest mulitple of gridWidth
-    const deltaHeight = d.height;
+      const deltaWidth = Math.round(d.width / gridWidth) * gridWidth; //rounding of width of element to nearest mulitple of gridWidth
+      const deltaHeight = d.height;
 
-    if (deltaWidth === 0 && deltaHeight === 0) {
-      return;
-    }
+      if (deltaWidth === 0 && deltaHeight === 0) {
+        return;
+      }
 
-    let { x, y } = position;
-    x = Math.round(x / gridWidth) * gridWidth;
+      let { x, y } = position;
+      x = Math.round(x / gridWidth) * gridWidth;
 
-    const defaultData = {
-      top: 100,
-      left: 0,
-      width: 445,
-      height: 500,
-    };
+      const defaultData = {
+        top: 100,
+        left: 0,
+        width: 445,
+        height: 500,
+      };
 
-    let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData;
+      let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData;
 
-    const boundingRect = document.getElementsByClassName('canvas-area')[0].getBoundingClientRect();
-    const canvasWidth = boundingRect?.width;
+      const boundingRect = document.getElementsByClassName('canvas-area')[0].getBoundingClientRect();
+      const canvasWidth = boundingRect?.width;
 
-    //round the width to nearest multiple of gridwidth before converting to %
-    const currentWidth = (canvasWidth * width) / NO_OF_GRIDS;
-    let newWidth = currentWidth + deltaWidth;
-    newWidth = Math.round(newWidth / gridWidth) * gridWidth;
-    width = (newWidth * NO_OF_GRIDS) / canvasWidth;
+      //round the width to nearest multiple of gridwidth before converting to %
+      const currentWidth = (canvasWidth * width) / NO_OF_GRIDS;
+      let newWidth = currentWidth + deltaWidth;
+      newWidth = Math.round(newWidth / gridWidth) * gridWidth;
+      width = (newWidth * NO_OF_GRIDS) / canvasWidth;
 
-    height = height + deltaHeight;
+      height = height + deltaHeight;
 
-    top = y;
-    left = (x * 100) / canvasWidth;
+      top = y;
+      left = (x * 100) / canvasWidth;
 
-    let newBoxes = {
-      ...boxes,
-      [id]: {
-        ...boxes[id],
-        layouts: {
-          ...boxes[id]['layouts'],
-          [currentLayout]: {
-            ...boxes[id]['layouts'][currentLayout],
-            width,
-            height,
-            top,
-            left,
+      let newBoxes = {
+        ...boxes,
+        [id]: {
+          ...boxes[id],
+          layouts: {
+            ...boxes[id]['layouts'],
+            [currentLayout]: {
+              ...boxes[id]['layouts'][currentLayout],
+              width,
+              height,
+              top,
+              left,
+            },
           },
         },
-      },
-    };
+      };
 
-    setBoxes(newBoxes);
-    updateCanvasHeight(newBoxes);
-  }
+      setBoxes(newBoxes);
+      updateCanvasHeight(newBoxes);
+    },
+    [setBoxes, currentLayout, boxes, enableReleasedVersionPopupState, isVersionReleased, updateCanvasHeight, gridWidth]
+  );
 
-  function paramUpdated(id, param, value) {
-    if (Object.keys(value).length > 0) {
-      setBoxes((boxes) =>
-        update(boxes, {
-          [id]: {
-            $merge: {
-              component: {
-                ...boxes[id].component,
-                definition: {
-                  ...boxes[id].component.definition,
-                  properties: {
-                    ...boxes[id].component.definition.properties,
-                    [param]: value,
+  const paramUpdated = useCallback(
+    (id, param, value) => {
+      if (Object.keys(value).length > 0) {
+        setBoxes((boxes) =>
+          update(boxes, {
+            [id]: {
+              $merge: {
+                component: {
+                  ...boxes[id].component,
+                  definition: {
+                    ...boxes[id].component.definition,
+                    properties: {
+                      ...boxes[id].component.definition.properties,
+                      [param]: value,
+                    },
                   },
                 },
               },
             },
-          },
-        })
-      );
-    }
-  }
-
-  React.useEffect(() => {}, [selectedComponents]);
+          })
+        );
+      }
+    },
+    [setBoxes]
+  );
 
   const handleAddThread = async (e) => {
     e.stopPropogation && e.stopPropogation();
@@ -503,6 +510,66 @@ export const Container = ({
     return componentWithChildren;
   }, [components]);
 
+  const resizingStatusChanged = useCallback(
+    (status) => {
+      setIsResizing(status);
+    },
+    [setIsResizing]
+  );
+
+  const draggingStatusChanged = useCallback(
+    (status) => {
+      setIsDragging(status);
+    },
+    [setIsDragging]
+  );
+
+  const containerProps = useMemo(() => {
+    return {
+      mode,
+      snapToGrid,
+      onComponentClick,
+      onEvent,
+      appDefinition,
+      appDefinitionChanged,
+      currentState,
+      onComponentOptionChanged,
+      onComponentOptionsChanged,
+      appLoading,
+      zoomLevel,
+      setSelectedComponent,
+      removeComponent,
+      currentLayout,
+      deviceWindowWidth,
+      selectedComponents,
+      darkMode,
+      sideBarDebugger,
+      currentPageId,
+      childComponents,
+    };
+  }, [
+    mode,
+    snapToGrid,
+    onComponentClick,
+    onEvent,
+    appDefinition,
+    appDefinitionChanged,
+    currentState,
+    onComponentOptionChanged,
+    onComponentOptionsChanged,
+    appLoading,
+    zoomLevel,
+    setSelectedComponent,
+    removeComponent,
+    currentLayout,
+    deviceWindowWidth,
+    selectedComponents,
+    darkMode,
+    sideBarDebugger,
+    currentPageId,
+    childComponents,
+  ]);
+
   return (
     <div
       {...(config.COMMENT_FEATURE_ENABLE && showComments && { onClick: handleAddThread })}
@@ -566,48 +633,17 @@ export const Container = ({
               id={key}
               {...boxes[key]}
               mode={mode}
-              resizingStatusChanged={(status) => setIsResizing(status)}
-              draggingStatusChanged={(status) => setIsDragging(status)}
+              resizingStatusChanged={resizingStatusChanged}
+              draggingStatusChanged={draggingStatusChanged}
               inCanvas={true}
               zoomLevel={zoomLevel}
               setSelectedComponent={setSelectedComponent}
               removeComponent={removeComponent}
               deviceWindowWidth={deviceWindowWidth}
-              isSelectedComponent={
-                mode === 'edit' ? selectedComponents.find((component) => component.id === key) : false
-              }
               darkMode={darkMode}
-              onComponentHover={onComponentHover}
-              hoveredComponent={hoveredComponent}
               sideBarDebugger={sideBarDebugger}
-              isMultipleComponentsSelected={selectedComponents?.length > 1 ? true : false}
               childComponents={childComponents[key]}
-              containerProps={{
-                mode,
-                snapToGrid,
-                onComponentClick,
-                onEvent,
-                appDefinition,
-                appDefinitionChanged,
-                currentState,
-                onComponentOptionChanged,
-                onComponentOptionsChanged,
-                appLoading,
-                zoomLevel,
-                setSelectedComponent,
-                removeComponent,
-                currentLayout,
-                deviceWindowWidth,
-                selectedComponents,
-                darkMode,
-                onComponentHover,
-                hoveredComponent,
-                sideBarDebugger,
-                addDefaultChildren,
-                currentPageId,
-                childComponents,
-              }}
-              isVersionReleased={isVersionReleased}
+              containerProps={{ ...containerProps, addDefaultChildren }}
             />
           );
         }
@@ -615,10 +651,15 @@ export const Container = ({
       {Object.keys(boxes).length === 0 && !appLoading && !isDragging && (
         <div style={{ paddingTop: '10%' }}>
           <div className="mx-auto w-50 p-5 bg-light no-components-box">
-            <center className="text-muted">
+            <center className="text-muted" data-cy={`empty-editor-text`}>
               You haven&apos;t added any components yet. Drag components from the right sidebar and drop here. Check out
               our&nbsp;
-              <a href="https://docs.tooljet.com/docs#the-very-quick-quickstart" target="_blank" rel="noreferrer">
+              <a
+                className="color-indigo9 "
+                href="https://docs.tooljet.com/docs#the-very-quick-quickstart"
+                target="_blank"
+                rel="noreferrer"
+              >
                 guide
               </a>{' '}
               on adding components.
diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
index 0eae53189f..b048d940c6 100644
--- a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
@@ -758,7 +758,7 @@ class DataSourceManagerComponent extends React.Component {
                         <input
                           type="text"
                           onChange={(e) => this.onNameChanged(e.target.value)}
-                          className="form-control-plaintext form-control-plaintext-sm"
+                          className="form-control-plaintext form-control-plaintext-sm color-slate12"
                           value={selectedDataSource.name}
                           style={{ width: '160px' }}
                           data-cy="data-source-name-input-filed"
@@ -784,7 +784,7 @@ class DataSourceManagerComponent extends React.Component {
                     className={`close-btn mx-4 mt-3 ${this.props.darkMode ? 'dark' : ''}`}
                     onClick={() => this.hideModal()}
                   >
-                    <img src="assets/images/icons/close.svg" width="12" height="12" />
+                    <SolidIcon name="remove" width="20" fill={'var(--slate12)'} />
                   </span>
                 )}
               </div>
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index a600727135..3322088c35 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import cx from 'classnames';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from './ItemTypes';
@@ -63,271 +63,287 @@ function getStyles(isDragging, isSelectedComponent) {
   };
 }
 
-export const DraggableBox = function DraggableBox({
-  id,
-  className,
-  mode,
-  title,
-  _left,
-  _top,
-  parent,
-  allComponents,
-  component,
-  index,
-  inCanvas,
-  onEvent,
-  onComponentClick,
-  onComponentOptionChanged,
-  onComponentOptionsChanged,
-  onResizeStop,
-  onDragStop,
-  paramUpdated,
-  resizingStatusChanged,
-  zoomLevel,
-  containerProps,
-  setSelectedComponent,
-  removeComponent,
-  layouts,
-  isSelectedComponent,
-  draggingStatusChanged,
-  darkMode,
-  canvasWidth,
-  readOnly,
-  customResolvables,
-  parentId,
-  hoveredComponent,
-  onComponentHover,
-  sideBarDebugger,
-  isMultipleComponentsSelected,
-  childComponents = null,
-  isVersionReleased,
-}) {
-  const [isResizing, setResizing] = useState(false);
-  const [isDragging2, setDragging] = useState(false);
-  const [canDrag, setCanDrag] = useState(true);
-  const [mouseOver, setMouseOver] = useState(false);
-  const currentState = useCurrentState();
-
-  const { currentLayout } = useEditorStore(
-    (state) => ({
-      currentLayout: state?.currentLayout,
-    }),
-    shallow
-  );
-  useEffect(() => {
-    setMouseOver(hoveredComponent === id);
-  }, [hoveredComponent]);
-
-  const [{ isDragging }, drag, preview] = useDrag(
-    () => ({
-      type: ItemTypes.BOX,
-      item: {
-        id,
-        title,
-        component,
-        zoomLevel,
-        parent,
-        layouts,
-        canvasWidth,
-        currentLayout,
-      },
-      collect: (monitor) => ({
-        isDragging: monitor.isDragging(),
+export const DraggableBox = React.memo(
+  ({
+    id,
+    className,
+    mode,
+    title,
+    _left,
+    _top,
+    parent,
+    allComponents,
+    component,
+    index,
+    inCanvas,
+    onEvent,
+    onComponentClick,
+    onComponentOptionChanged,
+    onComponentOptionsChanged,
+    onResizeStop,
+    onDragStop,
+    paramUpdated,
+    resizingStatusChanged,
+    zoomLevel,
+    containerProps,
+    setSelectedComponent,
+    removeComponent,
+    layouts,
+    draggingStatusChanged,
+    darkMode,
+    canvasWidth,
+    readOnly,
+    customResolvables,
+    parentId,
+    sideBarDebugger,
+    childComponents = null,
+  }) => {
+    const [isResizing, setResizing] = useState(false);
+    const [isDragging2, setDragging] = useState(false);
+    const [canDrag, setCanDrag] = useState(true);
+    const {
+      currentLayout,
+      setHoveredComponent,
+      mouseOver,
+      selectionInProgress,
+      isSelectedComponent,
+      isMultipleComponentsSelected,
+    } = useEditorStore(
+      (state) => ({
+        currentLayout: state?.currentLayout,
+        setHoveredComponent: state?.actions?.setHoveredComponent,
+        mouseOver: state?.hoveredComponent === id,
+        selectionInProgress: state?.selectionInProgress,
+        isSelectedComponent:
+          mode === 'edit' ? state?.selectedComponents?.some((component) => component?.id === id) : false,
+        isMultipleComponentsSelected: state?.selectedComponents?.length > 1 ? true : false,
       }),
-    }),
-    [id, title, component, index, zoomLevel, parent, layouts, canvasWidth, currentLayout]
-  );
+      shallow
+    );
+    const currentState = useCurrentState();
 
-  useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: true });
-  }, [isDragging]);
+    const [{ isDragging }, drag, preview] = useDrag(
+      () => ({
+        type: ItemTypes.BOX,
+        item: {
+          id,
+          title,
+          component,
+          zoomLevel,
+          parent,
+          layouts,
+          canvasWidth,
+          currentLayout,
+        },
+        collect: (monitor) => ({
+          isDragging: monitor.isDragging(),
+        }),
+      }),
+      [id, title, component, index, currentLayout, zoomLevel, parent, layouts, canvasWidth]
+    );
 
-  useEffect(() => {
-    if (resizingStatusChanged) {
-      resizingStatusChanged(isResizing);
-    }
-  }, [isResizing]);
+    useEffect(() => {
+      preview(getEmptyImage(), { captureDraggingState: true });
+    }, [isDragging]);
 
-  useEffect(() => {
-    if (draggingStatusChanged) {
-      draggingStatusChanged(isDragging2);
-    }
-
-    if (isDragging2 && !isSelectedComponent) {
-      setSelectedComponent(id, component);
-    }
-  }, [isDragging2]);
-
-  const style = {
-    display: 'inline-block',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '0px',
-  };
-
-  let _refProps = {};
-
-  if (mode === 'edit' && canDrag) {
-    _refProps = {
-      ref: drag,
-    };
-  }
-
-  function changeCanDrag(newState) {
-    setCanDrag(newState);
-  }
-
-  const defaultData = {
-    top: 100,
-    left: 0,
-    width: 445,
-    height: 500,
-  };
-
-  const layoutData = inCanvas ? layouts[currentLayout] || defaultData : defaultData;
-  const gridWidth = canvasWidth / NO_OF_GRIDS;
-  const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
-
-  const configWidgetHandlerForModalComponent =
-    !isSelectedComponent &&
-    component.component === 'Modal' &&
-    resolveWidgetFieldValue(component.definition.properties.useDefaultButton, currentState)?.value === false;
-
-  return (
-    <div
-      className={
-        inCanvas
-          ? ''
-          : cx('text-center align-items-center clearfix mb-2', {
-              'col-md-4': component.component !== 'KanbanBoard',
-              'd-none': component.component === 'KanbanBoard',
-            })
+    useEffect(() => {
+      if (resizingStatusChanged) {
+        resizingStatusChanged(isResizing);
       }
-      style={!inCanvas ? {} : { width: computeWidth() }}
-    >
-      {inCanvas ? (
-        <div
-          className={cx(`draggable-box widget-${id}`, {
-            [className]: !!className,
-            'draggable-box-in-editor': mode === 'edit',
-          })}
-          onMouseEnter={(e) => {
-            if (e.currentTarget.className.includes(`widget-${id}`)) {
-              onComponentHover?.(id);
-              e.stopPropagation();
-            }
-          }}
-          onMouseLeave={() => onComponentHover?.(false)}
-          style={getStyles(isDragging, isSelectedComponent)}
-        >
-          <Rnd
-            style={{ ...style }}
-            resizeGrid={[gridWidth, 10]}
-            dragGrid={[gridWidth, 10]}
-            size={{
-              width: width,
-              height: layoutData.height,
-            }}
-            position={{
-              x: layoutData ? (layoutData.left * canvasWidth) / 100 : 0,
-              y: layoutData ? layoutData.top : 0,
-            }}
-            defaultSize={{}}
-            className={`resizer ${
-              mouseOver || isResizing || isDragging2 || isSelectedComponent ? 'resizer-active' : ''
-            } `}
-            onResize={() => setResizing(true)}
-            onDrag={(e) => {
-              e.preventDefault();
-              e.stopImmediatePropagation();
-              if (!isDragging2) {
-                setDragging(true);
+    }, [isResizing]);
+
+    useEffect(() => {
+      if (draggingStatusChanged) {
+        draggingStatusChanged(isDragging2);
+      }
+
+      if (isDragging2 && !isSelectedComponent) {
+        setSelectedComponent(id, component);
+      }
+    }, [isDragging2]);
+
+    const style = {
+      display: 'inline-block',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '0px',
+    };
+
+    let _refProps = {};
+
+    if (mode === 'edit' && canDrag) {
+      _refProps = {
+        ref: drag,
+      };
+    }
+
+    const changeCanDrag = useCallback(
+      (newState) => {
+        setCanDrag(newState);
+      },
+      [setCanDrag]
+    );
+
+    const defaultData = {
+      top: 100,
+      left: 0,
+      width: 445,
+      height: 500,
+    };
+
+    const layoutData = inCanvas ? layouts[currentLayout] || defaultData : defaultData;
+    const gridWidth = canvasWidth / NO_OF_GRIDS;
+    const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
+
+    const configWidgetHandlerForModalComponent =
+      !isSelectedComponent &&
+      component.component === 'Modal' &&
+      resolveWidgetFieldValue(component.definition.properties.useDefaultButton, currentState)?.value === false;
+
+    const onComponentHover = (id) => {
+      if (selectionInProgress) return;
+      setHoveredComponent(id);
+    };
+
+    return (
+      <div
+        className={
+          inCanvas
+            ? ''
+            : cx('text-center align-items-center clearfix draggable-box-wrapper', {
+                '': component.component !== 'KanbanBoard',
+                'd-none': component.component === 'KanbanBoard',
+              })
+        }
+        style={!inCanvas ? {} : { width: computeWidth() }}
+      >
+        {inCanvas ? (
+          <div
+            className={cx(`draggable-box widget-${id}`, {
+              [className]: !!className,
+              'draggable-box-in-editor': mode === 'edit',
+            })}
+            onMouseEnter={(e) => {
+              if (e.currentTarget.className.includes(`widget-${id}`)) {
+                onComponentHover?.(id);
+                e.stopPropagation();
               }
             }}
-            resizeHandleClasses={isSelectedComponent || mouseOver ? resizerClasses : {}}
-            resizeHandleStyles={resizerStyles}
-            enableResizing={mode === 'edit' && !readOnly}
-            disableDragging={mode !== 'edit' || readOnly}
-            onDragStop={(e, direction) => {
-              setDragging(false);
-              onDragStop(e, id, direction, currentLayout, layoutData);
+            onMouseLeave={() => {
+              setHoveredComponent('');
             }}
-            cancel={`div.table-responsive.jet-data-table, div.calendar-widget, div.text-input, .textarea, .map-widget, .range-slider, .kanban-container, div.real-canvas`}
-            onResizeStop={(e, direction, ref, d, position) => {
-              setResizing(false);
-              onResizeStop(id, e, direction, ref, d, position);
-            }}
-            bounds={parent !== undefined ? `#canvas-${parent}` : '.real-canvas'}
-            widgetId={id}
+            style={getStyles(isDragging, isSelectedComponent)}
           >
-            <div ref={preview} role="DraggableBox" style={isResizing ? { opacity: 0.5 } : { opacity: 1 }}>
-              {mode === 'edit' &&
-                !readOnly &&
-                (configWidgetHandlerForModalComponent || mouseOver || isSelectedComponent) &&
-                !isResizing && (
-                  <ConfigHandle
-                    id={id}
-                    removeComponent={removeComponent}
+            <Rnd
+              style={{ ...style }}
+              resizeGrid={[gridWidth, 10]}
+              dragGrid={[gridWidth, 10]}
+              size={{
+                width: width,
+                height: layoutData.height,
+              }}
+              position={{
+                x: layoutData ? (layoutData.left * canvasWidth) / 100 : 0,
+                y: layoutData ? layoutData.top : 0,
+              }}
+              defaultSize={{}}
+              className={`resizer ${
+                mouseOver || isResizing || isDragging2 || isSelectedComponent ? 'resizer-active' : ''
+              } `}
+              onResize={() => setResizing(true)}
+              onDrag={(e) => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                if (!isDragging2) {
+                  setDragging(true);
+                }
+              }}
+              resizeHandleClasses={isSelectedComponent || mouseOver ? resizerClasses : {}}
+              resizeHandleStyles={resizerStyles}
+              enableResizing={mode === 'edit' && !readOnly}
+              disableDragging={mode !== 'edit' || readOnly}
+              onDragStop={(e, direction) => {
+                setDragging(false);
+                onDragStop(e, id, direction, currentLayout, layoutData);
+              }}
+              cancel={`div.table-responsive.jet-data-table, div.calendar-widget, div.text-input, .textarea, .map-widget, .range-slider, .kanban-container, div.real-canvas`}
+              onResizeStop={(e, direction, ref, d, position) => {
+                setResizing(false);
+                onResizeStop(id, e, direction, ref, d, position);
+              }}
+              bounds={parent !== undefined ? `#canvas-${parent}` : '.real-canvas'}
+              widgetId={id}
+            >
+              <div ref={preview} role="DraggableBox" style={isResizing ? { opacity: 0.5 } : { opacity: 1 }}>
+                {mode === 'edit' &&
+                  !readOnly &&
+                  (configWidgetHandlerForModalComponent || mouseOver || isSelectedComponent) &&
+                  !isResizing && (
+                    <ConfigHandle
+                      id={id}
+                      removeComponent={removeComponent}
+                      component={component}
+                      position={layoutData.top < 15 ? 'bottom' : 'top'}
+                      widgetTop={layoutData.top}
+                      widgetHeight={layoutData.height}
+                      isMultipleComponentsSelected={isMultipleComponentsSelected}
+                      configWidgetHandlerForModalComponent={configWidgetHandlerForModalComponent}
+                    />
+                  )}
+                <ErrorBoundary showFallback={mode === 'edit'}>
+                  <Box
                     component={component}
-                    position={layoutData.top < 15 ? 'bottom' : 'top'}
-                    widgetTop={layoutData.top}
-                    widgetHeight={layoutData.height}
-                    isMultipleComponentsSelected={isMultipleComponentsSelected}
-                    configWidgetHandlerForModalComponent={configWidgetHandlerForModalComponent}
-                    isVersionReleased={isVersionReleased}
+                    id={id}
+                    width={width}
+                    height={layoutData.height - 4}
+                    mode={mode}
+                    changeCanDrag={changeCanDrag}
+                    inCanvas={inCanvas}
+                    paramUpdated={paramUpdated}
+                    onEvent={onEvent}
+                    onComponentOptionChanged={onComponentOptionChanged}
+                    onComponentOptionsChanged={onComponentOptionsChanged}
+                    onComponentClick={onComponentClick}
+                    currentState={currentState}
+                    containerProps={containerProps}
+                    darkMode={darkMode}
+                    removeComponent={removeComponent}
+                    canvasWidth={canvasWidth}
+                    readOnly={readOnly}
+                    customResolvables={customResolvables}
+                    parentId={parentId}
+                    allComponents={allComponents}
+                    sideBarDebugger={sideBarDebugger}
+                    childComponents={childComponents}
                   />
-                )}
-              <ErrorBoundary showFallback={mode === 'edit'}>
-                <Box
-                  component={component}
-                  id={id}
-                  width={width}
-                  height={layoutData.height - 4}
-                  mode={mode}
-                  changeCanDrag={changeCanDrag}
-                  inCanvas={inCanvas}
-                  paramUpdated={paramUpdated}
-                  onEvent={onEvent}
-                  onComponentOptionChanged={onComponentOptionChanged}
-                  onComponentOptionsChanged={onComponentOptionsChanged}
-                  onComponentClick={onComponentClick}
-                  containerProps={containerProps}
-                  darkMode={darkMode}
-                  removeComponent={removeComponent}
-                  canvasWidth={canvasWidth}
-                  readOnly={readOnly}
-                  customResolvables={customResolvables}
-                  parentId={parentId}
-                  allComponents={allComponents}
-                  sideBarDebugger={sideBarDebugger}
-                  childComponents={childComponents}
-                />
-              </ErrorBoundary>
-            </div>
-          </Rnd>
-        </div>
-      ) : (
-        <div ref={drag} role="DraggableBox" className="draggable-box" style={{ height: '100%' }}>
-          <ErrorBoundary showFallback={mode === 'edit'}>
-            <Box
-              component={component}
-              id={id}
-              mode={mode}
-              inCanvas={inCanvas}
-              onEvent={onEvent}
-              paramUpdated={paramUpdated}
-              onComponentOptionChanged={onComponentOptionChanged}
-              onComponentOptionsChanged={onComponentOptionsChanged}
-              onComponentClick={onComponentClick}
-              darkMode={darkMode}
-              removeComponent={removeComponent}
-              sideBarDebugger={sideBarDebugger}
-              customResolvables={customResolvables}
-              containerProps={containerProps}
-            />
-          </ErrorBoundary>
-        </div>
-      )}
-    </div>
-  );
-};
+                </ErrorBoundary>
+              </div>
+            </Rnd>
+          </div>
+        ) : (
+          <div ref={drag} role="DraggableBox" className="draggable-box" style={{ height: '100%' }}>
+            <ErrorBoundary showFallback={mode === 'edit'}>
+              <Box
+                component={component}
+                id={id}
+                mode={mode}
+                inCanvas={inCanvas}
+                onEvent={onEvent}
+                paramUpdated={paramUpdated}
+                onComponentOptionChanged={onComponentOptionChanged}
+                onComponentOptionsChanged={onComponentOptionsChanged}
+                onComponentClick={onComponentClick}
+                currentState={currentState}
+                darkMode={darkMode}
+                removeComponent={removeComponent}
+                sideBarDebugger={sideBarDebugger}
+                customResolvables={customResolvables}
+                containerProps={containerProps}
+              />
+            </ErrorBoundary>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index d20c542b7e..ce8cb2333a 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -95,10 +95,10 @@ class EditorComponent extends React.Component {
       globalSettings: {
         hideHeader: false,
         appInMaintenance: false,
-        canvasMaxWidth: 1292,
-        canvasMaxWidthType: 'px',
+        canvasMaxWidth: 100,
+        canvasMaxWidthType: '%',
         canvasMaxHeight: 2400,
-        canvasBackgroundColor: props.darkMode ? '#2f3c4c' : '#edeff5',
+        canvasBackgroundColor: props.darkMode ? '#2f3c4c' : '#F2F2F5',
         backgroundFxQuery: '',
       },
     };
@@ -122,7 +122,8 @@ class EditorComponent extends React.Component {
       apps: [],
       queryConfirmationList: [],
       isSourceSelected: false,
-      selectionInProgress: false,
+      isSaving: false,
+      isUnsavedQueriesAvailable: false,
       scrollOptions: {},
       currentPageId: defaultPageId,
       pages: {},
@@ -642,10 +643,10 @@ class EditorComponent extends React.Component {
   };
 
   removeComponents = () => {
-    if (!this.props.isVersionReleased && this.state?.selectedComponents?.length > 1) {
-      let newDefinition = cloneDeep(this.state.appDefinition);
-      const selectedComponents = this.state?.selectedComponents;
+    const selectedComponents = this.props?.selectedComponents;
 
+    if (!this.props.isVersionReleased && selectedComponents?.length > 1) {
+      let newDefinition = cloneDeep(this.state.appDefinition);
       removeSelectedComponent(this.state.currentPageId, newDefinition, selectedComponents);
       const platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown';
       if (platform.toLowerCase().indexOf('mac') > -1) {
@@ -744,8 +745,8 @@ class EditorComponent extends React.Component {
   };
 
   handleEditorEscapeKeyPress = () => {
-    if (this.state?.selectedComponents?.length > 0) {
-      this.setState({ selectedComponents: [] });
+    if (this.props?.selectedComponents?.length > 0) {
+      this.props.setSelectedComponents([]);
       this.handleInspectorView();
     }
   };
@@ -754,7 +755,7 @@ class EditorComponent extends React.Component {
     let appDefinition = JSON.parse(JSON.stringify(this.state.appDefinition));
     let newComponents = appDefinition.pages[this.state.currentPageId].components;
 
-    for (const selectedComponent of this.state.selectedComponents) {
+    for (const selectedComponent of this.props.selectedComponents) {
       newComponents = produce(newComponents, (draft) => {
         let top = draft[selectedComponent.id].layouts[this.props.currentLayout].top;
         let left = draft[selectedComponent.id].layouts[this.props.currentLayout].left;
@@ -835,20 +836,16 @@ class EditorComponent extends React.Component {
   };
 
   setSelectedComponent = (id, component, multiSelect = false) => {
-    if (this.state.selectedComponents.length === 0 || !multiSelect) {
+    if (this.props.selectedComponents.length === 0 || !multiSelect) {
       this.switchSidebarTab(1);
     } else {
       this.switchSidebarTab(2);
     }
 
-    const isAlreadySelected = this.state.selectedComponents.find((component) => component.id === id);
+    const isAlreadySelected = this.props.selectedComponents.find((component) => component.id === id);
 
     if (!isAlreadySelected) {
-      this.setState((prevState) => {
-        return {
-          selectedComponents: [...(multiSelect ? prevState.selectedComponents : []), { id, component }],
-        };
-      });
+      this.props.setSelectedComponents([...(multiSelect ? this.props.selectedComponents : []), { id, component }]);
     }
   };
 
@@ -884,9 +881,9 @@ class EditorComponent extends React.Component {
   };
 
   computeCanvasBackgroundColor = () => {
-    const { canvasBackgroundColor } = this.state.appDefinition?.globalSettings ?? '#edeff5';
-    if (['#2f3c4c', '#edeff5'].includes(canvasBackgroundColor)) {
-      return this.props.darkMode ? '#2f3c4c' : '#edeff5';
+    const { canvasBackgroundColor } = this.state.appDefinition?.globalSettings ?? '#F2F2F5';
+    if (['#2f3c4c', '#F2F2F5', '#edeff5'].includes(canvasBackgroundColor)) {
+      return this.props.darkMode ? '#2f3c4c' : '#F2F2F5';
     }
     return canvasBackgroundColor;
   };
@@ -944,19 +941,9 @@ class EditorComponent extends React.Component {
   };
 
   handleComponentClick = (id, component) => {
-    this.setState({
-      selectedComponent: { id, component },
-    });
     this.switchSidebarTab(1);
   };
 
-  handleComponentHover = (id) => {
-    if (this.state.selectionInProgress) return;
-    this.setState({
-      hoveredComponent: id,
-    });
-  };
-
   sideBarDebugger = {
     error: (data) => {
       debuggerActions.error(this, data);
@@ -982,20 +969,17 @@ class EditorComponent extends React.Component {
   runQuery = (queryId, queryName) => runQuery(this, queryId, queryName);
 
   onAreaSelectionStart = (e) => {
-    const isMultiSelect = e.inputEvent.shiftKey || this.state.selectedComponents.length > 0;
-    this.setState((prevState) => {
-      return {
-        selectionInProgress: true,
-        selectedComponents: [...(isMultiSelect ? prevState.selectedComponents : [])],
-      };
-    });
+    const isMultiSelect = e.inputEvent.shiftKey || this.props.selectedComponents.length > 0;
+    this.props.setSelectionInProgress(true);
+    this.props.setSelectedComponents([...(isMultiSelect ? this.props.selectedComponents : [])]);
   };
 
   onAreaSelection = (e) => {
     e.added.forEach((el) => {
       el.classList.add('resizer-select');
     });
-    if (this.state.selectionInProgress) {
+
+    if (this.props.selectionInProgress) {
       e.removed.forEach((el) => {
         el.classList.remove('resizer-select');
       });
@@ -1004,7 +988,7 @@ class EditorComponent extends React.Component {
 
   onAreaSelectionEnd = (e) => {
     const currentPageId = this.state.currentPageId;
-    this.setState({ selectionInProgress: false });
+    this.props.setSelectionInProgress(false);
     e.selected.forEach((el, index) => {
       const id = el.getAttribute('widgetid');
       const component = this.state.appDefinition.pages[currentPageId].components[id].component;
@@ -1024,13 +1008,13 @@ class EditorComponent extends React.Component {
   onAreaSelectionDrag = (e) => {
     if (this.selectionDragRef.current) {
       e.stop();
-      this.state.selectionInProgress && this.setState({ selectionInProgress: false });
+      this.props.selectionInProgress && this.props.setSelectionInProgress(false);
     }
   };
 
   onAreaSelectionDragEnd = () => {
     this.selectionDragRef.current = false;
-    this.state.selectionInProgress && this.setState({ selectionInProgress: false });
+    this.props.selectionInProgress && this.props.setSelectionInProgress(false);
   };
 
   addNewPage = ({ name, handle }) => {
@@ -1376,6 +1360,30 @@ class EditorComponent extends React.Component {
     );
   };
 
+  disableEnablePage = ({ pageId, isDisabled }) => {
+    const newAppDefinition = {
+      ...this.state.appDefinition,
+      pages: {
+        ...this.state.appDefinition.pages,
+        [pageId]: {
+          ...this.state.appDefinition.pages[pageId],
+          disabled: isDisabled ?? false,
+        },
+      },
+    };
+
+    this.setState(
+      {
+        isSaving: true,
+        appDefinition: newAppDefinition,
+        appDefinitionLocalVersion: uuid(),
+      },
+      () => {
+        this.autoSave();
+      }
+    );
+  };
+
   switchPage = (pageId, queryParams = []) => {
     document.getElementById('real-canvas').scrollIntoView();
     if (
@@ -1476,13 +1484,18 @@ class EditorComponent extends React.Component {
       return defaultCanvasMinWidth;
     }
   };
+  handleCanvasContainerMouseUp = (e) => {
+    if (['real-canvas', 'modal'].includes(e.target.className)) {
+      this.props.setSelectedComponents([]);
+      this.setState({ currentSidebarTab: 2 });
+    }
+  };
 
   handleEditorMarginLeftChange = (value) => this.setState({ editorMarginLeft: value });
 
   render() {
     const {
       currentSidebarTab,
-      selectedComponents = [],
       appDefinition,
       appId,
       slug,
@@ -1493,9 +1506,9 @@ class EditorComponent extends React.Component {
       deviceWindowWidth,
       apps,
       defaultComponentStateComputed,
-      hoveredComponent,
       queryConfirmationList,
     } = this.state;
+    const selectedComponents = this?.props?.selectedComponents;
     const currentState = this.props?.currentState;
     const editingVersion = this.props?.editingVersion;
     const appVersionPreviewLink = editingVersion
@@ -1550,6 +1563,9 @@ class EditorComponent extends React.Component {
           <DndProvider backend={HTML5Backend}>
             <div className="sub-section">
               <LeftSidebar
+                globalSettingsChanged={this.globalSettingsChanged}
+                toggleAppMaintenance={this.toggleAppMaintenance}
+                app={app}
                 errorLogs={currentState.errors}
                 components={currentState.components}
                 appId={appId}
@@ -1566,6 +1582,7 @@ class EditorComponent extends React.Component {
                   pages: this.state.appDefinition.pages,
                   homePageId: this.state.appDefinition.homePageId,
                   showViewerNavigation: this.state.appDefinition.showViewerNavigation,
+                  globalSettings: this.state.appDefinition.globalSettings,
                 }}
                 setSelectedComponent={this.setSelectedComponent}
                 removeComponent={this.removeComponent}
@@ -1579,6 +1596,7 @@ class EditorComponent extends React.Component {
                 renamePage={this.renamePage}
                 clonePage={this.clonePage}
                 hidePage={this.hidePage}
+                disableEnablePage={this.disableEnablePage}
                 unHidePage={this.unHidePage}
                 updateHomePage={this.updateHomePage}
                 updatePageHandle={this.updatePageHandle}
@@ -1588,6 +1606,7 @@ class EditorComponent extends React.Component {
                 apps={apps}
                 setEditorMarginLeft={this.handleEditorMarginLeftChange}
               />
+
               {!this.props.showComments && (
                 <Selecto
                   dragContainer={'.canvas-container'}
@@ -1622,13 +1641,9 @@ class EditorComponent extends React.Component {
                       (this.state.editorMarginLeft ? this.state.editorMarginLeft - 1 : this.state.editorMarginLeft) +
                       `px solid ${this.computeCanvasBackgroundColor()}`,
                     height: this.computeCanvasContainerHeight(),
-                    background: !this.props.darkMode && '#f4f6fa',
-                  }}
-                  onMouseUp={(e) => {
-                    if (['real-canvas', 'modal'].includes(e.target.className)) {
-                      this.setState({ selectedComponents: [], currentSidebarTab: 2, hoveredComponent: false });
-                    }
+                    background: !this.props.darkMode ? '#EBEBEF' : '#2E3035',
                   }}
+                  onMouseUp={this.handleCanvasContainerMouseUp}
                   ref={this.canvasContainerRef}
                   onScroll={() => {
                     this.selectionRef.current.checkScroll();
@@ -1692,7 +1707,6 @@ class EditorComponent extends React.Component {
                             mode={'edit'}
                             zoomLevel={zoomLevel}
                             deviceWindowWidth={deviceWindowWidth}
-                            selectedComponents={selectedComponents}
                             appLoading={isLoading}
                             onEvent={this.handleEvent}
                             onComponentOptionChanged={this.handleOnComponentOptionChanged}
@@ -1702,8 +1716,6 @@ class EditorComponent extends React.Component {
                             handleRedo={this.handleRedo}
                             removeComponent={this.removeComponent}
                             onComponentClick={this.handleComponentClick}
-                            onComponentHover={this.handleComponentHover}
-                            hoveredComponent={hoveredComponent}
                             sideBarDebugger={this.sideBarDebugger}
                             currentPageId={this.state.currentPageId}
                           />
@@ -1758,6 +1770,7 @@ class EditorComponent extends React.Component {
                         darkMode={this.props.darkMode}
                         appDefinitionLocalVersion={this.state.appDefinitionLocalVersion}
                         pages={this.getPagesWithIds()}
+                        cloneComponents={this.cloneComponents}
                       ></Inspector>
                     ) : (
                       <center className="mt-5 p-2">
@@ -1787,10 +1800,21 @@ class EditorComponent extends React.Component {
 }
 
 const withStore = (Component) => (props) => {
-  const { showComments, currentLayout } = useEditorStore(
+  const {
+    showComments,
+    currentLayout,
+    selectionInProgress,
+    setSelectionInProgress,
+    selectedComponents,
+    setSelectedComponents,
+  } = useEditorStore(
     (state) => ({
       showComments: state?.showComments,
       currentLayout: state?.currentLayout,
+      selectionInProgress: state?.selectionInProgress,
+      setSelectionInProgress: state?.actions?.setSelectionInProgress,
+      selectedComponents: state?.selectedComponents,
+      setSelectedComponents: state?.actions?.setSelectedComponents,
     }),
     shallow
   );
@@ -1798,17 +1822,20 @@ const withStore = (Component) => (props) => {
     (state) => ({ isVersionReleased: state.isVersionReleased, editingVersion: state.editingVersion }),
     shallow
   );
-
   const currentState = useCurrentState();
 
   return (
     <Component
       {...props}
-      isVersionReleased={isVersionReleased}
-      editingVersion={editingVersion}
-      currentState={currentState}
       showComments={showComments}
       currentLayout={currentLayout}
+      isVersionReleased={isVersionReleased}
+      editingVersion={editingVersion}
+      selectionInProgress={selectionInProgress}
+      setSelectionInProgress={setSelectionInProgress}
+      selectedComponents={selectedComponents}
+      setSelectedComponents={setSelectedComponents}
+      currentState={currentState}
     />
   );
 };
diff --git a/frontend/src/Editor/Header/GlobalSettings.jsx b/frontend/src/Editor/Header/GlobalSettings.jsx
index 6426fd2fd6..75dd10e4de 100644
--- a/frontend/src/Editor/Header/GlobalSettings.jsx
+++ b/frontend/src/Editor/Header/GlobalSettings.jsx
@@ -1,18 +1,18 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import { SketchPicker } from 'react-color';
 import { Confirm } from '../Viewer/Confirm';
-import { LeftSidebarItem } from '../LeftSidebar/SidebarItem';
+import { HeaderSection } from '@/_ui/LeftSidebar';
 import FxButton from '../CodeBuilder/Elements/FxButton';
 import { CodeHinter } from '../CodeBuilder/CodeHinter';
 import { resolveReferences } from '@/_helpers/utils';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
-import Popover from '@/_ui/Popover';
 import ExportAppModal from '../../HomePage/ExportAppModal';
 import { useCurrentState } from '@/_stores/currentStateStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 
 export const GlobalSettings = ({
   globalSettings,
@@ -24,12 +24,11 @@ export const GlobalSettings = ({
 }) => {
   const { t } = useTranslation();
   const { hideHeader, canvasMaxWidth, canvasMaxWidthType, canvasBackgroundColor, backgroundFxQuery } = globalSettings;
-  const [showPicker, setShowPicker] = React.useState(false);
+  const [showPicker, setShowPicker] = useState(false);
   const currentState = useCurrentState();
-  const [forceCodeBox, setForceCodeBox] = React.useState(true);
-  const [realState, setRealState] = React.useState(currentState);
-  const [showConfirmation, setConfirmationShow] = React.useState(false);
-  const [show, setShow] = React.useState('');
+  const [forceCodeBox, setForceCodeBox] = useState(true);
+  const [realState, setRealState] = useState(currentState);
+  const [showConfirmation, setConfirmationShow] = useState(false);
   const [isExportingApp, setIsExportingApp] = React.useState(false);
   const { isVersionReleased } = useAppVersionStore(
     (state) => ({
@@ -46,213 +45,29 @@ export const GlobalSettings = ({
     left: '0px',
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     setRealState(currentState);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentState.components]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     backgroundFxQuery &&
       globalSettingsChanged('canvasBackgroundColor', resolveReferences(backgroundFxQuery, realState));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(resolveReferences(backgroundFxQuery, realState))]);
 
-  const popoverContent = (
-    <div id="global-settings-popover" className={cx({ 'theme-dark': darkMode, disabled: isVersionReleased })}>
-      <div bsPrefix="global-settings-popover">
-        <div>
-          <div>
-            <div className="d-flex justify-content-start">
-              <span data-cy={`label-hide-header-for-launched-apps`}>
-                {t('leftSidebar.Settings.hideHeader', 'Hide header for launched apps')}
-              </span>
-              <div className="form-check form-switch">
-                <input
-                  data-cy={`toggle-hide-header-for-launched-apps`}
-                  className="form-check-input"
-                  type="checkbox"
-                  checked={hideHeader}
-                  onChange={(e) => globalSettingsChanged('hideHeader', e.target.checked)}
-                />
-              </div>
-              <span className="global-popover-text">
-                {t('leftSidebar.Settings.hideHeader', 'Hide header for launched apps')}
-              </span>
-            </div>
-            <div className="d-flex   justify-content-start">
-              <span data-cy={`label-maintenance-mode`}>
-                {t('leftSidebar.Settings.maintenanceMode', 'Maintenance mode')}
-              </span>
-              <div className="form-check form-switch">
-                <input
-                  data-cy={`toggle-maintenance-mode`}
-                  className="form-check-input"
-                  type="checkbox"
-                  checked={is_maintenance_on}
-                  onChange={() => setConfirmationShow(true)}
-                />
-              </div>
-              <span className="global-popover-text">
-                {t('leftSidebar.Settings.maintenanceMode', 'Maintenance mode')}
-              </span>
-            </div>
-            <div className="d-flex mb-3 global-popover-div-wrap ">
-              <span data-cy={`label-max-canvas-width`} className="w-full m-auto">
-                {t('leftSidebar.Settings.maxWidthOfCanvas', 'Max width of canvas')}
-              </span>
-              <div className="global-popover-div-wrap global-popover-div-wrap-width">
-                <div className="input-with-icon">
-                  <input
-                    data-cy="maximum-canvas-width-input-field"
-                    type="text"
-                    className={`form-control form-control-sm maximum-canvas-width-input-field`}
-                    placeholder={'0'}
-                    onChange={(e) => {
-                      const width = e.target.value;
-                      if (!Number.isNaN(width) && width >= 0) globalSettingsChanged('canvasMaxWidth', width);
-                    }}
-                    value={canvasMaxWidth}
-                  />
-                  <select
-                    className="maximum-canvas-width-input-select"
-                    data-cy={`dropdown-max-canvas-width-type`}
-                    aria-label="Select canvas width type"
-                    onChange={(event) => {
-                      const newCanvasMaxWidthType = event.currentTarget.value;
-                      globalSettingsChanged('canvasMaxWidthType', newCanvasMaxWidthType);
-                      if (newCanvasMaxWidthType === '%') {
-                        globalSettingsChanged('canvasMaxWidth', 100);
-                      } else if (newCanvasMaxWidthType === 'px') {
-                        globalSettingsChanged('canvasMaxWidth', 1292);
-                      }
-                    }}
-                  >
-                    <option value="%" selected={canvasMaxWidthType === '%'}>
-                      %
-                    </option>
-                    <option value="px" selected={canvasMaxWidthType === 'px' || _.isUndefined(canvasMaxWidthType)}>
-                      px
-                    </option>
-                  </select>
-                </div>
-              </div>
-            </div>
-            {/* <div className="d-flex mb-3">
-              <span className="w-full m-auto" data-cy={`label-max-canvas-height`}>
-                {t('leftSidebar.Settings.maxHeightOfCanvas', 'Max height of canvas')}
-              </span>
-              <div className="global-popover-div-wrap global-popover-div-wrap-width">
-                <div className="input-with-icon">
-                  <input
-                    data-cy="maximum-canvas-height-input-field"
-                    type="text"
-                    className={`form-control form-control-sm maximum-canvas-height-input-field`}
-                    placeholder={'0'}
-                    onChange={(e) => {
-                      const height = e.target.value;
-                      if (!Number.isNaN(height) && height <= 2400) globalSettingsChanged('canvasMaxHeight', height);
-                    }}
-                    value={canvasMaxHeight}
-                  />
-                </div>
-              </div>
-            </div> */}
-            <div className="d-flex align-items-center">
-              <span className="w-full" data-cy={`label-bg-canvas`}>
-                {t('leftSidebar.Settings.backgroundColorOfCanvas', 'Background color of canvas')}
-              </span>
-              <div className="canvas-codehinter-container">
-                {showPicker && (
-                  <div>
-                    <div style={coverStyles} onClick={() => setShowPicker(false)} />
-                    <SketchPicker
-                      data-cy={`color-picker-canvas`}
-                      className="canvas-background-picker"
-                      onFocus={() => setShowPicker(true)}
-                      color={canvasBackgroundColor}
-                      onChangeComplete={(color) => {
-                        globalSettingsChanged('canvasBackgroundColor', [color.hex, color.rgb]);
-                        globalSettingsChanged('backgroundFxQuery', color.hex);
-                      }}
-                    />
-                  </div>
-                )}
-                {forceCodeBox && (
-                  <div
-                    className="form-control form-control-sm canvas-background-holder"
-                    onClick={() => setShowPicker(true)}
-                  >
-                    <div
-                      data-cy={`canvas-bg-color-picker`}
-                      className="col-auto"
-                      style={{
-                        float: 'right',
-                        width: '13.33px',
-                        height: '13.33px',
-                        backgroundColor: canvasBackgroundColor,
-                        borderRadius: '4px',
-                      }}
-                    ></div>
-                    <div className="">{canvasBackgroundColor}</div>
-                  </div>
-                )}
-                <div
-                  className={`${!forceCodeBox && 'hinter-canvas-input'} ${!darkMode && 'hinter-canvas-input-light'} `}
-                >
-                  {!forceCodeBox && (
-                    <CodeHinter
-                      cyLabel={`canvas-bg-colour`}
-                      currentState={realState}
-                      initialValue={backgroundFxQuery ? backgroundFxQuery : canvasBackgroundColor}
-                      value={backgroundFxQuery ? backgroundFxQuery : canvasBackgroundColor}
-                      theme={darkMode ? 'monokai' : 'duotone-light'}
-                      mode="javascript"
-                      className="canvas-hinter-wrap"
-                      lineNumbers={false}
-                      onChange={(color) => {
-                        globalSettingsChanged('canvasBackgroundColor', resolveReferences(color, realState));
-                        globalSettingsChanged('backgroundFxQuery', color);
-                      }}
-                    />
-                  )}
-                  <div className={`fx-canvas ${!darkMode && 'fx-canvas-light'} `}>
-                    <FxButton
-                      dataCy={`canvas-bg-color`}
-                      active={!forceCodeBox ? true : false}
-                      onPress={() => {
-                        setForceCodeBox(!forceCodeBox);
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="d-flex align-items-center  global-popover-div-wrap">
-              <p className="global-popover-text">Export app</p>
-              <button
-                className="export-app-btn"
-                onClick={() => {
-                  setIsExportingApp(true);
-                  document.getElementById('maintenance-app-modal').click();
-                }}
-              >
-                <svg width="16" height="16" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M2.5 5.78906V17.2891V18.0391C2.5 19.834 3.98027 21.2891 5.77519 21.2891C7.5425 21.2891 9 19.8564 9 18.0891C9 17.6472 9.35817 17.2891 9.8 17.2891H18.5V5.78906C18.5 4.13221 17.1569 2.78906 15.5 2.78906H5.5C3.84315 2.78906 2.5 4.13221 2.5 5.78906ZM9.75 9.61723C9.70334 9.65231 9.65858 9.69108 9.61612 9.73355L8.03033 11.3193C7.73744 11.6122 7.26256 11.6122 6.96967 11.3193C6.67678 11.0264 6.67678 10.5516 6.96967 10.2587L8.55546 8.67289C9.6294 7.59895 11.3706 7.59895 12.4445 8.67289L14.0303 10.2587C14.3232 10.5516 14.3232 11.0264 14.0303 11.3193C13.7374 11.6122 13.2626 11.6122 12.9697 11.3193L11.3839 9.73355C11.3414 9.69108 11.2967 9.65231 11.25 9.61723V13.789C11.25 14.2032 10.9142 14.539 10.5 14.539C10.0858 14.539 9.75 14.2032 9.75 13.789V9.61723ZM22.3766 19.7789C21.9361 21.5093 20.3675 22.7891 18.5 22.7891H6.5C8.36748 22.7891 9.93606 21.5093 10.3766 19.7789C10.5128 19.2437 10.9477 18.7891 11.5 18.7891H21.5C22.0523 18.7891 22.5128 19.2437 22.3766 19.7789Z"
-                    fill="#3E63DD"
-                  />
-                </svg>
-                <span style={{ paddingLeft: '6px' }}>Export this app</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
+  const outerStyles = {
+    width: '142px',
+    height: '32px',
+    borderRadius: ' 6px',
+    display: 'flex',
+    paddingLeft: '4px',
+    alignItems: 'center',
+    gap: '4px',
+    background: showPicker && 'var(--indigo2)',
+    outline: showPicker && '1px solid var(--indigo9)',
+    boxShadow: showPicker && '0px 0px 0px 1px #C6D4F9',
+  };
   return (
     <>
       <Confirm
@@ -278,26 +93,203 @@ export const GlobalSettings = ({
           darkMode={darkMode}
         />
       )}
-      <Popover
-        handleToggle={(show) => {
-          if (show) setShow('settings');
-          else {
-            setShow('');
-            setShowPicker(false);
-          }
-        }}
-        popoverContentClassName="p-0 sidebar-h-100-popover global-settings-popover-content"
-        side="bottom"
-        popoverContent={popoverContent}
-        popoverContentHeight="auto"
-      >
-        <LeftSidebarItem
-          selectedSidebarItem={show}
-          icon="settings"
-          className={cx(`cursor-pointer sidebar-global-settings`)}
-          tip="Settings"
-        />
-      </Popover>
+      <div id="" className={cx({ 'dark-theme': darkMode, disabled: isVersionReleased })}>
+        <div bsPrefix="global-settings-popover">
+          <HeaderSection darkMode={darkMode}>
+            <HeaderSection.PanelHeader title="Global settings" />
+          </HeaderSection>
+          <div style={{ padding: '12px 16px' }}>
+            <div className="tj-text-xsm color-slate12 ">
+              <div className="d-flex mb-3">
+                <span data-cy={`label-hide-header-for-launched-apps`}>
+                  {t('leftSidebar.Settings.hideHeader', 'Hide header for launched apps')}
+                </span>
+                <div className="ms-auto form-check form-switch position-relative">
+                  <input
+                    data-cy={`toggle-hide-header-for-launched-apps`}
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={hideHeader}
+                    onChange={(e) => globalSettingsChanged('hideHeader', e.target.checked)}
+                  />
+                </div>
+              </div>
+              <div className="d-flex mb-3">
+                <span data-cy={`label-maintenance-mode`}>
+                  {t('leftSidebar.Settings.maintenanceMode', 'Maintenance mode')}
+                </span>
+                <div className="ms-auto form-check form-switch position-relative">
+                  <input
+                    data-cy={`toggle-maintenance-mode`}
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={is_maintenance_on}
+                    onChange={() => setConfirmationShow(true)}
+                  />
+                </div>
+              </div>
+              <div className="d-flex mb-3">
+                <span data-cy={`label-max-canvas-width`} className="w-full m-auto">
+                  {t('leftSidebar.Settings.maxWidthOfCanvas', 'Max width of canvas')}
+                </span>
+                <div className="position-relative">
+                  <div className="global-settings-width-input-container">
+                    <input
+                      style={{ width: '103px' }}
+                      data-cy="maximum-canvas-width-input-field"
+                      type="text"
+                      className={`form-control`}
+                      placeholder={'0'}
+                      onChange={(e) => {
+                        const width = e.target.value;
+                        if (!Number.isNaN(width) && width >= 0) globalSettingsChanged('canvasMaxWidth', width);
+                      }}
+                      value={canvasMaxWidth}
+                    />
+                    <select
+                      data-cy={`dropdown-max-canvas-width-type`}
+                      className="dropdown-max-canvas-width-type"
+                      aria-label="Select canvas width type"
+                      onChange={(event) => {
+                        const newCanvasMaxWidthType = event.currentTarget.value;
+                        globalSettingsChanged('canvasMaxWidthType', newCanvasMaxWidthType);
+                        if (newCanvasMaxWidthType === '%') {
+                          globalSettingsChanged('canvasMaxWidth', 100);
+                        } else if (newCanvasMaxWidthType === 'px') {
+                          globalSettingsChanged('canvasMaxWidth', 1292);
+                        }
+                      }}
+                    >
+                      <option value="%" selected={canvasMaxWidthType === '%'}>
+                        %
+                      </option>
+                      <option value="px" selected={canvasMaxWidthType === 'px' || _.isUndefined(canvasMaxWidthType)}>
+                        px
+                      </option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              {/* <div className="d-flex mb-3">
+              <span className="w-full m-auto" data-cy={`label-max-canvas-height`}>
+                {t('leftSidebar.Settings.maxHeightOfCanvas', 'Max height of canvas')}
+              </span>
+              <div className="global-popover-div-wrap global-popover-div-wrap-width">
+                <div className="input-with-icon">
+                  <input
+                    data-cy="maximum-canvas-height-input-field"
+                    type="text"
+                    className={`form-control form-control-sm maximum-canvas-height-input-field`}
+                    placeholder={'0'}
+                    onChange={(e) => {
+                      const height = e.target.value;
+                      if (!Number.isNaN(height) && height <= 2400) globalSettingsChanged('canvasMaxHeight', height);
+                    }}
+                    value={canvasMaxHeight}
+                  />
+                </div>
+              </div>
+            </div> */}
+              <div className="d-flex justify-content-between mb-3">
+                <span className="pt-2" data-cy={`label-bg-canvas`}>
+                  {t('leftSidebar.Settings.backgroundColorOfCanvas', 'Canvas bavkground')}
+                </span>
+                <div className="canvas-codehinter-container">
+                  {showPicker && (
+                    <div>
+                      <div style={coverStyles} onClick={() => setShowPicker(false)} />
+                      <SketchPicker
+                        data-cy={`color-picker-canvas`}
+                        className="canvas-background-picker"
+                        onFocus={() => setShowPicker(true)}
+                        color={canvasBackgroundColor}
+                        onChangeComplete={(color) => {
+                          globalSettingsChanged('canvasBackgroundColor', [color.hex, color.rgb]);
+                          globalSettingsChanged('backgroundFxQuery', color.hex);
+                        }}
+                      />
+                    </div>
+                  )}
+                  {forceCodeBox && (
+                    <div
+                      className="row mx-0 color-picker-input d-flex"
+                      onClick={() => setShowPicker(true)}
+                      style={outerStyles}
+                    >
+                      <div
+                        data-cy={`canvas-bg-color-picker`}
+                        className="col-auto"
+                        style={{
+                          float: 'right',
+                          width: '24px',
+                          height: '24px',
+                          backgroundColor: canvasBackgroundColor,
+                          borderRadius: ' 6px',
+                          border: `1px solid var(--slate7, #D7DBDF)`,
+                          boxShadow: `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`,
+                        }}
+                      ></div>
+                      <div style={{ height: '20px' }} className="col">
+                        {canvasBackgroundColor}
+                      </div>
+                    </div>
+                  )}
+                  <div
+                    className={`${!forceCodeBox && 'hinter-canvas-input'} ${!darkMode && 'hinter-canvas-input-light'} `}
+                  >
+                    {!forceCodeBox && (
+                      <CodeHinter
+                        cyLabel={`canvas-bg-colour`}
+                        currentState={realState}
+                        initialValue={backgroundFxQuery ? backgroundFxQuery : canvasBackgroundColor}
+                        value={backgroundFxQuery ? backgroundFxQuery : canvasBackgroundColor}
+                        theme={darkMode ? 'monokai' : 'duotone-light'}
+                        mode="javascript"
+                        className="canvas-hinter-wrap"
+                        lineNumbers={false}
+                        onChange={(color) => {
+                          globalSettingsChanged('canvasBackgroundColor', resolveReferences(color, realState));
+                          globalSettingsChanged('backgroundFxQuery', color);
+                        }}
+                      />
+                    )}
+                    <div className={`fx-canvas ${!darkMode && 'fx-canvas-light'} `}>
+                      <FxButton
+                        dataCy={`canvas-bg-color`}
+                        active={!forceCodeBox ? true : false}
+                        onPress={() => {
+                          setForceCodeBox(!forceCodeBox);
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="d-flex align-items-center  global-popover-div-wrap mb-3">
+                <p className="tj-text-xsm color-slate12 w-full m-auto">Export app</p>
+                <div>
+                  <ButtonSolid
+                    variant="secondary"
+                    style={{ width: '158px' }}
+                    size="md"
+                    onClick={() => {
+                      setIsExportingApp(true);
+                      document.getElementById('maintenance-app-modal').click();
+                    }}
+                    fill={`var(--indigo9)`}
+                    leftIcon="fileupload"
+                    iconWidth="16"
+                    data-cy="button-user-status-change"
+                  >
+                    Export this app
+                  </ButtonSolid>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </>
   );
 };
diff --git a/frontend/src/Editor/Header/HeaderActions.jsx b/frontend/src/Editor/Header/HeaderActions.jsx
index d5e2d58a02..5f341f39f3 100644
--- a/frontend/src/Editor/Header/HeaderActions.jsx
+++ b/frontend/src/Editor/Header/HeaderActions.jsx
@@ -3,6 +3,7 @@ import cx from 'classnames';
 import { Tooltip } from 'react-tooltip';
 import { useEditorStore } from '@/_stores/editorStore';
 import { shallow } from 'zustand/shallow';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
   const darkMode = localStorage.getItem('darkMode') === 'true';
@@ -15,10 +16,10 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
   );
   return (
     <div className="editor-header-actions">
-      <div style={{ borderRadius: 6, marginRight: 12 }}>
+      <div style={{ borderRadius: 6 }}>
         <div
           className="d-flex align-items-center p-1 current-layout"
-          style={{ height: 28, background: darkMode ? '#2F3C4C' : '#ECEEF0', borderRadius: 6 }}
+          style={{ height: 28, background: darkMode ? '#202425' : '#F1F3F5', borderRadius: 6 }}
           role="tablist"
           aria-orientation="horizontal"
         >
@@ -36,14 +37,11 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
             onClick={() => toggleCurrentLayout('desktop')}
             data-cy={`button-change-layout-to-desktop`}
           >
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M2.28125 4.17106C2.28125 3.38866 2.91551 2.75439 3.69792 2.75439H15.0312C15.8137 2.75439 16.4479 3.38866 16.4479 4.17106V11.2544C16.4479 12.0368 15.8137 12.6711 15.0312 12.6711H12.1979V14.0877H12.9062C13.2975 14.0877 13.6146 14.4049 13.6146 14.7961C13.6146 15.1873 13.2975 15.5044 12.9062 15.5044H5.82292C5.43172 15.5044 5.11458 15.1873 5.11458 14.7961C5.11458 14.4049 5.43172 14.0877 5.82292 14.0877H6.53125V12.6711H3.69792C2.91551 12.6711 2.28125 12.0368 2.28125 11.2544V4.17106ZM7.94792 12.6711V14.0877H10.7812V12.6711H7.94792ZM3.69792 11.2544V4.17106H15.0312V11.2544H3.69792Z"
-                fill="#11181C"
-              />
-            </svg>
+            <SolidIcon
+              name="computer"
+              width="14"
+              fill={currentLayout === 'desktop' ? 'var(--slate12)' : 'var(--slate8)'}
+            />
           </button>
           <button
             className={cx('btn border-0 p-1', {
@@ -59,66 +57,52 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
             onClick={() => toggleCurrentLayout('mobile')}
             data-cy={`button-change-layout-to-mobile`}
           >
-            <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M6.86328 3.12939C6.44907 3.12939 6.11328 3.46518 6.11328 3.87939V14.3794C6.11328 14.7936 6.44907 15.1294 6.86328 15.1294H12.8633C13.2775 15.1294 13.6133 14.7936 13.6133 14.3794V3.87939C13.6133 3.46518 13.2775 3.12939 12.8633 3.12939H11.3633C11.3633 3.54361 11.0275 3.87939 10.6133 3.87939H9.11328C8.69907 3.87939 8.36328 3.54361 8.36328 3.12939H6.86328ZM4.61328 3.87939C4.61328 2.63675 5.62064 1.62939 6.86328 1.62939H12.8633C14.1059 1.62939 15.1133 2.63675 15.1133 3.87939V14.3794C15.1133 15.622 14.1059 16.6294 12.8633 16.6294H6.86328C5.62064 16.6294 4.61328 15.622 4.61328 14.3794V3.87939ZM9.86328 12.1294C10.2775 12.1294 10.6133 12.4652 10.6133 12.8794V12.8869C10.6133 13.3011 10.2775 13.6369 9.86328 13.6369C9.44907 13.6369 9.11328 13.3011 9.11328 12.8869V12.8794C9.11328 12.4652 9.44907 12.1294 9.86328 12.1294Z"
-                fill="#11181C"
-              />
-            </svg>
+            <SolidIcon
+              name="mobile"
+              width="14"
+              fill={currentLayout !== 'desktop' ? 'var(--slate12)' : 'var(--slate8)'}
+            />
           </button>
         </div>
       </div>
-      <svg
-        onClick={handleUndo}
-        xmlns="http://www.w3.org/2000/svg"
-        data-cy={`editor-undo-button`}
-        className={cx('undo-button cursor-pointer icon icon-tabler icon-tabler-arrow-back-up', {
-          disabled: !canUndo,
-        })}
-        width="44"
-        height="44"
-        viewBox="0 0 24 24"
-        strokeWidth="1.5"
-        stroke={darkMode ? '#fff' : '#2c3e50'}
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        data-tooltip-id="tooltip-for-undo"
-        data-tooltip-content="Undo"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none">
-          <title>undo</title>
-        </path>
-        <path d="M9 13l-4 -4l4 -4m-4 4h11a4 4 0 0 1 0 8h-1" fill="none">
-          <title>undo</title>
-        </path>
-      </svg>
-      <svg
-        title="redo"
-        onClick={handleRedo}
-        xmlns="http://www.w3.org/2000/svg"
-        data-cy={`editor-redo-button`}
-        className={cx('redo-button cursor-pointer icon icon-tabler icon-tabler-arrow-forward-up', {
-          disabled: !canRedo,
-        })}
-        width="44"
-        height="44"
-        viewBox="0 0 24 24"
-        strokeWidth="1.5"
-        stroke={darkMode ? '#fff' : '#2c3e50'}
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        data-tooltip-id="tooltip-for-redo"
-        data-tooltip-content="Redo"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none">
-          <title>redo</title>
-        </path>
-        <path d="M15 13l4 -4l-4 -4m4 4h-11a4 4 0 0 0 0 8h1" />
-      </svg>
+      <div className="undo-redo-container">
+        <div
+          onClick={handleUndo}
+          className="tj-ghost-black-btn"
+          data-tooltip-id="tooltip-for-undo"
+          data-tooltip-content="Undo"
+          data-cy={`editor-undo-button`}
+        >
+          <SolidIcon
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill={darkMode ? '#fff' : '#2c3e50'}
+            name="arrowforwardup"
+            className={cx('cursor-pointer', {
+              disabled: !canUndo,
+            })}
+          />
+        </div>
+        <div
+          onClick={handleRedo}
+          className="tj-ghost-black-btn"
+          data-tooltip-id="tooltip-for-redo"
+          data-tooltip-content="Redo"
+          data-cy={`editor-redo-button`}
+        >
+          <SolidIcon
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill={darkMode ? '#fff' : '#2c3e50'}
+            name="arrowbackup"
+            className={cx('cursor-pointer', {
+              disabled: !canRedo,
+            })}
+          />
+        </div>
+      </div>
       <Tooltip id="tooltip-for-undo" className="tooltip" />
       <Tooltip id="tooltip-for-redo" className="tooltip" />
     </div>
diff --git a/frontend/src/Editor/Header/index.js b/frontend/src/Editor/Header/index.js
index 3df9ab8e67..bf0102e4db 100644
--- a/frontend/src/Editor/Header/index.js
+++ b/frontend/src/Editor/Header/index.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import AppLogo from '@/_components/AppLogo';
-import { GlobalSettings } from './GlobalSettings';
 import EditAppName from './EditAppName';
 import HeaderActions from './HeaderActions';
 import RealtimeAvatars from '../RealtimeAvatars';
@@ -14,12 +13,10 @@ import config from 'config';
 import { useUpdatePresence } from '@y-presence/react';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export default function EditorHeader({
-  darkMode,
-  globalSettingsChanged,
-  appDefinition,
-  toggleAppMaintenance,
+  M,
   app,
   appVersionPreviewLink,
   slug,
@@ -37,8 +34,8 @@ export default function EditorHeader({
   saveEditingVersion,
   onVersionDelete,
   currentUser,
+  darkMode,
 }) {
-  const { is_maintenance_on } = app;
   const { isVersionReleased, editingVersion } = useAppVersionStore(
     (state) => ({
       isVersionReleased: state.isVersionReleased,
@@ -65,58 +62,67 @@ export default function EditorHeader({
 
   return (
     <div className="header">
-      <header className="navbar navbar-expand-md navbar-light d-print-none">
+      <header className="navbar navbar-expand-md  d-print-none p-0">
         <div className="container-xl header-container">
           <div className="d-flex w-100">
-            <h1 className="navbar-brand d-none-navbar-horizontal pe-0 mt-1">
+            <h1 className="navbar-brand d-none-navbar-horizontal p-0">
               <Link to={'/'} data-cy="editor-page-logo">
                 <AppLogo isLoadingFromHeader={true} />
               </Link>
             </h1>
             <div
               style={{
-                maxHeight: '45px',
+                maxHeight: '48px',
+                margin: '0px',
+                padding: '0px',
+                width: 'calc(100% - 348px)',
+                justifyContent: 'space-between',
               }}
-              className="flex-grow-1 row px-3"
+              className="flex-grow-1 d-flex align-items-center"
             >
-              <div className="col">
-                <div className="row p-2">
-                  <div className="col global-settings-app-wrapper">
-                    <GlobalSettings
-                      globalSettingsChanged={globalSettingsChanged}
-                      globalSettings={appDefinition.globalSettings}
-                      darkMode={darkMode}
-                      toggleAppMaintenance={toggleAppMaintenance}
-                      is_maintenance_on={is_maintenance_on}
-                      app={app}
-                    />
-                    <EditAppName appId={app.id} appName={app.name} onNameChanged={onNameChanged} />
-                  </div>
-
-                  <div className="col d-flex">
-                    <HeaderActions
-                      canUndo={canUndo}
-                      canRedo={canRedo}
-                      handleUndo={handleUndo}
-                      handleRedo={handleRedo}
-                    />
-                    <div className="my-1 mx-3">
-                      <span
-                        className={cx('autosave-indicator', {
-                          'autosave-indicator-saving': isSaving,
-                          'text-danger': saveError,
-                          'd-none': isVersionReleased,
-                        })}
-                        data-cy="autosave-indicator"
-                      >
-                        {isSaving ? 'Saving...' : saveError ? 'Could not save changes' : 'Saved changes'}
-                      </span>
-                    </div>
+              <div
+                className="p-0 m-0 d-flex align-items-center"
+                style={{
+                  padding: '0px',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div className="global-settings-app-wrapper p-0 m-0 ">
+                  <EditAppName appId={app.id} appName={app.name} onNameChanged={onNameChanged} />
+                </div>
+                <HeaderActions canUndo={canUndo} canRedo={canRedo} handleUndo={handleUndo} handleRedo={handleRedo} />
+                <div className="d-flex align-items-center">
+                  <div style={{ width: '100px', marginRight: '20px' }}>
+                    <span
+                      className={cx('autosave-indicator tj-text-xsm', {
+                        'autosave-indicator-saving': isSaving,
+                        'text-danger': saveError,
+                        'd-none': isVersionReleased,
+                      })}
+                      data-cy="autosave-indicator"
+                    >
+                      {isSaving ? (
+                        'Saving...'
+                      ) : saveError ? (
+                        <div className="d-flex align-items-center" style={{ gap: '4px' }}>
+                          <SolidIcon name="cloudinvalid" width="14" />
+                          <p className="mb-0 text-center tj-text-xxsm">Could not save changes</p>
+                        </div>
+                      ) : (
+                        <div className="d-flex align-items-center" style={{ gap: '4px' }}>
+                          <SolidIcon name="cloudvalid" width="14" />
+                          <p className="mb-0 text-center">Changes saved</p>
+                        </div>
+                      )}
+                    </span>
                   </div>
+                  {config.ENABLE_MULTIPLAYER_EDITING && <RealtimeAvatars />}
                 </div>
               </div>
-              <div className="col-auto d-flex">
-                <div className="d-flex version-manager-container">
+              <div className="navbar-seperator"></div>
+              <div className="d-flex align-items-center p-0" style={{ marginRight: '12px' }}>
+                <div className="d-flex version-manager-container p-0">
                   {editingVersion && (
                     <AppVersionsManager
                       appId={appId}
@@ -126,45 +132,34 @@ export default function EditorHeader({
                     />
                   )}
                 </div>
-                {config.ENABLE_MULTIPLAYER_EDITING && (
-                  <div className="mx-2 p-2">
-                    <RealtimeAvatars />
-                  </div>
-                )}
               </div>
-              <div className="col-1"></div>
             </div>
-            <div className="d-flex">
-              <div className="navbar-nav flex-row order-md-last release-buttons p-1">
-                <div className="nav-item me-1">
+            <div
+              className="d-flex justify-content-end navbar-right-section"
+              style={{ width: '300px', paddingRight: '12px' }}
+            >
+              <div className="navbar-nav flex-row order-md-last release-buttons ">
+                <div className="nav-item">
                   {app.id && (
-                    <ManageAppUsers app={app} slug={slug} darkMode={darkMode} handleSlugChange={handleSlugChange} />
+                    <ManageAppUsers
+                      app={app}
+                      slug={slug}
+                      M={M}
+                      handleSlugChange={handleSlugChange}
+                      darkMode={darkMode}
+                    />
                   )}
                 </div>
-                <div className="nav-item me-1">
+                <div className="nav-item">
                   <Link
                     title="Preview"
                     to={appVersionPreviewLink}
                     target="_blank"
                     rel="noreferrer"
                     data-cy="preview-link-button"
+                    className="editor-header-icon tj-secondary-btn"
                   >
-                    <svg
-                      className="icon cursor-pointer w-100 h-100"
-                      width="33"
-                      height="33"
-                      viewBox="0 0 33 33"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <rect x="0.363281" y="0.220703" width="32" height="32" rx="6" fill="#F0F4FF" />
-                      <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M10.4712 16.2205C12.1364 18.9742 14.1064 20.2205 16.3646 20.2205C18.6227 20.2205 20.5927 18.9742 22.258 16.2205C20.5927 13.4669 18.6227 12.2205 16.3646 12.2205C14.1064 12.2205 12.1364 13.4669 10.4712 16.2205ZM9.1191 15.8898C10.9694 12.6519 13.3779 10.8872 16.3646 10.8872C19.3513 10.8872 21.7598 12.6519 23.6101 15.8898C23.7272 16.0947 23.7272 16.3464 23.6101 16.5513C21.7598 19.7891 19.3513 21.5539 16.3646 21.5539C13.3779 21.5539 10.9694 19.7891 9.1191 16.5513C9.00197 16.3464 9.00197 16.0947 9.1191 15.8898ZM16.3646 15.5539C15.9964 15.5539 15.6979 15.8524 15.6979 16.2205C15.6979 16.5887 15.9964 16.8872 16.3646 16.8872C16.7328 16.8872 17.0312 16.5887 17.0312 16.2205C17.0312 15.8524 16.7328 15.5539 16.3646 15.5539ZM14.3646 16.2205C14.3646 15.116 15.26 14.2205 16.3646 14.2205C17.4692 14.2205 18.3646 15.116 18.3646 16.2205C18.3646 17.3251 17.4692 18.2205 16.3646 18.2205C15.26 18.2205 14.3646 17.3251 14.3646 16.2205Z"
-                        fill="#3E63DD"
-                      />
-                    </svg>
+                    <SolidIcon name="eyeopen" width="14" fill="#3E63DD" />
                   </Link>
                 </div>
                 <div className="nav-item dropdown">
diff --git a/frontend/src/Editor/Inspector/Components/Table/NoListItem.jsx b/frontend/src/Editor/Inspector/Components/Table/NoListItem.jsx
new file mode 100644
index 0000000000..4f598e12e2
--- /dev/null
+++ b/frontend/src/Editor/Inspector/Components/Table/NoListItem.jsx
@@ -0,0 +1,25 @@
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import React from 'react';
+
+const NoListItem = ({ text, dataCy = '' }) => {
+  return (
+    <div
+      data-cy={`no-items-banner${dataCy}`}
+      className="d-flex justify-content-center"
+      style={{
+        padding: '6px 32px',
+        borderRadius: '6px',
+        border: '1px dashed var(--slate5)',
+        color: 'var(--slate8)',
+        marginBottom: '8px',
+      }}
+    >
+      <span className="d-flex align-items-center" style={{ marginRight: '2px' }}>
+        <SolidIcon name="information" width="14" fill={`var(--slate8)`} />
+      </span>
+      {text}
+    </div>
+  );
+};
+
+export default NoListItem;
diff --git a/frontend/src/Editor/Inspector/Components/Table/ProgramaticallyHandleToggleSwitch.jsx b/frontend/src/Editor/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
similarity index 72%
rename from frontend/src/Editor/Inspector/Components/Table/ProgramaticallyHandleToggleSwitch.jsx
rename to frontend/src/Editor/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
index 66fc8f0913..695376bb8b 100644
--- a/frontend/src/Editor/Inspector/Components/Table/ProgramaticallyHandleToggleSwitch.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CodeHinter } from '../../../CodeBuilder/CodeHinter';
 
-export const ProgramaticallyHandleToggleSwitch = ({
+export const ProgramaticallyHandleProperties = ({
   darkMode,
   // eslint-disable-next-line no-unused-vars
   label,
@@ -18,10 +18,8 @@ export const ProgramaticallyHandleToggleSwitch = ({
     switch (property) {
       case 'isEditable':
         return props.isEditable;
-
       case 'disableActionButton':
         return props.disableActionButton;
-
       case 'columnVisibility':
         return props.columnVisibility;
       case 'linkTarget':
@@ -30,33 +28,15 @@ export const ProgramaticallyHandleToggleSwitch = ({
         return;
     }
   };
-  const getOptionsForSelectElement = (property, paramMeta) => {
-    switch (property) {
-      case 'linkTarget':
-        return {
-          ...paramMeta,
-          options: [
-            { name: 'Same window', value: '_self' },
-            { name: 'New window', value: '_blank' },
-          ],
-        };
 
-      default:
-        break;
-    }
-  };
-  if (paramMeta.type === 'select') {
-    paramMeta = getOptionsForSelectElement(property, paramMeta);
-  }
-
-  const getInitialValue = (property, definition) => {
+  const getInitialValue = (property, definitionObj) => {
     if (property === 'columnVisibility') {
-      return definition?.value ?? `{{true}}`;
+      return definitionObj?.value ?? `{{true}}`;
     }
     if (property === 'linkTarget') {
-      return definition?.value ?? '_blank';
+      return definitionObj?.value ?? '_blank';
     }
-    return definition?.value ?? `{{false}}`;
+    return definitionObj?.value ?? `{{false}}`;
   };
 
   const value = getValueBasedOnProperty(property, props);
diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
index 656d3dae4b..4364cf1997 100644
--- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Accordion from '@/_ui/Accordion';
-
 import { renderElement } from '../../Utils';
 import { computeActionName, resolveReferences } from '@/_helpers/utils';
 // eslint-disable-next-line import/no-unresolved
@@ -13,7 +12,11 @@ import { v4 as uuidv4 } from 'uuid';
 import { EventManager } from '../../EventManager';
 import { CodeHinter } from '../../../CodeBuilder/CodeHinter';
 import { withTranslation } from 'react-i18next';
-import { ProgramaticallyHandleToggleSwitch } from './ProgramaticallyHandleToggleSwitch';
+import AddNewButton from '@/ToolJetUI/Buttons/AddNewButton/AddNewButton';
+import List from '@/ToolJetUI/List/List';
+import { capitalize, has } from 'lodash';
+import NoListItem from './NoListItem';
+import { ProgramaticallyHandleProperties } from './ProgramaticallyHandleProperties';
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -168,7 +171,7 @@ class TableComponent extends React.Component {
     return (
       <Popover
         id="popover-basic-2"
-        className={`${this.props.darkMode && 'popover-dark-themed theme-dark'} shadow`}
+        className={`${this.props.darkMode && 'dark-theme'} shadow`}
         style={{
           maxHeight: resolveReferences(column.isEditable, this.state.currentState) ? '100vh' : 'inherit',
           overflowY: 'auto',
@@ -190,12 +193,12 @@ class TableComponent extends React.Component {
                 { name: 'Multiple badges', value: 'badges' },
                 { name: 'Tags', value: 'tags' },
                 { name: 'Dropdown', value: 'dropdown' },
+                { name: 'Link', value: 'link' },
                 { name: 'Radio', value: 'radio' },
                 { name: 'Multiselect', value: 'multiselect' },
                 { name: 'Toggle switch', value: 'toggle' },
                 { name: 'Date Picker', value: 'datepicker' },
                 { name: 'Image', value: 'image' },
-                { name: 'Link', value: 'link' },
               ]}
               value={column.columnType}
               search={true}
@@ -264,6 +267,27 @@ class TableComponent extends React.Component {
               }}
             />
           </div>
+          <div className="field mb-2">
+            <label className="form-label">
+              {this.props.t('widget.Table.horizontalAlignment', 'Horizontal Alignment')}
+            </label>
+            <SelectSearch
+              className={'select-search'}
+              options={[
+                { name: 'Left', value: 'left' },
+                { name: 'Center', value: 'center' },
+                { name: 'Right', value: 'right' },
+              ]}
+              value={column?.horizontalAlignment ?? 'left'}
+              search={true}
+              closeOnSelect={true}
+              onChange={(value) => {
+                this.onColumnItemChange(index, 'horizontalAlignment', value);
+              }}
+              fuzzySearch
+              placeholder={this.props.t('globals.select', 'Select') + '...'}
+            />
+          </div>
 
           {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
             <div>
@@ -544,7 +568,7 @@ class TableComponent extends React.Component {
               <label data-cy={`label-date-parse-format`} className="form-label">
                 {this.props.t('widget.Table.dateParseformat', 'Date Parse Format')}
               </label>
-              <div className="field mb-2">
+              <div className="field mb-2 tj-app-input">
                 <input
                   data-cy={`input-date-parse-format`}
                   type="text"
@@ -673,7 +697,7 @@ class TableComponent extends React.Component {
           )}
           {column.columnType === 'link' && (
             <div className="field mb-2">
-              <ProgramaticallyHandleToggleSwitch
+              <ProgramaticallyHandleProperties
                 label="Link target"
                 currentState={this.state.currentState}
                 index={index}
@@ -682,14 +706,21 @@ class TableComponent extends React.Component {
                 property="linkTarget"
                 props={column}
                 component={this.props.component}
-                paramMeta={{ type: 'select', displayName: 'Link Target' }}
+                paramMeta={{
+                  type: 'select',
+                  displayName: 'Link Target',
+                  options: [
+                    { name: 'Same window', value: '_self' },
+                    { name: 'New window', value: '_blank' },
+                  ],
+                }}
                 paramType="properties"
               />
             </div>
           )}
 
           {!['image', 'link'].includes(column.columnType) && (
-            <ProgramaticallyHandleToggleSwitch
+            <ProgramaticallyHandleProperties
               label="make editable"
               currentState={this.state.currentState}
               index={index}
@@ -698,12 +729,12 @@ class TableComponent extends React.Component {
               property="isEditable"
               props={column}
               component={this.props.component}
-              paramMeta={{ type: 'toggle', displayName: 'make editable' }}
+              paramMeta={{ type: 'toggle', displayName: 'Make editable' }}
               paramType="properties"
             />
           )}
 
-          <ProgramaticallyHandleToggleSwitch
+          <ProgramaticallyHandleProperties
             label="Column visibility"
             currentState={this.state.currentState}
             index={index}
@@ -730,9 +761,9 @@ class TableComponent extends React.Component {
     };
 
     return (
-      <Popover id="popover-basic" className={`${this.props.darkMode && 'popover-dark-themed theme-dark'} shadow`}>
+      <Popover id="popover-basic" className={`${this.props.darkMode && 'dark-theme'}`}>
         <Popover.Body>
-          <div className="field mb-2">
+          <div className="field mb-2 tj-app-input">
             <label data-cy={`label-action-button-text`} className="form-label">
               {this.props.t('widget.Table.buttonText', 'Button Text')}
             </label>
@@ -783,7 +814,7 @@ class TableComponent extends React.Component {
             onChange={(name, value, color) => this.onActionButtonPropertyChanged(index, 'textColor', color)}
             cyLabel={`action-button-text`}
           />
-          <ProgramaticallyHandleToggleSwitch
+          <ProgramaticallyHandleProperties
             label="Disable button"
             currentState={this.state.currentState}
             index={index}
@@ -817,7 +848,7 @@ class TableComponent extends React.Component {
     );
   };
 
-  actionButton(action, index) {
+  renderActionButton(action, index) {
     return (
       <OverlayTrigger
         trigger="click"
@@ -826,19 +857,15 @@ class TableComponent extends React.Component {
         overlay={this.actionPopOver(action, index)}
         onToggle={(showing) => this.setState({ showPopOver: showing })}
       >
-        <div className={`card p-2 mb-1 ${this.props.darkMode ? 'bg-secondary' : 'bg-light'}`} role="button">
-          <div className={`row ${this.props.darkMode ? '' : 'bg-light'}`}>
-            <div className="col-auto">
-              <div
-                data-cy={`action-button-${String(action.buttonText ?? '')
-                  .toLowerCase()
-                  .replace(/\s+/g, '-')}-${String(index ?? '')}`}
-                className="text"
-              >
-                {action.buttonText}
-              </div>
-            </div>
-          </div>
+        <div>
+          <List>
+            <List.Item
+              data-cy={`action-button-${String(action.buttonText ?? '')
+                .toLowerCase()
+                .replace(/\s+/g, '-')}-${String(index ?? '')}`}
+              primaryText={action.buttonText}
+            />
+          </List>
         </div>
       </OverlayTrigger>
     );
@@ -945,9 +972,15 @@ class TableComponent extends React.Component {
     const serverSidePagination = component.component.definition.properties.serverSidePagination?.value
       ? resolveReferences(component.component.definition.properties.serverSidePagination?.value, currentState)
       : false;
+
     const clientSidePagination = component.component.definition.properties.clientSidePagination?.value
       ? resolveReferences(component.component.definition.properties.clientSidePagination?.value, currentState)
       : false;
+
+    let enablePagination = !has(component.component.definition.properties, 'enablePagination')
+      ? clientSidePagination || serverSidePagination
+      : resolveReferences(component.component.definition.properties.enablePagination?.value, currentState);
+
     const enabledSort = component.component.definition.properties.enabledSort?.value
       ? resolveReferences(component.component.definition.properties.enabledSort?.value, currentState)
       : true;
@@ -964,9 +997,8 @@ class TableComponent extends React.Component {
     };
 
     let items = [];
-
     items.push({
-      title: 'Properties',
+      title: 'Data',
       children: renderElement(
         component,
         componentMeta,
@@ -976,7 +1008,8 @@ class TableComponent extends React.Component {
         'properties',
         currentState,
         components,
-        darkMode
+        darkMode,
+        false
       ),
     });
 
@@ -984,17 +1017,10 @@ class TableComponent extends React.Component {
       title: 'Columns',
       children: (
         <div>
+          <div>{renderCustomElement('useDynamicColumn')}</div>
+          {useDynamicColumn && <div>{renderCustomElement('columnData')}</div>}
           {!useDynamicColumn && (
-            <>
-              <div className="col-auto text-right mb-3">
-                <button
-                  data-cy={`button-add-column`}
-                  onClick={this.addNewColumn}
-                  className="btn btn-sm border-0 font-weight-normal padding-2 col-auto color-primary inspector-add-button"
-                >
-                  {this.props.t('widget.Table.addColumn', '+ Add column')}
-                </button>
-              </div>
+            <List>
               <DragDropContext
                 onDragEnd={(result) => {
                   this.onDragEnd(result);
@@ -1009,7 +1035,6 @@ class TableComponent extends React.Component {
                           <Draggable key={item.id} draggableId={item.id} index={index}>
                             {(provided, snapshot) => (
                               <div
-                                className={`card p-2 column-sort-row mb-1 ${this.props.darkMode ? '' : 'bg-light'}`}
                                 key={index}
                                 ref={provided.innerRef}
                                 {...provided.draggableProps}
@@ -1023,35 +1048,24 @@ class TableComponent extends React.Component {
                                   overlay={this.columnPopover(item, index)}
                                 >
                                   <div key={resolvedItemName}>
-                                    <div className={`row ${this.props.darkMode ? '' : 'bg-light'}`} role="button">
-                                      <div className="col-auto">
-                                        <img
-                                          data-cy={`draggable-handle-column-${resolvedItemName}`}
-                                          src="assets/images/icons/dragicon.svg"
-                                        />
-                                      </div>
-                                      <div className="col">
-                                        <div className="text" data-cy={`column-${resolvedItemName}`}>
-                                          {resolvedItemName}
-                                        </div>
-                                      </div>
-                                      <div className="col-auto">
-                                        <svg
-                                          data-cy={`button-delete-${resolvedItemName}`}
-                                          onClick={() => this.removeColumn(index)}
-                                          width="10"
-                                          height="16"
-                                          viewBox="0 0 10 16"
-                                          fill="none"
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M0 13.8333C0 14.75 0.75 15.5 1.66667 15.5H8.33333C9.25 15.5 10 14.75 10 13.8333V3.83333H0V13.8333ZM1.66667 5.5H8.33333V13.8333H1.66667V5.5ZM7.91667 1.33333L7.08333 0.5H2.91667L2.08333 1.33333H0V3H10V1.33333H7.91667Z"
-                                            fill="#8092AC"
-                                          />
-                                        </svg>
-                                      </div>
-                                    </div>
+                                    <List.Item
+                                      isDraggable={true}
+                                      primaryText={resolvedItemName}
+                                      secondaryText={capitalize(item?.columnType)}
+                                      data-cy={`column-${resolvedItemName}`}
+                                      enableActionsMenu
+                                      isEditable={item.isEditable === '{{true}}'}
+                                      onMenuOptionClick={(listItem, menuOptionLabel) => {
+                                        if (menuOptionLabel === 'Delete') this.removeColumn(index);
+                                      }}
+                                      darkMode={darkMode}
+                                      menuActions={[
+                                        {
+                                          label: 'Delete',
+                                          icon: '',
+                                        },
+                                      ]}
+                                    />
                                   </div>
                                 </OverlayTrigger>
                               </div>
@@ -1064,10 +1078,16 @@ class TableComponent extends React.Component {
                   )}
                 </Droppable>
               </DragDropContext>
-            </>
+              <div>
+                {columns?.value?.length === 0 && <NoListItem text={'There are no columns'} dataCy={`-columns`} />}
+                <div>
+                  <AddNewButton dataCy={`button-add-column`} onClick={this.addNewColumn}>
+                    {this.props.t('widget.Table.addNewColumn', ' Add new column')}
+                  </AddNewButton>
+                </div>
+              </div>
+            </List>
           )}
-          <div style={{ marginTop: useDynamicColumn ? '0px' : '30px' }}>{renderCustomElement('useDynamicColumn')}</div>
-          {useDynamicColumn && <div>{renderCustomElement('columnData')}</div>}
         </div>
       ),
     });
@@ -1075,69 +1095,48 @@ class TableComponent extends React.Component {
     items.push({
       title: 'Action buttons',
       children: (
-        <div className="field mb-2 mt-2">
+        <div className="field">
           <div className="row g-2">
-            <div className="text-right mb-3">
-              <button
-                data-cy="button-add-new-action-button"
-                onClick={this.addNewAction}
-                className="btn btn-sm border-0 font-weight-normal padding-2 col-auto color-primary inspector-add-button"
-              >
-                {this.props.t('widget.Table.addButton', '+ Add button')}
-              </button>
-            </div>
+            <div>{actions.value.map((action, index) => this.renderActionButton(action, index))}</div>
+            {actions.value.length === 0 && (
+              <NoListItem text={'There are no action buttons'} dataCy={`-action-button`} />
+            )}
+            <AddNewButton dataCy="button-add-new-action-button" onClick={this.addNewAction} className="mt-0">
+              New action button
+            </AddNewButton>
           </div>
-          <div>{actions.value.map((action, index) => this.actionButton(action, index))}</div>
-          {actions.value.length === 0 && (
-            <div className="text-center">
-              <small data-cy="message-no-action-button" className="color-disabled">
-                {this.props.t('widget.Table.noActionMessage', "This table doesn't have any action buttons")}
-              </small>
-            </div>
-          )}
         </div>
       ),
     });
 
-    const options = [
-      'serverSidePagination',
-      ...(serverSidePagination ? ['enablePrevButton'] : []),
-      ...(serverSidePagination ? ['enableNextButton'] : []),
-      ...(serverSidePagination ? ['totalRecords'] : []),
-      ...(clientSidePagination && !serverSidePagination ? ['rowsPerPage'] : []),
-      'enabledSort',
-      ...(enabledSort ? ['serverSideSort'] : []),
-      'showDownloadButton',
-      'showFilterButton',
-      'showAddNewRowButton',
-      ...(displayServerSideFilter ? ['serverSideFilter'] : []),
-      'showBulkUpdateActions',
+    const rowSelectionsOptions = [
       'allowSelection',
       ...(allowSelection ? ['highlightSelectedRow', 'showBulkSelector', 'defaultSelectedRow'] : []),
+    ];
+    const searchSortFilterOptions = [
+      ...(displaySearchBox ? ['displaySearchBox'] : []),
+      ...(displayServerSideSearch ? ['serverSideSearch'] : []),
+      'enabledSort',
+      ...(enabledSort ? ['serverSideSort'] : []),
+      'showFilterButton',
+      ...(displayServerSideFilter ? ['serverSideFilter'] : []),
+    ];
+    const paginationOptions = [
+      'enablePagination',
+      ...(enablePagination ? ['serverSidePagination'] : []),
+      ...(enablePagination && !serverSidePagination ? ['rowsPerPage'] : []),
+      ...(enablePagination && serverSidePagination ? ['enablePrevButton'] : []),
+      ...(enablePagination && serverSidePagination ? ['enableNextButton'] : []),
+      ...(enablePagination && serverSidePagination ? ['totalRecords'] : []),
+    ];
+    const additionalActions = [
+      'showAddNewRowButton',
+      'showDownloadButton',
       'hideColumnSelectorButton',
+      'loadingState',
+      'showBulkUpdateActions',
     ];
 
-    let renderOptions = [];
-
-    !serverSidePagination && options.splice(1, 0, 'clientSidePagination');
-
-    options.map((option) => renderOptions.push(renderCustomElement(option)));
-
-    const conditionalOptions = [
-      { name: 'displaySearchBox', condition: displaySearchBox },
-      { name: 'serverSideSearch', condition: displayServerSideSearch },
-      { name: 'loadingState', condition: true },
-    ];
-
-    conditionalOptions.map(({ name, condition }) => {
-      if (condition) renderOptions.push(renderCustomElement(name));
-    });
-
-    items.push({
-      title: 'Options',
-      children: renderOptions,
-    });
-
     items.push({
       title: 'Events',
       isOpen: true,
@@ -1155,6 +1154,25 @@ class TableComponent extends React.Component {
       ),
     });
 
+    items.push({
+      title: 'Row Selection',
+      children: rowSelectionsOptions.map((option) => renderCustomElement(option)),
+    });
+    items.push({
+      title: 'Search, sort and filter',
+      children: searchSortFilterOptions.map((option) => renderCustomElement(option)),
+    });
+
+    items.push({
+      title: 'Pagination',
+      children: paginationOptions.map((option) => renderCustomElement(option)),
+    });
+
+    items.push({
+      title: 'Additional actions',
+      children: additionalActions.map((option) => renderCustomElement(option)),
+    });
+
     items.push({
       title: 'Layout',
       isOpen: true,
diff --git a/frontend/src/Editor/Inspector/Elements/Code.jsx b/frontend/src/Editor/Inspector/Elements/Code.jsx
index b252373d5c..986586bef5 100644
--- a/frontend/src/Editor/Inspector/Elements/Code.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Code.jsx
@@ -4,6 +4,8 @@ import _ from 'lodash';
 import { resolveReferences } from '@/_helpers/utils';
 import { useCurrentState } from '@/_stores/currentStateStore';
 
+const CLIENT_SERVER_TOGGLE_FIELDS = ['serverSidePagination', 'serverSideSort', 'serverSideFilter'];
+
 export const Code = ({
   param,
   definition,
@@ -15,9 +17,20 @@ export const Code = ({
   onFxPress,
   fxActive,
   component,
+  verticalLine,
 }) => {
   const currentState = useCurrentState();
+
   const getDefinitionForNewProps = (param) => {
+    if (param === 'enablePagination') {
+      const clientSidePagination = component?.component?.definition?.properties?.clientSidePagination?.value ?? false;
+      const serverSidePagination = component?.component?.definition?.properties?.serverSidePagination?.value ?? false;
+      const isPaginationEnabled =
+        resolveReferences(clientSidePagination, currentState) || resolveReferences(serverSidePagination, currentState);
+
+      if (isPaginationEnabled) return '{{true}}';
+      return '{{false}}';
+    }
     if (['showAddNewRowButton', 'allowSelection', 'defaultSelectedRow'].includes(param)) {
       if (param === 'allowSelection') {
         const highlightSelectedRow = component?.component?.definition?.properties?.highlightSelectedRow?.value ?? false;
@@ -36,10 +49,28 @@ export const Code = ({
     }
   };
 
-  const initialValue = !_.isEmpty(definition) ? definition.value : getDefinitionForNewProps(param.name);
+  let initialValue = !_.isEmpty(definition) ? definition.value : getDefinitionForNewProps(param.name);
   const paramMeta = componentMeta[paramType][param.name];
   const displayName = paramMeta.displayName || param.name;
 
+  /*
+    following block is written for cellSize Prop to support backward compatibility, 
+    because from older app we also get cellSize value as compact or spacious, 
+    so accordigly we update the initial value with the new values respectively
+  */
+  if (paramType === 'styles' && param.name === 'cellSize') {
+    switch (initialValue) {
+      case 'compact':
+        initialValue = 'condensed';
+        break;
+      case 'spacious':
+        initialValue = 'regular';
+        break;
+      default:
+        break;
+    }
+  }
+
   function handleCodeChanged(value) {
     onChange(param, 'value', value, paramType);
   }
@@ -49,9 +80,8 @@ export const Code = ({
   const getfieldName = React.useMemo(() => {
     return param.name;
   }, [param]);
-
   return (
-    <div className={`mb-2 field ${options.className}`}>
+    <div className={`field ${options.className}`} style={{ marginBottom: '20px' }}>
       <CodeHinter
         enablePreview={true}
         initialValue={initialValue}
@@ -66,8 +96,9 @@ export const Code = ({
         paramLabel={displayName}
         fieldMeta={paramMeta}
         onFxPress={onFxPress}
-        fxActive={fxActive}
+        fxActive={CLIENT_SERVER_TOGGLE_FIELDS.includes(param.name) ? false : fxActive} // Client Server Toggle don't support Fx
         component={component}
+        verticalLine={verticalLine}
       />
     </div>
   );
diff --git a/frontend/src/Editor/Inspector/Elements/Color.jsx b/frontend/src/Editor/Inspector/Elements/Color.jsx
index fc82f41abd..c92cb27cdb 100644
--- a/frontend/src/Editor/Inspector/Elements/Color.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Color.jsx
@@ -12,6 +12,18 @@ export const Color = ({ param, definition, onChange, paramType, componentMeta, c
     bottom: '0px',
     left: '0px',
   };
+  const outerStyles = {
+    width: '142px',
+    height: '32px',
+    borderRadius: ' 6px',
+    display: 'flex',
+    paddingLeft: '4px',
+    alignItems: 'center',
+    gap: '4px',
+    background: showPicker && 'var(--indigo2)',
+    outline: showPicker && '1px solid var(--indigo9)',
+    boxShadow: showPicker && '0px 0px 0px 1px #C6D4F9',
+  };
 
   const paramMeta = componentMeta[paramType][param.name] || {};
   const displayName = paramMeta.displayName || param.name;
@@ -41,18 +53,21 @@ export const Color = ({ param, definition, onChange, paramType, componentMeta, c
       )}
 
       <div
-        className="row mx-0 form-control color-picker-input"
+        className="row mx-0 color-picker-input"
         onClick={() => setShowPicker(true)}
         data-cy={`${String(cyLabel)}-picker`}
+        style={outerStyles}
       >
         <div
           className="col-auto"
           style={{
             float: 'right',
-            width: '20px',
-            height: '20px',
+            width: '24px',
+            height: '24px',
             backgroundColor: definition.value,
-            border: `0.25px solid ${['#ffffff', '#fff', '#1f2936'].includes(definition.value) && '#c5c8c9'}`,
+            borderRadius: ' 6px',
+            border: `1px solid var(--slate7, #D7DBDF)`,
+            boxShadow: `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`,
           }}
         ></div>
         <div style={{ height: '20px' }} className="col">
diff --git a/frontend/src/Editor/Inspector/Elements/Select.jsx b/frontend/src/Editor/Inspector/Elements/Select.jsx
index 85a8d5ba1d..5377b10a62 100644
--- a/frontend/src/Editor/Inspector/Elements/Select.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Select.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { ToolTip } from './Components/ToolTip';
-import SelectSearch from 'react-select-search';
+// import SelectSearch from 'react-select-search';
+import SelectSearch from 'react-select';
+
 // eslint-disable-next-line import/no-unresolved
 import { useTranslation } from 'react-i18next';
 
diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index 7a05d8db0c..6bc3da16de 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -12,18 +12,18 @@ import { componentTypes } from '../WidgetManager/components';
 import Select from '@/_ui/Select';
 import defaultStyles from '@/_ui/Select/styles';
 import { useTranslation } from 'react-i18next';
-
 import { useDataQueriesStore } from '@/_stores/dataQueriesStore';
-import AddRectangle from '@/_ui/Icon/bulkIcons/AddRectangle';
-import { Tooltip } from 'react-tooltip';
-import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import RunjsParameters from './ActionConfigurationPanels/RunjsParamters';
+import AddNewButton from '@/ToolJetUI/Buttons/AddNewButton/AddNewButton';
 import { isQueryRunnable } from '@/_helpers/utils';
 import { shallow } from 'zustand/shallow';
+import ManageEventButton from './ManageEventButton';
+import NoListItem from './Components/Table/NoListItem';
 
 export const EventManager = ({
   component,
   componentMeta,
+  currentState = {},
   components,
   eventsChanged,
   apps,
@@ -121,18 +121,19 @@ export const EventManager = ({
     });
     return componentOptions;
   }
-
+  // currently blocking items inside subcontainer because they can't be controlled through event manager
+  // use components instead of currentState?.components to get all the components in canvas
   function getComponentOptionsOfComponentsWithActions(componentType = '') {
     let componentOptions = [];
-    Object.keys(components || {}).forEach((key) => {
+    Object.values(currentState?.components || {}).forEach((value) => {
       const targetComponentMeta = componentTypes.find(
-        (componentType) => components[key].component.component === componentType.component
+        (componentType) => components[value.id]?.component?.component === componentType?.component
       );
       if ((targetComponentMeta?.actions?.length ?? 0) > 0) {
-        if (componentType === '' || components[key].component.component === componentType) {
+        if (componentType === '' || components[value.id].component.component === componentType) {
           componentOptions.push({
-            name: components[key].component.name,
-            value: key,
+            name: components[value.id].component.name,
+            value: value.id,
           });
         }
       }
@@ -192,11 +193,20 @@ export const EventManager = ({
     return appsOptionsList;
   }
 
-  function getPageOptions() {
-    return pages.map((page) => ({
-      name: page.name,
-      value: page.id,
-    }));
+  function getPageOptions(event) {
+    // If disabled page is already selected then don't remove from page options
+    if (pages.find((page) => page.id === event.pageId)?.disabled) {
+      return pages.map((page) => ({
+        name: page.name,
+        value: page.id,
+      }));
+    }
+    return pages
+      .filter((page) => !page.disabled)
+      .map((page) => ({
+        name: page.name,
+        value: page.id,
+      }));
   }
 
   function handlerChanged(index, param, value) {
@@ -251,7 +261,7 @@ export const EventManager = ({
       <Popover
         id="popover-basic"
         style={{ width: '350px', maxWidth: '350px' }}
-        className={`${darkMode && 'popover-dark-themed theme-dark'} shadow`}
+        className={`${darkMode && ' dark-theme'} shadow event-manager-popover`}
         data-cy="popover-card"
       >
         <Popover.Body>
@@ -662,7 +672,7 @@ export const EventManager = ({
                 event={event}
                 handlerChanged={handlerChanged}
                 eventIndex={index}
-                getPages={getPageOptions}
+                getPages={() => getPageOptions(event)}
                 darkMode={darkMode}
               />
             )}
@@ -834,92 +844,14 @@ export const EventManager = ({
                             if (typeof popOverCallback === 'function') popOverCallback(showing);
                           }}
                         >
-                          <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            className="mb-1"
-                          >
-                            <div className="card column-sort-row border-0 bg-slate2">
-                              <div className={rowClassName} data-cy="event-handler-card">
-                                <div className="row p-2" role="button">
-                                  <div className="col-auto" style={{ cursor: 'grab' }}>
-                                    <svg
-                                      width="8"
-                                      height="14"
-                                      viewBox="0 0 8 14"
-                                      fill="none"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M0.666667 1.66667C0.666667 2.03486 0.965143 2.33333 1.33333 2.33333C1.70152 2.33333 2 2.03486 2 1.66667C2 1.29848 1.70152 1 1.33333 1C0.965143 1 0.666667 1.29848 0.666667 1.66667Z"
-                                        stroke="#8092AC"
-                                        strokeWidth="1.33333"
-                                      />
-                                      <path
-                                        d="M5.99992 1.66667C5.99992 2.03486 6.2984 2.33333 6.66659 2.33333C7.03478 2.33333 7.33325 2.03486 7.33325 1.66667C7.33325 1.29848 7.03478 1 6.66659 1C6.2984 1 5.99992 1.29848 5.99992 1.66667Z"
-                                        stroke="#8092AC"
-                                        strokeWidth="1.33333"
-                                      />
-                                      <path
-                                        d="M0.666667 7.00001C0.666667 7.3682 0.965143 7.66668 1.33333 7.66668C1.70152 7.66668 2 7.3682 2 7.00001C2 6.63182 1.70152 6.33334 1.33333 6.33334C0.965143 6.33334 0.666667 6.63182 0.666667 7.00001Z"
-                                        stroke="#8092AC"
-                                        strokeWidth="1.33333"
-                                      />
-                                      <path
-                                        d="M5.99992 7.00001C5.99992 7.3682 6.2984 7.66668 6.66659 7.66668C7.03478 7.66668 7.33325 7.3682 7.33325 7.00001C7.33325 6.63182 7.03478 6.33334 6.66659 6.33334C6.2984 6.33334 5.99992 6.63182 5.99992 7.00001Z"
-                                        stroke="#8092AC"
-                                        strokeWidth="1.33333"
-                                      />
-                                      <path
-                                        d="M0.666667 12.3333C0.666667 12.7015 0.965143 13 1.33333 13C1.70152 13 2 12.7015 2 12.3333C2 11.9651 1.70152 11.6667 1.33333 11.6667C0.965143 11.6667 0.666667 11.9651 0.666667 12.3333Z"
-                                        stroke="#8092AC"
-                                        strokeWidth="1.33333"
-                                      />
-                                      <path
-                                        d="M5.99992 12.3333C5.99992 12.7015 6.2984 13 6.66659 13C7.03478 13 7.33325 12.7015 7.33325 12.3333C7.33325 11.9651 7.03478 11.6667 6.66659 11.6667C6.2984 11.6667 5.99992 11.9651 5.99992 12.3333Z"
-                                        stroke="#8092AC"
-                                        strokeWidth="1.33333"
-                                      />
-                                    </svg>
-                                  </div>
-                                  <div className="col text-truncate" data-cy="event-handler">
-                                    {componentMeta.events[event.eventId]['displayName']}
-                                  </div>
-                                  <div className="col text-truncate color-slate11" data-cy="event-name">
-                                    <small className="event-action font-weight-light text-truncate">
-                                      {actionMeta.name}
-                                    </small>
-                                  </div>
-                                  <div className="col-auto">
-                                    <span
-                                      className="text-danger"
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        removeHandler(index);
-                                      }}
-                                      data-cy="delete-button"
-                                      data-tooltip-id="event-delete-btn-icon"
-                                      data-tooltip-content="Delete"
-                                    >
-                                      <svg
-                                        width="10"
-                                        height="16"
-                                        viewBox="0 0 10 16"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M0 13.8333C0 14.75 0.75 15.5 1.66667 15.5H8.33333C9.25 15.5 10 14.75 10 13.8333V3.83333H0V13.8333ZM1.66667 5.5H8.33333V13.8333H1.66667V5.5ZM7.91667 1.33333L7.08333 0.5H2.91667L2.08333 1.33333H0V3H10V1.33333H7.91667Z"
-                                          fill="var(--slate8)"
-                                        />
-                                      </svg>
-                                    </span>
-                                    <Tooltip id="event-delete-btn-icon" className="tooltip" />
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
+                          <div>
+                            <ManageEventButton
+                              eventDisplayName={componentMeta.events[event.eventId]['displayName']}
+                              actionName={actionMeta.name}
+                              removeHandler={removeHandler}
+                              index={index}
+                              darkMode={darkMode}
+                            />
                           </div>
                         </OverlayTrigger>
                       );
@@ -937,48 +869,27 @@ export const EventManager = ({
 
   const renderAddHandlerBtn = () => {
     return (
-      <div className={`mb-3 ${events.length === 0 ? '' : 'mt-2'}`}>
-        <ButtonSolid
-          variant="ghostBlue"
-          size="sm"
-          onClick={addHandler}
-          data-cy={events.length === 0 ? 'add-event-handler' : 'add-more-event-handler'}
-        >
-          <AddRectangle width="15" fill="#3E63DD" opacity="1" secondaryFill="#ffffff" />
-          &nbsp;&nbsp;
-          {t('editor.inspector.eventManager.addHandler', 'Add handler')}
-        </ButtonSolid>
-      </div>
+      <AddNewButton onClick={addHandler} dataCy="add-event-handler" className="mt-0">
+        {t('editor.inspector.eventManager.addHandler', 'New event handler')}
+      </AddNewButton>
     );
   };
 
-  const componentName = componentMeta.name ? componentMeta.name : 'query';
-
   if (events.length === 0) {
     return (
       <>
+        {!hideEmptyEventsAlert && <NoListItem text={'No event handlers'} />}
         {renderAddHandlerBtn()}
-        {!hideEmptyEventsAlert ? (
-          <div className="text-left">
-            <small className="color-disabled" data-cy="no-event-handler-message">
-              {t(
-                'editor.inspector.eventManager.emptyMessage',
-                "This {{componentName}} doesn't have any event handlers",
-                {
-                  componentName: componentName.toLowerCase(),
-                }
-              )}
-            </small>
-          </div>
-        ) : null}
       </>
     );
   }
 
   return (
     <>
-      {renderHandlers(events)}
-      {renderAddHandlerBtn()}
+      <div className="mb-3">
+        {renderHandlers(events)}
+        {renderAddHandlerBtn()}
+      </div>
     </>
   );
 };
diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index f349abe3a7..ae98efeb58 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react';
-import cx from 'classnames';
 import { componentTypes } from '../WidgetManager/components';
 import { Table } from './Components/Table/Table.jsx';
 import { Chart } from './Components/Chart';
@@ -23,6 +22,35 @@ import { useCurrentState } from '@/_stores/currentStateStore';
 import { useDataQueries } from '@/_stores/dataQueriesStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import Tabs from '@/ToolJetUI/Tabs/Tabs';
+import Tab from '@/ToolJetUI/Tabs/Tab';
+import Student from '@/_ui/Icon/solidIcons/Student';
+import ArrowRight from '@/_ui/Icon/solidIcons/ArrowRight';
+import ArrowLeft from '@/_ui/Icon/solidIcons/ArrowLeft';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+import Edit from '@/_ui/Icon/bulkIcons/Edit';
+import Copy from '@/_ui/Icon/solidIcons/Copy';
+import Trash from '@/_ui/Icon/solidIcons/Trash';
+import classNames from 'classnames';
+
+const INSPECTOR_HEADER_OPTIONS = [
+  {
+    label: 'Rename',
+    value: 'rename',
+    icon: <Edit width={16} />,
+  },
+  {
+    label: 'Duplicate',
+    value: 'duplicate',
+    icon: <Copy width={16} />,
+  },
+  {
+    label: 'Delete',
+    value: 'delete',
+    icon: <Trash width={16} fill={'#E54D2E'} />,
+  },
+];
 
 export const Inspector = ({
   selectedComponentId,
@@ -33,6 +61,7 @@ export const Inspector = ({
   switchSidebarTab,
   removeComponent,
   pages,
+  cloneComponents,
 }) => {
   const dataQueries = useDataQueries();
   const component = {
@@ -49,6 +78,7 @@ export const Inspector = ({
   const [newComponentName, setNewComponentName] = useState(component.component.name);
   const [inputRef, setInputFocus] = useFocus();
   const [selectedTab, setSelectedTab] = useState('properties');
+  const [showHeaderActionsMenu, setShowHeaderActionsMenu] = useState(false);
   const { isVersionReleased } = useAppVersionStore(
     (state) => ({
       isVersionReleased: state.isVersionReleased,
@@ -91,6 +121,7 @@ export const Inspector = ({
 
   function handleComponentNameChange(newName) {
     if (component.component.name === newName) return;
+
     if (newName.length === 0) {
       toast.error(t('widget.common.widgetNameEmptyError', 'Widget name cannot be empty'));
       return setInputFocus();
@@ -132,6 +163,23 @@ export const Inspector = ({
     if (attr) {
       allParams[param.name][attr] = value;
       const defaultValue = getDefaultValue(value);
+      // This is needed to have enable pagination as backward compatible
+      // Whenever enable pagination is false, we turn client and server side pagination as false
+      if (param.name === 'enablePagination' && !resolveReferences(value, currentState)) {
+        if (allParams?.['clientSidePagination']?.[attr]) {
+          allParams['clientSidePagination'][attr] = value;
+        }
+        allParams['serverSidePagination'][attr] = value;
+      }
+      // This case is required to handle for older apps when serverSidePagination is connected to Fx
+      if (param.name === 'serverSidePagination' && !allParams?.['enablePagination']?.[attr]) {
+        allParams = {
+          ...allParams,
+          enablePagination: {
+            value: true,
+          },
+        };
+      }
       if (param.type === 'select' && defaultValue) {
         allParams[defaultValue.paramName]['value'] = defaultValue.value;
       }
@@ -246,6 +294,17 @@ export const Inspector = ({
     componentDefinitionChanged(newComponent);
   }
 
+  const handleInspectorHeaderActions = (value) => {
+    if (value === 'rename') {
+      setTimeout(() => setInputFocus(), 0);
+    }
+    if (value === 'delete') {
+      setWidgetDeleteConfirmation(true);
+    }
+    if (value === 'duplicate') {
+      cloneComponents();
+    }
+  };
   const buildGeneralStyle = () => {
     const items = [];
 
@@ -272,27 +331,29 @@ export const Inspector = ({
   };
 
   const propertiesTab = isMounted && (
-    <GetAccordion
-      componentName={componentMeta.component}
-      layoutPropertyChanged={layoutPropertyChanged}
-      component={component}
-      paramUpdated={paramUpdated}
-      dataQueries={dataQueries}
-      componentMeta={componentMeta}
-      eventUpdated={eventUpdated}
-      eventOptionUpdated={eventOptionUpdated}
-      components={allComponents}
-      currentState={currentState}
-      darkMode={darkMode}
-      eventsChanged={eventsChanged}
-      apps={apps}
-      pages={pages}
-      allComponents={allComponents}
-    />
+    <div className={`${isVersionReleased && 'disabled'}`}>
+      <GetAccordion
+        componentName={componentMeta.component}
+        layoutPropertyChanged={layoutPropertyChanged}
+        component={component}
+        paramUpdated={paramUpdated}
+        dataQueries={dataQueries}
+        componentMeta={componentMeta}
+        eventUpdated={eventUpdated}
+        eventOptionUpdated={eventOptionUpdated}
+        components={allComponents}
+        currentState={currentState}
+        darkMode={darkMode}
+        eventsChanged={eventsChanged}
+        apps={apps}
+        pages={pages}
+        allComponents={allComponents}
+      />
+    </div>
   );
 
   const stylesTab = (
-    <div style={{ marginBottom: '6rem' }}>
+    <div style={{ marginBottom: '6rem' }} className={`${isVersionReleased && 'disabled'}`}>
       <div className="p-3">
         <Inspector.RenderStyleOptions
           componentMeta={componentMeta}
@@ -307,6 +368,20 @@ export const Inspector = ({
     </div>
   );
 
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (showHeaderActionsMenu && event.target.closest('.list-menu') === null) {
+        setShowHeaderActionsMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify({ showHeaderActionsMenu })]);
+
   return (
     <div className="inspector">
       <ConfirmDialog
@@ -320,108 +395,94 @@ export const Inspector = ({
         darkMode={darkMode}
       />
       <div>
-        <div className="row inspector-component-title-input-holder">
-          <div className={`col-11 p-0 ${isVersionReleased && 'disabled'}`}>
-            <div className="input-icon">
+        <div className={`row inspector-component-title-input-holder ${isVersionReleased && 'disabled'}`}>
+          <div className="col-1" onClick={() => switchSidebarTab(2)}>
+            <span data-cy={`inspector-close-icon`} className="cursor-pointer">
+              <ArrowLeft fill={'var(--slate12)'} width={'14'} />
+            </span>
+          </div>
+          <div className={`col-9 p-0 ${isVersionReleased && 'disabled'}`}>
+            <div className="input-icon" style={{ marginLeft: '8px' }}>
               <input
                 onChange={(e) => setNewComponentName(e.target.value)}
                 type="text"
                 onBlur={() => handleComponentNameChange(newComponentName)}
-                className="w-100 form-control-plaintext form-control-plaintext-sm mt-1"
+                className="w-100 inspector-edit-widget-name"
                 value={newComponentName}
                 ref={inputRef}
                 data-cy="edit-widget-name"
               />
-              <span className="input-icon-addon">
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M13.1667 3.11667L10.8833 0.833337C10.5853 0.553417 10.1948 0.392803 9.78611 0.382047C9.3774 0.371291 8.97899 0.511145 8.66667 0.775004L1.16667 8.275C0.897308 8.54664 0.72959 8.90267 0.69167 9.28334L0.333336 12.7583C0.322111 12.8804 0.337948 13.0034 0.379721 13.1187C0.421493 13.2339 0.488172 13.3385 0.575003 13.425C0.65287 13.5022 0.745217 13.5633 0.846748 13.6048C0.948279 13.6463 1.057 13.6673 1.16667 13.6667H1.24167L4.71667 13.35C5.09733 13.3121 5.45337 13.1444 5.725 12.875L13.225 5.375C13.5161 5.06748 13.6734 4.65709 13.6625 4.23378C13.6516 3.81047 13.4733 3.40876 13.1667 3.11667ZM4.56667 11.6833L2.06667 11.9167L2.29167 9.41667L7 4.76667L9.25 7.01667L4.56667 11.6833ZM10.3333 5.9L8.1 3.66667L9.725 2L12 4.275L10.3333 5.9Z"
-                    fill="#8092AC"
-                  />
-                </svg>
+            </div>
+          </div>
+          <div className="col-2">
+            <OverlayTrigger
+              trigger={'click'}
+              placement={'bottom-end'}
+              rootClose={false}
+              show={showHeaderActionsMenu}
+              overlay={
+                <Popover id="list-menu" className={darkMode && 'dark-theme'}>
+                  <Popover.Body bsPrefix="list-item-popover-body">
+                    {INSPECTOR_HEADER_OPTIONS.map((option) => (
+                      <div
+                        className="list-item-popover-option"
+                        key={option?.value}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleInspectorHeaderActions(option.value);
+                        }}
+                      >
+                        <div className="list-item-popover-menu-option-icon">{option.icon}</div>
+                        <div
+                          className={classNames('list-item-option-menu-label', {
+                            'color-tomato9': option.value === 'delete',
+                          })}
+                        >
+                          {option?.label}
+                        </div>
+                      </div>
+                    ))}
+                  </Popover.Body>
+                </Popover>
+              }
+            >
+              <span className="cursor-pointer" onClick={() => setShowHeaderActionsMenu(true)}>
+                <SolidIcon data-cy={'menu-icon'} name="morevertical" width="24" fill={'var(--slate12)'} />
               </span>
-            </div>
-          </div>
-          <div className="col-1" onClick={() => switchSidebarTab(2)}>
-            <div className="inspector-close-icon-wrapper cursor-pointer" data-cy={`inspector-close-icon`}>
-              <svg
-                width="20"
-                height="21"
-                viewBox="0 0 20 21"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                className="close-svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M9.99931 10.9751L15.0242 16.0014L16 15.027L10.9737 10.0007L16 4.97577L15.0256 4L9.99931 9.0263L4.97439 4L4 4.97577L9.02492 10.0007L4 15.0256L4.97439 16.0014L9.99931 10.9751Z"
-                  fill="#8092AC"
-                />
-              </svg>
-            </div>
+            </OverlayTrigger>
           </div>
         </div>
-        <div style={{ padding: '16px 8px', borderRadius: 6 }}>
-          <div
-            className="d-flex p-1"
-            style={{ background: darkMode ? '#2F3C4C' : '#ECEEF0' }}
-            role="tablist"
-            aria-orientation="horizontal"
-          >
-            <button
-              className={cx('btn w-50 inspector-nav-item', {
-                'bg-white': selectedTab === 'properties' && !darkMode,
-                'bg-black': selectedTab === 'properties' && darkMode,
-                'color-white': darkMode,
-                'opacity-100': selectedTab === 'properties',
-              })}
-              role="tab"
-              type="button"
-              aria-selected="true"
-              tabIndex="0"
-              onClick={() => setSelectedTab('properties')}
-              data-cy={`sidebar-option-properties`}
-            >
-              {t('widget.common.properties', 'Properties')}
-            </button>
-            <button
-              className={cx('btn w-50 inspector-nav-item', {
-                'bg-white': selectedTab === 'styles',
-                'bg-black': selectedTab === 'styles' && darkMode,
-                'color-white': darkMode,
-                'opacity-100': selectedTab === 'styles',
-              })}
-              role="tab"
-              type="button"
-              aria-selected="false"
-              tabIndex="-1"
-              onClick={() => setSelectedTab('styles')}
-              data-cy={`sidebar-option-styles`}
-            >
-              {t('widget.common.styles', 'Styles')}
-            </button>
-          </div>
-        </div>
-        <hr className="m-0" />
-        <div className={`${isVersionReleased && 'disabled'}`}>
-          {selectedTab === 'properties' && propertiesTab}
-          {selectedTab === 'styles' && stylesTab}
+        <div>
+          <Tabs defaultActiveKey={'properties'} id="inspector">
+            <Tab eventKey="properties" title="Properties">
+              {propertiesTab}
+            </Tab>
+            <Tab eventKey="styles" title="Styles">
+              {stylesTab}
+            </Tab>
+          </Tabs>
         </div>
       </div>
-
-      <div className="widget-documentation-link p-2">
+      <span className="widget-documentation-link">
         <a
           href={`https://docs.tooljet.io/docs/widgets/${convertToKebabCase(componentMeta?.name ?? '')}`}
           target="_blank"
           rel="noreferrer"
           data-cy="widget-documentation-link"
         >
-          <small>
-            {t('widget.common.documentation', '{{componentMeta}} documentation', { componentMeta: componentMeta.name })}
-          </small>
+          <span>
+            <Student width={13} fill={'#3E63DD'} />
+            <small className="widget-documentation-link-text">
+              {t('widget.common.documentation', 'Read documentation for {{componentMeta}}', {
+                componentMeta: componentMeta.name,
+              })}
+            </small>
+          </span>
+          <span>
+            <ArrowRight width={20} fill={'#3E63DD'} />
+          </span>
         </a>
-      </div>
+      </span>
     </div>
   );
 };
diff --git a/frontend/src/Editor/Inspector/ManageEventButton.jsx b/frontend/src/Editor/Inspector/ManageEventButton.jsx
new file mode 100644
index 0000000000..4448538f6f
--- /dev/null
+++ b/frontend/src/Editor/Inspector/ManageEventButton.jsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import './manageEventButton.scss';
+import AddRectangle from '@/_ui/Icon/solidIcons/AddRectangle';
+import Trash from '@/_ui/Icon/solidIcons/Trash';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+
+const ManageEventButton = ({ eventDisplayName = 'Upon events', actionName, index, removeHandler }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div style={{ marginBottom: '8px' }}>
+      <div
+        className="manage-event-btn border-0"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <div data-cy="event-handler-card">
+          <div className="d-flex justify-content-between" role="button" style={{ padding: '6px 12px' }}>
+            <div className="text-truncate event-handler-text" data-cy="event-handler">
+              {eventDisplayName}
+            </div>
+            <div className="text-truncate event-name-text" data-cy="event-name">
+              <small className="event-action font-weight-light text-truncate">
+                {actionName ? actionName : 'Select action'}
+              </small>
+              {!actionName && <AddRectangle width={13.33} />}
+              <span>
+                <span>
+                  {isHovered && (
+                    <ButtonSolid
+                      variant="tertiary"
+                      size="xs"
+                      className={'list-menu-option-btn'}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                      }}
+                    >
+                      <div
+                        className="list-item-popover-option"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          removeHandler(index);
+                        }}
+                      >
+                        <div className="d-flex align-center">
+                          <Trash fill={'#E54D2E'} width={12} />
+                        </div>
+                      </div>
+                    </ButtonSolid>
+                  )}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ManageEventButton;
diff --git a/frontend/src/Editor/Inspector/Utils.js b/frontend/src/Editor/Inspector/Utils.js
index 2e2f8415cb..6ffba6b90f 100644
--- a/frontend/src/Editor/Inspector/Utils.js
+++ b/frontend/src/Editor/Inspector/Utils.js
@@ -27,7 +27,8 @@ export function renderElement(
   paramType,
   currentState,
   components = {},
-  darkMode = false
+  darkMode = false,
+  verticalLine = true
 ) {
   const componentConfig = component.component;
   const componentDefinition = componentConfig.definition;
@@ -70,6 +71,7 @@ export function renderElement(
         paramUpdated({ name: param, ...component.component.properties[param] }, 'fxActive', active, paramType);
       }}
       component={component}
+      verticalLine={verticalLine}
     />
   );
 }
diff --git a/frontend/src/Editor/Inspector/manageEventButton.scss b/frontend/src/Editor/Inspector/manageEventButton.scss
new file mode 100644
index 0000000000..abdf6445e8
--- /dev/null
+++ b/frontend/src/Editor/Inspector/manageEventButton.scss
@@ -0,0 +1,29 @@
+.manage-event-btn {
+    border-radius: 6px;
+    background-color: var(--slate3);
+    &:hover {
+        background-color: var(--slate4);
+    }
+    .event-handler-text {
+     font-size: 12px;
+     line-height: 20px;
+     color: var(--slate12);
+     font-weight: 500;
+    }
+    .event-name-text {
+      font-size: 12px;
+      line-height: 20px;
+      color: var(--slate11);
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+    }
+    .event-action {
+    margin-right: 4px;
+    }
+
+    .list-menu-option-btn {
+      margin-left: 20px;
+    }
+  
+}
\ No newline at end of file
diff --git a/frontend/src/Editor/LeftSidebar/SidebarComment.jsx b/frontend/src/Editor/LeftSidebar/SidebarComment.jsx
index 4a241cc9f7..8fe411c1ca 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarComment.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarComment.jsx
@@ -8,7 +8,6 @@ import { useEditorStore } from '@/_stores/editorStore';
 import { shallow } from 'zustand/shallow';
 
 export const LeftSidebarComment = forwardRef(({ selectedSidebarItem, currentPageId }, ref) => {
-  const darkMode = localStorage.getItem('darkMode') === 'true';
   const { appVersionsId } = useAppVersionStore(
     (state) => ({
       appVersionsId: state?.editingVersion?.id,
@@ -37,12 +36,11 @@ export const LeftSidebarComment = forwardRef(({ selectedSidebarItem, currentPage
     <LeftSidebarItem
       commentBadge={notifications?.length > 0}
       selectedSidebarItem={selectedSidebarItem}
-      title={appVersionsId ? 'toggle comments' : 'Comments section will be available once you save this application'}
-      icon={darkMode ? `comments-dark` : 'comments-light'}
-      className={cx(`left-sidebar-item left-sidebar-layout sidebar-comments`, {
+      title={appVersionsId ? 'Toggle comments' : 'Comments section will be available once you save this application'}
+      icon={'comments'}
+      className={cx(`left-sidebar-item left-sidebar-layout`, {
         disabled: !appVersionsId,
         active: isActive,
-        dark: darkMode,
       })}
       onClick={() => {
         toggleActive(!isActive);
diff --git a/frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx b/frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx
index 6d2d5b344d..3d87129b0e 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { HeaderSection, Button } from '@/_ui/LeftSidebar';
+import { HeaderSection } from '@/_ui/LeftSidebar';
 import { DataSourceManager } from '../DataSourceManager';
 import { DataSourceTypes } from '../DataSourceManager/SourceComponents';
 import { getSvgIcon } from '@/_helpers/appUtils';
@@ -17,6 +17,7 @@ import { getPrivateRoute } from '@/_helpers/routes';
 import { useDataSources } from '@/_stores/dataSourcesStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 
 export const LeftSidebarDataSources = ({
   appId,
@@ -130,7 +131,7 @@ export const LeftSidebarDataSources = ({
 
     const popover = (
       <PopoverBS key={dataSource.id} id="popover-change-scope">
-        <PopoverBS.Body key={dataSource.id} className={`${darkMode && 'theme-dark popover-dark-themed'}`}>
+        <PopoverBS.Body key={dataSource.id} className={`${darkMode && 'dark-theme'}`}>
           <div className={`row cursor-pointer`}>
             <div className="col text-truncate cursor-pointer" onClick={() => convertToGlobalDataSource(dataSource)}>
               Change scope
@@ -238,18 +239,18 @@ const LeftSidebarDataSourcesContainer = ({ darkMode, RenderDataSource, dataSourc
       <HeaderSection darkMode={darkMode}>
         <HeaderSection.PanelHeader title="Datasources">
           <div className="d-flex justify-content-end">
-            <Button
+            <ButtonSolid
               title={`${pinned ? 'Unpin' : 'Pin'}`}
               onClick={() => setPinned(!pinned)}
               darkMode={darkMode}
-              size="sm"
               styles={{ width: '28px', padding: 0 }}
-            >
-              <Button.Content
-                iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
-                direction="left"
-              />
-            </Button>
+              data-cy={`left-sidebar-inspector`}
+              variant="tertiary"
+              className="left-sidebar-header-btn"
+              leftIcon={pinned ? 'unpin' : 'pin'}
+              iconWidth="14"
+              fill={`var(--slate12)`}
+            ></ButtonSolid>
           </div>
         </HeaderSection.PanelHeader>
       </HeaderSection>
@@ -259,7 +260,7 @@ const LeftSidebarDataSourcesContainer = ({ darkMode, RenderDataSource, dataSourc
             {dataSources.length ? (
               <>
                 <div className="tj-text-sm my-2 datasources-category">Local Data Sources</div>
-                <div className="mt-2 w-100" data-cy="datasource-Label">
+                <div className="mt-2 w-100 color-slate12" data-cy="datasource-Label">
                   {dataSources?.map((source, idx) => (
                     <RenderDataSource
                       key={idx}
diff --git a/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx b/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
index d146021f95..d9093fd0eb 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
@@ -3,59 +3,77 @@ import { capitalize, startCase } from 'lodash';
 import moment from 'moment';
 import JSONTreeViewer from '@/_ui/JSONTreeViewer';
 import cx from 'classnames';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
-function Logs({ logProps, idx, darkMode }) {
+function Logs({ logProps, idx }) {
   const [open, setOpen] = React.useState(false);
-  console.log('Debug debugger: open:', open);
 
   const title = ` [${capitalize(logProps?.type)} ${logProps?.key}]`;
-  const message = logProps?.isQuerySuccessLog
-    ? 'Completed'
-    : logProps?.type === 'component'
-    ? `Invalid property detected: ${logProps?.message}.`
-    : `${startCase(logProps?.type)} failed: ${logProps?.message ?? ''}`;
+  const message =
+    logProps?.type === 'navToDisablePage'
+      ? logProps?.message
+      : logProps?.isQuerySuccessLog
+      ? 'Completed'
+      : logProps?.type === 'component'
+      ? `Invalid property detected: ${logProps?.message}.`
+      : `${startCase(logProps?.type)} failed: ${logProps?.message ?? ''}`;
 
   const defaultStyles = {
     transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
     transition: '0.2s all',
-    display: logProps?.isQuerySuccessLog ? 'none' : 'inline-block',
+    display: logProps?.isQuerySuccessLog || logProps.type === 'navToDisablePage' ? 'none' : 'inline-block',
     cursor: 'pointer',
-    pointerEvents: logProps?.isQuerySuccessLog ? 'none' : 'default',
+    paddingTop: '8px',
+    pointerEvents: logProps?.isQuerySuccessLog || logProps.type === 'navToDisablePage' ? 'none' : 'default',
+  };
+
+  const renderNavToDisabledPageMessage = () => {
+    const text = message.split(logProps.page);
+    return (
+      <div className="d-flex">
+        <span className={cx('mx-1 text-tomato-9')}>
+          {text[0]}
+          <small className="text-slate-12" style={{ fontSize: '14px' }}>{`'${logProps.page}'`}</small>
+          {text[1]}
+        </span>
+        <small className="text-slate-10 text-right px-1 " style={{ width: '115px' }}>
+          {moment(logProps?.timestamp).fromNow()}
+        </small>
+      </div>
+    );
   };
 
   return (
-    <div className="tab-content debugger-content mb-1" key={`${logProps?.key}-${idx}`}>
+    <div className="tab-content debugger-content" key={`${logProps?.key}-${idx}`}>
       <p
         className="m-0 d-flex"
         onClick={(e) => {
-          console.log('Debug debugger: setOpen:', e);
           setOpen((prev) => !prev);
         }}
         style={{ pointerEvents: logProps?.isQuerySuccessLog ? 'none' : 'default' }}
       >
-        <span className={cx('mx-1 position-absolute')} style={defaultStyles}>
-          <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M1.02063 1L5.01032 5.01028L1.00003 8.99997"
-              stroke={darkMode ? '#fff' : '#61656F'}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+        <span className={cx('position-absolute')} style={defaultStyles}>
+          <SolidIcon name="cheveronright" width="16" />
         </span>
-        <span className="ps-3 w-100">
-          <span className="d-flex justify-content-between align-items-center  text-truncate">
-            <span className="text-truncate text-slate-12">{title}</span>
-            <small className="text-slate-10 text-right px-1 ">{moment(logProps?.timestamp).fromNow()}</small>
-          </span>
-          <span
-            className={cx('mx-1', {
-              'text-tomato-9': !logProps?.isQuerySuccessLog,
-              'color-light-green': logProps?.isQuerySuccessLog,
-            })}
-          >
-            {message}
-          </span>
+        <span className="w-100" style={{ paddingTop: '8px', paddingBottom: '8px', paddingLeft: '20px' }}>
+          {logProps.type === 'navToDisablePage' ? (
+            renderNavToDisabledPageMessage()
+          ) : (
+            <>
+              <span className="d-flex justify-content-between align-items-center  text-truncate">
+                <span className="text-truncate text-slate-12">{title}</span>
+                <small className="text-slate-10 text-right ">{moment(logProps?.timestamp).fromNow()}</small>
+              </span>
+              <span
+                className={cx('mx-1', {
+                  'text-tomato-9': !logProps?.isQuerySuccessLog,
+                  'color-light-green': logProps?.isQuerySuccessLog,
+                })}
+              >
+                {message}
+              </span>
+            </>
+          )}
         </span>
       </p>
 
diff --git a/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerHeader.jsx b/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerHeader.jsx
index d3ec7185d0..eeebad9ed3 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerHeader.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerHeader.jsx
@@ -1,27 +1,34 @@
 import React from 'react';
-import { Button, HeaderSection } from '@/_ui/LeftSidebar';
+import { HeaderSection } from '@/_ui/LeftSidebar';
 import _ from 'lodash';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 
 export const SidebarDebuggerHeader = ({ darkMode, clearErrorLogs, setPinned, pinned }) => {
   return (
     <HeaderSection darkMode={darkMode}>
       <HeaderSection.PanelHeader title="Debugger">
-        <div className="d-flex justify-content-end">
-          <Button onClick={clearErrorLogs} darkMode={darkMode} size="sm" styles={{ width: '76px' }}>
-            <Button.Content title={'Clear'} iconSrc={'assets/images/icons/clear.svg'} direction="left" />
-          </Button>
-          <Button
+        <div className="d-flex justify-content-end" style={{ gap: '2px' }}>
+          <ButtonSolid
+            onClick={clearErrorLogs}
+            leftIcon="alignright"
+            variant="tertiary"
+            className="tj-text-xsm left-sidebar-header-btn"
+            style={{ width: '76px', height: '28px' }}
+            iconWidth="20"
+            title={'Clear'}
+            fill={`var(--slate12)`}
+          >
+            Clear
+          </ButtonSolid>
+          <ButtonSolid
             title={`${pinned ? 'Unpin' : 'Pin'}`}
             onClick={() => setPinned(!pinned)}
-            darkMode={darkMode}
-            size="sm"
-            styles={{ width: '28px', padding: 0 }}
-          >
-            <Button.Content
-              iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
-              direction="left"
-            />
-          </Button>
+            variant="tertiary"
+            leftIcon={pinned ? 'unpin' : 'pin'}
+            iconWidth="14"
+            className="left-sidebar-header-btn"
+            fill={`var(--slate12)`}
+          ></ButtonSolid>
         </div>
       </HeaderSection.PanelHeader>
     </HeaderSection>
diff --git a/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerTabs.jsx b/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerTabs.jsx
index db2a37a993..cd4f510ec1 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerTabs.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarDebugger/SidebarDebuggerTabs.jsx
@@ -8,9 +8,9 @@ import cx from 'classnames';
 const DebuggerTabContent = ({ logs, darkMode, tabName }) => {
   const { t } = useTranslation();
   return (
-    <div className="card-body mb-5">
+    <div className="debugger-card-body color-slate12">
       {logs.length === 0 && (
-        <center className="p-2 text-muted">
+        <center className="p-2">
           {tabName === 'errors'
             ? t(`leftSidebar.Debugger.noErrors`, 'No errors found.')
             : t(`leftSidebar.Debugger.noLogs`, 'No Logs found.')}
@@ -19,7 +19,7 @@ const DebuggerTabContent = ({ logs, darkMode, tabName }) => {
 
       <div
         className={cx('tab-content', {
-          'theme-dark dark-theme': darkMode,
+          'dark-theme': darkMode,
         })}
       >
         {logs.map((error, index) => (
@@ -35,8 +35,8 @@ const SidebarDebuggerTabs = ({ darkMode, errors, allLog }) => {
     <Tabs
       defaultActiveKey="allLog"
       id="sidebar-debugger"
-      className={cx('mb-3 sidebar-debugger', {
-        'theme-dark dark-theme': darkMode,
+      className={cx('sidebar-debugger', {
+        'dark-theme': darkMode,
       })}
       justify
     >
diff --git a/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx b/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx
index f6c6afb485..06335ff095 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Button, HeaderSection } from '@/_ui/LeftSidebar';
+import { HeaderSection } from '@/_ui/LeftSidebar';
 import JSONTreeViewer from '@/_ui/JSONTreeViewer';
 import _ from 'lodash';
 import { toast } from 'react-hot-toast';
@@ -10,6 +10,7 @@ import { useDataQueries } from '@/_stores/dataQueriesStore';
 import { useCurrentState } from '@/_stores/currentStateStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 
 const staticDataSources = [
   { kind: 'tooljetdb', id: 'null', name: 'Tooljet Database' },
@@ -174,19 +175,18 @@ export const LeftSidebarInspector = ({
       <HeaderSection darkMode={darkMode}>
         <HeaderSection.PanelHeader title="Inspector">
           <div className="d-flex justify-content-end">
-            <Button
+            <ButtonSolid
               title={`${pinned ? 'Unpin' : 'Pin'}`}
               onClick={() => setPinned(!pinned)}
               darkMode={darkMode}
-              size="sm"
               styles={{ width: '28px', padding: 0 }}
               data-cy={`left-sidebar-inspector`}
-            >
-              <Button.Content
-                iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
-                direction="left"
-              />
-            </Button>
+              variant="tertiary"
+              className="left-sidebar-header-btn"
+              leftIcon={pinned ? 'unpin' : 'pin'}
+              iconWidth="14"
+              fill={`var(--slate12)`}
+            ></ButtonSolid>
           </div>
         </HeaderSection.PanelHeader>
       </HeaderSection>
@@ -203,6 +203,7 @@ export const LeftSidebarInspector = ({
           expandWithLabels={true}
           selectedComponent={selectedComponent}
           treeType="inspector"
+          darkMode={darkMode}
         />
       </div>
     </div>
diff --git a/frontend/src/Editor/LeftSidebar/SidebarItem.jsx b/frontend/src/Editor/LeftSidebar/SidebarItem.jsx
index ef0adefee3..9516cdaa32 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarItem.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarItem.jsx
@@ -1,3 +1,4 @@
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 import React, { forwardRef } from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
@@ -9,18 +10,22 @@ export const LeftSidebarItem = forwardRef(
     ref
   ) => {
     const { t } = useTranslation();
-    const displayIcon = selectedSidebarItem === icon ? `${icon}-selected` : icon;
-
-    const Icon = require('@assets/images/icons/editor/left-sidebar/' + displayIcon + '.svg');
-
+    let displayIcon = icon;
+    if (icon == 'page') displayIcon = 'file01';
     const content = (
       <div {...rest} className={className} onClick={onClick && onClick} ref={ref}>
         {icon && (
           <div
-            className={`sidebar-svg-icon position-relative ${displayIcon === 'settings' && 'img-invert'}`}
+            className={`sidebar-svg-icon  position-relative ${
+              selectedSidebarItem === icon && selectedSidebarItem != 'comments' && 'sidebar-item'
+            }`}
             data-cy={`left-sidebar-${icon.toLowerCase()}-button`}
           >
-            <Icon.default />
+            <SolidIcon
+              name={displayIcon}
+              width={icon == 'settings' ? 22.4 : 20}
+              fill={selectedSidebarItem === icon ? '#3E63DD' : 'var(--slate8)'}
+            />
             {commentBadge && <LeftSidebarItem.CommentBadge />}
           </div>
         )}
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
index 4146a64237..f7c5f79df2 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
@@ -37,7 +37,7 @@ export const EditInput = ({ slug, error, setError, pageHandle, setPageHandle, is
       </div>
       <input
         type="text"
-        className={`page-handler-input form-control form-control-sm ${error ? 'is-invalid' : ''}`}
+        className={`page-handler-input  form-control form-control-sm ${error ? 'is-invalid' : ''}`}
         placeholder={'Enter page handle'}
         onChange={onChangePageHandleValue}
         value={pageHandle}
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditModal.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditModal.jsx
index baacf27499..fb0dba2df2 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditModal.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditModal.jsx
@@ -46,7 +46,7 @@ export const EditModal = ({ slug, page, show, handleClose, updatePageHandle, dar
       size="sm"
       animation={false}
       centered
-      className={`${darkMode && 'theme-dark'} page-handle-edit-modal `}
+      className={`${darkMode && 'dark-theme'} page-handle-edit-modal `}
       backdrop="static"
       onClick={(event) => event.stopPropagation()}
     >
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx
index 7466ad626d..d2097a4c72 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
-import MenuIcon from '@assets/images/icons/3dots-menu.svg';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, showPageViwerPageNavitation }) => {
   const { isVersionReleased, enableReleasedVersionPopupState } = useAppVersionStore(
@@ -27,7 +27,7 @@ export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, sho
       placement={'bottom-end'}
       rootClose={true}
       overlay={
-        <Popover id="page-handler-menu" className={`global-settings ${darkMode && 'popover-dark-themed'}`}>
+        <Popover id="page-handler-menu" className={`global-settings ${darkMode && 'dark-theme'}`}>
           <Popover.Body bsPrefix="popover-body">
             <div className="card-body">
               <label htmlFor="pin" className="form-label" data-cy={`page-settings-header`}>
@@ -43,7 +43,7 @@ export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, sho
       }
     >
       <span>
-        <MenuIcon width="10" height="16" data-cy={'menu-icon'} />
+        <SolidIcon data-cy={'menu-icon'} name="morevertical" width="28" />
       </span>
     </OverlayTrigger>
   );
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
index 6527b2cfae..57289f787d 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
@@ -8,6 +8,9 @@ import SortableList from '@/_components/SortableList';
 import { toast } from 'react-hot-toast';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import EyeDisable from '@/_ui/Icon/solidIcons/EyeDisable';
+import FileRemove from '@/_ui/Icon/solidIcons/FIleRemove';
+import Home from '@/_ui/Icon/solidIcons/Home';
 
 export const PageHandler = ({
   darkMode,
@@ -28,11 +31,13 @@ export const PageHandler = ({
   components,
   pinPagesPopover,
   haveUserPinned,
+  disableEnablePage,
 }) => {
   const isHomePage = page.id === homePageId;
   const isSelected = page.id === currentPageId;
   const isHidden = page?.hidden ?? false;
-
+  const isDisabled = page?.disabled ?? false;
+  const isIconApplied = isHomePage || isHidden || isDisabled;
   const [isEditingPageName, setIsEditingPageName] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
   const [showPagehandlerMenu, setShowPagehandlerMenu] = useState(false);
@@ -44,6 +49,7 @@ export const PageHandler = ({
     }),
     shallow
   );
+
   const handleClose = () => {
     setShowEditModal(false);
     setShowPagehandlerMenu(true);
@@ -91,6 +97,12 @@ export const PageHandler = ({
       case 'unhide-page':
         unHidePage(page.id);
         break;
+      case 'disable-page':
+        disableEnablePage({ pageId: page.id, isDisabled: true });
+        break;
+      case 'enable-page':
+        disableEnablePage({ pageId: page.id });
+        break;
 
       default:
         break;
@@ -122,43 +134,45 @@ export const PageHandler = ({
       onMouseLeave={() => setIsHovered(false)}
       className={`card cursor-pointer ${isSelected ? 'active' : 'non-active-page'}`}
       onClick={() => page.id != currentPageId && switchPage(page.id)}
+      style={{ display: 'flex', justifyContent: 'center' }}
     >
-      <div className="card-body">
+      <div>
         <div className="row" role="button">
-          <div className="col-auto">
-            {!isHovered && isHomePage && (
-              <img
-                className="animation-fade"
-                data-toggle="tooltip"
-                title="home page"
-                src="assets/images/icons/home.svg"
-                height={14}
-                width={14}
-                data-cy={'home-page-icon'}
-              />
+          <div className="col-auto d-flex align-items-center">
+            {!isHovered && isHomePage && <Home width={16} height={16} />}
+            {/* When the page is hidden as well as disabled, disabled icon takes precedence */}
+            {!isHovered && (isDisabled || (isDisabled && isHidden)) && (
+              <FileRemove width={16} height={16} viewBox={'0 0 16 16'} />
+            )}
+            {!isHovered && isHidden && !isDisabled && <EyeDisable width={16} height={16} />}
+            {/* When hovered on disabled page, show disabled icon instead of hovered icon */}
+            {isHovered && isDisabled && <FileRemove width={16} height={16} viewBox={'0 0 16 16'} />}
+            {isHovered && !isDisabled && (
+              <div style={{ paddingRight: '4px' }}>
+                <SortableList.DragHandle show />
+              </div>
             )}
-            <SortableList.DragHandle show={isHovered} />
           </div>
           <div
-            className="col text-truncate font-weight-400 page-name"
+            className="col text-truncate font-weight-400 page-name tj-text-xsm"
             data-cy={`pages-name-${String(page.name).toLowerCase()}`}
+            style={isHomePage || isHidden || isHovered || isDisabled ? { paddingLeft: '0px' } : { paddingLeft: '16px' }}
           >
-            {page.name}
-          </div>
-          <div className="col-auto page-icons">
-            {isHidden && (
-              <img
-                data-toggle="tooltip"
-                title="hidden"
-                className="mx-2"
-                src="assets/images/icons/eye-off.svg"
-                height={14}
-                width={14}
-                data-cy={'hide-page-icon'}
-              />
+            <span className={darkMode && 'dark-theme'}>{`${page.name}`}</span>
+            {isIconApplied && (
+              <span
+                style={{
+                  marginLeft: '8px',
+                }}
+                className="color-slate09"
+              >
+                {isHomePage && 'Home'}
+                {isDisabled && 'Disabled'}
+                {isHidden && !isDisabled && 'Hidden'}
+              </span>
             )}
           </div>
-          <div className="col-auto">
+          <div className="col-auto" data-cy="page-menu-option-icon">
             {(isHovered || isSelected) && !isVersionReleased && (
               <PagehandlerMenu
                 page={page}
@@ -168,6 +182,7 @@ export const PageHandler = ({
                 setShowMenu={setShowPagehandlerMenu}
                 isHome={isHomePage}
                 isHidden={isHidden}
+                isDisabled={isDisabled}
               />
             )}
             <EditModal
@@ -214,11 +229,11 @@ export const AddingPageHandler = ({ addNewPage, setNewPageBeingCreated, darkMode
   };
 
   return (
-    <div className="row" role="button">
+    <div className="row" role="button" style={{ marginTop: '2px' }}>
       <div className="col-12">
         <input
           type="text"
-          className={`form-control page-name-input ${darkMode && 'bg-transparent'}`}
+          className={`form-control page-name-input color-slate12 ${darkMode && 'bg-transparent'}`}
           autoFocus
           onBlur={(event) => {
             const name = event.target.value;
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx
index a628fd53d4..f32196ceef 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx
@@ -1,8 +1,18 @@
 import React from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { Button } from '@/_ui/LeftSidebar';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
-export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu, setShowMenu, isHome, isHidden }) => {
+export const PagehandlerMenu = ({
+  page,
+  darkMode,
+  handlePageCallback,
+  showMenu,
+  setShowMenu,
+  isHome,
+  isHidden,
+  isDisabled,
+}) => {
   const closeMenu = () => {
     setShowMenu(false);
   };
@@ -20,7 +30,6 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify({ page, showMenu })]);
-
   return (
     <OverlayTrigger
       trigger={'click'}
@@ -28,7 +37,7 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
       rootClose={false}
       show={showMenu}
       overlay={
-        <Popover key={page.id} id="page-handler-menu" className={darkMode && 'popover-dark-themed'}>
+        <Popover key={page.id} id="page-handler-menu" className={darkMode && 'dark-theme'}>
           <Popover.Body key={page.id} bsPrefix="popover-body">
             <div className="card-body">
               <PageHandleField page={page} updatePageHandle={handlePageCallback} />
@@ -41,30 +50,26 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
                   closeMenu={closeMenu}
                   callback={handlePageCallback}
                 />
-                {/* <Field
-                  id="duplicate-page"
-                  text="Duplicate"
-                  iconSrc={'assets/images/icons/duplicate.svg'}
-                  closeMenu={closeMenu}
-                  callback={handlePageCallback}
-                /> */}
-                <Field
-                  id="mark-as-home-page"
-                  text="Mark home"
-                  iconSrc={'assets/images/icons/home.svg'}
-                  closeMenu={closeMenu}
-                  callback={handlePageCallback}
-                  disabled={isHidden}
-                />
+                {isDisabled || isHidden ? null : (
+                  <Field
+                    id="mark-as-home-page"
+                    text="Mark home"
+                    iconSrc={'assets/images/icons/home.svg'}
+                    closeMenu={closeMenu}
+                    callback={handlePageCallback}
+                  />
+                )}
 
-                <Field
-                  id={isHidden ? 'unhide-page' : 'hide-page'}
-                  text={isHidden ? 'Unhide page' : 'Hide page'}
-                  iconSrc={`assets/images/icons/${isHidden ? 'eye' : 'eye-off'}.svg`}
-                  closeMenu={closeMenu}
-                  callback={handlePageCallback}
-                  disabled={isHome && !isHidden}
-                />
+                {!isDisabled && (
+                  <Field
+                    id={isHidden ? 'unhide-page' : 'hide-page'}
+                    text={isHidden ? 'Show page on app menu' : 'Hide page on app menu'}
+                    iconSrc={`assets/images/icons/${isHidden ? 'eye' : 'eye-off'}.svg`}
+                    closeMenu={closeMenu}
+                    callback={handlePageCallback}
+                    disabled={isHome}
+                  />
+                )}
 
                 <Field
                   id="clone-page"
@@ -82,7 +87,15 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
                   closeMenu={closeMenu}
                   callback={handlePageCallback}
                 />
-
+                <Field
+                  id={isDisabled ? 'enable-page' : 'disable-page'}
+                  text={isDisabled ? 'Enable' : 'Disable'}
+                  customClass={'delete-btn'}
+                  iconSrc={`assets/images/icons/editor/left-sidebar/${isDisabled ? 'file-accept' : 'file-remove'}.svg`}
+                  closeMenu={closeMenu}
+                  callback={handlePageCallback}
+                  disabled={isHome}
+                />
                 <Field
                   id="delete-page"
                   text="Delete page"
@@ -104,9 +117,8 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
             event.stopPropagation();
             setShowMenu(true);
           }}
-          styles={{ height: '20px', marginTop: '2px' }}
         >
-          <Button.Content dataCy={`page-menu`} iconSrc={'assets/images/icons/3dots-menu.svg'} />
+          <SolidIcon width="20" dataCy={`page-menu`} name="morevertical" />
         </Button.UnstyledButton>
       </span>
     </OverlayTrigger>
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/RenameInput.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/RenameInput.jsx
index 3fc1b5bded..bedb21fa1c 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/RenameInput.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/RenameInput.jsx
@@ -10,7 +10,7 @@ export const RenameInput = ({ page, updaterCallback, updatePageEditMode }) => {
 
   return (
     <div className="row" role="button">
-      <div className="col-12">
+      <div className="col-12 tj-app-input">
         <input
           data-cy={`page-rename-input`}
           type="text"
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx
index b0edf606ab..97c81027e8 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx
@@ -25,7 +25,7 @@ export const SettingsModal = ({
         onHide={handleClose}
         size="sm"
         centered
-        className={`${darkMode && 'theme-dark dark-theme'} page-handle-edit-modal`}
+        className={`${darkMode && 'dark-theme'} page-handle-edit-modal`}
         backdrop="static"
         enforceFocus={false}
       >
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
index 833e02a177..239dbf7901 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Fuse from 'fuse.js';
-import { Button, HeaderSection } from '@/_ui/LeftSidebar';
+import { HeaderSection } from '@/_ui/LeftSidebar';
 import { PageHandler, AddingPageHandler } from './PageHandler';
 import { GlobalSettings } from './GlobalSettings';
 import _ from 'lodash';
@@ -10,6 +10,7 @@ import EmptyIllustration from '@assets/images/no-results.svg';
 import { useCurrentState } from '@/_stores/currentStateStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 
 const LeftSidebarPageSelector = ({
   appDefinition,
@@ -22,6 +23,7 @@ const LeftSidebarPageSelector = ({
   clonePage,
   hidePage,
   unHidePage,
+  disableEnablePage,
   updateHomePage,
   updatePageHandle,
   pages,
@@ -46,6 +48,11 @@ const LeftSidebarPageSelector = ({
     shallow
   );
 
+  const sortedAllPages = useMemo(
+    () => [...allpages.filter((c) => !c.disabled), ...allpages.filter((c) => c.disabled)],
+    [allpages]
+  );
+
   const filterPages = (value) => {
     if (!value || value.length === 0) return clearSearch();
 
@@ -86,8 +93,8 @@ const LeftSidebarPageSelector = ({
               />
             }
           >
-            <div className="d-flex justify-content-end">
-              <Button
+            <div className="d-flex justify-content-end" style={{ gap: '2px' }}>
+              <ButtonSolid
                 title={'Add Page'}
                 onClick={() => {
                   if (isVersionReleased) {
@@ -96,37 +103,36 @@ const LeftSidebarPageSelector = ({
                   }
                   setNewPageBeingCreated(true);
                 }}
+                className="left-sidebar-header-btn"
+                fill={`var(--slate12)`}
                 darkMode={darkMode}
-                size="sm"
-                styles={{ width: '28px', padding: 0 }}
-              >
-                <Button.Content dataCy={`add-page`} iconSrc={'assets/images/icons/plus.svg'} direction="left" />
-              </Button>
-              <Button
+                leftIcon="plus"
+                iconWidth="14"
+                variant="tertiary"
+              ></ButtonSolid>
+              <ButtonSolid
                 title={'Search'}
                 onClick={() => setShowSearch(!showSearch)}
                 darkMode={darkMode}
-                size="sm"
-                styles={{ width: '28px', padding: 0 }}
-              >
-                <Button.Content dataCy={'search-page'} iconSrc={'assets/images/icons/search.svg'} direction="left" />
-              </Button>
-              <Button
+                className="left-sidebar-header-btn"
+                fill={`var(--slate12)`}
+                leftIcon="search"
+                iconWidth="14"
+                variant="tertiary"
+              ></ButtonSolid>
+              <ButtonSolid
                 title={`${pinned ? 'Unpin' : 'Pin'}`}
                 onClick={() => {
                   setPinned(!pinned);
                   !haveUserPinned && setHaveUserPinned(true);
                 }}
+                variant="tertiary"
+                className="left-sidebar-header-btn"
+                fill={`var(--slate12)`}
                 darkMode={darkMode}
-                size="sm"
-                styles={{ width: '28px', padding: 0 }}
-              >
-                <Button.Content
-                  dataCy={'pin-panel'}
-                  iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
-                  direction="left"
-                />
-              </Button>
+                leftIcon={pinned ? 'unpin' : 'pin'}
+                iconWidth="14"
+              ></ButtonSolid>
             </div>
           </HeaderSection.PanelHeader>
           {showSearch && (
@@ -139,13 +145,13 @@ const LeftSidebarPageSelector = ({
           )}
         </HeaderSection>
 
-        <div className={`${darkMode && 'dark theme-dark'} page-selector-panel-body`}>
+        <div className={`${darkMode && 'dark-theme'} page-selector-panel-body`}>
           <div>
-            {allpages.length > 0 ? (
+            {sortedAllPages.length > 0 ? (
               <SortableList
-                data={allpages}
+                data={sortedAllPages}
                 Element={PageHandler}
-                pages={allpages}
+                pages={sortedAllPages}
                 darkMode={darkMode}
                 switchPage={switchPage}
                 deletePage={deletePage}
@@ -153,6 +159,7 @@ const LeftSidebarPageSelector = ({
                 clonePage={clonePage}
                 hidePage={hidePage}
                 unHidePage={unHidePage}
+                disableEnablePage={disableEnablePage}
                 homePageId={homePageId}
                 currentPageId={currentPageId}
                 updateHomePage={updateHomePage}
@@ -171,7 +178,7 @@ const LeftSidebarPageSelector = ({
               <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
                 <div>
                   <EmptyIllustration />
-                  <p data-cy={`label-no-pages-found`} className="mt-3">
+                  <p data-cy={`label-no-pages-found`} className="mt-3  color-slate12">
                     No pages found
                   </p>
                 </div>
diff --git a/frontend/src/Editor/LeftSidebar/index.jsx b/frontend/src/Editor/LeftSidebar/index.jsx
index cf9dd3f2ae..d0dc344af7 100644
--- a/frontend/src/Editor/LeftSidebar/index.jsx
+++ b/frontend/src/Editor/LeftSidebar/index.jsx
@@ -18,6 +18,7 @@ import { useEditorStore } from '@/_stores/editorStore';
 import { useDataSources } from '@/_stores/dataSourcesStore';
 import { shallow } from 'zustand/shallow';
 import useDebugger from './SidebarDebugger/useDebugger';
+import { GlobalSettings } from '../Header/GlobalSettings';
 
 export const LeftSidebar = forwardRef((props, ref) => {
   const router = useRouter();
@@ -28,7 +29,6 @@ export const LeftSidebar = forwardRef((props, ref) => {
     dataSourcesChanged,
     globalDataSourcesChanged,
     dataQueriesChanged,
-
     appDefinition,
     setSelectedComponent,
     removeComponent,
@@ -48,13 +48,18 @@ export const LeftSidebar = forwardRef((props, ref) => {
     apps,
     clonePage,
     setEditorMarginLeft,
+    globalSettingsChanged,
+    toggleAppMaintenance,
+    app,
+    disableEnablePage,
   } = props;
+  const { is_maintenance_on } = app;
 
   const dataSources = useDataSources();
   const prevSelectedSidebarItem = localStorage.getItem('selectedSidebarItem');
   const queryPanelHeight = usePanelHeight();
   const [selectedSidebarItem, setSelectedSidebarItem] = useState(
-    dataSources?.length === 0 && prevSelectedSidebarItem === 'database' ? 'inspect' : prevSelectedSidebarItem
+    dataSources?.length === 0 && prevSelectedSidebarItem === 'datasource' ? 'inspect' : prevSelectedSidebarItem
   );
   const [showLeaveDialog, setShowLeaveDialog] = useState(false);
   const [showDataSourceManagerModal, toggleDataSourceManagerModal] = useState(false);
@@ -144,6 +149,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
         renamePage={renamePage}
         hidePage={hidePage}
         unHidePage={unHidePage}
+        disableEnablePage={disableEnablePage}
         updateHomePage={updateHomePage}
         updatePageHandle={updatePageHandle}
         clonePage={clonePage}
@@ -170,7 +176,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
         pinned={pinned}
       />
     ),
-    database: (
+    datasource: (
       <LeftSidebarDataSources
         darkMode={darkMode}
         appId={appId}
@@ -182,7 +188,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
         onDeleteofAllDataSources={() => {
           handleSelectedSidebarItem(null);
           handlePin(false);
-          delete sideBarBtnRefs.current['database'];
+          delete sideBarBtnRefs.current['datasource'];
         }}
         setPinned={handlePin}
         pinned={pinned}
@@ -198,6 +204,16 @@ export const LeftSidebar = forwardRef((props, ref) => {
         allLog={allLog}
       />
     ),
+    settings: (
+      <GlobalSettings
+        globalSettingsChanged={globalSettingsChanged}
+        globalSettings={appDefinition.globalSettings}
+        darkMode={darkMode}
+        toggleAppMaintenance={toggleAppMaintenance}
+        is_maintenance_on={is_maintenance_on}
+        app={app}
+      />
+    ),
   };
 
   return (
@@ -219,6 +235,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
         tip="Inspector"
         ref={setSideBarBtnRefs('inspect')}
       />
+
       <LeftSidebarItem
         icon="debugger"
         selectedSidebarItem={selectedSidebarItem}
@@ -230,17 +247,28 @@ export const LeftSidebar = forwardRef((props, ref) => {
         tip="Debugger"
         ref={setSideBarBtnRefs('debugger')}
       />
+      <LeftSidebarItem
+        icon="settings"
+        selectedSidebarItem={selectedSidebarItem}
+        // eslint-disable-next-line no-unused-vars
+        onClick={(e) => handleSelectedSidebarItem('settings')}
+        className={`left-sidebar-item  left-sidebar-layout`}
+        badge={true}
+        tip="Settings"
+        ref={setSideBarBtnRefs('settings')}
+      />
 
       {dataSources?.length > 0 && (
         <LeftSidebarItem
           selectedSidebarItem={selectedSidebarItem}
-          onClick={() => handleSelectedSidebarItem('database')}
-          icon="database"
+          onClick={() => handleSelectedSidebarItem('datasource')}
+          icon="datasource"
           className={`left-sidebar-item left-sidebar-layout sidebar-datasources`}
           tip="Sources"
-          ref={setSideBarBtnRefs('database')}
+          ref={setSideBarBtnRefs('datasource')}
         />
       )}
+
       <Popover
         onInteractOutside={handleInteractOutside}
         open={pinned || !!selectedSidebarItem}
@@ -249,16 +277,6 @@ export const LeftSidebar = forwardRef((props, ref) => {
         popoverContent={SELECTED_ITEMS[selectedSidebarItem]}
         popoverContentHeight={popoverContentHeight}
       />
-
-      {config.COMMENT_FEATURE_ENABLE && (
-        <div className={`${isVersionReleased && 'disabled'}`}>
-          <LeftSidebarComment
-            selectedSidebarItem={showComments ? 'comments' : ''}
-            currentPageId={currentPageId}
-            ref={setSideBarBtnRefs('comments')}
-          />
-        </div>
-      )}
       <ConfirmDialog
         show={showLeaveDialog}
         message={'The unsaved changes will be lost if you leave the editor, do you want to leave?'}
@@ -267,7 +285,19 @@ export const LeftSidebar = forwardRef((props, ref) => {
         darkMode={darkMode}
       />
       <div className="left-sidebar-stack-bottom">
-        <div className="left-sidebar-item no-border">
+        <div className="">
+          {config.COMMENT_FEATURE_ENABLE && (
+            <div
+              className={`${isVersionReleased && 'disabled'}`}
+              style={{ maxHeight: '32px', maxWidth: '32px', marginBottom: '16px' }}
+            >
+              <LeftSidebarComment
+                selectedSidebarItem={showComments ? 'comments' : ''}
+                currentPageId={currentPageId}
+                ref={setSideBarBtnRefs('comments')}
+              />
+            </div>
+          )}
           <DarkModeToggle switchDarkMode={switchDarkMode} darkMode={darkMode} tooltipPlacement="right" />
         </div>
         {/* <LeftSidebarItem icon='support' className='left-sidebar-item' /> */}
diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx
index fb8e7db03f..04860f1622 100644
--- a/frontend/src/Editor/ManageAppUsers.jsx
+++ b/frontend/src/Editor/ManageAppUsers.jsx
@@ -9,6 +9,7 @@ import Textarea from '@/_ui/Textarea';
 import { withTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { getPrivateRoute } from '@/_helpers/routes';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { getSubpath } from '@/_helpers/utils';
 
 class ManageAppUsersComponent extends React.Component {
@@ -140,25 +141,10 @@ class ManageAppUsersComponent extends React.Component {
     const embeddableLink = `<iframe width="560" height="315" src="${appLink}${this.props.slug}" title="Tooljet app - ${this.props.slug}" frameborder="0" allowfullscreen></iframe>`;
 
     return (
-      <div title="Share">
-        <svg
-          className="w-100 h-100 cursor-pointer icon"
-          onClick={() => this.setState({ showModal: true })}
-          width="33"
-          height="33"
-          viewBox="0 0 33 33"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          data-cy="share-button-link"
-        >
-          <rect x="0.363281" y="0.220703" width="32" height="32" rx="6" fill="#F0F4FF" />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M20.362 10.8875C19.6256 10.8875 19.0286 11.4845 19.0286 12.2209C19.0286 12.4112 19.0685 12.5922 19.1404 12.756C19.1453 12.7646 19.15 12.7733 19.1546 12.7822C19.1647 12.8019 19.1738 12.8217 19.1818 12.8418C19.4051 13.2654 19.8498 13.5542 20.362 13.5542C21.0984 13.5542 21.6953 12.9572 21.6953 12.2209C21.6953 11.4845 21.0984 10.8875 20.362 10.8875ZM18.3354 13.9542C18.8245 14.5255 19.551 14.8875 20.362 14.8875C21.8347 14.8875 23.0286 13.6936 23.0286 12.2209C23.0286 10.7481 21.8347 9.5542 20.362 9.5542C18.8892 9.5542 17.6953 10.7481 17.6953 12.2209C17.6953 12.4043 17.7138 12.5834 17.7491 12.7564L14.3886 14.4876C13.8995 13.9163 13.173 13.5542 12.362 13.5542C10.8892 13.5542 9.69531 14.7481 9.69531 16.2209C9.69531 17.6936 10.8892 18.8875 12.362 18.8875C13.173 18.8875 13.8995 18.5255 14.3886 17.9542L17.7491 19.6854C17.7138 19.8584 17.6953 20.0375 17.6953 20.2209C17.6953 21.6936 18.8892 22.8875 20.362 22.8875C21.8347 22.8875 23.0286 21.6936 23.0286 20.2209C23.0286 18.7481 21.8347 17.5542 20.362 17.5542C19.551 17.5542 18.8245 17.9163 18.3354 18.4876L14.9749 16.7564C15.0101 16.5834 15.0286 16.4043 15.0286 16.2209C15.0286 16.0375 15.0101 15.8584 14.9749 15.6854L18.3354 13.9542ZM13.5422 15.5999C13.5502 15.62 13.5592 15.6399 13.5693 15.6595C13.5739 15.6684 13.5787 15.6771 13.5836 15.6857C13.6554 15.8495 13.6953 16.0305 13.6953 16.2209C13.6953 16.4112 13.6554 16.5922 13.5836 16.756C13.5787 16.7646 13.5739 16.7733 13.5693 16.7822C13.5592 16.8019 13.5502 16.8217 13.5422 16.8418C13.3188 17.2654 12.8741 17.5542 12.362 17.5542C11.6256 17.5542 11.0286 16.9572 11.0286 16.2209C11.0286 15.4845 11.6256 14.8875 12.362 14.8875C12.8741 14.8875 13.3188 15.1763 13.5422 15.5999ZM19.1404 19.6857C19.1453 19.6771 19.15 19.6684 19.1546 19.6595C19.1647 19.6399 19.1738 19.62 19.1818 19.5999C19.4051 19.1763 19.8498 18.8875 20.362 18.8875C21.0984 18.8875 21.6953 19.4845 21.6953 20.2209C21.6953 20.9572 21.0984 21.5542 20.362 21.5542C19.6256 21.5542 19.0286 20.9572 19.0286 20.2209C19.0286 20.0305 19.0685 19.8495 19.1404 19.6857Z"
-            fill="#3E63DD"
-          />
-        </svg>
+      <div title="Share" className="editor-header-icon tj-secondary-btn" data-cy="share-button-link">
+        <span className="d-flex" onClick={() => this.setState({ showModal: true })}>
+          <SolidIcon name="share" width="14" className="cursor-pointer" fill="#3E63DD" />
+        </span>
         <Modal
           show={this.state.showModal}
           size="lg"
@@ -167,12 +153,14 @@ class ManageAppUsersComponent extends React.Component {
           keyboard={true}
           animation={false}
           onEscapeKeyDown={this.hideModal}
-          className="app-sharing-modal animation-fade"
-          contentClassName={this.props.darkMode ? 'theme-dark' : ''}
+          className={`app-sharing-modal animation-fade ${this.props.darkMode ? 'dark-theme' : ''}`}
+          contentClassName={this.props.darkMode ? 'dark-theme' : ''}
         >
           <Modal.Header>
             <Modal.Title data-cy="modal-header">{this.props.t('editor.share', 'Share')}</Modal.Title>
-            <button className="btn-close" aria-label="Close" onClick={this.hideModal} data-cy="modal-close-button" />
+            <span onClick={this.hideModal} data-cy="modal-close-button">
+              <SolidIcon name="remove" className="cursor-pointer" aria-label="Close" />
+            </span>
           </Modal.Header>
           <Modal.Body>
             {isLoading ? (
@@ -184,7 +172,7 @@ class ManageAppUsersComponent extends React.Component {
                 <div className="make-public mb-3">
                   <div className="form-check form-switch">
                     <input
-                      className="form-check-input"
+                      className="form-check-input color-slate12"
                       type="checkbox"
                       onClick={this.toggleAppVisibility}
                       checked={this.state.app.is_public}
@@ -207,10 +195,10 @@ class ManageAppUsersComponent extends React.Component {
                     <span className="input-group-text" data-cy="app-link">
                       {appLink}
                     </span>
-                    <div className="input-with-icon">
+                    <div className="input-with-icon app-name-slug-input">
                       <input
                         type="text"
-                        className={`form-control form-control-sm ${slugButtonClass}`}
+                        className={`form-control  color-slate12  ${slugButtonClass}`}
                         placeholder={appId}
                         onChange={(e) => {
                           e.persist();
@@ -225,13 +213,11 @@ class ManageAppUsersComponent extends React.Component {
                         </div>
                       )}
                     </div>
-                    <span className="input-group-text">
-                      <CopyToClipboard text={shareableLink} onCopy={() => toast.success('Link copied to clipboard')}>
-                        <button className="btn btn-secondary btn-sm" data-cy="copy-app-link-button">
-                          {this.props.t('editor.shareModal.copy', 'copy')}
-                        </button>
-                      </CopyToClipboard>
-                    </span>
+                    <CopyToClipboard text={shareableLink} onCopy={() => toast.success('Link copied to clipboard')}>
+                      <button className="btn-sm tj-tertiary-btn" data-cy="copy-app-link-button">
+                        {this.props.t('editor.shareModal.copy', 'copy')}
+                      </button>
+                    </CopyToClipboard>
                     <div className="invalid-feedback">{slugError}</div>
                   </div>
                 </div>
@@ -251,16 +237,14 @@ class ManageAppUsersComponent extends React.Component {
                         value={embeddableLink}
                         data-cy="iframe-link"
                       />
-                      <span className="input-group-text">
-                        <CopyToClipboard
-                          text={embeddableLink}
-                          onCopy={() => toast.success('Embeddable link copied to clipboard')}
-                        >
-                          <button className="btn btn-secondary btn-sm" data-cy="iframe-link-copy-button">
-                            {this.props.t('editor.shareModal.copy', 'copy')}
-                          </button>
-                        </CopyToClipboard>
-                      </span>
+                      <CopyToClipboard
+                        text={embeddableLink}
+                        onCopy={() => toast.success('Embeddable link copied to clipboard')}
+                      >
+                        <button className="tj-tertiary-btn btn-sm" data-cy="iframe-link-copy-button">
+                          {this.props.t('editor.shareModal.copy', 'copy')}
+                        </button>
+                      </CopyToClipboard>
                     </div>
                   </div>
                 )}
@@ -273,7 +257,7 @@ class ManageAppUsersComponent extends React.Component {
               <Link
                 to={getPrivateRoute('workspace_settings')}
                 target="_blank"
-                className="btn color-primary mt-3"
+                className="tj-primary-btn tj-base-btn"
                 data-cy="manage-users-button"
               >
                 Manage users
diff --git a/frontend/src/Editor/QueryManager/Components/CustomToggleSwitch.jsx b/frontend/src/Editor/QueryManager/Components/CustomToggleSwitch.jsx
index 01313a9a45..a00eefcda0 100644
--- a/frontend/src/Editor/QueryManager/Components/CustomToggleSwitch.jsx
+++ b/frontend/src/Editor/QueryManager/Components/CustomToggleSwitch.jsx
@@ -14,7 +14,7 @@ export const CustomToggleSwitch = ({
     <div
       data-tooltip-id={dataCy === 'copilot' ? 'tooltip-for-active-copilot' : ''}
       data-tooltip-content="Only workspace admins can enable or disable Copilot."
-      className={`custom-toggle-switch d-flex col gap-2 align-items-center ${darkMode && 'theme-dark'}`}
+      className={`custom-toggle-switch d-flex col gap-2 align-items-center`}
     >
       <label className="switch">
         <input
diff --git a/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx b/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
index eb0039e616..af84f80cb6 100644
--- a/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
+++ b/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Plus from '@/_ui/Icon/solidIcons/Plus';
 import Information from '@/_ui/Icon/solidIcons/Information';
-import Search from '@/_ui/Icon/solidIcons/Search';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { getWorkspaceId } from '@/_helpers/utils';
@@ -40,6 +39,7 @@ function DataSourcePicker({ dataSources, staticDataSources, darkMode, globalData
     } else {
       setFilteredUserDefinedDataSources(allUserDefinedSources);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchTerm, globalDataSources, dataSources]);
 
   const handleAddClick = () => {
@@ -50,10 +50,10 @@ function DataSourcePicker({ dataSources, staticDataSources, darkMode, globalData
   return (
     <>
       <h4 className="w-100 text-center" data-cy={'label-select-datasource'} style={{ fontWeight: 500 }}>
-        Connect to a datasource
+        Connect to a data source
       </h4>
       <p className="mb-3" style={{ textAlign: 'center' }}>
-        Select a datasource to start creating a new query. To know more about queries in ToolJet, you can read our
+        Select a data source to start creating a new query. To know more about queries in ToolJet, you can read our
         &nbsp;
         <a target="_blank" href="https://docs.tooljet.com/docs/app-builder/query-panel" rel="noreferrer">
           documentation
@@ -83,7 +83,7 @@ function DataSourcePicker({ dataSources, staticDataSources, darkMode, globalData
         </div>
         <div className="d-flex d-flex justify-content-between">
           <label className="form-label py-1" style={{ width: 'auto' }} data-cy={`label-avilable-ds`}>
-            {`Available Datasources ${!isEmpty(allUserDefinedSources) ? '(' + allUserDefinedSources.length + ')' : 0}`}
+            {`Available data sources ${!isEmpty(allUserDefinedSources) ? '(' + allUserDefinedSources.length + ')' : 0}`}
           </label>
           {admin && (
             <ButtonSolid
@@ -143,10 +143,7 @@ const EmptyDataSourceBanner = () => (
     <div className="me-2">
       <Information fill="var(--slate9)" />
     </div>
-    <div>
-      No global datasources have been added yet. <br />
-      Add new datasources to connect to your app! 🚀
-    </div>
+    <div>No global data sources have been added yet.</div>
   </div>
 );
 
diff --git a/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx b/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx
index c143c113c8..0cc5ce8ec0 100644
--- a/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx
+++ b/frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx
@@ -14,7 +14,7 @@ import Search from '@/_ui/Icon/solidIcons/Search';
 import { Tooltip } from 'react-tooltip';
 import { DataBaseSources, ApiSources, CloudStorageSources } from '@/Editor/DataSourceManager/SourceComponents';
 
-function DataSourceSelect({ darkMode, isDisabled, selectRef, closePopup }) {
+function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
   const dataSources = useDataSources();
   const globalDataSources = useGlobalDataSources();
   const [userDefinedSources, setUserDefinedSources] = useState([...dataSources, ...globalDataSources]);
@@ -53,7 +53,7 @@ function DataSourceSelect({ darkMode, isDisabled, selectRef, closePopup }) {
           <div>
             {index === 0 && (
               <div className="color-slate9 mb-2 pb-1" style={{ fontWeight: 500, marginTop: '-8px' }}>
-                Global datasources
+                Global data sources
               </div>
             )}
             <DataSourceIcon source={sources?.[0]} height={16} />
@@ -77,6 +77,7 @@ function DataSourceSelect({ darkMode, isDisabled, selectRef, closePopup }) {
         })),
       }))
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userDefinedSources]);
 
   const DataSourceOptions = [
@@ -245,7 +246,7 @@ const MenuList = ({ children, getStyles, innerRef, ...props }) => {
       {admin && (
         <div className="p-2 mt-2 border-slate3-top">
           <ButtonSolid variant="secondary" size="md" className="w-100" onClick={handleAddClick}>
-            + Add new datasource
+            + Add new data source
           </ButtonSolid>
         </div>
       )}
diff --git a/frontend/src/Editor/QueryManager/Components/Preview.jsx b/frontend/src/Editor/QueryManager/Components/Preview.jsx
index 54a3db9d8c..fa478f0ec8 100644
--- a/frontend/src/Editor/QueryManager/Components/Preview.jsx
+++ b/frontend/src/Editor/QueryManager/Components/Preview.jsx
@@ -47,7 +47,7 @@ const Preview = ({ darkMode }) => {
 
   return (
     <div className="preview-header preview-section d-flex align-items-baseline font-weight-500" ref={previewPanelRef}>
-      <div className="w-100 border rounded-top">
+      <div className="w-100" style={{ borderRadius: '0px 0px 6px 6px' }}>
         <Tab.Container activeKey={key} onSelect={(k) => setKey(k)} defaultActiveKey="raw">
           <div className="position-relative">
             {previewLoading && (
@@ -91,7 +91,15 @@ const Preview = ({ darkMode }) => {
               </Col>
             </Row>
             <Row className="m-0">
-              <Tab.Content style={{ overflowWrap: 'anywhere', padding: 0 }}>
+              <Tab.Content
+                style={{
+                  overflowWrap: 'anywhere',
+                  padding: 0,
+                  border: '1px solid var(--slate5)',
+                  borderBottomLeftRadius: '6px',
+                  borderBottomRightRadius: '6px',
+                }}
+              >
                 <Tab.Pane eventKey="json" transition={false}>
                   <div className="w-100 preview-data-container" data-cy="preview-json-data-container">
                     <JSONTree theme={theme} data={queryPreviewData} invertTheme={!darkMode} collectionLimit={100} />
diff --git a/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx b/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
index 2451da8c0e..cfefd7bde5 100644
--- a/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
+++ b/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
@@ -28,7 +28,6 @@ export const QueryManagerBody = ({
   apps,
   appDefinition,
   setOptions,
-  appId,
 }) => {
   const { t } = useTranslation();
   const dataSources = useDataSources();
@@ -251,7 +250,9 @@ export const QueryManagerBody = ({
     }
     return (
       <div className={cx('mt-2 d-flex px-4 mb-3', { 'disabled ': isVersionReleased })}>
-        <div className={`d-flex query-manager-border-color hr-text-left py-2 form-label font-weight-500`}>
+        <div
+          className={`d-flex query-manager-border-color hr-text-left py-2 form-label font-weight-500 change-data-source`}
+        >
           Datasource
         </div>
         <div className="d-flex flex-grow-1">
diff --git a/frontend/src/Editor/QueryManager/Components/QueryManagerHeader.jsx b/frontend/src/Editor/QueryManager/Components/QueryManagerHeader.jsx
index a5e914f088..99786ffeac 100644
--- a/frontend/src/Editor/QueryManager/Components/QueryManagerHeader.jsx
+++ b/frontend/src/Editor/QueryManager/Components/QueryManagerHeader.jsx
@@ -1,6 +1,5 @@
 import React, { useState, forwardRef, useRef, useEffect } from 'react';
 import RenameIcon from '../Icons/RenameIcon';
-import FloppyDisk from '@/_ui/Icon/solidIcons/FloppyDisk';
 import Eye1 from '@/_ui/Icon/solidIcons/Eye1';
 import Play from '@/_ui/Icon/solidIcons/Play';
 import cx from 'classnames';
@@ -8,7 +7,7 @@ import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { previewQuery, checkExistingQueryName, runQuery } from '@/_helpers/appUtils';
 
-import { useDataQueriesActions, useQueryCreationLoading, useQueryUpdationLoading } from '@/_stores/dataQueriesStore';
+import { useDataQueriesActions } from '@/_stores/dataQueriesStore';
 import {
   useSelectedQuery,
   useSelectedDataSource,
@@ -102,10 +101,7 @@ export const QueryManagerHeader = forwardRef(({ darkMode, options, editorRef },
       >
         <button
           onClick={() => runQuery(editorRef, selectedQuery?.id, selectedQuery?.name)}
-          className={`border-0 default-secondary-button float-right1 ${buttonLoadingState(
-            isLoading,
-            isVersionReleased
-          )}`}
+          className={`border-0 default-secondary-button float-right1 ${buttonLoadingState(isLoading)}`}
           data-cy="query-run-button"
           disabled={isInDraft}
           {...(isInDraft && {
@@ -140,7 +136,14 @@ export const QueryManagerHeader = forwardRef(({ darkMode, options, editorRef },
   return (
     <div className="row header">
       <div className="col font-weight-500">
-        {selectedQuery && <NameInput onInput={executeQueryNameUpdation} value={queryName} darkMode={darkMode} />}
+        {selectedQuery && (
+          <NameInput
+            onInput={executeQueryNameUpdation}
+            value={queryName}
+            darkMode={darkMode}
+            isDiabled={isVersionReleased}
+          />
+        )}
       </div>
       <div className="query-header-buttons me-3">{renderButtons()}</div>
     </div>
@@ -165,7 +168,7 @@ const PreviewButton = ({ buttonLoadingState, onClick }) => {
   );
 };
 
-const NameInput = ({ onInput, value, darkMode }) => {
+const NameInput = ({ onInput, value, darkMode, isDiabled }) => {
   const [isFocussed, setIsFocussed] = useNameInputFocussed(false);
   const [name, setName] = useState(value);
   const isVersionReleased = useAppVersionStore((state) => state.isVersionReleased);
@@ -227,7 +230,8 @@ const NameInput = ({ onInput, value, darkMode }) => {
         ) : (
           <Button
             size="sm"
-            onClick={() => setIsFocussed(true)}
+            onClick={isDiabled ? null : () => setIsFocussed(true)}
+            disabled={isDiabled}
             className={'bg-transparent justify-content-between color-slate12 w-100 px-2 py-1 rounded font-weight-500'}
           >
             <span className="text-truncate">{name} </span>
@@ -235,7 +239,7 @@ const NameInput = ({ onInput, value, darkMode }) => {
               className={cx('breadcrum-rename-query-icon', { 'd-none': isFocussed && isVersionReleased })}
               style={{ minWidth: 14 }}
             >
-              <RenameIcon />
+              {!isDiabled && <RenameIcon />}
             </span>
           </Button>
         )}
diff --git a/frontend/src/Editor/QueryManager/Components/SuccessNotificationInputs.jsx b/frontend/src/Editor/QueryManager/Components/SuccessNotificationInputs.jsx
index 8599125619..68a2734ded 100644
--- a/frontend/src/Editor/QueryManager/Components/SuccessNotificationInputs.jsx
+++ b/frontend/src/Editor/QueryManager/Components/SuccessNotificationInputs.jsx
@@ -29,8 +29,7 @@ export default function SuccessNotificationInputs({ currentState, options, darkM
         <label className="form-label" data-cy={'label-notification-duration-input'} style={{ width: 150 }}>
           {t('editor.queryManager.notificationDuration', 'duration (s)')}
         </label>
-        {/* </div> */}
-        <div className="flex-grow-1 query-manager-input-elem">
+        <div className="flex-grow-1 query-manager-input-elem ">
           <input
             type="number"
             disabled={!options.showSuccessNotification}
diff --git a/frontend/src/Editor/QueryManager/Components/Transformation.jsx b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
index d9ae3f12c6..0498a18aaf 100644
--- a/frontend/src/Editor/QueryManager/Components/Transformation.jsx
+++ b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
@@ -159,7 +159,7 @@ return [row for row in data if row['amount'] > 1000]
             </span>
           </OverlayTrigger>
           <div className="flex-grow-l">
-            <div className=" d-flex">
+            <div className="align-items-center d-flex">
               <div className="mb-0">
                 <span className="d-flex">
                   <CustomToggleSwitch
@@ -179,7 +179,7 @@ return [row for row in data if row['amount'] > 1000]
         </div>
       </div>
       <br></br>
-      <div className="d-flex">
+      <div className="d-flex copilot-codehinter-wrap">
         <div className="form-label"></div>
         <div className="col flex-grow-1">
           {enableTransformation && (
@@ -187,7 +187,7 @@ return [row for row in data if row['amount'] > 1000]
               className="rounded-3"
               style={{ marginBottom: '20px', background: `${darkMode ? '#272822' : '#F8F9FA'}` }}
             >
-              <div className="py-3 px-3 d-flex justify-content-between">
+              <div className="py-3 px-3 d-flex justify-content-between copilot-section-header">
                 <div className="d-flex">
                   <div className="d-flex align-items-center border transformation-language-select-wrapper">
                     <span className="px-2">Language</span>
@@ -210,7 +210,7 @@ return [row for row in data if row['amount'] > 1000]
                   />
                 </div>
               </div>
-              <div className="border-top mx-3"></div>
+              <div className="codehinter-border-bottom mx-3"></div>
               <CodeHinter
                 initialValue={state[lang]}
                 mode={lang}
@@ -265,14 +265,14 @@ const EducativeLabel = ({ darkMode }) => {
   const title = () => {
     return (
       <>
-        Powered by <strong style={{ fontWeight: 700, color: '#3E63DD' }}>AI copilot</strong>
+        Powered by <strong style={{ fontWeight: 700, color: '#3E63DD' }}> &nbsp;AI copilot</strong>
       </>
     );
   };
 
   return (
-    <div className="d-flex">
-      <Button.UnstyledButton styles={{ height: '28px' }} darkMode={darkMode} classNames="mx-1">
+    <div className="d-flex align-items-center ">
+      <Button.UnstyledButton styles={{ height: '28px' }} darkMode={darkMode} classNames="mx-1 copilot-toggle">
         <Button.Content title={title} iconSrc={'assets/images/icons/flash.svg'} direction="left" />
       </Button.UnstyledButton>
       <OverlayTrigger
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Restapi/Tabs.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Restapi/Tabs.jsx
index 8523dccabe..d4bb9bc47b 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Restapi/Tabs.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Restapi/Tabs.jsx
@@ -44,7 +44,7 @@ function ControlledTabs({
           )}
         </div>
 
-        <div className={`col ${darkMode && 'theme-dark'}`}>
+        <div className={`col`}>
           <Tab.Content bsPrefix="rest-api-tab-content" className="query-manager-border-color rounded">
             <Tab.Pane eventKey="headers" t bsPrefix="rest-api-tabpanes" transition={false}>
               <Headers
@@ -68,7 +68,11 @@ function ControlledTabs({
                 componentName={componentName}
               />
             </Tab.Pane>
-            <Tab.Pane eventKey="body" bsPrefix="rest-api-tabpanes" transition={false}>
+            <Tab.Pane
+              eventKey="body"
+              bsPrefix={`rest-api-tabpanes ${bodyToggle && 'rest-api-tabpanes-body'}`}
+              transition={false}
+            >
               <Body
                 removeKeyValuePair={removeKeyValuePair}
                 addNewKeyValuePair={addNewKeyValuePair}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx
index 5c657e1067..b29c83ab70 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Restapi/index.jsx
@@ -134,8 +134,8 @@ class Restapi extends React.Component {
 
     return (
       <div className={`d-flex`}>
-        <div className="form-label">Request</div>
-        <div className="flex-grow-1">
+        <div className="form-label flex-shrink-0">Request</div>
+        <div className="flex-grow-1 overflow-hidden">
           <div className="rest-api-methods-select-element-container">
             <div className={`me-2`} style={{ width: '90px', height: '32px' }}>
               <label className="font-weight-bold color-slate12">Method</label>
@@ -166,7 +166,7 @@ class Restapi extends React.Component {
                 {dataSourceURL && (
                   <BaseUrl theme={this.props.darkMode ? 'monokai' : 'default'} dataSourceURL={dataSourceURL} />
                 )}
-                <div className={`flex-grow-1 ${dataSourceURL ? 'url-input-group' : ''}`}>
+                <div className={`flex-grow-1  ${dataSourceURL ? 'url-input-group' : ''}`}>
                   <CodeHinter
                     currentState={this.props.currentState}
                     initialValue={options.url}
@@ -185,7 +185,7 @@ class Restapi extends React.Component {
             </div>
           </div>
 
-          <div className={`query-pane-restapi-tabs  ${this.props.darkMode ? 'dark' : ''}`}>
+          <div className={`query-pane-restapi-tabs`}>
             <Tabs
               theme={this.props.darkMode ? 'monokai' : 'default'}
               options={this.state.options}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/ParameterForm.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/ParameterForm.jsx
index 67697166df..411e1f9463 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/ParameterForm.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/ParameterForm.jsx
@@ -33,6 +33,7 @@ const ParameterForm = ({
     if (!showModal && !error) {
       onSubmit && onSubmit({ name, defaultValue });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showModal]);
 
   const handleSubmit = (event) => {
@@ -50,13 +51,20 @@ const ParameterForm = ({
     } else {
       setError();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [name]);
 
   return (
     <>
-      <Popover.Header style={{ fontSize: '12px' }}>{isEdit ? 'UPDATE PARAMETER' : 'ADD PARAMETER'}</Popover.Header>
-      <Popover.Body key={'1'} bsPrefix="popover-body" className="px-0 pe-2 pt-2">
-        <Form className="container px-3" onSubmit={handleSubmit} style={{ paddingRight: '25px !important' }}>
+      <Popover.Header className={darkMode && 'dark-theme'} style={{ fontSize: '12px' }}>
+        {isEdit ? 'UPDATE PARAMETER' : 'ADD PARAMETER'}
+      </Popover.Header>
+      <Popover.Body className={darkMode && 'dark-theme dark-theme'} key={'1'} bsPrefix="popover-body">
+        <Form
+          className="container p-0 tj-app-input"
+          onSubmit={handleSubmit}
+          style={{ paddingRight: '25px !important' }}
+        >
           <Form.Group as={Row} className="mb-2 pr-1">
             <Form.Label column htmlFor="paramName">
               Name
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx
index 64cc2a044e..dee0afc5ef 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx
@@ -142,7 +142,6 @@ const RenderColumnOptions = ({
             value={column}
             options={displayColumns}
             onChange={handleColumnChange}
-            customWrap={true}
           />
         </div>
 
diff --git a/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx b/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx
index c13c7558b1..bc98851d6a 100644
--- a/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx
+++ b/frontend/src/Editor/QueryPanel/FilterandSortPopup.jsx
@@ -255,7 +255,7 @@ const DataSourceSelector = ({
         <div>
           <input
             className="bg-transparent border-0 form-control form-control-sm"
-            placeholder="Select datasource"
+            placeholder="Select data source"
             onChange={(e) => setSearch(e.target.value)}
             ref={searchBoxRef}
             value={search}
diff --git a/frontend/src/Editor/QueryPanel/QueryCard.jsx b/frontend/src/Editor/QueryPanel/QueryCard.jsx
index 9e147729ed..3e0aa45909 100644
--- a/frontend/src/Editor/QueryPanel/QueryCard.jsx
+++ b/frontend/src/Editor/QueryPanel/QueryCard.jsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { Tooltip } from 'react-tooltip';
 import { checkExistingQueryName } from '@/_helpers/appUtils';
 import { Confirm } from '../Viewer/Confirm';
@@ -63,7 +62,7 @@ export const QueryCard = ({ dataQuery, darkMode = false, editorRef, appId }) =>
   return (
     <>
       <div
-        className={'row query-row pe-2' + (isSeletedQuery ? ' query-row-selected' : '')}
+        className={`row query-row pe-2 ${darkMode && 'dark-theme'}` + (isSeletedQuery ? ' query-row-selected' : '')}
         key={dataQuery.id}
         onClick={() => {
           if (selectedQuery?.id === dataQuery?.id) return;
@@ -95,24 +94,17 @@ export const QueryCard = ({ dataQuery, darkMode = false, editorRef, appId }) =>
               }}
             />
           ) : (
-            <OverlayTrigger
-              trigger={['hover', 'focus']}
-              placement="top"
-              delay={{ show: 800, hide: 100 }}
-              overlay={<Tooltip id="button-tooltip">{dataQuery.name}</Tooltip>}
-            >
-              <div className="query-name" data-cy={`list-query-${dataQuery.name.toLowerCase()}`}>
-                <span
-                  className="text-truncate"
-                  data-tooltip-id="query-card-name-tooltip"
-                  data-tooltip-content={dataQuery.name}
-                >
-                  {dataQuery.name}
-                </span>{' '}
-                <Tooltip id="query-card-name-tooltip" className="tooltip query-manager-tooltip" />
-                {!isQueryRunnable(dataQuery) && <small className="mx-2 text-secondary">Draft</small>}
-              </div>
-            </OverlayTrigger>
+            <div className="query-name" data-cy={`list-query-${dataQuery.name.toLowerCase()}`}>
+              <span
+                className="text-truncate"
+                data-tooltip-id="query-card-name-tooltip"
+                data-tooltip-content={dataQuery.name}
+              >
+                {dataQuery.name}
+              </span>{' '}
+              <Tooltip id="query-card-name-tooltip" className="tooltip query-manager-tooltip" />
+              {!isQueryRunnable(dataQuery) && <small className="mx-2 text-secondary">Draft</small>}
+            </div>
           )}
         </div>
 
diff --git a/frontend/src/Editor/QueryPanel/QueryDataPane.jsx b/frontend/src/Editor/QueryPanel/QueryDataPane.jsx
index da6f74a7a5..f87882b116 100644
--- a/frontend/src/Editor/QueryPanel/QueryDataPane.jsx
+++ b/frontend/src/Editor/QueryPanel/QueryDataPane.jsx
@@ -17,6 +17,8 @@ import useShowPopover from '@/_hooks/useShowPopover';
 import DataSourceSelect from '../QueryManager/Components/DataSourceSelect';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import FolderEmpty from '@/_ui/Icon/solidIcons/FolderEmpty';
+import { useAppVersionStore } from '@/_stores/appVersionStore';
+import { shallow } from 'zustand/shallow';
 
 export const QueryDataPane = ({ darkMode, fetchDataQueries, editorRef, appId, toggleQueryEditor }) => {
   const { t } = useTranslation();
@@ -116,7 +118,7 @@ export const QueryDataPane = ({ darkMode, fetchDataQueries, editorRef, appId, to
             />
             <Tooltip id="tooltip-for-query-panel-header-btn" className="tooltip" />
           </div>
-          <AddDataSourceButton darkMode={darkMode} disabled={isEmpty(dataQueries)} />
+          <AddDataSourceButton darkMode={darkMode} />
         </div>
         <div
           className={cx('queries-header row d-flex align-items-center justify-content-between', {
@@ -204,9 +206,17 @@ const EmptyDataSource = () => (
   </div>
 );
 
-const AddDataSourceButton = ({ darkMode, disabled }) => {
+const AddDataSourceButton = ({ darkMode, disabled: _disabled }) => {
   const [showMenu, setShowMenu] = useShowPopover(false, '#query-add-ds-popover', '#query-add-ds-popover-btn');
   const selectRef = useRef();
+  const { isVersionReleased } = useAppVersionStore(
+    (state) => ({
+      isVersionReleased: state.isVersionReleased,
+      editingVersionId: state.editingVersion?.id,
+    }),
+    shallow
+  );
+  const disabled = isVersionReleased || _disabled;
 
   useEffect(() => {
     if (showMenu) {
diff --git a/frontend/src/Editor/QueryPanel/QueryPanel.jsx b/frontend/src/Editor/QueryPanel/QueryPanel.jsx
index 1c141c6aaf..9ca51023e7 100644
--- a/frontend/src/Editor/QueryPanel/QueryPanel.jsx
+++ b/frontend/src/Editor/QueryPanel/QueryPanel.jsx
@@ -151,7 +151,6 @@ const QueryPanel = ({
         className="query-pane"
         style={{
           height: 40,
-          background: '#fff',
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
diff --git a/frontend/src/Editor/RealtimeAvatars.jsx b/frontend/src/Editor/RealtimeAvatars.jsx
index 2fb732143c..5bc3196767 100644
--- a/frontend/src/Editor/RealtimeAvatars.jsx
+++ b/frontend/src/Editor/RealtimeAvatars.jsx
@@ -33,6 +33,7 @@ const RealtimeAvatars = ({ darkMode }) => {
                     image={presence?.image}
                     borderShape="rounded"
                     indexId={id}
+                    realtime={true}
                   />
                 </div>
                 <div className={`col text-truncate ${darkMode && 'text-white'}`}>
@@ -51,10 +52,14 @@ const RealtimeAvatars = ({ darkMode }) => {
   return (
     <div className="row realtime-avatars">
       <div className="col-auto ms-auto d-flex align-items-center">
-        <div className="avatar-list avatar-list-stacked">
+        <div className="avatar-list-stacked">
           {othersOnSameVersionAndPage.length > MAX_DISPLAY_USERS && (
             <Popover fullWidth={false} showArrow popoverContent={popoverContent()}>
-              <Avatar text={`+${othersOnSameVersionAndPage.length - MAX_DISPLAY_USERS}`} borderShape="rounded" />
+              <Avatar
+                text={`+${othersOnSameVersionAndPage.length - MAX_DISPLAY_USERS}`}
+                borderShape="rounded"
+                realtime={true}
+              />
             </Popover>
           )}
           {self?.presence && (
@@ -66,6 +71,7 @@ const RealtimeAvatars = ({ darkMode }) => {
               image={self?.presence?.image}
               borderShape="rounded"
               indexId={self?.presence?.id}
+              realtime={true}
             />
           )}
           {othersOnSameVersionAndPage.slice(0, MAX_DISPLAY_USERS).map(({ id, presence }) => {
@@ -78,6 +84,7 @@ const RealtimeAvatars = ({ darkMode }) => {
                 image={presence?.image}
                 borderShape="rounded"
                 indexId={id}
+                realtime={true}
               />
             );
           })}
diff --git a/frontend/src/Editor/ReleaseVersionButton.jsx b/frontend/src/Editor/ReleaseVersionButton.jsx
index 3c2a5c2cb0..9f79f08046 100644
--- a/frontend/src/Editor/ReleaseVersionButton.jsx
+++ b/frontend/src/Editor/ReleaseVersionButton.jsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { ConfirmDialog } from '@/_components/ConfirmDialog';
 import { shallow } from 'zustand/shallow';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 
 export const ReleaseVersionButton = function DeployVersionButton({
   appId,
@@ -67,39 +68,16 @@ export const ReleaseVersionButton = function DeployVersionButton({
         confirmButtonText="Release App"
       />
       <div>
-        <button
+        <ButtonSolid
           data-cy={`button-release`}
-          className={cx('btn btn-primary btn-sm rounded-2 bg-light-indigo-09 release-button', {
-            disabled: isVersionReleased,
+          className={cx('release-button', {
             'btn-loading': isReleasing,
-            'released-button': isVersionReleased,
           })}
-          style={{ padding: '6px 16px' }}
+          disabled={isVersionReleased}
           onClick={() => setShowPageDeletionConfirmation(true)}
         >
-          {isVersionReleased ? (
-            'Released'
-          ) : (
-            <>
-              {t('editor.release', 'Release')}
-              <svg
-                className="ms-2"
-                width="17"
-                height="17"
-                viewBox="0 0 17 17"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M8.55985 3.74946C8.82019 3.48911 9.2423 3.48911 9.50265 3.74946L13.5027 7.74946C13.763 8.00981 13.763 8.43192 13.5027 8.69227L9.50265 12.6923C9.2423 12.9526 8.82019 12.9526 8.55985 12.6923C8.2995 12.4319 8.2995 12.0098 8.55985 11.7495L11.4218 8.88753H3.69792C3.32973 8.88753 3.03125 8.58906 3.03125 8.22087C3.03125 7.85268 3.32973 7.5542 3.69792 7.5542H11.4218L8.55985 4.69227C8.2995 4.43192 8.2995 4.00981 8.55985 3.74946Z"
-                  fill="#FDFDFE"
-                />
-              </svg>
-            </>
-          )}
-        </button>
+          {isVersionReleased ? 'Released' : <>{t('editor.release', 'Release')}</>}
+        </ButtonSolid>
       </div>
     </>
   );
diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx
index b610c189ba..4f5edad122 100644
--- a/frontend/src/Editor/SubContainer.jsx
+++ b/frontend/src/Editor/SubContainer.jsx
@@ -487,6 +487,23 @@ export const SubContainer = ({
     backgroundSize: `${gridWidth}px 10px`,
   };
 
+  const checkParent = (box) => {
+    let isListView = false,
+      isForm = false;
+    try {
+      isListView =
+        appDefinition.pages[currentPageId].components[box?.component?.parent]?.component?.component === 'Listview';
+      isForm = appDefinition.pages[currentPageId].components[box?.component?.parent]?.component?.component === 'Form';
+    } catch {
+      console.log('error');
+    }
+    if (!isListView && !isForm) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
   function onComponentOptionChangedForSubcontainer(component, optionName, value, componentId = '') {
     if (typeof value === 'function' && _.findKey(exposedVariables, optionName)) {
       return Promise.resolve();
@@ -518,7 +535,6 @@ export const SubContainer = ({
       {checkParentVisibility() &&
         Object.keys(childWidgets).map((key) => {
           const addDefaultChildren = childWidgets[key]['withDefaultChildren'] || false;
-
           const box = childWidgets[key];
           const canShowInCurrentLayout =
             box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value;
@@ -527,7 +543,16 @@ export const SubContainer = ({
               <DraggableBox
                 onComponentClick={onComponentClick}
                 onEvent={onEvent}
-                onComponentOptionChanged={onComponentOptionChangedForSubcontainer}
+                onComponentOptionChanged={
+                  checkParent(box)
+                    ? onComponentOptionChangedForSubcontainer
+                    : (component, optionName, value, componentId = '') => {
+                        if (typeof value === 'function' && _.findKey(exposedVariables, optionName)) {
+                          return Promise.resolve();
+                        }
+                        onOptionChange && onOptionChange({ component, optionName, value, componentId });
+                      }
+                }
                 onComponentOptionsChanged={onComponentOptionsChanged}
                 key={key}
                 onResizeStop={onResizeStop}
@@ -544,9 +569,6 @@ export const SubContainer = ({
                 setSelectedComponent={setSelectedComponent}
                 selectedComponent={selectedComponent}
                 deviceWindowWidth={deviceWindowWidth}
-                isSelectedComponent={
-                  mode === 'edit' ? selectedComponents.find((component) => component.id === key) : false
-                }
                 removeComponent={customRemoveComponent}
                 canvasWidth={_containerCanvasWidth}
                 readOnly={readOnly}
@@ -556,7 +578,6 @@ export const SubContainer = ({
                 hoveredComponent={hoveredComponent}
                 parentId={parentComponent?.name}
                 sideBarDebugger={sideBarDebugger}
-                isMultipleComponentsSelected={selectedComponents?.length > 1 ? true : false}
                 exposedVariables={exposedVariables ?? {}}
                 childComponents={childComponents[key]}
                 containerProps={{
diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx
index 579fdca5ff..b57243bf0e 100644
--- a/frontend/src/Editor/Viewer.jsx
+++ b/frontend/src/Editor/Viewer.jsx
@@ -485,10 +485,10 @@ class ViewerComponent extends React.Component {
     const bgColor =
       (this.state.appDefinition.globalSettings?.backgroundFxQuery ||
         this.state.appDefinition.globalSettings?.canvasBackgroundColor) ??
-      '#edeff5';
+      '#2f3c4c';
     const resolvedBackgroundColor = resolveReferences(bgColor, this.props.currentState);
-    if (['#2f3c4c', '#edeff5'].includes(resolvedBackgroundColor)) {
-      return this.props.darkMode ? '#2f3c4c' : '#edeff5';
+    if (['#2f3c4c', '#F2F2F5', '#edeff5'].includes(resolvedBackgroundColor)) {
+      return this.props.darkMode ? '#2f3c4c' : '#F2F2F5';
     }
     return resolvedBackgroundColor;
   };
@@ -589,6 +589,34 @@ class ViewerComponent extends React.Component {
           this.handleError(errorDetails, errorAppId, errorVersionId);
         }
 
+        const pageArray = Object.values(this.state.appDefinition?.pages || {});
+        //checking if page is disabled
+        if (
+          pageArray.find((page) => page.handle === this.props.params.pageHandle)?.disabled &&
+          this.state.currentPageId !== this.state.appDefinition?.homePageId && //Prevent page crashing when home page is disabled
+          this.state.appDefinition?.pages?.[this.state.appDefinition?.homePageId]
+        ) {
+          const homeHandle = this.state.appDefinition?.pages?.[this.state.appDefinition?.homePageId]?.handle;
+          let url = `/applications/${this.state.appId}/versions/${this.state.versionId}/${homeHandle}`;
+          if (this.state.slug) {
+            url = `/applications/${this.state.slug}/${homeHandle}`;
+          }
+          return <Navigate to={url} replace />;
+        }
+
+        //checking if page exists
+        if (
+          !pageArray.find((page) => page.handle === this.props.params.pageHandle) &&
+          this.state.appDefinition?.pages?.[this.state.appDefinition?.homePageId]
+        ) {
+          const homeHandle = this.state.appDefinition?.pages?.[this.state.appDefinition?.homePageId]?.handle;
+          let url = `/applications/${this.state.appId}/versions/${this.state.versionId}/${homeHandle}`;
+          if (this.state.slug) {
+            url = `/applications/${this.state.slug}/${homeHandle}`;
+          }
+          return <Navigate to={`${url}${this.props.params.pageHandle ? '' : window.location.search}`} replace />;
+        }
+
         return (
           <div className="viewer wrapper">
             <Confirm
@@ -611,8 +639,13 @@ class ViewerComponent extends React.Component {
               />
               <div className="sub-section">
                 <div className="main">
-                  <div className="canvas-container align-items-center">
-                    <div className="areas d-flex flex-rows justify-content-center">
+                  <div
+                    className="canvas-container align-items-center"
+                    style={{
+                      background: this.computeCanvasBackgroundColor() || (!this.props.darkMode ? '#EBEBEF' : '#2E3035'),
+                    }}
+                  >
+                    <div className="areas d-flex flex-rows">
                       {appDefinition?.showViewerNavigation && (
                         <ViewerNavigation
                           isMobileDevice={this.props.currentLayout === 'mobile'}
@@ -623,54 +656,56 @@ class ViewerComponent extends React.Component {
                           darkMode={this.props.darkMode}
                         />
                       )}
-                      <div
-                        className="canvas-area"
-                        style={{
-                          width: currentCanvasWidth,
-                          maxWidth: canvasMaxWidth,
-                          backgroundColor: this.computeCanvasBackgroundColor(),
-                          margin: 0,
-                          padding: 0,
-                        }}
-                      >
-                        {defaultComponentStateComputed && (
-                          <>
-                            {isLoading ? (
-                              <div className="mx-auto mt-5 w-50 p-5">
-                                <center>
-                                  <div className="spinner-border text-azure" role="status"></div>
-                                </center>
-                              </div>
-                            ) : (
-                              <Container
-                                appDefinition={appDefinition}
-                                appDefinitionChanged={() => false} // function not relevant in viewer
-                                snapToGrid={true}
-                                appLoading={isLoading}
-                                darkMode={this.props.darkMode}
-                                onEvent={(eventName, options) => onEvent(this, eventName, options, 'view')}
-                                mode="view"
-                                deviceWindowWidth={deviceWindowWidth}
-                                selectedComponent={this.state.selectedComponent}
-                                onComponentClick={(id, component) => {
-                                  this.setState({
-                                    selectedComponent: { id, component },
-                                  });
-                                  onComponentClick(this, id, component, 'view');
-                                }}
-                                onComponentOptionChanged={(component, optionName, value) => {
-                                  return onComponentOptionChanged(this, component, optionName, value);
-                                }}
-                                onComponentOptionsChanged={(component, options) =>
-                                  onComponentOptionsChanged(this, component, options)
-                                }
-                                canvasWidth={this.getCanvasWidth()}
-                                dataQueries={dataQueries}
-                                currentPageId={this.state.currentPageId}
-                              />
-                            )}
-                          </>
-                        )}
+                      <div className="flex-grow-1 d-flex justify-content-center">
+                        <div
+                          className="canvas-area"
+                          style={{
+                            width: currentCanvasWidth,
+                            maxWidth: canvasMaxWidth,
+                            backgroundColor: this.computeCanvasBackgroundColor(),
+                            margin: 0,
+                            padding: 0,
+                          }}
+                        >
+                          {defaultComponentStateComputed && (
+                            <>
+                              {isLoading ? (
+                                <div className="mx-auto mt-5 w-50 p-5">
+                                  <center>
+                                    <div className="spinner-border text-azure" role="status"></div>
+                                  </center>
+                                </div>
+                              ) : (
+                                <Container
+                                  appDefinition={appDefinition}
+                                  appDefinitionChanged={() => false} // function not relevant in viewer
+                                  snapToGrid={true}
+                                  appLoading={isLoading}
+                                  darkMode={this.props.darkMode}
+                                  onEvent={(eventName, options) => onEvent(this, eventName, options, 'view')}
+                                  mode="view"
+                                  deviceWindowWidth={deviceWindowWidth}
+                                  selectedComponent={this.state.selectedComponent}
+                                  onComponentClick={(id, component) => {
+                                    this.setState({
+                                      selectedComponent: { id, component },
+                                    });
+                                    onComponentClick(this, id, component, 'view');
+                                  }}
+                                  onComponentOptionChanged={(component, optionName, value) => {
+                                    return onComponentOptionChanged(this, component, optionName, value);
+                                  }}
+                                  onComponentOptionsChanged={(component, options) =>
+                                    onComponentOptionsChanged(this, component, options)
+                                  }
+                                  canvasWidth={this.getCanvasWidth()}
+                                  dataQueries={dataQueries}
+                                  currentPageId={this.state.currentPageId}
+                                />
+                              )}
+                            </>
+                          )}
+                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/Editor/Viewer/Confirm.jsx b/frontend/src/Editor/Viewer/Confirm.jsx
index 5e35f3ee17..2459d471c4 100644
--- a/frontend/src/Editor/Viewer/Confirm.jsx
+++ b/frontend/src/Editor/Viewer/Confirm.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Modal from 'react-bootstrap/Modal';
 import { useTranslation } from 'react-i18next';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export function Confirm({
   show,
@@ -43,27 +44,21 @@ export function Confirm({
       onHide={handleClose}
       size="sm"
       centered={true}
-      contentClassName={darkMode ? 'theme-dark' : ''}
+      contentClassName={darkMode ? 'dark-theme' : ''}
     >
       {title && (
         <Modal.Header>
           <Modal.Title>{title}</Modal.Title>
-          <svg
-            onClick={handleClose}
-            className="cursor-pointer"
-            width="33"
-            height="33"
-            viewBox="0 0 33 33"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M11.5996 11.6201C11.8599 11.3597 12.282 11.3597 12.5424 11.6201L16.071 15.1487L19.5996 11.6201C19.8599 11.3597 20.282 11.3597 20.5424 11.6201C20.8027 11.8804 20.8027 12.3025 20.5424 12.5629L17.0138 16.0915L20.5424 19.6201C20.8027 19.8804 20.8027 20.3025 20.5424 20.5629C20.282 20.8232 19.8599 20.8232 19.5996 20.5629L16.071 17.0343L12.5424 20.5629C12.282 20.8232 11.8599 20.8232 11.5996 20.5629C11.3392 20.3025 11.3392 19.8804 11.5996 19.6201L15.1282 16.0915L11.5996 12.5629C11.3392 12.3025 11.3392 11.8804 11.5996 11.6201Z"
-              fill="#11181C"
+          <span onClick={handleClose}>
+            <SolidIcon
+              data-tooltip-id="tooltip-for-copy-invitation-link"
+              data-tooltip-content="Copy invitation link"
+              width="16"
+              fill={'var(--slate12)'}
+              name="remove"
+              className="cursor-pointer"
             />
-          </svg>
+          </span>
         </Modal.Header>
       )}
       <Modal.Body data-cy={'modal-message'}>{message}</Modal.Body>
diff --git a/frontend/src/Editor/Viewer/Header.jsx b/frontend/src/Editor/Viewer/Header.jsx
index 5163e1e029..0631ead23b 100644
--- a/frontend/src/Editor/Viewer/Header.jsx
+++ b/frontend/src/Editor/Viewer/Header.jsx
@@ -8,7 +8,7 @@ const Header = ({ children, className }) => {
       }}
       className={`header ${className}`}
     >
-      <header className="navbar navbar-expand-md navbar-light d-print-none">
+      <header className="navbar navbar-expand-md d-print-none">
         <div className="container-xl header-container position-relative">{children}</div>
       </header>
     </div>
diff --git a/frontend/src/Editor/Viewer/ViewerNavigation.jsx b/frontend/src/Editor/Viewer/ViewerNavigation.jsx
index 858fcd839d..6e3241779c 100644
--- a/frontend/src/Editor/Viewer/ViewerNavigation.jsx
+++ b/frontend/src/Editor/Viewer/ViewerNavigation.jsx
@@ -14,25 +14,23 @@ export const ViewerNavigation = ({ isMobileDevice, pages, currentPageId, switchP
   if (isMobileDevice) {
     return null;
   }
-
   return (
     <div
-      className={`navigation-area ${darkMode && 'dark'}`}
+      className={`navigation-area`}
       style={{
         width: 200,
         // backgroundColor: canvasBackgroundColor,
       }}
     >
       <div className="page-handler-wrapper">
-        {pages.map(
-          ([id, page]) =>
-            !page.hidden && (
-              <FolderList key={page.handle} onClick={() => switchPage(id)} selectedItem={id === currentPageId}>
-                <span data-cy={`pages-name-${String(page.name).toLowerCase()}`} className="mx-3 text-wrap">
-                  {_.truncate(page.name, { length: 18 })}
-                </span>
-              </FolderList>
-            )
+        {pages.map(([id, page]) =>
+          page.hidden || page.disabled ? null : (
+            <FolderList key={page.handle} onClick={() => switchPage(id)} selectedItem={id === currentPageId}>
+              <span data-cy={`pages-name-${String(page.name).toLowerCase()}`} className="mx-3 text-wrap">
+                {_.truncate(page.name, { length: 18 })}
+              </span>
+            </FolderList>
+          )
         )}
       </div>
     </div>
@@ -120,21 +118,20 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
 
         <div className="p-2 w-100">
           <div className={`pages-container ${darkMode && 'dark'}`}>
-            {pages.map(
-              ([id, page]) =>
-                !page.hidden && (
-                  <div
-                    key={page.handle}
-                    onClick={() => handlepageSwitch(id)}
-                    className={`viewer-page-handler mb-2 cursor-pointer ${darkMode && 'dark'}`}
-                  >
-                    <div className={`card mb-1  ${id === currentPageId ? 'active' : ''}`}>
-                      <div className="card-body">
-                        <span className="mx-3">{_.truncate(page.name, { length: 22 })}</span>
-                      </div>
+            {pages.map(([id, page]) =>
+              page.hidden || page.disabled ? null : (
+                <div
+                  key={page.handle}
+                  onClick={() => handlepageSwitch(id)}
+                  className={`viewer-page-handler mb-2 cursor-pointer ${darkMode && 'dark'}`}
+                >
+                  <div className={`card mb-1  ${id === currentPageId ? 'active' : ''}`}>
+                    <div className="card-body">
+                      <span className="mx-3">{_.truncate(page.name, { length: 22 })}</span>
                     </div>
                   </div>
-                )
+                </div>
+              )
             )}
           </div>
         </div>
@@ -158,7 +155,7 @@ const ViewerHeader = ({ showHeader, appName, changeDarkMode, darkMode, pages, cu
   return (
     <Header
       styles={{
-        height: '45px',
+        height: '48px',
       }}
     >
       {showHeader && (
diff --git a/frontend/src/Editor/WidgetManager.jsx b/frontend/src/Editor/WidgetManager.jsx
index 1a0a1d99b6..5a488c7b54 100644
--- a/frontend/src/Editor/WidgetManager.jsx
+++ b/frontend/src/Editor/WidgetManager.jsx
@@ -5,6 +5,7 @@ import { isEmpty } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
+import { SearchBox } from '@/_components';
 
 export const WidgetManager = function WidgetManager({ componentTypes, zoomLevel, darkMode }) {
   const [filteredComponents, setFilteredComponents] = useState(componentTypes);
@@ -41,10 +42,12 @@ export const WidgetManager = function WidgetManager({ componentTypes, zoomLevel,
   function renderList(header, items) {
     if (isEmpty(items)) return null;
     return (
-      <>
-        <span className="m-1 widget-header">{header}</span>
-        {items.map((component, i) => renderComponentCard(component, i))}
-      </>
+      <div className="component-card-group-container">
+        <span className="widget-header">{header}</span>
+        <div className="component-card-group-wrapper">
+          {items.map((component, i) => renderComponentCard(component, i))}
+        </div>
+      </div>
     );
   }
 
@@ -52,9 +55,6 @@ export const WidgetManager = function WidgetManager({ componentTypes, zoomLevel,
     if (filteredComponents.length === 0) {
       return (
         <div className="empty">
-          {/* <div class="empty-img">
-            <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" alt="" />
-          </div> */}
           <p className="empty-title">{t('widgetManager.noResults', 'No results found')}</p>
           <p className={`empty-subtitle ${darkMode ? 'text-white-50' : 'text-secondary'}`}>
             {t(
@@ -63,7 +63,7 @@ export const WidgetManager = function WidgetManager({ componentTypes, zoomLevel,
             )}
           </p>
           <button
-            className="btn btn-sm btn-outline-azure mt-3"
+            className=" btn-sm tj-tertiary-btn mt-3"
             onClick={() => {
               setFilteredComponents(componentTypes);
               setSearchQuery('');
@@ -126,15 +126,21 @@ export const WidgetManager = function WidgetManager({ componentTypes, zoomLevel,
   }
 
   return (
-    <div className={`components-container mx-3 ${isVersionReleased && 'disabled'}`}>
-      <div className="input-icon">
-        <input
-          type="text"
-          className={`form-control mt-3 mb-2 ${darkMode && 'dark-theme-placeholder'}`}
-          placeholder={t('globals.search', 'Search') + '...'}
-          value={searchQuery}
-          onChange={(e) => handleSearchQueryChange(e)}
-          data-cy="widget-search-box"
+    <div className={`components-container ${isVersionReleased && 'disabled'}`}>
+      <p className="widgets-manager-header">Components</p>
+      <div className="input-icon tj-app-input">
+        <SearchBox
+          dataCy={`widget-search-box`}
+          initialValue={''}
+          callBack={(e) => handleSearchQueryChange(e)}
+          onClearCallback={() => {
+            setSearchQuery('');
+            filterComponents('');
+          }}
+          placeholder={t('globals.searchComponents', 'Search widgets')}
+          customClass={`tj-widgets-search-input  tj-text-xsm`}
+          showClearButton={false}
+          width={266}
         />
       </div>
       <div className="widgets-list col-sm-12 col-lg-12 row">{segregateSections()}</div>
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 4af2ccd364..7d24e97981 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -152,13 +152,7 @@ export const widgets = [
           schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
         },
       },
-      serverSidePagination: {
-        type: 'toggle',
-        displayName: 'Server-side pagination',
-        validation: {
-          schema: { type: 'boolean' },
-        },
-      },
+
       enableNextButton: {
         type: 'toggle',
         displayName: 'Enable next page button',
@@ -168,7 +162,7 @@ export const widgets = [
       },
       enabledSort: {
         type: 'toggle',
-        displayName: 'Enable sorting',
+        displayName: 'Enable column sorting',
         validation: {
           schema: { type: 'boolean' },
         },
@@ -194,33 +188,67 @@ export const widgets = [
           schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
         },
       },
-      clientSidePagination: {
+      // clientSidePagination: {
+      //   type: 'toggle',
+      //   displayName: 'Enable pagination',
+      //   validation: {
+      //     schema: { type: 'boolean' },
+      //   },
+      // },
+      enablePagination: {
         type: 'toggle',
-        displayName: 'Client-side pagination',
+        displayName: 'Enable pagination',
         validation: {
           schema: { type: 'boolean' },
         },
       },
+      serverSidePagination: {
+        type: 'clientServerSwitch',
+        displayName: 'Type',
+        validation: {
+          schema: { type: 'boolean' },
+        },
+        options: [
+          { displayName: 'Client side', value: 'clientSide' },
+          { displayName: 'Server side', value: 'serverSide' },
+        ],
+        // defaultValue: 'clientSide',
+      },
       serverSideSearch: {
-        type: 'toggle',
-        displayName: 'Server-side search',
+        type: 'clientServerSwitch',
+        displayName: 'Type',
+        options: [
+          { displayName: 'Client side', value: 'clientSide' },
+          { displayName: 'Server side', value: 'serverSide' },
+        ],
+        // defaultValue: 'clientSide',
         validation: {
           schema: { type: 'boolean' },
         },
       },
       serverSideSort: {
-        type: 'toggle',
-        displayName: 'Server-side sort',
+        type: 'clientServerSwitch',
+        displayName: 'Type',
         validation: {
           schema: { type: 'boolean' },
         },
+        options: [
+          { displayName: 'Client side', value: 'clientSide' },
+          { displayName: 'Server side', value: 'serverSide' },
+        ],
+        // defaultValue: 'clientSide',
       },
       serverSideFilter: {
-        type: 'toggle',
-        displayName: 'Server-side filter',
+        type: 'clientServerSwitch',
+        displayName: 'Type',
         validation: {
           schema: { type: 'boolean' },
         },
+        options: [
+          { displayName: 'Client side', value: 'clientSide' },
+          { displayName: 'Server side', value: 'serverSide' },
+        ],
+        defaultValue: 'clientSide',
       },
       actionButtonBackgroundColor: {
         type: 'color',
@@ -238,7 +266,7 @@ export const widgets = [
       },
       displaySearchBox: {
         type: 'toggle',
-        displayName: 'Show search box',
+        displayName: 'Show search',
         validation: {
           schema: { type: 'boolean' },
         },
@@ -252,7 +280,7 @@ export const widgets = [
       },
       showFilterButton: {
         type: 'toggle',
-        displayName: 'Show filter button',
+        displayName: 'Enable filtering',
         validation: {
           schema: { type: 'boolean' },
         },
@@ -308,8 +336,8 @@ export const widgets = [
       showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
     },
     defaultSize: {
-      width: 20,
-      height: 358,
+      width: 28.86,
+      height: 456,
     },
     events: {
       onRowHovered: { displayName: 'Row hovered' },
@@ -343,10 +371,8 @@ export const widgets = [
         displayName: 'Table type',
         options: [
           { name: 'Bordered', value: 'table-bordered' },
-          { name: 'Borderless', value: 'table-borderless' },
-          { name: 'Classic', value: 'table-classic' },
+          { name: 'Regular', value: 'table-classic' },
           { name: 'Striped', value: 'table-striped' },
-          { name: 'Striped & bordered', value: 'table-striped table-bordered' },
         ],
         validation: {
           schema: { type: 'string' },
@@ -356,8 +382,8 @@ export const widgets = [
         type: 'select',
         displayName: 'Cell size',
         options: [
-          { name: 'Compact', value: 'compact' },
-          { name: 'Spacious', value: 'spacious' },
+          { name: 'Condensed', value: 'condensed' },
+          { name: 'Regular', value: 'regular' },
         ],
         validation: {
           schema: { type: 'string' },
@@ -466,7 +492,7 @@ export const widgets = [
         enableNextButton: { value: '{{true}}' },
         enablePrevButton: { value: '{{true}}' },
         totalRecords: { value: '' },
-        clientSidePagination: { value: '{{true}}' },
+        enablePagination: { value: '{{true}}' },
         serverSideSort: { value: '{{false}}' },
         serverSideFilter: { value: '{{false}}' },
         displaySearchBox: { value: '{{true}}' },
@@ -509,9 +535,9 @@ export const widgets = [
         actionButtonRadius: { value: '0' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
-        cellSize: { value: 'compact' },
+        cellSize: { value: 'regular' },
         borderRadius: { value: '0' },
-        tableType: { value: 'table-bordered' },
+        tableType: { value: 'table-classic' },
       },
     },
   },
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 93a8f85047..e56cb67396 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -526,7 +526,6 @@ class HomePageComponent extends React.Component {
                     value={appOperations?.selectedFolder}
                     placeholder={this.props.t('homePage.appCard.selectFolder', 'Select folder')}
                     closeMenuOnSelect={true}
-                    customWrap={true}
                   />
                 </div>
               </div>
diff --git a/frontend/src/ManageOrgVars/VariableForm.jsx b/frontend/src/ManageOrgVars/VariableForm.jsx
index d47734f8cf..e295c82242 100644
--- a/frontend/src/ManageOrgVars/VariableForm.jsx
+++ b/frontend/src/ManageOrgVars/VariableForm.jsx
@@ -89,7 +89,6 @@ class VariableForm extends React.Component {
                       value={this.props.fields['variable_type'] ?? 'client'}
                       onChange={(value) => this.props.handleVariableTypeSelect(value)}
                       useMenuPortal={false}
-                      customWrap={true}
                     />
                   )}
                 </div>
diff --git a/frontend/src/ToolJetUI/Buttons/AddNewButton/AddNewButton.jsx b/frontend/src/ToolJetUI/Buttons/AddNewButton/AddNewButton.jsx
new file mode 100644
index 0000000000..bbbdfbdb88
--- /dev/null
+++ b/frontend/src/ToolJetUI/Buttons/AddNewButton/AddNewButton.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import './addNewButton.scss';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+
+const AddNewButton = ({ children, dataCy, onClick, className = '' }) => {
+  return (
+    <ButtonSolid
+      variant="secondary"
+      size="md"
+      className={`add-new-btn ${className}`}
+      onClick={onClick}
+      data-cy={dataCy}
+      leftIcon="plusrectangle"
+      fill={'var(--indigo9)'}
+      iconWidth={16}
+    >
+      {children}
+    </ButtonSolid>
+  );
+};
+
+export default AddNewButton;
diff --git a/frontend/src/ToolJetUI/Buttons/AddNewButton/addNewButton.scss b/frontend/src/ToolJetUI/Buttons/AddNewButton/addNewButton.scss
new file mode 100644
index 0000000000..ab2eb1ab93
--- /dev/null
+++ b/frontend/src/ToolJetUI/Buttons/AddNewButton/addNewButton.scss
@@ -0,0 +1,7 @@
+  .add-new-btn {
+    padding: 6px 16px;       
+    width: 100%;
+    font-weight: 500;
+  }
+
+   
\ No newline at end of file
diff --git a/frontend/src/ToolJetUI/List/List.jsx b/frontend/src/ToolJetUI/List/List.jsx
new file mode 100644
index 0000000000..2579c50bd9
--- /dev/null
+++ b/frontend/src/ToolJetUI/List/List.jsx
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import './list.scss';
+import ListGroup from 'react-bootstrap/ListGroup';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+import Trash from '@/_ui/Icon/solidIcons/Trash';
+import classNames from 'classnames';
+import Edit from '@/_ui/Icon/bulkIcons/Edit';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import MoreVertical from '@/_ui/Icon/solidIcons/MoreVertical';
+import SortableList from '@/_components/SortableList';
+function List({ children, ...restProps }) {
+  return <ListGroup {...restProps}>{children}</ListGroup>;
+}
+
+function ListItem({
+  primaryText = '',
+  secondaryText = '',
+  Icon,
+  darkMode,
+  enableActionsMenu,
+  menuActions = [],
+  onMenuOptionClick,
+  isEditable,
+  isDraggable,
+  ...restProps
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showActionsMenu, setShowActionsMenu] = useState(false);
+
+  return (
+    <div>
+      <ListGroup.Item
+        style={{ marginBottom: '8px', backgroundColor: 'var(--slate3)' }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        {...restProps}
+      >
+        <div className="row">
+          {(Icon || isDraggable) && (
+            <div className="col-auto d-flex align-items-center">
+              {!isHovered && Icon && <Icon />}
+              <SortableList.DragHandle show={isDraggable} />
+            </div>
+          )}
+          <div
+            className="col text-truncate cursor-pointer"
+            data-cy={`pages-name-${String(primaryText).toLowerCase()}`}
+            style={Icon ? { paddingLeft: '0px' } : { paddingLeft: '8px' }}
+          >
+            {primaryText}
+            <span className="list-item-secondary-text">{secondaryText}</span>
+            {isEditable && (
+              <span style={{ marginLeft: '8px' }}>
+                <Edit width={16} />
+              </span>
+            )}
+          </div>
+          <div className="col-auto">
+            <OverlayTrigger
+              trigger={'click'}
+              placement={'bottom-end'}
+              rootClose={true}
+              show={showActionsMenu}
+              onToggle={(show) => setShowActionsMenu(show)}
+              overlay={
+                <Popover id="list-menu" className={darkMode && 'dark-theme'}>
+                  <Popover.Body bsPrefix="list-item-popover-body" className={`list-item-popover-body`}>
+                    {menuActions.map((action) => (
+                      <div
+                        className="list-item-popover-option"
+                        key={action.label}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onMenuOptionClick(primaryText, action.label);
+                        }}
+                      >
+                        <div className="list-item-popover-menu-option-icon">
+                          {action.label === 'Delete' ? <Trash fill={'#E54D2E'} width={16} /> : action.icon}
+                        </div>
+                        <div
+                          className={classNames('list-item-option-menu-label', {
+                            'color-tomato9': action.label === 'Delete',
+                          })}
+                        >
+                          {action.label}
+                        </div>
+                      </div>
+                    ))}
+                  </Popover.Body>
+                </Popover>
+              }
+            >
+              <span
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setShowActionsMenu(true);
+                }}
+              >
+                {enableActionsMenu && isHovered && (
+                  <ButtonSolid
+                    variant="tertiary"
+                    size="xs"
+                    className={'list-menu-option-btn'}
+                    // data-cy={'page-menu'}
+                  >
+                    <span>
+                      <MoreVertical fill={'var(--slate12)'} width={'20'} />
+                    </span>
+                  </ButtonSolid>
+                )}
+              </span>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </ListGroup.Item>
+    </div>
+  );
+}
+
+List.Item = ListItem;
+
+export default List;
diff --git a/frontend/src/ToolJetUI/List/List.stories.jsx b/frontend/src/ToolJetUI/List/List.stories.jsx
new file mode 100644
index 0000000000..fc1f65c719
--- /dev/null
+++ b/frontend/src/ToolJetUI/List/List.stories.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import List from './List';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'List',
+  component: List,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  //   tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const WithIcon = {
+  render: (args) => (
+    <List>
+      <List.Item>Client side</List.Item>
+      <List.Item active>Server side</List.Item>
+      <List.Item>Client side</List.Item>
+      <List.Item disabled>Server side</List.Item>
+      <List.Item>Client side</List.Item>
+      <List.Item>Server side</List.Item>
+      <List.Item>Client side</List.Item>
+      <List.Item>Server side</List.Item>
+    </List>
+  ),
+};
+
+export const WithIconAndEdit = {
+  render: (args) => (
+    <ListGroup>
+      <ListGroup.Item>Cras justo odio</ListGroup.Item>
+      <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+      <ListGroup.Item>Morbi leo risus</ListGroup.Item>
+      <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
+      <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
+    </ListGroup>
+  ),
+};
diff --git a/frontend/src/ToolJetUI/List/list.scss b/frontend/src/ToolJetUI/List/list.scss
new file mode 100644
index 0000000000..3253fb8b10
--- /dev/null
+++ b/frontend/src/ToolJetUI/List/list.scss
@@ -0,0 +1,82 @@
+.list-group-item {
+  font-size: 12px;
+  line-height: 20px;
+  padding: 6px 8px !important;
+  color: var(--slate12) !important;
+  border: unset !important;
+  border-radius: 6px !important;
+
+  .DragHandle {
+    margin-top: 1px !important;
+  }
+
+  .list-item-secondary-text {
+    margin-left: 8px;
+    color: var(--slate9)
+  }
+}
+
+.list-group-item:hover {
+  background-color: var(--slate4) !important;
+}
+
+.list-group-item:disabled {
+  color: var(--slate9) !important;
+}
+
+.list-group-item:focus {
+  background-color: unset !important;
+}
+
+button:focus:not(:focus-visible) {
+  // outline: unset !important;
+  outline: 1px solid rgba(255, 255, 255, 0.00) !important;
+}
+
+.list-group-item:focus-visible {
+  border-radius: 6px !important;
+  border: 1px solid var(--bases-transparent, rgba(255, 255, 255, 0.00)) !important;
+  /* Focus rings/Gray/light */
+  box-shadow: 0px 0px 0px 4px #DFE3E6;
+  outline-color: rgba(255, 255, 255, 0.00) !important;
+}
+
+.list-group-item.active {
+  background-color: var(--slate5) !important;
+  color: var(--slate12) !important
+}
+
+.list-item-popover-body {
+  padding: 4px;
+  min-width: 10.625rem; // 170px
+  color: var(--slate12);
+  border-radius: 6px;
+  background-color: var(--base);
+
+
+  .list-item-popover-option {
+    padding: 10px 14px;
+    cursor: pointer;
+    display: flex;
+
+    &:hover {
+      background-color: var(--slate3);
+      border-radius: 6px;
+    }
+
+    .list-item-option-menu-label {
+      margin-top: 2px;
+      margin-left: 6px
+    }
+
+    .color-tomato9 {
+      color: var(--tomato9)
+    }
+  }
+}
+
+.list-menu-option-btn {
+  padding: 0px !important;
+  background-color: var(--base);
+  border: 1px solid transparent;
+}
\ No newline at end of file
diff --git a/frontend/src/ToolJetUI/SwitchGroup/ToggleGroup.jsx b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroup.jsx
new file mode 100644
index 0000000000..ce34941635
--- /dev/null
+++ b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroup.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import './toggleGroup.scss';
+// eslint-disable-next-line import/no-unresolved
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+
+const ToggleGroup1 = ({ children, className, onValueChange, defaultValue, ...restProps }) => {
+  const [value, setValue] = React.useState(defaultValue);
+  return (
+    <ToggleGroup.Root
+      className={`ToggleGroup ${className}`}
+      type="single"
+      defaultValue={defaultValue}
+      onValueChange={(value) => {
+        if (value) {
+          setValue(value);
+          onValueChange(value);
+        }
+      }}
+      {...restProps}
+      value={value}
+    >
+      {children}
+    </ToggleGroup.Root>
+  );
+};
+
+export default ToggleGroup1;
+
+// Read about props https://www.radix-ui.com/primitives/docs/components/toggle-group
diff --git a/frontend/src/ToolJetUI/SwitchGroup/ToggleGroup.stories.jsx b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroup.stories.jsx
new file mode 100644
index 0000000000..f7df1383db
--- /dev/null
+++ b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroup.stories.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import ToggleGroup from './ToggleGroup';
+import Button from 'react-bootstrap/Button';
+import ToggleGroupItem from './ToggleGroupItem';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'ToggleGroup',
+  component: ToggleGroup,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  //   tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const ClientServerToggle = {
+  render: (args) => (
+    <ToggleGroup>
+      <ToggleGroupItem value="left">Client side</ToggleGroupItem>
+      <ToggleGroupItem value="center">Server side</ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Default = {
+  render: (args) => (
+    <ToggleGroup>
+      <ToggleGroupItem value="left">Left</ToggleGroupItem>
+      <ToggleGroupItem value="center">Middle</ToggleGroupItem>
+      <ToggleGroupItem value="right">Right</ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
diff --git a/frontend/src/ToolJetUI/SwitchGroup/ToggleGroupItem.jsx b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroupItem.jsx
new file mode 100644
index 0000000000..af44fbb0ae
--- /dev/null
+++ b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroupItem.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+// eslint-disable-next-line import/no-unresolved
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+
+const ToggleGroupItem = ({ children, value, ...restProps }) => {
+  return (
+    <ToggleGroup.Item className="ToggleGroupItem" value={value} {...restProps}>
+      <div className="toggle-item">{children}</div>
+    </ToggleGroup.Item>
+  );
+};
+
+export default ToggleGroupItem;
diff --git a/frontend/src/ToolJetUI/SwitchGroup/toggleGroup.scss b/frontend/src/ToolJetUI/SwitchGroup/toggleGroup.scss
new file mode 100644
index 0000000000..c2256dff4a
--- /dev/null
+++ b/frontend/src/ToolJetUI/SwitchGroup/toggleGroup.scss
@@ -0,0 +1,42 @@
+.ToggleGroup {
+  display: inline-flex;
+  background-color:  var(--slate4);
+  border-radius: 6px;
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.ToggleGroupItem {
+  all: unset;
+  background-color:  var(--slate4);
+  color: var(--slate9);
+  min-height: 28px;
+  display: flex;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: 6px;
+}
+.ToggleGroupItem:first-child {
+  margin-left: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.ToggleGroupItem:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.ToggleGroupItem[data-state='on'] {
+  padding: 2px 2px;
+  .toggle-item {
+    background-color: var(--slate1);
+    color: var(--indigo9);
+    border-radius: 6px;
+    padding: 4px;
+  }
+}
+.ToggleGroupItem:focus {
+  position: relative;
+}
\ No newline at end of file
diff --git a/frontend/src/ToolJetUI/Tabs/Tab.jsx b/frontend/src/ToolJetUI/Tabs/Tab.jsx
new file mode 100644
index 0000000000..c8356bb4b8
--- /dev/null
+++ b/frontend/src/ToolJetUI/Tabs/Tab.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import BootstrapTab from 'react-bootstrap/Tab';
+import cx from 'classnames';
+import './tabs.scss';
+
+const Tab = ({ darkMode, eventKey, title, className, children, ...restProps }) => {
+  return (
+    <BootstrapTab
+      eventKey={eventKey}
+      title={title}
+      className={cx(className, {
+        'theme-dark dark-theme': darkMode,
+      })}
+      {...restProps}
+    >
+      {children}
+    </BootstrapTab>
+  );
+};
+
+export default Tab;
diff --git a/frontend/src/ToolJetUI/Tabs/Tabs.jsx b/frontend/src/ToolJetUI/Tabs/Tabs.jsx
new file mode 100644
index 0000000000..5a94c601f0
--- /dev/null
+++ b/frontend/src/ToolJetUI/Tabs/Tabs.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import BootstrapTabs from 'react-bootstrap/Tabs';
+import cx from 'classnames';
+import './tabs.scss';
+
+const Tabs = ({ darkMode, defaultActiveKey, id, className, children, ...restProps }) => {
+  return (
+    <div className="tj-tabs">
+      <BootstrapTabs
+        defaultActiveKey={defaultActiveKey}
+        id={id}
+        className={cx(className, {
+          'theme-dark dark-theme': darkMode,
+        })}
+        justify
+        {...restProps}
+      >
+        {children}
+      </BootstrapTabs>
+    </div>
+  );
+};
+
+export default Tabs;
diff --git a/frontend/src/ToolJetUI/Tabs/Tabs.stories.jsx b/frontend/src/ToolJetUI/Tabs/Tabs.stories.jsx
new file mode 100644
index 0000000000..8f100b954a
--- /dev/null
+++ b/frontend/src/ToolJetUI/Tabs/Tabs.stories.jsx
@@ -0,0 +1,45 @@
+import { Tabs } from './Tabs';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Tabs',
+  component: Tabs,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/frontend/src/ToolJetUI/Tabs/tabs.scss b/frontend/src/ToolJetUI/Tabs/tabs.scss
new file mode 100644
index 0000000000..2418083d17
--- /dev/null
+++ b/frontend/src/ToolJetUI/Tabs/tabs.scss
@@ -0,0 +1,23 @@
+
+.tj-tabs {
+  .nav-tabs {
+    border-bottom: 0px !important;
+  }
+
+  .nav-item {
+    font-size: 12px !important;
+    line-height: 20px !important;
+  }
+
+  .nav-item .nav-link {
+    color: var(--slate11) !important;
+    background-color: var(--base) !important;
+  }
+
+  .nav-tabs .nav-link.active {
+    border-radius: 0 !important;
+    border-width: 2px !important;
+    color: var(--indigo9) !important;
+  }
+}
+
diff --git a/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx b/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
index 8198bce1d1..ec943978b4 100644
--- a/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
+++ b/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
@@ -86,7 +86,6 @@ const ColumnForm = ({ onCreate, onClose }) => {
             value={dataType}
             options={dataTypes}
             onChange={handleTypeChange}
-            customWrap={true}
           />
         </div>
         <div className="mb-3 tj-app-input">
diff --git a/frontend/src/TooljetDatabase/Forms/EditRowForm.jsx b/frontend/src/TooljetDatabase/Forms/EditRowForm.jsx
index c5898fc1c4..ec9583d25f 100644
--- a/frontend/src/TooljetDatabase/Forms/EditRowForm.jsx
+++ b/frontend/src/TooljetDatabase/Forms/EditRowForm.jsx
@@ -90,7 +90,6 @@ const EditRowForm = ({ onEdit, onClose }) => {
                 value={selectedRow}
                 options={options}
                 onChange={handleOnSelect}
-                customWrap={true}
               />
             </div>
           </div>
diff --git a/frontend/src/TooljetDatabase/Forms/FilterForm.jsx b/frontend/src/TooljetDatabase/Forms/FilterForm.jsx
index d38834cc09..e68acb1b33 100644
--- a/frontend/src/TooljetDatabase/Forms/FilterForm.jsx
+++ b/frontend/src/TooljetDatabase/Forms/FilterForm.jsx
@@ -57,7 +57,6 @@ export const FilterForm = ({ filters, setFilters, index, column = '', operator =
               value={column}
               options={displayColumns}
               onChange={handleColumnChange}
-              customWrap={true}
             />
           </div>
           <div className="col-4 select-operation-field" data-cy="select-operation-field">
@@ -67,7 +66,6 @@ export const FilterForm = ({ filters, setFilters, index, column = '', operator =
               value={operator}
               options={operators}
               onChange={handleOperatorChange}
-              customWrap={true}
             />
           </div>
           <div className="col-4">
diff --git a/frontend/src/TooljetDatabase/Forms/SortForm.jsx b/frontend/src/TooljetDatabase/Forms/SortForm.jsx
index b7ee126ce6..88ec095532 100644
--- a/frontend/src/TooljetDatabase/Forms/SortForm.jsx
+++ b/frontend/src/TooljetDatabase/Forms/SortForm.jsx
@@ -45,7 +45,6 @@ export const SortForm = ({ filters, setFilters, index, column = '', order = '' }
           value={column}
           options={displayColumns}
           onChange={handleColumnChange}
-          customWrap={true}
         />
       </div>
       <div className="col-4 py-3 select-order-field" data-cy="select-order-field">
@@ -55,7 +54,6 @@ export const SortForm = ({ filters, setFilters, index, column = '', order = '' }
           placeholder="Select order"
           options={orders}
           onChange={handleFilterChange}
-          customWrap={true}
         />
       </div>
       <div className="col-1 py-3 cursor-pointer" data-cy="delete-icon" onClick={() => handleDelete()}>
diff --git a/frontend/src/TooljetDatabase/Table/Footer.jsx b/frontend/src/TooljetDatabase/Table/Footer.jsx
index 471686a8d5..99c7956924 100644
--- a/frontend/src/TooljetDatabase/Table/Footer.jsx
+++ b/frontend/src/TooljetDatabase/Table/Footer.jsx
@@ -104,7 +104,6 @@ const Footer = ({ darkMode, openCreateRowDrawer, dataLoading, tableDataLength })
             <div className="col mx-2 records-dropdown-field" data-cy="records-dropdown-field">
               <Select
                 isLoading={dataLoading}
-                customWrap={true}
                 options={selectOptions}
                 value={selectOptions.find((option) => option.value === pageSize)}
                 search={false}
diff --git a/frontend/src/TooljetDatabase/TableListItem/ActionsPopover/index.jsx b/frontend/src/TooljetDatabase/TableListItem/ActionsPopover/index.jsx
index a817c86a37..b5c6228553 100644
--- a/frontend/src/TooljetDatabase/TableListItem/ActionsPopover/index.jsx
+++ b/frontend/src/TooljetDatabase/TableListItem/ActionsPopover/index.jsx
@@ -12,7 +12,7 @@ export const ListItemPopover = ({ onEdit, onDelete, darkMode }) => {
 
   const popover = (
     <Popover id="popover-contained" className={`table-list-items ${darkMode && 'dark-theme'}`}>
-      <Popover.Body className={`${darkMode && 'theme-dark'}`}>
+      <Popover.Body className={`${darkMode && 'dark-theme'}`}>
         <div className={`row cursor-pointer`}>
           <div className="col-auto" data-cy="edit-option-icon">
             <EditIcon />
diff --git a/frontend/src/_components/CopyToClipboard/CopyToClipboard.jsx b/frontend/src/_components/CopyToClipboard/CopyToClipboard.jsx
index c911f21764..52fe9df180 100644
--- a/frontend/src/_components/CopyToClipboard/CopyToClipboard.jsx
+++ b/frontend/src/_components/CopyToClipboard/CopyToClipboard.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { toast } from 'react-hot-toast';
 import { ToolTip } from '@/_components/ToolTip';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export const CopyToClipboardComponent = ({ data, callback }) => {
   const [copied, setCopied] = React.useState(false);
@@ -18,7 +19,7 @@ export const CopyToClipboardComponent = ({ data, callback }) => {
   }, [copied]);
 
   if (copied) {
-    return <center>Copied</center>;
+    return <center className="color-slate12">Copied</center>;
   }
 
   return (
@@ -31,7 +32,7 @@ export const CopyToClipboardComponent = ({ data, callback }) => {
         }}
       >
         <span style={{ height: '13px', width: '13px', marginBottom: '2px' }} className="mx-1 copy-to-clipboard">
-          <img src={`assets/images/icons/copy.svg`} width="12" height="12" />
+          <SolidIcon width="12" height="12" name="copy" />
         </span>
       </CopyToClipboard>
     </ToolTip>
diff --git a/frontend/src/_components/DarkModeToggle.jsx b/frontend/src/_components/DarkModeToggle.jsx
index 3849f3b52b..d797fa7a17 100644
--- a/frontend/src/_components/DarkModeToggle.jsx
+++ b/frontend/src/_components/DarkModeToggle.jsx
@@ -59,22 +59,25 @@ export const DarkModeToggle = function DarkModeToggle({
         </Tooltip>
       }
     >
-      <div className="unstyled-button dark-theme-toggle-btn" onClick={toggleDarkMode}>
+      <div
+        className="unstyled-button dark-theme-toggle-btn  sidebar-svg-icon  left-sidebar-item "
+        onClick={toggleDarkMode}
+      >
         <animated.svg
           xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
+          width="20"
+          height="20"
           viewBox="0 0 24 24"
           fill="none"
-          color={darkMode ? '#fff' : '#808080'}
+          color={'var(--slate8)'}
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
           stroke="currentColor"
           style={{
             cursor: 'pointer',
-            opacity: 0.6,
             ...svgContainerProps,
+            transform: 'rotate(315deg)',
           }}
         >
           <mask id="myMask2">
@@ -82,13 +85,7 @@ export const DarkModeToggle = function DarkModeToggle({
             <animated.circle style={maskedCircleProps} r="9" fill="black" />
           </mask>
 
-          <animated.circle
-            cx="12"
-            cy="12"
-            style={centerCircleProps}
-            fill={darkMode ? 'white' : '#808080'}
-            mask="url(#myMask2)"
-          />
+          <animated.circle cx="12" cy="12" style={centerCircleProps} fill={'var(--slate8)'} mask="url(#myMask2)" />
           <animated.g stroke="currentColor" style={linesProps}>
             <line x1="12" y1="1" x2="12" y2="3" />
             <line x1="12" y1="21" x2="12" y2="23" />
diff --git a/frontend/src/_components/DynamicForm.jsx b/frontend/src/_components/DynamicForm.jsx
index 75243f5c30..521071370a 100644
--- a/frontend/src/_components/DynamicForm.jsx
+++ b/frontend/src/_components/DynamicForm.jsx
@@ -446,7 +446,7 @@ const DynamicForm = ({
                   {...getElementProps(obj[key])}
                   {...computedProps[key]}
                   data-cy={`${String(label).toLocaleLowerCase().replace(/\s+/g, '-')}-text-field`}
-                  customWrap={true} //to be removed after whole ui is same
+                  //to be removed after whole ui is same
                   isHorizontalLayout={isHorizontalLayout}
                 />
               </div>
diff --git a/frontend/src/_components/MultiSelectUser.jsx b/frontend/src/_components/MultiSelectUser.jsx
index b3007f63a3..4fc5e73f2f 100644
--- a/frontend/src/_components/MultiSelectUser.jsx
+++ b/frontend/src/_components/MultiSelectUser.jsx
@@ -96,7 +96,6 @@ function MultiSelectUser({
         disabled={isLoading}
         fuzzySearch
         renderOption={renderCustom}
-        customWrap={true}
       />
     </div>
   );
diff --git a/frontend/src/_components/NotificationCenter/index.jsx b/frontend/src/_components/NotificationCenter/index.jsx
index fc5e720953..5202683e83 100644
--- a/frontend/src/_components/NotificationCenter/index.jsx
+++ b/frontend/src/_components/NotificationCenter/index.jsx
@@ -117,7 +117,7 @@ export const NotificationCenter = ({ darkMode }) => {
       <div>
         <ToolTip message="Comment notifications" placement="right">
           <div className="notification-center-nav-item cursor-pointer tj-leftsidebar-icon-items">
-            <SolidIcon data-cy="notifications-icon" name="notification" fill={darkMode ? '#4C5155' : '#C1C8CD'} />
+            <SolidIcon data-cy="notifications-icon" name="notification" fill="var(--slate8)" />
             {commentNotifications?.length !== 0 && <span className="notification-center-badge badge bg-red" />}
           </div>
         </ToolTip>
diff --git a/frontend/src/_components/OrganizationManager/CustomSelect.jsx b/frontend/src/_components/OrganizationManager/CustomSelect.jsx
index d9241f58d5..91d6c8c05a 100644
--- a/frontend/src/_components/OrganizationManager/CustomSelect.jsx
+++ b/frontend/src/_components/OrganizationManager/CustomSelect.jsx
@@ -83,7 +83,6 @@ export const CustomSelect = ({ ...props }) => {
         setShowCreateOrg={setShowCreateOrg}
         styles={{ border: 0, cursor: 'pointer' }}
         {...props}
-        customWrap={true}
       />
     </>
   );
diff --git a/frontend/src/_components/OrganizationManager/EditOrganization.jsx b/frontend/src/_components/OrganizationManager/EditOrganization.jsx
index e0efb2f4b8..f58d5f134e 100644
--- a/frontend/src/_components/OrganizationManager/EditOrganization.jsx
+++ b/frontend/src/_components/OrganizationManager/EditOrganization.jsx
@@ -66,7 +66,6 @@ export const EditOrganization = ({ showEditOrg, setShowEditOrg, currentValue })
       show={showEditOrg}
       closeModal={closeModal}
       title={t('header.organization.editWorkspace', 'Edit workspace')}
-      checkForBackground={false}
     >
       <div className="row mb-3 workspace-folder-modal">
         <div className="col modal-main tj-app-input">
diff --git a/frontend/src/_components/Portal/Portal.jsx b/frontend/src/_components/Portal/Portal.jsx
index f3eca15ae3..441d4ecaee 100644
--- a/frontend/src/_components/Portal/Portal.jsx
+++ b/frontend/src/_components/Portal/Portal.jsx
@@ -30,7 +30,6 @@ const Portal = ({ children, ...restProps }) => {
 
   const portalStyles = {
     background: 'transparent',
-    backgroundColor: darkMode ? '#232E3C' : '#fff',
     borderRadius: '0px',
     width: '500px',
   };
@@ -91,7 +90,7 @@ const Modal = ({
             style={{
               textTransform: 'none',
             }}
-            className="badge tj-badge"
+            className="color-indigo9"
             data-cy="codehinder-popup-badge"
           >
             {componentName ?? 'Editor'}
@@ -126,10 +125,7 @@ const Modal = ({
           />
         </Button>
       </div>
-      <div
-        className={`modal-body ${darkMode ? 'dark-mode-border' : ''}`}
-        style={{ background: 'transparent', height: 300 }}
-      >
+      <div className={`modal-body `} style={{ background: 'transparent', height: 300 }}>
         {children}
       </div>
     </div>
diff --git a/frontend/src/_components/SortableList/index.js b/frontend/src/_components/SortableList/index.js
index 98b719403a..8146d4c14e 100644
--- a/frontend/src/_components/SortableList/index.js
+++ b/frontend/src/_components/SortableList/index.js
@@ -21,7 +21,6 @@ const SortableComponent = ({ data, Element, ...restProps }) => {
 
   React.useEffect(() => {
     if (items.length > 0 && didItemChangePosition(data, items)) {
-      console.log('items changed ==>');
       onSort(items);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 16c5d942f0..a2fefd4e3e 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -32,6 +32,7 @@ import { useDataQueriesStore } from '@/_stores/dataQueriesStore';
 import { useQueryPanelStore } from '@/_stores/queryPanelStore';
 import { useCurrentStateStore, getCurrentState } from '@/_stores/currentStateStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
+import { useEditorStore } from '@/_stores/editorStore';
 
 const ERROR_TYPES = Object.freeze({
   ReferenceError: 'ReferenceError',
@@ -78,13 +79,20 @@ export function onComponentOptionsChanged(_ref, component, options) {
 export function onComponentOptionChanged(_ref, component, option_name, value) {
   const componentName = component.name;
   const components = getCurrentState().components;
-
   let componentData = components[componentName];
   componentData = componentData || {};
   componentData[option_name] = value;
-  useCurrentStateStore.getState().actions.setCurrentState({
-    components: { ...components, [componentName]: componentData },
-  });
+
+  if (option_name !== 'id') {
+    useCurrentStateStore.getState().actions.setCurrentState({
+      components: { ...components, [componentName]: componentData },
+    });
+  } else if (!componentData?.id) {
+    useCurrentStateStore.getState().actions.setCurrentState({
+      components: { ...components, [componentName]: componentData },
+    });
+  }
+
   return Promise.resolve();
 }
 
@@ -577,7 +585,27 @@ function executeActionWithDebounce(_ref, event, mode, customVariables) {
       }
 
       case 'switch-page': {
-        _ref.switchPage(event.pageId, resolveReferences(event.queryParams, getCurrentState(), [], customVariables));
+        const { name, disabled } = _ref.state.appDefinition.pages[event.pageId];
+        // Don't allow switching to disabled page in editor as well as viewer
+        if (!disabled) {
+          _ref.switchPage(event.pageId, resolveReferences(event.queryParams, getCurrentState(), [], customVariables));
+        }
+        if (_ref.state.appDefinition.pages[event.pageId]) {
+          if (disabled) {
+            const generalProps = {
+              navToDisablePage: {
+                type: 'navToDisablePage',
+                page: name,
+                data: {
+                  message: `Attempt to switch to disabled page ${name} blocked.`,
+                  status: true,
+                },
+              },
+            };
+            useCurrentStateStore.getState().actions.setErrors(generalProps);
+          }
+        }
+
         return Promise.resolve();
       }
     }
@@ -1163,6 +1191,7 @@ export function computeComponentState(_ref, components = {}) {
       };
     }
   });
+
   useCurrentStateStore.getState().actions.setCurrentState({
     components: {
       ...componentState,
@@ -1177,8 +1206,8 @@ export function computeComponentState(_ref, components = {}) {
 export const getSvgIcon = (key, height = 50, width = 50, iconFile = undefined, styles = {}) => {
   if (iconFile) return <img src={`data:image/svg+xml;base64,${iconFile}`} style={{ height, width }} />;
   if (key === 'runjs') return <RunjsIcon style={{ height, width }} />;
-  if (key === 'tooljetdb') return <RunTooljetDbIcon />;
-  if (key === 'runpy') return <RunPyIcon />;
+  if (key === 'tooljetdb') return <RunTooljetDbIcon style={{ height, width }} />;
+  if (key === 'runpy') return <RunPyIcon style={{ height, width }} />;
   const Icon = allSvgs[key];
 
   if (!Icon) return <></>;
@@ -1256,6 +1285,9 @@ export const debuggerActions = {
           generalProps.property = key.split('- ')[1];
           error.resolvedProperties = value.resolvedProperties;
           break;
+        case 'navToDisablePage':
+          generalProps.message = value.data.message;
+          break;
 
         default:
           break;
@@ -1314,7 +1346,8 @@ const updateNewComponents = (pageId, appDefinition, newComponents, updateAppDefi
 };
 
 export const cloneComponents = (_ref, updateAppDefinition, isCloning = true, isCut = false) => {
-  const { selectedComponents, appDefinition, currentPageId } = _ref.state;
+  const { appDefinition, currentPageId } = _ref.state;
+  const selectedComponents = useEditorStore.getState().selectedComponents;
   if (selectedComponents.length < 1) return getSelectedText();
   const { components: allComponents } = appDefinition.pages[currentPageId];
   let newDefinition = _.cloneDeep(appDefinition);
@@ -1413,7 +1446,6 @@ const updateComponentLayout = (components, parentId, isCut = false) => {
 };
 
 export const addComponents = (pageId, appDefinition, appDefinitionChanged, parentId = undefined, newComponentObj) => {
-  console.log({ pageId, newComponentObj });
   const finalComponents = [];
   let parentComponent = undefined;
   const { isCloning, isCut, newComponents: pastedComponent = [] } = newComponentObj;
@@ -1633,3 +1665,14 @@ export const computeQueryState = (queries, _ref) => {
     });
   }
 };
+
+export const removeFunctionObjects = (obj) => {
+  for (const key in obj) {
+    if (typeof obj[key] === 'function') {
+      delete obj[key];
+    } else if (typeof obj[key] === 'object' && obj[key] !== null) {
+      removeFunctionObjects(obj[key]);
+    }
+  }
+  return obj;
+};
diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js
index fb6affc974..0233d1e96f 100644
--- a/frontend/src/_helpers/utils.js
+++ b/frontend/src/_helpers/utils.js
@@ -391,7 +391,7 @@ export function validateWidget({ validationObject, widgetValue, currentState, cu
   }
 
   const resolvedCustomRule = resolveWidgetFieldValue(customRule, currentState, false, customResolveObjects);
-  if (typeof resolvedCustomRule === 'string') {
+  if (typeof resolvedCustomRule === 'string' && resolvedCustomRule !== '') {
     return { isValid: false, validationError: resolvedCustomRule };
   }
 
@@ -1060,3 +1060,16 @@ export const redirectToDashboard = () => {
   const subpath = getSubpath();
   window.location = `${subpath ? `${subpath}` : ''}/${getWorkspaceId()}`;
 };
+
+export const determineJustifyContentValue = (value) => {
+  switch (value) {
+    case 'left':
+      return 'start';
+    case 'right':
+      return 'end';
+    case 'center':
+      return 'center';
+    default:
+      return 'start';
+  }
+};
diff --git a/frontend/src/_hooks/use-portal.jsx b/frontend/src/_hooks/use-portal.jsx
index a25e72b811..7732daccdf 100644
--- a/frontend/src/_hooks/use-portal.jsx
+++ b/frontend/src/_hooks/use-portal.jsx
@@ -20,6 +20,7 @@ const usePortal = ({ children, ...restProps }) => {
     const { selectors } = restProps;
     return React.createElement('div', { ...selectors }, component);
   };
+  const darkMode = localStorage.getItem('darkMode') === 'true';
 
   React.useEffect(() => {
     if (isOpen) {
@@ -33,7 +34,7 @@ const usePortal = ({ children, ...restProps }) => {
     <React.Fragment>
       {isOpen && (
         <Portal
-          className={`modal-portal-wrapper ${dragResizePortal && 'resize-modal-portal'}`}
+          className={`modal-portal-wrapper ${darkMode && 'dark-theme'} ${dragResizePortal && 'resize-modal-portal'}`}
           isOpen={isOpen}
           trigger={callback}
           componentName={componentName}
diff --git a/frontend/src/_lib/generate-file.js b/frontend/src/_lib/generate-file.js
index 9da1c64e95..8163c75034 100644
--- a/frontend/src/_lib/generate-file.js
+++ b/frontend/src/_lib/generate-file.js
@@ -1,5 +1,4 @@
 import jsPDF from 'jspdf';
-
 export default function generateFile(filename, data, fileType) {
   if (fileType === 'pdf') {
     generatePDF(filename, data);
@@ -28,7 +27,7 @@ function generatePDF(filename, data) {
   const x = margin;
   let y = margin;
 
-  const processValue = (value, indentLevel = 0) => {
+  const processValue = (value = 0) => {
     const valueType = typeof value;
 
     if (valueType === 'string') {
diff --git a/frontend/src/_stores/dataQueriesStore.js b/frontend/src/_stores/dataQueriesStore.js
index 1155aacb5c..ebc89dc89c 100644
--- a/frontend/src/_stores/dataQueriesStore.js
+++ b/frontend/src/_stores/dataQueriesStore.js
@@ -8,6 +8,7 @@ import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { runQueries } from '@/_helpers/appUtils';
 import { v4 as uuidv4 } from 'uuid';
 import { toast } from 'react-hot-toast';
+import { isEmpty, throttle } from 'lodash';
 
 const initialState = {
   dataQueries: [],
@@ -16,13 +17,16 @@ const initialState = {
   loadingDataQueries: true,
   isDeletingQueryInProcess: false,
   /** TODO: Below two params are primarily used only for websocket invocation post update. Can be removed onece websocket logic is revamped */
-  isCreatingQueryInProcess: false,
+  // isCreatingQueryInProcess: false,
+  creatingQueryInProcessId: null,
   isUpdatingQueryInProcess: false,
+  /** When a 'Create Data Query' operation is in progress, rename/update API calls are cached in the variable. */
+  queuedActions: {},
 };
 
 export const useDataQueriesStore = create(
   zustandDevTools(
-    (set) => ({
+    (set, get) => ({
       ...initialState,
       actions: {
         // TODO: Remove editor state while changing currentState
@@ -93,14 +97,14 @@ export const useDataQueriesStore = create(
           const appId = useAppDataStore.getState().appId;
           const { options, name } = getDefaultOptions(selectedDataSource);
           const kind = selectedDataSource.kind;
-          set({ isCreatingQueryInProcess: true });
+          const tempId = uuidv4();
+          set({ creatingQueryInProcessId: tempId });
           const { actions, selectedQuery } = useQueryPanelStore.getState();
           const dataSourceId = selectedDataSource?.id !== 'null' ? selectedDataSource?.id : null;
           const pluginId = selectedDataSource.pluginId || selectedDataSource.plugin_id;
           useAppDataStore.getState().actions.setIsSaving(true);
           const { dataQueries } = useDataQueriesStore.getState();
           const currDataQueries = [...dataQueries];
-          const tempId = uuidv4();
           set(() => ({
             dataQueries: [
               {
@@ -117,25 +121,40 @@ export const useDataQueriesStore = create(
             ],
           }));
           actions.setSelectedQuery(tempId);
+          actions.setNameInputFocussed(true);
           dataqueryService
             .create(appId, appVersionId, name, kind, options, dataSourceId, pluginId)
             .then((data) => {
               set((state) => ({
-                isCreatingQueryInProcess: false,
+                creatingQueryInProcessId: null,
                 dataQueries: state.dataQueries.map((query) => {
                   if (query.id === tempId) {
-                    return { ...query, ...data, data_source_id: dataSourceId };
+                    return {
+                      ...query,
+                      id: data.id,
+                      data_source_id: dataSourceId,
+                    };
                   }
                   return query;
                 }),
               }));
               actions.setSelectedQuery(data.id, data);
-              actions.setNameInputFocussed(true);
               if (shouldRunQuery) actions.setQueryToBeRun(data);
+
+              /** Checks if there is an API call cached. If yes execute it */
+              if (!isEmpty(get()?.queuedActions?.renameQuery)) {
+                get().actions.renameQuery(data.id, get().queuedActions.renameQuery);
+                set({ queuedActions: { ...get().queuedActions, renameQuery: undefined } });
+              }
+
+              if (!isEmpty(get()?.queuedActions?.saveData)) {
+                get().actions.saveData({ ...get().queuedActions.saveData, id: data.id });
+                set({ queuedActions: { ...get().queuedActions, saveData: undefined } });
+              }
             })
             .catch((error) => {
               set((state) => ({
-                isCreatingQueryInProcess: false,
+                creatingQueryInProcessId: null,
                 dataQueries: state.dataQueries.filter((query) => query.id !== tempId),
               }));
               actions.setSelectedQuery(null);
@@ -144,6 +163,11 @@ export const useDataQueriesStore = create(
             .finally(() => useAppDataStore.getState().actions.setIsSaving(false));
         },
         renameQuery: (id, newName) => {
+          /** If query creation in progress, skips call and pushes the update to queue */
+          if (get().creatingQueryInProcessId === id) {
+            set({ queuedActions: { ...get().queuedActions, renameQuery: newName } });
+            return;
+          }
           useAppDataStore.getState().actions.setIsSaving(true);
           /**
            * Seting name to store before api call for instant UI update and better UX.
@@ -196,7 +220,7 @@ export const useDataQueriesStore = create(
             .finally(() => useAppDataStore.getState().actions.setIsSaving(false));
         },
         duplicateQuery: (id, appId) => {
-          set({ isCreatingQueryInProcess: true });
+          set({ creatingQueryInProcessId: uuidv4() });
           const { actions } = useQueryPanelStore.getState();
           const { dataQueries } = useDataQueriesStore.getState();
           const queryToClone = { ...dataQueries.find((query) => query.id === id) };
@@ -222,7 +246,7 @@ export const useDataQueriesStore = create(
             )
             .then((data) => {
               set((state) => ({
-                isCreatingQueryInProcess: false,
+                creatingQueryInProcessId: null,
                 dataQueries: [{ ...data, data_source_id: queryToClone.data_source_id }, ...state.dataQueries],
               }));
               actions.setSelectedQuery(data.id, { ...data, data_source_id: queryToClone.data_source_id });
@@ -230,12 +254,17 @@ export const useDataQueriesStore = create(
             .catch((error) => {
               console.error('error', error);
               set({
-                isCreatingQueryInProcess: false,
+                creatingQueryInProcessId: null,
               });
             })
             .finally(() => useAppDataStore.getState().actions.setIsSaving(false));
         },
-        saveData: debounce((newValues) => {
+        saveData: throttle((newValues) => {
+          /** If query creation in progress, skips call and pushes the update to queue */
+          if (get().creatingQueryInProcessId && get().creatingQueryInProcessId === newValues.id) {
+            set({ queuedActions: { ...get().queuedActions, saveData: newValues } });
+            return;
+          }
           useAppDataStore.getState().actions.setIsSaving(true);
           set({ isUpdatingQueryInProcess: true });
           dataqueryService
@@ -286,5 +315,5 @@ const sortByAttribute = (data, sortBy, order) => {
 
 export const useDataQueries = () => useDataQueriesStore((state) => state.dataQueries);
 export const useDataQueriesActions = () => useDataQueriesStore((state) => state.actions);
-export const useQueryCreationLoading = () => useDataQueriesStore((state) => state.isCreatingQueryInProcess);
+export const useQueryCreationLoading = () => useDataQueriesStore((state) => !!state.creatingQueryInProcessId);
 export const useQueryUpdationLoading = () => useDataQueriesStore((state) => state.isUpdatingQueryInProcess);
diff --git a/frontend/src/_stores/editorStore.js b/frontend/src/_stores/editorStore.js
index bb4b83ba8c..ba1a1b5269 100644
--- a/frontend/src/_stores/editorStore.js
+++ b/frontend/src/_stores/editorStore.js
@@ -1,8 +1,23 @@
 import { create, zustandDevTools } from './utils';
 
+const STORE_NAME = 'Editor';
+
+const ACTIONS = {
+  SET_SHOW_COMMENTS: 'SET_SHOW_COMMENTS',
+  SET_HOVERED_COMPONENT: 'SET_HOVERED_COMPONENT',
+  TOGGLE_COMMENTS: 'TOGGLE_COMMENTS',
+  TOGGLE_CURRENT_LAYOUT: 'TOGGLE_CURRENT_LAYOUT',
+  SET_SELECTION_IN_PROGRESS: 'SET_SELECTION_IN_PROGRESS',
+  SET_SELECTED_COMPONENTS: 'SET_SELECTED_COMPONENTS',
+  SET_IS_EDITOR_ACTIVE: 'SET_IS_EDITOR_ACTIVE',
+};
+
 const initialState = {
   currentLayout: 'desktop',
   showComments: false,
+  hoveredComponent: '',
+  selectionInProgress: false,
+  selectedComponents: [],
   isEditorActive: false,
 };
 
@@ -11,12 +26,46 @@ export const useEditorStore = create(
     (set, get) => ({
       ...initialState,
       actions: {
-        setShowComments: (showComments) => set({ showComments }),
-        toggleComments: () => set({ showComments: !get().showComments }),
-        toggleCurrentLayout: (currentLayout) => set({ currentLayout }),
+        setShowComments: (showComments) =>
+          set({ showComments }, false, {
+            type: ACTIONS.SET_HOVERED_COMPONENT,
+            showComments,
+          }),
+        toggleComments: () =>
+          set({ showComments: !get().showComments }, false, {
+            type: ACTIONS.TOGGLE_COMMENTS,
+          }),
+        toggleCurrentLayout: (currentLayout) =>
+          set({ currentLayout }, false, {
+            type: ACTIONS.TOGGLE_CURRENT_LAYOUT,
+            currentLayout,
+          }),
         setIsEditorActive: (isEditorActive) => set(() => ({ isEditorActive })),
+        setHoveredComponent: (hoveredComponent) =>
+          set({ hoveredComponent }, false, {
+            type: ACTIONS.SET_HOVERED_COMPONENT,
+            hoveredComponent,
+          }),
+        setSelectionInProgress: (isSelectionInProgress) => {
+          set(
+            {
+              isSelectionInProgress,
+            },
+            false,
+            { type: ACTIONS.SET_SELECTION_IN_PROGRESS }
+          );
+        },
+        setSelectedComponents: (selectedComponents) => {
+          set(
+            {
+              selectedComponents,
+            },
+            false,
+            { type: ACTIONS.SET_SELECTED_COMPONENTS }
+          );
+        },
       },
     }),
-    { name: 'Editor Store' }
+    { name: STORE_NAME }
   )
 );
diff --git a/frontend/src/_stores/queryPanelStore.js b/frontend/src/_stores/queryPanelStore.js
index 671237e1d5..bee645a43b 100644
--- a/frontend/src/_stores/queryPanelStore.js
+++ b/frontend/src/_stores/queryPanelStore.js
@@ -1,4 +1,3 @@
-import { cloneDeep } from 'lodash';
 import { create, zustandDevTools } from './utils';
 
 import { useDataQueriesStore } from '@/_stores/dataQueriesStore';
diff --git a/frontend/src/_styles/colors.scss b/frontend/src/_styles/colors.scss
index d16aa8eedf..3523a7dcc0 100644
--- a/frontend/src/_styles/colors.scss
+++ b/frontend/src/_styles/colors.scss
@@ -188,6 +188,14 @@ $primary-light: unquote("rgb(#{$primary-rgb-darker})");
   background-color: var(--slate3) !important;
 }
 
+.color-slate12{
+  color: var(--slate12) !important;
+}
+
+.color-slate09{
+  color: $color-light-slate-09 !important;
+}
+
 .bg-slate6 {
   background-color: var(--slate6) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/components.scss b/frontend/src/_styles/components.scss
index 53db2a1a7d..06f50deb06 100644
--- a/frontend/src/_styles/components.scss
+++ b/frontend/src/_styles/components.scss
@@ -17,7 +17,7 @@ $btn-dark-color: #FFFFFF;
   transition: all 0.3s ease-in-out;
 
   &:hover {
-    @if $bg !=none {
+    @if $bg  !=none {
       background-color: darken($bg, 10%);
     }
   }
@@ -95,15 +95,19 @@ $btn-dark-color: #FFFFFF;
 }
 
 .leftsidebar-panel-header {
-  background-color: #F1F3F5;
+  background-color: var(--slate3);
+  padding: 12px 16px;
+  min-height: 52px;
+  border-bottom: 1px solid var(--slate5);
+
 
   .panel-header-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 12px 16px;
-    height: 52px;
-    border-bottom: 1px solid #E6E8EB;
+    height: 28px;
+    display: flex;
+    align-items: center;
 
     .add-new-page {
       margin-left: 4px;
@@ -112,43 +116,42 @@ $btn-dark-color: #FFFFFF;
   }
 
   .panel-search-container {
-    padding: 8px 12px;
-    border-bottom: 1px solid #E6E8EB;
+    padding: 12px 0px;
   }
 }
 
-.leftsidebar-panel-header.dark {
-  background-color: #1F2936 !important;
 
-  .panel-header-container,
-  .panel-search-container {
-    border-color: #697177;
-  }
-}
 
 .page-selector-panel-body {
   height: 100%;
-  padding: 12px;
-  background-color: #FFFFFF;
+  padding: 12px 16px;
+  background-color: var(--base);
 
   .page-handler {
     height: 32px !important;
     padding: 0;
-    margin-bottom: 6px;
+    margin-bottom: 2px;
     font-weight: 500;
 
+    .card {
+      background: var(--base);
+      padding: 8px;
+    }
+
     .card,
     .card-body {
-      padding: 2px;
       height: 32px;
 
       .page-name {
-        padding: 2px;
+        color: var(--slate12);
+        display: flex;
+        align-items: center;
       }
     }
 
     .card.active {
-      background: #E6EDFE;
+      background: var(--slate5);
+      gap: 0px;
     }
 
     .card.non-active-page {
@@ -157,7 +160,14 @@ $btn-dark-color: #FFFFFF;
     }
 
     .card:hover {
-      background: #ECEEF0;
+      background: var(--slate4);
+    }
+
+    .card:focus {
+      border-radius: 6px;
+      background: var(--slate1, #FBFCFD);
+      /* Focus rings/Gray/light */
+      box-shadow: 0px 0px 0px 4px #DFE3E6;
     }
 
     .page-name-input {
@@ -166,23 +176,6 @@ $btn-dark-color: #FFFFFF;
   }
 }
 
-.page-selector-panel-body.dark {
-  background: #1F2936 !important;
-
-  .page-handler {
-    .card {
-      background: none !important
-    }
-
-    .card.active {
-      background: #26292B !important;
-    }
-
-    .card:hover {
-      background: #2C3547 !important;
-    }
-  }
-}
 
 .left-sidebar-page-selector.dark {
   background: #1F2936 !important;
@@ -202,11 +195,16 @@ $btn-dark-color: #FFFFFF;
   width: 238px;
   margin-top: 0.2rem !important;
   margin-left: 0.5rem !important;
-  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
+  border-radius: 6px;
+  border: 1px solid var(--slate3, #F1F3F5);
+  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  background-color: var(--base);
 
   .popover-body {
     padding: 16px 6px 0px 6px;
     height: 100%;
+    color: var(--slate12);
+
 
     .card-body {
       padding: 0;
@@ -254,13 +252,14 @@ $btn-dark-color: #FFFFFF;
 }
 
 .page-handler-alert {
-  background-color: #fff5f0 !important;
-  border: 1px solid #FFF1E7 !important;
+  background-color: var(--slate2) !important;
+  border: 1px solid var(--slate5) !important;
+  border-radius: 6px;
 }
 
 .copilot-alert {
-  background-color: #F8F9FA !important;
-  border: 1px solid #E6E8EB !important;
+  background-color: var(--slate2) !important;
+  border: 1px solid var(--slate5) !important;
 }
 
 .page-handle-edit-container {
@@ -270,6 +269,17 @@ $btn-dark-color: #FFFFFF;
   .input-group {
     height: 42px;
     padding: 2px;
+
+  }
+
+
+  input {
+    background-color: var(--base);
+    color: var(--slate12);
+
+    &:focus {
+      background-color: var(--base);
+    }
   }
 
   .input-group-text {
@@ -282,7 +292,7 @@ $btn-dark-color: #FFFFFF;
   }
 
   .page-handler-input {
-    border-radius: $base-border-radius !important;
+    border-radius: $base-border-radius  !important;
   }
 }
 
@@ -319,7 +329,6 @@ $btn-dark-color: #FFFFFF;
 .DragHandle {
   display: flex;
   width: 12px;
-  padding: 3px;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
@@ -330,7 +339,6 @@ $btn-dark-color: #FFFFFF;
   outline: none;
   appearance: none;
   background-color: transparent;
-  margin-top: 3px;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -346,6 +354,7 @@ $btn-dark-color: #FFFFFF;
 #popover-change-scope {
   border: 1px solid rgba(101, 109, 119, 0.16);
   box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
+  background: var(--base) !important;
 }
 
 .tj-badge {
@@ -356,4 +365,14 @@ $btn-dark-color: #FFFFFF;
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
+}
+
+#page-handler-menu.global-settings {
+  background-color: var(--base);
+
+  .popover-body {
+    color: var(--slate12);
+  }
+
+  border: none;
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/custom.scss b/frontend/src/_styles/custom.scss
index 49348c6b4e..8a1bb53ac9 100644
--- a/frontend/src/_styles/custom.scss
+++ b/frontend/src/_styles/custom.scss
@@ -98,4 +98,73 @@ div[data-disabled='true'] {
 
 body {
   overflow-y: auto !important;
+}
+//to determine the text alignment of input elements in the table cells
+.table-text-align-left{
+  input{
+    text-align: left;
+  }
+  textarea{
+    text-align: left;
+  }
+  .tags.row,.radio-row{
+    justify-content: left;
+  }
+  &.has-datepicker{
+    .td-container{
+      .w-100.h-100{
+        div{
+          justify-content: left !important;
+        }
+      }
+    }
+  }
+}
+.table-text-align-right{
+  input{
+    text-align: right;
+  }
+  textarea{
+    text-align: right;
+  }
+  .tags.row,.radio.row{
+    justify-content: right;
+  }
+  &.has-datepicker{
+    .td-container{
+      .w-100.h-100{
+        div{
+          justify-content: right !important;
+        }
+      }
+    }
+  }
+}
+.table-text-align-center{
+  input{
+    text-align: center;
+  }
+  .tags.row,.radio.row{
+    justify-content: center;
+  }
+  textarea{
+    text-align: center;
+  }
+  &.has-datepicker{
+    .td-container{
+      .w-100.h-100{
+        div{
+          justify-content: center !important;
+        }
+      }
+    }
+  }
+}
+.table-text-align-center,.table-text-align-left,.table-text-align-right{
+  .radio.row{
+    width: 100%;
+  }
+  .radio.row.g-0 > *{
+   width: fit-content !important;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/designtheme.scss b/frontend/src/_styles/designtheme.scss
index 598722b118..d11f2aa61a 100644
--- a/frontend/src/_styles/designtheme.scss
+++ b/frontend/src/_styles/designtheme.scss
@@ -62,12 +62,16 @@
 @import "@radix-ui/colors/bronzeDark.css";
 
 :root {
-    --base: white;
-    --base-black: #121212;
+    --base: #FCFCFD;
+    --base-black: #18181A;
+    --text-black-000 : #000000;
+    --slate12:#313739;
 }
 
 .dark-theme {
     /* Remap your colors for dark mode */
-    --base: #121212;
-    --base-black: white;
+    --base: #1f2936;
+    --base-black: #FBFCFD;
+    --text-black-000: #ffffff;
+    --slate1:#1f2936; 
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/dropdown-custom.scss b/frontend/src/_styles/dropdown-custom.scss
index c25ba4574a..67fd656bd3 100644
--- a/frontend/src/_styles/dropdown-custom.scss
+++ b/frontend/src/_styles/dropdown-custom.scss
@@ -1,6 +1,25 @@
 // for selects and dropdowns across app dashboard
 .react-select__control {
     background-color: var(--base) !important;
+    border: 1px solid var(--slate7) !important;
+
+    &:active {
+        border: 1px solid var(--indigo9);
+    }
+}
+
+.react-select__menu-portal {
+    z-index: 100 !important;
+
+    .react-select__option {
+        color: var(--slate12);
+        z-index: 100;
+
+    }
+}
+
+.react-select__single-value {
+    color: var(--slate12) !important;
 }
 
 .react-select__menu {
@@ -8,6 +27,7 @@
     border: 1px solid var(--slate3) !important;
     box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
     margin: 0px !important;
+    z-index: 100;
 
     .react-select__menu-list {
         background-color: var(--base) !important;
@@ -28,13 +48,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-top: 1px solid var(--slate3);
+    border-top: 1px solid var(--slate5);
 }
 
 .tj-org-select {
     .react-select__control {
         width: 262px;
         height: 32px;
+        border: none !important;
 
         &:hover {
             background: var(--slate2) !important;
@@ -76,4 +97,7 @@
 
 .css-nw08ma-menu {
     box-shadow: none !important;
+}
+.react-select__menu-portal{
+    z-index: 9999 !important;
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/editor/react-select-search.scss b/frontend/src/_styles/editor/react-select-search.scss
index 1e74278ff5..e22c2cc830 100644
--- a/frontend/src/_styles/editor/react-select-search.scss
+++ b/frontend/src/_styles/editor/react-select-search.scss
@@ -1,10 +1,9 @@
-
 /**
  * Main wrapper
  */
- @import "../colors.scss";
+@import "../colors.scss";
 
- .custom-select{
+.custom-select {
     .select-search-container .select-search-select {
         position: absolute;
         z-index: 2;
@@ -14,19 +13,20 @@
         border-radius: 4px;
         display: none;
     }
+
     .select-search-container.select-search-has-focus .select-search-select {
         display: block;
     }
 }
 
 .select-search-container {
-    --select-search-background: #fff;
-    --select-search-border: #dadcde;
+    --select-search-background: var(--base);
+    --select-search-border: var(--slate7);
     --select-search-selected: #dadcde;
-    --select-search-text: 232e3c;
+    --select-search-text: var(--slate12);
     --select-search-subtle-text: #6c6f85;
     --select-search-inverted-text: var(--select-search-background);
-    --select-search-highlight: #F8FAFF;
+    --select-search-highlight: var(--indigo3);
     --select-search-font: "Roboto", sans-serif;
     width: 100%;
     position: relative;
@@ -93,7 +93,7 @@
 .select-search-input::-webkit-search-cancel-button,
 .select-search-input::-webkit-search-results-button,
 .select-search-input::-webkit-search-results-decoration {
-    -webkit-appearance:none;
+    -webkit-appearance: none;
 }
 
 .select-search-input[readonly] {
@@ -106,13 +106,11 @@
 
 .select-search-container:not(.select-search-is-disabled).select-search-has-focus .select-search-input,
 .select-search-container:not(.select-search-is-disabled) .select-search-input:hover {
-    border-color: var(--select-search-selected);
+    border-color: var(--slate8);
 }
 
 .select-search-select {
-    background: var(--select-search-background);
-    border: 1px solid $color-dark-indigo-09;
-    background-color: #fff;
+    border: 1px solid var(--slate3) !important;
     box-shadow: 0 0 0 1px #0000001a, 0 4px 11px #0000001a;
     overflow: auto;
     max-height: 360px;
@@ -191,6 +189,7 @@
 .select-search-row:not(:last-child) .select-search-group-header {
     margin-bottom: 5px;
 }
-.select-search-row button{
+
+.select-search-row button {
     border-radius: 0px;
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index 17089b9470..ae1b661eac 100644
--- a/frontend/src/_styles/global-datasources.scss
+++ b/frontend/src/_styles/global-datasources.scss
@@ -93,7 +93,7 @@
 
 .datasource-modal-container {
     position: relative;
-    background: var(--slate2);
+    // background: var(--slate2);
 
     .modal-header {
         background-color: var(--slate3) !important;
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index eaae10c031..f834458d23 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/frontend/src/_styles/left-sidebar.scss
@@ -3,8 +3,17 @@
 
 .left-sidebar {
   background: var(--base) !important;
+  display: flex;
+  gap: 16px;
 
   .sidebar-svg-icon {
+    height: 32px;
+    width: 32px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     &:hover {
       background: var(--slate5);
       border-radius: 6px;
@@ -13,9 +22,12 @@
 
   .left-sidebar-item {
     text-align: center;
-    padding-top: 12px;
     transition: all 0.2s ease-in-out;
     cursor: pointer;
+    max-height: 32px;
+    width: 32px;
+    display: flex;
+    align-items: center;
 
     &:hover {
       .debugger-badge {
@@ -29,6 +41,8 @@
     position: fixed;
     bottom: 5px;
     text-align: center;
+    display: flex;
+    justify-content: center;
   }
 
   .popover {
@@ -54,7 +68,11 @@
     cursor: pointer;
   }
 
-
+  #global-settings-popover {
+    .card-body {
+      background-color: var(--base) !important;
+    }
+  }
 
   .global-settings-popover {
     top: 260px;
@@ -141,38 +159,53 @@
 }
 
 .debugger {
-    .text-slate-12 {
-      color :var(--slate12);
-      font-weight : 500;
-      line-height : 20px;
-    }
-    .text-tomato-9 {
-      color : var(--tomato9);
-    }
-    .text-slate-10 {
-      color : var(--slate10)
-    }
-    .nav-tabs {
-      border-bottom: 0px !important;
-    }
+  .leftsidebar-panel-header {
+    border-bottom: none;
+  }
 
-    .nav-item .nav-link{
-      background-color: var(--slate3) !important;
-      color : var(--slate11)!important;
-    }
-   
-    .nav-tabs .nav-link.active {
-      border-radius: 0 !important;
-      border-width: 2px !important;
-      color : var(--indigo9)!important;
-    }
-    .panel-header-container {
-      border-bottom: 0px !important
-    }
- }
+  .text-slate-12 {
+    color: var(--slate12);
+    font-weight: 500;
+    line-height: 20px;
+  }
 
+  .text-tomato-9 {
+    color: var(--tomato9);
+  }
+
+  .text-slate-10 {
+    color: var(--slate10)
+  }
+
+  .nav-tabs {
+    border-bottom: 0px !important;
+  }
+
+  .nav-item .nav-link {
+    background-color: var(--slate3) !important;
+    color: var(--slate11) !important;
+  }
+
+  .nav-tabs .nav-link.active {
+    border-radius: 0 !important;
+    border-width: 2px !important;
+    color: var(--indigo9) !important;
+  }
+
+  .panel-header-container {
+    border-bottom: 0px !important
+  }
+}
+
+.debugger-content {
+  background-color: var(--base);
+
+  hr {
+    margin-top: 0px !important;
+    margin-bottom: 16px !important;
+  }
+}
 
- 
 
 .datasource-modal-button {
   background: #ffffff;
@@ -193,7 +226,7 @@
   background: transparent !important;
 
   &:hover {
-    background: $primary !important;
+    background: $primary  !important;
     color: #fffffc !important;
   }
 }
@@ -287,7 +320,7 @@
         width: 860px !important;
       }
 
-      
+
     }
 
     .card {
@@ -538,14 +571,8 @@
   .card.active {
     width: inherit;
     background-color: var(--slate5);
-    color: #3e525b;
-  }
-}
-
-.bm-item .pages-container.dark {
-  .card.active {
-    background-color: #2c405c;
-    color: #fff;
+    color: var(--slate12);
+    border: none;
   }
 }
 
@@ -553,18 +580,6 @@
   height: 48px;
 }
 
-.sidebar-comments {
-  position: fixed !important;
-  top: 0;
-  right: 260px;
-  border-left: 1px solid #d2ddec;
-  padding: 5px 0 5px 5px !important;
-}
-
-.sidebar-comments.dark {
-  border-color: #324156;
-}
-
 .sidebar-global-settings {
   position: absolute;
   left: 50px;
@@ -575,11 +590,16 @@
   position: relative;
   height: 100vh;
   margin-top: 0px;
+  border-radius: 0px !important;
 
   .add-datasource-btn {
     position: absolute;
     bottom: 0rem;
   }
+
+  .card {
+    border: none !important;
+  }
 }
 
 .sidebar-h-100-popover-inspector {
@@ -600,8 +620,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 16px;
-  width: 56px;
+  padding-top: 0px;
+  width: 48px;
   border-right: 1px solid var(--slate5);
 }
 
@@ -627,7 +647,7 @@
 }
 
 .tj-leftsidebar-icon-items {
-  margin-bottom: 22px;
+  margin-bottom: 16px;
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -655,7 +675,6 @@
 
 .application-brand {
   margin-bottom: 24px !important;
-
 }
 
 .current-seleted-route {
@@ -683,8 +702,28 @@
   }
 }
 
+.sidebar-debugger {
+  button {
+    border-radius: 0px;
+  }
+
+  .tab-content {
+    background: var(--base);
+  }
+}
+
+.sidebar-item {
+  height: 32px;
+  width: 32px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--indigo4);
+}
+
 .left-sidebar-local-datasources-wrapper {
-  height: 100%;
+  height: calc(100% - 48px);
   min-height: 300px;
   position: relative;
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/popover.scss b/frontend/src/_styles/popover.scss
index 386e7ec4a2..7670738fa0 100644
--- a/frontend/src/_styles/popover.scss
+++ b/frontend/src/_styles/popover.scss
@@ -3,11 +3,13 @@
   border-radius: 4px;
   padding: 12px;
   width: 350px;
-  background-color: white;
   will-change: transform, opacity;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
   border-radius: 0 8px 8px 0;
   overflow: auto;
+  background-color: var(--base) !important;
+  border-right: 2px solid var(--slate6, #313538);
+
 
   select {
     cursor: pointer;
@@ -18,9 +20,6 @@
   will-change: initial;
 }
 
-.PopoverContent-dark {
-  background-color: #1f2936;
-}
 
 .PopoverArrow {
   fill: white;
@@ -41,18 +40,6 @@
 }
 
 .PopoverContent.dark {
-  background-color: #1F2936 !important;
-
-  .dark.leftsidebar-panel-header {
-    .text-muted {
-      color: #C0C8CC !important;
-    }
-  }
-
-  .card-body {
-    color: #C0C8CC !important;
-  }
-
   &::-webkit-scrollbar {
     width: 0;
     background: transparent;
@@ -60,7 +47,7 @@
 }
 
 div[data-radix-popper-content-wrapper]:has(.PopoverContent.drawer-height) {
-  margin-top: 45px;
+  margin-top: 48px;
   margin-left: 47px !important;
   transform: none !important;
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/queryManager.scss b/frontend/src/_styles/queryManager.scss
index ba31255c7c..3e1a48e207 100644
--- a/frontend/src/_styles/queryManager.scss
+++ b/frontend/src/_styles/queryManager.scss
@@ -44,11 +44,6 @@ $border-radius: 4px;
   scrollbar-width: none;
 }
 
-// .query-pane::-webkit-scrollbar {
-//   width: 0;
-//   background: transparent;
-// }
-
 .query-pane {
   z-index: 1;
   height: 350px;
@@ -60,10 +55,9 @@ $border-radius: 4px;
   flex: 1 1 auto;
   font-size: 12px;
   line-height: 20px;
-  background-color: #fff;
-  background-clip: border-box;
-  border: solid rgba(0, 0, 0, 0.125);
+  border: 1px solid var(--slate5);
   border-width: 1px 0px 0px 0px;
+  background-color: var(--base);
 
   .table-responsive {
     scrollbar-width: none;
@@ -89,7 +83,7 @@ $border-radius: 4px;
     font-weight: 500;
     width: 272px;
     height: 32px;
-    color: $color-light-slate-12;
+    color: var(--slate12);
     border-radius: 6px;
     margin-bottom: 4px;
 
@@ -137,7 +131,7 @@ $border-radius: 4px;
     }
 
     &:hover {
-      background: $color-light-slate-03 !important;
+      background: var(--slate3) !important;
 
     }
 
@@ -149,11 +143,11 @@ $border-radius: 4px;
   }
 
   .query-row.border {
-    border-color: $color-light-indigo-10 !important;
+    border-color: var(--indigo10) !important;
   }
 
   .query-row-selected {
-    background: $color-light-indigo-04 !important;
+    background: var(--indigo4) !important;
 
     .delete-query {
       svg:hover {
@@ -166,13 +160,13 @@ $border-radius: 4px;
     .rename-query {
       svg:hover {
         path {
-          fill: $color-light-slate-11;
+          fill: var(--slate11);
         }
       }
     }
 
     &:hover {
-      background: $color-light-slate-03 !important;
+      background: var(--slate3) !important;
     }
 
     .rename-query.display-none {
@@ -193,6 +187,7 @@ $border-radius: 4px;
 
   .query-definition-pane-wrapper {
     flex: 1;
+    background-color: var(--base);
     overflow-x: hidden;
     overflow-y: scroll;
     height: 100%;
@@ -214,9 +209,9 @@ $border-radius: 4px;
 
   .query-definition-pane {
     .header {
-      border: solid $color-light-slate-05;
+      border: solid var(--slate5);
       border-width: 0px 0px 1px 0px;
-      background: white;
+      background: var(--base);
       z-index: 3;
       min-height: 44px;
       max-height: 44px;
@@ -224,7 +219,7 @@ $border-radius: 4px;
       font-weight: 500 !important;
 
       .query-manager-header-query-name {
-        color: $color-light-slate-12;
+        color: var(--slate12);
       }
 
       .ellipsis {
@@ -247,7 +242,7 @@ $border-radius: 4px;
       }
 
       .query-header-buttons {
-        gap: 8px;
+        gap: 4px;
         flex: 0 0 auto;
         width: auto;
       }
@@ -256,7 +251,7 @@ $border-radius: 4px;
 
   .data-pane {
     flex: 0 0 288px;
-    border: solid $color-light-slate-05;
+    border: solid var(--slate5);
     border-width: 0px 1px 0px 0px;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -280,9 +275,10 @@ $border-radius: 4px;
 
     .queries-container {
       width: 100%;
+      background-color: var(--base);
 
       .queries-header {
-        border: solid $color-light-slate-05;
+        border: solid var(--slate5);
         border-width: 0px 0px 1px 0px;
         height: 44px;
         --tblr-gutter-x: 0rem;
@@ -293,7 +289,6 @@ $border-radius: 4px;
         gap: 12px;
 
         .queries-search {
-          // width: 172px !important;
           height: 28px !important;
 
           .query-manager-search-box-wrapper {
@@ -330,7 +325,7 @@ $border-radius: 4px;
                 font-weight: 400;
                 line-height: 20px;
                 border: 1px solid var(--slate-07, #D7DBDF);
-                color: $color-light-slate-12;
+                color: var(--slate12);
                 padding-left: 12px !important;
 
                 &::placeholder {
@@ -339,8 +334,8 @@ $border-radius: 4px;
 
                 &:focus {
                   height: 28px;
-                  border: 1px solid $color-light-indigo-09 ;
-                  background-color: $color-light-indigo-02;
+                  border: 1px solid var(--indigo9);
+                  background-color: var(--indigo2);
                   box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
                   overflow: hidden;
                   text-overflow: clip;
@@ -373,7 +368,7 @@ $border-radius: 4px;
               svg {
                 width: auto !important;
                 height: auto !important;
-                stroke: $color-light-indigo-09 !important;
+                stroke: var(--indigo9) !important;
 
               }
             }
@@ -398,7 +393,7 @@ $border-radius: 4px;
 
               &:focus {
                 height: 28px;
-                border: 1px solid $color-light-indigo-09 ;
+                border: 1px solid var(--indigo9);
                 background-color: inherit;
                 box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
               }
@@ -440,7 +435,7 @@ $border-radius: 4px;
   .select-search-dark__value input {
     width: 90px !important;
     height: 32px !important;
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
   }
 }
 
@@ -501,17 +496,12 @@ $border-radius: 4px;
           width: 34px;
         }
 
-        .delete-field-option-dark {
-          background-color: #272822 !important;
-          border-color: #272822 !important ;
-        }
-
         .code-hinter.codehinter-default-input {
           border: 1px solid transparent !important;
         }
 
         .code-hinter.codehinter-default-input:focus-within {
-          border: 1px solid #3E63DD !important;
+          border: 1px solid var(--indigo9) !important;
           background-color: #F8FAFF;
           border-radius: 0;
         }
@@ -565,69 +555,10 @@ $border-radius: 4px;
   }
 }
 
-.query-pane-restapi-tabs.dark {
-  .list-group-item {
-    color: $disabled !important;
-
-    &:hover {
-      color: #ffffff !important;
-    }
-  }
-
-  .tab-content-wrapper {
-    .query-number {
-      background-color: inherit !important;
-      color: #fff !important;
-    }
-
-    .delete-field-option {
-      background: transparent !important;
-    }
-
-    .code-hinter.codehinter-default-input:focus-within {
-      background-color: inherit !important;
-    }
-  }
-
-  .list-group-item.active {
-    color: $white !important;
-  }
-
-  .fields-container {
-    .field {
-      border: 0 !important;
-      outline: none !important;
-    }
-
-    .field:nth-child(3) {
-      border-left: 1px solid $color-dark-slate-07 !important;
-      border-right: 1px solid $color-dark-slate-07 !important;
-    }
-  }
-
-  .cm-s-monokai.CodeMirror {
-    background-color: inherit;
-  }
-
-  .CodeMirror {
-    border-radius: 0 !important;
-    font-size: 12px;
-    border: 0 !important;
-  }
-
-  .content-title {
-    p {
-      color: #a3a3a3 !important;
-
-    }
-  }
-}
-
 .query-pane-rest-api-keys-list-group {
   width: 100%;
   display: flex;
   flex-direction: row;
-  // gap: 4px;
 
   .list-group-item {
     border: none !important;
@@ -636,10 +567,11 @@ $border-radius: 4px;
     font-size: 12px;
     padding: 0 !important;
     height: 32px;
-    color: $color-light-slate-11;
+    color: var(--slate11);
     display: flex;
     align-items: center;
-    border-bottom: 1px solid #dee2e6 !important;
+    border-bottom: 1px solid var(--slate5) !important;
+    border-radius: unset !important;
 
     span {
       padding: 6px 8px;
@@ -648,8 +580,8 @@ $border-radius: 4px;
   }
 
   .list-group-item:hover {
-    color: $color-light-slate-12 !important;
-    background-color: $color-light-slate-03 !important;
+    color: var(--slate12) !important;
+    background-color: var(--slate3) !important;
   }
 
   .list-group-item+.list-group-item.active {
@@ -658,45 +590,19 @@ $border-radius: 4px;
 
   .list-group-item.active {
     background-color: transparent !important;
-    color: $color-light-indigo-09;
+    color: var(--indigo9);
     z-index: inherit !important;
-    border-bottom: 2px solid $color-light-indigo-09 !important;
+    border-bottom: 2px solid var(--indigo9) !important;
   }
 
   .list-group-item.active:hover {
-    background-color: $color-light-indigo-03 !important;
+    background-color: var(--indigo3) !important;
     border-radius: 6px 6px 0 0;
-    color: $color-light-indigo-09 !important;
+    color: var(--indigo9) !important;
   }
 }
 
-.query-pane-restapi-tabs.dark {
-  .query-pane-rest-api-keys-list-group {
-    .list-group-item {
-      color: #9E9EA8 !important;
-    }
-
-    .list-group-item:hover {
-      color: $color-dark-slate-12 !important;
-      background-color: $color-dark-slate-03 !important;
-    }
-
-    .list-group-item.active {
-      color: $color-dark-indigo-09 !important;
-      border-bottom: 2px solid $color-dark-indigo-09 !important;
-    }
-
-    .list-group-item.active:hover {
-      background-color: $color-dark-indigo-03 !important;
-      color: $color-dark-indigo-09 !important;
-    }
-
-  }
-
-}
-
 .query-preview-list-group {
-  // width: 100%;
   display: flex;
   flex-direction: row;
   gap: 4px;
@@ -708,13 +614,12 @@ $border-radius: 4px;
     font-size: 12px;
     padding: 0 !important;
     height: 24px;
-    color: $color-light-slate-11;
+    color: var(--slate11);
     border-radius: 6px;
     display: flex;
     align-items: center;
 
     span {
-      // padding: 6px 8px;
       padding: 2px 0px;
     }
 
@@ -724,8 +629,8 @@ $border-radius: 4px;
   }
 
   .list-group-item:hover {
-    color: $color-light-slate-12 !important;
-    background-color: $color-light-slate-03 !important;
+    color: var(--slate12) !important;
+    background-color: var(--slate3) !important;
     border-radius: 6px;
   }
 
@@ -736,9 +641,8 @@ $border-radius: 4px;
 
   .list-group-item.active {
     background-color: transparent !important;
-    // color: $color-light-indigo-09 !important;
+    color: var(--indigo9) !important;
     z-index: inherit !important;
-    // border-bottom: 2px solid $color-light-indigo-09 !important;
     border-radius: 0;
     transition-delay: 5ms;
 
@@ -748,30 +652,9 @@ $border-radius: 4px;
   }
 
   .list-group-item.active:hover {
-    background-color: $color-light-indigo-03 !important;
+    background-color: var(--indigo3) !important;
     border-radius: 6px 6px 0 0;
-    color: $color-light-indigo-09 !important;
-  }
-}
-
-.query-preview-list-group.dark {
-  list-group-item {
-    color: $color-dark-slate-11 !important;
-  }
-
-  .list-group-item:hover {
-    color: $color-dark-slate-12 !important;
-    background-color: $color-dark-slate-03 !important;
-  }
-
-  .list-group-item.active {
-    color: $color-dark-indigo-09 !important;
-    border-bottom: 2px solid $color-dark-indigo-09 !important;
-  }
-
-  .list-group-item.active:hover {
-    background-color: $color-dark-indigo-03 !important;
-    color: $color-dark-indigo-09 !important;
+    color: var(--indigo9) !important;
   }
 }
 
@@ -787,7 +670,7 @@ $border-radius: 4px;
   width: 268px !important;
 
   input {
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
   }
 }
 
@@ -812,7 +695,7 @@ $border-radius: 4px;
   }
 
   .input-group-parent-container {
-    border: 1px solid $color-light-slate-07 !important;
+    border: 1px solid $color-light-slate-07  !important;
     border-radius: 6px !important;
     overflow: hidden;
 
@@ -864,7 +747,7 @@ $border-radius: 4px;
             .CodeMirror.cm-s-duotone-light.CodeMirror-wrap:focus-within {
               width: 99.8% !important;
               background-color: #F8FAFF !important;
-              border: 1px solid #3E63DD !important;
+              border: 1px solid var(--indigo9) !important;
               margin: 0 1px;
               border-radius: 0;
             }
@@ -886,7 +769,7 @@ $border-radius: 4px;
   }
 
   .text-heading {
-    color: $color-light-slate-12;
+    color: var(--slate12);
     font-weight: 400;
     line-height: 20px;
   }
@@ -961,7 +844,7 @@ $border-radius: 4px;
 
   .CodeMirror.cm-s-monokai.CodeMirror-wrap:focus-within {
     width: 99.8% !important;
-    border: 1px solid #3E63DD !important;
+    border: 1px solid var(--indigo9) !important;
     margin: 0 1px;
     border-radius: 0;
   }
@@ -973,24 +856,18 @@ $border-radius: 4px;
       color: #f4f6fa;
     }
 
-    .query-row-selected {
-      background: #2b3546 !important;
-    }
 
-    .query-row:hover {
-      background: #404d66 !important;
-    }
 
     .delete-query {
       svg {
         path {
-          fill: $color-dark-tomato-10 !important;
+          fill: $color-dark-tomato-10  !important;
         }
       }
 
       svg:hover {
         path {
-          fill: $color-dark-tomato-09 !important;
+          fill: $color-dark-tomato-09  !important;
         }
       }
     }
@@ -998,13 +875,13 @@ $border-radius: 4px;
     .rename-query {
       svg {
         path {
-          fill: $color-dark-slate-12 !important;
+          fill: $color-dark-slate-12  !important;
         }
       }
 
       svg:hover {
         path {
-          fill: $color-dark-slate-11 !important;
+          fill: $color-dark-slate-11  !important;
         }
       }
     }
@@ -1015,6 +892,12 @@ $border-radius: 4px;
 
 //query manager
 .query-manager {
+  background-color: var(--base);
+
+  .header {
+    background-color: var(--base);
+  }
+
   .query-name-breadcrum {
     cursor: pointer;
 
@@ -1033,7 +916,7 @@ $border-radius: 4px;
         &:hover {
           svg {
             path {
-              fill: $color-light-slate-11 !important;
+              fill: var(--slate11) !important;
             }
           }
         }
@@ -1056,12 +939,12 @@ $border-radius: 4px;
   }
 
   input[type=checkbox]:checked {
-    background-color: $color-light-indigo-09;
+    background-color: var(--indigo9);
 
   }
 
   input[type=checkbox]:checked:active {
-    background-color: $color-light-indigo-09;
+    background-color: var(--indigo9);
     box-shadow: 0px 0px 0px 4px #C6D4F9;
     border-radius: 12px;
   }
@@ -1073,16 +956,11 @@ $border-radius: 4px;
   }
 
   input[type=checkbox]:active {
-    background-color: $color-light-indigo-04;
+    background-color: var(--indigo4);
     box-shadow: 0px 0px 0px 4px #C6D4F9;
     border-radius: 12px;
   }
 
-  input[type=checkbox]:hover {
-    background-color: $color-light-indigo-05;
-
-  }
-
   input[type=checkbox]:checked:hover {
     background-color: $color-light-indigo-11;
 
@@ -1106,23 +984,21 @@ $border-radius: 4px;
     }
 
     .tab-pane.active {
-      div {
-        background-color: #FBFCFD !important;
-        border-radius: 0 0 6px 6px !important;
+      ul {
+        background-color: var(--slate3) !important;
       }
 
-      ul {
-        background-color: transparent !important;
-      }
     }
 
     .preview-section-header {
-      background-color: var(--slate2);
+      background-color: var(--slate1);
+      border-radius: 6px 6px 0px 0px;
+      border: 1px solid var(--slate5);
     }
   }
 
   .query-manager-border-color {
-    border-color: $color-light-slate-05 !important;
+    border-color: var(--slate5) !important;
   }
 
   .query-details {
@@ -1137,45 +1013,46 @@ $border-radius: 4px;
       padding: 0;
       margin-right: 12px;
     }
+
     .preview-data-container {
       min-height: 65px;
+      background-color: var(--slate3);
     }
   }
 
-    .rest-methods-url {
-      
-      .url-input-group {
-        .code-hinter.codehinter-default-input {
-          border-radius: 0 6px 6px 0 !important;
-        }
-      }
+  .rest-methods-url {
 
+    .url-input-group {
       .code-hinter.codehinter-default-input {
-        border-style: solid !important;
-        border-color: var(--slate7) !important;
-        // border-radius: 0 6px 6px 0 !important;
-        border-radius: 6px !important;
-  
-        &:focus-within {
-          box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
-          border: 1px solid #3E63DD !important;
-          background-color: #F8FAFF;
-          position: relative;
-          z-index: 1 !important;
-        }
-      }
-  
-      .CodeMirror.CodeMirror-wrap {
-        background-color: transparent !important;
-  
-        .cm-variable,
-        .cm-comment {
-          font-size: 12px !important;
-          color: $color-light-slate-12 !important;
-        }
+        border-radius: 0 6px 6px 0 !important;
       }
     }
 
+    .code-hinter.codehinter-default-input {
+      border-style: solid !important;
+      border-color: var(--slate7) !important;
+      border-radius: 6px !important;
+
+      &:focus-within {
+        box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
+        border: 1px solid var(--indigo9) !important;
+        background-color: #F8FAFF;
+        position: relative;
+        z-index: 1 !important;
+      }
+    }
+
+    .CodeMirror.CodeMirror-wrap {
+      background-color: transparent !important;
+
+      .cm-variable,
+      .cm-comment {
+        font-size: 12px !important;
+        color: var(--slate12) !important;
+      }
+    }
+  }
+
   .rest-api-methods-select-element-container {
     display: flex;
     flex-direction: row;
@@ -1201,22 +1078,22 @@ $border-radius: 4px;
     }
 
     .form-label {
-      color: $color-light-slate-11 !important;
+      color: var(--slate11) !important;
     }
 
     .form-check-label {
-      color: $color-light-slate-12;
+      color: var(--slate12);
     }
 
     .cm-s-monokai.CodeMirror,
     .query-manager-input-elem>input {
-      color: $color-light-slate-12 !important;
+      color: var(--slate12) !important;
     }
 
     .codehinter-default-input:focus-within,
     .query-manager-input-elem>input:focus {
       box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
-      border: 1px solid #3E63DD !important;
+      border: 1px solid var(--indigo9) !important;
       background-color: #F8FAFF;
 
     }
@@ -1232,20 +1109,20 @@ $border-radius: 4px;
 
         .event-handler-display,
         .event-name-display {
-          color: $color-light-slate-12 !important;
+          color: var(--slate12) !important;
         }
 
         .text-danger {
           svg {
             path {
-              fill: $color-light-tomato-09 !important;
+              fill: $color-light-tomato-09  !important;
             }
           }
 
           &:hover {
             svg {
               path {
-                fill: $color-light-tomato-10 !important;
+                fill: $color-light-tomato-10  !important;
               }
             }
           }
@@ -1257,7 +1134,7 @@ $border-radius: 4px;
         background-color: transparent;
         font-weight: bold;
         font-size: 12px !important;
-        color: $color-light-indigo-09 !important;
+        color: var(--indigo9) !important;
 
         &:hover {
           background-color: #E6EDFE !important;
@@ -1275,32 +1152,42 @@ $border-radius: 4px;
     }
 
     .tranformation-label {
-      color: $color-light-slate-12;
+      color: var(--slate12);
     }
 
     .CodeMirror-scroll,
     .CodeMirror-gutters {
-      background-color: $color-light-slate-02 ;
+      background-color: var(--slate1);
     }
 
     .transformation-language-select-wrapper {
-      background: $color-light-slate-04;
-      border: 1px solid $color-light-slate-07 !important;
+      background: var(--slate4);
+      border: 1px solid var(--slate7) !important;
       border-radius: 0;
       border-radius: 6px 0 0 6px;
       height: 32px;
 
       span {
-        color: $color-light-slate-11;
+        color: var(--slate11);
       }
     }
   }
 
   .runjs-editor {
+    background-color: var(--base) !important;
+    border: 1px solid var(--slate5);
+    border-radius: 6px;
+
+    .card-header {
+      background-color: var(--slate1);
+      color: var(--slate9);
+      border-radius: 6px 6px 0px 0px;
+    }
 
     .CodeMirror-scroll,
-    .CodeMirror-gutters {
-      background-color: $color-light-slate-02;
+    .CodeMirror-gutters,
+    .CodeMirror {
+      background-color: var(--slate3) !important;
     }
 
     .CodeMirror-sizer {
@@ -1308,7 +1195,7 @@ $border-radius: 4px;
     }
   }
 
-  .runpy-editor{
+  .runpy-editor {
     .CodeMirror-sizer {
       margin-left: 29px !important;
     }
@@ -1331,7 +1218,7 @@ $border-radius: 4px;
 
     .css-1goth4y-control:active {
       box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
-      border: 1px solid #3E63DD !important;
+      border: 1px solid var(--indigo9) !important;
       border-radius: 6px;
       background-color: #F8FAFF;
     }
@@ -1340,15 +1227,6 @@ $border-radius: 4px;
       cursor: pointer !important;
     }
 
-    .query-hinter {
-
-      .CodeMirror-scroll,
-      .CodeMirror-gutters {
-        background-color: $color-light-slate-02 ;
-
-      }
-    }
-
     .codehinter-plugins {
       .code-hinter.codehinter-plugins {
         height: 32px !important;
@@ -1367,7 +1245,7 @@ $border-radius: 4px;
 
     .code-hinter.codehinter-plugins:focus-within {
       box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
-      border: 1px solid #3E63DD !important;
+      border: 1px solid var(--indigo9) !important;
       border-radius: 6px;
       background-color: #F8FAFF;
     }
@@ -1392,7 +1270,7 @@ $border-radius: 4px;
   .delete-field-option:hover {
     svg {
       path {
-        fill: $color-light-tomato-10 !important;
+        fill: $color-light-tomato-10  !important;
       }
     }
   }
@@ -1400,14 +1278,14 @@ $border-radius: 4px;
   .add-tabs:hover {
     svg {
       path {
-        fill: $color-light-indigo-10 !important;
+        fill: var(--indigo10) !important;
       }
     }
   }
 
   .query-datasource-card-container {
     .query-datasource-card {
-      color: $color-light-slate-12 !important;
+      color: var(--slate12) !important;
       font-weight: 400;
       font-size: 12px;
       height: 32px;
@@ -1425,269 +1303,36 @@ $border-radius: 4px;
 
 }
 
-.query-manager.theme-dark {
-  .breadcrum-rename-query-icon {
-    svg {
-      path {
-        fill: $color-dark-slate-12;
-      }
-    }
+.rest-api-tabpanes-body {
+  .CodeMirror.cm-s-monokai.CodeMirror-wrap {
+    background-color: var(--slate3) !important;
+  }
+}
 
-    &:hover {
-      svg {
-        path {
-          fill: $color-dark-slate-11;
-        }
-      }
-    }
+.runps-editor {
+  .query-hinter {
+    border-radius: 6px !important;
   }
 
-  .preview-section {
-    .preview-default-container {
-      background-color: #272822;
-    }
-
-    .tab-pane {
-      div {
-        background-color: #272822 !important;
-      }
-    }
+  .CodeMirror.cm-s-monokai.CodeMirror-wrap,
+  .cm-s-monokai .CodeMirror-gutters {
+    background-color: var(--slate3) !important;
   }
+}
 
-  .query-manager-border-color {
-    border-color: #ffffff17 !important;
+.rest-api-tabpanes-body {
+  .query-hinter {
+    border-radius: 6px !important;
   }
+}
 
-  .code-hinter.codehinter-default-input,
-  .query-select-dropdown~.css-1tkif1k-container:focus {
-    &:hover {
-      background-color: #282926 !important;
-    }
-  }
+.CodeMirror.cm-s-monokai.CodeMirror-wrap {
+  background-color: transparent !important;
 
-  .query-details {
-    .form-label {
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 20px;
-    }
-  }
-
-  .row.header {
-    .breadcrum {
-      svg {
-        path {
-          fill: #4C5155;
-        }
-      }
-    }
-
-    .query-manager-header-query-name {
-      color: #f4f6fa !important;
-    }
-  }
-
-  .transformation-editor {
-    .css-5g0ati-control {
-      border: 0;
-      border-radius: 0 4px 4px 0;
-      background: #2B3546 !important;
-
-      &:focus-within {
-        border: 1px solid $color-light-indigo-09 !important;
-      }
-    }
-
-    .tranformation-label {
-      color: #fff;
-    }
-
-    .css-ppbcid-singleValue {
-      color: $color-dark-slate-12 !important;
-
-    }
-
-    .CodeMirror-scroll,
-    .CodeMirror-gutters {
-      background-color: inherit;
-    }
-
-    .transformation-language-select-wrapper {
-      background: $color-dark-slate-04;
-      border-style: solid;
-      border-color: #cccccc;
-      border-width: 1px 0 1px 1px !important;
-      height: 32px;
-
-      span {
-        color: $color-dark-slate-11;
-      }
-    }
-
-  }
-
-  .advanced-options-container {
-    .CodeMirror-code {
-      color: $color-dark-grass-11 !important;
-    }
-
-    .form-label {
-      color: #f4f6fa !important;
-    }
-
-    .form-check-label {
-      color: $color-dark-slate-12;
-    }
-
-    .cm-s-monokai.CodeMirror,
-    .query-manager-input-elem>input {
-      color: $color-dark-slate-12 !important;
-    }
-
-    .codehinter-default-input:focus-within,
-    .query-manager-input-elem>input:focus {
-      box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
-      border: 1px solid #3E63DD !important;
-      background-color: inherit;
-    }
-
-    .query-manager-events {
-      .card {
-
-        .event-handler-display,
-        .event-name-display {
-          color: inherit !important;
-        }
-      }
-
-      .text-danger {
-        svg {
-          path {
-            fill: $color-dark-tomato-09 !important;
-          }
-        }
-
-        &:hover {
-          svg {
-            path {
-              fill: $color-dark-tomato-10 !important;
-            }
-          }
-        }
-      }
-
-      .inspector-add-button {
-        background-color: inherit;
-        color: $color-dark-indigo-09;
-
-        &:hover {
-          background-color: inherit;
-          color: inherit;
-        }
-      }
-    }
-  }
-
-  .rest-api-methods-select-element-container {
-    .col.code-hinter-col {
-      margin-bottom: 0 !important;
-    }
-
-    .css-17xqmvg-container {
-      .css-5g0ati-control {
-        cursor: pointer;
-        border-radius: 6px 0 0 6px !important;
-
-        svg {
-          path {
-            fill: $color-dark-slate-11 !important;
-          }
-        }
-
-        &:focus-within {
-          border: 1px solid $color-dark-indigo-09;
-          background-color: inherit;
-          box-shadow: 0px 0px 0px 2px #C6D4F9;
-        }
-      }
-    }
-  }
-
-  .rest-methods-url {
-    .code-hinter.codehinter-default-input {
-      border: solid inherit !important;
-
-      .CodeMirror.cm-s-monokai.CodeMirror-wrap {
-        background-color: transparent !important;
-
-        .cm-variable,
-        .cm-comment {
-          font-size: 12px !important;
-          color: #f8f8f2 !important;
-        }
-      }
-
-      &:focus-within {
-        box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
-        border: 1px solid #3E63DD !important;
-        background-color: inherit !important;
-      }
-    }
-
-  }
-
-  .runjs-editor {
-
-    .CodeMirror-scroll,
-    .CodeMirror-gutters {
-      background-color: inherit;
-    }
-  }
-
-  .query-editor-dynamic-form-container {
-    .query-hinter {
-
-      .CodeMirror-scroll,
-      .CodeMirror-gutters {
-        background-color: transparent !important;
-      }
-    }
-
-    .css-5g0ati-control {
-      cursor: pointer !important;
-    }
-
-    .css-5g0ati-control:active {
-      box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
-      border: 1px solid #3E63DD !important;
-      border-radius: 6px;
-    }
-
-    .code-hinter.codehinter-plugins:focus-within {
-      background-color: inherit;
-    }
-  }
-
-  .delete-field-option:hover {
-    svg {
-      path {
-        fill: $color-dark-tomato-10 !important;
-      }
-    }
-  }
-
-  .add-tabs:hover {
-    svg {
-      path {
-        fill: $color-dark-indigo-10 !important;
-      }
-    }
-  }
-
-  .query-datasource-card-container {
-    .query-datasource-card {
-      color: #fff !important;
-    }
+  .cm-variable,
+  .cm-comment {
+    font-size: 12px !important;
+    color: #f8f8f2 !important;
   }
 }
 
@@ -1757,7 +1402,7 @@ $border-radius: 4px;
   }
 
   input[type=checkbox]:checked+.slider {
-    background-color: #3E63DD;
+    background-color: var(--indigo9);
   }
 
   input[type=checkbox]:checked:hover+.slider {
@@ -1765,7 +1410,7 @@ $border-radius: 4px;
   }
 
   input[type=checkbox]:checked:active+.slider {
-    background-color: #3E63DD;
+    background-color: var(--indigo9);
     box-shadow: 0px 0px 0px 4px #C6D4F9;
   }
 
@@ -1815,7 +1460,7 @@ $border-radius: 4px;
   }
 
   input[type=checkbox]:checked+.slider {
-    background-color: #3E63DD !important;
+    background-color: var(--indigo9) !important;
   }
 
   input[type=checkbox]:checked:hover+.slider {
@@ -1823,7 +1468,7 @@ $border-radius: 4px;
   }
 
   input[type=checkbox]:checked:active+.slider {
-    background-color: #3E63DD !important;
+    background-color: var(--indigo9) !important;
     box-shadow: 0px 0px 0px 4px #C6D4F9 !important;
   }
 }
@@ -1878,4 +1523,28 @@ $border-radius: 4px;
 .query-manager-ds-select-tooltip {
   max-width: 230px;
   overflow-wrap: break-word;
+}
+
+.copilot-section-header {
+  background-color: var(--slate2);
+  border: 1px solid var(--slate5);
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+
+.query-manager-input-elem {
+  input {
+    background-color: var(--base) !important;
+  }
+}
+
+.query-hinter {
+  border: 1px solid var(--slate5);
+  border-radius: 0px 0px 6px 6px;
+
+  .cm-s-base16-light.CodeMirror,
+  .CodeMirror-scroll,
+  .CodeMirror-gutters {
+    background-color: var(--slate3) !important;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/table-component.scss b/frontend/src/_styles/table-component.scss
new file mode 100644
index 0000000000..afc811bfb0
--- /dev/null
+++ b/frontend/src/_styles/table-component.scss
@@ -0,0 +1,642 @@
+@import "./typography.scss";
+@import "./designtheme.scss";
+
+.jet-table.table-component{
+    padding: 8px;
+    &.jet-table {
+      background-color: var(--base) !important;
+      box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
+    }
+    .table-filters{
+      border: 1px solid var(--slate3, #F1F3F5) !important;
+      .card-footer{
+        background-color: inherit !important;
+      }
+    }
+    .card-footer,.card{
+      background-color:var(--base) !important;
+    }
+    .card{
+        border: 1px solid var(--slate3) !important;
+    }
+    .card-footer{
+        padding: 0.75rem;
+    }
+    .card-header{
+      border-bottom: 0 !important;
+    }
+    .table-clear-icon{
+      border-radius: 4px;
+      border: 1px solid  rgba(255, 255, 255, 0.00) !important;
+      background: var(--indigo3, #F0F4FF) !important;
+    }
+    .table-global-search{
+      &:hover{
+        border-radius: 6px;
+        border: 1px solid var(--slate8, #C1C8CD) !important;
+        background: var(--slate4, #ECEEF0) !important;
+      }
+      &:focus-visible{
+        border-radius: 6px;
+        border: 1px solid var(--slate7, #D7DBDF) !important;
+        background: var(--base-base, #FFF) !important;
+        /* Focus rings/Gray/light */
+        box-shadow: 0px 0px 0px 4px var(--slate6) !important;
+      }
+      &:focus-within{
+        border-radius: 6px;
+        border: 1px solid var(--indigo9, #3E63DD) !important;
+        background: var(--indigo2, #F8FAFF) !important;
+
+        /* Selected ring/Indigo/light */
+        box-shadow: 0px 0px 0px 1px var(--indigo6) !important;
+      }
+    }
+    .tr{
+      height: 32px; 
+      .th{
+        .thead-editable-icon-header-text-wrapper{
+          max-width: 100%;
+          min-width: 70%;
+          width: 100%;
+        }
+        .header-text{
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      
+    }
+    .table-row{
+      border-top: 0 !important;
+      border-bottom: 1px solid inherit;
+    }
+    .table-bordered > :not(caption) > * > *{
+      border-width: 0 1px 0 0;
+    }
+}
+
+.jet-data-table {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--slate4) !important; /* Color of the scrollbar thumb */
+    border-radius: 8px; /* Rounded corners of the thumb */
+  }
+  
+  thead {
+    z-index: 2;
+  }
+
+  .table thead th:not(.rdtPrev):not(.rdtSwitch):not(.rdtNext):not(.dow) {
+    display: flex !important;
+  }
+
+  .table-row:hover,
+  .table-row:focus {
+    background: var(--slate4, #ECEEF0) !important;   
+  }
+
+  .table-row.selected {
+    --tblr-table-accent-bg: var(--indigo3, #F0F4FF) !important;
+    background: var(--indigo3, #F0F4FF) !important;
+  }
+
+  td {
+    min-height: 40px;
+    overflow-x: initial;
+
+    .text-container {
+      padding: 0;
+      margin: 0;
+      border: 0;
+      height: 100%;
+      outline: none;
+    }
+  }
+
+  td.regular {
+    min-height: 46px;
+  }
+
+  td.condensed {
+    min-height: 36px;
+  }
+
+  .has-dropdown,
+  .has-multiselect,
+  .has-text,
+  .has-datepicker,
+  .has-actions {
+    padding: 0 5px;
+  }
+
+  .has-text,
+  .has-actions {
+    margin: 0;
+  }
+
+  .wrap-wrapper {
+    white-space: normal !important;
+    word-break: break-all;
+  }
+
+  .scroll-wrapper {
+    overflow-x: auto;
+  }
+
+  .hide-wrapper {
+    overflow-x: hidden !important;
+  }
+
+  .td {
+    // padding: 6px 12px;
+    .text-container:focus-visible,
+    .text-container:focus,
+    .text-container:focus-within,
+    .text-container:hover {
+      outline: none;
+      height: 100%;
+    }
+
+    display: flex !important;
+
+    .td-container {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
+    .td-container:has(.action-button) {
+      height: inherit !important;
+    }
+  }
+
+  td {
+    .text-container:focus {
+      position: sticky;
+      height: 120px;
+      overflow-y: scroll;
+      margin-top: -10px;
+      padding: 10px;
+      margin-left: -9px;
+      background: white;
+      box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
+        rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
+      white-space: initial;
+    }
+
+    .text-container:focus-visible,
+    .text-container:focus,
+    .text-container:focus-within,
+    .text-container:hover {
+      outline: none;
+    }
+
+  }
+
+  td {
+    .text-container::-webkit-scrollbar {
+      background: transparent;
+      height: 0;
+      width: 0;
+    }
+  }
+
+  td::-webkit-scrollbar {
+    background: transparent;
+    height: 0;
+    width: 0;
+  }
+
+  td:hover::-webkit-scrollbar {
+    height: 4px;
+    width: 4px;
+  }
+
+  .th {
+    white-space: normal;
+  }
+
+  // th:after {
+  //   content: " ";
+  //   position: relative;
+  //   height: 0;
+  //   width: 0;
+  // }
+
+  // .sort-desc:after {
+  //   border-left: 5px solid transparent;
+  //   border-right: 5px solid transparent;
+  //   border-top: 5px solid #767676;
+  //   border-bottom: 5px solid transparent;
+  //   left: 0px;
+  //   top: 7px;
+  // }
+
+  // .sort-asc:after {
+  //   border-left: 5px solid transparent;
+  //   border-right: 5px solid transparent;
+  //   border-top: 0px solid transparent;
+  //   border-bottom: 5px solid #767676;
+  //   left: 0px;
+  //   top: 7px;
+  // }
+}
+
+.jet-data-table::-webkit-scrollbar {
+  background: transparent;
+}
+
+.jet-data-table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.jet-data-table:hover {
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.jet-data-table {
+  .th:first-child,td:first-child{
+    border-left: none;
+  }
+  .th:last-child,td:last-child{
+    border-right: none;
+  }
+  overflow: hidden;
+
+  .form-check {
+    margin-bottom: 0;
+  }
+
+  .form-check-inline {
+    margin-right: 0;
+  }
+
+  .table-row {
+    cursor: pointer;
+  }
+
+  thead {
+    position: sticky;
+    top: 0px;
+    display: inline-block;
+
+    tr {
+      border-top: none;
+    }
+  }
+
+  tbody {
+    display: inline-block;
+  }
+}
+
+.jet-data-table {
+  display: inline-block;
+  height: 100%;
+
+  thead {
+    width: 100%;
+  }
+
+  .select-search:not(.is-loading):not(.select-search--multiple) .select-search__value::after {
+    display: none;
+  }
+
+  .custom-select {
+    .select-search:not(.select-search--multiple) .select-search__select {
+      top: 0px;
+      border: solid #9fa0a1 1px;
+    }
+  }
+
+  .tags {
+    width: 100%;
+    min-height: 20px;
+
+    .add-tag-button {
+      display: none;
+    }
+
+    .tag {
+      font-weight: 400;
+      font-size: 0.85rem;
+      letter-spacing: 0.04em;
+      text-transform: none;
+
+      .remove-tag-button {
+        margin-left: 5px;
+        margin-right: -7px;
+        display: none;
+      }
+    }
+
+    .form-control-plaintext {
+      font-size: 12px;
+    }
+
+    .form-control-plaintext:hover,
+    .form-control-plaintext:focus-visible {
+      outline: none;
+    }
+  }
+
+  .tags:hover {
+    .add-tag-button {
+      display: inline-flex;
+    }
+  }
+
+  .tag:hover {
+    .remove-tag-button {
+      display: inline-flex;
+    }
+  }
+
+  .th{
+    .resizer {
+      display: inline-block;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translateX(50%);
+      z-index: 1;
+      touch-action: none;
+      width: 30px;
+      cursor: ew-resize !important;
+    }
+    &:last-child{
+      .resizer{
+        transform: translateX(0%);
+      }
+    }
+  }
+}
+
+// Table set to full width
+.jet-data-table thead {
+  display: flex !important;
+
+  tr {
+    flex-grow: 1;
+    th:last-child {
+      flex: 1 1 auto !important;
+    }
+  }
+}
+
+.table-filters,
+.table-add-new-row {
+  position: absolute;
+  top: 2.85rem;
+  width: 80%;
+  max-width: 700px;
+  margin-right: 10%;
+  right: 0;
+  height: 300px;
+  z-index: 100;
+  background: var(--slate1, #FBFCFD) !important;
+  overflow: hidden;
+}
+
+.table-add-new-row{
+  padding: 8px;
+    color: var(--slate12) !important;
+    .th{
+        background-color: var(--slate3) !important;
+        color: var(--slate12) !important;
+    }
+}
+
+/*
+    table footer
+*/
+// download pop-up in the table widget
+.table-widget-download-popup {
+    background-color: var(--base) !important;
+    color: var(--slate12) !important;
+    padding: 4px;
+    border-radius: 6px;
+    width: fit-content;
+    border: 1px solid var(--slate3) !important;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    .popover-body{
+        color: inherit;
+        border: none;
+    }
+    
+    .table-download-option{
+      display: flex;
+      flex: 1 0 0;
+      flex-direction: column;
+      span{
+        display: flex;
+        padding: 10px 14px !important;
+        align-items: center;
+        gap: 37px;
+        flex: 1 0 0;
+        border-radius: 6px;
+        &:hover{
+            background-color:  var(--slate3, #F1F3F5) !important;
+        }
+        &:focus-visible{
+            background: var(--slate1, #FBFCFD) !important;
+            box-shadow: 0px 0px 0px 4px var(--slate6) !important;
+        }
+      
+      }
+    }
+}
+// hidecolumn popover in table footer
+.dropdown-table-column-hide-common {
+    width: 100%;
+    color : var(--slate12) !important;
+    height: 100% !important;
+    .dropdown-item{
+      display: flex;
+      height: 36px;
+      width: 100%;
+      padding: 10px 14px;
+      border-radius: 6px;
+      gap: 6px;
+      input{
+        width: 16px;
+        height: 16px;
+      }
+    }
+    overflow-wrap: wrap;
+    .dropdown-item{
+      &:hover{
+        background-color:  var(--slate3, #F1F3F5) !important;
+      }
+      &:focus{
+        background: var(--slate1, #FBFCFD) !important;
+        box-shadow: 0px 0px 0px 4px var(--slate6) !important;
+      }
+    }
+}
+.popover:has(.dropdown-table-column-hide-common){
+    border : 1px solid var(--slate3) !important;
+    background-color: var(--base) !important;
+    padding: 4px;
+    border-radius: 6px;
+}
+
+.jet-table.table-component{
+  .pagination-container{
+    input{
+      color :var(--slate12) !important;
+      border: 1px solid var(--slate7, #D7DBDF) !important;
+      background: var(--base, #FFF) !important;
+      &:hover{
+        border: 1px solid var(--slate8, #C1C8CD) !important;
+        background: var(--slate1, #FBFCFD) !important;
+      }
+      &:focus-visible{
+        border: 1px solid var(--slate7, #D7DBDF) !important;
+        background: var(--base, #FFF) !important;
+        /* Focus rings/Gray/light */
+        box-shadow: 0px 0px 0px 4px var(--slate6) !important;
+      }
+      &:active{
+        border: 1px solid var(--indigo9, #3E63DD) !important;
+        background: var(--indigo2, #F8FAFF) !important;
+        /* Focus rings/Indigo/light */
+        box-shadow: 0px 0px 0px 4px var(--indigo6) !important;
+      }
+    }
+    .total-page-number{
+      color: var(--slate11) !important
+    }
+  }
+}
+
+.jet-table {
+  .global-search-field {
+    background: transparent;
+  }
+}
+
+.jet-table-image-column {
+  margin: 0 auto;
+}
+.jet-table{
+  .tr{
+    .th{
+      background: var(--slate3, #F1F3F5) !important;
+      border-bottom: 1px solid var(--slate5, #E6E8EB) !important;
+      border-top: 0 !important;
+      padding: 6px 12px;
+      align-items: center;
+      color: var(--slate12) !important;
+      font-weight: 400 !important;
+      font-size: 12px !important;
+      width: 100%;
+      &:hover{
+        background: var(--slate4, #ECEEF0) !important;
+      }
+      &:focus-within{
+        outline: 0;
+        background: var(--slate4, #ECEEF0) !important;
+        box-shadow: 0px 0px 0px 4px var(--slate6) !important;
+        z-index: 999;
+        margin: 4px 0;
+        
+      }
+      &:first-child:focus-within{
+        outline: 0;
+        border-left: 4px solid  var(--slate6);
+      }
+      &:last-child:focus-within{
+        outline: 0;
+        border-right: 4px solid  var(--slate6);
+      }
+      div:focus-visible{
+        outline: 0 !important;
+      }
+      .header-text{
+        outline: 0;
+      }
+    }
+    .th.resizing-column{
+      color: var(--slate9) !important;
+      background-color: var(--slate4, #ECEEF0) !important; 
+    }
+   
+  }
+  .warning-no-data{
+    padding: 12px;
+    border-radius: 6px;
+    background-color: var(--slate3, #F1F3F5) !important;
+    gap: 10px;
+    .warning-svg-wrapper{
+      display: flex;
+      height: 20px;
+      width: 20px;
+      justify-content: center;
+      padding: 2.5px 1.667px;
+      align-items: center;
+      background: inherit;
+    }
+    .warning-no-data-text{
+      color: var(--slate11) !important;
+      /* Paragraph/Small/Medium */
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+    }
+  }
+
+}
+.table-striped > tbody > tr:nth-of-type(even){
+  background-color: var(--slate2) ;
+  --tblr-table-accent-bg : var(--slate2) ;
+}
+.resizing-column{
+  background-color: var(--slate4, #ECEEF0) !important; 
+  border-right: 4px solid var(--slate5, #E6E8EB) !important;
+}
+.table-striped{
+  .resizing-column{
+    background-color: var(--slate4, #ECEEF0) !important; 
+    --tblr-table-accent-bg : var(--slate4,#ECEEF0) ;
+    border-right: 4px solid var(--slate5, #E6E8EB) !important;
+  }
+}
+.loading-spinner-table-component{
+  transform-origin:center;
+  animation:spinner_AtaB .75s infinite linear;
+  @keyframes spinner_AtaB{100%{transform:rotate(360deg)}};
+  svg{
+    fill: var(--indigo6) !important;
+   
+  }
+}
+.jet-data-table .has-actions{
+  padding: 6px 12px;
+  .justify-content-start{
+    justify-content: center !important;
+  }
+}
+.jet-table.table-component{
+  .isResizing{
+    cursor: ew-resize !important;
+  }
+ .filter-applied-state{
+   top: 0;
+   right: 0;
+   height: fit-content;
+   .filter-applied-svg{
+    position: absolute;
+    top: -5px;
+    right: -5px;
+   }
+ }
+}
+.th:has(.resizer:hover){
+  border-right:4px solid var(--slate5, #ECEEF0) !important; 
+}
\ No newline at end of file
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 1d38f6cbf8..5eaf15fb4d 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -11,7 +11,7 @@
 @import "./dropdown-custom.scss";
 @import "./ui-operations.scss";
 @import 'react-loading-skeleton/dist/skeleton.css';
-
+@import './table-component.scss';
 /* ibm-plex-sans-100 - latin */
 @font-face {
   font-display: swap;
@@ -208,8 +208,10 @@ button {
 }
 
 .navbar {
-  max-height: 45px;
+  max-height: 48px;
   min-height: auto;
+  background-color: var(--base) !important;
+  border-bottom: 1px solid var(--slate5);
 
   .nav-item.active:after {
     bottom: 0 !important;
@@ -267,6 +269,10 @@ button {
 .emoji-mart-scroll+.emoji-mart-bar {
   display: none;
 }
+.accordion-item{
+  border: solid var(--slate5);
+  border-width: 0px 0px 1px 0px;
+}
 
 .accordion-item,
 .accordion-button {
@@ -274,19 +280,31 @@ button {
 }
 
 .accordion-button {
-  font-weight: 400 !important;
+  font-size: 14px;
+  font-weight: 500 !important;
   box-shadow: none !important;
+  color: var(--slate12) !important;
+  padding: 20px 16px !important;
+}
+
+.accordion-button::after {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%2311181C"/></svg>');
+}
+
+.accordion-button:not(.collapsed)::after {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%2311181C"/></svg>');
 }
 
 .accordion-button:not(.collapsed) {
-  padding-bottom: 0 !important;
+  // padding-bottom: 0 !important;
 }
 
 .accordion-body {
+  padding: 6px 16px 20px 16px !important;
   .form-label {
     font-weight: 400;
     font-size: 12px;
-    color: #61656c;
+    color: var(--slate12);
   }
 
   .style-fx {
@@ -295,15 +313,21 @@ button {
 }
 
 .editor {
+  header {
+    position: fixed;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+  }
+
   .header-container {
     max-width: 100%;
-    padding: 0 10px 0 0;
-    min-height: 45px;
+    padding: 0px;
   }
 
   .resizer-select,
   .resizer-active {
-    border: solid 1px $primary !important;
+    border: solid 1px $primary  !important;
 
     .top-right,
     .top-left,
@@ -335,6 +359,11 @@ button {
     margin-bottom: 24px;
     width: 475px;
     margin: auto;
+
+    a {
+      color: var(--indigo9);
+      text-decoration: none;
+    }
   }
 
   .header-query-datasource-card-container {
@@ -439,15 +468,13 @@ button {
     left: 0;
     overflow-x: hidden;
     flex: 1 1 auto;
-    background-color: #fff !important;
+    background-color: var(--base) !important;
     background-clip: border-box;
-    border: solid rgba(0, 0, 0, 0.125);
-    border-width: 0px 1px 3px 0px;
-    margin-top: 0px;
-    padding-top: 0px;
+    margin-top: 48px;
+    padding-top: 8px;
 
     .accordion-item {
-      border: solid rgba(101, 109, 119, 0.16);
+      border: solid var(--slate5);
       border-width: 1px 0px 1px 0px;
     }
 
@@ -511,38 +538,39 @@ button {
   }
 
   .editor-sidebar {
-    height: calc(100% - 45px);
     position: fixed;
     right: 0;
-    overflow-x: hidden;
+    overflow: hidden;
     width: 300px;
     flex: 1 1 auto;
-    top: 45px;
-    border-top: 1px solid var(--slate7);
+    top: 48px;
+    border-left: 1px solid var(--slate5);
     background-color: var(--base);
     background-clip: border-box;
-    border: solid rgba(0, 0, 0, 0.125);
-    border-width: 0px 0px 0px 1px;
+    height: 100vh;
 
-    .nav-tabs .nav-link {
-      color: #3e525b;
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-    }
 
     .inspector {
-      .inspector-add-button {
-        background: inherit;
-      }
+      // .inspector-add-button {
+      //   font-size: 14px;
+      //   font-weight: 500;
+      //   padding: 6px 16px;
+      //   color: var(--slate12);
+      //   border: 1px solid var(--slate7);
+      //   $border-radius: 6px;
+      //   background: white;
+      //   width: 100%;
+      // }
 
-      .inspector-add-button:hover {
-        color: $primary;
-        background: #eef3f9;
-        border-radius: 4px;
-      }
+      // .inspector-add-button:hover {
+      //   color: $primary;
+      //   background: #eef3f9;
+      //   border-radius: 4px;
+      // }
 
       .form-control-plaintext {
         padding: 0;
+        color: var(--slate12);
       }
 
       .header {
@@ -607,30 +635,47 @@ button {
       overflow-x: hidden;
       padding-bottom: 20%;
 
+      ::placeholder {
+        color: var(--slate9);
+
+      }
+
       .component-image-holder {
         border-radius: 0;
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-        border: 1px solid #d2ddec;
         box-sizing: border-box;
         border-radius: 4px;
+        background-color: var(--slate3);
 
         img {
           margin: 0 auto;
         }
 
         &:hover {
-          background: rgba(66, 153, 225, 0.1);
+          background-color: var(--slate4);
+          border: 1px solid var(--slate4, #E6E8EB);
+
+        }
+
+        &:active {
+          background-color: var(--slate4);
+          border: 1px solid var(--slate6, #DFE3E6);
         }
       }
 
       .component-title {
-        display: block;
-        margin-top: 10px;
-        color: #3e525b;
-        font-size: 10px;
+        margin-top: 4px;
         max-width: 100%;
         text-align: center;
         word-wrap: break-word;
+        color: var(--slate12);
+        text-align: center;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 13px;
+        height: 26px;
+        width: 72px;
       }
 
       .component-description {
@@ -641,8 +686,6 @@ button {
   }
 
   .main {
-    // margin-left: 3%;
-    // width: 82%;
     top: 0;
     height: calc(100vh - 84px);
 
@@ -655,7 +698,6 @@ button {
     .canvas-container::-webkit-scrollbar {
       width: 0;
       background: transparent;
-      // height: 0;
     }
 
     .canvas-container::-webkit-scrollbar-track {
@@ -668,7 +710,7 @@ button {
 
     .canvas-container {
       height: 100%;
-      top: 45px;
+      top: 48px;
       position: fixed;
       right: 300px;
       left: 48px;
@@ -694,7 +736,7 @@ button {
       }
 
       .canvas-area {
-        background: #edeff5;
+        background: #F9F9FB;
         margin: 0px auto;
 
         .resizer {
@@ -745,14 +787,14 @@ button {
 
       .canvas-area {
         width: 1280px;
-        background: #edeff5;
+        background: #F9F9FB;
         margin: 0px auto;
         background-size: 80px 80px;
         background-repeat: repeat;
       }
 
       .navigation-area {
-        background-color: #ECEEF0;
+        background: var(--base, #FFF);
         padding: 1rem;
 
         a.page-link {
@@ -771,9 +813,6 @@ button {
         }
       }
 
-      .navigation-area.dark {
-        background-color: #2b3546 !important;
-      }
     }
   }
 }
@@ -788,7 +827,7 @@ button {
 
   .list-group.list-group-transparent.dark .all-apps-link,
   .list-group-item-action.dark.active {
-    background-color: $dark-background !important;
+    background-color: $dark-background  !important;
   }
 }
 
@@ -1043,7 +1082,7 @@ button {
       .launch-button {
         box-sizing: border-box;
         border-radius: 6px;
-        color: var(--base);
+        color: var(--slate12);
         width: 113px;
         height: 28px;
         background: var(--base);
@@ -1301,26 +1340,29 @@ button {
 }
 
 .fx-common {
-  position: absolute;
-  top: -37.5px;
-  right: 0px;
+  margin-right: 12px;
 }
 
 .fx-button {
-  color: #3E63DD;
-  font-family: 'IBM Plex Mono';
-  font-style: italic;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 20px;
+  border-radius: 6px;
+
+  svg {
+    margin: 2px 4px;
+  }
 }
 
-.fx-button:hover,
-.fx-button.active {
-  font-weight: 600;
+.fx-button:hover {
+  background-color: var(--slate4);
   cursor: pointer;
 }
 
+.fx-button.active {
+  background-color: var(--indigo5);
+  cursor: pointer;
+}
+
+
+
 .fx-container-eventmanager {
   position: relative;
 }
@@ -1393,13 +1435,63 @@ button {
   }
 }
 
-.theme-dark {
-  .accordion-button::after {
-    background-image: url("data:image/svg+xml,%3Csvg id='SvgjsSvg1001' width='288' height='288' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs'%3E%3Cdefs id='SvgjsDefs1002'%3E%3C/defs%3E%3Cg id='SvgjsG1008' transform='matrix(1,0,0,1,0,0)'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='/fffff' viewBox='0 0 16 16' width='288' height='288'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' fill='%23ffffff' class='color000 svgShape'%3E%3C/path%3E%3C/svg%3E%3C/g%3E%3C/svg%3E");
+.inspector {
+  .tab-content {
+    overflow-y: auto;
+    // TAB HEADER HEIGHT + FOOTER HEIGHT + Extra padding = 120px
+    height: calc(100vh - 7.5rem);
+    // Hide scrollbar
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
   }
 
-  .inspector {
-    border: 1px solid $dark-background;
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .tab-content::-webkit-scrollbar {
+    display: none;
+  }
+
+  .accordion {
+    margin-bottom: 45px !important;
+  }
+
+  .field-type-vertical-line {
+    position: relative;
+    width: 0;
+    height: 2rem;
+    border-left: 1px solid var(--slate5);
+    content: '';
+    margin-right: -2.75rem;
+
+  }
+
+  .code-hinter-vertical-line {
+    position: relative;
+    width: 0;
+    border-left: 1px solid var(--slate5);
+    content: '';
+    margin-right: 1rem;
+  }
+
+  .code-hinter-wrapper {
+    min-width: 0;
+  }
+
+  .inspector-field-number {
+    background-color: var(--slate1);
+    border: none;
+    color: var(--slate12);
+    width: 8.063rem; //129px
+    border: 1px solid var(--slate7);
+    padding: 6px 10px;
+  }
+}
+
+
+.theme-dark {
+  .accordion-button::after {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none"><path d="M8.19426 3.5L3.80582 3.5C3.22697 3.5 2.86632 4.12791 3.15798 4.6279L5.35221 8.38943C5.64161 8.88556 6.35846 8.88556 6.64787 8.38943L8.8421 4.6279C9.13376 4.12791 8.77311 3.5 8.19426 3.5Z" fill="%23ffffff"/></svg>');
   }
 
   .homepage-body {
@@ -1467,7 +1559,7 @@ button {
   .select-search-dark input {
     width: 224px !important;
     height: 32px !important;
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
   }
 }
 
@@ -1478,7 +1570,7 @@ button {
   .select-search__value input,
   .select-search-dark input {
     height: 32px !important;
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
   }
 }
 
@@ -1532,14 +1624,14 @@ button {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.4285714;
-  color: #232e3c;
-  background-color: #ffffff;
+  color: var(--slate12);
+  background-color: var(--base);
   background-clip: padding-box;
-  border: 1px solid #dadcde;
+  border: 1px solid var(--slate7);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border-radius: $border-radius !important;
+  border-radius: $border-radius  !important;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
@@ -1879,224 +1971,13 @@ button {
   text-align: center;
   color: #888;
 }
-
+// jet-table-footer is common class used in other components other than table
 .jet-table-footer {
   .table-footer {
     width: 100%;
   }
 }
 
-.jet-data-table-header {
-  max-height: 50px;
-}
-
-.jet-data-table {
-  thead {
-    z-index: 2;
-  }
-
-  .table thead th:not(.rdtPrev):not(.rdtSwitch):not(.rdtNext):not(.dow) {
-    display: flex !important;
-  }
-
-  .table-row:hover,
-  .table-row:focus {
-    background: rgba(lightBlue, 0.25);
-  }
-
-  .table-row.selected {
-    --tblr-table-accent-bg: rgba(lightBlue, 0.25);
-    background: rgba(lightBlue, 0.25);
-    font-weight: 500;
-  }
-
-  td {
-    min-height: 40px;
-    overflow-x: initial;
-
-    .text-container {
-      padding: 0;
-      margin: 0;
-      border: 0;
-      height: 100%;
-      outline: none;
-    }
-  }
-
-  td.spacious {
-    min-height: 47px;
-  }
-
-  td.compact {
-    min-height: 40px;
-  }
-
-  .has-dropdown,
-  .has-multiselect,
-  .has-text,
-  .has-datepicker,
-  .has-actions {
-    padding: 0 5px;
-  }
-
-  .has-text,
-  .has-actions {
-    margin: 0;
-  }
-
-  .wrap-wrapper {
-    white-space: normal !important;
-    word-break: break-all;
-  }
-
-  .scroll-wrapper {
-    overflow-x: auto;
-  }
-
-  .hide-wrapper {
-    overflow-x: hidden !important;
-  }
-
-  td {
-
-    .text-container:focus-visible,
-    .text-container:focus,
-    .text-container:focus-within,
-    .text-container:hover {
-      outline: none;
-      height: 100%;
-    }
-
-    display: flex !important;
-
-    .td-container {
-      margin-top: auto;
-      margin-bottom: auto;
-    }
-
-    .td-container:has(.action-button) {
-      height: inherit !important;
-    }
-  }
-
-  td {
-    .text-container:focus {
-      position: sticky;
-      height: 120px;
-      overflow-y: scroll;
-      margin-top: -10px;
-      padding: 10px;
-      margin-left: -9px;
-      background: white;
-      box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
-        rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
-
-      :not(textarea) {
-        white-space: initial;
-      }
-    }
-
-    .text-container:focus-visible,
-    .text-container:focus,
-    .text-container:focus-within,
-    .text-container:hover {
-      outline: none;
-    }
-
-  }
-
-  td {
-    .text-container::-webkit-scrollbar {
-      background: transparent;
-      height: 0;
-      width: 0;
-    }
-  }
-
-  td::-webkit-scrollbar {
-    background: transparent;
-    height: 0;
-    width: 0;
-  }
-
-  td:hover::-webkit-scrollbar {
-    height: 4px;
-    width: 4px;
-  }
-
-  .th {
-    white-space: normal;
-  }
-
-  th:after {
-    content: " ";
-    position: relative;
-    height: 0;
-    width: 0;
-  }
-
-  .sort-desc:after {
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid #767676;
-    border-bottom: 5px solid transparent;
-    left: 0px;
-    top: 7px;
-  }
-
-  .sort-asc:after {
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 0px solid transparent;
-    border-bottom: 5px solid #767676;
-    left: 0px;
-    top: 7px;
-  }
-}
-
-.jet-data-table::-webkit-scrollbar {
-  background: transparent;
-}
-
-.jet-data-table::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.jet-data-table:hover {
-  overflow-x: auto;
-  overflow-y: auto;
-}
-
-.jet-data-table {
-  overflow: hidden;
-
-  .form-check {
-    margin-bottom: 0;
-  }
-
-  .form-check-inline {
-    margin-right: 0;
-  }
-
-  .table-row {
-    cursor: pointer;
-  }
-
-  thead {
-    position: sticky;
-    top: 0px;
-    display: inline-block;
-
-    tr {
-      border-top: none;
-    }
-  }
-
-  tbody {
-    display: inline-block;
-  }
-}
-
 .btn-primary {
   --tblr-btn-color: #{$primary-rgb};
   --tblr-btn-color-darker: #{$primary-rgb-darker};
@@ -2104,7 +1985,7 @@ button {
 }
 
 .form-check-input:checked {
-  background-color: var(--indigo9) !important;
+  background-color: var(--indigo9);
   border-color: rgba(101, 109, 119, 0.24);
 }
 
@@ -2173,89 +2054,6 @@ tr:focus {
   margin-left: 10px;
 }
 
-.jet-data-table {
-  display: inline-block;
-  height: 100%;
-
-  thead {
-    width: 100%;
-  }
-
-  .select-search:not(.is-loading):not(.select-search--multiple) .select-search__value::after {
-    display: none;
-  }
-
-  .custom-select {
-    .select-search:not(.select-search--multiple) .select-search__select {
-      top: 0px;
-      border: solid #9fa0a1 1px;
-    }
-  }
-
-  .tags {
-    width: 100%;
-    min-height: 20px;
-
-    .add-tag-button {
-      display: none;
-    }
-
-    .tag {
-      font-weight: 400;
-      font-size: 0.85rem;
-      letter-spacing: 0.04em;
-      text-transform: none;
-
-      .remove-tag-button {
-        margin-left: 5px;
-        margin-right: -7px;
-        display: none;
-      }
-    }
-
-    .form-control-plaintext {
-      font-size: 12px;
-    }
-
-    .form-control-plaintext:hover,
-    .form-control-plaintext:focus-visible {
-      outline: none;
-    }
-  }
-
-  .tags:hover {
-    .add-tag-button {
-      display: inline-flex;
-    }
-  }
-
-  .tag:hover {
-    .remove-tag-button {
-      display: inline-flex;
-    }
-  }
-
-  .th,
-  .td {
-    .resizer {
-      display: inline-block;
-      height: 100%;
-      position: absolute;
-      right: 0;
-      top: 0;
-      transform: translateX(50%);
-      z-index: 1;
-      touch-action: none;
-      width: 2px;
-
-      &.isResizing {
-        background: rgb(179, 173, 173);
-        width: 5px;
-      }
-    }
-  }
-}
-
 .no-components-box {
   border: 1px dashed #3e525b;
 }
@@ -2283,18 +2081,6 @@ tr:focus {
   padding: 5px;
 }
 
-.table-filters,
-.table-add-new-row {
-  position: absolute;
-  top: 2.85rem;
-  width: 80%;
-  max-width: 700px;
-  margin-right: 10%;
-  right: 0;
-  height: 300px;
-  z-index: 100;
-}
-
 .code-builder {
   border: solid 1px #dadcde;
   border-radius: 2px;
@@ -2334,6 +2120,10 @@ tr:focus {
 }
 
 .popover-body {
+  background-color: var(--base);
+  color: var(--slate12);
+  border-radius: 6px;
+
   .form-label {
     font-size: 12px;
   }
@@ -2716,10 +2506,10 @@ hr {
   width: 100%;
   font-size: 0.875rem;
   font-weight: 400;
-  color: #232e3c;
-  background-color: #ffffff;
+  color: var(--slate9);
+  background-color: var(--base) !important;
   background-clip: padding-box;
-  border: 1px solid #dadcde;
+  border: 1px solid var(--slate7);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -3030,9 +2820,29 @@ input:focus-visible {
 .widget-documentation-link {
   position: fixed;
   bottom: 0;
-  background: #ffffff;
-  width: 100%;
+  background: var(--indigo3);
+  width: 18.75rem; // 300px
   z-index: 1;
+  padding: 12px 18px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+
+  .widget-documentation-link-text {
+    margin-left: 13px;
+    font-weight: 500;
+    color: var(--slate12);
+  }
+
+  &:hover {
+    background: var(--indigo4);
+  }
+
+  a {
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
 
 .components-container {
@@ -3042,7 +2852,27 @@ input:focus-visible {
 }
 
 .column-sort-row {
-  border-radius: 4px;
+  border-radius: 6px;
+  background-color: var(--slate3);
+
+  .event-handler-text {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--slate12);
+    font-weight: 500;
+  }
+
+  .event-name-text {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--slate11);
+    font-weight: 400;
+    border-radius: 4px;
+  }
+
+  .card-body {
+    color: var(--slate12);
+  }
 }
 
 .jet-button {
@@ -3066,8 +2896,33 @@ input:focus-visible {
 
 .sketch-picker {
   position: absolute;
+  left: -192px;
+  top: 0px;
+  border-radius: 6px !important;
+  border: 1px solid var(--slate5, #E6E8EB) !important;
+  background: var(--slate1, #FBFCFD) !important;
+  width: 210px !important; //adjusted with padding
+  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08) !important;
+  color: var(--slate12);
+  .flexbox-fix:nth-child(3) {
+    div:nth-child(1) {
+      input{
+        width: 100% !important;
+      }
+      label{
+        color: var(--slate12) !important;
+      }
+    }
+  }
 }
 
+.boxshadow-picker {
+  .sketch-picker {
+    left: -209px !important;
+  }
+}
+
+
 .color-picker-input {
   border: solid 1px rgb(223, 223, 223);
   cursor: pointer;
@@ -3087,12 +2942,60 @@ input:focus-visible {
 
 .widgets-list {
   --tblr-gutter-x: 0px !important;
+  padding-right: 4px;
+  padding-left: 3px;
+}
+
+.global-settings-width-input-container {
+  position: relative;
+  display: flex;
+  flex: 1;
+
+  input,
+  .dropdown-max-canvas-width-type {
+    border: 1px solid var(--slate7, #3A3F42);
+    background: var(--slate1, #151718);
+    color: var(--slate12);
+    padding: 6px 10px;
+  }
+
+  input {
+    border-radius: 6px 0px 0px 6px;
+
+    &:focus {
+      background-color: var(--base);
+    }
+  }
+
+  .dropdown-max-canvas-width-type {
+    border-radius: 0px 6px 6px 0px;
+    gap: 17px;
+
+
+    &:focus-visible {
+      outline: none;
+    }
+
+  }
 }
 
 .input-with-icon {
   position: relative;
   display: flex;
   flex: 1;
+  margin-right: 10px;
+
+  input {
+    border-radius: 0px 6px 6px 0px !important;
+    color: var(--slate12);
+    background-color: var(--base);
+
+    &:focus-visible {
+      background-color: var(--base);
+
+    }
+
+  }
 
   .icon-container {
     position: absolute;
@@ -3114,6 +3017,7 @@ input:focus-visible {
   border-bottom-right-radius: 3px;
   box-sizing: border-box;
   font-family: "Source Code Pro", monospace;
+  word-break: break-all;
 
   .heading {
     font-weight: 700;
@@ -3144,15 +3048,6 @@ input:focus-visible {
     color: white;
   }
 
-
-  .left-sidebar .left-sidebar-item {
-    border-bottom: 1px solid #333c48;
-  }
-
-  .nav-tabs .nav-link.active {
-    color: #ffffff !important;
-  }
-
   .nav-tabs .nav-link {
     color: #c3c3c3 !important;
   }
@@ -3161,14 +3056,6 @@ input:focus-visible {
     color: #ffffff !important;
   }
 
-  .form-control {
-    border: 1px solid #324156;
-  }
-
-  .card {
-    background-color: #324156;
-  }
-
   .card .table tbody td a {
     color: inherit;
   }
@@ -3199,17 +3086,12 @@ input:focus-visible {
   .DateRangePickerInput__withBorder {
     border: 1px solid #1f2936;
   }
-
   .main .canvas-container .canvas-area {
     background: #2f3c4c;
   }
 
-  .main .canvas-container {
-    background-color: #2f3c4c;
-  }
 
   .main .navigation-area {
-    background-color: #2f3c4c !important;
 
     a.page-link {
       border-radius: 0;
@@ -3233,18 +3115,16 @@ input:focus-visible {
   }
 
   .editor .editor-sidebar .components-container .component-image-holder {
-    background: #2f3c4c !important;
-    border: 1px solid #2f3c4c !important;
-
-    center,
-    .component-title {
-      filter: brightness(0) invert(1);
-    }
+    background: hsl(200, 7.0%, 8.8%); //slate1
+    border-radius: 6px;
+    margin-bottom: 4px;
   }
 
-  .nav-tabs .nav-link:focus,
   .nav-tabs .nav-link:hover {
-    border-color: transparent !important;
+    border-left-color: transparent !important;
+    border-top-color: transparent !important;
+    border-right-color: transparent !important;
+
   }
 
   .modal-content,
@@ -3252,7 +3132,7 @@ input:focus-visible {
     background-color: #1f2936;
 
     .text-muted {
-      color: var(--slate09) !important;
+      color: var(--slate9) !important;
     }
   }
 
@@ -3260,17 +3140,8 @@ input:focus-visible {
     border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
   }
 
-  .canvas-container {
-    background-color: #1f2936;
-  }
-
-  .editor .main .query-pane {
-    border: solid rgba(255, 255, 255, 0.09) !important;
-    border-width: 1px 0px 0px 0px !important;
-  }
-
   .no-components-box {
-    background-color: #1f2936 !important;
+    background-color: var(--slate4) !important;
 
     center {
       color: white !important;
@@ -3287,19 +3158,6 @@ input:focus-visible {
     }
   }
 
-  .editor-sidebar {
-    background-color: #1f2936 !important;
-  }
-
-  .editor-sidebar {
-    border: solid rgba(255, 255, 255, 0.09);
-    border-width: 0px 0px 0px 0px !important;
-
-    .nav-tabs {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
-    }
-  }
-
   .editor .editor-sidebar .nav-tabs .nav-link {
     color: #ffffff;
 
@@ -3308,10 +3166,6 @@ input:focus-visible {
     }
   }
 
-  .jet-table {
-    background-color: #1f2936 !important;
-  }
-
   .jet-container {
     background-color: #1f2936;
   }
@@ -3319,14 +3173,8 @@ input:focus-visible {
   .nav-tabs .nav-item.show .nav-link,
   .nav-tabs .nav-link.active {
     background-color: #2f3c4c;
-    border-color: transparent !important;
   }
 
-  .editor .main .query-pane .query-definition-pane .header {
-    border: solid #ffffff17;
-    border-width: 0px 0px 1px 0px !important;
-    background: #1f2936;
-  }
 
   .left-sidebar {
     .text-muted {
@@ -3352,7 +3200,7 @@ input:focus-visible {
   }
 
   .app-title {
-    color: var(--base) !important;
+    color: var(--slate12) !important;
   }
 
   .RichEditor-root {
@@ -3401,13 +3249,7 @@ input:focus-visible {
     }
   }
 
-  .data-pane {
-    border: solid #ffffff17 !important;
-    border-width: 0px 1px 0px 0px !important;
-  }
-
   .main .query-pane .data-pane .queries-container .queries-header {
-    border: solid #ffffff17 !important;
     border-width: 0px 0px 1px 0px !important;
 
     .text-muted {
@@ -3416,8 +3258,7 @@ input:focus-visible {
   }
 
   .query-pane {
-    background-color: #1f2936 !important;
-    border-top: 2px solid var(--slate4) !important;
+    border-top: 1px solid var(--slate5) !important;
   }
 
   .input-icon .input-icon-addon img {
@@ -3442,11 +3283,6 @@ input:focus-visible {
     }
   }
 
-  .editor .editor-sidebar .inspector .header {
-    border: solid rgba(255, 255, 255, 0.09) !important;
-    border-width: 0px 0px 1px 0px !important;
-  }
-
   .home-page-content {
     .hr-text {
       color: var(--slate11) !important;
@@ -3559,44 +3395,16 @@ input:focus-visible {
     background-color: transparent !important;
   }
 
-  .codehinter-default-input {
-    background-color: transparent;
-    border: 1px solid #333c48;
-  }
-
-  .color-picker-input {
-    border: solid 1px #333c48;
-    height: 36px;
-  }
-
-  .codehinter-query-editor-input {
-    background-color: #272822;
-    border: 1px solid #2c3a4c;
-    border-radius: 0;
-  }
-
   .codehinter-query-editor-input .CodeMirror {
     height: 31px !important;
   }
 
-  .codehinter-query-editor-input .CodeMirror {
-    color: #c3c3c3 !important;
-  }
-
   .select-search:not(.is-loading):not(.select-search--multiple) .select-search__value::after {
     transform: rotate(45deg);
     border-right: 1px solid #ffffff;
     border-bottom: 1px solid #ffffff;
   }
 
-  .widget-documentation-link {
-    background-color: #1f2936;
-  }
-
-  .widget-documentation-link a {
-    color: rgb(66, 153, 225);
-  }
-
   .app-version-name.form-select {
     border-color: $border-grey-dark;
   }
@@ -3633,7 +3441,7 @@ input:focus-visible {
 }
 
 .jet-table-image-column {
-  margin: 0 auto;
+  width: 100%;
 }
 
 .modal-backdrop.show {
@@ -3686,10 +3494,12 @@ input[type="text"] {
 
 .widget-header {
   text-transform: capitalize;
-  margin-top: 12px !important;
-  font-weight: 500;
+  color: var(--slate11, #687076);
   font-size: 12px;
-  line-height: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--slate11);
 }
 
 .query-manager-events {
@@ -3776,14 +3586,6 @@ input[type="text"] {
   cursor: none;
 }
 
-.theme-dark .event-action {
-  filter: brightness(0) invert(1);
-}
-
-.event-action {
-  filter: brightness(0) invert(0);
-}
-
 .disabled {
   pointer-events: none;
   opacity: 0.4;
@@ -3872,7 +3674,7 @@ input[type="text"] {
 
 .nav-tabs .nav-link.active {
   font-weight: 400 !important;
-  color: $primary !important;
+  color: $primary  !important;
 }
 
 .empty {
@@ -4132,10 +3934,6 @@ input[type="text"] {
   }
 }
 
-.navbar .navbar-nav {
-  min-height: 2rem;
-}
-
 .navbar-brand-image {
   height: 1.2rem;
 }
@@ -4210,16 +4008,28 @@ input[type="text"] {
     .modal-content {
       width: 100% !important;
       height: 100%;
+      background-color: var(--slate3) !important;
+      border: none !important;
 
       .modal-body {
         width: 100% !important;
         height: calc(100% - 44px) !important;
+        border: none !important;
 
         .editor-container {
           height: 100%;
 
           .CodeMirror {
             height: 100% !important;
+            border: 1px solid var(--slate5, #26292B);
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
+          }
+
+          .CodeMirror-scroll,
+          .CodeMirror-gutters,
+          .CodeMirror {
+            background-color: var(--slate3) !important;
           }
         }
       }
@@ -4227,6 +4037,9 @@ input[type="text"] {
 
     .portal-header {
       width: 100% !important;
+      border-bottom: 1px solid var(--slate5, #26292B);
+      outline: 1px solid var(--slate5, #26292B);
+      background-color: var(--slate1) !important;
     }
 
     .resize-handle {
@@ -4387,7 +4200,7 @@ input[type="text"] {
 
 .tabs-inspector.dark {
   .nav-link.active {
-    border-bottom: 1px solid $primary !important;
+    border-bottom: 1px solid $primary  !important;
   }
 }
 
@@ -4443,10 +4256,13 @@ input[type="text"] {
 }
 
 .app-name {
-  width: 200px;
-  left: 84px;
-  top: 6px;
-  position: absolute;
+  width: 190px;
+  margin-left: 12px;
+
+  .form-control-plaintext {
+    background-color: var(--base)
+  }
+
 }
 
 .app-name:hover {
@@ -4620,7 +4436,7 @@ input[type="text"] {
   }
 
   input {
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
     padding-left: 1.75rem !important;
   }
 }
@@ -4742,6 +4558,7 @@ input[type="text"] {
   input {
     border-radius: 5px !important;
     background: var(--base);
+    color: var(--slate12);
   }
 
   .modal-main {
@@ -4788,8 +4605,8 @@ input[type="text"] {
 }
 
 .modal-content.home-modal-component.dark {
-  background-color: $bg-dark-light !important;
-  color: $white !important;
+  background-color: $bg-dark-light  !important;
+  color: $white  !important;
 
   .modal-title {
     color: $white  !important;
@@ -4813,8 +4630,6 @@ input[type="text"] {
 
   .modal-header {
     background-color: $bg-dark-light  !important;
-    color: $white  !important;
-    border-bottom: 2px solid #3A3F42 !important;
   }
 
   .btn-close {
@@ -4822,22 +4637,32 @@ input[type="text"] {
   }
 
   .form-control {
-    border-color: $border-grey-dark !important;
+    border-color: $border-grey-dark  !important;
     color: inherit;
   }
 
   input {
-    background-color: $bg-dark-light !important;
+    background-color: $bg-dark-light  !important;
   }
 
   .form-select {
-    background-color: $bg-dark !important;
-    color: $white !important;
-    border-color: $border-grey-dark !important;
+    background-color: $bg-dark  !important;
+    color: $white  !important;
+    border-color: $border-grey-dark  !important;
   }
 
   .text-muted {
-    color: $white !important;
+    color: $white  !important;
+  }
+}
+
+.inspector-align-buttons {
+  .ToggleGroupItem {
+    padding: 2px 10px !important;
+  }
+
+  .ToggleGroupItem[data-state='on'] {
+    padding: 2px 9px !important;
   }
 }
 
@@ -5097,7 +4922,7 @@ input[type="text"] {
 // comment styles ::override
 .editor-sidebar {
   .nav-tabs {
-    border-bottom: none !important;
+    border-bottom: 1px solid var(--slate5) !important;
   }
 
   .nav-tabs .nav-link.active {
@@ -5115,17 +4940,20 @@ input[type="text"] {
   }
 
   .inspector-component-title-input-holder {
-    padding: 16px 8px;
+    padding: 4px 12px;
     margin: 0;
-    padding-bottom: 0;
     display: flex;
     align-items: center;
   }
 }
 
 .comment-card-wrapper {
-  border-top: 0.5px solid #e1e1e1 !important;
+  border-top: 0.5px solid var(--slate5) !important;
   margin-top: -1px !important;
+
+  .card {
+    background-color: var(--base);
+  }
 }
 
 div#driver-highlighted-element-stage,
@@ -5135,15 +4963,15 @@ div#driver-page-overlay {
 }
 
 .dark-theme-walkthrough#driver-popover-item {
-  background-color: $bg-dark-light !important;
+  background-color: $bg-dark-light  !important;
   border-color: rgba(101, 109, 119, 0.16) !important;
 
   .driver-popover-title {
-    color: var(--base) !important;
+    color: var(--slate12) !important;
   }
 
   .driver-popover-tip {
-    border-color: transparent transparent transparent $bg-dark-light !important;
+    border-color: transparent transparent transparent $bg-dark-light  !important;
   }
 
   .driver-popover-description {
@@ -5175,7 +5003,7 @@ div#driver-page-overlay {
 
   .driver-next-btn,
   .driver-prev-btn {
-    color: $primary !important;
+    color: $primary  !important;
   }
 
   .driver-disabled {
@@ -5214,8 +5042,23 @@ div#driver-page-overlay {
   }
 }
 
-.editor .editor-sidebar .inspector .form-control-plaintext {
-  padding: 2px 4px;
+.editor .editor-sidebar .inspector .inspector-edit-widget-name {
+  padding: 4px 8px;
+  color: var(--slate12);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background-color: var(--base);
+
+  &:hover {
+    background-color: var(--slate4);
+    border: 1px solid var(--slate7);
+  }
+
+  &:focus {
+    border: 1px solid var(--indigo9) !important;
+    background-color: var(--indigo2);
+    box-shadow: 0px 0px 0px 1px #C6D4F9;
+  }
 }
 
 .tablr-gutter-x-0 {
@@ -5247,22 +5090,25 @@ div#driver-page-overlay {
   display: flex;
   flex-direction: row;
   width: 158px;
-  height: 32px;
 }
 
 .hinter-canvas-input {
   display: flex;
   width: 120px;
-  height: 32px;
+  height: auto !important;
   margin-top: 1px;
 
   .canvas-hinter-wrap {
-    width: 120px;
-    height: 32px;
+    width: 126x;
+    border: 1px solid var(--slate7);
   }
 }
 
 .hinter-canvas-input {
+  display: flex;
+  padding: 4px;
+  margin-top: 1px;
+
   .CodeMirror-sizer {
     border-right-width: 1px !important;
   }
@@ -5276,39 +5122,31 @@ div#driver-page-overlay {
   .code-hinter-col {
     margin-bottom: 1px !important;
     width: 136px;
-    height: 32px;
+    height: auto !important;
   }
 }
 
 .fx-canvas {
-  padding: 2px;
+  background:var(--slate4);
+  padding: 0px;
   display: flex;
+  height: 32px;
+  width: 32px;
+  border: solid 1px rgba(255, 255, 255, 0.09) !important;
   border-radius: 4px;
   justify-content: center;
   font-weight: 400;
   align-items: center;
 
   div {
-    background: #121212 !important;
+    background:var(--slate4) !important;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 39px;
-    height: 32px;
-  }
-
-  .code-hinter-wrapper {
-    width: 120px !important;
-    height: 32px;
+    height: 30px;
+    padding: 0px;
   }
 }
-
-.fx-canvas-light {
-  div {
-    background: #fff !important;
-  }
-}
-
 .org-name {
   color: var(--slate12) !important;
   font-size: 12px;
@@ -5637,7 +5475,7 @@ div#driver-page-overlay {
   }
 
   .selected-node {
-    border-color: $primary-light !important;
+    border-color: $primary-light  !important;
   }
 
   .json-tree-icon-container .selected-node>svg:first-child {
@@ -5728,7 +5566,7 @@ div#driver-page-overlay {
   }
 
   .selected-node {
-    border-color: $primary-light !important;
+    border-color: $primary-light  !important;
   }
 
   .selected-node .group-object-container .badge {
@@ -5754,10 +5592,6 @@ div#driver-page-overlay {
     }
   }
 
-  // .action-icons-group {
-  //   margin-right: 4rem !important;
-  //   margin-left: 2rem !important;
-  // }
 
   .action-icons-group {
     cursor: pointer;
@@ -5817,7 +5651,8 @@ div#driver-page-overlay {
 }
 
 .realtime-avatars {
-  padding: 0px
+  padding: 0px;
+  margin-left: 8px;
 }
 
 .widget-style-field-header {
@@ -5888,16 +5723,9 @@ div#driver-page-overlay {
 }
 
 .autosave-indicator {
-  color: #868aa5;
-  white-space: nowrap;
-  font-weight: 400;
-  font-size: 12px;
-  letter-spacing: 0.5px;
+  color: var(--slate10, #7E868C);
 }
 
-.autosave-indicator-saving {
-  left: 44%;
-}
 
 .zoom-buttons {
   width: 20px !important;
@@ -6023,40 +5851,40 @@ div#driver-page-overlay {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 
   &:hover {
-      background: var(--slate1);
-      border: 1px solid var(--slate8);
-      -webkit-box-shadow: none;
-      box-shadow: none;
-      outline: none;
+    background: var(--slate1);
+    border: 1px solid var(--slate8);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
   }
 
   &:focus-visible {
-      background: var(--slate1);
-      border: 1px solid var(--slate8);
-      outline: none;
+    background: var(--slate1);
+    border: 1px solid var(--slate8);
+    outline: none;
   }
 
   &:active {
-      background: var(--indigo2);
-      border: 1px solid var(--indigo9);
-      box-shadow: none;
+    background: var(--indigo2);
+    border: 1px solid var(--indigo9);
+    box-shadow: none;
   }
 
   &:disabled {
-      background: var(--slate3);
-      border: 1px solid var(--slate8);
-      color: var(--slate9);
-      cursor: not-allowed;
+    background: var(--slate3);
+    border: 1px solid var(--slate8);
+    color: var(--slate9);
+    cursor: not-allowed;
   }
 }
 
 
 //Kanban board
 .kanban-container.dark-themed {
-  background-color: $bg-dark-light !important;
+  background-color: $bg-dark-light  !important;
 
   .kanban-column {
     .card-header {
@@ -6102,7 +5930,7 @@ div#driver-page-overlay {
     }
 
     .dnd-card.card.card-dark {
-      background-color: $bg-dark !important;
+      background-color: $bg-dark  !important;
     }
   }
 
@@ -6328,7 +6156,7 @@ a.step-item-disabled {
 
 .notification-center-badge {
   top: 0;
-  right: 0;
+  right: 6px;
   position: absolute;
 }
 
@@ -6501,10 +6329,6 @@ input.hide-input-arrows {
 }
 
 
-.dark-theme-placeholder::placeholder {
-  color: #C8C6C6;
-}
-
 .dark-multiselectinput {
   input {
     color: white;
@@ -6790,19 +6614,6 @@ input.hide-input-arrows {
   }
 }
 
-// Table set to full width
-.jet-data-table thead {
-  display: flex !important;
-
-  tr {
-    flex-grow: 1;
-
-    th:last-child {
-      flex: 1 1 auto;
-    }
-  }
-}
-
 tbody {
   width: 100% !important;
   flex-grow: 1;
@@ -7047,34 +6858,6 @@ tbody {
   }
 }
 
-.dropdown-table-column-hide-common {
-  border-radius: 3px;
-  height: auto;
-  overflow-y: scroll;
-  padding: 8px 16px;
-  width: 20rem;
-  max-height: 200px;
-}
-
-.dropdown-table-column-hide {
-  background-color: #ffffff;
-  box-shadow: 0 0 0 2px #0000001a;
-}
-
-.dropdown-table-column-hide-dark-themed {
-  color: #ffffff !important;
-  background-color: #1f2936 !important;
-  box-shadow: 0 0 0 2px #9292921a;
-}
-
-.hide-column-table-text {
-  margin: 0 !important;
-}
-
-.hide-column-name {
-  padding-left: 10px !important;
-}
-
 .rest-methods-url {
   .cm-s-default {
     .cm-string-2 {
@@ -7136,17 +6919,6 @@ tbody {
   }
 }
 
-// download pop-up in the table widget
-.table-widget-download-popup {
-  .cursor-pointer {
-    width: 130px;
-
-    &:hover {
-      font-weight: bolder;
-    }
-  }
-}
-
 .apploader {
   height: 100vh;
 
@@ -7219,7 +6991,7 @@ tbody {
 
     .canvas {
       height: 100vh;
-      background-color: #e6e6e6;
+      background-color: var(--base);
       border-radius: 5px;
       display: flex;
       justify-content: center;
@@ -7360,11 +7132,6 @@ tbody {
     background-color: #1F2936;
   }
 
-  .editor-center {
-    .canvas {
-      background-color: #1F2936;
-    }
-  }
 
   .query-panel {
     .queries {
@@ -7405,9 +7172,13 @@ tbody {
 }
 
 .application-brand {
-  position: relative;
-  display: flex;
-  justify-content: center;
+  a{
+    height: 48px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 .breadcrumb-item.active {
@@ -7437,7 +7208,7 @@ tbody {
 
 .workspace-content-wrapper,
 .database-page-content-wrap {
-  background: var(--slate2);
+  // background: var(--slate2);
 }
 
 .workspace-variable-table-card {
@@ -7844,7 +7615,7 @@ tbody {
 .layout-header {
   position: fixed;
   right: 0;
-  left: 56px;
+  left: 48px;
   z-index: 1;
   background: var(--base);
   height: 64px;
@@ -7919,9 +7690,11 @@ tbody {
   align-items: center;
   width: 176px;
   height: 28px;
-  position: absolute;
-  left: 58%;
   border-radius: 6px;
+
+  .react-select__control {
+    border: none !important;
+  }
 }
 
 .app-version-list-item {
@@ -7945,28 +7718,13 @@ tbody {
   display: block;
 }
 
-.editor .editor-sidebar {
-  border-top: 1px solid var(--slate7);
-}
-
 .editor .navbar-brand {
-  border-right: 1px solid var(--slate7);
-  padding-bottom: 1rem;
-  border-right: 1px solid var(--slate7);
+  border-right: 1px solid var(--slate5);
   width: 48px;
   display: flex;
   justify-content: center;
 }
 
-.theme-dark {
-  .editor .navbar-brand {
-    border-right: 1px solid #333c48;
-  }
-
-  .realtime-avatars {
-    border-right: 1px solid #333c48;
-  }
-}
 
 .modal-backdrop {
   opacity: 0.5;
@@ -7992,12 +7750,13 @@ tbody {
   position: fixed;
   bottom: 0px;
   right: 0;
-  left: 344px;
+  left: 336px;
 }
 
 .home-page-footer {
   height: 52px;
   background-color: var(--base) !important;
+  border-top: 1px solid var(--slate5) !important;
 }
 
 .pagination-container {
@@ -8043,13 +7802,7 @@ tbody {
   .editor-header-actions {
     .current-layout {
       .bg-white {
-        background-color: #232E3C !important;
-      }
-
-      svg {
-        path {
-          fill: white;
-        }
+        background-color: #151718 !important;
       }
     }
   }
@@ -8104,7 +7857,7 @@ tbody {
 .home-page-content {
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
-  background: var(--slate2);
+  // background: var(--slate2);
 }
 
 .application-folders-list {
@@ -8177,6 +7930,11 @@ tbody {
       width: 240px;
       height: 28px;
       flex-direction: row;
+      div{
+        a{
+          text-decoration: none;
+        }
+      }
 
     }
 
@@ -8193,16 +7951,17 @@ tbody {
 }
 
 .release-buttons {
-  height: 45px;
-  margin-bottom: 10px;
+  height: 48px;
+  gap: 4px;
 }
 
 .global-settings-app-wrapper {
-  max-width: 300px;
+  max-width: 190px;
 }
 
 .version-manager-container {
   padding: 0.6rem;
+  width: 158px;
 }
 
 // tooljet db fields styles [ query manager ]
@@ -8273,7 +8032,7 @@ tbody {
   .load div {
     width: 20px;
     height: 20px;
-    background-color: #3E63DD;
+    background-color: var(--indigo9);
     border-radius: 50%;
     margin: 0 5px;
     animation-name: #{up-and-down};
@@ -8850,6 +8609,7 @@ tbody {
   justify-content: center;
   align-items: center;
   height: 28px;
+  text-decoration: none;
 }
 
 .launch-button {
@@ -8858,6 +8618,7 @@ tbody {
   align-items: center;
   color: var(--slate12);
   justify-content: center;
+  text-decoration: none;
 }
 
 .launch-button.tj-disabled-btn {
@@ -9070,7 +8831,8 @@ tbody {
 }
 
 .workspace-variable-header {
-  width: 880px;;
+  width: 880px;
+  ;
   margin: 0 auto;
   display: flex;
   padding: 0;
@@ -9564,7 +9326,8 @@ tbody {
 
 }
 
-.manage-groups-permission-apps, .apps-constant-permission-wrap {
+.manage-groups-permission-apps,
+.apps-constant-permission-wrap {
   border-bottom: 1px solid var(--slate5);
 }
 
@@ -9589,7 +9352,8 @@ tbody {
   height: 72px;
 }
 
-.apps-folder-permission-wrap, .apps-variable-permission-wrap {
+.apps-folder-permission-wrap,
+.apps-variable-permission-wrap {
   height: 44px;
   border-bottom: 1px solid var(--slate5);
 }
@@ -9640,13 +9404,14 @@ tbody {
         border-radius: 6px;
         align-items: center;
 
-      
+
         .select-item:hover {
           background-color: var(--slate3);
         }
 
         .item-renderer {
           align-items: center;
+
           span {
             font-size: 12px;
             color: var(--slate12)
@@ -9719,7 +9484,8 @@ tbody {
 
 
       .item-renderer {
-        align-items: center!important;
+        align-items: center !important;
+
         span {
           font-size: 12px;
           color: var(--slate12)
@@ -9761,7 +9527,6 @@ tbody {
 }
 
 .sso-footer-save-btn {
-  width: 157px;
   height: 40px;
 }
 
@@ -10503,12 +10268,6 @@ tbody {
 // sidebar styles inside editor :: temporary
 .theme-dark,
 .dark-theme {
-  .editor {
-    .left-sidebar {
-      background-color: #232e3c !important;
-    }
-  }
-
   .codehinter.alert-component.workspace-variables-alert-banner {
     color: #ffecbb !important;
     background-color: #3a3f41 !important;
@@ -10960,6 +10719,7 @@ tbody {
 .workspace-variable-table-card {
   height: calc(100vh - 208px);
 }
+
 .workspace-constant-table-card {
   margin: 0 auto;
   width: 880px;
@@ -10993,6 +10753,7 @@ tbody {
     border-width: 0px !important;
   }
 }
+
 .constant-table-wrapper {
   tr {
     border-width: 0px !important;
@@ -11155,7 +10916,7 @@ tbody {
 .marketplace-body {
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
-  background: var(--slate2);
+  // background: var(--slate2);
 }
 
 .plugins-card {
@@ -11181,6 +10942,23 @@ tbody {
 
 .shareable-link {
   .input-group {
+    .input-group-text {
+      border-color: var(--slate7);
+      color: var(--slate12);
+      background-color: var(--base);
+    }
+
+    .app-name-slug-input {
+      input {
+        border-color: var(--grass9);
+      }
+    }
+  }
+
+  .input-group {
+    display: flex;
+    align-items: center;
+
     .tj-app-input textarea {
       width: 600px;
       border-radius: 0px !important;
@@ -11226,7 +11004,7 @@ tbody {
     }
 
     .search-box-wrapper input {
-      color: var(--base) !important;
+      color: var(--slate12) !important;
     }
   }
 }
@@ -11383,21 +11161,24 @@ tbody {
 }
 
 
-#tooltip-for-org-constant-cell, #tooltip-for-org-input-disabled {
+#tooltip-for-org-constant-cell,
+#tooltip-for-org-input-disabled {
   padding: 12px 16px !important;
   white-space: pre-line !important;
   max-width: 500px !important;
   z-index: 1 !important;
+
   .react-tooltip-arrow {
     background: inherit !important;
   }
 }
+
 .query-rename-input {
 
   &:focus,
   &:active {
     box-shadow: 0px 0px 0px 2px #C6D4F9;
-    border: 1px solid var(--light-indigo-09, #3E63DD);
+    border: 1px solid var(--light-indigo-09, var(--indigo9));
   }
 }
 
@@ -11481,12 +11262,341 @@ tbody {
 
 .release-buttons {
   .release-button {
-    padding: 6px 16px;
-    font-size: 14px;
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    width: 84px;
+    height: 28px;
+    cursor: pointer;
   }
 
   .released-button {
     background-color: #F1F3F5;
     color: #C1C8CD;
   }
+
+  .nav-item {
+    background-color: transparent !important;
+  }
 }
+
+// Editor revamp styles
+.main-wrapper {
+  .editor {
+    .header>.navbar {
+      background-color: var(--base) !important;
+      border-bottom: 1px solid var(--slate5);
+      z-index: 10;
+    }
+  }
+}
+
+.component-image-wrapper {
+  background-color: var(--slate3) !important;
+  border-radius: 6px;
+}
+
+.components-container {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.draggable-box-wrapper {
+  height: 86px;
+  width: 72px;
+  margin-bottom: 4px;
+}
+
+.component-card-group-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 22px;
+}
+
+.component-card-group-container {
+  display: flex;
+  row-gap: 12px;
+  flex-direction: column;
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+
+.widgets-manager-header {
+  color: var(--slate12);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  /* 142.857% */
+  margin-top: 16px;
+  margin-bottom: 12px;
+}
+
+.components-container {
+  .tj-input {
+    margin-bottom: 16px;
+  }
+}
+
+.tj-widgets-search-input {
+  width: 266px;
+  height: 32px;
+  border-radius: 6px;
+  background-color: var(--base) !important;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.release-button {
+  color: var(--indigo-01, #FDFDFE);
+  font-family: IBM Plex Sans;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  /* 166.667% */
+  display: flex;
+  padding: 4px 12px;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.editor-header-icon {
+  border-radius: 6px;
+  border: 1px solid var(--bases-transparent, rgba(255, 255, 255, 0.00));
+  background: var(--indigo3);
+  display: flex;
+  padding: 7px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  width: 28px;
+}
+
+.tj-header-avatar {
+  display: flex;
+  font-weight: 500;
+  width: 27px;
+  height: 26px;
+  padding: 4px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  margin-bottom: 0px !important;
+  border-radius: 100% !important;
+  margin-left: -8px;
+  background-color: var(--slate5) !important;
+  color: var(--slate10) !important
+}
+
+.undo-redo-container {
+  position: absolute;
+  top: 10px;
+  display: flex;
+  right: 222px;
+  justify-content: center;
+  align-items: center;
+  height: 28px;
+  gap: 2px;
+
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 28px;
+    width: 28px;
+    border-radius: 6px;
+  }
+}
+
+.sidebar-panel-header {
+  color: var(--slate12);
+  padding-left: 4px;
+}
+
+.modal-content {
+  background: var(--base);
+  color: var(--slate12);
+}
+
+.main-editor-canvas {
+  background-color: var(--base);
+}
+
+.event-manager-popover {
+  border: none;
+  /* Shadow/03 */
+  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+
+  .popover-body {
+    background-color: var(--base);
+    color: var(--slate12);
+    border: 1px solid var(--slate3, #F1F3F5);
+    border-radius: 6px;
+  }
+
+}
+
+.copilot-toggle {
+  font-family: IBM Plex Sans;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  background-color: transparent !important;
+  display: flex;
+  align-items: center;
+}
+
+.copilot-codehinter-wrap {
+  .CodeMirror.cm-s-monokai.CodeMirror-wrap {
+    border-radius: 0px;
+  }
+}
+
+.avatar-list-stacked {
+  display: flex;
+}
+
+.avatar-list-stacked .avatar {
+  margin-right: 0px !important;
+}
+
+.navbar-right-section {
+  border-left: 1px solid var(--slate5);
+}
+
+.modal-header {
+  background-color: var(--base);
+  border-bottom: 1px solid var(--slate5);
+}
+
+.sidebar-debugger {
+  .nav-item {
+    button:hover {
+      border-top-color: transparent;
+      border-left-color: transparent;
+      border-right-color: transparent;
+    }
+  }
+}
+
+.tj-app-version-text {
+  color: var(--pink9);
+}
+
+.left-sidebar-comments {
+  position: absolute;
+  left: 0;
+  bottom: 48px;
+}
+
+.popover-body {
+  background-color: var(--base);
+  color: var(--slate12);
+  border-radius: 6px;
+}
+
+.popover {
+  border: none;
+  border-radius: 6px;
+  border: 1px solid var(--slate3, #F1F3F5);
+  background: var(--slate1, #FBFCFD);
+  box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
+}
+
+.canvas-codehinter-container {
+  .sketch-picker {
+    left: 70px !important;
+    top: 207px;
+  }
+}
+
+.debugger-card-body {
+  margin-top: 8px;
+  margin-bottom: 16px;
+  padding: 0px 16px;
+}
+
+.left-sidebar-header-btn {
+  background-color: var(--base) !important;
+  width: 28px;
+  height: 28px;
+  padding: 7px !important;
+
+  &:focus-visible {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+}
+
+.navbar-seperator {
+  border: 1px solid var(--slate5, #2B2F31);
+  background: var(--slate1, #151718);
+  width: 1px;
+  height: 19px;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.CodeMirror {
+  background: var(--base);
+}
+
+.color-picker-input {
+  border: solid 1px #333c48;
+  height: 36px;
+  background-color: var(--slate1);
+  border: 1px solid var(--slate7);
+
+  &:hover {
+    background-color: var(--slate4);
+    border: 1px solid var(--slate8);
+
+  }
+}
+
+#popover-basic-2 {
+  z-index: 10 !important;
+
+  .sketch-picker {
+    left: 7px;
+    width: 170px !important;
+  }
+}
+.custom-gap-8{
+  gap: 8px;
+}
+.color-slate-11{
+  color: var(--slate11) !important;
+}
+.custom-gap-6{
+  gap:6px
+}
+.custom-gap-2{
+  gap:2px
+}
+.custom-gap-4{
+  gap: 4px;
+}
+.text-black-000{
+  color: var(--text-black-000) !important;
+}
+.custom-gap-12{
+  gap:12px
+}
+#inspector-tabpane-properties{
+  .accordion {
+    .accordion-item:last-child{
+      border-bottom: none !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/_styles/typography.scss b/frontend/src/_styles/typography.scss
index 550146767f..e98d1306cb 100644
--- a/frontend/src/_styles/typography.scss
+++ b/frontend/src/_styles/typography.scss
@@ -74,6 +74,12 @@
     margin: 0;
     padding: 0;
 }
+.tj-header-h7{
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 28px;
+
+}
 
 // paragraph texts
 
diff --git a/frontend/src/_styles/widgets/multi-select.scss b/frontend/src/_styles/widgets/multi-select.scss
index a745bd543f..5929ec0ac7 100644
--- a/frontend/src/_styles/widgets/multi-select.scss
+++ b/frontend/src/_styles/widgets/multi-select.scss
@@ -109,7 +109,7 @@
       border: 1px solid var(--slate5);
       border-radius: 5px;
       background-color: var(--slate8);
-      color: var(--base);
+      color: var(--slate12);
 
       .selected-count {
         padding-right: 5px;
diff --git a/frontend/src/_ui/AlertDialog/index.jsx b/frontend/src/_ui/AlertDialog/index.jsx
index eeda97c163..0e0d490326 100644
--- a/frontend/src/_ui/AlertDialog/index.jsx
+++ b/frontend/src/_ui/AlertDialog/index.jsx
@@ -20,10 +20,7 @@ export default function AlertDialog({
         `animation-fade ${!checkForBackground ? 'home-modal-component' : 'home-modal-component-editor'} ${
           darkMode && 'dark-theme'
         }`,
-        customClassName,
-        {
-          dark: checkForBackground && darkMode,
-        }
+        customClassName
       )}
       show={show}
       size={size}
diff --git a/frontend/src/_ui/AppButton/AppButton.jsx b/frontend/src/_ui/AppButton/AppButton.jsx
index fa3ea45bfc..e72b7b3f1c 100644
--- a/frontend/src/_ui/AppButton/AppButton.jsx
+++ b/frontend/src/_ui/AppButton/AppButton.jsx
@@ -38,10 +38,12 @@ export const ButtonBase = function ButtonBase(props) {
       {...restProps}
       className={`tj-base-btn ${mapBaseSize[size]}  ${className}`}
       disabled={disabled}
-      style={{
-        ...customStyles,
-        backgroundColor: backgroundColor && backgroundColor,
-      }}
+      style={
+        ({
+          backgroundColor: backgroundColor && backgroundColor,
+        },
+        { ...restProps.style, ...customStyles })
+      }
       type={isAnchor ? undefined : type || 'button'}
     >
       {!isLoading && leftIcon && (
@@ -66,7 +68,7 @@ export const ButtonBase = function ButtonBase(props) {
       )}
       {!isLoading && rightIcon && (
         <span className="tj-btn-right-icon">
-          {<SolidIcon className={iconCustomClass} fill={fill} name={rightIcon} />}
+          {<SolidIcon className={iconCustomClass} fill={fill} name={rightIcon} width={iconWidth} />}
         </span>
       )}
     </Element>
diff --git a/frontend/src/_ui/AppButton/AppButton.scss b/frontend/src/_ui/AppButton/AppButton.scss
index d9d693e6c7..7f61321213 100644
--- a/frontend/src/_ui/AppButton/AppButton.scss
+++ b/frontend/src/_ui/AppButton/AppButton.scss
@@ -62,81 +62,91 @@
 
 /* Variants */
 .tj-primary-btn {
-    background: #3E63DD;
-    border: none;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.00);
+    background: var(--indigo9) ;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
     color: #FDFDFE;
-
     &:hover {
-        background: #3A5CCC;
-        color: #FDFDFE;
-
+        border: 1px solid rgba(255, 255, 255, 0.00);
+        background: var(--indigo10) ;
+        color: #FDFDFE; 
     }
 
     &:focus-visible {
-        box-shadow: 0px 0px 0px 4px var(--indigo6);
-        background: #3A5CCC;
+        border: 1px solid rgba(255, 255, 255, 0.00);
         outline: none;
-        color: #FDFDFE;
-
+        background: var(--indigo10);
     }
 
 
     &:active {
-        background: #3451B2;
-        box-shadow: none;
-        color: #F0F4FF;
+        background: var(--slate1);
+        border: 1px solid rgba(255, 255, 255, 0.00);
+        box-shadow: 0px 0px 0px 4px var(--indigo6);
+        background: var(--indigo9);
     }
 
 }
 
 .tj-secondary-btn {
-    background: var(--indigo3);
-    border: none;
-    color: var(--indigo11);
-
+    color: var(--indigo9) !important;
+    border: 1px solid rgba(255, 255, 255, 0.00) !important;
+    background: var(--indigo3, #F0F4FF) !important;
     &:hover {
-        background: var(--indigo4);
-        color: var(--indigo10);
+        color: var(--indigo10) !important;
+        border: 1px solid rgba(255, 255, 255, 0.00) !important;
+        background: var(--indigo4, #E6EDFE) !important;
     }
 
     &:active {
-        background: var(--indigo5);
-        color: var(--indigo8);
+        color: var(--indigo9) !important;
         box-shadow: none;
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.00) !important;
+        background: var(--indigo5, #D9E2FC) !important;
     }
 
     &:focus-visible {
-        background: #E6EDFE;
-        box-shadow: 0px 0px 0px 4px var(--indigo6);
-        color: var(--indigo10);
+        color: var(--indigo10) !important;
         outline: none;
-    }
-}
+        border: 1px solid rgba(255, 255, 255, 0.00) !important;
+        background: var(--indigo3, #F0F4FF) !important;
+
+        /* Focus rings/Indigo/light */
+        box-shadow: 0px 0px 0px 4px var(--indigo6);
+    }}
 
 .tj-tertiary-btn {
-    background: transparent;
-    border: 1px solid var(--slate7);
     color: var(--slate12);
+    border: 1px solid var(--slate7) !important;
+    background: var(--slate1) !important;
 
     &:hover {
-        background: var(--slate4);
-        color: var(--slate11);
+        color: var(--slate11) !important;
+        border: 1px solid var(--slate7, #D7DBDF) !important;
+        background: var(--slate4, #ECEEF0) !important;
+    }
+
+    &:active,&:focus,&.always-active-btn {
+        border: 1px solid var(--slate7, #D7DBDF) !important;
+        background: var(--slate5) !important;
+        color: var(--slate12);
         border: 1px solid var(--slate7);
     }
 
     &:active {
         background: transparent;
         box-shadow: none;
-        border: 1px solid var(--slate12);
-        color: var(--slate12);
+        color: var(--slate12) !important;
     }
 
     &:focus-visible {
-        background: transparent;
-        color: var(--slate11);
-        outline: 1px solid var(--slate8);
-        box-shadow: 0px 0px 0px 4px var(--slate6);
+        color: var(--slate11) !important;
+        box-shadow: 0px 0px 0px 4px var(--slate6) !important;
         outline: none;
+        border: 1px solid var(--slate8, #C1C8CD) !important;
+        background: var(--slate1, #FBFCFD) !important;
     }
 }
 
@@ -162,6 +172,7 @@
         box-shadow: 0px 0px 0px 4px var(--indigo6);
         outline: none;
     }
+
     &:focus {
         box-shadow: 0px 0px 0px 4px var(--indigo6);
     }
@@ -173,20 +184,29 @@
     background: transparent;
 
     &:hover {
+        background: var(--slate4, #ECEEF0) !important;
         color: var(--slate11);
-        background: var(--slate4, #ECEEF0);
+        border: 1px solid rgba(255, 255, 255, 0.00) !important;
     }
-
-    &:active {
-        color: var(--slate12);
-    }
-
-    &:focus-visible {
-        color: var(--slate11);
-        background: var(--base);
-        border: none;
-        box-shadow: 0px 0px 0px 4px var(--slate6);
+    &:focus-visible{
+        color: var(--slate11) !important;
+        // background: var(--base);
+        // border: none;
+        box-shadow: 0px 0px 0px 4px var(--slate6) !important;
         outline: none;
+        border: 1px solid rgba(255, 255, 255, 0.00) !important;
+        background: var(--slate1, #FBFCFD) !important;
+    }
+    &:active,&:focus,&.always-active-btn {
+        color: var(--slate12) !important;
+        border: 1px solid rgba(255, 255, 255, 0.00) !important;
+        background: var(--slate5, #E6E8EB) !important;
+        box-shadow: none !important;
+    }
+    &:disabled{
+        background: rgba(255, 255, 255, 0.00) !important;
+        border: 1px solid rgba(255, 255, 255, 0.00) !important;
+        color: var(--slate8) !important;
     }
 }
 
diff --git a/frontend/src/_ui/Avatar/index.jsx b/frontend/src/_ui/Avatar/index.jsx
index 2ce8046c78..10470fbca5 100644
--- a/frontend/src/_ui/Avatar/index.jsx
+++ b/frontend/src/_ui/Avatar/index.jsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { Tooltip } from 'react-tooltip';
 
 // eslint-disable-next-line no-unused-vars
-const Avatar = ({ text, image, avatarId, title = '', borderColor = '', borderShape, indexId = 0, className }) => {
+const Avatar = ({ text, image, avatarId, title = '', borderShape, indexId = 0, className, realtime = false }) => {
   const formattedTitle = String(title).toLowerCase().replace(/\s+/g, '-');
   const [avatar, setAvatar] = React.useState();
 
@@ -26,7 +26,7 @@ const Avatar = ({ text, image, avatarId, title = '', borderColor = '', borderSha
       style={{
         ...(image || avatar ? { backgroundImage: `url(${avatar ?? image})` } : {}),
       }}
-      className={cx(`animation-fade avatar tj-avatar ${className}`, {
+      className={cx(`animation-fade avatar tj-text-xsm ${className} ${realtime ? 'tj-header-avatar' : 'tj-avatar '}`, {
         'avatar-rounded': borderShape === 'rounded',
       })}
       data-cy="avatar-image"
diff --git a/frontend/src/_ui/FolderList/FolderList.scss b/frontend/src/_ui/FolderList/FolderList.scss
index a1e16febeb..6621e42818 100644
--- a/frontend/src/_ui/FolderList/FolderList.scss
+++ b/frontend/src/_ui/FolderList/FolderList.scss
@@ -58,5 +58,5 @@
 }
 
 .tj-list-item-selected {
-    background-color: var(--indigo4);
+    background-color: var(--slate5);;
 }
\ No newline at end of file
diff --git a/frontend/src/_ui/HttpHeaders/QueryEditor.jsx b/frontend/src/_ui/HttpHeaders/QueryEditor.jsx
index 2f34e83a66..d4b50ee3dc 100644
--- a/frontend/src/_ui/HttpHeaders/QueryEditor.jsx
+++ b/frontend/src/_ui/HttpHeaders/QueryEditor.jsx
@@ -30,7 +30,6 @@ export default ({ options, addNewKeyValuePair, removeKeyValuePair, keyValuePairV
               </div>
             </div>
             <ButtonSolid variant="ghostBlue" size="sm" className="py-3" onClick={() => removeKeyValuePair(index)}>
-              {/* <img src="assets/images/icons/trash-light.svg" className="h-3" /> */}
               <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   fillRule="evenodd"
@@ -43,9 +42,6 @@ export default ({ options, addNewKeyValuePair, removeKeyValuePair, keyValuePairV
           </div>
         );
       })}
-      {/* <ButtonSolid variant="ghostBlue" size="sm" onClick={addNewKeyValuePair}>
-        + Add header
-      </ButtonSolid> */}
       <ButtonSolid variant="ghostBlue" size="sm" onClick={addNewKeyValuePair}>
         <AddRectangle width="15" fill="#3E63DD" opacity="1" secondaryFill="#ffffff" />
         &nbsp;&nbsp; Add header
diff --git a/frontend/src/_ui/Icon/bulkIcons/Edit.jsx b/frontend/src/_ui/Icon/bulkIcons/Edit.jsx
new file mode 100644
index 0000000000..eef9fbfcb5
--- /dev/null
+++ b/frontend/src/_ui/Icon/bulkIcons/Edit.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Edit = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="viewbox" fill="none">
+    <path
+      d="M10.5333 1.83492C11.202 1.16619 12.2862 1.16619 12.9549 1.83492L14.1658 3.04575C14.8345 3.71448 14.8345 4.79869 14.1658 5.46742L13.0922 6.54099C13.0079 6.49925 12.9193 6.45413 12.8273 6.40572C12.2085 6.07993 11.4741 5.62268 10.9261 5.07463C10.378 4.52658 9.92079 3.79223 9.595 3.1734C9.54659 3.08144 9.50145 2.99276 9.45971 2.90848L10.5333 1.83492Z"
+      fill={fill}
+    />
+    <path
+      d="M10.1404 5.8603C10.7889 6.50883 11.6137 7.01926 12.2669 7.36627L8.04513 11.5881C7.78314 11.8501 7.44324 12.02 7.07646 12.0724L4.53371 12.4357C3.96865 12.5164 3.48432 12.032 3.56504 11.467L3.92829 8.92423C3.98069 8.55745 4.15064 8.21756 4.41262 7.95557L8.63443 3.73376C8.98144 4.38696 9.49187 5.21176 10.1404 5.8603Z"
+      fill={fill}
+    />
+    <path
+      d="M1.88954 13.5556C1.58272 13.5556 1.33398 13.8043 1.33398 14.1112C1.33398 14.418 1.58272 14.6667 1.88954 14.6667H14.1118C14.4186 14.6667 14.6673 14.418 14.6673 14.1112C14.6673 13.8043 14.4186 13.5556 14.1118 13.5556H1.88954Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Edit;
diff --git a/frontend/src/_ui/Icon/bulkIcons/Fx.jsx b/frontend/src/_ui/Icon/bulkIcons/Fx.jsx
new file mode 100644
index 0000000000..c9dc177fc1
--- /dev/null
+++ b/frontend/src/_ui/Icon/bulkIcons/Fx.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Fx = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox={viewBox} fill={fill}>
+    <path
+      d="M5.44373 19.8058C5.21414 19.8058 5.00096 19.762 4.80418 19.6746C4.60739 19.5981 4.41061 19.4778 4.21382 19.3138C4.02797 19.1498 3.82572 18.9421 3.60707 18.6907C3.38842 18.4501 3.13698 18.1604 2.85273 17.8215L2 16.7884L3.1971 15.8537L5.34533 18.3463L5.60771 18.2807L7.09999 9.29421H4.24662L4.4762 7.86752H7.32958L7.59195 6.29325C7.69035 5.70289 7.94179 5.20547 8.34629 4.80097C8.7508 4.39646 9.33022 4.19421 10.0846 4.19421H12.9543L12.7247 5.6209H9.46141L9.08424 7.86752H12.364L12.1344 9.29421H8.85465L7.44437 17.7395C7.33504 18.3846 7.12186 18.8874 6.80482 19.2482C6.48778 19.6199 6.03408 19.8058 5.44373 19.8058Z"
+      fill={fill}
+    />
+    <path
+      d="M13.9318 16.526C13.3743 16.526 12.9479 16.3511 12.6527 16.0013C12.3685 15.6514 12.2264 15.1267 12.2264 14.427C12.2264 14.2849 12.2318 14.1482 12.2428 14.017C12.2537 13.8749 12.2701 13.6945 12.292 13.4759L13.7843 13.3283C13.7624 13.4485 13.7515 13.5633 13.7515 13.6727C13.7515 13.7711 13.7515 13.864 13.7515 13.9514C13.7515 14.3887 13.8007 14.7112 13.899 14.919C13.9974 15.1157 14.1724 15.2141 14.4238 15.2141C14.7846 15.2141 15.0852 15.0447 15.3257 14.7058C15.5662 14.3669 15.7576 13.9569 15.8997 13.4759C16.0527 12.9948 16.1566 12.4865 16.2113 11.9508C16.2769 11.4151 16.3097 10.9505 16.3097 10.5569C16.3097 10.2945 16.2987 10.0321 16.2769 9.76977C16.2659 9.50739 16.2331 9.28328 16.1785 9.09742L15.9489 8.98263L13.5383 10.5405L12.8331 9.54019L13.9482 8.70386C14.3637 8.39775 14.7572 8.15176 15.1289 7.96591C15.5007 7.76913 15.8669 7.67074 16.2277 7.67074C16.5556 7.67074 16.8125 7.74726 16.9984 7.90032C17.1952 8.04244 17.3482 8.23922 17.4576 8.49067C17.5669 8.74212 17.6379 9.03729 17.6707 9.3762C17.7035 9.70417 17.7199 10.0485 17.7199 10.4093H17.8347C18.0643 9.4254 18.3814 8.72572 18.7859 8.31029C19.2013 7.88392 19.7097 7.67074 20.3109 7.67074C20.8576 7.67074 21.273 7.85112 21.5572 8.21189C21.8524 8.57266 22 9.08649 22 9.75337C22 9.87363 21.9945 10.0103 21.9836 10.1633C21.9836 10.3164 21.9727 10.5022 21.9508 10.7209L20.4585 10.8685C20.4695 10.7373 20.4749 10.617 20.4749 10.5077C20.4859 10.3984 20.4913 10.3 20.4913 10.2125C20.4913 9.7971 20.4421 9.49099 20.3437 9.29421C20.2453 9.08649 20.0704 8.98263 19.819 8.98263C19.4582 8.98263 19.1576 9.15209 18.917 9.49099C18.6765 9.81896 18.4797 10.2235 18.3267 10.7045C18.1846 11.1746 18.0807 11.672 18.0151 12.1968C17.9605 12.7106 17.9331 13.1534 17.9331 13.5251C17.9331 13.8093 17.9441 14.0936 17.9659 14.3778C17.9987 14.6511 18.0424 14.8916 18.0971 15.0993L18.3103 15.2141L20.6389 13.5743L21.3769 14.5418L20.5569 15.2633C19.9994 15.7553 19.5183 16.0887 19.1138 16.2637C18.7203 16.4386 18.365 16.526 18.0479 16.526C17.7527 16.526 17.5068 16.4604 17.31 16.3292C17.1132 16.1871 16.9601 15.9958 16.8508 15.7553C16.7415 15.5038 16.665 15.2141 16.6212 14.8862C16.5775 14.5473 16.5556 14.1865 16.5556 13.8038L16.4408 13.7875C16.2113 14.7714 15.8888 15.4765 15.4733 15.9029C15.0579 16.3183 14.5441 16.526 13.9318 16.526Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Fx;
diff --git a/frontend/src/_ui/Icon/solidIcons/AlignCenter.jsx b/frontend/src/_ui/Icon/solidIcons/AlignCenter.jsx
new file mode 100644
index 0000000000..cff1b6ed92
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/AlignCenter.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const AlignCenter = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 8 8" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.25 0.0625C2.00838 0.0625 1.8125 0.258375 1.8125 0.5C1.8125 0.741625 2.00838 0.9375 2.25 0.9375H5.75C5.99162 0.9375 6.1875 0.741625 6.1875 0.5C6.1875 0.258375 5.99162 0.0625 5.75 0.0625H2.25ZM0.5 2.39583C0.258375 2.39583 0.0625 2.59171 0.0625 2.83333C0.0625 3.07496 0.258375 3.27083 0.5 3.27083H7.5C7.74162 3.27083 7.9375 3.07496 7.9375 2.83333C7.9375 2.59171 7.74162 2.39583 7.5 2.39583H0.5ZM1.8125 5.16667C1.8125 4.92504 2.00838 4.72917 2.25 4.72917H5.75C5.99162 4.72917 6.1875 4.92504 6.1875 5.16667C6.1875 5.40829 5.99162 5.60417 5.75 5.60417H2.25C2.00838 5.60417 1.8125 5.40829 1.8125 5.16667ZM0.5 7.0625C0.258375 7.0625 0.0625 7.25838 0.0625 7.5C0.0625 7.74162 0.258375 7.9375 0.5 7.9375H7.5C7.74162 7.9375 7.9375 7.74162 7.9375 7.5C7.9375 7.25838 7.74162 7.0625 7.5 7.0625H0.5Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default AlignCenter;
diff --git a/frontend/src/_ui/Icon/solidIcons/AlignJustify.jsx b/frontend/src/_ui/Icon/solidIcons/AlignJustify.jsx
new file mode 100644
index 0000000000..c81f0a2b30
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/AlignJustify.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const AlignJustify = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => {
+  return (
+    <svg width={width} height={width} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2 8H14M2 12H14M2 4H8H14H2Z"
+        stroke={'#8092AC'}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AlignJustify;
diff --git a/frontend/src/_ui/Icon/solidIcons/AlignLeft.jsx b/frontend/src/_ui/Icon/solidIcons/AlignLeft.jsx
new file mode 100644
index 0000000000..c7e176488f
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/AlignLeft.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const AlignLeft = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 9 8" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.16602 0.0625C0.924391 0.0625 0.728516 0.258375 0.728516 0.5C0.728516 0.741625 0.924391 0.9375 1.16602 0.9375H4.66602C4.90764 0.9375 5.10352 0.741625 5.10352 0.5C5.10352 0.258375 4.90764 0.0625 4.66602 0.0625H1.16602ZM1.16602 2.39583C0.924391 2.39583 0.728516 2.59171 0.728516 2.83333C0.728516 3.07496 0.924391 3.27083 1.16602 3.27083H8.16602C8.40764 3.27083 8.60352 3.07496 8.60352 2.83333C8.60352 2.59171 8.40764 2.39583 8.16602 2.39583H1.16602ZM0.728516 5.16667C0.728516 4.92504 0.924391 4.72917 1.16602 4.72917H4.66602C4.90764 4.72917 5.10352 4.92504 5.10352 5.16667C5.10352 5.40829 4.90764 5.60417 4.66602 5.60417H1.16602C0.924391 5.60417 0.728516 5.40829 0.728516 5.16667ZM1.16602 7.0625C0.924391 7.0625 0.728516 7.25838 0.728516 7.5C0.728516 7.74162 0.924391 7.9375 1.16602 7.9375H8.16602C8.40764 7.9375 8.60352 7.74162 8.60352 7.5C8.60352 7.25838 8.40764 7.0625 8.16602 7.0625H1.16602Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default AlignLeft;
diff --git a/frontend/src/_ui/Icon/solidIcons/AlignRight.jsx b/frontend/src/_ui/Icon/solidIcons/AlignRight.jsx
new file mode 100644
index 0000000000..5539378973
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/AlignRight.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const AlignRight = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 5.25C11.5858 5.25 11.25 5.58579 11.25 6C11.25 6.41421 11.5858 6.75 12 6.75H18C18.4142 6.75 18.75 6.41421 18.75 6C18.75 5.58579 18.4142 5.25 18 5.25H12ZM6 9.25C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H18C18.4142 10.75 18.75 10.4142 18.75 10C18.75 9.58579 18.4142 9.25 18 9.25H6ZM11.25 14C11.25 13.5858 11.5858 13.25 12 13.25H18C18.4142 13.25 18.75 13.5858 18.75 14C18.75 14.4142 18.4142 14.75 18 14.75H12C11.5858 14.75 11.25 14.4142 11.25 14ZM6 17.25C5.58579 17.25 5.25 17.5858 5.25 18C5.25 18.4142 5.58579 18.75 6 18.75H18C18.4142 18.75 18.75 18.4142 18.75 18C18.75 17.5858 18.4142 17.25 18 17.25H6Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default AlignRight;
diff --git a/frontend/src/_ui/Icon/solidIcons/ArrowBackUp.jsx b/frontend/src/_ui/Icon/solidIcons/ArrowBackUp.jsx
new file mode 100644
index 0000000000..ff2217c2a8
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/ArrowBackUp.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ArrowBackUp = ({ fill = '#697177', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.47271 2.86128C6.73306 3.12163 6.73306 3.54374 6.47271 3.80409L4.94411 5.33268H10.668C11.552 5.33268 12.3999 5.68387 13.025 6.30899C13.6501 6.93411 14.0013 7.78196 14.0013 8.66602C14.0013 9.55007 13.6501 10.3979 13.025 11.023C12.3999 11.6482 11.552 11.9993 10.668 11.9993H10.0013C9.63311 11.9993 9.33463 11.7009 9.33463 11.3327C9.33463 10.9645 9.63311 10.666 10.0013 10.666H10.668C11.1984 10.666 11.7071 10.4553 12.0822 10.0802C12.4573 9.70516 12.668 9.19645 12.668 8.66602C12.668 8.13558 12.4573 7.62687 12.0822 7.2518C11.7071 6.87673 11.1984 6.66602 10.668 6.66602H4.94411L6.47271 8.19461C6.73306 8.45496 6.73306 8.87707 6.47271 9.13742C6.21236 9.39777 5.79025 9.39777 5.5299 9.13742L2.86323 6.47075C2.60288 6.2104 2.60288 5.78829 2.86323 5.52794L5.5299 2.86128C5.79025 2.60093 6.21236 2.60093 6.47271 2.86128Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default ArrowBackUp;
diff --git a/frontend/src/_ui/Icon/solidIcons/ArrowForwardUp.jsx b/frontend/src/_ui/Icon/solidIcons/ArrowForwardUp.jsx
new file mode 100644
index 0000000000..147b86b078
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/ArrowForwardUp.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ArrowForwardUp = ({ fill = '#697177', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.52859 2.86128C9.78894 2.60093 10.2111 2.60093 10.4714 2.86128L13.1381 5.52794C13.3984 5.78829 13.3984 6.2104 13.1381 6.47075L10.4714 9.13742C10.2111 9.39777 9.78894 9.39777 9.52859 9.13742C9.26825 8.87707 9.26825 8.45496 9.52859 8.19461L11.0572 6.66602H5.33333C4.8029 6.66602 4.29419 6.87673 3.91912 7.2518C3.54405 7.62687 3.33333 8.13558 3.33333 8.66602C3.33333 9.19645 3.54405 9.70516 3.91912 10.0802C4.29419 10.4553 4.8029 10.666 5.33333 10.666H6C6.36819 10.666 6.66667 10.9645 6.66667 11.3327C6.66667 11.7009 6.36819 11.9993 6 11.9993H5.33333C4.44928 11.9993 3.60143 11.6482 2.97631 11.023C2.35119 10.3979 2 9.55007 2 8.66602C2 7.78196 2.35119 6.93411 2.97631 6.30899C3.60143 5.68387 4.44928 5.33268 5.33333 5.33268H11.0572L9.52859 3.80409C9.26825 3.54374 9.26825 3.12163 9.52859 2.86128Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default ArrowForwardUp;
diff --git a/frontend/src/_ui/Icon/solidIcons/ArrowLeft.jsx b/frontend/src/_ui/Icon/solidIcons/ArrowLeft.jsx
new file mode 100644
index 0000000000..8ba3620447
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/ArrowLeft.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ArrowLeft = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 14 14" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.35532 7.45809C1.10465 7.20742 1.10465 6.79253 1.35532 6.54187L4.81275 3.08444C5.06341 2.83377 5.4783 2.83377 5.72896 3.08444C5.97963 3.3351 5.97963 3.74999 5.72896 4.00066L3.37791 6.35171L12.1857 6.35171C12.5401 6.35171 12.834 6.64559 12.834 6.99998C12.834 7.35436 12.5401 7.64825 12.1857 7.64825L3.37791 7.64825L5.72896 9.9993C5.97963 10.25 5.97963 10.6649 5.72896 10.9155C5.4783 11.1662 5.06341 11.1662 4.81275 10.9155L1.35532 7.45809Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default ArrowLeft;
diff --git a/frontend/src/_ui/Icon/solidIcons/Check.jsx b/frontend/src/_ui/Icon/solidIcons/Check.jsx
new file mode 100644
index 0000000000..def256a12e
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Check.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Check = ({ fill = '#3E63DD', width = '8', className = 'tj-icon', viewBox = '0 0 8 8', height }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.2559 5.4013C17.5814 5.72674 17.5814 6.25438 17.2559 6.57982L8.92258 14.9131C8.59715 15.2386 8.06951 15.2386 7.74407 14.9131L3.57741 10.7465C3.25197 10.421 3.25197 9.89341 3.57741 9.56797C3.90284 9.24253 4.43048 9.24253 4.75592 9.56797L8.33333 13.1454L16.0774 5.4013C16.4028 5.07587 16.9305 5.07587 17.2559 5.4013Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+export default Check;
diff --git a/frontend/src/_ui/Icon/solidIcons/CheveronLeftDouble.jsx b/frontend/src/_ui/Icon/solidIcons/CheveronLeftDouble.jsx
new file mode 100644
index 0000000000..b0b5390979
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/CheveronLeftDouble.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+const CheveronLeftDouble = ({ fill = '#C1C8CD', width = '24', className = 'manish', viewBox = '0 0 24 24' }) => (
+  <svg
+    className={className}
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    manish
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.2504 6.41438C12.5738 6.67313 12.6263 7.1451 12.3675 7.46855L8.74233 12L12.3675 16.5315C12.6263 16.855 12.5738 17.3269 12.2504 17.5857C11.9269 17.8444 11.455 17.792 11.1962 17.4685L7.19621 12.4685C6.97708 12.1946 6.97708 11.8054 7.19621 11.5315L11.1962 6.53151C11.455 6.20806 11.9269 6.15562 12.2504 6.41438Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.6866 6.41438C17.01 6.67313 17.0625 7.1451 16.8037 7.46855L13.1785 12L16.8037 16.5315C17.0625 16.855 17.01 17.3269 16.6866 17.5857C16.3631 17.8444 15.8912 17.792 15.6324 17.4685L11.6324 12.4685C11.4133 12.1946 11.4133 11.8054 11.6324 11.5315L15.6324 6.53151C15.8912 6.20806 16.3631 6.15562 16.6866 6.41438Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default CheveronLeftDouble;
diff --git a/frontend/src/_ui/Icon/solidIcons/CheveronRightDouble.jsx b/frontend/src/_ui/Icon/solidIcons/CheveronRightDouble.jsx
new file mode 100644
index 0000000000..82735f64fd
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/CheveronRightDouble.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+const CheveronRightDouble = ({ fill = '#C1C8CD', width = '24', className = '', viewBox = '0 0 24 24' }) => (
+  <svg
+    className={className}
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.7496 6.41438C11.4261 6.67313 11.3737 7.1451 11.6324 7.46855L15.2576 12L11.6324 16.5315C11.3737 16.855 11.4261 17.3269 11.7496 17.5857C12.073 17.8444 12.545 17.792 12.8037 17.4685L16.8037 12.4685C17.0229 12.1946 17.0229 11.8054 16.8037 11.5315L12.8037 6.53151C12.545 6.20806 12.073 6.15562 11.7496 6.41438Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.31337 6.41438C6.98992 6.67313 6.93748 7.1451 7.19624 7.46855L10.8214 12L7.19624 16.5315C6.93748 16.855 6.98992 17.3269 7.31337 17.5857C7.63681 17.8444 8.10878 17.792 8.36754 17.4685L12.3675 12.4685C12.5867 12.1946 12.5867 11.8054 12.3675 11.5315L8.36754 6.53151C8.10878 6.20806 7.63681 6.15562 7.31337 6.41438Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default CheveronRightDouble;
diff --git a/frontend/src/_ui/Icon/solidIcons/CloudInvalid.jsx b/frontend/src/_ui/Icon/solidIcons/CloudInvalid.jsx
new file mode 100644
index 0000000000..dae5a9ea65
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/CloudInvalid.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const CloudInvalid = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M12.873 3.78a52.986 52.986 0 00-.746 0c-1.75.012-3.214.633-4.266 1.687-1.02 1.023-1.643 2.44-1.778 4.074-2.157.748-3.583 2.623-3.583 5.126 0 1.588.575 2.93 1.556 3.89.98.957 2.354 1.523 3.933 1.586 1.209.047 2.694.08 4.511.08 1.817 0 3.302-.032 4.51-.08 1.58-.063 2.953-.629 3.934-1.587.981-.96 1.556-2.301 1.556-3.89 0-2.502-1.427-4.377-3.583-5.125-.135-1.634-.758-3.051-1.778-4.074-1.052-1.054-2.515-1.675-4.265-1.688zm-1.836 6.952c-.31-.292-.75-.38-1.079-.11a3.883 3.883 0 00-.547.547c-.27.33-.182.768.11 1.079.288.308.737.778 1.413 1.463a79.372 79.372 0 00-1.413 1.463c-.291.311-.38.75-.11 1.079a3.868 3.868 0 00.547.547c.33.27.768.182 1.08-.11.307-.288.777-.737 1.462-1.413a79.33 79.33 0 001.463 1.414c.311.29.75.379 1.079.109a3.894 3.894 0 00.547-.547c.27-.33.182-.768-.11-1.079a79.756 79.756 0 00-1.413-1.463 78.583 78.583 0 001.414-1.463c.29-.31.379-.75.11-1.079a3.892 3.892 0 00-.548-.547c-.33-.27-.768-.182-1.079.11-.308.288-.778.737-1.463 1.413a79.426 79.426 0 00-1.463-1.413z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default CloudInvalid;
diff --git a/frontend/src/_ui/Icon/solidIcons/CloudValid.jsx b/frontend/src/_ui/Icon/solidIcons/CloudValid.jsx
new file mode 100644
index 0000000000..fbc0f79a6f
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/CloudValid.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const CloudValid = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M12.373 3.78a52.986 52.986 0 00-.746 0c-1.75.012-3.214.633-4.266 1.687-1.02 1.023-1.643 2.44-1.778 4.074C3.426 10.289 2 12.164 2 14.667c0 1.588.575 2.93 1.556 3.89.98.957 2.354 1.523 3.933 1.586 1.209.047 2.694.08 4.511.08 1.817 0 3.302-.032 4.51-.08 1.58-.063 2.953-.629 3.934-1.587.981-.96 1.556-2.301 1.556-3.89 0-2.502-1.427-4.377-3.583-5.125-.135-1.634-.758-3.051-1.778-4.074-1.052-1.054-2.515-1.675-4.265-1.688zm3.265 8.05c.228-.358.287-.825.02-1.156a2.602 2.602 0 00-.512-.478c-.459-.329-1.053-.107-1.37.36-1.383 2.025-2.238 3.328-2.238 3.328s-.472-.605-1.268-1.498c-.42-.472-1.127-.568-1.572-.12-.09.09-.179.187-.265.29-.314.38-.25.919.056 1.305a32.509 32.509 0 001.968 2.259 1.508 1.508 0 002.327-.13c.666-.88 1.628-2.228 2.854-4.16z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default CloudValid;
diff --git a/frontend/src/_ui/Icon/solidIcons/Comments.jsx b/frontend/src/_ui/Icon/solidIcons/Comments.jsx
new file mode 100644
index 0000000000..8c2a9f0ebb
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Comments.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Comments = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H6C3.79086 21 2 19.2091 2 17V12C2 7.02944 6.02944 3 11 3ZM8 14.75C7.58579 14.75 7.25 14.4142 7.25 14C7.25 13.5858 7.58579 13.25 8 13.25H12C12.4142 13.25 12.75 13.5858 12.75 14C12.75 14.4142 12.4142 14.75 12 14.75H8ZM8 10.75C7.58579 10.75 7.25 10.4142 7.25 10C7.25 9.58579 7.58579 9.25 8 9.25H16C16.4142 9.25 16.75 9.58579 16.75 10C16.75 10.4142 16.4142 10.75 16 10.75H8Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Comments;
diff --git a/frontend/src/_ui/Icon/solidIcons/Cross.jsx b/frontend/src/_ui/Icon/solidIcons/Cross.jsx
new file mode 100644
index 0000000000..9c63a59aec
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Cross.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+const Cross = ({ fill = '#C1C8CD', width = '16', className = '', viewBox = '0 0 24 24' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={width}
+      height={width}
+      viewBox={viewBox}
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+export default Cross;
diff --git a/frontend/src/_ui/Icon/solidIcons/Debugger.jsx b/frontend/src/_ui/Icon/solidIcons/Debugger.jsx
new file mode 100644
index 0000000000..2b334a0ad1
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Debugger.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Debugger = ({ fill = '#000', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    fill={fill}
+    height={width}
+    viewBox={viewBox}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      id="Union"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.5107 3.24181C16.5107 2.91246 16.397 2.5966 16.1946 2.36372C15.9922 2.13083 15.7177 2 15.4315 2C15.1452 2 14.8707 2.13083 14.6683 2.36372C14.4659 2.5966 14.3522 2.91246 14.3522 3.24181C14.3522 3.66095 14.2674 4.07434 14.1047 4.44935C13.942 4.82436 13.7058 5.15074 13.4147 5.40272C12.4801 5.19066 11.5184 5.19066 10.5837 5.40272C10.2929 5.15055 10.057 4.82409 9.89457 4.44909C9.73215 4.07409 9.64767 3.6608 9.64779 3.24181C9.64779 2.91246 9.53408 2.5966 9.33168 2.36372C9.12928 2.13083 8.85477 2 8.56853 2C8.28229 2 8.00778 2.13083 7.80538 2.36372C7.60298 2.5966 7.48927 2.91246 7.48927 3.24181C7.48971 4.36073 7.80441 5.44952 8.38646 6.34589C7.70144 6.79746 7.08449 7.37367 6.55954 8.05215C5.55234 7.19515 4.33194 6.73438 3.07926 6.73813C2.93753 6.73848 2.79725 6.77095 2.66643 6.83368C2.5356 6.89641 2.4168 6.98818 2.31679 7.10374C2.21679 7.2193 2.13755 7.35639 2.08359 7.50719C2.02964 7.65799 2.00202 7.81954 2.00233 7.98261C2.00263 8.14569 2.03085 8.3071 2.08537 8.45763C2.13989 8.60816 2.21965 8.74486 2.32008 8.85992C2.42051 8.97499 2.53966 9.06616 2.67072 9.12825C2.80178 9.19033 2.94218 9.2221 3.08391 9.22175C3.91711 9.21857 4.72645 9.54176 5.37879 10.1382C5.10952 10.8145 4.92034 11.5292 4.8163 12.2634H3.07926C2.79303 12.2634 2.51851 12.3943 2.31611 12.6271C2.11371 12.86 2 13.1759 2 13.5052C2 13.8346 2.11371 14.1504 2.31611 14.3833C2.51851 14.6162 2.79303 14.747 3.07926 14.747H4.78376C4.87364 15.5137 5.05339 16.2465 5.31061 16.9329C4.66963 17.4921 3.88673 17.7934 3.08236 17.7905C2.79613 17.7896 2.52128 17.9195 2.3183 18.1517C2.11532 18.3839 2.00083 18.6994 2 19.0287C1.99918 19.3581 2.1121 19.6743 2.31392 19.9079C2.51574 20.1414 2.78993 20.2732 3.07616 20.2741C4.28481 20.2786 5.46476 19.8505 6.45263 19.0492C7.13547 19.9753 7.98548 20.7189 8.9435 21.2285C9.90153 21.7381 10.9446 22.0014 12 22C13.0554 22.0014 14.0985 21.7381 15.0565 21.2285C16.0145 20.7189 16.8645 19.9753 17.5474 19.0492C18.5351 19.8508 19.7151 20.2789 20.9238 20.2741C21.2101 20.2732 21.4843 20.1414 21.6861 19.9079C21.8879 19.6743 22.0008 19.3581 22 19.0287C21.9992 18.6994 21.8847 18.3839 21.6817 18.1517C21.4787 17.9195 21.2039 17.7896 20.9176 17.7905C20.1133 17.7934 19.3304 17.4921 18.6894 16.9329C18.9466 16.2483 19.1264 15.5137 19.2162 14.747H20.9207C21.207 14.747 21.4815 14.6162 21.6839 14.3833C21.8863 14.1504 22 13.8346 22 13.5052C22 13.1759 21.8863 12.86 21.6839 12.6271C21.4815 12.3943 21.207 12.2634 20.9207 12.2634H19.1852C19.0817 11.5293 18.893 10.8145 18.6243 10.1382C19.2762 9.54215 20.085 9.21897 20.9176 9.22175C21.2039 9.22269 21.4787 9.09277 21.6817 8.86055C21.8847 8.62834 21.9992 8.31285 22 7.98351C22.0008 7.65416 21.8879 7.33792 21.6861 7.10437C21.4843 6.87082 21.2101 6.73908 20.9238 6.73813C19.6701 6.73361 18.4485 7.19442 17.4405 8.05215C16.9154 7.37431 16.2984 6.7987 15.6135 6.34767C16.1955 5.45124 16.5102 4.36071 16.5107 3.24181Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Debugger;
diff --git a/frontend/src/_ui/Icon/solidIcons/Dot.jsx b/frontend/src/_ui/Icon/solidIcons/Dot.jsx
new file mode 100644
index 0000000000..30628cd746
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Dot.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Dot = ({ fill = '#C1C8CD', width = '8', className = 'tj-icon', viewBox = '0 0 8 8' }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height="8"
+      viewBox={viewBox}
+      fill="none"
+    >
+      <circle cx="4" cy="4" r="3" fill={fill} />
+    </svg>
+  );
+};
+export default Dot;
diff --git a/frontend/src/_ui/Icon/solidIcons/Editable.jsx b/frontend/src/_ui/Icon/solidIcons/Editable.jsx
new file mode 100644
index 0000000000..dddf69cd06
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Editable.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Editable = ({ fill = '#11181C', width = '25', height = '25', className = '', viewBox = '0 0 25 25' }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+    >
+      <path
+        d="M15.7989 2.75232C16.802 1.74923 18.4283 1.74923 19.4314 2.75232L21.2477 4.56857C22.2508 5.57165 22.2508 7.19798 21.2477 8.20107L19.6373 9.81142C19.5109 9.74882 19.3779 9.68113 19.24 9.60853C18.3118 9.11984 17.2102 8.43396 16.3882 7.61188C15.5661 6.7898 14.8802 5.68828 14.3915 4.76003C14.3189 4.6221 14.2512 4.48908 14.1886 4.36265L15.7989 2.75232Z"
+        fill={fill}
+      />
+      <path
+        d="M15.2097 8.79039C16.1824 9.76319 17.4196 10.5288 18.3994 11.0493L12.0667 17.382C11.6737 17.775 11.1639 18.0299 10.6137 18.1085L6.79958 18.6534C5.952 18.7745 5.2255 18.048 5.34658 17.2004L5.89146 13.3863C5.97006 12.8361 6.22498 12.3263 6.61796 11.9333L12.9507 5.60058C13.4712 6.58038 14.2368 7.81758 15.2097 8.79039Z"
+        fill={fill}
+      />
+      <path
+        d="M2.83333 20.3333C2.3731 20.3333 2 20.7064 2 21.1667C2 21.6269 2.3731 22 2.83333 22H21.1667C21.6269 22 22 21.6269 22 21.1667C22 20.7064 21.6269 20.3333 21.1667 20.3333H2.83333Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+export default Editable;
diff --git a/frontend/src/_ui/Icon/solidIcons/EyeDisable.jsx b/frontend/src/_ui/Icon/solidIcons/EyeDisable.jsx
index d50fa52e5b..247c150353 100644
--- a/frontend/src/_ui/Icon/solidIcons/EyeDisable.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/EyeDisable.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 const EyeDisable = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
   <svg
+    data-cy={`icon-hidden`}
     width={width}
     height={width}
     viewBox={viewBox}
diff --git a/frontend/src/_ui/Icon/solidIcons/EyeOpen.jsx b/frontend/src/_ui/Icon/solidIcons/EyeOpen.jsx
new file mode 100644
index 0000000000..dc35c186a5
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/EyeOpen.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const EyeOpen = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M13.25 3.539a.75.75 0 00-1.5 0v2a.75.75 0 001.5 0v-2zM4.03 6.009a.75.75 0 00-1.06 1.06l1.5 1.5a.75.75 0 001.06-1.06l-1.5-1.5zM22.03 7.07a.75.75 0 00-1.06-1.061l-1.5 1.5a.75.75 0 001.06 1.06l1.5-1.5z"
+    ></path>
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      d="M21.377 13.11c1.497 1.433 1.497 3.925 0 5.358-2.064 1.976-5.273 4.321-8.877 4.321-3.604 0-6.813-2.345-8.877-4.321-1.497-1.433-1.497-3.925 0-5.358 2.064-1.975 5.273-4.32 8.877-4.32 3.604 0 6.813 2.345 8.877 4.32zM15.5 15.79a3 3 0 11-6-.001 3 3 0 016 0z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default EyeOpen;
diff --git a/frontend/src/_ui/Icon/solidIcons/FIleRemove.jsx b/frontend/src/_ui/Icon/solidIcons/FIleRemove.jsx
new file mode 100644
index 0000000000..27f57e3056
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/FIleRemove.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const FileRemove = ({ fill = '#C1C8CD', width = 25, height = 25, className = '', viewBox = '0 0 25 25' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" width={width} height={height} viewBox={viewBox}>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.3335 3.33334V11.5C1.3335 12.6966 2.32034 13.6667 3.51696 13.6667C4.69517 13.6667 5.66683 12.7115 5.66683 11.5333C5.66683 11.2388 5.90561 11 6.20016 11H12.0002V3.33334C12.0002 2.22877 11.1047 1.33334 10.0002 1.33334H3.3335C2.22893 1.33334 1.3335 2.22877 1.3335 3.33334ZM7.72751 8.43442C7.92277 8.62969 8.23935 8.62969 8.43461 8.43442C8.62988 8.23916 8.62988 7.92258 8.43461 7.72732L7.37394 6.66665L8.43459 5.606C8.62985 5.41074 8.62985 5.09416 8.43458 4.8989C8.23932 4.70363 7.92274 4.70363 7.72748 4.8989L6.66684 5.95954L5.60619 4.89889C5.41092 4.70363 5.09434 4.70363 4.89908 4.89889C4.70382 5.09415 4.70382 5.41074 4.89908 5.606L5.95973 6.66665L4.89905 7.72732C4.70379 7.92259 4.70379 8.23917 4.89905 8.43443C5.09431 8.62969 5.4109 8.62969 5.60616 8.43443L6.66684 7.37375L7.72751 8.43442Z"
+      fill={fill}
+      className={className}
+    />
+    <path
+      d="M14.5845 12.6599C14.2909 13.8135 13.2452 14.6667 12.0002 14.6667H4.00016C5.24515 14.6667 6.29087 13.8135 6.58454 12.6599C6.67538 12.3031 6.96531 12 7.3335 12H14.0002C14.3684 12 14.6754 12.3031 14.5845 12.6599Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default FileRemove;
diff --git a/frontend/src/_ui/Icon/solidIcons/Home.jsx b/frontend/src/_ui/Icon/solidIcons/Home.jsx
index e02584b61d..5c5e4a4066 100644
--- a/frontend/src/_ui/Icon/solidIcons/Home.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Home.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 const Home = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
   <svg
+    data-cy="home-page-icon"
     width={width}
     height={width}
     viewBox={viewBox}
diff --git a/frontend/src/_ui/Icon/solidIcons/Inspect.jsx b/frontend/src/_ui/Icon/solidIcons/Inspect.jsx
new file mode 100644
index 0000000000..19fdf4f908
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Inspect.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const InRectangle = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    fill={fill}
+    height={width}
+    viewBox={viewBox}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.4878 13.7451L20.1159 12.2024C22.628 11.365 22.628 7.81165 20.1159 6.97427L5.63158 2.14617C3.47747 1.42813 1.42813 3.47748 2.14617 5.63158L6.97427 20.1159C7.81165 22.628 11.365 22.628 12.2024 20.1159L13.7451 15.4878C14.0194 14.665 14.665 14.0194 15.4878 13.7451Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default InRectangle;
diff --git a/frontend/src/_ui/Icon/solidIcons/LayersVersion.jsx b/frontend/src/_ui/Icon/solidIcons/LayersVersion.jsx
new file mode 100644
index 0000000000..9a5fdc777f
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/LayersVersion.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Layers = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill={fill}
+      d="M11.27 3.065a2.75 2.75 0 012.46 0l7.317 3.659c1.29.645 1.29 2.485 0 3.13l-7.317 3.659a2.75 2.75 0 01-2.46 0L3.953 9.854c-1.29-.645-1.29-2.485 0-3.13l7.317-3.659zM2.815 17.984a.75.75 0 01.99-.38l8.187 3.639a1.25 1.25 0 001.016 0l8.187-3.64a.75.75 0 01.61 1.371l-8.188 3.64a2.75 2.75 0 01-2.234 0l-8.188-3.64a.75.75 0 01-.38-.99z"
+    ></path>
+    <path
+      fill="#11181C"
+      d="M3.805 13.104a.75.75 0 00-.61 1.37l8.188 3.64a2.75 2.75 0 002.234 0l8.188-3.64a.75.75 0 00-.61-1.37l-8.187 3.639a1.25 1.25 0 01-1.016 0l-8.187-3.64z"
+    ></path>
+  </svg>
+);
+
+export default Layers;
diff --git a/frontend/src/_ui/Icon/solidIcons/Mobile.jsx b/frontend/src/_ui/Icon/solidIcons/Mobile.jsx
index c650206d1d..da17bed024 100644
--- a/frontend/src/_ui/Icon/solidIcons/Mobile.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Mobile.jsx
@@ -10,11 +10,11 @@ const Mobiles = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0
     className={className}
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8.5 2.78906C6.84315 2.78906 5.5 4.13221 5.5 5.78906V19.7891C5.5 21.4459 6.84315 22.7891 8.5 22.7891H16.5C18.1569 22.7891 19.5 21.4459 19.5 19.7891V5.78906C19.5 4.13221 18.1569 2.78906 16.5 2.78906H8.5ZM11.5 19.0391C11.0858 19.0391 10.75 19.3748 10.75 19.7891C10.75 20.2033 11.0858 20.5391 11.5 20.5391H13.5C13.9142 20.5391 14.25 20.2033 14.25 19.7891C14.25 19.3748 13.9142 19.0391 13.5 19.0391H11.5Z"
       fill={fill}
-    />
+      fillRule="evenodd"
+      d="M8.5 2.79a3 3 0 00-3 3v14a3 3 0 003 3h8a3 3 0 003-3v-14a3 3 0 00-3-3h-8zm3 16.25a.75.75 0 100 1.5h2a.75.75 0 000-1.5h-2z"
+      clipRule="evenodd"
+    ></path>
   </svg>
 );
 
diff --git a/frontend/src/_ui/Icon/solidIcons/Page.jsx b/frontend/src/_ui/Icon/solidIcons/Page.jsx
index 3f7334acfd..d1210c2304 100644
--- a/frontend/src/_ui/Icon/solidIcons/Page.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Page.jsx
@@ -10,9 +10,13 @@ const Page = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 2
     className={className}
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3.5 18.7891V6.78906C3.5 4.57992 5.29086 2.78906 7.5 2.78906H17.5C19.7091 2.78906 21.5 4.57992 21.5 6.78906V13.1322C21.5 13.44 21.4645 13.7441 21.3959 14.0391H17.5C14.8766 14.0391 12.75 16.1657 12.75 18.7891V22.6849C12.455 22.7536 12.1509 22.7891 11.8431 22.7891H7.5C5.29086 22.7891 3.5 20.9982 3.5 18.7891ZM14.25 21.9839C14.398 21.8724 14.539 21.7501 14.6716 21.6175L20.3284 15.9606C20.461 15.828 20.5833 15.6871 20.6949 15.5391H17.5C15.7051 15.5391 14.25 16.9941 14.25 18.7891V21.9839ZM7.75 7.78906C7.75 7.37485 8.08579 7.03906 8.5 7.03906H16.5C16.9142 7.03906 17.25 7.37485 17.25 7.78906C17.25 8.20328 16.9142 8.53906 16.5 8.53906H8.5C8.08579 8.53906 7.75 8.20328 7.75 7.78906ZM8.5 11.0391C8.08579 11.0391 7.75 11.3748 7.75 11.7891C7.75 12.2033 8.08579 12.5391 8.5 12.5391H12.5C12.9142 12.5391 13.25 12.2033 13.25 11.7891C13.25 11.3748 12.9142 11.0391 12.5 11.0391H8.5Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.70801 10.167C7.70801 8.78628 8.8273 7.66699 10.208 7.66699H18.5413C19.9221 7.66699 21.0413 8.78628 21.0413 10.167V19.7503H13.7913C13.4232 19.7503 13.1247 20.0488 13.1247 20.417C13.1247 21.8898 11.9101 23.0837 10.4373 23.0837C8.94156 23.0837 7.70801 21.8711 7.70801 20.3753V10.167ZM11.0413 11.2087C10.6962 11.2087 10.4163 11.4885 10.4163 11.8337C10.4163 12.1788 10.6962 12.4587 11.0413 12.4587H17.708C18.0532 12.4587 18.333 12.1788 18.333 11.8337C18.333 11.4885 18.0532 11.2087 17.708 11.2087H11.0413ZM10.4163 16.0003C10.4163 15.6551 10.6962 15.3753 11.0413 15.3753H14.3747C14.7199 15.3753 14.9997 15.6551 14.9997 16.0003C14.9997 16.3455 14.7199 16.6253 14.3747 16.6253H11.0413C10.6962 16.6253 10.4163 16.3455 10.4163 16.0003Z"
+      fill={fill}
+    />
+    <path
+      d="M24.2718 21.8252C23.9047 23.2672 22.5976 24.3337 21.0413 24.3337H11.0413C12.5976 24.3337 13.9047 23.2672 14.2718 21.8252C14.3854 21.3792 14.7478 21.0003 15.208 21.0003H23.5413C24.0016 21.0003 24.3854 21.3792 24.2718 21.8252Z"
       fill={fill}
     />
   </svg>
diff --git a/frontend/src/_ui/Icon/solidIcons/Save.jsx b/frontend/src/_ui/Icon/solidIcons/Save.jsx
new file mode 100644
index 0000000000..63b5332971
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Save.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Save = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 24 24' }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox={viewBox}
+      fill="none"
+    >
+      <g id="Save filled">
+        <path
+          id="Vector"
+          d="M21 6.925V19.5C21 19.9 20.85 20.25 20.55 20.55C20.25 20.85 19.9 21 19.5 21H4.5C4.1 21 3.75 20.85 3.45 20.55C3.15 20.25 3 19.9 3 19.5V4.5C3 4.1 3.15 3.75 3.45 3.45C3.75 3.15 4.1 3 4.5 3H17.075L21 6.925ZM12 17.875C12.7167 17.875 13.3292 17.6208 13.8375 17.1125C14.3458 16.6042 14.6 15.9917 14.6 15.275C14.6 14.5583 14.3458 13.9458 13.8375 13.4375C13.3292 12.9292 12.7167 12.675 12 12.675C11.2833 12.675 10.6708 12.9292 10.1625 13.4375C9.65417 13.9458 9.4 14.5583 9.4 15.275C9.4 15.9917 9.65417 16.6042 10.1625 17.1125C10.6708 17.6208 11.2833 17.875 12 17.875ZM5.825 9.4H14.775V5.825H5.825V9.4Z"
+          fill={fill}
+        />
+      </g>
+    </svg>
+  );
+};
+export default Save;
diff --git a/frontend/src/_ui/Icon/solidIcons/Setting.jsx b/frontend/src/_ui/Icon/solidIcons/Setting.jsx
index 5b14eee822..9cd80d1462 100644
--- a/frontend/src/_ui/Icon/solidIcons/Setting.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Setting.jsx
@@ -3,9 +3,9 @@ import React from 'react';
 const Settings = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
   <svg width={width} height={width} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M11.5455 3.78906H13.4545C14.5089 3.78906 15.3636 4.59495 15.3636 5.58906C15.3636 6.72668 16.5808 7.44994 17.58 6.90604L17.6815 6.8508C18.5946 6.35374 19.7622 6.64872 20.2894 7.50965L21.2439 9.06849C21.7711 9.92942 21.4582 11.0303 20.5451 11.5273C19.5455 12.0715 19.5455 13.5066 20.5451 14.0508C21.4582 14.5478 21.7711 15.6487 21.2439 16.5096L20.2894 18.0685C19.7622 18.9294 18.5946 19.2244 17.6815 18.7273L17.58 18.6721C16.5808 18.1282 15.3636 18.8514 15.3636 19.9891C15.3636 20.9832 14.5089 21.7891 13.4545 21.7891H11.5455C10.4911 21.7891 9.63635 20.9832 9.63635 19.9891C9.63635 18.8514 8.41917 18.1282 7.42 18.6721L7.31851 18.7273C6.40541 19.2244 5.23782 18.9294 4.71064 18.0685L3.75609 16.5096C3.22891 15.6487 3.54176 14.5479 4.45487 14.0508C5.45451 13.5066 5.45451 12.0715 4.45487 11.5273C3.54176 11.0303 3.22891 9.92941 3.75609 9.06848L4.71064 7.50963C5.23782 6.64871 6.40541 6.35373 7.31852 6.85079L7.42 6.90603C8.41917 7.44993 9.63635 6.72667 9.63635 5.58906C9.63635 4.59495 10.4911 3.78906 11.5455 3.78906ZM12.5 15.7891C14.1569 15.7891 15.5 14.4459 15.5 12.7891C15.5 11.1322 14.1569 9.78906 12.5 9.78906C10.8432 9.78906 9.50001 11.1322 9.50001 12.7891C9.50001 14.4459 10.8432 15.7891 12.5 15.7891Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.75465 2.98571L9.03421 4.69286L6.55391 5.98429L4.57775 5.70714C4.24819 5.66585 3.91269 5.71552 3.61398 5.84985C3.31527 5.98417 3.06685 6.19707 2.90035 6.46143L2.23126 7.53857C2.05946 7.8068 1.98028 8.11654 2.00417 8.42693C2.02806 8.73732 2.1539 9.03377 2.36508 9.27714L3.62079 10.7071V13.2929L2.39931 14.7229C2.18813 14.9662 2.06229 15.2627 2.0384 15.5731C2.01451 15.8835 2.09369 16.1932 2.26549 16.4614L2.93459 17.5386C3.10108 17.8029 3.3495 18.0158 3.64821 18.1502C3.94693 18.2845 4.28242 18.3342 4.61198 18.2929L6.58814 18.0157L9.03577 19.3071L9.75621 21.0157C9.87747 21.3045 10.0909 21.553 10.3685 21.7287C10.6462 21.9043 10.9751 21.9988 11.3122 22H12.7204C13.0583 21.9991 13.3879 21.9045 13.6661 21.7286C13.9444 21.5527 14.1582 21.3037 14.2796 21.0143L15 19.3071L17.4461 18.0157L19.4223 18.2929C19.7518 18.3342 20.0873 18.2845 20.386 18.1502C20.6847 18.0158 20.9332 17.8029 21.0996 17.5386L21.7687 16.4614C21.9405 16.1932 22.0197 15.8835 21.9958 15.5731C21.9719 15.2627 21.8461 14.9662 21.6349 14.7229L20.3792 13.2929V10.7071L21.6022 9.27714C21.8134 9.03377 21.9393 8.73732 21.9632 8.42693C21.987 8.11654 21.9079 7.8068 21.7361 7.53857L21.067 6.46143C20.9005 6.19707 20.6521 5.98417 20.3533 5.84985C20.0546 5.71552 19.7191 5.66585 19.3896 5.70714L17.4134 5.98429L14.9658 4.69286L14.2453 2.98429C14.1238 2.69535 13.9101 2.44681 13.6322 2.2712C13.3543 2.09558 13.0251 2.00106 12.6878 2H11.3122C10.9747 2.00117 10.6454 2.0959 10.3675 2.27178C10.0895 2.44767 9.87594 2.69651 9.75465 2.98571ZM12 15.2143C12.9285 15.2143 13.819 14.8756 14.4756 14.2728C15.1322 13.67 15.5011 12.8525 15.5011 12C15.5011 11.1475 15.1322 10.33 14.4756 9.72716C13.819 9.12436 12.9285 8.78571 12 8.78571C11.0715 8.78571 10.181 9.12436 9.52438 9.72716C8.8678 10.33 8.49894 11.1475 8.49894 12C8.49894 12.8525 8.8678 13.67 9.52438 14.2728C10.181 14.8756 11.0715 15.2143 12 15.2143Z"
       fill={fill}
       className={className}
     />
diff --git a/frontend/src/_ui/Icon/solidIcons/Settings.jsx b/frontend/src/_ui/Icon/solidIcons/Settings.jsx
new file mode 100644
index 0000000000..faef1368d5
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Settings.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Settings = ({ fill = 'red', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg width={width} height={width} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.5455 3.78906H13.4545C14.5089 3.78906 15.3636 4.59495 15.3636 5.58906C15.3636 6.72668 16.5808 7.44994 17.58 6.90604L17.6815 6.8508C18.5946 6.35374 19.7622 6.64872 20.2894 7.50965L21.2439 9.06849C21.7711 9.92942 21.4582 11.0303 20.5451 11.5273C19.5455 12.0715 19.5455 13.5066 20.5451 14.0508C21.4582 14.5478 21.7711 15.6487 21.2439 16.5096L20.2894 18.0685C19.7622 18.9294 18.5946 19.2244 17.6815 18.7273L17.58 18.6721C16.5808 18.1282 15.3636 18.8514 15.3636 19.9891C15.3636 20.9832 14.5089 21.7891 13.4545 21.7891H11.5455C10.4911 21.7891 9.63635 20.9832 9.63635 19.9891C9.63635 18.8514 8.41917 18.1282 7.42 18.6721L7.31851 18.7273C6.40541 19.2244 5.23782 18.9294 4.71064 18.0685L3.75609 16.5096C3.22891 15.6487 3.54176 14.5479 4.45487 14.0508C5.45451 13.5066 5.45451 12.0715 4.45487 11.5273C3.54176 11.0303 3.22891 9.92941 3.75609 9.06848L4.71064 7.50963C5.23782 6.64871 6.40541 6.35373 7.31852 6.85079L7.42 6.90603C8.41917 7.44993 9.63635 6.72667 9.63635 5.58906C9.63635 4.59495 10.4911 3.78906 11.5455 3.78906ZM12.5 15.7891C14.1569 15.7891 15.5 14.4459 15.5 12.7891C15.5 11.1322 14.1569 9.78906 12.5 9.78906C10.8432 9.78906 9.50001 11.1322 9.50001 12.7891C9.50001 14.4459 10.8432 15.7891 12.5 15.7891Z"
+      fill={fill}
+      className={className}
+    />
+  </svg>
+);
+
+export default Settings;
diff --git a/frontend/src/_ui/Icon/solidIcons/Share.jsx b/frontend/src/_ui/Icon/solidIcons/Share.jsx
index a92971c85c..979740c29c 100644
--- a/frontend/src/_ui/Icon/solidIcons/Share.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Share.jsx
@@ -10,11 +10,11 @@ const Share = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0
     className={className}
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M22.5 6.28906C22.5 8.22206 20.933 9.78906 19 9.78906C17.8988 9.78906 16.9163 9.28048 16.2747 8.48538C16.2522 8.49984 16.2287 8.51324 16.2042 8.52548L9.46659 11.8943C9.44233 11.9064 9.41773 11.9171 9.39289 11.9264C9.46283 12.2023 9.5 12.4914 9.5 12.7891C9.5 13.0868 9.46283 13.3758 9.39288 13.6517C9.41773 13.661 9.44233 13.6717 9.46659 13.6838L16.2042 17.0527C16.2287 17.0649 16.2522 17.0783 16.2747 17.0927C16.9163 16.2976 17.8988 15.7891 19 15.7891C20.933 15.7891 22.5 17.3561 22.5 19.2891C22.5 21.2221 20.933 22.7891 19 22.7891C17.067 22.7891 15.5 21.2221 15.5 19.2891C15.5 18.9914 15.5372 18.7023 15.6071 18.4264C15.5823 18.4171 15.5577 18.4064 15.5334 18.3943L8.79577 15.0255C8.77129 15.0132 8.74777 14.9998 8.72525 14.9854C8.08366 15.7805 7.10122 16.2891 6 16.2891C4.067 16.2891 2.5 14.7221 2.5 12.7891C2.5 10.8561 4.067 9.28906 6 9.28906C7.10123 9.28906 8.08367 9.79765 8.72526 10.5927C8.74778 10.5783 8.77129 10.5649 8.79577 10.5527L15.5334 7.18384C15.5577 7.17171 15.5823 7.16102 15.6071 7.15173C15.5372 6.87578 15.5 6.58676 15.5 6.28906C15.5 4.35607 17.067 2.78906 19 2.78906C20.933 2.78906 22.5 4.35607 22.5 6.28906Z"
       fill={fill}
-    />
+      fillRule="evenodd"
+      d="M22.5 6.29a3.5 3.5 0 01-6.225 2.195.752.752 0 01-.07.04l-6.738 3.37a.77.77 0 01-.074.031 3.507 3.507 0 010 1.726c.025.009.05.02.074.032l6.737 3.369a.756.756 0 01.07.04 3.5 3.5 0 11-.668 1.334.779.779 0 01-.073-.033l-6.737-3.368a.786.786 0 01-.07-.04 3.5 3.5 0 110-4.393.761.761 0 01.07-.04l6.737-3.37a.769.769 0 01.074-.031 3.5 3.5 0 116.893-.863z"
+      clipRule="evenodd"
+    ></path>
   </svg>
 );
 
diff --git a/frontend/src/_ui/Icon/solidIcons/Student.jsx b/frontend/src/_ui/Icon/solidIcons/Student.jsx
new file mode 100644
index 0000000000..93e071d1c7
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Student.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Student = ({ fill = '#C1C8CD', width = '21', className = '', viewBox = '0 0 21 21' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 14 17" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.4167 8.08333V3.5H13.6667V8.08333C13.6667 8.42851 13.3868 8.70833 13.0417 8.70833C12.6965 8.70833 12.4167 8.42851 12.4167 8.08333Z"
+      fill={fill}
+    />
+    <path
+      d="M10.3333 6.83337V4.33337H3.66666V6.83337C3.66666 8.67432 5.15904 10.1667 6.99999 10.1667C8.84094 10.1667 10.3333 8.67432 10.3333 6.83337Z"
+      fill={fill}
+    />
+    <path
+      d="M0.356695 3.11925L5.98465 0.617937C6.63106 0.330642 7.36893 0.330642 8.01534 0.617937L13.6433 3.11925C13.9732 3.26588 13.9732 3.73413 13.6433 3.88076L8.01534 6.38207C7.36893 6.66937 6.63106 6.66937 5.98465 6.38207L0.356695 3.88076C0.0267722 3.73413 0.0267722 3.26588 0.356695 3.11925Z"
+      fill={fill}
+    />
+    <path
+      d="M8.91627 11.333L7.5925 12.6716C7.26633 13.0014 6.73363 13.0014 6.40746 12.6716L5.08369 11.333C4.87919 11.1262 4.58065 11.0381 4.30164 11.1202C1.96403 11.8076 0.333313 13.3608 0.333313 15.1667C0.333313 16.0872 1.07951 16.8334 1.99998 16.8334H12C12.9205 16.8334 13.6666 16.0872 13.6666 15.1667C13.6666 13.3608 12.0359 11.8076 9.69832 11.1202C9.41931 11.0381 9.12077 11.1262 8.91627 11.333Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Student;
diff --git a/frontend/src/_ui/Icon/solidIcons/Unpin.jsx b/frontend/src/_ui/Icon/solidIcons/Unpin.jsx
new file mode 100644
index 0000000000..218a33cdfa
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Unpin.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Unpin = ({ width = '14' }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-tabler icon-tabler-pinned-off"
+    width={width}
+    height={width}
+    viewBox="0 0 24 24"
+    stroke-width="1.85"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <line x1="3" y1="3" x2="21" y2="21"></line>
+    <path d="M15 4.5l-3.249 3.249m-2.57 1.433l-2.181 .818l-1.5 1.5l7 7l1.5 -1.5l.82 -2.186m1.43 -2.563l3.25 -3.251"></path>
+    <line x1="9" y1="15" x2="4.5" y2="19.5"></line>
+    <line x1="14.5" y1="4" x2="20" y2="9.5"></line>
+  </svg>
+);
+
+export default Unpin;
diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js
index e8bbcb914a..e9736a65c3 100644
--- a/frontend/src/_ui/Icon/solidIcons/index.js
+++ b/frontend/src/_ui/Icon/solidIcons/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import Apps from './Apps.jsx';
 import Archive from './Archive.jsx';
 import ArrowBack from './ArrowBack.jsx';
@@ -13,7 +12,7 @@ import ArrowTransfer from './ArrowTransfer.jsx';
 import ArrowUp from './ArrowUp.jsx';
 import BookSearch from './BookSearch.jsx';
 import Branch from './Branch.jsx';
-import Bug from './Bug.jsx';
+import Debugger from './Debugger.jsx';
 import Calender from './Calender.jsx';
 import CheckRectangle from './CheckRectangle.jsx';
 import CheveronDown from './CheveronDown.jsx';
@@ -70,6 +69,8 @@ import NotificationUnread from './NotificationUnread.jsx';
 import Page from './Page.jsx';
 import PageAdd from './PageAdd.jsx';
 import Pin from './Pin.jsx';
+import Unpin from './Unpin.jsx';
+import AlignRight from './AlignRight';
 import Play from './Play.jsx';
 import Plus from './Plus.jsx';
 import Plus01 from './Plus01.jsx';
@@ -86,7 +87,7 @@ import SearchPlus from './SearchPlus.jsx';
 import Sent from './Sent.jsx';
 import SentFast from './SentFast.jsx';
 import Server from './Server.jsx';
-import Setting from './Setting.jsx';
+import Settings from './Settings.jsx';
 import Share from './Share.jsx';
 import Shield from './Shield.jsx';
 import ShieldCheck from './ShieldCheck.jsx';
@@ -118,11 +119,28 @@ import Marketplace from './Marketplace.jsx';
 import Minimize from './Minimize.jsx';
 import Maximize from './Maximize.jsx';
 import PlusRectangle from './PlusRectangle.jsx';
+import EyeOpen from './EyeOpen.jsx';
+import CloudInvalid from './CloudInvalid.jsx';
+import CloudValid from './CloudValid.jsx';
+import LayersVersion from './LayersVersion.jsx';
+import Comments from './Comments';
+import Inspect from './Inspect.jsx';
+import ArrowForwardUp from './ArrowForwardUp.jsx';
+import ArrowBackUp from './ArrowBackUp.jsx';
+import CheveronLeftDouble from './CheveronLeftDouble.jsx';
+import CheveronRightDouble from './CheveronRightDouble.jsx';
+import Dot from './Dot.jsx';
+import Check from './Check.jsx';
+import Editable from './Editable.jsx';
+import Save from './Save.jsx';
+import Cross from './Cross.jsx';
 
 const Icon = (props) => {
   switch (props.name) {
     case 'addrectangle':
       return <AddRectangle {...props} />;
+    case 'alignright':
+      return <AlignRight {...props} />;
     case 'apps':
       return <Apps {...props} />;
     case 'archive':
@@ -149,8 +167,8 @@ const Icon = (props) => {
       return <BookSearch {...props} />;
     case 'branch':
       return <Branch {...props} />;
-    case 'bug':
-      return <Bug {...props} />;
+    case 'debugger':
+      return <Debugger {...props} />;
     case 'calender':
       return <Calender {...props} />;
     case 'checkrectangle':
@@ -159,8 +177,12 @@ const Icon = (props) => {
       return <CheveronDown {...props} />;
     case 'cheveronleft':
       return <CheveronLeft {...props} />;
+    case 'cheveronleftdouble':
+      return <CheveronLeftDouble {...props} />;
     case 'cheveronright':
       return <CheveronRight {...props} />;
+    case 'cheveronrightdouble':
+      return <CheveronRightDouble {...props} />;
     case 'cheveronup':
       return <CheveronUp {...props} />;
     case 'clearrectangle':
@@ -267,6 +289,8 @@ const Icon = (props) => {
       return <PageAdd {...props} />;
     case 'pin':
       return <Pin {...props} />;
+    case 'unpin':
+      return <Unpin {...props} />;
     case 'play':
       return <Play {...props} />;
     case 'plus':
@@ -301,8 +325,10 @@ const Icon = (props) => {
       return <SentFast {...props} />;
     case 'server':
       return <Server {...props} />;
-    case 'setting':
-      return <Setting {...props} />;
+    case 'settings':
+      return <Settings {...props} />;
+    case 'comments':
+      return <Comments {...props} />;
     case 'share':
       return <Share {...props} />;
     case 'shield':
@@ -353,10 +379,34 @@ const Icon = (props) => {
       return <Mail {...props} />;
     case 'marketplace':
       return <Marketplace {...props} />;
+    case 'eyeopen':
+      return <EyeOpen {...props} />;
+    case 'layersversion':
+      return <LayersVersion {...props} />;
+    case 'cloudvalid':
+      return <CloudValid {...props} />;
+    case 'cloudinvalid':
+      return <CloudInvalid {...props} />;
+    case 'dot':
+      return <Dot {...props} />;
+    case 'check':
+      return <Check {...props} />;
+    case 'editable':
+      return <Editable {...props} />;
     case 'minimize':
       return <Minimize {...props} />;
     case 'maximize':
       return <Maximize {...props} />;
+    case 'inspect':
+      return <Inspect {...props} />;
+    case 'arrowbackup':
+      return <ArrowForwardUp {...props} />;
+    case 'arrowforwardup':
+      return <ArrowBackUp {...props} />;
+    case 'save':
+      return <Save {...props} />;
+    case 'cross':
+      return <Cross {...props} />;
     default:
       return <Apps {...props} />;
   }
diff --git a/frontend/src/_ui/Icon/solidIcons/layers.svg b/frontend/src/_ui/Icon/solidIcons/layers.svg
new file mode 100644
index 0000000000..6a62002eb2
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/layers.svg
@@ -0,0 +1,9 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="layers">
+<g id="Union">
+<path d="M6.28275 1.32756C6.73436 1.10175 7.26594 1.10175 7.71756 1.32756L11.9856 3.4616C12.738 3.8378 12.738 4.91152 11.9856 5.28772L7.71756 7.42177C7.26594 7.64758 6.73436 7.64758 6.28275 7.42177L2.01466 5.28772C1.26226 4.91152 1.26226 3.8378 2.01466 3.4616L6.28275 1.32756Z" fill="#D6409F"/>
+<path d="M1.35032 10.0303C1.44845 9.80947 1.707 9.71003 1.92779 9.80816L6.70397 11.9309C6.8925 12.0147 7.10771 12.0147 7.29625 11.9309L12.0724 9.80816C12.2932 9.71003 12.5518 9.80947 12.6499 10.0303C12.748 10.2511 12.6486 10.5096 12.4278 10.6077L7.65162 12.7305C7.23684 12.9148 6.76338 12.9148 6.34859 12.7305L1.57242 10.6077C1.35162 10.5096 1.25218 10.2511 1.35032 10.0303Z" fill="#D6409F"/>
+<path d="M1.92779 7.18316C1.707 7.08503 1.44845 7.18447 1.35032 7.40527C1.25218 7.62607 1.35162 7.88461 1.57242 7.98275L6.34859 10.1055C6.76338 10.2898 7.23684 10.2898 7.65162 10.1055L12.4278 7.98275C12.6486 7.88461 12.748 7.62607 12.6499 7.40527C12.5518 7.18447 12.2932 7.08503 12.0724 7.18316L7.29625 9.3059C7.10771 9.3897 6.8925 9.3897 6.70397 9.3059L1.92779 7.18316Z" fill="#D6409F"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/src/_ui/Input/index.js b/frontend/src/_ui/Input/index.js
index 5adf58e878..5db3225cd8 100644
--- a/frontend/src/_ui/Input/index.js
+++ b/frontend/src/_ui/Input/index.js
@@ -6,7 +6,7 @@ const Input = ({ helpText, ...props }) => {
   const [isFocused, setIsFocused] = useState(false);
 
   return (
-    <div className="">
+    <div className="tj-app-input">
       <input {...props} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} />
       <OrgConstantVariablesPreviewBox
         workspaceVariables={workspaceVariables}
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
index 8cbe9b8c74..10061b1f4e 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
@@ -10,6 +10,7 @@ import JSONNodeArray from './JSONNodeArray';
 import JSONNodeValue from './JSONNodeValue';
 import JSONNodeIndicator from './JSONNodeIndicator';
 import JSONNodeMap from './JSONNodeMap';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export const JSONNode = ({ data, ...restProps }) => {
   const {
@@ -283,23 +284,7 @@ export const JSONNode = ({ data, ...restProps }) => {
           >
             <span>
               <ToolTip message={'More actions'}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="icon-tabler icon-tabler-dots-vertical"
-                  width="13"
-                  height="13"
-                  viewBox="0 0 24 24"
-                  strokeWidth="2"
-                  stroke="#2c3e50"
-                  fill="none"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                  <circle cx="12" cy="12" r="1" />
-                  <circle cx="12" cy="19" r="1" />
-                  <circle cx="12" cy="5" r="1" />
-                </svg>
+                <SolidIcon width="13" name="morevertical" />
               </ToolTip>
             </span>
           </OverlayTrigger>
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
index f58ba2b2db..bb75df2c12 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
@@ -2,17 +2,18 @@ import React from 'react';
 
 const JSONTreeValueNode = ({ data, type }) => {
   if (type === 'Function') {
-    const functionString = `${data.toString().split('{')[0].trim()}{...}`;
-    return (
-      <React.Fragment>
-        <span
-          className={`text-secondary node-value-${type}`}
-          style={{ fontSize: '12px', fontFamily: 'monospace', textTransform: 'none' }}
-        >
-          {functionString}
-        </span>
-      </React.Fragment>
-    );
+    return;
+    // const functionString = `${data.toString().split('{')[0].trim()}{...}`;
+    // return (
+    //   <React.Fragment>
+    //     <span
+    //       className={`text-secondary node-value-${type}`}
+    //       style={{ fontSize: '12px', fontFamily: 'monospace', textTransform: 'none' }}
+    //     >
+    //       {functionString}
+    //     </span>
+    //   </React.Fragment>
+    // );
   }
 
   let value = type === 'String' ? `"${data}"` : String(data);
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx b/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx
index dbf84d64ed..4ca70e7e2f 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import { JSONNode } from './JSONNode';
 import ErrorBoundary from '@/Editor/ErrorBoundary';
+import WidgetIcon from '@/../assets/images/icons/widgets';
 
 export class JSONTreeViewer extends React.Component {
   constructor(props) {
@@ -75,16 +76,25 @@ export class JSONTreeViewer extends React.Component {
 
     return 0;
   }
+  extractComponentName = (path) => {
+    // Match the last part of the URL before ".svg" using a regular expression
+    const match = path.match(/\/([^/]+)\.svg$/);
+
+    if (match && match[1]) {
+      return match[1]; // Return the matched component name
+    } else {
+      return null; // Return null if the pattern doesn't match
+    }
+  };
 
   renderNodeIcons = (node) => {
     const icon = this.props.iconsList.filter((icon) => icon?.iconName === node)[0];
-
-    if (icon && icon.iconPath) {
+    if (icon && icon?.iconPath) {
       return (
-        <img
-          style={{ maxWidth: 'none', padding: '2px' }}
-          className={`json-tree-svg-icon ${icon.className}`}
-          src={icon.iconPath}
+        <WidgetIcon
+          name={this.extractComponentName(icon?.iconPath)}
+          fill={this.props.darkMode ? '#3A3F42' : '#D7DBDF'}
+          width="16"
         />
       );
     }
diff --git a/frontend/src/_ui/Layout/index.jsx b/frontend/src/_ui/Layout/index.jsx
index e54ab65ecc..4bbdc5935e 100644
--- a/frontend/src/_ui/Layout/index.jsx
+++ b/frontend/src/_ui/Layout/index.jsx
@@ -58,9 +58,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
                         fill={
                           router.pathname === '/:workspaceId' || router.pathname === getPrivateRoute('dashboard')
                             ? '#3E63DD'
-                            : darkMode
-                            ? '#4C5155'
-                            : '#C1C8CD'
+                            : 'var(--slate8)'
                         }
                       />
                     </Link>
@@ -82,9 +80,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
                           fill={
                             router.pathname === getPrivateRoute('database') && `current-seleted-route`
                               ? '#3E63DD'
-                              : darkMode
-                              ? '#4C5155'
-                              : '#C1C8CD'
+                              : 'var(--slate8)'
                           }
                         />
                       </Link>
@@ -106,13 +102,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
                       >
                         <SolidIcon
                           name="datasource"
-                          fill={
-                            router.pathname === getPrivateRoute('data_sources')
-                              ? '#3E63DD'
-                              : darkMode
-                              ? '#4C5155'
-                              : '#C1C8CD'
-                          }
+                          fill={router.pathname === getPrivateRoute('data_sources') ? '#3E63DD' : 'var(--slate8)'}
                         />
                       </Link>
                     </ToolTip>
@@ -131,7 +121,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
                       >
                         <SolidIcon
                           name="marketplace"
-                          fill={router.pathname === '/integrations' ? '#3E63DD' : darkMode ? '#4C5155' : '#C1C8CD'}
+                          fill={router.pathname === '/integrations' ? '#3E63DD' : 'var(--slate8)'}
                         />
                       </Link>
                     </ToolTip>
@@ -148,14 +138,9 @@ function Layout({ children, switchDarkMode, darkMode }) {
                       data-cy="icon-workspace-settings"
                     >
                       <SolidIcon
-                        name="setting"
-                        fill={
-                          router.pathname === getPrivateRoute('workspace_settings')
-                            ? '#3E63DD'
-                            : darkMode
-                            ? '#4C5155'
-                            : '#C1C8CD'
-                        }
+                        name="settings"
+                        fill={router.pathname === getPrivateRoute('workspace_settings') ? '#3E63DD' : 'var(--slate8)'}
+                        width={28}
                       />
                     </Link>
                   </ToolTip>
@@ -169,7 +154,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
                       onClick={() => switchDarkMode(!darkMode)}
                       data-cy="mode-switch-button"
                     >
-                      <SolidIcon name={darkMode ? 'lightmode' : 'darkmode'} fill={darkMode ? '#4C5155' : '#C1C8CD'} />
+                      <SolidIcon name={darkMode ? 'lightmode' : 'darkmode'} fill="var(--slate8)" />
                     </div>
                   </ToolTip>
 
@@ -186,7 +171,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
           </div>
         </aside>
       </div>
-      <div style={{ paddingLeft: 56, paddingRight: 0 }} className="col">
+      <div style={{ paddingLeft: 48, paddingRight: 0 }} className="col">
         <Header />
         <div style={{ paddingTop: 64 }}>{children}</div>
       </div>
diff --git a/frontend/src/_ui/LeftSidebar/Button.jsx b/frontend/src/_ui/LeftSidebar/Button.jsx
index 4ee913d9a1..0b1ac89c36 100644
--- a/frontend/src/_ui/LeftSidebar/Button.jsx
+++ b/frontend/src/_ui/LeftSidebar/Button.jsx
@@ -30,7 +30,7 @@ const Button = ({
       type="button"
       title={title}
       style={{ height: baseHeight, width: baseWidth, ...styles, ...(disabled ? diabledStyles : {}) }}
-      className={`btn base-button m-1 ${darkMode && 'dark'} ${classNames} ${isLoading && 'btn-loading'}`}
+      className={`btn base-button ${darkMode && 'dark'} ${classNames} ${isLoading && 'btn-loading'}`}
       onClick={onClick}
     >
       {!isLoading && children}
diff --git a/frontend/src/_ui/LeftSidebar/Header.jsx b/frontend/src/_ui/LeftSidebar/Header.jsx
index 1417bece42..edd31e7e37 100644
--- a/frontend/src/_ui/LeftSidebar/Header.jsx
+++ b/frontend/src/_ui/LeftSidebar/Header.jsx
@@ -2,19 +2,23 @@ import React from 'react';
 import { SearchBoxComponent } from '@/_ui/Search';
 
 const Header = ({ children, darkMode }) => {
-  return <div className={`${darkMode && 'dark'} leftsidebar-panel-header overflow-hidden`}>{children}</div>;
+  return <div className={`${darkMode && 'dark-theme'} leftsidebar-panel-header overflow-hidden`}>{children}</div>;
 };
 
-const PanelHeader = ({ children, settings, title }) => {
+const PanelHeader = ({ children, settings, title, darkMode }) => {
   return (
-    <div className="panel-header-container row">
-      {settings && <div className="cursor-pointer col-auto d-flex px-1">{settings}</div>}
+    <div className={`panel-header-container row ${darkMode && 'dark-theme'}`}>
+      {settings && (
+        <div className="cursor-pointer col-auto d-flex p-0" data-cy={`page-global-settings`}>
+          {settings}
+        </div>
+      )}
       <div className={`col ${settings && 'px-0'}`}>
-        <p className="text-muted m-0 fw-500" data-cy={`label-${String(title).toLowerCase()}`}>
+        <p className="sidebar-panel-header m-0 fw-500" data-cy={`label-${String(title).toLowerCase()}`}>
           {title}
         </p>
       </div>
-      <div className="col px-1">{children}</div>
+      <div className="col">{children}</div>
     </div>
   );
 };
diff --git a/frontend/src/_ui/Popover/index.jsx b/frontend/src/_ui/Popover/index.jsx
index 88c7ca028b..fbb8462b46 100644
--- a/frontend/src/_ui/Popover/index.jsx
+++ b/frontend/src/_ui/Popover/index.jsx
@@ -37,7 +37,7 @@ const PopoverComponent = ({
           style={computeStyle()}
           {...(onInteractOutside && { onInteractOutside })}
           side={side}
-          className={`PopoverContent ${popoverContentClassName} ${darkMode && 'dark'} ${
+          className={`PopoverContent ${popoverContentClassName} ${darkMode && 'dark dark-theme'} ${
             popoverContentHeight && 'drawer-height'
           }`}
         >
diff --git a/frontend/src/_ui/Select/SelectComponent.jsx b/frontend/src/_ui/Select/SelectComponent.jsx
index b4ed5b2d82..3e371fe68d 100644
--- a/frontend/src/_ui/Select/SelectComponent.jsx
+++ b/frontend/src/_ui/Select/SelectComponent.jsx
@@ -8,7 +8,7 @@ export const SelectComponent = ({
   value,
   onChange,
   closeMenuOnSelect,
-  customWrap, //used so that editor selects remains with old theme , remove when whole theme is same !
+  classNamePrefix,
   ...restProps
 }) => {
   const darkMode = localStorage.getItem('darkMode') === 'true';
@@ -76,7 +76,7 @@ export const SelectComponent = ({
       maxMenuHeight={maxMenuHeight}
       menuPortalTarget={useMenuPortal ? document.body : menuPortalTarget}
       closeMenuOnSelect={closeMenuOnSelect ?? true}
-      classNamePrefix={`${darkMode && 'dark-theme'} ${customWrap && 'react-select'}`}
+      classNamePrefix={`${darkMode && 'dark-theme'} ${'react-select'}`}
     />
   );
 };
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index e14de28750..92d995444f 100755
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -3,7 +3,6 @@ import { render } from 'react-dom';
 // import { createRoot } from 'react-dom/client';
 import * as Sentry from '@sentry/react';
 import { useLocation, useNavigationType, createRoutesFromChildren, matchRoutes } from 'react-router-dom';
-import { BrowserTracing } from '@sentry/tracing';
 import { appService } from '@/_services';
 import { App } from './App';
 // eslint-disable-next-line import/no-unresolved
@@ -46,8 +45,9 @@ appService
         dsn: window.public_config.SENTRY_DNS,
         debug: !!window.public_config.SENTRY_DEBUG,
         release: releaseVersion,
+        name: 'react',
         integrations: [
-          new BrowserTracing({
+          new Sentry.BrowserTracing({
             routingInstrumentation: Sentry.reactRouterV6Instrumentation(
               React.useEffect,
               useLocation,
@@ -55,10 +55,10 @@ appService
               createRoutesFromChildren,
               matchRoutes
             ),
-            tracingOrigins: tracingOrigins,
           }),
         ],
         tracesSampleRate: 0.5,
+        tracePropagationTargets: tracingOrigins,
       });
     }
   })
diff --git a/frontend/src/stories/Button.jsx b/frontend/src/stories/Button.jsx
new file mode 100644
index 0000000000..ab95073da9
--- /dev/null
+++ b/frontend/src/stories/Button.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.scss';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary: PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};
diff --git a/frontend/src/stories/Button.stories.js b/frontend/src/stories/Button.stories.js
new file mode 100644
index 0000000000..e085f9ed31
--- /dev/null
+++ b/frontend/src/stories/Button.stories.js
@@ -0,0 +1,45 @@
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/frontend/src/stories/Configure.mdx b/frontend/src/stories/Configure.mdx
new file mode 100644
index 0000000000..a50fcea3ed
--- /dev/null
+++ b/frontend/src/stories/Configure.mdx
@@ -0,0 +1,364 @@
+import { Meta } from "@storybook/blocks";
+
+import Github from "./assets/github.svg";
+import Discord from "./assets/discord.svg";
+import Youtube from "./assets/youtube.svg";
+import Tutorials from "./assets/tutorials.svg";
+import Styling from "./assets/styling.png";
+import Context from "./assets/context.png";
+import Assets from "./assets/assets.png";
+import Docs from "./assets/docs.png";
+import Share from "./assets/share.png";
+import FigmaPlugin from "./assets/figma-plugin.png";
+import Testing from "./assets/testing.png";
+import Accessibility from "./assets/accessibility.png";
+import Theming from "./assets/theming.png";
+import AddonLibrary from "./assets/addon-library.png";
+
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
+
+<Meta title="Configure your project" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Configure your project
+
+    Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+  </div>
+  <div className="sb-section">
+    <div className="sb-section-item">
+      <img
+        src={Styling}
+        alt="A wall of logos representing different styling technologies"
+      />
+      <h4 className="sb-section-item-heading">Add styling and CSS</h4>
+      <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
+      <a
+        href="https://storybook.js.org/docs/react/configure/styling-and-css"
+        target="_blank"
+      >Learn more<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img
+        src={Context}
+        alt="An abstraction representing the composition of data for a component"
+      />
+      <h4 className="sb-section-item-heading">Provide context and mocking</h4>
+      <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
+      <a
+        href="https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking"
+        target="_blank"
+      >Learn more<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img src={Assets} alt="A representation of typography and image assets" />
+      <div>
+        <h4 className="sb-section-item-heading">Load assets and resources</h4>
+        <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
+        `staticDirs` configuration option to specify folders to load when
+        starting Storybook.</p>
+        <a
+          href="https://storybook.js.org/docs/react/configure/images-and-assets"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+    </div>
+  </div>
+</div>
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Do more with Storybook
+
+    Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+  </div>
+
+  <div className="sb-section">
+    <div className="sb-features-grid">
+      <div className="sb-grid-item">
+        <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" />
+        <h4 className="sb-section-item-heading">Autodocs</h4>
+        <p className="sb-section-item-paragraph">Auto-generate living,
+          interactive reference documentation from your components and stories.</p>
+        <a
+          href="https://storybook.js.org/docs/react/writing-docs/autodocs"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" />
+        <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
+        <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
+        <a
+          href="https://storybook.js.org/docs/react/sharing/publish-storybook#publish-storybook-with-chromatic"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" />
+        <h4 className="sb-section-item-heading">Figma Plugin</h4>
+        <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
+          implementation in one place.</p>
+        <a
+          href="https://storybook.js.org/docs/react/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Testing} alt="Screenshot of tests passing and failing" />
+        <h4 className="sb-section-item-heading">Testing</h4>
+        <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
+          complex.</p>
+        <a
+          href="https://storybook.js.org/docs/react/writing-tests/introduction"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" />
+        <h4 className="sb-section-item-heading">Accessibility</h4>
+        <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
+        <a
+          href="https://storybook.js.org/docs/react/writing-tests/accessibility-testing"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Theming} alt="Screenshot of Storybook in light and dark mode" />
+        <h4 className="sb-section-item-heading">Theming</h4>
+        <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
+        <a
+          href="https://storybook.js.org/docs/react/configure/theming"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+    </div>
+  </div>
+</div>
+<div className='sb-addon'>
+  <div className='sb-addon-text'>
+    <h4>Addons</h4>
+    <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
+    <a
+        href="https://storybook.js.org/integrations/"
+        target="_blank"
+      >Discover all addons<RightArrow /></a>
+  </div>
+  <div className='sb-addon-img'>
+    <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." />
+  </div>
+</div>
+
+<div className="sb-section sb-socials">
+    <div className="sb-section-item">
+      <img src={Github} alt="Github logo" className="sb-explore-image"/>
+      Join our contributors building the future of UI development.
+
+      <a
+        href="https://github.com/storybookjs/storybook"
+        target="_blank"
+      >Star on GitHub<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img src={Discord} alt="Discord logo" className="sb-explore-image"/>
+      <div>
+        Get support and chat with frontend developers.
+
+        <a
+          href="https://discord.gg/storybook"
+          target="_blank"
+        >Join Discord server<RightArrow /></a>
+      </div>
+    </div>
+    <div className="sb-section-item">
+      <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/>
+      <div>
+        Watch tutorials, feature previews and interviews.
+
+        <a
+          href="https://www.youtube.com/@chromaticui"
+          target="_blank"
+        >Watch on YouTube<RightArrow /></a>
+      </div>
+    </div>
+    <div className="sb-section-item">
+      <img src={Tutorials} alt="A book" className="sb-explore-image"/>
+      <p>Follow guided walkthroughs on for key workflows.</p>
+
+      <a
+          href="https://storybook.js.org/tutorials/"
+          target="_blank"
+        >Discover tutorials<RightArrow /></a>
+    </div>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+
+  .sb-section a:not(h1 a, h2 a, h3 a) {
+    font-size: 14px;
+  }
+
+  .sb-section-item, .sb-grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sb-section-item-heading {
+    padding-top: 20px !important;
+    padding-bottom: 5px !important;
+    margin: 0 !important;
+  }
+  .sb-section-item-paragraph {
+    margin: 0;
+    padding-bottom: 10px;
+  }
+
+  .sb-chevron {
+    margin-left: 5px;
+  }
+
+  .sb-features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 32px 20px;
+  }
+
+  .sb-socials {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .sb-socials p {
+    margin-bottom: 10px;
+  }
+
+  .sb-explore-image {
+    max-height: 32px;
+    align-self: flex-start;
+  }
+
+  .sb-addon {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    background-color: #EEF3F8;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    background: #EEF3F8;
+    height: 180px;
+    margin-bottom: 48px;
+    overflow: hidden;
+  }
+
+  .sb-addon-text {
+    padding-left: 48px;
+    max-width: 240px;
+  }
+
+  .sb-addon-text h4 {
+    padding-top: 0px;
+  }
+
+  .sb-addon-img {
+    position: absolute;
+    left: 345px;
+    top: 0;
+    height: 100%;
+    width: 200%;
+    overflow: hidden;
+  }
+
+  .sb-addon-img img {
+    width: 650px;
+    transform: rotate(-15deg);
+    margin-left: 40px;
+    margin-top: -72px;
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
+    backface-visibility: hidden;
+  }
+
+  @media screen and (max-width: 800px) {
+    .sb-addon-img {
+      left: 300px;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .sb-section {
+      flex-direction: column;
+    }
+
+    .sb-features-grid {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .sb-socials {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .sb-addon {
+      height: 280px;
+      align-items: flex-start;
+      padding-top: 32px;
+      overflow: hidden;
+    }
+
+    .sb-addon-text {
+      padding-left: 24px;
+    }
+
+    .sb-addon-img {
+      right: 0;
+      left: 0;
+      top: 130px;
+      bottom: 0;
+      overflow: hidden;
+      height: auto;
+      width: 124%;
+    }
+
+    .sb-addon-img img {
+      width: 1200px;
+      transform: rotate(-12deg);
+      margin-left: 0;
+      margin-top: 48px;
+      margin-bottom: -40px;
+      margin-left: -24px;
+    }
+  }
+  `}
+</style>
diff --git a/frontend/src/stories/Header.jsx b/frontend/src/stories/Header.jsx
new file mode 100644
index 0000000000..183d7e1fd5
--- /dev/null
+++ b/frontend/src/stories/Header.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from './Button';
+import './header.scss';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
+            <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
+            <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};
diff --git a/frontend/src/stories/Header.stories.js b/frontend/src/stories/Header.stories.js
new file mode 100644
index 0000000000..917384a22b
--- /dev/null
+++ b/frontend/src/stories/Header.stories.js
@@ -0,0 +1,22 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {};
diff --git a/frontend/src/stories/Page.jsx b/frontend/src/stories/Page.jsx
new file mode 100644
index 0000000000..ed95a1e9cb
--- /dev/null
+++ b/frontend/src/stories/Page.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.scss';
+
+export const Page = () => {
+  const [user, setUser] = React.useState();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without needing to navigate to
+          them in your app. Here are some handy patterns for managing page data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the of child component
+            stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};
diff --git a/frontend/src/stories/Page.stories.js b/frontend/src/stories/Page.stories.js
new file mode 100644
index 0000000000..7467c98cf4
--- /dev/null
+++ b/frontend/src/stories/Page.stories.js
@@ -0,0 +1,25 @@
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
diff --git a/frontend/src/stories/assets/accessibility.png b/frontend/src/stories/assets/accessibility.png
new file mode 100644
index 0000000000..6ffe6feabd
Binary files /dev/null and b/frontend/src/stories/assets/accessibility.png differ
diff --git a/frontend/src/stories/assets/accessibility.svg b/frontend/src/stories/assets/accessibility.svg
new file mode 100644
index 0000000000..a3288830e3
--- /dev/null
+++ b/frontend/src/stories/assets/accessibility.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Accessibility</title>
+  <circle cx="24.334" cy="24" r="24" fill="#A849FF" fill-opacity="0.3"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.8609 11.585C27.8609 9.59506 26.2497 7.99023 24.2519 7.99023C22.254 7.99023 20.6429 9.65925 20.6429 11.585C20.6429 13.575 22.254 15.1799 24.2519 15.1799C26.2497 15.1799 27.8609 13.575 27.8609 11.585ZM21.8922 22.6473C21.8467 23.9096 21.7901 25.4788 21.5897 26.2771C20.9853 29.0462 17.7348 36.3314 17.3325 37.2275C17.1891 37.4923 17.1077 37.7955 17.1077 38.1178C17.1077 39.1519 17.946 39.9902 18.9802 39.9902C19.6587 39.9902 20.253 39.6293 20.5814 39.0889L20.6429 38.9874L24.2841 31.22C24.2841 31.22 27.5529 37.9214 27.9238 38.6591C28.2948 39.3967 28.8709 39.9902 29.7168 39.9902C30.751 39.9902 31.5893 39.1519 31.5893 38.1178C31.5893 37.7951 31.3639 37.2265 31.3639 37.2265C30.9581 36.3258 27.698 29.0452 27.0938 26.2771C26.8975 25.4948 26.847 23.9722 26.8056 22.7236C26.7927 22.333 26.7806 21.9693 26.7653 21.6634C26.7008 21.214 27.0231 20.8289 27.4097 20.7005L35.3366 18.3253C36.3033 18.0685 36.8834 16.9773 36.6256 16.0144C36.3678 15.0515 35.2722 14.4737 34.3055 14.7305C34.3055 14.7305 26.8619 17.1057 24.2841 17.1057C21.7062 17.1057 14.456 14.7947 14.456 14.7947C13.4893 14.5379 12.3937 14.9873 12.0715 15.9502C11.7493 16.9131 12.3293 18.0044 13.3604 18.3253L21.2873 20.7005C21.674 20.8289 21.9318 21.214 21.9318 21.6634C21.9174 21.9493 21.9053 22.2857 21.8922 22.6473Z" fill="#A470D5"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/stories/assets/addon-library.png b/frontend/src/stories/assets/addon-library.png
new file mode 100644
index 0000000000..95deb38a88
Binary files /dev/null and b/frontend/src/stories/assets/addon-library.png differ
diff --git a/frontend/src/stories/assets/assets.png b/frontend/src/stories/assets/assets.png
new file mode 100644
index 0000000000..cfba6817ae
Binary files /dev/null and b/frontend/src/stories/assets/assets.png differ
diff --git a/frontend/src/stories/assets/context.png b/frontend/src/stories/assets/context.png
new file mode 100644
index 0000000000..e5cd249a2d
Binary files /dev/null and b/frontend/src/stories/assets/context.png differ
diff --git a/frontend/src/stories/assets/discord.svg b/frontend/src/stories/assets/discord.svg
new file mode 100644
index 0000000000..1204df998d
--- /dev/null
+++ b/frontend/src/stories/assets/discord.svg
@@ -0,0 +1,15 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10031_177575)">
+<mask id="mask0_10031_177575" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="33" height="25">
+<path d="M32.5034 4.00195H0.503906V28.7758H32.5034V4.00195Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_10031_177575)">
+<path d="M27.5928 6.20817C25.5533 5.27289 23.3662 4.58382 21.0794 4.18916C21.0378 4.18154 20.9962 4.20057 20.9747 4.23864C20.6935 4.73863 20.3819 5.3909 20.1637 5.90358C17.7042 5.53558 15.2573 5.53558 12.8481 5.90358C12.6299 5.37951 12.307 4.73863 12.0245 4.23864C12.003 4.20184 11.9614 4.18281 11.9198 4.18916C9.63431 4.58255 7.44721 5.27163 5.40641 6.20817C5.38874 6.21578 5.3736 6.22848 5.36355 6.24497C1.21508 12.439 0.078646 18.4809 0.636144 24.4478C0.638667 24.477 0.655064 24.5049 0.677768 24.5227C3.41481 26.5315 6.06609 27.7511 8.66815 28.5594C8.70979 28.5721 8.75392 28.5569 8.78042 28.5226C9.39594 27.6826 9.94461 26.7968 10.4151 25.8653C10.4428 25.8107 10.4163 25.746 10.3596 25.7244C9.48927 25.3945 8.66058 24.9922 7.86343 24.5354C7.80038 24.4986 7.79533 24.4084 7.85333 24.3653C8.02108 24.2397 8.18888 24.109 8.34906 23.977C8.37804 23.9529 8.41842 23.9478 8.45249 23.963C13.6894 26.3526 19.359 26.3526 24.5341 23.963C24.5682 23.9465 24.6086 23.9516 24.6388 23.9757C24.799 24.1077 24.9668 24.2397 25.1358 24.3653C25.1938 24.4084 25.19 24.4986 25.127 24.5354C24.3298 25.0011 23.5011 25.3945 22.6296 25.7232C22.5728 25.7447 22.5476 25.8107 22.5754 25.8653C23.0559 26.7955 23.6046 27.6812 24.2087 28.5213C24.234 28.5569 24.2794 28.5721 24.321 28.5594C26.9357 27.7511 29.5869 26.5315 32.324 24.5227C32.348 24.5049 32.3631 24.4783 32.3656 24.4491C33.0328 17.5506 31.2481 11.5584 27.6344 6.24623C27.6256 6.22848 27.6105 6.21578 27.5928 6.20817ZM11.1971 20.8146C9.62043 20.8146 8.32129 19.3679 8.32129 17.5913C8.32129 15.8146 9.59523 14.368 11.1971 14.368C12.8115 14.368 14.0981 15.8273 14.0729 17.5913C14.0729 19.3679 12.7989 20.8146 11.1971 20.8146ZM21.8299 20.8146C20.2533 20.8146 18.9541 19.3679 18.9541 17.5913C18.9541 15.8146 20.228 14.368 21.8299 14.368C23.4444 14.368 24.7309 15.8273 24.7057 17.5913C24.7057 19.3679 23.4444 20.8146 21.8299 20.8146Z" fill="#5865F2"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_10031_177575">
+<rect width="31.9995" height="32" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/stories/assets/docs.png b/frontend/src/stories/assets/docs.png
new file mode 100644
index 0000000000..a749629df9
Binary files /dev/null and b/frontend/src/stories/assets/docs.png differ
diff --git a/frontend/src/stories/assets/figma-plugin.png b/frontend/src/stories/assets/figma-plugin.png
new file mode 100644
index 0000000000..8f79b08cdf
Binary files /dev/null and b/frontend/src/stories/assets/figma-plugin.png differ
diff --git a/frontend/src/stories/assets/github.svg b/frontend/src/stories/assets/github.svg
new file mode 100644
index 0000000000..158e0268a3
--- /dev/null
+++ b/frontend/src/stories/assets/github.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 0C7.16466 0 0 7.17472 0 16.0256C0 23.1061 4.58452 29.1131 10.9419 31.2322C11.7415 31.3805 12.0351 30.8845 12.0351 30.4613C12.0351 30.0791 12.0202 28.8167 12.0133 27.4776C7.56209 28.447 6.62283 25.5868 6.62283 25.5868C5.89499 23.7345 4.8463 23.2419 4.8463 23.2419C3.39461 22.2473 4.95573 22.2678 4.95573 22.2678C6.56242 22.3808 7.40842 23.9192 7.40842 23.9192C8.83547 26.3691 11.1514 25.6609 12.0645 25.2514C12.2081 24.2156 12.6227 23.5087 13.0803 23.1085C9.52648 22.7032 5.7906 21.3291 5.7906 15.1886C5.7906 13.4389 6.41563 12.0094 7.43916 10.8871C7.27303 10.4834 6.72537 8.85349 7.59415 6.64609C7.59415 6.64609 8.93774 6.21539 11.9953 8.28877C13.2716 7.9337 14.6404 7.75563 16.0001 7.74953C17.3599 7.75563 18.7297 7.9337 20.0084 8.28877C23.0623 6.21539 24.404 6.64609 24.404 6.64609C25.2749 8.85349 24.727 10.4834 24.5608 10.8871C25.5868 12.0094 26.2075 13.4389 26.2075 15.1886C26.2075 21.3437 22.4645 22.699 18.9017 23.0957C19.4756 23.593 19.9869 24.5683 19.9869 26.0634C19.9869 28.2077 19.9684 29.9334 19.9684 30.4613C19.9684 30.8877 20.2564 31.3874 21.0674 31.2301C27.4213 29.1086 32 23.1037 32 16.0256C32 7.17472 24.8364 0 16.0001 0ZM5.99257 22.8288C5.95733 22.9084 5.83227 22.9322 5.71834 22.8776C5.60229 22.8253 5.53711 22.7168 5.57474 22.6369C5.60918 22.5549 5.7345 22.5321 5.85029 22.587C5.9666 22.6393 6.03284 22.7489 5.99257 22.8288ZM6.7796 23.5321C6.70329 23.603 6.55412 23.5701 6.45291 23.4581C6.34825 23.3464 6.32864 23.197 6.40601 23.125C6.4847 23.0542 6.62937 23.0874 6.73429 23.1991C6.83895 23.3121 6.85935 23.4605 6.7796 23.5321ZM7.31953 24.4321C7.2215 24.5003 7.0612 24.4363 6.96211 24.2938C6.86407 24.1513 6.86407 23.9804 6.96422 23.9119C7.06358 23.8435 7.2215 23.905 7.32191 24.0465C7.41968 24.1914 7.41968 24.3623 7.31953 24.4321ZM8.23267 25.4743C8.14497 25.5712 7.95818 25.5452 7.82146 25.413C7.68156 25.2838 7.64261 25.1004 7.73058 25.0035C7.81934 24.9064 8.00719 24.9337 8.14497 25.0648C8.28381 25.1938 8.3262 25.3785 8.23267 25.4743ZM9.41281 25.8262C9.37413 25.9517 9.19423 26.0088 9.013 25.9554C8.83203 25.9005 8.7136 25.7535 8.75016 25.6266C8.78778 25.5003 8.96848 25.4408 9.15104 25.4979C9.33174 25.5526 9.45044 25.6985 9.41281 25.8262ZM10.7559 25.9754C10.7604 26.1076 10.6067 26.2172 10.4165 26.2196C10.2252 26.2238 10.0704 26.1169 10.0683 25.9868C10.0683 25.8534 10.2185 25.7448 10.4098 25.7416C10.6001 25.7379 10.7559 25.8441 10.7559 25.9754ZM12.0753 25.9248C12.0981 26.0537 11.9658 26.1862 11.7769 26.2215C11.5912 26.2554 11.4192 26.1758 11.3957 26.0479C11.3726 25.9157 11.5072 25.7833 11.6927 25.7491C11.8819 25.7162 12.0512 25.7937 12.0753 25.9248Z" fill="#161614"/>
+</svg>
diff --git a/frontend/src/stories/assets/share.png b/frontend/src/stories/assets/share.png
new file mode 100644
index 0000000000..8097a37077
Binary files /dev/null and b/frontend/src/stories/assets/share.png differ
diff --git a/frontend/src/stories/assets/styling.png b/frontend/src/stories/assets/styling.png
new file mode 100644
index 0000000000..d341e8263e
Binary files /dev/null and b/frontend/src/stories/assets/styling.png differ
diff --git a/frontend/src/stories/assets/testing.png b/frontend/src/stories/assets/testing.png
new file mode 100644
index 0000000000..d4ac39a0ce
Binary files /dev/null and b/frontend/src/stories/assets/testing.png differ
diff --git a/frontend/src/stories/assets/theming.png b/frontend/src/stories/assets/theming.png
new file mode 100644
index 0000000000..1535eb9b81
Binary files /dev/null and b/frontend/src/stories/assets/theming.png differ
diff --git a/frontend/src/stories/assets/tutorials.svg b/frontend/src/stories/assets/tutorials.svg
new file mode 100644
index 0000000000..4b2fc7c44b
--- /dev/null
+++ b/frontend/src/stories/assets/tutorials.svg
@@ -0,0 +1,12 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10031_177597)">
+<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" fill="#B7F0EF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" fill="#87E6E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" fill="#61C1FD"/>
+</g>
+<defs>
+<clipPath id="clip0_10031_177597">
+<rect width="32" height="32" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/stories/assets/youtube.svg b/frontend/src/stories/assets/youtube.svg
new file mode 100644
index 0000000000..33a3a61f61
--- /dev/null
+++ b/frontend/src/stories/assets/youtube.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z" fill="#ED1D24"/>
+<path d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z" fill="white"/>
+</svg>
diff --git a/frontend/src/stories/button.scss b/frontend/src/stories/button.scss
new file mode 100644
index 0000000000..dc91dc7637
--- /dev/null
+++ b/frontend/src/stories/button.scss
@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
diff --git a/frontend/src/stories/header.scss b/frontend/src/stories/header.scss
new file mode 100644
index 0000000000..d9a70528a3
--- /dev/null
+++ b/frontend/src/stories/header.scss
@@ -0,0 +1,32 @@
+.storybook-header {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}
diff --git a/frontend/src/stories/page.scss b/frontend/src/stories/page.scss
new file mode 100644
index 0000000000..098dad1185
--- /dev/null
+++ b/frontend/src/stories/page.scss
@@ -0,0 +1,69 @@
+.storybook-page {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+.storybook-page h2 {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+.storybook-page ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.storybook-page .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index dd4875b0fc..79238fb67d 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -5,6 +5,10 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 require('dotenv').config({ path: '../.env' });
 const hash = require('string-hash');
+const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
+const fs = require('fs');
+const versionPath = path.resolve(__dirname, '.version');
+const version = fs.readFileSync(versionPath, 'utf-8').trim();
 
 const environment = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 
@@ -53,7 +57,7 @@ module.exports = {
       '@assets': path.resolve(__dirname, 'assets/'),
     },
   },
-  devtool: environment === 'development' ? 'eval-cheap-source-map' : false,
+  devtool: environment === 'development' ? 'eval-cheap-source-map' : 'hidden-source-map',
   module: {
     rules: [
       {
@@ -151,6 +155,16 @@ module.exports = {
       'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
       'process.env.SERVE_CLIENT': JSON.stringify(process.env.SERVE_CLIENT),
     }),
+    // Add Sentry plugin for error and performance monitoring
+    sentryWebpackPlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: process.env.SENTRY_ORG,
+      project: process.env.SENTRY_PROJECT,
+      release: {
+        // The version should be same as what its when we are sending error events
+        name: `tooljet-${version}`,
+      },
+    }),
   ],
   devServer: {
     historyApiFallback: { index: ASSET_PATH },
diff --git a/package.json b/package.json
index 4f0535663d..5cf307b824 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "db:drop": "npm --prefix server run db:drop",
     "deploy": "cp -a frontend/build/. public/",
     "heroku-postbuild": "./heroku-postbuild.sh",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "update-version": "node update-version.js"
   }
 }
diff --git a/server/.version b/server/.version
index 0e7079b691..d76bd2ba3e 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-2.16.1
+2.17.0
diff --git a/server/data-migrations/1692973078520-CellSizeRegularCondensed.ts b/server/data-migrations/1692973078520-CellSizeRegularCondensed.ts
new file mode 100644
index 0000000000..0833ebb753
--- /dev/null
+++ b/server/data-migrations/1692973078520-CellSizeRegularCondensed.ts
@@ -0,0 +1,59 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { AppVersion } from '../src/entities/app_version.entity';
+
+export class CellSizeRegularCondensed1692973078520 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const entityManager = queryRunner.manager;
+    const queryBuilder = queryRunner.connection.createQueryBuilder();
+    const appVersionRepository = entityManager.getRepository(AppVersion);
+
+    const appVersions = await appVersionRepository.find();
+
+    for (const version of appVersions) {
+      const definition = version?.['definition'];
+      if (definition) {
+        const pages = definition?.['pages'];
+        if (pages) {
+          for (const pageId of Object.keys(pages)) {
+            const components = pages?.[pageId]?.['components'];
+            if (components) {
+              for (const componentId of Object.keys(components)) {
+                const component = components[componentId];
+                if (component?.component?.component === 'Table') {
+                  component.component.definition.styles.cellSize = {
+                    value: 'regular',
+                  };
+                  component.component.styles.cellSize = {
+                    ...component.component.styles.cellSize,
+                    options: [
+                      { name: 'Condensed', value: 'condensed' },
+                      { name: 'Regular', value: 'regular' },
+                    ],
+                  };
+                  components[componentId] = {
+                    ...component,
+                    component: {
+                      ...component.component,
+                      definition: {
+                        ...component.component.definition,
+                      },
+                    },
+                  };
+                }
+              }
+              pages[pageId]['components'] = components;
+            }
+          }
+        }
+
+        definition['pages'] = pages;
+
+        version.definition = definition;
+
+        await queryBuilder.update(AppVersion).set({ definition }).where('id = :id', { id: version.id }).execute();
+      }
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/data-migrations/1692974311591-TableRowCellStyle.ts b/server/data-migrations/1692974311591-TableRowCellStyle.ts
new file mode 100644
index 0000000000..114152b059
--- /dev/null
+++ b/server/data-migrations/1692974311591-TableRowCellStyle.ts
@@ -0,0 +1,61 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { AppVersion } from '../src/entities/app_version.entity';
+
+export class TableRowCellStyle1692974311591 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const entityManager = queryRunner.manager;
+    const queryBuilder = queryRunner.connection.createQueryBuilder();
+    const appVersionRepository = entityManager.getRepository(AppVersion);
+
+    const appVersions = await appVersionRepository.find();
+
+    for (const version of appVersions) {
+      const definition = version['definition'];
+
+      if (definition) {
+        const pages = definition['pages'];
+        if (pages) {
+          for (const pageId of Object.keys(pages)) {
+            const components = pages[pageId]['components'];
+            if (components) {
+              for (const componentId of Object.keys(components)) {
+                const component = components[componentId];
+                if (component?.component?.component === 'Table') {
+                  component.component.definition.styles.tableType = {
+                    value: 'table-classic',
+                  };
+                  component.component.styles.tableType = {
+                    ...component.component.styles.tableType,
+                    options: [
+                      { name: 'Bordered', value: 'table-bordered' },
+                      { name: 'Regular', value: 'table-classic' },
+                      { name: 'Striped', value: 'table-striped' },
+                    ],
+                  };
+                  components[componentId] = {
+                    ...component,
+                    component: {
+                      ...component.component,
+                      definition: {
+                        ...component.component.definition,
+                      },
+                    },
+                  };
+                }
+              }
+            }
+            pages[pageId]['components'] = components;
+          }
+        }
+
+        definition['pages'] = pages;
+
+        version.definition = definition;
+
+        await queryBuilder.update(AppVersion).set({ definition }).where('id = :id', { id: version.id }).execute();
+      }
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/src/main.ts b/server/src/main.ts
index c506400fbe..07b828c0b2 100644
--- a/server/src/main.ts
+++ b/server/src/main.ts
@@ -16,6 +16,7 @@ import { join } from 'path';
 const fs = require('fs');
 
 globalThis.TOOLJET_VERSION = fs.readFileSync('./.version', 'utf8').trim();
+process.env['RELEASE_VERSION'] = globalThis.TOOLJET_VERSION;
 
 function replaceSubpathPlaceHoldersInStaticAssets() {
   const filesToReplaceAssetPath = ['index.html', 'runtime.js', 'main.js'];
diff --git a/update-version.js b/update-version.js
new file mode 100644
index 0000000000..68cca448ab
--- /dev/null
+++ b/update-version.js
@@ -0,0 +1,30 @@
+// As we are maintaining three .version files, this script will help in updating it one go
+const fs = require('fs');
+const path = require('path');
+
+// Get the new version from the command-line arguments
+const newVersion = process.argv[2];
+
+if (!newVersion) {
+  console.error('Usage: node update-version.js <new-version>');
+  process.exit(1);
+}
+
+// Function to update version in a file
+function updateVersion(filePath, newVersion) {
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const updatedContent = content.replace(/\d+\.\d+\.\d+/, newVersion);
+  fs.writeFileSync(filePath, updatedContent, 'utf-8');
+  console.log(`Updated version in ${filePath} to ${newVersion}`);
+}
+
+// Update version in both server and client folders
+const versionPath =  path.join(__dirname, '.version')
+const serverVersionFilePath = path.join(__dirname, 'server', '.version');
+const frontendVersionFilePath = path.join(__dirname, 'frontend', '.version');
+
+updateVersion(versionPath,newVersion)
+updateVersion(serverVersionFilePath, newVersion);
+updateVersion(frontendVersionFilePath, newVersion);
+
+// eg.---> npm run update-version <version> ---> npm run update-version 3.0.0
\ No newline at end of file