From c04ea7e7314fd8eab1752dc94356b3ba176b276e Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sat, 24 Jun 2023 23:24:51 +0530
Subject: [PATCH 01/22] feat(integration-page): updated components and api
 hooks

---
 .../DeleteActionModal/DeleteActionModal.tsx   |   6 +-
 frontend/src/hooks/api/auth/index.tsx         |  11 +-
 frontend/src/hooks/api/bots/index.tsx         |   1 +
 frontend/src/hooks/api/bots/queries.tsx       |  38 ++
 frontend/src/hooks/api/bots/types.ts          |  20 +
 frontend/src/hooks/api/index.tsx              |   3 +
 .../src/hooks/api/integrationAuth/index.tsx   |  14 +-
 .../src/hooks/api/integrationAuth/queries.tsx | 363 ++++++++++--------
 .../src/hooks/api/integrationAuth/types.ts    |  41 +-
 frontend/src/hooks/api/integrations/index.tsx |   1 +
 .../src/hooks/api/integrations/queries.tsx    |  35 ++
 frontend/src/hooks/api/integrations/types.ts  |  33 ++
 frontend/src/hooks/api/types.ts               |   2 +
 frontend/src/hooks/api/workspace/index.tsx    |   2 +
 frontend/src/hooks/api/workspace/queries.tsx  |  63 ++-
 15 files changed, 423 insertions(+), 210 deletions(-)
 create mode 100644 frontend/src/hooks/api/bots/index.tsx
 create mode 100644 frontend/src/hooks/api/bots/queries.tsx
 create mode 100644 frontend/src/hooks/api/bots/types.ts
 create mode 100644 frontend/src/hooks/api/integrations/index.tsx
 create mode 100644 frontend/src/hooks/api/integrations/queries.tsx
 create mode 100644 frontend/src/hooks/api/integrations/types.ts

diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
index 9fd93c90f..ebe45bf9b 100644
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -13,6 +13,7 @@ type Props = {
   onChange?: (isOpen: boolean) => void;
   deleteKey: string;
   title: string;
+  subTitle?: string;
   onDeleteApproved: () => Promise<void>;
 };
 
@@ -22,7 +23,8 @@ export const DeleteActionModal = ({
   onChange,
   deleteKey,
   onDeleteApproved,
-  title
+  title,
+  subTitle = 'This action is irreversible!'
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();
@@ -52,7 +54,7 @@ export const DeleteActionModal = ({
     >
       <ModalContent
         title={title}
-        subTitle="This action is irreversible!"
+        subTitle={subTitle}
         footerContent={
           <div className="flex items-center">
             <Button
diff --git a/frontend/src/hooks/api/auth/index.tsx b/frontend/src/hooks/api/auth/index.tsx
index fb89ba3fe..2e66fe36f 100644
--- a/frontend/src/hooks/api/auth/index.tsx
+++ b/frontend/src/hooks/api/auth/index.tsx
@@ -1,6 +1,7 @@
 export {
-    useGetAuthToken,
-    useGetCommonPasswords,
-    useRevokeAllSessions,
-    useSendMfaToken, 
-    useVerifyMfaToken} from "./queries"
+  useGetAuthToken,
+  useGetCommonPasswords,
+  useRevokeAllSessions,
+  useSendMfaToken,
+  useVerifyMfaToken
+} from "./queries";
diff --git a/frontend/src/hooks/api/bots/index.tsx b/frontend/src/hooks/api/bots/index.tsx
new file mode 100644
index 000000000..aa2ee6030
--- /dev/null
+++ b/frontend/src/hooks/api/bots/index.tsx
@@ -0,0 +1 @@
+export { useGetWorkspaceBot, useUpdateBotActiveStatus } from './queries';
diff --git a/frontend/src/hooks/api/bots/queries.tsx b/frontend/src/hooks/api/bots/queries.tsx
new file mode 100644
index 000000000..14c5d4f94
--- /dev/null
+++ b/frontend/src/hooks/api/bots/queries.tsx
@@ -0,0 +1,38 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { TBot, TSetBotActiveStatusDto } from './types';
+
+const queryKeys = {
+  getBot: (workspaceId: string) => [{ workspaceId }, 'bot'] as const
+};
+
+const fetchWorkspaceBot = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ bot: TBot }>(`/api/v1/bot/${workspaceId}`);
+  return data.bot;
+};
+
+export const useGetWorkspaceBot = (workspaceId: string) =>
+  useQuery({
+    queryKey: queryKeys.getBot(workspaceId),
+    queryFn: () => fetchWorkspaceBot(workspaceId),
+    enabled: Boolean(workspaceId)
+  });
+
+// mutation
+
+export const useUpdateBotActiveStatus = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TSetBotActiveStatusDto>({
+    mutationFn: ({ botId, isActive, botKey }) =>
+      apiRequest.patch(`/api/v1/bot/${botId}/active`, {
+        isActive,
+        botKey
+      }),
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(queryKeys.getBot(workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/bots/types.ts b/frontend/src/hooks/api/bots/types.ts
new file mode 100644
index 000000000..3ee4620bb
--- /dev/null
+++ b/frontend/src/hooks/api/bots/types.ts
@@ -0,0 +1,20 @@
+export type TBot = {
+  _id: string;
+  name: string;
+  workspace: string;
+  isActive: boolean;
+  publicKey: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type TSetBotActiveStatusDto = {
+  workspaceId: string;
+  botId: string;
+  isActive: boolean;
+  botKey?: {
+    encryptedKey: string;
+    nonce: string;
+  };
+};
diff --git a/frontend/src/hooks/api/index.tsx b/frontend/src/hooks/api/index.tsx
index 1bbfaa3d1..075702bc7 100644
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -1,5 +1,8 @@
 export * from "./auth";
+export * from "./bots";
 export * from "./incidentContacts";
+export * from "./integrationAuth";
+export * from "./integrations";
 export * from "./keys";
 export * from "./organization";
 export * from "./secretFolders";
diff --git a/frontend/src/hooks/api/integrationAuth/index.tsx b/frontend/src/hooks/api/integrationAuth/index.tsx
index e3997c82a..3b18be83f 100644
--- a/frontend/src/hooks/api/integrationAuth/index.tsx
+++ b/frontend/src/hooks/api/integrationAuth/index.tsx
@@ -1,7 +1,9 @@
 export {
-    useGetIntegrationAuthApps,
-    useGetIntegrationAuthById,
-    useGetIntegrationAuthRailwayEnvironments,
-    useGetIntegrationAuthRailwayServices,
-    useGetIntegrationAuthTeams,
-    useGetIntegrationAuthVercelBranches} from "./queries";
\ No newline at end of file
+  useDeleteIntegrationAuth,
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById,
+  useGetIntegrationAuthRailwayEnvironments,
+  useGetIntegrationAuthRailwayServices,
+  useGetIntegrationAuthTeams,
+  useGetIntegrationAuthVercelBranches
+} from "./queries";
diff --git a/frontend/src/hooks/api/integrationAuth/queries.tsx b/frontend/src/hooks/api/integrationAuth/queries.tsx
index 5e6d02dda..aed885ff3 100644
--- a/frontend/src/hooks/api/integrationAuth/queries.tsx
+++ b/frontend/src/hooks/api/integrationAuth/queries.tsx
@@ -1,204 +1,237 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import {
-    App,
-    Environment,
-    IntegrationAuth,
-    Service,
-    Team
-} from "./types";
+import { workspaceKeys } from "../workspace/queries";
+import { App, Environment, IntegrationAuth, Service, Team } from "./types";
 
 const integrationAuthKeys = {
-    getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, "integrationAuth"] as const,
-    getIntegrationAuthApps: (integrationAuthId: string, teamId?: string) => [{ integrationAuthId, teamId }, "integrationAuthApps"] as const,
-    getIntegrationAuthTeams: (integrationAuthId: string) => [{ integrationAuthId }, "integrationAuthTeams"] as const,
-    getIntegrationAuthVercelBranches: ({
-        integrationAuthId,
-        appId,
-    }: {
-        integrationAuthId: string;
-        appId: string;
-    }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
-    getIntegrationAuthRailwayEnvironments: ({
-        integrationAuthId,
-        appId
-    }: {
-        integrationAuthId: string;
-        appId: string;
-    }) => [{ integrationAuthId, appId }, "integrationAuthRailwayEnvironments"] as const,
-    getIntegrationAuthRailwayServices: ({
-        integrationAuthId,
-        appId
-    }: {
-        integrationAuthId: string;
-        appId: string;
-    }) => [{ integrationAuthId, appId }, "integrationAuthRailwayServices"] as const
-}
-
-const fetchIntegrationAuthById = async (integrationAuthId: string) => {
-    const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(`/api/v1/integration-auth/${integrationAuthId}`);
-    return data.integrationAuth;
-}
-
-const fetchIntegrationAuthApps = async ({
-    integrationAuthId,
-    teamId
-}: {
-    integrationAuthId: string;
-    teamId?: string;
-}) => {
-    const searchParams = new URLSearchParams(teamId ? { teamId } : undefined);
-    const { data } = await apiRequest.get<{ apps: App[] }>(
-        `/api/v1/integration-auth/${integrationAuthId}/apps`, 
-        { params: searchParams }
-    );
-    return data.apps;
-}
-
-const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
-    const { data } = await apiRequest.get<{ teams: Team[] }>(`/api/v1/integration-auth/${integrationAuthId}/teams`);
-    return data.teams;
-}
-
-const fetchIntegrationAuthVercelBranches = async ({
+  getIntegrationAuthById: (integrationAuthId: string) =>
+    [{ integrationAuthId }, "integrationAuth"] as const,
+  getIntegrationAuthApps: (integrationAuthId: string, teamId?: string) =>
+    [{ integrationAuthId, teamId }, "integrationAuthApps"] as const,
+  getIntegrationAuthTeams: (integrationAuthId: string) =>
+    [{ integrationAuthId }, "integrationAuthTeams"] as const,
+  getIntegrationAuthVercelBranches: ({
     integrationAuthId,
     appId
-}: {
+  }: {
     integrationAuthId: string;
     appId: string;
+  }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
+  getIntegrationAuthRailwayEnvironments: ({
+    integrationAuthId,
+    appId
+  }: {
+    integrationAuthId: string;
+    appId: string;
+  }) => [{ integrationAuthId, appId }, "integrationAuthRailwayEnvironments"] as const,
+  getIntegrationAuthRailwayServices: ({
+    integrationAuthId,
+    appId
+  }: {
+    integrationAuthId: string;
+    appId: string;
+  }) => [{ integrationAuthId, appId }, "integrationAuthRailwayServices"] as const
+};
+
+const fetchIntegrationAuthById = async (integrationAuthId: string) => {
+  const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(
+    `/api/v1/integration-auth/${integrationAuthId}`
+  );
+  return data.integrationAuth;
+};
+
+const fetchIntegrationAuthApps = async ({
+  integrationAuthId,
+  teamId
+}: {
+  integrationAuthId: string;
+  teamId?: string;
 }) => {
-    const { data: { branches } } = await apiRequest.get<{ branches: string[] }>(`/api/v1/integration-auth/${integrationAuthId}/vercel/branches`, {
-        params: {
-            appId
-        }
-    });
-    
-    return branches;
+  const searchParams = new URLSearchParams(teamId ? { teamId } : undefined);
+  const { data } = await apiRequest.get<{ apps: App[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/apps`,
+    { params: searchParams }
+  );
+  return data.apps;
+};
+
+const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
+  const { data } = await apiRequest.get<{ teams: Team[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/teams`
+  );
+  return data.teams;
+};
+
+const fetchIntegrationAuthVercelBranches = async ({
+  integrationAuthId,
+  appId
+}: {
+  integrationAuthId: string;
+  appId: string;
+}) => {
+  const {
+    data: { branches }
+  } = await apiRequest.get<{ branches: string[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/vercel/branches`,
+    {
+      params: {
+        appId
+      }
+    }
+  );
+
+  return branches;
 };
 
 const fetchIntegrationAuthRailwayEnvironments = async ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    const { data: { environments } } = await apiRequest.get<{ environments: Environment[] }>(`/api/v1/integration-auth/${integrationAuthId}/railway/environments`, {
-        params: {
-            appId
-        }
-    });
-    
-    return environments;
-}
+  const {
+    data: { environments }
+  } = await apiRequest.get<{ environments: Environment[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/railway/environments`,
+    {
+      params: {
+        appId
+      }
+    }
+  );
+
+  return environments;
+};
 
 const fetchIntegrationAuthRailwayServices = async ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    const { data: { services } } = await apiRequest.get<{ services: Service[] }>(`/api/v1/integration-auth/${integrationAuthId}/railway/services`, {
-        params: {
-            appId
-        }
-    });
-    
-    return services;
-}
+  const {
+    data: { services }
+  } = await apiRequest.get<{ services: Service[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/railway/services`,
+    {
+      params: {
+        appId
+      }
+    }
+  );
+
+  return services;
+};
 
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
-        queryFn: () => fetchIntegrationAuthById(integrationAuthId),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
+    queryFn: () => fetchIntegrationAuthById(integrationAuthId),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthApps = ({
-    integrationAuthId,
-    teamId
+  integrationAuthId,
+  teamId
 }: {
-    integrationAuthId: string;
-    teamId?: string;
+  integrationAuthId: string;
+  teamId?: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId),
-        queryFn: () =>  fetchIntegrationAuthApps({
-            integrationAuthId,
-            teamId
-        }),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId),
+    queryFn: () =>
+      fetchIntegrationAuthApps({
+        integrationAuthId,
+        teamId
+      }),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthTeams = (integrationAuthId: string) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthTeams(integrationAuthId),
-        queryFn: () =>  fetchIntegrationAuthTeams(integrationAuthId),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthTeams(integrationAuthId),
+    queryFn: () => fetchIntegrationAuthTeams(integrationAuthId),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthVercelBranches = ({
-    integrationAuthId,
-    appId,
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthVercelBranches({
-            integrationAuthId,
-            appId,
-        }),
-        queryFn: () => fetchIntegrationAuthVercelBranches({
-            integrationAuthId,
-            appId,
-        }),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthVercelBranches({
+      integrationAuthId,
+      appId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthVercelBranches({
+        integrationAuthId,
+        appId
+      }),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthRailwayEnvironments = ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthRailwayEnvironments({
-            integrationAuthId,
-            appId,
-        }),
-        queryFn: () => fetchIntegrationAuthRailwayEnvironments({
-            integrationAuthId,
-            appId,
-        }),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthRailwayEnvironments({
+      integrationAuthId,
+      appId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthRailwayEnvironments({
+        integrationAuthId,
+        appId
+      }),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthRailwayServices = ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthRailwayServices({
-            integrationAuthId,
-            appId,
-        }),
-        queryFn: () => fetchIntegrationAuthRailwayServices({
-            integrationAuthId,
-            appId,
-        }),
-        enabled: true
-    });
-}
\ No newline at end of file
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthRailwayServices({
+      integrationAuthId,
+      appId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthRailwayServices({
+        integrationAuthId,
+        appId
+      }),
+    enabled: true
+  });
+};
+
+export const useDeleteIntegrationAuth = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, { id: string; workspaceId: string }>({
+    mutationFn: ({ id }) => apiRequest.delete(`/api/v1/integration-auth/${id}`),
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceAuthorization(workspaceId));
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIntegrations(workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/integrationAuth/types.ts b/frontend/src/hooks/api/integrationAuth/types.ts
index 7ea8799a5..73440cc8d 100644
--- a/frontend/src/hooks/api/integrationAuth/types.ts
+++ b/frontend/src/hooks/api/integrationAuth/types.ts
@@ -1,28 +1,31 @@
 export type IntegrationAuth = {
-    _id: string;
-    workspace: string;
-    integration: string;
-    teamId?: string;
-    accountId?: string;
-}
+  _id: string;
+  integration: string;
+  workspace: string;
+  __v: number;
+  createdAt: string;
+  updatedAt: string;
+  algorithm: string;
+  keyEncoding: string;
+};
 
 export type App = {
-    name: string;
-    appId?: string;
-    owner?: string;
-}
+  name: string;
+  appId?: string;
+  owner?: string;
+};
 
 export type Team = {
-    name: string;
-    teamId: string;
-}
+  name: string;
+  teamId: string;
+};
 
 export type Environment = {
-    name: string;
-    environmentId: string;
-}
+  name: string;
+  environmentId: string;
+};
 
 export type Service = {
-    name: string;
-    serviceId: string;
-}
\ No newline at end of file
+  name: string;
+  serviceId: string;
+};
diff --git a/frontend/src/hooks/api/integrations/index.tsx b/frontend/src/hooks/api/integrations/index.tsx
new file mode 100644
index 000000000..9ea8edb17
--- /dev/null
+++ b/frontend/src/hooks/api/integrations/index.tsx
@@ -0,0 +1 @@
+export { useDeleteIntegration,useGetCloudIntegrations } from './queries';
diff --git a/frontend/src/hooks/api/integrations/queries.tsx b/frontend/src/hooks/api/integrations/queries.tsx
new file mode 100644
index 000000000..6f8db4882
--- /dev/null
+++ b/frontend/src/hooks/api/integrations/queries.tsx
@@ -0,0 +1,35 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { workspaceKeys } from '../workspace/queries';
+import { TCloudIntegration } from './types';
+
+export const integrationQueryKeys = {
+  getIntegrations: () => ['integrations'] as const
+};
+
+const fetchIntegrations = async () => {
+  const { data } = await apiRequest.get<{ integrationOptions: TCloudIntegration[] }>(
+    '/api/v1/integration-auth/integration-options'
+  );
+
+  return data.integrationOptions;
+};
+
+export const useGetCloudIntegrations = () =>
+  useQuery({
+    queryKey: integrationQueryKeys.getIntegrations(),
+    queryFn: () => fetchIntegrations()
+  });
+
+export const useDeleteIntegration = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, { id: string; workspaceId: string }>({
+    mutationFn: ({ id }) => apiRequest.delete(`/api/v1/integration/${id}`),
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIntegrations(workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/integrations/types.ts b/frontend/src/hooks/api/integrations/types.ts
new file mode 100644
index 000000000..5ff2bbac7
--- /dev/null
+++ b/frontend/src/hooks/api/integrations/types.ts
@@ -0,0 +1,33 @@
+export type TCloudIntegration = {
+  name: string;
+  slug: string;
+  image: string;
+  isAvailable: boolean;
+  type: string;
+  clientId: string;
+  docsLink: string;
+  clientSlug: string;
+};
+
+export type TIntegration = {
+  _id: string;
+  workspace: string;
+  environment: string;
+  isActive: boolean;
+  url: any;
+  app: string;
+  appId: string;
+  targetEnvironment: string;
+  targetEnvironmentId: string;
+  targetService: string;
+  targetServiceId: string;
+  owner: string;
+  path: string;
+  region: string;
+  integration: string;
+  integrationAuth: string;
+  secretPath: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
diff --git a/frontend/src/hooks/api/types.ts b/frontend/src/hooks/api/types.ts
index 324fc738a..1c4316410 100644
--- a/frontend/src/hooks/api/types.ts
+++ b/frontend/src/hooks/api/types.ts
@@ -1,5 +1,7 @@
 export type { GetAuthTokenAPI } from "./auth/types";
 export type { IncidentContact } from "./incidentContacts/types";
+export type { IntegrationAuth } from "./integrationAuth/types";
+export type { TCloudIntegration, TIntegration } from "./integrations/types";
 export type { UserWsKeyPair } from "./keys/types";
 export type { Organization } from "./organization/types";
 export type { CreateServiceTokenDTO, ServiceToken } from "./serviceTokens/types";
diff --git a/frontend/src/hooks/api/workspace/index.tsx b/frontend/src/hooks/api/workspace/index.tsx
index fa81acb58..bd06fedd3 100644
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -6,8 +6,10 @@ export {
   useGetUserWorkspaceMemberships,
   useGetUserWorkspaces,
   useGetUserWsEnvironments,
+  useGetWorkspaceAuthorizations,
   useGetWorkspaceById,
   useGetWorkspaceIndexStatus,
+  useGetWorkspaceIntegrations,
   useGetWorkspaceSecrets,
   useNameWorkspaceSecrets,
   useRenameWorkspace,
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index 6bc1973ee..0e3233452 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -2,9 +2,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import {
-  EncryptedSecret
-} from "../secrets/types";
+import { IntegrationAuth } from "../integrationAuth/types";
+import { TIntegration } from "../integrations/types";
+import { EncryptedSecret } from "../secrets/types";
 import {
   CreateEnvironmentDTO,
   CreateWorkspaceDTO,
@@ -19,11 +19,14 @@ import {
   WorkspaceEnv
 } from "./types";
 
-const workspaceKeys = {
+export const workspaceKeys = {
   getWorkspaceById: (workspaceId: string) => [{ workspaceId }, "workspace"] as const,
   getWorkspaceSecrets: (workspaceId: string) => [{ workspaceId }, "workspace-secrets"] as const,
-  getWorkspaceIndexStatus: (workspaceId: string) => [{ workspaceId}, "workspace-index-status"] as const,
+  getWorkspaceIndexStatus: (workspaceId: string) =>
+    [{ workspaceId }, "workspace-index-status"] as const,
   getWorkspaceMemberships: (orgId: string) => [{ orgId }, "workspace-memberships"],
+  getWorkspaceAuthorization: (workspaceId: string) => [{ workspaceId }, "workspace-authorizations"],
+  getWorkspaceIntegrations: (workspaceId: string) => [{ workspaceId }, "workspace-integrations"],
   getAllUserWorkspace: ["workspaces"] as const,
   getUserWsEnvironments: (workspaceId: string) => ["workspace-env", { workspaceId }] as const
 };
@@ -42,15 +45,17 @@ const fetchWorkspaceIndexStatus = async (workspaceId: string) => {
   );
 
   return data;
-}
+};
 
 const fetchWorkspaceSecrets = async (workspaceId: string) => {
-  const { data: { secrets } } = await apiRequest.get<{ secrets: EncryptedSecret[] }>(
+  const {
+    data: { secrets }
+  } = await apiRequest.get<{ secrets: EncryptedSecret[] }>(
     `/api/v3/workspaces/${workspaceId}/secrets`
   );
-  
+
   return secrets;
-}
+};
 
 const fetchUserWorkspaces = async () => {
   const { data } = await apiRequest.get<{ workspaces: Workspace[] }>("/api/v1/workspace");
@@ -63,15 +68,15 @@ export const useGetWorkspaceIndexStatus = (workspaceId: string) => {
     queryFn: () => fetchWorkspaceIndexStatus(workspaceId),
     enabled: true
   });
-}
+};
 
 export const useGetWorkspaceSecrets = (workspaceId: string) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceSecrets(workspaceId),
     queryFn: () => fetchWorkspaceSecrets(workspaceId),
     enabled: true
-  })
-}
+  });
+};
 
 export const useGetWorkspaceById = (workspaceId: string) => {
   return useQuery({
@@ -126,7 +131,39 @@ export const useNameWorkspaceSecrets = () => {
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceIndexStatus(variables.workspaceId));
     }
   });
-}
+};
+
+const fetchWorkspaceAuthorization = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ authorizations: IntegrationAuth[] }>(
+    `/api/v1/workspace/${workspaceId}/authorizations`
+  );
+  return data.authorizations;
+};
+
+export const useGetWorkspaceAuthorizations = <TData = IntegrationAuth[],>(
+  workspaceId: string,
+  select?: (data: IntegrationAuth[]) => TData
+) =>
+  useQuery({
+    queryKey: workspaceKeys.getWorkspaceAuthorization(workspaceId),
+    queryFn: () => fetchWorkspaceAuthorization(workspaceId),
+    enabled: Boolean(workspaceId),
+    select
+  });
+
+const fetchWorkspaceIntegrations = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ integrations: TIntegration[] }>(
+    `/api/v1/workspace/${workspaceId}/integrations`
+  );
+  return data.integrations;
+};
+
+export const useGetWorkspaceIntegrations = (workspaceId: string) =>
+  useQuery({
+    queryKey: workspaceKeys.getWorkspaceIntegrations(workspaceId),
+    queryFn: () => fetchWorkspaceIntegrations(workspaceId),
+    enabled: Boolean(workspaceId)
+  });
 
 // mutation
 export const useCreateWorkspace = () => {

From 0ef4ac1cdc6b018e6103170adc6ee43474645cc9 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sat, 24 Jun 2023 23:25:18 +0530
Subject: [PATCH 02/22] feat(integration-page): implemented new optimized
 integrations page

---
 frontend/src/pages/integrations/[id].tsx      | 471 +-----------------
 .../IntegrationPage.utils.tsx                 | 102 ++++
 .../IntegrationsPage/IntegrationsPage.tsx     | 223 +++++++++
 .../CloudIntegrationSection.tsx               | 140 ++++++
 .../CloudIntegrationSection/index.tsx         |   1 +
 .../FrameworkIntegrationSection.tsx           |  54 ++
 .../FrameworkIntegrationSection/index.tsx     |   1 +
 .../IntegrationsSection.tsx                   | 145 ++++++
 .../components/IntegrationsSection/index.tsx  |   1 +
 frontend/src/views/IntegrationsPage/index.tsx |   1 +
 10 files changed, 695 insertions(+), 444 deletions(-)
 create mode 100644 frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
 create mode 100644 frontend/src/views/IntegrationsPage/index.tsx

diff --git a/frontend/src/pages/integrations/[id].tsx b/frontend/src/pages/integrations/[id].tsx
index 54a29a5c4..143e3ad2f 100644
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -1,409 +1,18 @@
-import crypto from "crypto";
-
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
-import { useRouter } from "next/router";
 import frameworkIntegrationOptions from "public/json/frameworkIntegrations.json";
 
-import ActivateBotDialog from "@app/components/basic/dialog/ActivateBotDialog";
-import CloudIntegrationSection from "@app/components/integrations/CloudIntegrationSection";
-import FrameworkIntegrationSection from "@app/components/integrations/FrameworkIntegrationSection";
-import IntegrationSection from "@app/components/integrations/IntegrationSection";
-import NavHeader from "@app/components/navigation/NavHeader";
+import { IntegrationsPage } from "@app/views/IntegrationsPage";
 
-import {
-  decryptAssymmetric,
-  encryptAssymmetric
-} from "../../components/utilities/cryptography/crypto";
-import getBot from "../api/bot/getBot";
-import setBotActiveStatus from "../api/bot/setBotActiveStatus";
-import deleteIntegration from "../api/integrations/DeleteIntegration";
-import getIntegrationOptions from "../api/integrations/GetIntegrationOptions";
-import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
-import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
-import getAWorkspace from "../api/workspace/getAWorkspace";
-import getLatestFileKey from "../api/workspace/getLatestFileKey";
-
-interface IntegrationAuth {
-  _id: string;
-  integration: string;
-  workspace: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface Integration {
-  _id: string;
-  isActive: boolean;
-  app: string | null;
-  appId: string | null;
-  createdAt: string;
-  updatedAt: string;
-  environment: string;
-  integration: string;
-  targetEnvironment: string;
-  workspace: string;
-  secretPath:string;
-  integrationAuth: string;
-}
-
-interface IntegrationOption {
-  tenantId?: string;
-  clientId: string;
-  clientSlug?: string; // vercel-integration specific
-  docsLink: string;
-  image: string;
-  isAvailable: boolean;
-  name: string;
-  slug: string;
-  type: string;
-}
-
-export default function Integrations() {
-  const [cloudIntegrationOptions, setCloudIntegrationOptions] = useState([]);
-  const [integrationAuths, setIntegrationAuths] = useState<IntegrationAuth[]>([]);
-  const [environments, setEnvironments] = useState<
-    {
-      name: string;
-      slug: string;
-    }[]
-  >([]);
-  const [integrations, setIntegrations] = useState<Integration[]>([]);
-  // TODO: These will have its type when migratiing towards react-query
-  const [bot, setBot] = useState<any>(null);
-  const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
-  const [selectedIntegrationOption, setSelectedIntegrationOption] =
-    useState<IntegrationOption | null>(null);
-
-  const router = useRouter();
-  const workspaceId = router.query.id as string;
+type Props = {
+  frameworkIntegrations: typeof frameworkIntegrationOptions;
+};
 
+const Integration = ({ frameworkIntegrations }: Props) => {
   const { t } = useTranslation();
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const workspace = await getAWorkspace(workspaceId);
-        setEnvironments(workspace.environments);
-
-        // get cloud integration options
-        setCloudIntegrationOptions(await getIntegrationOptions());
-
-        // get project integration authorizations
-        setIntegrationAuths(
-          await getWorkspaceAuthorizations({
-            workspaceId
-          })
-        );
-
-        // get project integrations
-        setIntegrations(
-          await getWorkspaceIntegrations({
-            workspaceId
-          })
-        );
-
-        // get project bot
-        setBot(await getBot({ workspaceId }));
-      } catch (err) {
-        console.error(err);
-      }
-    })();
-  }, []);
-
-  /**
-   * Activate bot for project by performing the following steps:
-   * 1. Get the (encrypted) project key
-   * 2. Decrypt project key with user's private key
-   * 3. Encrypt project key with bot's public key
-   * 4. Send encrypted project key to backend and set bot status to active
-   */
-  const handleBotActivate = async () => {
-    let botKey;
-    try {
-      if (bot) {
-        // case: there is a bot
-        const key = await getLatestFileKey({ workspaceId });
-        const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-        if (!PRIVATE_KEY) {
-          throw new Error("Private Key missing");
-        }
-
-        const WORKSPACE_KEY = decryptAssymmetric({
-          ciphertext: key.latestKey.encryptedKey,
-          nonce: key.latestKey.nonce,
-          publicKey: key.latestKey.sender.publicKey,
-          privateKey: PRIVATE_KEY
-        });
-
-        const { ciphertext, nonce } = encryptAssymmetric({
-          plaintext: WORKSPACE_KEY,
-          publicKey: bot.publicKey,
-          privateKey: PRIVATE_KEY
-        });
-
-        botKey = {
-          encryptedKey: ciphertext,
-          nonce
-        };
-
-        setBot(
-          (
-            await setBotActiveStatus({
-              botId: bot._id,
-              isActive: true,
-              botKey
-            })
-          ).bot
-        );
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  const handleUnauthorizedIntegrationOptionPress = (integrationOption: IntegrationOption) => {
-    try {
-      // generate CSRF token for OAuth2 code-token exchange integrations
-      const state = crypto.randomBytes(16).toString("hex");
-      localStorage.setItem("latestCSRFToken", state);
-
-      let link = "";
-      switch (integrationOption.slug) {
-        case "azure-key-vault":
-          link = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
-          break;
-        case "aws-parameter-store":
-          link = `${window.location.origin}/integrations/aws-parameter-store/authorize`;
-          break;
-        case "aws-secret-manager":
-          link = `${window.location.origin}/integrations/aws-secret-manager/authorize`;
-          break;
-        case "heroku":
-          link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
-          break;
-        case "vercel":
-          link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`;
-          break;
-        case "netlify":
-          link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
-          break;
-        case "github":
-          link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
-          break;
-        case "gitlab":
-          link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
-          break;
-        case "render":
-          link = `${window.location.origin}/integrations/render/authorize`;
-          break;
-        case "flyio":
-          link = `${window.location.origin}/integrations/flyio/authorize`;
-          break;
-        case "circleci":
-          link = `${window.location.origin}/integrations/circleci/authorize`;
-          break;
-        case "travisci":
-          link = `${window.location.origin}/integrations/travisci/authorize`;
-          break;
-        case "supabase":
-          link = `${window.location.origin}/integrations/supabase/authorize`;
-          break;
-        case "checkly":
-          link = `${window.location.origin}/integrations/checkly/authorize`;
-          break;
-        case "railway":
-          link = `${window.location.origin}/integrations/railway/authorize`;
-          break;
-        case "hashicorp-vault":
-          link = `${window.location.origin}/integrations/hashicorp-vault/authorize`;
-          break;
-        case "cloudflare-pages":
-          link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
-          break;
-        default:
-          break;
-      }
-
-      if (link !== "") {
-        window.location.assign(link);
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  const handleAuthorizedIntegrationOptionPress = (integrationAuth: IntegrationAuth) => {
-    try {
-      let link = "";
-      switch (integrationAuth.integration) {
-        case "azure-key-vault":
-          link = `${window.location.origin}/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "aws-parameter-store":
-          link = `${window.location.origin}/integrations/aws-parameter-store/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "aws-secret-manager":
-          link = `${window.location.origin}/integrations/aws-secret-manager/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "heroku":
-          link = `${window.location.origin}/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "vercel":
-          link = `${window.location.origin}/integrations/vercel/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "netlify":
-          link = `${window.location.origin}/integrations/netlify/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "github":
-          link = `${window.location.origin}/integrations/github/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "gitlab":
-          link = `${window.location.origin}/integrations/gitlab/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "render":
-          link = `${window.location.origin}/integrations/render/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "flyio":
-          link = `${window.location.origin}/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "circleci":
-          link = `${window.location.origin}/integrations/circleci/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "travisci":
-          link = `${window.location.origin}/integrations/travisci/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "supabase":
-          link = `${window.location.origin}/integrations/supabase/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "checkly":
-          link = `${window.location.origin}/integrations/checkly/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "railway":
-          link = `${window.location.origin}/integrations/railway/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "hashicorp-vault":
-          link = `${window.location.origin}/integrations/hashicorp-vault/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        case "cloudflare-pages":
-          link = `${window.location.origin}/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth._id}`;
-          break;
-        default:
-          break;
-      }
-
-      if (link !== "") {
-        window.location.assign(link);
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  /**
-   * Open dialog to activate bot if bot is not active.
-   * Otherwise, start integration [integrationOption]
-   * @param {Object} integrationOption - an integration option
-   * @param {String} integrationOption.name
-   * @param {String} integrationOption.type
-   * @param {String} integrationOption.docsLink
-   * @returns
-   */
-  const integrationOptionPress = async (integrationOption: IntegrationOption) => {
-    try {
-      const integrationAuthX = integrationAuths.find(
-        (integrationAuth) => integrationAuth.integration === integrationOption.slug
-      );
-
-      if (!bot.isActive) {
-        await handleBotActivate();
-      }
-
-      if (!integrationAuthX) {
-        // case: integration has not been authorized
-        handleUnauthorizedIntegrationOptionPress(integrationOption);
-        return;
-      }
-
-      handleAuthorizedIntegrationOptionPress(integrationAuthX);
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  /**
-   * Handle deleting integration authorization [integrationAuth] and corresponding integrations from state where applicable
-   * @param {Object} obj
-   * @param {IntegrationAuth} obj.integrationAuth - integrationAuth to delete
-   */
-  const handleDeleteIntegrationAuth = async ({
-    integrationAuth: deletedIntegrationAuth
-  }: {
-    integrationAuth: IntegrationAuth;
-  }) => {
-    try {
-      const newIntegrations = integrations.filter(
-        (integration) => integration.integrationAuth !== deletedIntegrationAuth._id
-      );
-      setIntegrationAuths(
-        integrationAuths.filter(
-          (integrationAuth) => integrationAuth._id !== deletedIntegrationAuth._id
-        )
-      );
-      setIntegrations(newIntegrations);
-
-      // handle updating bot
-      if (newIntegrations.length < 1) {
-        // case: no integrations left
-        setBot(
-          (
-            await setBotActiveStatus({
-              botId: bot._id,
-              isActive: false
-            })
-          ).bot
-        );
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  /**
-   * Handle deleting integration [integration]
-   * @param {Object} obj
-   * @param {Integration} obj.integration - integration to delete
-   */
-  const handleDeleteIntegration = async ({ integration }: { integration: Integration }) => {
-    try {
-      const deletedIntegration = await deleteIntegration({
-        integrationId: integration._id
-      });
-
-      const newIntegrations = integrations.filter((i) => i._id !== deletedIntegration._id);
-      setIntegrations(newIntegrations);
-
-      // handle updating bot
-      if (newIntegrations.length < 1) {
-        // case: no integrations left
-        setBot(
-          (
-            await setBotActiveStatus({
-              botId: bot._id,
-              isActive: false
-            })
-          ).bot
-        );
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
   return (
-    <div className="flex max-h-full flex-col justify-between bg-bunker-800 text-white">
+    <>
       <Head>
         <title>{t("common.head-title", { title: t("integrations.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -411,52 +20,26 @@ export default function Integrations() {
         <meta property="og:title" content="Manage your .env files in seconds" />
         <meta name="og:description" content={t("integrations.description") as string} />
       </Head>
-      <div className="no-scrollbar::-webkit-scrollbar h-screen max-h-[calc(100vh-10px)] w-full overflow-y-scroll pb-6 no-scrollbar">
-        <NavHeader pageName={t("integrations.title")} isProjectRelated />
-        <ActivateBotDialog
-          isOpen={isActivateBotDialogOpen}
-          closeModal={() => setIsActivateBotDialogOpen(false)}
-          selectedIntegrationOption={selectedIntegrationOption}
-          integrationOptionPress={integrationOptionPress}
-        />
-        <IntegrationSection
-          integrations={integrations}
-          setIntegrations={setIntegrations}
-          bot={bot}
-          setBot={setBot}
-          environments={environments}
-          handleDeleteIntegration={handleDeleteIntegration}
-        />
-        {cloudIntegrationOptions.length > 0 && bot ? (
-          <CloudIntegrationSection
-            cloudIntegrationOptions={cloudIntegrationOptions}
-            setSelectedIntegrationOption={setSelectedIntegrationOption as any}
-            integrationOptionPress={(integrationOption: IntegrationOption) => {
-              if (!bot.isActive) {
-                // case: bot is not active -> open modal to activate bot
-                setIsActivateBotDialogOpen(true);
-                return;
-              }
-              integrationOptionPress(integrationOption);
-            }}
-            integrationAuths={integrationAuths}
-            handleDeleteIntegrationAuth={handleDeleteIntegrationAuth}
-          />
-        ) : (
-          <>
-            <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
-              <h1 className="text-3xl font-semibold">{t("integrations.cloud-integrations")}</h1>
-              <p className="text-base text-gray-400">{t("integrations.click-to-start")}</p>
-            </div>
-            <div className="mx-6 grid max-w-5xl grid-cols-4 grid-rows-2 gap-4">
-              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(elem => <div key={elem} className="bg-mineshaft-800 border border-mineshaft-600 animate-pulse h-32 rounded-md"/>)}
-            </div>
-          </>
-        )}
-        <FrameworkIntegrationSection frameworks={frameworkIntegrationOptions as any} />
-      </div>
-    </div>
+      <IntegrationsPage frameworkIntegrations={frameworkIntegrations} />
+    </>
   );
-}
+};
 
-Integrations.requireAuth = true;
+export const getStaticProps = () => {
+  return {
+    props: {
+      frameworkIntegrations: frameworkIntegrationOptions
+    }
+  };
+};
+
+export const getStaticPaths = async () => {
+  return {
+    paths: [], // indicates that no page needs be created at build time
+    fallback: "blocking" // indicates the type of fallback
+  };
+};
+
+Integration.requireAuth = true;
+
+export default Integration;
diff --git a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
new file mode 100644
index 000000000..3a8c3e130
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
@@ -0,0 +1,102 @@
+import crypto from 'crypto';
+
+import { UserWsKeyPair, TCloudIntegration } from '@app/hooks/api/types';
+
+import {
+  decryptAssymmetric,
+  encryptAssymmetric
+} from '../../components/utilities/cryptography/crypto';
+
+export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) => {
+  const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
+
+  if (!PRIVATE_KEY) {
+    throw new Error('Private Key missing');
+  }
+
+  const WORKSPACE_KEY = decryptAssymmetric({
+    ciphertext: latestKey.encryptedKey,
+    nonce: latestKey.nonce,
+    publicKey: latestKey.sender.publicKey,
+    privateKey: PRIVATE_KEY
+  });
+
+  const { ciphertext, nonce } = encryptAssymmetric({
+    plaintext: WORKSPACE_KEY,
+    publicKey: botPublicKey,
+    privateKey: PRIVATE_KEY
+  });
+
+  return { encryptedKey: ciphertext, nonce };
+};
+
+export const redirectForProviderAuth = (integrationOption: TCloudIntegration) => {
+  try {
+    // generate CSRF token for OAuth2 code-token exchange integrations
+    const state = crypto.randomBytes(16).toString('hex');
+    localStorage.setItem('latestCSRFToken', state);
+
+    let link = '';
+    switch (integrationOption.slug) {
+      case 'azure-key-vault':
+        link = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
+        break;
+      case 'aws-parameter-store':
+        link = `${window.location.origin}/integrations/aws-parameter-store/authorize`;
+        break;
+      case 'aws-secret-manager':
+        link = `${window.location.origin}/integrations/aws-secret-manager/authorize`;
+        break;
+      case 'heroku':
+        link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
+        break;
+      case 'vercel':
+        link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`;
+        break;
+      case 'netlify':
+        link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
+        break;
+      case 'github':
+        link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
+        break;
+      case 'gitlab':
+        link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
+        break;
+      case 'render':
+        link = `${window.location.origin}/integrations/render/authorize`;
+        break;
+      case 'flyio':
+        link = `${window.location.origin}/integrations/flyio/authorize`;
+        break;
+      case 'circleci':
+        link = `${window.location.origin}/integrations/circleci/authorize`;
+        break;
+      case 'travisci':
+        link = `${window.location.origin}/integrations/travisci/authorize`;
+        break;
+      case 'supabase':
+        link = `${window.location.origin}/integrations/supabase/authorize`;
+        break;
+      case 'checkly':
+        link = `${window.location.origin}/integrations/checkly/authorize`;
+        break;
+      case 'railway':
+        link = `${window.location.origin}/integrations/railway/authorize`;
+        break;
+      case 'hashicorp-vault':
+        link = `${window.location.origin}/integrations/hashicorp-vault/authorize`;
+        break;
+      default:
+        break;
+    }
+
+    if (link !== '') {
+      window.location.assign(link);
+    }
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+export const redirectToIntegrationAppConfigScreen = (provider: string, integrationAuthId: string) =>
+  `/integrations/${provider}/create?integrationAuthId=${integrationAuthId}`;
diff --git a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
new file mode 100644
index 000000000..e90cabf13
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
@@ -0,0 +1,223 @@
+import { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/router';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import NavHeader from '@app/components/navigation/NavHeader';
+import { Button,Modal, ModalContent } from '@app/components/v2';
+import { useWorkspace } from '@app/context';
+import { usePopUp } from '@app/hooks';
+import {
+  useDeleteIntegration,
+  useDeleteIntegrationAuth,
+  useGetCloudIntegrations,
+  useGetUserWsKey,
+  useGetWorkspaceAuthorizations,
+  useGetWorkspaceBot,
+  useGetWorkspaceIntegrations,
+  useUpdateBotActiveStatus} from '@app/hooks/api';
+import { IntegrationAuth } from '@app/hooks/api/types';
+
+import { CloudIntegrationSection } from './components/CloudIntegrationSection';
+import { FrameworkIntegrationSection } from './components/FrameworkIntegrationSection';
+import { IntegrationsSection } from './components/IntegrationsSection';
+import {
+  generateBotKey,
+  redirectForProviderAuth,
+  redirectToIntegrationAppConfigScreen
+} from './IntegrationPage.utils';
+
+type Props = {
+  frameworkIntegrations: Array<{ name: string; slug: string; image: string; docsLink: string }>;
+};
+
+export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
+  const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
+  const router = useRouter();
+
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?._id || '';
+  const environments = currentWorkspace?.environments || [];
+
+  const { data: latestWsKey } = useGetUserWsKey(workspaceId);
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    'activeBot',
+    'revokeProviderPermissionConf',
+    'removeIntegrationConf'
+  ] as const);
+
+  const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } =
+    useGetCloudIntegrations();
+  const { data: integrationAuths, isLoading: isIntegrationAuthLoading } =
+    useGetWorkspaceAuthorizations(
+      workspaceId,
+      useCallback((data: IntegrationAuth[]) => {
+        const groupBy: Record<string, IntegrationAuth> = {};
+        data.forEach((el) => {
+          groupBy[el.integration] = el;
+        });
+        return groupBy;
+      }, [])
+    );
+  // mutation
+  const {
+    data: integrations,
+    isLoading: isIntegrationLoading,
+    isFetching: isIntegrationFetching
+  } = useGetWorkspaceIntegrations(workspaceId);
+
+  const { data: bot } = useGetWorkspaceBot(workspaceId);
+
+  // mutation
+  const { mutateAsync: updateBotActiveStatus, mutate: updateBotActiveStatusSync } =
+    useUpdateBotActiveStatus();
+  const { mutateAsync: deleteIntegration } = useDeleteIntegration();
+  const {
+    mutateAsync: deleteIntegrationAuth,
+    isLoading: isDeleteIntegrationAuthSuccess,
+    reset: resetDeleteIntegrationAuth
+  } = useDeleteIntegrationAuth();
+
+  // summary: this use effect is trigger when all integration auths are removed thus deactivate bot
+  // details: so onsuccessfully deleting an integration auth, immediately integration list is refeteched
+  // After the refetch is completed check if its empty. Then set bot active and reset the submit hook
+  useEffect(() => {
+    if (isDeleteIntegrationAuthSuccess && !isIntegrationFetching && !integrations?.length) {
+      if (bot?._id)
+        updateBotActiveStatusSync({
+          isActive: false,
+          botId: bot._id,
+          workspaceId
+        });
+      resetDeleteIntegrationAuth();
+    }
+  }, [isIntegrationFetching, isDeleteIntegrationAuthSuccess, integrations?.length]);
+
+  const handleProviderIntegration = async (provider: string) => {
+    const selectedCloudIntegration = cloudIntegrations?.find(({ slug }) => provider === slug);
+    if (!selectedCloudIntegration) return;
+
+    try {
+      if (bot && !bot.isActive) {
+        const botKey = generateBotKey(bot.publicKey, latestWsKey!);
+        await updateBotActiveStatus({
+          workspaceId,
+          botKey,
+          isActive: true,
+          botId: bot._id
+        });
+      }
+      const integrationAuthForProvider = integrationAuths?.[provider];
+      if (!integrationAuthForProvider) {
+        redirectForProviderAuth(selectedCloudIntegration);
+        return;
+      }
+
+      const url = redirectToIntegrationAppConfigScreen(provider, integrationAuthForProvider._id);
+      router.push(url);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  // function to strat integration for a provider
+  // confirmation to user passing the bot key for provider to get secret access
+  const handleProviderIntegrationStart = (provider: string) => {
+    if (!bot?.isActive) {
+      handlePopUpOpen('activeBot', { provider });
+      return;
+    }
+    handleProviderIntegration(provider);
+  };
+
+  const handleUserAcceptBotCondition = () => {
+    const { provider } = popUp.activeBot?.data as { provider: string };
+    handleProviderIntegration(provider);
+    handlePopUpClose('activeBot');
+  };
+
+  const handleIntegrationDelete = async (integrationId: string, cb: () => void) => {
+    try {
+      await deleteIntegration({ id: integrationId, workspaceId });
+      if (cb) cb();
+      createNotification({
+        type: 'success',
+        text: 'Deleted integration'
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: 'error',
+        text: 'Failed to delete integration'
+      });
+    }
+  };
+
+  const handleIntegrationAuthRevoke = async (provider: string, cb?: () => void) => {
+    const integrationAuthForProvider = integrationAuths?.[provider];
+    if (!integrationAuthForProvider) return;
+    try {
+      await deleteIntegrationAuth({
+        id: integrationAuthForProvider._id,
+        workspaceId
+      });
+      if (cb) cb();
+      createNotification({
+        type: 'success',
+        text: 'Revoked provider authentication'
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        type: 'error',
+        text: 'Failed to revoke provider authentication'
+      });
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-8 pb-12 text-white">
+      <NavHeader pageName={t('integrations.title')} isProjectRelated />
+      <IntegrationsSection
+        isLoading={isIntegrationLoading}
+        integrations={integrations}
+        environments={environments}
+        onIntegrationDelete={({ _id: id }, cb) => handleIntegrationDelete(id, cb)}
+      />
+      <CloudIntegrationSection
+        isLoading={isCloudIntegrationsLoading || isIntegrationAuthLoading}
+        cloudIntegrations={cloudIntegrations}
+        integrationAuths={integrationAuths}
+        onIntegrationStart={handleProviderIntegrationStart}
+        onIntegrationRevoke={handleIntegrationAuthRevoke}
+      />
+      <Modal
+        isOpen={popUp.activeBot?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('activeBot', isOpen)}
+      >
+        <ModalContent
+          title={t('integrations.grant-access-to-secrets') as string}
+          footerContent={
+            <div className="flex items-center space-x-2">
+              <Button onClick={() => handleUserAcceptBotCondition()}>
+                {t('integrations.grant-access-button') as string}
+              </Button>
+              <Button
+                onClick={() => handlePopUpClose('activeBot')}
+                variant="outline_bg"
+                colorSchema="secondary"
+              >
+                Cancel
+              </Button>
+            </div>
+          }
+        >
+          {t('integrations.why-infisical-needs-access')}
+        </ModalContent>
+      </Modal>
+      <FrameworkIntegrationSection frameworks={frameworkIntegrations} />
+    </div>
+  );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
new file mode 100644
index 000000000..5a41f9984
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
@@ -0,0 +1,140 @@
+import { useTranslation } from 'react-i18next';
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { DeleteActionModal,Skeleton, Tooltip } from '@app/components/v2';
+import { usePopUp } from '@app/hooks';
+import { IntegrationAuth, TCloudIntegration } from '@app/hooks/api/types';
+
+type Props = {
+  isLoading?: boolean;
+  integrationAuths?: Record<string, IntegrationAuth>;
+  cloudIntegrations?: TCloudIntegration[];
+  onIntegrationStart: (slug: string) => void;
+  // cb: handle popUpClose child->parent communication pattern
+  onIntegrationRevoke: (slug: string, cb: () => void) => void;
+};
+
+type TRevokeIntegrationPopUp = { provider: string };
+
+export const CloudIntegrationSection = ({
+  isLoading,
+  cloudIntegrations = [],
+  integrationAuths = {},
+  onIntegrationStart,
+  onIntegrationRevoke
+}: Props) => {
+  const { t } = useTranslation();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    'deleteConfirmation'
+  ] as const);
+
+  const isEmpty = !isLoading && !cloudIntegrations?.length;
+
+  return (
+    <div>
+      <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
+        <h1 className="text-3xl font-semibold">{t('integrations.cloud-integrations')}</h1>
+        <p className="text-base text-gray-400">{t('integrations.click-to-start')}</p>
+      </div>
+      <div
+        className="mx-6 grid grid-flow-dense gap-4"
+        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))' }}
+      >
+        {isLoading &&
+          Array.from({ length: 12 }).map((_, index) => (
+            <Skeleton className="h-32" key={`cloud-integration-skeleton-${index + 1}`} />
+          ))}
+        {!isLoading &&
+          cloudIntegrations?.map((cloudIntegration) => (
+            <div
+              onKeyDown={() => null}
+              role="button"
+              tabIndex={0}
+              className={`group relative ${
+                cloudIntegration.isAvailable
+                  ? 'cursor-pointer duration-200 hover:bg-mineshaft-700'
+                  : 'opacity-50'
+              } flex h-32 flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4`}
+              onClick={() => {
+                if (!cloudIntegration.isAvailable) return;
+                onIntegrationStart(cloudIntegration.slug);
+              }}
+              key={cloudIntegration.slug}
+            >
+              <img
+                src={`/images/integrations/${cloudIntegration.image}`}
+                height={70}
+                width={70}
+                alt="integration logo"
+              />
+              {cloudIntegration.name.split(' ').length > 2 ? (
+                <div className="ml-4 max-w-xs text-3xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
+                  <div>{cloudIntegration.name.split(' ')[0]}</div>
+                  <div className="text-base">
+                    {cloudIntegration.name.split(' ')[1]} {cloudIntegration.name.split(' ')[2]}
+                  </div>
+                </div>
+              ) : (
+                <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
+                  {cloudIntegration.name}
+                </div>
+              )}
+              {cloudIntegration.isAvailable &&
+                Boolean(integrationAuths?.[cloudIntegration.slug]) && (
+                  <div className="absolute top-0 right-0 z-40 h-full">
+                    <div className="relative h-full">
+                      <div className="absolute top-0 right-0 w-24 flex-row items-center overflow-hidden whitespace-nowrap rounded-tr-md bg-primary py-0.5 px-2 text-xs text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
+                        <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
+                        Authorized
+                      </div>
+                      <Tooltip content="Revoke Access">
+                        <div
+                          onKeyDown={() => null}
+                          role="button"
+                          tabIndex={0}
+                          onClick={async (event) => {
+                            event.stopPropagation();
+                            handlePopUpOpen('deleteConfirmation', {
+                              provider: cloudIntegration.slug
+                            });
+                          }}
+                          className="absolute top-0 right-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300  hover:opacity-100 group-hover:h-full"
+                        >
+                          <FontAwesomeIcon icon={faXmark} size="xl" />
+                        </div>
+                      </Tooltip>
+                    </div>
+                  </div>
+                )}
+            </div>
+          ))}
+      </div>
+      {isEmpty && (
+        <div className="mx-6 grid max-w-5xl grid-cols-4 grid-rows-2 gap-4">
+          {Array.from({ length: 16 }).map((_, index) => (
+            <div
+              key={`dummy-cloud-integration-${index + 1}`}
+              className="h-32 animate-pulse rounded-md border border-mineshaft-600 bg-mineshaft-800"
+            />
+          ))}
+        </div>
+      )}
+      <DeleteActionModal
+        isOpen={popUp.deleteConfirmation.isOpen}
+        title={`Are you sure want to revoke access ${
+          (popUp?.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider || ' '
+        }?`}
+        subTitle="This will remove all the secret integration of this provider!!!"
+        onChange={(isOpen) => handlePopUpToggle('deleteConfirmation', isOpen)}
+        deleteKey={(popUp?.deleteConfirmation?.data as TRevokeIntegrationPopUp)?.provider || ''}
+        onDeleteApproved={async () => {
+          onIntegrationRevoke(
+            (popUp.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider,
+            () => handlePopUpClose('deleteConfirmation')
+          );
+        }}
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
new file mode 100644
index 000000000..ffb6c738d
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
@@ -0,0 +1 @@
+export { CloudIntegrationSection } from './CloudIntegrationSection';
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
new file mode 100644
index 000000000..c51b2d3ee
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  frameworks: Array<{
+    name: string;
+    image: string;
+    slug: string;
+    docsLink: string;
+  }>;
+};
+
+export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="mx-4 mt-12 mb-4 flex flex-col items-start justify-between px-2 text-xl">
+        <h1 className="text-3xl font-semibold">{t('integrations.framework-integrations')}</h1>
+        <p className="text-base text-gray-400">{t('integrations.click-to-setup')}</p>
+      </div>
+      <div
+        className="mx-6 mt-4 grid grid-flow-dense gap-4"
+        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))' }}
+      >
+        {frameworks.map((framework) => (
+          <a
+            key={`framework-integration-${framework.slug}`}
+            href={framework.docsLink}
+            rel="noopener noreferrer"
+            target="_blank"
+            className="relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md p-0.5 duration-200"
+          >
+            <div
+              className={`flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 font-semibold text-gray-300 duration-200 hover:bg-mineshaft-700 group-hover:text-gray-200 ${
+                framework?.name?.split(' ').length > 1 ? 'px-1 text-sm' : 'px-2 text-xl'
+              } w-full max-w-xs text-center`}
+            >
+              {framework?.image && (
+                <img
+                  src={`/images/integrations/${framework.image}.png`}
+                  height={framework?.name ? 60 : 90}
+                  width={framework?.name ? 60 : 90}
+                  alt="integration logo"
+                />
+              )}
+              {framework?.name && framework?.image && <div className="h-2" />}
+              {framework?.name && framework.name}
+            </div>
+          </a>
+        ))}
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
new file mode 100644
index 000000000..04bbda30b
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
@@ -0,0 +1 @@
+export { FrameworkIntegrationSection } from './FrameworkIntegrationSection';
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
new file mode 100644
index 000000000..c38242990
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -0,0 +1,145 @@
+import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { integrationSlugNameMapping } from 'public/data/frequentConstants';
+
+import {
+  DeleteActionModal,
+  EmptyState,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Select,
+  SelectItem,
+  Skeleton
+} from '@app/components/v2';
+import { usePopUp } from '@app/hooks';
+import { TIntegration } from '@app/hooks/api/types';
+
+type Props = {
+  environments: Array<{ name: string; slug: string }>;
+  integrations?: TIntegration[];
+  isLoading?: boolean;
+  onIntegrationDelete: (integration: TIntegration, cb: () => void) => void;
+};
+
+export const IntegrationsSection = ({
+  integrations = [],
+  environments = [],
+  isLoading,
+  onIntegrationDelete
+}: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    'deleteConfirmation'
+  ] as const);
+
+  return (
+    <div className="mb-8">
+      <div className="mx-4 mb-4 mt-6 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
+        <h1 className="text-3xl font-semibold">Current Integrations</h1>
+        <p className="text-base text-bunker-300">Manage integrations with third-party services.</p>
+      </div>
+      {isLoading && (
+        <div className="p-6 pt-0">
+          <Skeleton className="h-28" />
+        </div>
+      )}
+      {!isLoading && !integrations.length && (
+        <EmptyState
+          className="mx-6 py-8"
+          title="No integrations found. Click on one of the below providers to sync secrets."
+        />
+      )}
+      {!isLoading && (
+        <div className="flex flex-col space-y-4 p-6 pt-0">
+          {integrations?.map((integration) => (
+            <div
+              className="flex max-w-6xl justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
+              key={`integration-${integration?._id.toString()}`}
+            >
+              <div className="flex">
+                <div>
+                  <FormControl label="Environment">
+                    <Select
+                      value={integration.environment}
+                      isDisabled={integration.isActive}
+                      className="min-w-[8rem]"
+                    >
+                      {environments.map((environment) => {
+                        return (
+                          <SelectItem
+                            value={environment.slug}
+                            key={`environment-${environment.slug}`}
+                          >
+                            {environment.name}
+                          </SelectItem>
+                        );
+                      })}
+                    </Select>
+                  </FormControl>
+                </div>
+                <div className="ml-2 flex flex-col">
+                  <FormLabel label="Secret Path" />
+                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                    {integration.secretPath}
+                  </div>
+                </div>
+                <div className="flex h-full items-center">
+                  <FontAwesomeIcon icon={faArrowRight} className="mx-4 text-gray-400" />
+                </div>
+                <div className="ml-4 flex flex-col">
+                  <FormLabel label="Integration" />
+                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                    {integrationSlugNameMapping[integration.integration]}
+                  </div>
+                </div>
+                <div className="ml-2 flex flex-col">
+                  <FormLabel label="App" />
+                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                    {integration.integration === 'hashicorp-vault'
+                      ? `${integration.app} - path: ${integration.path}`
+                      : integration.app}
+                  </div>
+                </div>
+                {(integration.integration === 'vercel' ||
+                  integration.integration === 'netlify' ||
+                  integration.integration === 'railway' ||
+                  integration.integration === 'gitlab') && (
+                  <div className="ml-4 flex flex-col">
+                    <FormLabel label="Target Environment" />
+                    <div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                      {integration.targetEnvironment}
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="flex cursor-default items-center">
+                <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
+                  <IconButton
+                    onClick={() => handlePopUpOpen('deleteConfirmation', integration)}
+                    ariaLabel="delete"
+                    colorSchema="danger"
+                  >
+                    <FontAwesomeIcon icon={faXmark} />
+                  </IconButton>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <DeleteActionModal
+        isOpen={popUp.deleteConfirmation.isOpen}
+        title={`Are you sure want to remove ${
+          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || ' '
+        } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || ' '}?`}
+        onChange={(isOpen) => handlePopUpToggle('deleteConfirmation', isOpen)}
+        deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ''}
+        onDeleteApproved={async () =>
+          onIntegrationDelete(popUp?.deleteConfirmation.data as TIntegration, () =>
+            handlePopUpClose('deleteConfirmation')
+          )
+        }
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
new file mode 100644
index 000000000..a171edb8a
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
@@ -0,0 +1 @@
+export { IntegrationsSection } from './IntegrationsSection';
diff --git a/frontend/src/views/IntegrationsPage/index.tsx b/frontend/src/views/IntegrationsPage/index.tsx
new file mode 100644
index 000000000..5cef86ea2
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/index.tsx
@@ -0,0 +1 @@
+export { IntegrationsPage } from './IntegrationsPage';

From 611fae785a254bd7677cb60b9da6170234b28f56 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sat, 24 Jun 2023 23:25:55 +0530
Subject: [PATCH 03/22] chore: updated to latested storybook v7 stable version

---
 frontend/.storybook/main.js |    9 +-
 frontend/package-lock.json  | 7944 ++++++++++++++++++++---------------
 frontend/package.json       |   24 +-
 3 files changed, 4513 insertions(+), 3464 deletions(-)

diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
index 0e3e3f70d..83c1ca9e3 100644
--- a/frontend/.storybook/main.js
+++ b/frontend/.storybook/main.js
@@ -6,7 +6,14 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     'storybook-dark-mode',
-    '@storybook/addon-postcss'
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: {
+          implementation: require('postcss')
+        }
+      }
+    }
   ],
   framework: {
     name: '@storybook/nextjs',
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9b257843e..717741bfb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -83,14 +83,14 @@
         "yup": "^0.32.11"
       },
       "devDependencies": {
-        "@storybook/addon-essentials": "^7.0.0-beta.30",
-        "@storybook/addon-interactions": "^7.0.0-beta.30",
-        "@storybook/addon-links": "^7.0.0-beta.30",
-        "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/blocks": "^7.0.0-beta.30",
-        "@storybook/nextjs": "^7.0.0-beta.30",
-        "@storybook/react": "^7.0.0-beta.30",
-        "@storybook/testing-library": "^0.0.13",
+        "@storybook/addon-essentials": "^7.0.23",
+        "@storybook/addon-interactions": "^7.0.23",
+        "@storybook/addon-links": "^7.0.23",
+        "@storybook/addon-styling": "^1.3.0",
+        "@storybook/blocks": "^7.0.23",
+        "@storybook/nextjs": "^7.0.23",
+        "@storybook/react": "^7.0.23",
+        "@storybook/testing-library": "^0.2.0",
         "@tailwindcss/typography": "^0.5.4",
         "@types/jsrp": "^0.2.4",
         "@types/node": "18.11.9",
@@ -110,12 +110,12 @@
         "eslint-plugin-react": "^7.32.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-simple-import-sort": "^8.0.0",
-        "eslint-plugin-storybook": "^0.6.10",
+        "eslint-plugin-storybook": "^0.6.12",
         "postcss": "^8.4.14",
         "prettier": "^2.8.3",
         "prettier-plugin-tailwindcss": "^0.2.2",
-        "storybook": "^7.0.0-beta.30",
-        "storybook-dark-mode": "^2.0.5",
+        "storybook": "^7.0.23",
+        "storybook-dark-mode": "^3.0.0",
         "tailwindcss": "3.2",
         "typescript": "^4.9.3"
       }
@@ -146,20 +146,20 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
-      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
+      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
       "dependencies": {
-        "@babel/highlight": "^7.18.6"
+        "@babel/highlight": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.21.9",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.9.tgz",
-      "integrity": "sha512-FUGed8kfhyWvbYug/Un/VPJD41rDIgoVVcR+FuzhzOYyRz5uED+Gd3SLZml0Uw2l2aHFb7ZgdW5mGA3G2cCCnQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz",
+      "integrity": "sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -210,11 +210,24 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
-      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+      "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-annotate-as-pure/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dependencies": {
+        "@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"
@@ -233,13 +246,13 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz",
-      "integrity": "sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz",
+      "integrity": "sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.21.5",
-        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/compat-data": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
         "browserslist": "^4.21.3",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.0"
@@ -252,19 +265,19 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.21.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.8.tgz",
-      "integrity": "sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.5.tgz",
+      "integrity": "sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.21.5",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-member-expression-to-functions": "^7.21.5",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.21.5",
-        "@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.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.5",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -275,12 +288,12 @@
       }
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.21.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.8.tgz",
-      "integrity": "sha512-zGuSdedkFtsFHGbexAvNuipg1hbtitDLo2XE8/uf6Y9sOQV1xsYX/2pNbtedp/X0eU1pIt+kGvaqHCowkRbS5g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.5.tgz",
+      "integrity": "sha512-1VpEFOIbMRaXyDeUwUfmTIxExLwQ+zkW+Bh5zXpApA3oQedBx9v/updixWxnx/bZpKw7u8VxWjb/qWpIcmPq8A==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-annotate-as-pure": "^7.22.5",
         "regexpu-core": "^5.3.1",
         "semver": "^6.3.0"
       },
@@ -309,54 +322,107 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz",
-      "integrity": "sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==",
+      "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-function-name/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dependencies": {
+        "@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/@babel/helper-hoist-variables": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "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-hoist-variables/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dependencies": {
+        "@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/@babel/helper-member-expression-to-functions": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz",
-      "integrity": "sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.21.5"
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dev": true,
+      "dependencies": {
+        "@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/@babel/helper-module-imports": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
-      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+      "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.21.4"
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dependencies": {
+        "@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"
@@ -382,36 +448,50 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
-      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dev": true,
+      "dependencies": {
+        "@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/@babel/helper-plugin-utils": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
-      "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
-      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.5.tgz",
+      "integrity": "sha512-cU0Sq1Rf4Z55fgz7haOakIyM7+x/uCFwXpLPaeRzfoUtAEAuUZjZvFPjL/rk5rW693dIgn2hng1W7xbT7lWT4g==",
       "dev": true,
       "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.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -420,18 +500,94 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-replace-supers": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz",
-      "integrity": "sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==",
+    "node_modules/@babel/helper-remap-async-to-generator/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.21.5",
-        "@babel/helper-member-expression-to-functions": "^7.21.5",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.5",
-        "@babel/types": "^7.21.5"
+        "@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/@babel/helper-replace-supers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.5.tgz",
+      "integrity": "sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==",
+      "dev": true,
+      "dependencies": {
+        "@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/template": "^7.22.5",
+        "@babel/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers/node_modules/@babel/generator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
+      "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers/node_modules/@babel/parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+      "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers/node_modules/@babel/traverse": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
+      "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.5",
+        "@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.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dev": true,
+      "dependencies": {
+        "@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"
@@ -450,63 +606,152 @@
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
-      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.20.0"
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dev": true,
+      "dependencies": {
+        "@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/@babel/helper-split-export-declaration": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
+      "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dependencies": {
+        "@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/@babel/helper-string-parser": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
-      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
+      "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",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
-      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
+      "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==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
-      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.5.tgz",
+      "integrity": "sha512-bYqLIBSEshYcYQyfks8ewYA8S30yaGSeRslcvKMvoUk6HHPySbxHq9YRi6ghhzEU+yhQv9bP/jXnygkStOcqZw==",
       "dev": true,
       "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/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function/node_modules/@babel/generator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
+      "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function/node_modules/@babel/parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+      "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function/node_modules/@babel/traverse": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
+      "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.5",
+        "@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.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dev": true,
+      "dependencies": {
+        "@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"
@@ -527,11 +772,11 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
+      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.22.5",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       },
@@ -551,12 +796,12 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.18.6",
-      "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.18.6.tgz",
-      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -566,14 +811,14 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
-      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
+      "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==",
       "dev": true,
       "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"
@@ -907,12 +1152,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-flow": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.21.4.tgz",
-      "integrity": "sha512-l9xd3N+XG4fZRxEP3vXdK6RW7vN1Uf5dxzRC/09wV86wqZ/YYQooBIGNsiRdfNR3/q2/5pPzV4B54J/9ctX5jw==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -961,12 +1206,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz",
-      "integrity": "sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1108,14 +1353,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
-      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
+      "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==",
       "dev": true,
       "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"
@@ -1155,19 +1400,19 @@
       }
     },
     "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
-      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.5.tgz",
+      "integrity": "sha512-2edQhLfibpWpsVBx2n/GKOz6JdGQvLruZQfGr9l1qes2KQaWswjBzhQF7UDUZMNaMMQeYnQzxwOMPsbYF7wqPQ==",
       "dev": true,
       "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.21.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-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@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.5",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -1256,13 +1501,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-flow-strip-types": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.21.0.tgz",
-      "integrity": "sha512-FlFA2Mj87a6sDkW4gfGrQQqwY/dLlBAyJa2dJEZ+FHXUVHBflO2wyKvg+OOEzXfrKYIa4HWl0mgmbCzt0cMb7w==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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"
@@ -1287,14 +1532,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
-      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "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==",
       "dev": true,
       "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"
@@ -1401,13 +1646,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
-      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
+      "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==",
       "dev": true,
       "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"
@@ -1447,6 +1692,23 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.5.tgz",
+      "integrity": "sha512-AconbMKOMkyG+xCng2JogMCDcqW8wedQAqpVIL4cOSescZ7+iW8utC6YDZLMCSUIReEA733gzRSaOSXMAt/4WQ==",
+      "dev": true,
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-parameters": {
       "version": "7.21.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz",
@@ -1478,12 +1740,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-display-name": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz",
-      "integrity": "sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1493,16 +1755,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.5.tgz",
-      "integrity": "sha512-ELdlq61FpoEkHO6gFRpfj0kUgSwQTGoaEU8eMRoS8Dv3v6e7BjEAj5WMtIBRdHUeAioMhKP5HyxNzNnP+heKbA==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-module-imports": "^7.21.4",
-        "@babel/helper-plugin-utils": "^7.21.5",
-        "@babel/plugin-syntax-jsx": "^7.21.4",
-        "@babel/types": "^7.21.5"
+        "@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"
@@ -1512,12 +1774,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-development": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz",
-      "integrity": "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==",
+      "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,
       "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.18.6"
+        "@babel/plugin-transform-react-jsx": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1526,14 +1788,28 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz",
-      "integrity": "sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==",
+    "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@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/@babel/plugin-transform-react-pure-annotations": {
+      "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,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1574,16 +1850,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz",
-      "integrity": "sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.5.tgz",
+      "integrity": "sha512-bg4Wxd1FWeFx3daHFTWk1pkSWK/AyQuiyAoeZAOkAOUBjnZPH6KT7eMxouV47tQ6hl6ax2zyAWBdWZXbrvXlaw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-imports": "^7.21.4",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "babel-plugin-polyfill-corejs2": "^0.4.3",
+        "babel-plugin-polyfill-corejs3": "^0.8.1",
+        "babel-plugin-polyfill-regenerator": "^0.5.0",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1593,6 +1869,62 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz",
+      "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
+      "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "semver": "^6.1.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz",
+      "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "core-js-compat": "^3.30.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz",
+      "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
@@ -1809,14 +2141,14 @@
       }
     },
     "node_modules/@babel/preset-flow": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.21.4.tgz",
-      "integrity": "sha512-F24cSq4DIBmhq4OzK3dE63NHagb27OPE3eWR+HLekt4Z3Y5MzIIUGF3LlLgV0gN8vzbDViSY7HnrReNVCJXTeA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.22.5.tgz",
+      "integrity": "sha512-ta2qZ+LSiGCrP5pgcGt8xMnnkXQrq8Sa4Ulhy06BOlF5QbLw9q5hIx7bn5MrsvyTGAfh6kTOo07Q+Pfld/8Y5Q==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-option": "^7.21.0",
-        "@babel/plugin-transform-flow-strip-types": "^7.21.0"
+        "@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"
@@ -1842,17 +2174,17 @@
       }
     },
     "node_modules/@babel/preset-react": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.18.6.tgz",
-      "integrity": "sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==",
+      "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,
       "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"
@@ -1881,9 +2213,9 @@
       }
     },
     "node_modules/@babel/register": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.21.0.tgz",
-      "integrity": "sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.22.5.tgz",
+      "integrity": "sha512-vV6pm/4CijSQ8Y47RH5SopXzursN35RQINfGJkmOlcpAtGuf94miFvIPhCKGQN7WGIcsgG1BHEX2KVdTYwTwUQ==",
       "dev": true,
       "dependencies": {
         "clone-deep": "^4.0.1",
@@ -2035,13 +2367,37 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.21.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
-      "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
       "dependencies": {
-        "@babel/code-frame": "^7.21.4",
-        "@babel/parser": "^7.21.9",
-        "@babel/types": "^7.21.5"
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template/node_modules/@babel/parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+      "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/template/node_modules/@babel/types": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "dependencies": {
+        "@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"
@@ -3240,9 +3596,9 @@
       }
     },
     "node_modules/@ndelangen/get-tarball": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.7.tgz",
-      "integrity": "sha512-NqGfTZIZpRFef1GoVaShSSRwDC3vde3ThtTeqFdcYd6ipKqnfEVhjK2hUeHjCQUcptyZr2TONqcloFXM+5QBrQ==",
+      "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",
@@ -3256,9 +3612,9 @@
       "integrity": "sha512-H/69Lc5Q02dq3o+dxxy5O/oNxFsZpdL6WREtOOtOM1B/weonIwDXkekr1KV5DPVPr12IHFPrMrcJQ6bgPMfn7A=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "13.4.3",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.3.tgz",
-      "integrity": "sha512-5B0uOnh7wyUY9vNNdIA6NUvWozhrZaTMZOzdirYAefqD0ZBK5C/h3+KMYdCKrR7JrXGvVpWnHtv54b3dCzwICA==",
+      "version": "13.4.7",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.7.tgz",
+      "integrity": "sha512-ANEPltxzXbyyG7CvqxdY4PmeM5+RyWdAJGufTHnU+LA/i3J6IDV2r8Z4onKwskwKEhwqzz5lMaSYGGXLyHX+mg==",
       "dev": true,
       "dependencies": {
         "glob": "7.1.7"
@@ -4505,19 +4861,19 @@
       "dev": true
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.0.12.tgz",
-      "integrity": "sha512-f07Mc3qwcG9heGsuUUTIJbWF2nw/Ite3mvyIZY2VbgwhMUMVHj4knY4fh/LojwcUmmmc7CNZu3sJN/wIqpaHCQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.0.23.tgz",
+      "integrity": "sha512-xsLUZez6fzHc+be8BypVO5aA7kjeH9jymLAib68SSQoF0GQry7mb/fhumifQno2BKfCyCw++lYqLHzwV0EISxg==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
         "polished": "^4.2.2",
@@ -4554,19 +4910,19 @@
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.0.12.tgz",
-      "integrity": "sha512-sAZSxsbj3CcabowALKTafpdnqXMBZB8C42s4Uxv11FCP50GqrP8jp2TqsIiDZxUbeXwI094W/gHnw41MSphG8Q==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.0.23.tgz",
+      "integrity": "sha512-6zlLKnAbcaBbLgADylhhih7uma4FLisjgUjY/wpPlqhx/9pEWp7tUoYcGkAADnrN97+70g43VxL6mElKnGtZeA==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "memoizerific": "^1.11.3",
         "ts-dedent": "^2.0.0"
       },
@@ -4588,20 +4944,20 @@
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.0.12.tgz",
-      "integrity": "sha512-/+yBhswN1N7ttR1NGN94HE/25VELm4YuBtrkh+LJeKP/eQ5CZpLjexASN2GZcfmdnkwIYZAEH0X/AImLaCJAWA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.0.23.tgz",
+      "integrity": "sha512-G6DQwaLCqxnDtiG5qtnJWLD3MkMYjC0Ki9uye5kXCIoPcM52NV1/NQQtfhvzFpwNX3QiQvo7Za2g7/RLhd2z5w==",
       "dev": true,
       "dependencies": {
-        "@storybook/blocks": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/blocks": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "lodash": "^4.17.21",
         "ts-dedent": "^2.0.0"
       },
@@ -4623,28 +4979,28 @@
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.0.12.tgz",
-      "integrity": "sha512-zgg4sq34Zz8TN74+kSogxRHsIZ5gsIazJpa0osZp91nJQvsKUEfldjBtQWbBWzjVCrWmzOhW5/RLCnmCNm9y/w==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.0.23.tgz",
+      "integrity": "sha512-BD4F5uCE4VND5Z3UQ9xF+q3qy6MHTxTMgNMVfcBc4TM8gCuFyuuiOl0sxW3Ap6YdWEFfvzE822RGMk5IlD6UWA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.20.2",
         "@babel/plugin-transform-react-jsx": "^7.19.0",
         "@jest/transform": "^29.3.1",
         "@mdx-js/react": "^2.1.5",
-        "@storybook/blocks": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/csf-plugin": "7.0.12",
-        "@storybook/csf-tools": "7.0.12",
+        "@storybook/blocks": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/csf-plugin": "7.0.23",
+        "@storybook/csf-tools": "7.0.23",
         "@storybook/global": "^5.0.0",
         "@storybook/mdx2-csf": "^1.0.0",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/postinstall": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/react-dom-shim": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/postinstall": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/react-dom-shim": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "fs-extra": "^11.1.0",
         "remark-external-links": "^8.0.0",
         "remark-slug": "^6.0.0",
@@ -4660,24 +5016,24 @@
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.0.12.tgz",
-      "integrity": "sha512-Js2cxvauAf8fkA5D0QrqPPe/FvpY1DbJp61VNGh82Xu0zZrczCGYP3jkWG79vl0zllJNs7hnkV8W6xY1JWgLoA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.0.23.tgz",
+      "integrity": "sha512-t4ChTrsd+ctKjmhy6TLsOPmPPzkPjCSP3yVDSW8pOzHsSxfFUa7qSu89Kb9zYrwEDwXxiAie1KIRZE3smUeD0A==",
       "dev": true,
       "dependencies": {
-        "@storybook/addon-actions": "7.0.12",
-        "@storybook/addon-backgrounds": "7.0.12",
-        "@storybook/addon-controls": "7.0.12",
-        "@storybook/addon-docs": "7.0.12",
-        "@storybook/addon-highlight": "7.0.12",
-        "@storybook/addon-measure": "7.0.12",
-        "@storybook/addon-outline": "7.0.12",
-        "@storybook/addon-toolbars": "7.0.12",
-        "@storybook/addon-viewport": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
+        "@storybook/addon-actions": "7.0.23",
+        "@storybook/addon-backgrounds": "7.0.23",
+        "@storybook/addon-controls": "7.0.23",
+        "@storybook/addon-docs": "7.0.23",
+        "@storybook/addon-highlight": "7.0.23",
+        "@storybook/addon-measure": "7.0.23",
+        "@storybook/addon-outline": "7.0.23",
+        "@storybook/addon-toolbars": "7.0.23",
+        "@storybook/addon-viewport": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -4690,14 +5046,14 @@
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.0.12.tgz",
-      "integrity": "sha512-ccIsBVjUlZ7cM1adSSFTqqWXiELPdDqfZLz4dWfDbiLyG3InC953ugtvoUWCIZpC2OOnjVLpF7Rbshq2O/QoMw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.0.23.tgz",
+      "integrity": "sha512-/qO4VM8CeoUG3ivgki4FtJyEMRzLxJFkeWETaUegReh+n6uaOUeYrJYZr5ES/k0Ily0HikQYdkn/m7JZGQ6VIw==",
       "dev": true,
       "dependencies": {
-        "@storybook/core-events": "7.0.12",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/preview-api": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -4705,21 +5061,21 @@
       }
     },
     "node_modules/@storybook/addon-interactions": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.12.tgz",
-      "integrity": "sha512-Rb1mv1RQrTd3sA/WwNTdv00rW+7APfvZEeZks6+8+kS1C4EFMDmLnVBZlPllFdo1BOnTCyer4GZZ5ncVkWNLyQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.23.tgz",
+      "integrity": "sha512-NBI7ejUO/YmjQRRRopD3tuA+87fq5BRwTINbs17AkaEjO84xQ+G1rTixQZ18PkLpO65OlmuDeGIrbfbt8hrmcA==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/instrumenter": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "jest-mock": "^27.0.6",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
@@ -4742,19 +5098,19 @@
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.0.12.tgz",
-      "integrity": "sha512-6kGClsIpX9dRKc5bUAPNcp/4wlgPIxMrieUV+6k1dTsRQqbaEfxih/Fq259D5+yVBDNi3YAnvRjMiIibl8fa5A==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.0.23.tgz",
+      "integrity": "sha512-e95Y7oVCjsECh8XEs6+SWZtUz+cfUDNuF1mty4/6/d03H8HraWXgUSOfTRhRj+Q076CNcIh7IcqqNgeMxvGdKA==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/router": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/router": "7.0.23",
+        "@storybook/types": "7.0.23",
         "prop-types": "^15.7.2",
         "ts-dedent": "^2.0.0"
       },
@@ -4776,18 +5132,18 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.0.12.tgz",
-      "integrity": "sha512-Uq9cj9QmN7WKBQ6wqeneFmTqo1UQKXIc4CpGBEtJtfsYNLsERrVzOs/tRUf66Zl3lWgfFZxs1B5Ij6RDsYEjRw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.0.23.tgz",
+      "integrity": "sha512-j0HrykvDdUgjjGjZimtp21cPQuYcOOrq21QijYts4t+hk0xfW396e6ZAUyFK24+oXaPkQBHdlApFHKYAP+p8Eg==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12"
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -4807,18 +5163,18 @@
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.0.12.tgz",
-      "integrity": "sha512-eZPkm3mECdqx1EDJ0S6DAzZ9WZLPIsZH7fRy6vdJJuAgvnOSzkt7AEpA0hlgiNyXcFpE1Cav6/g12FUf4Zo82g==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.0.23.tgz",
+      "integrity": "sha512-NQsmHaAnqAH0Lus+54s3702491APXmDgKjiaIBgBKhoJt5cLiJ7er6nvGA1ntAgU7FCMrTMZaoV7UDnO45K9vg==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -4838,135 +5194,297 @@
         }
       }
     },
-    "node_modules/@storybook/addon-postcss": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz",
-      "integrity": "sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==",
+    "node_modules/@storybook/addon-styling": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-styling/-/addon-styling-1.3.0.tgz",
+      "integrity": "sha512-+Ak9+SysMepRdXGlqDBlhR4cOSDCFEIfGuOW7nyA5eOgHi0IyTg9M+yfBgHVru7dEh+rq47XTVr44UhsWd4xgA==",
       "dev": true,
       "dependencies": {
-        "@storybook/node-logger": "^6.1.14",
-        "css-loader": "^3.6.0",
-        "postcss": "^7.0.35",
-        "postcss-loader": "^4.2.0",
-        "style-loader": "^1.3.0"
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.5",
+        "@storybook/api": "^7.0.12",
+        "@storybook/components": "^7.0.12",
+        "@storybook/core-common": "^7.0.12",
+        "@storybook/core-events": "^7.0.12",
+        "@storybook/csf-tools": "^7.0.12",
+        "@storybook/manager-api": "^7.0.12",
+        "@storybook/node-logger": "^7.0.12",
+        "@storybook/preview-api": "^7.0.12",
+        "@storybook/theming": "^7.0.12",
+        "@storybook/types": "^7.0.12",
+        "css-loader": "^6.7.3",
+        "less-loader": "^11.1.0",
+        "postcss-loader": "^7.2.4",
+        "recast": "^0.23.2",
+        "resolve-url-loader": "^5.0.0",
+        "sass-loader": "^13.2.2",
+        "style-loader": "^3.3.2"
       },
-      "engines": {
-        "node": ">=10",
-        "yarn": "^1.17.0"
+      "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-postcss/node_modules/@storybook/node-logger": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.16.tgz",
-      "integrity": "sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg==",
+    "node_modules/@storybook/addon-styling/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/@storybook/addon-styling/node_modules/cosmiconfig": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
+      "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
       "dev": true,
       "dependencies": {
-        "@types/npmlog": "^4.1.2",
-        "chalk": "^4.1.0",
-        "core-js": "^3.8.2",
-        "npmlog": "^5.0.1",
-        "pretty-hrtime": "^1.0.3"
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/css-loader": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.21",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
       }
     },
-    "node_modules/@storybook/addon-postcss/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==",
+    "node_modules/@storybook/addon-styling/node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
       "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
       "engines": {
-        "node": ">=8"
+        "node": "^10 || ^12 || >= 14"
       },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/@storybook/addon-postcss/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+    "node_modules/@storybook/addon-styling/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@storybook/addon-postcss/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/addon-postcss/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/@storybook/addon-postcss/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+    "node_modules/@storybook/addon-styling/node_modules/postcss-loader": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz",
+      "integrity": "sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==",
       "dev": true,
       "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
+        "cosmiconfig": "^8.2.0",
+        "jiti": "^1.18.2",
+        "semver": "^7.3.8"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">= 14.15.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
       }
     },
-    "node_modules/@storybook/addon-postcss/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+    "node_modules/@storybook/addon-styling/node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
       "dev": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/@storybook/addon-postcss/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==",
+    "node_modules/@storybook/addon-styling/node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
       "dev": true,
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/@storybook/addon-toolbars": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.0.12.tgz",
-      "integrity": "sha512-7xRxk+999NVdEwzn2z1O9Tg5iuUSEXQ5jo+hiyK934VvuyqUsZnflKbSvwVEHb2W+DroaaXu8bdHWxGSH+6moQ==",
+    "node_modules/@storybook/addon-styling/node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12"
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/sass-loader": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz",
+      "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==",
+      "dev": true,
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/semver": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/style-loader": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
+      "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/@storybook/addon-toolbars": {
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.0.23.tgz",
+      "integrity": "sha512-o5X6XY480gmhrRb0aNScMrTbSdizoE7yIvJDuWEe6JCgToKUr0bG7xpa8OpOYcC17yIz69eRwqZjhqDRv57nQQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -4986,18 +5504,18 @@
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.0.12.tgz",
-      "integrity": "sha512-pMgqtDQF8e9AErnRKbbSK9m1lcKn1dFSOkk0PgSBwIIjmha6q+GeT45EHQrQGtkLdtWT0iTktC8ivzIiGKmHkg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.0.23.tgz",
+      "integrity": "sha512-xeSFieRZNKwj44qMKEheQ9staEc+rvlwLeVaSfJHviLOr8Jq8sn6aWZr/1rn9YwT50H/s1o+Kt1h0jDOLQANyw==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
         "memoizerific": "^1.11.3",
         "prop-types": "^15.7.2"
       },
@@ -5019,14 +5537,14 @@
       }
     },
     "node_modules/@storybook/addons": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.0.12.tgz",
-      "integrity": "sha512-yVADbWCFdb12cSpspeb+/6lfTNarPtZZLql49Bhu6E7PxECw/Q3kfHu0LXBLcSnU7f4QqQvQjp88ultt01ABBQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.0.23.tgz",
+      "integrity": "sha512-o+bw63OYDLWAd8VC4ebwU4o+QS58ETV5n52exlOQ1RzvEkbejtlzkxB+5oDndnfUIHYXRvgXleFo+d1KNxOJRw==",
       "dev": true,
       "dependencies": {
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12"
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -5038,13 +5556,13 @@
       }
     },
     "node_modules/@storybook/api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.0.12.tgz",
-      "integrity": "sha512-wki9B7ZXOGwUq/FowDgEnkkX92oNpSg/6ES5Rh19NF3wV0ObLlgXMZ8cZKOLM6G0m/8lkKHGeNBunaLUnX7Yhw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.0.23.tgz",
+      "integrity": "sha512-OgEYdwk2XpiP04V9U2PWeG6SPxeYSPZUwhtsUylMePff9icOTXNJwb87lFBDxPEdMPEYOVIPFHy30dAHTaOIyQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/manager-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/manager-api": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -5064,22 +5582,22 @@
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.0.12.tgz",
-      "integrity": "sha512-MbJKjuTJ7xVbkUVwkEwb6vTYGrkRk4+Xtx1UGo+512o91ubqFs8hXwCHP+x/49RCIIQs5zl93Ig8fTtm+MejWw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.0.23.tgz",
+      "integrity": "sha512-yhdff1m+SY90g+52745h/x6r0uDwKHoMffhjttKTSSKhsHOnvHCaslpPBHsxDxsPNGLrjUT+ueK/GSwKJUJmLA==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
-        "@storybook/docs-tools": "7.0.12",
+        "@storybook/docs-tools": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/lodash": "^4.14.167",
         "color-convert": "^2.0.1",
         "dequal": "^2.0.2",
@@ -5102,15 +5620,15 @@
       }
     },
     "node_modules/@storybook/builder-manager": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.0.12.tgz",
-      "integrity": "sha512-bkZPSDH38/dUSsO087oQ8+goyaEDP/xD0/O61QcQ8EbaVeT6s6Qt7mMhqsLrtmEZHvPMQwKeIXhOJlRNNXB+SA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.0.23.tgz",
+      "integrity": "sha512-um0+fhOX9ai25YMuMEDzFKSZDzYKof2e/DKPOziZoxUeDuJasiAX/i4CChLqkk94NJKQXB/QAFHhbJ0ei/wnxA==",
       "dev": true,
       "dependencies": {
         "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/manager": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/manager": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
         "@types/ejs": "^3.1.1",
         "@types/find-cache-dir": "^3.2.1",
         "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
@@ -5130,31 +5648,31 @@
       }
     },
     "node_modules/@storybook/builder-webpack5": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.0.12.tgz",
-      "integrity": "sha512-msrDWgNFu0kkQ8AOuOCqO+Z+b6iB2kNMhpTyreFbZfUwnEv35aXdULeSa/2mCD0/PFUUFZu+cVYflMyENZxe5w==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.0.23.tgz",
+      "integrity": "sha512-bO95e0ioGYSqWaC7/Rv4YNlhwK5bcXSQeqog+BYf5a5neEnbQgAg5/ZjiDsGRk7cw+TFGUiF7d0sQIKTY57OEA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
-        "@storybook/addons": "7.0.12",
-        "@storybook/api": "7.0.12",
-        "@storybook/channel-postmessage": "7.0.12",
-        "@storybook/channel-websocket": "7.0.12",
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-api": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-events": "7.0.12",
-        "@storybook/core-webpack": "7.0.12",
+        "@storybook/addons": "7.0.23",
+        "@storybook/api": "7.0.23",
+        "@storybook/channel-postmessage": "7.0.23",
+        "@storybook/channel-websocket": "7.0.23",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-api": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-events": "7.0.23",
+        "@storybook/core-webpack": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/router": "7.0.12",
-        "@storybook/store": "7.0.12",
-        "@storybook/theming": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/router": "7.0.23",
+        "@storybook/store": "7.0.23",
+        "@storybook/theming": "7.0.23",
         "@types/node": "^16.0.0",
         "@types/semver": "^7.3.4",
         "babel-loader": "^9.0.0",
@@ -5194,21 +5712,21 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@types/node": {
-      "version": "16.18.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-      "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+      "version": "16.18.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+      "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
       "dev": true
     },
     "node_modules/@storybook/builder-webpack5/node_modules/css-loader": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.4.tgz",
-      "integrity": "sha512-0Y5uHtK5BswfaGJ+jrO+4pPg1msFBc0pwPIE1VqfpmVn6YbDfYfXMj8rfd7nt+4goAhJueO+H/I40VWJfcP1mQ==",
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
       "dev": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.21",
         "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.1",
+        "postcss-modules-local-by-default": "^4.0.3",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.2.0",
@@ -5262,9 +5780,9 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.1.tgz",
-      "integrity": "sha512-Zr/dB+IlXaEqdoslLHhhqecwj73vc3rDmOpsBNBEVk7P2aqAlz+Ijy0fFbU5Ie9PtreDOIgGa9MsLWakVGl+fA==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
       "dev": true,
       "dependencies": {
         "icss-utils": "^5.0.0",
@@ -5309,9 +5827,9 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5346,14 +5864,14 @@
       "dev": true
     },
     "node_modules/@storybook/channel-postmessage": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.12.tgz",
-      "integrity": "sha512-Tc7kQZ5yxlZ44Nmmzec92JaDJ6UZ3Ze4cBfiHik4XcnM1PtN8hr8VFoC6a2AIm1ybfIRenfT5w9TH5yriiPIhw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.23.tgz",
+      "integrity": "sha512-SfXTV55Z9U5rN1OuyR56s+PUpav3b4SgXtP67bnNsrv7dkKhBwr0DUUJogIRnjmY0Loy/hLvJ23kfmKXPWC4vQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.0.3"
@@ -5364,13 +5882,13 @@
       }
     },
     "node_modules/@storybook/channel-websocket": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-7.0.12.tgz",
-      "integrity": "sha512-UV6b9gX2mQLtXlKaFKCHcy+6MaK2od6BYqSJfainnBjDsMIXyhcf7fJaj0XQkJrbNnRBwGhw+6s8JxL98xp7Ew==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-7.0.23.tgz",
+      "integrity": "sha512-xjY09pOaE5T5TgC41V3fezzqdrL+aPjiW0q4H/CrPF9Oa87hHBZq2dmq1TU5Wd4GFrW/OHqo2rGemS/bXh8mNg==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
         "@storybook/global": "^5.0.0",
         "telejson": "^7.0.3"
       },
@@ -5380,9 +5898,9 @@
       }
     },
     "node_modules/@storybook/channels": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.12.tgz",
-      "integrity": "sha512-KDdDmDs8kxAJU+vndTqTNazjLO+XoIPiTRlfP7mk7cgHiQXSjMYy3JSCQ7W0of0Q+9VSl/ve9CNbnGbcQF7rNQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.23.tgz",
+      "integrity": "sha512-cCxR3Z84YQjsVMPgFTI+kDVNOlgXSDakwjkNFBznU+s2qhGW5eZt2g9YRDeVDQ6AjR4j4RrGhwddRq4lQZF2pg==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5390,23 +5908,22 @@
       }
     },
     "node_modules/@storybook/cli": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.0.12.tgz",
-      "integrity": "sha512-OABCRIujxsszIJ0CCpKg8Uj4C1UlAwBpBQhv2aMX3lA/pur6Od524syv2ypWu6J2FyvK/ooeyMbjoP7330cIuA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.0.23.tgz",
+      "integrity": "sha512-6os+7rQN/Bx89bOgx/Ju+n0WXi2BN+eBIyvPJrZ7r5tl389lqL7IKHJFYmQ/FnIzhGvwuUxmoSq5niCt2Hvc3w==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.20.2",
         "@babel/preset-env": "^7.20.2",
         "@ndelangen/get-tarball": "^3.0.7",
-        "@storybook/codemod": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-server": "7.0.12",
-        "@storybook/csf-tools": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/telemetry": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/codemod": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-server": "7.0.23",
+        "@storybook/csf-tools": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/telemetry": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/semver": "^7.3.4",
-        "boxen": "^5.1.2",
         "chalk": "^4.1.0",
         "commander": "^6.2.1",
         "cross-spawn": "^7.0.3",
@@ -5422,6 +5939,7 @@
         "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",
@@ -5505,9 +6023,9 @@
       }
     },
     "node_modules/@storybook/cli/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5538,13 +6056,13 @@
       "dev": true
     },
     "node_modules/@storybook/client-api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-7.0.12.tgz",
-      "integrity": "sha512-kcB0wX9+pL9NW8+xFVABFZJeChsql9i2A69yUQQ8OCaJhB7LS3gl1Ri4zJhVHSuTTWBlbNUSPbu1yEkFiAWt/g==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-7.0.23.tgz",
+      "integrity": "sha512-Z2ubbWJXORuhb1Faur3DL5zV8OObanQY7ow506CmEwNKRgy2LVzkBwpm4woEJHgw95sOyGuz3f3xfDP2DC6M7A==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -5552,9 +6070,9 @@
       }
     },
     "node_modules/@storybook/client-logger": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.12.tgz",
-      "integrity": "sha512-MQMtIgGEgdixvxnBvZ2m8hhc0DGJWeCpHtxg7oqBLBEBmCYFueTqDZHl4Z6SoCrK0a2YS5X/BIXOcEtP1ulMKw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.23.tgz",
+      "integrity": "sha512-L287SRO8EaYOxTpryV7N/1WCL5I1IFs5Naiq3FpybhguUP7F3Si7KWvVdFmSW06K9jNj2IEQ/8zBRM8ra4ttyg==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0"
@@ -5565,18 +6083,18 @@
       }
     },
     "node_modules/@storybook/codemod": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.0.12.tgz",
-      "integrity": "sha512-eGbGZSglvbnY1omzRyEC4XP0FbpuCFKgjXmdHn9faGQUU5EJHwcGYYrRW8JZL3nEVIvNDuRAKzM3p0BVo1xeSQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.0.23.tgz",
+      "integrity": "sha512-Jr1UmOT4h/0Cst1a6xOIxCstN7arJYdQPvcmnM9QUqYjVpJ65y8ASANinyD27xZS8pshJ38z4pPzZCFE+YVP3Q==",
       "dev": true,
       "dependencies": {
         "@babel/core": "~7.21.0",
         "@babel/preset-env": "~7.21.0",
         "@babel/types": "~7.21.2",
         "@storybook/csf": "^0.1.0",
-        "@storybook/csf-tools": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/csf-tools": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/types": "7.0.23",
         "cross-spawn": "^7.0.3",
         "globby": "^11.0.2",
         "jscodeshift": "^0.14.0",
@@ -5590,16 +6108,16 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.0.12.tgz",
-      "integrity": "sha512-6TxByzYS4+LxwZRioGpP6Zh9If5ctjQs5OnR2UmQvP6HDjmMWYTntoHKIbDwAL9C6MrnQYpPOGCPkqrtODQ4/w==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.0.23.tgz",
+      "integrity": "sha512-nEMWjqL34uDzQsHM/MJQt6IoeVzbyONeS14UsS/WKTVpnQvxYLeZAg/kyMwZsl28U25na3d+EhZKv/0mWXw5Nw==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "memoizerific": "^1.11.3",
         "use-resize-observer": "^9.1.0",
         "util-deprecate": "^1.0.2"
@@ -5614,13 +6132,13 @@
       }
     },
     "node_modules/@storybook/core-client": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.0.12.tgz",
-      "integrity": "sha512-m0r+Vl3LfU8cJl8UqIwzh0sEN9I//nMaT8UIIm481AINhQTNihQcnYi9jRw7USjfz2fv5CYkg8cEr4KhI8QlRA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.0.23.tgz",
+      "integrity": "sha512-YKZvUtFl0DH4xq6GkrYTx9UXfJoNlh6ZiybBXkD0eRi2cEo/EFKM6w5IIXYuyfn8uogBX1cUo61FrcRNulS5bw==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -5628,14 +6146,15 @@
       }
     },
     "node_modules/@storybook/core-common": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.0.12.tgz",
-      "integrity": "sha512-PFVjYXHUxDQO1oqfqwQe7S3XoLNO0aZYEr9Zl0LiexlxxnU1v+TQjEfNd/H3T0xxpXlsgzhtEcagdzJeAKyh2g==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.0.23.tgz",
+      "integrity": "sha512-2W87Z9I0ObEMQkGVPMvgB3I5lWkqqkQDkfIbfoc717+DO3Lqgg/CGy5WL7+v2xVlzfoUnYIeXgkeAwDPDrDyMA==",
       "dev": true,
       "dependencies": {
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/node": "^16.0.0",
+        "@types/node-fetch": "^2.6.4",
         "@types/pretty-hrtime": "^1.0.0",
         "chalk": "^4.1.0",
         "esbuild": "^0.17.0",
@@ -5647,6 +6166,7 @@
         "glob-promise": "^6.0.2",
         "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",
@@ -5659,9 +6179,9 @@
       }
     },
     "node_modules/@storybook/core-common/node_modules/@types/node": {
-      "version": "16.18.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-      "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+      "version": "16.18.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+      "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
       "dev": true
     },
     "node_modules/@storybook/core-common/node_modules/ansi-styles": {
@@ -5717,9 +6237,9 @@
       }
     },
     "node_modules/@storybook/core-events": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.12.tgz",
-      "integrity": "sha512-VTmb/zjbz3o1bg+bATzLigVXMVDC/S1FP8CqIrz4mkiys52139FGzMandL2Y2AecPZPGss7ZRdfma28HKVYTRg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.23.tgz",
+      "integrity": "sha512-Hdt18p/qbgJc+1wY2dGcdjmlsuNXWsoLTaXrjInuvr1U0kmKmKs0VMaB0cFubnUgCmB3YQWTGnVr3q8iz9iB7g==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5727,32 +6247,31 @@
       }
     },
     "node_modules/@storybook/core-server": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.0.12.tgz",
-      "integrity": "sha512-X35Kmg7y35Ph4J+gCDJrnVgBwlz4/DzOQofUS6rAbi4KvrPWDJXeM2OzOgx6B0abKl4CeMmjuc0tjbg4vbUFuA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.0.23.tgz",
+      "integrity": "sha512-xHt2WB2kL7VQIxYgtE1TDjd4WEvyqlaf256L3RbuQVGZ/AkuFUEV60FULimM6V+/DyF83hGZTREkjovI+Mb16w==",
       "dev": true,
       "dependencies": {
         "@aw-web-design/x-default-browser": "1.4.88",
         "@discoveryjs/json-ext": "^0.5.3",
-        "@storybook/builder-manager": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/builder-manager": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
-        "@storybook/csf-tools": "7.0.12",
+        "@storybook/csf-tools": "7.0.23",
         "@storybook/docs-mdx": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/telemetry": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/telemetry": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/detect-port": "^1.3.0",
         "@types/node": "^16.0.0",
         "@types/node-fetch": "^2.5.7",
         "@types/pretty-hrtime": "^1.0.0",
         "@types/semver": "^7.3.4",
         "better-opn": "^2.1.1",
-        "boxen": "^5.1.2",
         "chalk": "^4.1.0",
         "cli-table3": "^0.6.1",
         "compression": "^1.7.4",
@@ -5781,9 +6300,9 @@
       }
     },
     "node_modules/@storybook/core-server/node_modules/@types/node": {
-      "version": "16.18.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-      "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+      "version": "16.18.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+      "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
       "dev": true
     },
     "node_modules/@storybook/core-server/node_modules/ansi-styles": {
@@ -5839,9 +6358,9 @@
       }
     },
     "node_modules/@storybook/core-server/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5872,14 +6391,14 @@
       "dev": true
     },
     "node_modules/@storybook/core-webpack": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.0.12.tgz",
-      "integrity": "sha512-71tLTurZg5rYfjHuSUtnT8mcKc4CugvXh6DrJSf/1lTFarWvOZkYha9oh4gVokFWpAiK3GM9LE2DlCAozc9Xnw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.0.23.tgz",
+      "integrity": "sha512-WSdqTnVbBbcaf2dE+dvdfGTutAGquQ4TeVm3Y8yxe03BbZ86LHjQg/sQEYgJq1sud4SHPgvQ/lhF9SSAwFXVBQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/core-common": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/node": "^16.0.0",
         "ts-dedent": "^2.0.0"
       },
@@ -5889,9 +6408,9 @@
       }
     },
     "node_modules/@storybook/core-webpack/node_modules/@types/node": {
-      "version": "16.18.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-      "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+      "version": "16.18.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+      "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
       "dev": true
     },
     "node_modules/@storybook/csf": {
@@ -5904,12 +6423,12 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.0.12.tgz",
-      "integrity": "sha512-iiH0ynLQV5BYFc0o7RlSJS2S3GT/ffyfbV4rnCnPKdqyo4REEVvmhOuLhwzurtsXsjh+xF6VUYUDN+8/5mbkYw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.0.23.tgz",
+      "integrity": "sha512-hKlCkZ8NONqRfzt5rdyQznnf/jMbbUF3h8mLxs1nYSevqH8CaHH9w8dYW2y67hyzT7Wt050bqRO2YH8ZQG/VVA==",
       "dev": true,
       "dependencies": {
-        "@storybook/csf-tools": "7.0.12",
+        "@storybook/csf-tools": "7.0.23",
         "unplugin": "^0.10.2"
       },
       "funding": {
@@ -5918,9 +6437,9 @@
       }
     },
     "node_modules/@storybook/csf-tools": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.0.12.tgz",
-      "integrity": "sha512-EcDzKeENzs4awyjx0VxlONDLibiEtIPDP1XdOCcZGtv3nXXBFtS2WDsYhJHkwyvE37jWTyw2e4xKQmBi0Hjvbw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.0.23.tgz",
+      "integrity": "sha512-fCRmI/UduL7/Bhz4Ww8pn+dHqU/qCaZTcigxQSeWm3OpTUpHzbFwVLXLr/ZnL4ofS+AWa5FhiZXcMF5TMXWXLw==",
       "dev": true,
       "dependencies": {
         "@babel/generator": "~7.21.1",
@@ -5928,7 +6447,7 @@
         "@babel/traverse": "~7.21.2",
         "@babel/types": "~7.21.2",
         "@storybook/csf": "^0.1.0",
-        "@storybook/types": "7.0.12",
+        "@storybook/types": "7.0.23",
         "fs-extra": "^11.1.0",
         "recast": "^0.23.1",
         "ts-dedent": "^2.0.0"
@@ -5945,15 +6464,15 @@
       "dev": true
     },
     "node_modules/@storybook/docs-tools": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.0.12.tgz",
-      "integrity": "sha512-+HykeQLgjyDyF9G7HqY0FHXlX7X5YpQcmNjftJzBrc/GO1EeO0M78d54avcOPyyTfuWOh7oZtSJ0MzjA1qrqaQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.0.23.tgz",
+      "integrity": "sha512-sf0eGmx7ZfFgj/lrSjvDoqOQWRdAk9Os5nuy/rtSyOYLv8Y7+Pwdjn+1cUTs6j/yhgOooC0IweJom0+D40Mkog==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/doctrine": "^0.0.3",
         "doctrine": "^3.0.0",
         "lodash": "^4.17.21"
@@ -5970,16 +6489,16 @@
       "dev": true
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.0.12.tgz",
-      "integrity": "sha512-jx4rb4AMT1YIOpE0HCdfyLvpYU+94wPkC9vt7sZGWAp7nnYG+KO/lx3XCJaR9qQPIxVYejJtWkeGn4RID79SoQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.0.23.tgz",
+      "integrity": "sha512-CeV2se64XxccD4L6XFI3cFfEz3/Lcbrvb+T3bZZzGOXO18zH5tN3jXVfAONrz/mU69jL9mbo96hFl51UDtwcAg==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/preview-api": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -5987,9 +6506,9 @@
       }
     },
     "node_modules/@storybook/manager": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.0.12.tgz",
-      "integrity": "sha512-19BsDcwJOYXn6zEarxvNGDdYLUqZyhX92x6GPHSC4cf8BoxHuhmtnz5vOTZHusCxkKIu/C9W0H6wH2Ma47kDCg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.0.23.tgz",
+      "integrity": "sha512-D3WIqtzjSY3UOskZhKQ2R7RypPUeqAmsXLKxw2EEEx7iLHgJfKvFeAZ77NCKNOxQsEDjLrjTQH4WjiKEaSpK5Q==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5997,19 +6516,19 @@
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.0.12.tgz",
-      "integrity": "sha512-3QXARtxpc6Xxqf5pviUw2UuhK53+IsINSljeWhAqdQ1Gzbywl67TpibTd7xVN6NKxhUH5Bzo9bIZTAzMZGqaKw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.0.23.tgz",
+      "integrity": "sha512-tvq5+xVkpqWDDnvyoi/sfAR7ZaIu7oiommMtuEt1/mhItn9nv8TXkWbthWUlwRgUrPiJJl2BNSnXMRS+byOAZg==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/router": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/router": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
         "memoizerific": "^1.11.3",
@@ -6040,9 +6559,9 @@
       }
     },
     "node_modules/@storybook/manager-api/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6067,9 +6586,9 @@
       "dev": true
     },
     "node_modules/@storybook/nextjs": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-7.0.12.tgz",
-      "integrity": "sha512-XFO62uKiS1Cojn2SFQCQXL1RWyylrug1ywKl88OVDmOwBVfJQ/Xm/PMJVp+4dMRFOGQFAIS86uUImNZRHyGsfA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-7.0.23.tgz",
+      "integrity": "sha512-y3lyFgY7CZm4O59Td58AooeQQNV6NQWRgV+/PEqBh6csHgLSM744te3POmc5L1LXOtAs7dc5sGbKfPdMV1M+Kw==",
       "dev": true,
       "dependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -6084,19 +6603,20 @@
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.21.0",
         "@babel/runtime": "^7.21.0",
-        "@storybook/addon-actions": "7.0.12",
-        "@storybook/builder-webpack5": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preset-react-webpack": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/react": "7.0.12",
+        "@storybook/addon-actions": "7.0.23",
+        "@storybook/builder-webpack5": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preset-react-webpack": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/react": "7.0.23",
         "@types/node": "^16.0.0",
         "css-loader": "^6.7.3",
         "find-up": "^5.0.0",
         "fs-extra": "^11.1.0",
         "image-size": "^1.0.0",
         "loader-utils": "^3.2.0",
+        "node-polyfill-webpack-plugin": "^2.0.1",
         "pnp-webpack-plugin": "^1.7.0",
         "postcss": "^8.4.21",
         "postcss-loader": "^7.0.2",
@@ -6317,9 +6837,9 @@
       }
     },
     "node_modules/@storybook/nextjs/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6354,9 +6874,9 @@
       "dev": true
     },
     "node_modules/@storybook/node-logger": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.0.12.tgz",
-      "integrity": "sha512-VL+NXzc9NuOP6/9alg4Sofz9kh8tmlo3p+UtCIYCHH088yCsB3XsNhkG9lF1C5EZVWcuHxc2u6MMF3ezOjvKfQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.0.23.tgz",
+      "integrity": "sha512-bVa0LnD0pAI0ZU9cue+hvWiWEli3Gny6ofolaWiOw1W03P5ogUo7gHHw/+Is4Iba7FxD1+W1BXm5oi22xD1x0g==",
       "dev": true,
       "dependencies": {
         "@types/npmlog": "^4.1.2",
@@ -6422,9 +6942,9 @@
       }
     },
     "node_modules/@storybook/postinstall": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.0.12.tgz",
-      "integrity": "sha512-RKNvBLgABBTQwvGyF2jX4vP7OMLB3KvEEOQDoeOKjqyWfekDn5smI+eT714mtmKIH0YMcwmvzLgEdZkjmM/XhA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.0.23.tgz",
+      "integrity": "sha512-GOVF1MXIRjK8Qx5FjMVoYGlQetJJFjxh75FHb2cm2xxEiIxLpMWOOHkTcsqh2BQzGqi/Bs4IKx2OxMxZazgroQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -6432,18 +6952,18 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.0.12.tgz",
-      "integrity": "sha512-EBgP5p8uiwJXPpM5M6mC4SrKCKSeQEJI+oQ36olUIB7PUhysiVFhLB+rOIgkXc3nhX1uRTO/PYefd9PBMwE11A==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.0.23.tgz",
+      "integrity": "sha512-kYJXxQnDSRW3/W2XBqPjuZmtifOStpoQd+h4uvQovVD8ydcZVw8cCId8LBRlJ+SGUnZX4eRC2D5qDQJd4ljQ+A==",
       "dev": true,
       "dependencies": {
         "@babel/preset-flow": "^7.18.6",
         "@babel/preset-react": "^7.18.6",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-        "@storybook/core-webpack": "7.0.12",
-        "@storybook/docs-tools": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/react": "7.0.12",
+        "@storybook/core-webpack": "7.0.23",
+        "@storybook/docs-tools": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/react": "7.0.23",
         "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
         "@types/node": "^16.0.0",
         "@types/semver": "^7.3.4",
@@ -6476,9 +6996,9 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@types/node": {
-      "version": "16.18.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-      "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+      "version": "16.18.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+      "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
       "dev": true
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/lru-cache": {
@@ -6494,9 +7014,9 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6515,9 +7035,9 @@
       "dev": true
     },
     "node_modules/@storybook/preview": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.0.12.tgz",
-      "integrity": "sha512-za8El/nnkyAo/uqyqAg7PMuP6DSdPoEnDRyIk4LzY7sAGly6i4Uge377cdo1nUBQLS5S4kKIc4xf8TUegb3G1Q==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.0.23.tgz",
+      "integrity": "sha512-D4oDayFOXqNDLJStbZ35Lc0UAXvzdWiij1IE01wH1mzndlEgR+/1ZEPQfm5Leb5LZd7pWmyYLJqh6m/CCK2uPg==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -6525,18 +7045,18 @@
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.0.12.tgz",
-      "integrity": "sha512-YI/AfHszIOYt967fsRlc7j6I0zZB+RSsBwD/nMA8y9vszdpQ0MgRhxHgQxFf6cgqbuQcdCsnTIpT0iQ4GHjDXg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.0.23.tgz",
+      "integrity": "sha512-kXhDX6gVjQu4Lx4SnCW5Yt5W/TbQofp9SL0paB1ywsJ15xSAPU5KVILe9OWAOba2YUnk7sHux/xDX/gH5RCpVw==",
       "dev": true,
       "dependencies": {
-        "@storybook/channel-postmessage": "7.0.12",
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channel-postmessage": "7.0.23",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.0.12",
+        "@storybook/types": "7.0.23",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -6552,18 +7072,18 @@
       }
     },
     "node_modules/@storybook/react": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.0.12.tgz",
-      "integrity": "sha512-dKHKc02LSgn3St7U/xj/Rr2DFLbS4dWQka+pS/AOvPPvMAR2gGHVhkmoFuFMf176hUTuE5MCoWBoNJIRMz7ZiQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.0.23.tgz",
+      "integrity": "sha512-vQQ+OaYXwab9PelUggI/ObJ0a5Luyn5lsAWI9QF3BV1WsiHwCKM862OGsfUEfV3WXaN+uHPx/LpyHC7XTFp2yA==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-client": "7.0.12",
-        "@storybook/docs-tools": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-client": "7.0.23",
+        "@storybook/docs-tools": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/react-dom-shim": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/react-dom-shim": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/escodegen": "^0.0.6",
         "@types/estree": "^0.0.51",
         "@types/node": "^16.0.0",
@@ -6616,9 +7136,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.0.12.tgz",
-      "integrity": "sha512-4z9J54TD7uphxPqSuLEzeKTV4oF8Fmv8qFfnT0XZJ2mpYTC2NTbkYoYZQ8N0eYzvNOk6xgfpDqBdmIANf4NaYw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.0.23.tgz",
+      "integrity": "sha512-v4jIaDb3SwYmRADuNZDwR/5r0V65zAc+hJlW+8z3FRZ5xN3gGV/3s08VL2xnItmidsneMndz9ECjlaTHvSGOng==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -6630,18 +7150,18 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@types/node": {
-      "version": "16.18.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-      "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+      "version": "16.18.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+      "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
       "dev": true
     },
     "node_modules/@storybook/router": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.0.12.tgz",
-      "integrity": "sha512-dOtBiCBGeDem86BCWR7AlTVQjoBk0yw/XZLXS9qcpUfpe+UDjd0Rh21ZdEEMHG1Wfu4d2AhhG5l/JSJ1IE83jQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.0.23.tgz",
+      "integrity": "sha512-qZJJJKqcyhTAXRWxGwBlL97BSt/TbWcXNUB1H3Q4ufKrgdrCRuThfr8R8Fir+iggr7vF3QnMQ7rCyPT/yB56/g==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0"
       },
@@ -6654,82 +7174,14 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/semver": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-      "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-      "dev": true,
-      "dependencies": {
-        "core-js": "^3.6.5",
-        "find-up": "^4.1.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@storybook/semver/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@storybook/semver/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@storybook/semver/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@storybook/semver/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@storybook/store": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-7.0.12.tgz",
-      "integrity": "sha512-+gqs6y55fXp9vLrq9VyCGoAHbjfEBMZClkCNksPUBPoLRCY0knxGvhIOoDdcqHkHpm3AQGsfW/ESurbLj/Q76Q==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-7.0.23.tgz",
+      "integrity": "sha512-rTSAwn44Pm1c4ChF29zF/YRAtPInvFCrW7lBHTQoXT+fL3FHXUgxv61rlby+DGJlLZmEHM2SF+1DgIKzvXNNkg==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23"
       },
       "funding": {
         "type": "opencollective",
@@ -6737,13 +7189,13 @@
       }
     },
     "node_modules/@storybook/telemetry": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.0.12.tgz",
-      "integrity": "sha512-oxqe15bn5W+1pLpLjXTfj3H+YPZq3jExjdJwTCUHtFrrsNs0k6dyqAUk8qTOUqOTclANHb6vlNBFJDvZ6qbfEQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.0.23.tgz",
+      "integrity": "sha512-bV6U58+JXvliq6FHnEOmy902Coa2JVD0M1N6En0us9kNNrtxpn4xSO4dvFW0A+veZimtT6kI55liG89IKeN3Nw==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-common": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-common": "7.0.23",
         "chalk": "^4.1.0",
         "detect-package-manager": "^2.0.1",
         "fetch-retry": "^5.0.2",
@@ -6810,211 +7262,24 @@
       }
     },
     "node_modules/@storybook/testing-library": {
-      "version": "0.0.13",
-      "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.0.13.tgz",
-      "integrity": "sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw==",
+      "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": {
-        "@storybook/client-logger": "^6.4.0",
-        "@storybook/instrumenter": "^6.4.0",
-        "@testing-library/dom": "^8.3.0",
-        "@testing-library/user-event": "^13.2.1",
+        "@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/@storybook/addons": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz",
-      "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/api": "6.5.16",
-        "@storybook/channels": "6.5.16",
-        "@storybook/client-logger": "6.5.16",
-        "@storybook/core-events": "6.5.16",
-        "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.16",
-        "@storybook/theming": "6.5.16",
-        "@types/webpack-env": "^1.16.0",
-        "core-js": "^3.8.2",
-        "global": "^4.4.0",
-        "regenerator-runtime": "^0.13.7"
-      },
-      "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/testing-library/node_modules/@storybook/api": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz",
-      "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/channels": "6.5.16",
-        "@storybook/client-logger": "6.5.16",
-        "@storybook/core-events": "6.5.16",
-        "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.16",
-        "@storybook/semver": "^7.3.2",
-        "@storybook/theming": "6.5.16",
-        "core-js": "^3.8.2",
-        "fast-deep-equal": "^3.1.3",
-        "global": "^4.4.0",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3",
-        "regenerator-runtime": "^0.13.7",
-        "store2": "^2.12.0",
-        "telejson": "^6.0.8",
-        "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/testing-library/node_modules/@storybook/channels": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz",
-      "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==",
-      "dev": true,
-      "dependencies": {
-        "core-js": "^3.8.2",
-        "ts-dedent": "^2.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/testing-library/node_modules/@storybook/client-logger": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz",
-      "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==",
-      "dev": true,
-      "dependencies": {
-        "core-js": "^3.8.2",
-        "global": "^4.4.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/testing-library/node_modules/@storybook/core-events": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz",
-      "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==",
-      "dev": true,
-      "dependencies": {
-        "core-js": "^3.8.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/testing-library/node_modules/@storybook/csf": {
-      "version": "0.0.2--canary.4566f4d.1",
-      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-      "integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.15"
-      }
-    },
-    "node_modules/@storybook/testing-library/node_modules/@storybook/instrumenter": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-6.5.16.tgz",
-      "integrity": "sha512-q8/GaBk8PA/cL7m5OW+ec5t63+Zja9YvYSPGXrYtW17koSv7OnNPmk6RvI7tIHHO0mODBYnaHjF4zQfEGoyR5Q==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addons": "6.5.16",
-        "@storybook/client-logger": "6.5.16",
-        "@storybook/core-events": "6.5.16",
-        "core-js": "^3.8.2",
-        "global": "^4.4.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/testing-library/node_modules/@storybook/router": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz",
-      "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/client-logger": "6.5.16",
-        "core-js": "^3.8.2",
-        "memoizerific": "^1.11.3",
-        "qs": "^6.10.0",
-        "regenerator-runtime": "^0.13.7"
-      },
-      "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/testing-library/node_modules/@storybook/theming": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
-      "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/client-logger": "6.5.16",
-        "core-js": "^3.8.2",
-        "memoizerific": "^1.11.3",
-        "regenerator-runtime": "^0.13.7"
-      },
-      "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/testing-library/node_modules/telejson": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-      "integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-      "dev": true,
-      "dependencies": {
-        "@types/is-function": "^1.0.0",
-        "global": "^4.4.0",
-        "is-function": "^1.0.2",
-        "is-regex": "^1.1.2",
-        "is-symbol": "^1.0.3",
-        "isobject": "^4.0.0",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3"
-      }
-    },
     "node_modules/@storybook/theming": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.12.tgz",
-      "integrity": "sha512-frBkvH7LF8j23ODaywLK4m4LLscw49oKblkZ+30QZkBAzRf2o3a/QSZW2V1zfBo7ygcXiUJ5bIjh7Y17mMJqbQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.23.tgz",
+      "integrity": "sha512-hKmpjFS24YK0vl69KhqNauARTgxQu5mvlifHmu7xO80bigXi6NzA5VyyCMHO1SKVFJwPBVHHfauQCenSRm2PDQ==",
       "dev": true,
       "dependencies": {
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3"
       },
@@ -7028,12 +7293,12 @@
       }
     },
     "node_modules/@storybook/types": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.12.tgz",
-      "integrity": "sha512-nlvU4MyO2grwPCRQ8alA3AnY1bQxGJ6A4QgJu+1MhtjVenifFlxOQX4H1OiA+YXfjlV096oO5LrxvetJPFAKKQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.23.tgz",
+      "integrity": "sha512-ziszL3OfhTT5PHE7kiQjWWx3Lw3qro8eLX+56dXDNgmft5LS66yEANcaA7OzxLnEgdyWSxJqgrVo6r0JwHp2Eg==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.0.12",
+        "@storybook/channels": "7.0.23",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "^2.0.0"
@@ -7120,22 +7385,22 @@
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
-      "integrity": "sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==",
+      "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.0.0",
+        "aria-query": "5.1.3",
         "chalk": "^4.1.0",
         "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.4.4",
+        "lz-string": "^1.5.0",
         "pretty-format": "^27.0.2"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14"
       }
     },
     "node_modules/@testing-library/dom/node_modules/ansi-styles": {
@@ -7191,15 +7456,12 @@
       }
     },
     "node_modules/@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
+      "version": "14.4.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
+      "integrity": "sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==",
       "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
       "engines": {
-        "node": ">=10",
+        "node": ">=12",
         "npm": ">=6"
       },
       "peerDependencies": {
@@ -7218,9 +7480,9 @@
       "dev": true
     },
     "node_modules/@types/babel__core": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
-      "integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==",
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
+      "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
@@ -7250,12 +7512,12 @@
       }
     },
     "node_modules/@types/babel__traverse": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.5.tgz",
-      "integrity": "sha512-enCvTL8m/EHS/zIvJno9nE+ndYPh1/oNFzRYRmtUqJICG2VnCSBzMLW5VN2KCQU91f23tsNKR8v7VJJQMatl7Q==",
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
+      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.3.0"
+        "@babel/types": "^7.20.7"
       }
     },
     "node_modules/@types/body-parser": {
@@ -7286,9 +7548,9 @@
       }
     },
     "node_modules/@types/detect-port": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.2.tgz",
-      "integrity": "sha512-xxgAGA2SAU4111QefXPSp5eGbDm/hW6zhvYl9IeEPZEry9F4d66QAHm5qpUXjb6IsevZV/7emAEx5MhP6O192g==",
+      "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": {
@@ -7407,10 +7669,10 @@
       "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
       "dev": true
     },
-    "node_modules/@types/is-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.1.tgz",
-      "integrity": "sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==",
+    "node_modules/@types/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==",
       "dev": true
     },
     "node_modules/@types/istanbul-lib-coverage": {
@@ -7616,11 +7878,12 @@
       }
     },
     "node_modules/@types/serve-static": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
-      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.2.tgz",
+      "integrity": "sha512-J2LqtvFYCzaj8pVYKw8klQXrLLk7TBZmQ4ShlcdkELFKGwGMfevMLneMMRkMgZxotOD9wg497LpC7O8PcvAmfw==",
       "dev": true,
       "dependencies": {
+        "@types/http-errors": "*",
         "@types/mime": "*",
         "@types/node": "*"
       }
@@ -7640,12 +7903,6 @@
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
       "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
     },
-    "node_modules/@types/webpack-env": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz",
-      "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==",
-      "dev": true
-    },
     "node_modules/@types/yargs": {
       "version": "17.0.24",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
@@ -7708,9 +7965,9 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -7852,9 +8109,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -7911,9 +8168,9 @@
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -8121,6 +8378,18 @@
         "esbuild": ">=0.10.0"
       }
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dev": true,
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -8305,15 +8574,6 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/ansi-align": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
-      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^4.1.0"
-      }
-    },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -8555,6 +8815,24 @@
         "get-intrinsic": "^1.1.3"
       }
     },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/asn1.js/node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+      "dev": true
+    },
     "node_modules/assert": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
@@ -8754,9 +9032,9 @@
       "dev": true
     },
     "node_modules/babel-loader/node_modules/schema-utils": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
-      "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
@@ -9023,6 +9301,12 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/bn.js": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
+      "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
+      "dev": true
+    },
     "node_modules/body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -9083,104 +9367,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "node_modules/boxen": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
-      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-align": "^3.0.0",
-        "camelcase": "^6.2.0",
-        "chalk": "^4.1.0",
-        "cli-boxes": "^2.2.1",
-        "string-width": "^4.2.2",
-        "type-fest": "^0.20.2",
-        "widest-line": "^3.1.0",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/boxen/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/boxen/node_modules/camelcase": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/boxen/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/boxen/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/boxen/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/boxen/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
@@ -9215,19 +9401,112 @@
         "node": ">=8"
       }
     },
+    "node_modules/brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==",
+      "dev": true
+    },
     "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/browserify-zlib": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-      "integrity": "sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==",
+    "node_modules/browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "dependencies": {
-        "pako": "~0.2.0"
+        "buffer-xor": "^1.0.3",
+        "cipher-base": "^1.0.0",
+        "create-hash": "^1.1.0",
+        "evp_bytestokey": "^1.0.3",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "dev": true,
+      "dependencies": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "node_modules/browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "dev": true,
+      "dependencies": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "node_modules/browserify-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "node_modules/browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      }
+    },
+    "node_modules/browserify-sign/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/browserify-sign/node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "dev": true,
+      "dependencies": {
+        "pako": "~1.0.5"
       }
     },
     "node_modules/browserslist": {
@@ -9315,6 +9594,18 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
       "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
     },
+    "node_modules/buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==",
+      "dev": true
+    },
+    "node_modules/builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==",
+      "dev": true
+    },
     "node_modules/bundle-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
@@ -9340,9 +9631,9 @@
       }
     },
     "node_modules/c8": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/c8/-/c8-7.13.0.tgz",
-      "integrity": "sha512-/NL4hQTv1gBL6J6ei80zu3IiTrmePDKXKXOTLpHvcIWZTVYQlDhVWjjWvkhICylE8EwwnMVzDZugCvdx0/DIIA==",
+      "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",
@@ -9615,10 +9906,22 @@
         "node": ">=6"
       }
     },
-    "node_modules/cli-boxes": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
-      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
+      "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -9658,6 +9961,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -9684,15 +9996,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/clone-deep/node_modules/isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -9923,12 +10226,24 @@
       "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "dev": true
     },
+    "node_modules/console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
+      "dev": true
+    },
     "node_modules/console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
       "dev": 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",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -9982,12 +10297,25 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.30.2",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
       "integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==",
-      "devOptional": true,
       "hasInstallScript": true,
+      "optional": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/core-js"
@@ -10007,9 +10335,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.30.2.tgz",
-      "integrity": "sha512-p/npFUJXXBkCCTIlEGBdghofn00jWG6ZOtdoIXSJmAu2QBvN0IqpZXWweOytcwE6cfx8ZvVUy1vw8zxhe4Y2vg==",
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.31.0.tgz",
+      "integrity": "sha512-/AnE9Y4OsJZicCzIe97JP5XoPKQJfTuEG43aEVLFJGOJpyqELod+pE6LEl63DfG1Mp8wX97LDaDpy1GmLEUxlg==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -10045,6 +10373,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      }
+    },
+    "node_modules/create-ecdh/node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+      "dev": true
+    },
     "node_modules/create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -10057,6 +10401,20 @@
         "sha.js": "^2.4.0"
       }
     },
+    "node_modules/create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "dev": true,
+      "dependencies": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
     "node_modules/cross-fetch": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
@@ -10079,6 +10437,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "dev": true,
+      "dependencies": {
+        "browserify-cipher": "^1.0.0",
+        "browserify-sign": "^4.0.0",
+        "create-ecdh": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "create-hmac": "^1.1.0",
+        "diffie-hellman": "^5.0.0",
+        "inherits": "^2.0.1",
+        "pbkdf2": "^3.0.3",
+        "public-encrypt": "^4.0.0",
+        "randombytes": "^2.0.0",
+        "randomfill": "^1.0.3"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -10113,113 +10493,6 @@
         "utrie": "^1.0.2"
       }
     },
-    "node_modules/css-loader": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
-      "integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "cssesc": "^3.0.0",
-        "icss-utils": "^4.1.1",
-        "loader-utils": "^1.2.3",
-        "normalize-path": "^3.0.0",
-        "postcss": "^7.0.32",
-        "postcss-modules-extract-imports": "^2.0.0",
-        "postcss-modules-local-by-default": "^3.0.2",
-        "postcss-modules-scope": "^2.2.0",
-        "postcss-modules-values": "^3.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "schema-utils": "^2.7.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/css-loader/node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
-    "node_modules/css-loader/node_modules/loader-utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/css-loader/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/css-loader/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/css-loader/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/css-loader/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -10550,6 +10823,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -10647,6 +10932,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/des.js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
+      "integrity": "sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -10736,6 +11031,23 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      }
+    },
+    "node_modules/diffie-hellman/node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+      "dev": true
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -10804,11 +11116,17 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/dom-walk": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
-      "dev": true
+    "node_modules/domain-browser": {
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz",
+      "integrity": "sha512-IGBwjF7tNk3cwypFNH/7bfzBcgSCbaMOD3GsaY1AU/JRrnHnYgEM0+9kQt52iZxjNsjBtJYtao146V+f8jFZNw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://bevry.me/fund"
+      }
     },
     "node_modules/domelementtype": {
       "version": "2.3.0",
@@ -10999,6 +11317,27 @@
       "integrity": "sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA==",
       "dev": true
     },
+    "node_modules/elliptic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "node_modules/elliptic/node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+      "dev": true
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -11067,9 +11406,9 @@
       }
     },
     "node_modules/envinfo": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.9.0.tgz",
+      "integrity": "sha512-RODB4txU+xImYDemN5DqaKC0CHk05XSVkOX4pq0hK26Qx+1LChkuOyUDlGEjYb3ACr0n9qBhFjg37hQuJvpkRQ==",
       "dev": true,
       "bin": {
         "envinfo": "dist/cli.js"
@@ -11078,6 +11417,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -11440,12 +11793,12 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "13.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.3.tgz",
-      "integrity": "sha512-1lXwdFi29fKxzeugof/TUE7lpHyJQt5+U4LaUHyvQfHjvsWO77vFNicJv5sX6k0VDVSbnfz0lw+avxI+CinbMg==",
+      "version": "13.4.7",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.7.tgz",
+      "integrity": "sha512-+IRAyD0+J1MZaTi9RQMPUfr6Q+GCZ1wOkK6XM52Vokh7VI4R6YFGOFzdkEFHl4ZyIX4FKa5vcwUP2WscSFNjNQ==",
       "dev": true,
       "dependencies": {
-        "@next/eslint-plugin-next": "13.4.3",
+        "@next/eslint-plugin-next": "13.4.7",
         "@rushstack/eslint-patch": "^1.1.3",
         "@typescript-eslint/parser": "^5.42.0",
         "eslint-import-resolver-node": "^0.3.6",
@@ -12081,6 +12434,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -12095,6 +12457,16 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "dev": true,
+      "dependencies": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -12567,9 +12939,9 @@
       "dev": true
     },
     "node_modules/flow-parser": {
-      "version": "0.206.0",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.206.0.tgz",
-      "integrity": "sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==",
+      "version": "0.209.1",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.209.1.tgz",
+      "integrity": "sha512-7YdhWfCsLRn31or7oK9M7Svd4WFk1qfj6VIFY/9S6HRyzBBiLlobNbUbitZHfdi0nhkik5S498UmF3phdzM6ug==",
       "dev": true,
       "engines": {
         "node": ">=0.4.0"
@@ -12717,9 +13089,9 @@
       }
     },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -12876,9 +13248,9 @@
       "dev": true
     },
     "node_modules/fs-monkey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.4.tgz",
+      "integrity": "sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ==",
       "dev": true
     },
     "node_modules/fs.realpath": {
@@ -13122,9 +13494,9 @@
       }
     },
     "node_modules/glob-promise": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-6.0.2.tgz",
-      "integrity": "sha512-Ni2aDyD1ekD6x8/+K4hDriRDbzzfuK4yKpqSymJ4P7IxbtARiOOuU+k40kbHM0sLIlbf1Qh0qdMkAHMZYE6XJQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-6.0.3.tgz",
+      "integrity": "sha512-m+kxywR5j/2Z2V9zvHKfwwL5Gp7gIFEBX+deTB9w2lJB+wSuw9kcS43VfvTAMk8TXL5JCl/cCjsR+tgNVspGyA==",
       "dev": true,
       "dependencies": {
         "@types/glob": "^8.0.0"
@@ -13167,16 +13539,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "dev": true,
-      "dependencies": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -13281,12 +13643,27 @@
         "gunzip-maybe": "bin.js"
       }
     },
+    "node_modules/gunzip-maybe/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/gunzip-maybe/node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
       "dev": true
     },
+    "node_modules/gunzip-maybe/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/gunzip-maybe/node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -13476,6 +13853,16 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
@@ -13499,6 +13886,17 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "node_modules/hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
+      "dev": true,
+      "dependencies": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13519,10 +13917,20 @@
       "dev": true
     },
     "node_modules/html-entities": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
-      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
-      "dev": true
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.6.tgz",
+      "integrity": "sha512-9o0+dcpIw2/HxkNuYKxSJUF/MMRZQECK4GnF+oQOmJ83yCVHTWgCH5aOXxK5bozNRmM8wtgryjHD3uloPBDEGw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ]
     },
     "node_modules/html-escaper": {
       "version": "2.0.2",
@@ -13587,9 +13995,9 @@
       }
     },
     "node_modules/html-webpack-plugin": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.1.tgz",
-      "integrity": "sha512-cTUzZ1+NqjGEKjmVgZKLMdiFg3m9MdRXkZW2OEe69WYVi5ONLMmlnSZdXzGGMOq0C8jGDrL6EWyEDDUioHO/pA==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
+      "integrity": "sha512-6YrDKTuqaP/TquFH7h4srYWsZx+x6k6+FbsTm0ziCwGHDP78Unr1r9F/H4+sGmMbX08GQcJ+K64x55b+7VM/jg==",
       "dev": true,
       "dependencies": {
         "@types/html-minifier-terser": "^6.0.0",
@@ -13679,6 +14087,12 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==",
+      "dev": true
+    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -13751,50 +14165,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/icss-utils": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
-      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
-      "dev": true,
-      "dependencies": {
-        "postcss": "^7.0.14"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/icss-utils/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/icss-utils/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/icss-utils/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -14171,12 +14541,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
-      "dev": true
-    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -14246,6 +14610,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -14442,6 +14815,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -14476,6 +14861,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -14501,9 +14893,9 @@
       "dev": true
     },
     "node_modules/isobject": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-      "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -14593,9 +14985,9 @@
       }
     },
     "node_modules/jake": {
-      "version": "10.8.6",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.6.tgz",
-      "integrity": "sha512-G43Ub9IYEFfu72sua6rzooi8V8Gz2lkfk48rW20vEWCGizeaEPlKB1Kh8JIA84yQbiAEfqlPmSpGgCKKxH3rDA==",
+      "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",
@@ -15241,6 +15633,112 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less-loader": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.3.tgz",
+      "integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "less": "^3.5.0 || ^4.0.0",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/less/node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/less/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/less/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -15357,6 +15855,74 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-symbols/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/log-symbols/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/log-symbols/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/log-symbols/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/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -15463,9 +16029,9 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/markdown-to-jsx": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.0.tgz",
-      "integrity": "sha512-3l4/Bigjm4bEqjCR6Xr+d4DtM1X6vvtGsMGSjJYyep8RjjIvcWtrXBS8Wbfe1/P+atKNMccpsraESIaWVplzVg==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.1.tgz",
+      "integrity": "sha512-9HrdzBAo0+sFz9ZYAGT5fB8ilzTW+q6lPocRxrIesMO+aB40V9MgFfbfMXxlGjf22OpRy+IXlvVaQenicdpgbg==",
       "dev": true,
       "engines": {
         "node": ">= 10"
@@ -15619,12 +16185,12 @@
       }
     },
     "node_modules/memfs": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.1.tgz",
-      "integrity": "sha512-UWbFJKvj5k+nETdteFndTpYxdeTMox/ULeqX5k/dpaQJCCFmj5EeKv3dBcyO2xmkRAx2vppRu5dVG7SOtsGOzA==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
+      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
       "dev": true,
       "dependencies": {
-        "fs-monkey": "^1.0.3"
+        "fs-monkey": "^1.0.4"
       },
       "engines": {
         "node": ">= 4.0.0"
@@ -16109,6 +16675,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      },
+      "bin": {
+        "miller-rabin": "bin/miller-rabin"
+      }
+    },
+    "node_modules/miller-rabin/node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+      "dev": true
+    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -16160,15 +16745,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
-      "dev": true,
-      "dependencies": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -16178,6 +16754,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "node_modules/minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
+      "dev": true
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -16316,6 +16904,50 @@
       "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
       "dev": true
     },
+    "node_modules/needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -16458,9 +17090,9 @@
       }
     },
     "node_modules/node-abi/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -16519,9 +17151,9 @@
       }
     },
     "node_modules/node-fetch-native": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.1.1.tgz",
-      "integrity": "sha512-9VvspTSUp2Sxbl+9vbZTlFGq9lHwE8GDVVekxx6YsNd1YH59sb3Ba8v3Y3cD8PkLNcileGGcA21PFjVl0jzDaw==",
+      "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-int64": {
@@ -16530,6 +17162,102 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
       "dev": true
     },
+    "node_modules/node-polyfill-webpack-plugin": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/node-polyfill-webpack-plugin/-/node-polyfill-webpack-plugin-2.0.1.tgz",
+      "integrity": "sha512-ZUMiCnZkP1LF0Th2caY6J/eKKoA0TefpoVa68m/LQU1I/mE8rGt4fNYGgNuCcK+aG8P8P43nbeJ2RqJMOL/Y1A==",
+      "dev": true,
+      "dependencies": {
+        "assert": "^2.0.0",
+        "browserify-zlib": "^0.2.0",
+        "buffer": "^6.0.3",
+        "console-browserify": "^1.2.0",
+        "constants-browserify": "^1.0.0",
+        "crypto-browserify": "^3.12.0",
+        "domain-browser": "^4.22.0",
+        "events": "^3.3.0",
+        "filter-obj": "^2.0.2",
+        "https-browserify": "^1.0.0",
+        "os-browserify": "^0.3.0",
+        "path-browserify": "^1.0.1",
+        "process": "^0.11.10",
+        "punycode": "^2.1.1",
+        "querystring-es3": "^0.2.1",
+        "readable-stream": "^4.0.0",
+        "stream-browserify": "^3.0.0",
+        "stream-http": "^3.2.0",
+        "string_decoder": "^1.3.0",
+        "timers-browserify": "^2.0.12",
+        "tty-browserify": "^0.0.1",
+        "type-fest": "^2.14.0",
+        "url": "^0.11.0",
+        "util": "^0.12.4",
+        "vm-browserify": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "webpack": ">=5"
+      }
+    },
+    "node_modules/node-polyfill-webpack-plugin/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "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.2.1"
+      }
+    },
+    "node_modules/node-polyfill-webpack-plugin/node_modules/filter-obj": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-2.0.2.tgz",
+      "integrity": "sha512-lO3ttPjHZRfjMcxWKb1j1eDhTFsu4meeR3lnMcnBFhk6RuLhvEiuALu2TlfL310ph4lCYYwgF/ElIjdP739tdg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/node-polyfill-webpack-plugin/node_modules/readable-stream": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.4.0.tgz",
+      "integrity": "sha512-kDMOq0qLtxV9f/SQv522h8cxZBqNZXuXNyjyezmfAAuribMyVXziljpQ/uQhfE1XLg2/TLTW2DsnoE4VAi/krg==",
+      "dev": true,
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/node-polyfill-webpack-plugin/node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.11.tgz",
@@ -16859,6 +17587,87 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/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/ora/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/ora/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/ora/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/os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
+      "dev": true
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -16914,9 +17723,9 @@
       }
     },
     "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==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
     "node_modules/param-case": {
@@ -16940,6 +17749,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "dev": true,
+      "dependencies": {
+        "asn1.js": "^5.2.0",
+        "browserify-aes": "^1.0.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -16957,6 +17779,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -17029,11 +17861,27 @@
       }
     },
     "node_modules/pathe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
-      "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
+      "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/pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "dev": true,
+      "dependencies": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -17135,9 +17983,9 @@
       }
     },
     "node_modules/pirates": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
-      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
       "dev": true,
       "engines": {
         "node": ">= 6"
@@ -17254,255 +18102,6 @@
         "postcss": "^8.4.21"
       }
     },
-    "node_modules/postcss-loader": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
-      "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==",
-      "dev": true,
-      "dependencies": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.4"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "postcss": "^7.0.0 || ^8.0.1",
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/postcss-loader/node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/postcss-loader/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/postcss-loader/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/postcss-loader/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
-    "node_modules/postcss-modules-extract-imports": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
-      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
-      "dev": true,
-      "dependencies": {
-        "postcss": "^7.0.5"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss-modules-extract-imports/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/postcss-modules-extract-imports/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/postcss-modules-extract-imports/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss-modules-local-by-default": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
-      "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^4.1.1",
-        "postcss": "^7.0.32",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss-modules-local-by-default/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/postcss-modules-local-by-default/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/postcss-modules-local-by-default/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss-modules-scope": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
-      "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
-      "dev": true,
-      "dependencies": {
-        "postcss": "^7.0.6",
-        "postcss-selector-parser": "^6.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss-modules-scope/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/postcss-modules-scope/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/postcss-modules-scope/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss-modules-values": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
-      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^4.0.0",
-        "postcss": "^7.0.6"
-      }
-    },
-    "node_modules/postcss-modules-values/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/postcss-modules-values/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/postcss-modules-values/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/postcss-nested": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
@@ -17814,6 +18413,34 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "dev": true,
+      "dependencies": {
+        "bn.js": "^4.1.0",
+        "browserify-rsa": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "parse-asn1": "^5.0.0",
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "node_modules/public-encrypt/node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+      "dev": true
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -17981,6 +18608,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -18054,6 +18690,16 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -18358,9 +19004,9 @@
       }
     },
     "node_modules/react-inspector": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.1.tgz",
-      "integrity": "sha512-cxKSeFTf7jpSSVddm66sKdolG90qURAX3g1roTeaN6x0YEbtWc8JpmFN9+yIqLNH2uEkYerWLtJZIXRIFuBKrg==",
+      "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"
@@ -19131,6 +19777,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -19325,6 +19984,14 @@
         }
       }
     },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -19481,6 +20148,12 @@
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
       "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -19550,9 +20223,9 @@
       }
     },
     "node_modules/sharp/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -19876,12 +20549,12 @@
       "dev": true
     },
     "node_modules/storybook": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.0.12.tgz",
-      "integrity": "sha512-HKi7NQQTZhBGEU3KUFxTNGtIZcG8+hokiO5TwcIr7s7smAVKdvj9vY5YGsVkiWF39o+5UtafW1B/i9D8lBFsYg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.0.23.tgz",
+      "integrity": "sha512-eko4DZ6lheJZCsL55RJhYksXX3UWgdO6rkR52pmfhCjlitxf07We+lEuzVou8+HLg8jnSqLi2GIzDKh+hBS4og==",
       "dev": true,
       "dependencies": {
-        "@storybook/cli": "7.0.12"
+        "@storybook/cli": "7.0.23"
       },
       "bin": {
         "sb": "index.js",
@@ -19893,17 +20566,17 @@
       }
     },
     "node_modules/storybook-dark-mode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-2.1.1.tgz",
-      "integrity": "sha512-Ops6u/htODxIUXnAYASttqcbd2PRN723o0uIKpoYQn1+so2g6gYalpAhuysxnRhCG8yHsm6NJuX5drzzI+uFvQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-3.0.0.tgz",
+      "integrity": "sha512-aeAvqP/mmdccEiCsvx6aw3M0i7mZSiXROsrAsEQN8vl1lAg3FZN+y3Xu/f+ye59wLMRuKJC/JBp7E3/H7vLBRQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "^6.5.14",
-        "@storybook/api": "^6.5.14",
-        "@storybook/components": "^6.5.14",
-        "@storybook/core-events": "^6.5.14",
+        "@storybook/addons": "^7.0.0",
+        "@storybook/api": "^7.0.0",
+        "@storybook/components": "^7.0.0",
+        "@storybook/core-events": "^7.0.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/theming": "^6.5.14",
+        "@storybook/theming": "^7.0.0",
         "fast-deep-equal": "^3.1.3",
         "memoizerific": "^1.11.3"
       },
@@ -19920,196 +20593,72 @@
         }
       }
     },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/addons": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz",
-      "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==",
+    "node_modules/stream-browserify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
+      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
       "dev": true,
       "dependencies": {
-        "@storybook/api": "6.5.16",
-        "@storybook/channels": "6.5.16",
-        "@storybook/client-logger": "6.5.16",
-        "@storybook/core-events": "6.5.16",
-        "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.16",
-        "@storybook/theming": "6.5.16",
-        "@types/webpack-env": "^1.16.0",
-        "core-js": "^3.8.2",
-        "global": "^4.4.0",
-        "regenerator-runtime": "^0.13.7"
-      },
-      "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"
+        "inherits": "~2.0.4",
+        "readable-stream": "^3.5.0"
       }
     },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/api": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz",
-      "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==",
+    "node_modules/stream-browserify/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "6.5.16",
-        "@storybook/client-logger": "6.5.16",
-        "@storybook/core-events": "6.5.16",
-        "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.16",
-        "@storybook/semver": "^7.3.2",
-        "@storybook/theming": "6.5.16",
-        "core-js": "^3.8.2",
-        "fast-deep-equal": "^3.1.3",
-        "global": "^4.4.0",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3",
-        "regenerator-runtime": "^0.13.7",
-        "store2": "^2.12.0",
-        "telejson": "^6.0.8",
-        "ts-dedent": "^2.0.0",
-        "util-deprecate": "^1.0.2"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.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"
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/channels": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz",
-      "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==",
+    "node_modules/stream-browserify/node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "dev": true,
       "dependencies": {
-        "core-js": "^3.8.2",
-        "ts-dedent": "^2.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+        "safe-buffer": "~5.2.0"
       }
     },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/client-logger": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz",
-      "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==",
+    "node_modules/stream-http": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-3.2.0.tgz",
+      "integrity": "sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==",
       "dev": true,
       "dependencies": {
-        "core-js": "^3.8.2",
-        "global": "^4.4.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+        "builtin-status-codes": "^3.0.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "xtend": "^4.0.2"
       }
     },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/components": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.16.tgz",
-      "integrity": "sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==",
+    "node_modules/stream-http/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "6.5.16",
-        "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.16",
-        "core-js": "^3.8.2",
-        "memoizerific": "^1.11.3",
-        "qs": "^6.10.0",
-        "regenerator-runtime": "^0.13.7",
-        "util-deprecate": "^1.0.2"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.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"
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/core-events": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz",
-      "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==",
+    "node_modules/stream-http/node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "dev": true,
       "dependencies": {
-        "core-js": "^3.8.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/csf": {
-      "version": "0.0.2--canary.4566f4d.1",
-      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-      "integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.15"
-      }
-    },
-    "node_modules/storybook-dark-mode/node_modules/@storybook/router": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz",
-      "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/client-logger": "6.5.16",
-        "core-js": "^3.8.2",
-        "memoizerific": "^1.11.3",
-        "qs": "^6.10.0",
-        "regenerator-runtime": "^0.13.7"
-      },
-      "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-dark-mode/node_modules/@storybook/theming": {
-      "version": "6.5.16",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
-      "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/client-logger": "6.5.16",
-        "core-js": "^3.8.2",
-        "memoizerific": "^1.11.3",
-        "regenerator-runtime": "^0.13.7"
-      },
-      "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-dark-mode/node_modules/telejson": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-      "integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-      "dev": true,
-      "dependencies": {
-        "@types/is-function": "^1.0.0",
-        "global": "^4.4.0",
-        "is-function": "^1.0.2",
-        "is-regex": "^1.1.2",
-        "is-symbol": "^1.0.3",
-        "isobject": "^4.0.0",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3"
+        "safe-buffer": "~5.2.0"
       }
     },
     "node_modules/stream-shift": {
@@ -20277,58 +20826,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/style-loader": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
-      "integrity": "sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^2.7.0"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/style-loader/node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/style-loader/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/style-to-object": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz",
@@ -20946,6 +21443,18 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "dev": true,
+      "dependencies": {
+        "setimmediate": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
@@ -21189,6 +21698,12 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/tty-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
+      "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==",
+      "dev": true
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -21497,9 +22012,9 @@
       }
     },
     "node_modules/unplugin/node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
+      "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -21556,6 +22071,22 @@
         "punycode": "^2.1.0"
       }
     },
+    "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/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-callback-ref": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
@@ -21784,6 +22315,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
+      "dev": true
+    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -21814,6 +22351,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -21924,9 +22470,9 @@
       "dev": true
     },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
-      "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
@@ -21943,9 +22489,9 @@
       }
     },
     "node_modules/webpack-hot-middleware": {
-      "version": "2.25.3",
-      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.3.tgz",
-      "integrity": "sha512-IK/0WAHs7MTu1tzLTjio73LjS3Ov+VvBKQmE8WPlJutgG5zT6Urgq/BbAdRrHTRpyzK0dvAvFh1Qg98akxgZpA==",
+      "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",
@@ -22079,18 +22625,6 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
-    "node_modules/widest-line": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
-      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -22297,17 +22831,17 @@
       }
     },
     "@babel/code-frame": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
-      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
+      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
       "requires": {
-        "@babel/highlight": "^7.18.6"
+        "@babel/highlight": "^7.22.5"
       }
     },
     "@babel/compat-data": {
-      "version": "7.21.9",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.9.tgz",
-      "integrity": "sha512-FUGed8kfhyWvbYug/Un/VPJD41rDIgoVVcR+FuzhzOYyRz5uED+Gd3SLZml0Uw2l2aHFb7ZgdW5mGA3G2cCCnQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz",
+      "integrity": "sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==",
       "dev": true
     },
     "@babel/core": {
@@ -22345,11 +22879,23 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
-      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+      "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"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -22362,42 +22908,42 @@
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz",
-      "integrity": "sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz",
+      "integrity": "sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.21.5",
-        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/compat-data": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.5",
         "browserslist": "^4.21.3",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.0"
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.21.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.8.tgz",
-      "integrity": "sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.5.tgz",
+      "integrity": "sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-environment-visitor": "^7.21.5",
-        "@babel/helper-function-name": "^7.21.0",
-        "@babel/helper-member-expression-to-functions": "^7.21.5",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.21.5",
-        "@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.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.5",
         "semver": "^6.3.0"
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.21.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.8.tgz",
-      "integrity": "sha512-zGuSdedkFtsFHGbexAvNuipg1hbtitDLo2XE8/uf6Y9sOQV1xsYX/2pNbtedp/X0eU1pIt+kGvaqHCowkRbS5g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.5.tgz",
+      "integrity": "sha512-1VpEFOIbMRaXyDeUwUfmTIxExLwQ+zkW+Bh5zXpApA3oQedBx9v/updixWxnx/bZpKw7u8VxWjb/qWpIcmPq8A==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-annotate-as-pure": "^7.22.5",
         "regexpu-core": "^5.3.1",
         "semver": "^6.3.0"
       }
@@ -22417,42 +22963,91 @@
       }
     },
     "@babel/helper-environment-visitor": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz",
-      "integrity": "sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ=="
+      "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"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "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"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz",
-      "integrity": "sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.21.5"
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
-      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+      "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.21.4"
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-module-transforms": {
@@ -22472,44 +23067,119 @@
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
-      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
-      "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
       "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
-      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.5.tgz",
+      "integrity": "sha512-cU0Sq1Rf4Z55fgz7haOakIyM7+x/uCFwXpLPaeRzfoUtAEAuUZjZvFPjL/rk5rW693dIgn2hng1W7xbT7lWT4g==",
       "dev": true,
       "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.5",
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz",
-      "integrity": "sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.5.tgz",
+      "integrity": "sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.21.5",
-        "@babel/helper-member-expression-to-functions": "^7.21.5",
-        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/template": "^7.20.7",
-        "@babel/traverse": "^7.21.5",
-        "@babel/types": "^7.21.5"
+        "@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/template": "^7.22.5",
+        "@babel/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
+          "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+          "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
+          "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/generator": "^7.22.5",
+            "@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.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-simple-access": {
@@ -22522,48 +23192,122 @@
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
-      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.20.0"
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
+      "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
-      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w=="
+      "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",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
+      "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.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
-      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
+      "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==",
       "dev": true
     },
     "@babel/helper-wrap-function": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
-      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.5.tgz",
+      "integrity": "sha512-bYqLIBSEshYcYQyfks8ewYA8S30yaGSeRslcvKMvoUk6HHPySbxHq9YRi6ghhzEU+yhQv9bP/jXnygkStOcqZw==",
       "dev": true,
       "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/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
+          "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+          "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
+          "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/generator": "^7.22.5",
+            "@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.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helpers": {
@@ -22578,11 +23322,11 @@
       }
     },
     "@babel/highlight": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
+      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.22.5",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       }
@@ -22593,23 +23337,23 @@
       "integrity": "sha512-q5PNg/Bi1OpGgx5jYlvWZwAorZepEudDMCLtj967aeS7WMont7dUZI46M2XwcIQqvUlMxWfdLFu4S/qSxeUu5g=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.18.6",
-      "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.18.6.tgz",
-      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "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==",
       "dev": true,
       "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",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
-      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
+      "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==",
       "dev": true,
       "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": {
@@ -22826,12 +23570,12 @@
       }
     },
     "@babel/plugin-syntax-flow": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.21.4.tgz",
-      "integrity": "sha512-l9xd3N+XG4fZRxEP3vXdK6RW7vN1Uf5dxzRC/09wV86wqZ/YYQooBIGNsiRdfNR3/q2/5pPzV4B54J/9ctX5jw==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-syntax-import-assertions": {
@@ -22862,12 +23606,12 @@
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz",
-      "integrity": "sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-syntax-logical-assignment-operators": {
@@ -22961,14 +23705,14 @@
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
-      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
+      "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==",
       "dev": true,
       "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/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": {
@@ -22990,19 +23734,19 @@
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
-      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.5.tgz",
+      "integrity": "sha512-2edQhLfibpWpsVBx2n/GKOz6JdGQvLruZQfGr9l1qes2KQaWswjBzhQF7UDUZMNaMMQeYnQzxwOMPsbYF7wqPQ==",
       "dev": true,
       "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.21.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-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@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.5",
         "globals": "^11.1.0"
       }
     },
@@ -23055,13 +23799,13 @@
       }
     },
     "@babel/plugin-transform-flow-strip-types": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.21.0.tgz",
-      "integrity": "sha512-FlFA2Mj87a6sDkW4gfGrQQqwY/dLlBAyJa2dJEZ+FHXUVHBflO2wyKvg+OOEzXfrKYIa4HWl0mgmbCzt0cMb7w==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@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": {
@@ -23074,14 +23818,14 @@
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
-      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "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==",
       "dev": true,
       "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-literals": {
@@ -23146,13 +23890,13 @@
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
-      "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
+      "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==",
       "dev": true,
       "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": {
@@ -23174,6 +23918,17 @@
         "@babel/helper-replace-supers": "^7.18.6"
       }
     },
+    "@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.5.tgz",
+      "integrity": "sha512-AconbMKOMkyG+xCng2JogMCDcqW8wedQAqpVIL4cOSescZ7+iW8utC6YDZLMCSUIReEA733gzRSaOSXMAt/4WQ==",
+      "dev": true,
+      "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.21.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz",
@@ -23193,44 +23948,57 @@
       }
     },
     "@babel/plugin-transform-react-display-name": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz",
-      "integrity": "sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
     "@babel/plugin-transform-react-jsx": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.5.tgz",
-      "integrity": "sha512-ELdlq61FpoEkHO6gFRpfj0kUgSwQTGoaEU8eMRoS8Dv3v6e7BjEAj5WMtIBRdHUeAioMhKP5HyxNzNnP+heKbA==",
+      "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==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-module-imports": "^7.21.4",
-        "@babel/helper-plugin-utils": "^7.21.5",
-        "@babel/plugin-syntax-jsx": "^7.21.4",
-        "@babel/types": "^7.21.5"
+        "@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"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-react-jsx-development": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz",
-      "integrity": "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==",
+      "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-pure-annotations": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz",
-      "integrity": "sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==",
+      "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": {
@@ -23253,17 +24021,63 @@
       }
     },
     "@babel/plugin-transform-runtime": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz",
-      "integrity": "sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.5.tgz",
+      "integrity": "sha512-bg4Wxd1FWeFx3daHFTWk1pkSWK/AyQuiyAoeZAOkAOUBjnZPH6KT7eMxouV47tQ6hl6ax2zyAWBdWZXbrvXlaw==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.21.4",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "babel-plugin-polyfill-corejs2": "^0.3.3",
-        "babel-plugin-polyfill-corejs3": "^0.6.0",
-        "babel-plugin-polyfill-regenerator": "^0.4.1",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "babel-plugin-polyfill-corejs2": "^0.4.3",
+        "babel-plugin-polyfill-corejs3": "^0.8.1",
+        "babel-plugin-polyfill-regenerator": "^0.5.0",
         "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz",
+          "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-compilation-targets": "^7.17.7",
+            "@babel/helper-plugin-utils": "^7.16.7",
+            "debug": "^4.1.1",
+            "lodash.debounce": "^4.0.8",
+            "resolve": "^1.14.2",
+            "semver": "^6.1.2"
+          }
+        },
+        "babel-plugin-polyfill-corejs2": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
+          "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.17.7",
+            "@babel/helper-define-polyfill-provider": "^0.4.0",
+            "semver": "^6.1.1"
+          }
+        },
+        "babel-plugin-polyfill-corejs3": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz",
+          "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.4.0",
+            "core-js-compat": "^3.30.1"
+          }
+        },
+        "babel-plugin-polyfill-regenerator": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz",
+          "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.4.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
@@ -23428,14 +24242,14 @@
       }
     },
     "@babel/preset-flow": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.21.4.tgz",
-      "integrity": "sha512-F24cSq4DIBmhq4OzK3dE63NHagb27OPE3eWR+HLekt4Z3Y5MzIIUGF3LlLgV0gN8vzbDViSY7HnrReNVCJXTeA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.22.5.tgz",
+      "integrity": "sha512-ta2qZ+LSiGCrP5pgcGt8xMnnkXQrq8Sa4Ulhy06BOlF5QbLw9q5hIx7bn5MrsvyTGAfh6kTOo07Q+Pfld/8Y5Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-option": "^7.21.0",
-        "@babel/plugin-transform-flow-strip-types": "^7.21.0"
+        "@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": {
@@ -23452,17 +24266,17 @@
       }
     },
     "@babel/preset-react": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.18.6.tgz",
-      "integrity": "sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==",
+      "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": {
@@ -23479,9 +24293,9 @@
       }
     },
     "@babel/register": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.21.0.tgz",
-      "integrity": "sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.22.5.tgz",
+      "integrity": "sha512-vV6pm/4CijSQ8Y47RH5SopXzursN35RQINfGJkmOlcpAtGuf94miFvIPhCKGQN7WGIcsgG1BHEX2KVdTYwTwUQ==",
       "dev": true,
       "requires": {
         "clone-deep": "^4.0.1",
@@ -23593,13 +24407,30 @@
       }
     },
     "@babel/template": {
-      "version": "7.21.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
-      "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
       "requires": {
-        "@babel/code-frame": "^7.21.4",
-        "@babel/parser": "^7.21.9",
-        "@babel/types": "^7.21.5"
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+          "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q=="
+        },
+        "@babel/types": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+          "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.22.5",
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/traverse": {
@@ -24425,9 +25256,9 @@
       }
     },
     "@ndelangen/get-tarball": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.7.tgz",
-      "integrity": "sha512-NqGfTZIZpRFef1GoVaShSSRwDC3vde3ThtTeqFdcYd6ipKqnfEVhjK2hUeHjCQUcptyZr2TONqcloFXM+5QBrQ==",
+      "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",
@@ -24441,9 +25272,9 @@
       "integrity": "sha512-H/69Lc5Q02dq3o+dxxy5O/oNxFsZpdL6WREtOOtOM1B/weonIwDXkekr1KV5DPVPr12IHFPrMrcJQ6bgPMfn7A=="
     },
     "@next/eslint-plugin-next": {
-      "version": "13.4.3",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.3.tgz",
-      "integrity": "sha512-5B0uOnh7wyUY9vNNdIA6NUvWozhrZaTMZOzdirYAefqD0ZBK5C/h3+KMYdCKrR7JrXGvVpWnHtv54b3dCzwICA==",
+      "version": "13.4.7",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.7.tgz",
+      "integrity": "sha512-ANEPltxzXbyyG7CvqxdY4PmeM5+RyWdAJGufTHnU+LA/i3J6IDV2r8Z4onKwskwKEhwqzz5lMaSYGGXLyHX+mg==",
       "dev": true,
       "requires": {
         "glob": "7.1.7"
@@ -25317,19 +26148,19 @@
       "dev": true
     },
     "@storybook/addon-actions": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.0.12.tgz",
-      "integrity": "sha512-f07Mc3qwcG9heGsuUUTIJbWF2nw/Ite3mvyIZY2VbgwhMUMVHj4knY4fh/LojwcUmmmc7CNZu3sJN/wIqpaHCQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.0.23.tgz",
+      "integrity": "sha512-xsLUZez6fzHc+be8BypVO5aA7kjeH9jymLAib68SSQoF0GQry7mb/fhumifQno2BKfCyCw++lYqLHzwV0EISxg==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
         "polished": "^4.2.2",
@@ -25349,65 +26180,65 @@
       }
     },
     "@storybook/addon-backgrounds": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.0.12.tgz",
-      "integrity": "sha512-sAZSxsbj3CcabowALKTafpdnqXMBZB8C42s4Uxv11FCP50GqrP8jp2TqsIiDZxUbeXwI094W/gHnw41MSphG8Q==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.0.23.tgz",
+      "integrity": "sha512-6zlLKnAbcaBbLgADylhhih7uma4FLisjgUjY/wpPlqhx/9pEWp7tUoYcGkAADnrN97+70g43VxL6mElKnGtZeA==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "memoizerific": "^1.11.3",
         "ts-dedent": "^2.0.0"
       }
     },
     "@storybook/addon-controls": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.0.12.tgz",
-      "integrity": "sha512-/+yBhswN1N7ttR1NGN94HE/25VELm4YuBtrkh+LJeKP/eQ5CZpLjexASN2GZcfmdnkwIYZAEH0X/AImLaCJAWA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.0.23.tgz",
+      "integrity": "sha512-G6DQwaLCqxnDtiG5qtnJWLD3MkMYjC0Ki9uye5kXCIoPcM52NV1/NQQtfhvzFpwNX3QiQvo7Za2g7/RLhd2z5w==",
       "dev": true,
       "requires": {
-        "@storybook/blocks": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/blocks": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "lodash": "^4.17.21",
         "ts-dedent": "^2.0.0"
       }
     },
     "@storybook/addon-docs": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.0.12.tgz",
-      "integrity": "sha512-zgg4sq34Zz8TN74+kSogxRHsIZ5gsIazJpa0osZp91nJQvsKUEfldjBtQWbBWzjVCrWmzOhW5/RLCnmCNm9y/w==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.0.23.tgz",
+      "integrity": "sha512-BD4F5uCE4VND5Z3UQ9xF+q3qy6MHTxTMgNMVfcBc4TM8gCuFyuuiOl0sxW3Ap6YdWEFfvzE822RGMk5IlD6UWA==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.20.2",
         "@babel/plugin-transform-react-jsx": "^7.19.0",
         "@jest/transform": "^29.3.1",
         "@mdx-js/react": "^2.1.5",
-        "@storybook/blocks": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/csf-plugin": "7.0.12",
-        "@storybook/csf-tools": "7.0.12",
+        "@storybook/blocks": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/csf-plugin": "7.0.23",
+        "@storybook/csf-tools": "7.0.23",
         "@storybook/global": "^5.0.0",
         "@storybook/mdx2-csf": "^1.0.0",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/postinstall": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/react-dom-shim": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/postinstall": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/react-dom-shim": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "fs-extra": "^11.1.0",
         "remark-external-links": "^8.0.0",
         "remark-slug": "^6.0.0",
@@ -25415,260 +26246,342 @@
       }
     },
     "@storybook/addon-essentials": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.0.12.tgz",
-      "integrity": "sha512-Js2cxvauAf8fkA5D0QrqPPe/FvpY1DbJp61VNGh82Xu0zZrczCGYP3jkWG79vl0zllJNs7hnkV8W6xY1JWgLoA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.0.23.tgz",
+      "integrity": "sha512-t4ChTrsd+ctKjmhy6TLsOPmPPzkPjCSP3yVDSW8pOzHsSxfFUa7qSu89Kb9zYrwEDwXxiAie1KIRZE3smUeD0A==",
       "dev": true,
       "requires": {
-        "@storybook/addon-actions": "7.0.12",
-        "@storybook/addon-backgrounds": "7.0.12",
-        "@storybook/addon-controls": "7.0.12",
-        "@storybook/addon-docs": "7.0.12",
-        "@storybook/addon-highlight": "7.0.12",
-        "@storybook/addon-measure": "7.0.12",
-        "@storybook/addon-outline": "7.0.12",
-        "@storybook/addon-toolbars": "7.0.12",
-        "@storybook/addon-viewport": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
+        "@storybook/addon-actions": "7.0.23",
+        "@storybook/addon-backgrounds": "7.0.23",
+        "@storybook/addon-controls": "7.0.23",
+        "@storybook/addon-docs": "7.0.23",
+        "@storybook/addon-highlight": "7.0.23",
+        "@storybook/addon-measure": "7.0.23",
+        "@storybook/addon-outline": "7.0.23",
+        "@storybook/addon-toolbars": "7.0.23",
+        "@storybook/addon-viewport": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
         "ts-dedent": "^2.0.0"
       }
     },
     "@storybook/addon-highlight": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.0.12.tgz",
-      "integrity": "sha512-ccIsBVjUlZ7cM1adSSFTqqWXiELPdDqfZLz4dWfDbiLyG3InC953ugtvoUWCIZpC2OOnjVLpF7Rbshq2O/QoMw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.0.23.tgz",
+      "integrity": "sha512-/qO4VM8CeoUG3ivgki4FtJyEMRzLxJFkeWETaUegReh+n6uaOUeYrJYZr5ES/k0Ily0HikQYdkn/m7JZGQ6VIw==",
       "dev": true,
       "requires": {
-        "@storybook/core-events": "7.0.12",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/preview-api": "7.0.23"
       }
     },
     "@storybook/addon-interactions": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.12.tgz",
-      "integrity": "sha512-Rb1mv1RQrTd3sA/WwNTdv00rW+7APfvZEeZks6+8+kS1C4EFMDmLnVBZlPllFdo1BOnTCyer4GZZ5ncVkWNLyQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.23.tgz",
+      "integrity": "sha512-NBI7ejUO/YmjQRRRopD3tuA+87fq5BRwTINbs17AkaEjO84xQ+G1rTixQZ18PkLpO65OlmuDeGIrbfbt8hrmcA==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/instrumenter": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "jest-mock": "^27.0.6",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
       }
     },
     "@storybook/addon-links": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.0.12.tgz",
-      "integrity": "sha512-6kGClsIpX9dRKc5bUAPNcp/4wlgPIxMrieUV+6k1dTsRQqbaEfxih/Fq259D5+yVBDNi3YAnvRjMiIibl8fa5A==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.0.23.tgz",
+      "integrity": "sha512-e95Y7oVCjsECh8XEs6+SWZtUz+cfUDNuF1mty4/6/d03H8HraWXgUSOfTRhRj+Q076CNcIh7IcqqNgeMxvGdKA==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/router": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/router": "7.0.23",
+        "@storybook/types": "7.0.23",
         "prop-types": "^15.7.2",
         "ts-dedent": "^2.0.0"
       }
     },
     "@storybook/addon-measure": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.0.12.tgz",
-      "integrity": "sha512-Uq9cj9QmN7WKBQ6wqeneFmTqo1UQKXIc4CpGBEtJtfsYNLsERrVzOs/tRUf66Zl3lWgfFZxs1B5Ij6RDsYEjRw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.0.23.tgz",
+      "integrity": "sha512-j0HrykvDdUgjjGjZimtp21cPQuYcOOrq21QijYts4t+hk0xfW396e6ZAUyFK24+oXaPkQBHdlApFHKYAP+p8Eg==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12"
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23"
       }
     },
     "@storybook/addon-outline": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.0.12.tgz",
-      "integrity": "sha512-eZPkm3mECdqx1EDJ0S6DAzZ9WZLPIsZH7fRy6vdJJuAgvnOSzkt7AEpA0hlgiNyXcFpE1Cav6/g12FUf4Zo82g==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.0.23.tgz",
+      "integrity": "sha512-NQsmHaAnqAH0Lus+54s3702491APXmDgKjiaIBgBKhoJt5cLiJ7er6nvGA1ntAgU7FCMrTMZaoV7UDnO45K9vg==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23",
         "ts-dedent": "^2.0.0"
       }
     },
-    "@storybook/addon-postcss": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz",
-      "integrity": "sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==",
+    "@storybook/addon-styling": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-styling/-/addon-styling-1.3.0.tgz",
+      "integrity": "sha512-+Ak9+SysMepRdXGlqDBlhR4cOSDCFEIfGuOW7nyA5eOgHi0IyTg9M+yfBgHVru7dEh+rq47XTVr44UhsWd4xgA==",
       "dev": true,
       "requires": {
-        "@storybook/node-logger": "^6.1.14",
-        "css-loader": "^3.6.0",
-        "postcss": "^7.0.35",
-        "postcss-loader": "^4.2.0",
-        "style-loader": "^1.3.0"
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.5",
+        "@storybook/api": "^7.0.12",
+        "@storybook/components": "^7.0.12",
+        "@storybook/core-common": "^7.0.12",
+        "@storybook/core-events": "^7.0.12",
+        "@storybook/csf-tools": "^7.0.12",
+        "@storybook/manager-api": "^7.0.12",
+        "@storybook/node-logger": "^7.0.12",
+        "@storybook/preview-api": "^7.0.12",
+        "@storybook/theming": "^7.0.12",
+        "@storybook/types": "^7.0.12",
+        "css-loader": "^6.7.3",
+        "less-loader": "^11.1.0",
+        "postcss-loader": "^7.2.4",
+        "recast": "^0.23.2",
+        "resolve-url-loader": "^5.0.0",
+        "sass-loader": "^13.2.2",
+        "style-loader": "^3.3.2"
       },
       "dependencies": {
-        "@storybook/node-logger": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.16.tgz",
-          "integrity": "sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg==",
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
+        "cosmiconfig": {
+          "version": "8.2.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
+          "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
           "dev": true,
           "requires": {
-            "@types/npmlog": "^4.1.2",
-            "chalk": "^4.1.0",
-            "core-js": "^3.8.2",
-            "npmlog": "^5.0.1",
-            "pretty-hrtime": "^1.0.3"
+            "import-fresh": "^3.2.1",
+            "js-yaml": "^4.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0"
           }
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+        "css-loader": {
+          "version": "6.8.1",
+          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+          "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
           "dev": true,
           "requires": {
-            "color-convert": "^2.0.1"
+            "icss-utils": "^5.1.0",
+            "postcss": "^8.4.21",
+            "postcss-modules-extract-imports": "^3.0.0",
+            "postcss-modules-local-by-default": "^4.0.3",
+            "postcss-modules-scope": "^3.0.0",
+            "postcss-modules-values": "^4.0.0",
+            "postcss-value-parser": "^4.2.0",
+            "semver": "^7.3.8"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+        "icss-utils": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+          "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+          "dev": true,
+          "requires": {}
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
           "dev": true,
           "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
+            "argparse": "^2.0.1"
           }
         },
-        "has-flag": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "postcss-loader": {
+          "version": "7.3.3",
+          "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz",
+          "integrity": "sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==",
+          "dev": true,
+          "requires": {
+            "cosmiconfig": "^8.2.0",
+            "jiti": "^1.18.2",
+            "semver": "^7.3.8"
+          }
+        },
+        "postcss-modules-extract-imports": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+          "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+          "dev": true,
+          "requires": {}
+        },
+        "postcss-modules-local-by-default": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+          "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^5.0.0",
+            "postcss-selector-parser": "^6.0.2",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "postcss-modules-scope": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+          "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+          "dev": true,
+          "requires": {
+            "postcss-selector-parser": "^6.0.4"
+          }
+        },
+        "postcss-modules-values": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+          "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
           "dev": true,
           "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
+            "icss-utils": "^5.0.0"
           }
         },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "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==",
+        "sass-loader": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz",
+          "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==",
           "dev": true,
           "requires": {
-            "has-flag": "^4.0.0"
+            "neo-async": "^2.6.2"
           }
+        },
+        "semver": {
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "style-loader": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
+          "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
+          "dev": true,
+          "requires": {}
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
         }
       }
     },
     "@storybook/addon-toolbars": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.0.12.tgz",
-      "integrity": "sha512-7xRxk+999NVdEwzn2z1O9Tg5iuUSEXQ5jo+hiyK934VvuyqUsZnflKbSvwVEHb2W+DroaaXu8bdHWxGSH+6moQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.0.23.tgz",
+      "integrity": "sha512-o5X6XY480gmhrRb0aNScMrTbSdizoE7yIvJDuWEe6JCgToKUr0bG7xpa8OpOYcC17yIz69eRwqZjhqDRv57nQQ==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23"
       }
     },
     "@storybook/addon-viewport": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.0.12.tgz",
-      "integrity": "sha512-pMgqtDQF8e9AErnRKbbSK9m1lcKn1dFSOkk0PgSBwIIjmha6q+GeT45EHQrQGtkLdtWT0iTktC8ivzIiGKmHkg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.0.23.tgz",
+      "integrity": "sha512-xeSFieRZNKwj44qMKEheQ9staEc+rvlwLeVaSfJHviLOr8Jq8sn6aWZr/1rn9YwT50H/s1o+Kt1h0jDOLQANyw==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
         "memoizerific": "^1.11.3",
         "prop-types": "^15.7.2"
       }
     },
     "@storybook/addons": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.0.12.tgz",
-      "integrity": "sha512-yVADbWCFdb12cSpspeb+/6lfTNarPtZZLql49Bhu6E7PxECw/Q3kfHu0LXBLcSnU7f4QqQvQjp88ultt01ABBQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.0.23.tgz",
+      "integrity": "sha512-o+bw63OYDLWAd8VC4ebwU4o+QS58ETV5n52exlOQ1RzvEkbejtlzkxB+5oDndnfUIHYXRvgXleFo+d1KNxOJRw==",
       "dev": true,
       "requires": {
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12"
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23"
       }
     },
     "@storybook/api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.0.12.tgz",
-      "integrity": "sha512-wki9B7ZXOGwUq/FowDgEnkkX92oNpSg/6ES5Rh19NF3wV0ObLlgXMZ8cZKOLM6G0m/8lkKHGeNBunaLUnX7Yhw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-7.0.23.tgz",
+      "integrity": "sha512-OgEYdwk2XpiP04V9U2PWeG6SPxeYSPZUwhtsUylMePff9icOTXNJwb87lFBDxPEdMPEYOVIPFHy30dAHTaOIyQ==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/manager-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/manager-api": "7.0.23"
       }
     },
     "@storybook/blocks": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.0.12.tgz",
-      "integrity": "sha512-MbJKjuTJ7xVbkUVwkEwb6vTYGrkRk4+Xtx1UGo+512o91ubqFs8hXwCHP+x/49RCIIQs5zl93Ig8fTtm+MejWw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.0.23.tgz",
+      "integrity": "sha512-yhdff1m+SY90g+52745h/x6r0uDwKHoMffhjttKTSSKhsHOnvHCaslpPBHsxDxsPNGLrjUT+ueK/GSwKJUJmLA==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
-        "@storybook/docs-tools": "7.0.12",
+        "@storybook/docs-tools": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/lodash": "^4.14.167",
         "color-convert": "^2.0.1",
         "dequal": "^2.0.2",
@@ -25683,15 +26596,15 @@
       }
     },
     "@storybook/builder-manager": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.0.12.tgz",
-      "integrity": "sha512-bkZPSDH38/dUSsO087oQ8+goyaEDP/xD0/O61QcQ8EbaVeT6s6Qt7mMhqsLrtmEZHvPMQwKeIXhOJlRNNXB+SA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.0.23.tgz",
+      "integrity": "sha512-um0+fhOX9ai25YMuMEDzFKSZDzYKof2e/DKPOziZoxUeDuJasiAX/i4CChLqkk94NJKQXB/QAFHhbJ0ei/wnxA==",
       "dev": true,
       "requires": {
         "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/manager": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/manager": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
         "@types/ejs": "^3.1.1",
         "@types/find-cache-dir": "^3.2.1",
         "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
@@ -25707,31 +26620,31 @@
       }
     },
     "@storybook/builder-webpack5": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.0.12.tgz",
-      "integrity": "sha512-msrDWgNFu0kkQ8AOuOCqO+Z+b6iB2kNMhpTyreFbZfUwnEv35aXdULeSa/2mCD0/PFUUFZu+cVYflMyENZxe5w==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.0.23.tgz",
+      "integrity": "sha512-bO95e0ioGYSqWaC7/Rv4YNlhwK5bcXSQeqog+BYf5a5neEnbQgAg5/ZjiDsGRk7cw+TFGUiF7d0sQIKTY57OEA==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
-        "@storybook/addons": "7.0.12",
-        "@storybook/api": "7.0.12",
-        "@storybook/channel-postmessage": "7.0.12",
-        "@storybook/channel-websocket": "7.0.12",
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-api": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/components": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-events": "7.0.12",
-        "@storybook/core-webpack": "7.0.12",
+        "@storybook/addons": "7.0.23",
+        "@storybook/api": "7.0.23",
+        "@storybook/channel-postmessage": "7.0.23",
+        "@storybook/channel-websocket": "7.0.23",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-api": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/components": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-events": "7.0.23",
+        "@storybook/core-webpack": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/router": "7.0.12",
-        "@storybook/store": "7.0.12",
-        "@storybook/theming": "7.0.12",
+        "@storybook/manager-api": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/router": "7.0.23",
+        "@storybook/store": "7.0.23",
+        "@storybook/theming": "7.0.23",
         "@types/node": "^16.0.0",
         "@types/semver": "^7.3.4",
         "babel-loader": "^9.0.0",
@@ -25758,21 +26671,21 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.18.32",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-          "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+          "version": "16.18.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+          "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
           "dev": true
         },
         "css-loader": {
-          "version": "6.7.4",
-          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.4.tgz",
-          "integrity": "sha512-0Y5uHtK5BswfaGJ+jrO+4pPg1msFBc0pwPIE1VqfpmVn6YbDfYfXMj8rfd7nt+4goAhJueO+H/I40VWJfcP1mQ==",
+          "version": "6.8.1",
+          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+          "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
           "dev": true,
           "requires": {
             "icss-utils": "^5.1.0",
             "postcss": "^8.4.21",
             "postcss-modules-extract-imports": "^3.0.0",
-            "postcss-modules-local-by-default": "^4.0.1",
+            "postcss-modules-local-by-default": "^4.0.3",
             "postcss-modules-scope": "^3.0.0",
             "postcss-modules-values": "^4.0.0",
             "postcss-value-parser": "^4.2.0",
@@ -25803,9 +26716,9 @@
           "requires": {}
         },
         "postcss-modules-local-by-default": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.1.tgz",
-          "integrity": "sha512-Zr/dB+IlXaEqdoslLHhhqecwj73vc3rDmOpsBNBEVk7P2aqAlz+Ijy0fFbU5Ie9PtreDOIgGa9MsLWakVGl+fA==",
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+          "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
           "dev": true,
           "requires": {
             "icss-utils": "^5.0.0",
@@ -25832,9 +26745,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -25856,55 +26769,54 @@
       }
     },
     "@storybook/channel-postmessage": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.12.tgz",
-      "integrity": "sha512-Tc7kQZ5yxlZ44Nmmzec92JaDJ6UZ3Ze4cBfiHik4XcnM1PtN8hr8VFoC6a2AIm1ybfIRenfT5w9TH5yriiPIhw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.23.tgz",
+      "integrity": "sha512-SfXTV55Z9U5rN1OuyR56s+PUpav3b4SgXtP67bnNsrv7dkKhBwr0DUUJogIRnjmY0Loy/hLvJ23kfmKXPWC4vQ==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.0.3"
       }
     },
     "@storybook/channel-websocket": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-7.0.12.tgz",
-      "integrity": "sha512-UV6b9gX2mQLtXlKaFKCHcy+6MaK2od6BYqSJfainnBjDsMIXyhcf7fJaj0XQkJrbNnRBwGhw+6s8JxL98xp7Ew==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-7.0.23.tgz",
+      "integrity": "sha512-xjY09pOaE5T5TgC41V3fezzqdrL+aPjiW0q4H/CrPF9Oa87hHBZq2dmq1TU5Wd4GFrW/OHqo2rGemS/bXh8mNg==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
         "@storybook/global": "^5.0.0",
         "telejson": "^7.0.3"
       }
     },
     "@storybook/channels": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.12.tgz",
-      "integrity": "sha512-KDdDmDs8kxAJU+vndTqTNazjLO+XoIPiTRlfP7mk7cgHiQXSjMYy3JSCQ7W0of0Q+9VSl/ve9CNbnGbcQF7rNQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.23.tgz",
+      "integrity": "sha512-cCxR3Z84YQjsVMPgFTI+kDVNOlgXSDakwjkNFBznU+s2qhGW5eZt2g9YRDeVDQ6AjR4j4RrGhwddRq4lQZF2pg==",
       "dev": true
     },
     "@storybook/cli": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.0.12.tgz",
-      "integrity": "sha512-OABCRIujxsszIJ0CCpKg8Uj4C1UlAwBpBQhv2aMX3lA/pur6Od524syv2ypWu6J2FyvK/ooeyMbjoP7330cIuA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.0.23.tgz",
+      "integrity": "sha512-6os+7rQN/Bx89bOgx/Ju+n0WXi2BN+eBIyvPJrZ7r5tl389lqL7IKHJFYmQ/FnIzhGvwuUxmoSq5niCt2Hvc3w==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.20.2",
         "@babel/preset-env": "^7.20.2",
         "@ndelangen/get-tarball": "^3.0.7",
-        "@storybook/codemod": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-server": "7.0.12",
-        "@storybook/csf-tools": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/telemetry": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/codemod": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-server": "7.0.23",
+        "@storybook/csf-tools": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/telemetry": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/semver": "^7.3.4",
-        "boxen": "^5.1.2",
         "chalk": "^4.1.0",
         "commander": "^6.2.1",
         "cross-spawn": "^7.0.3",
@@ -25920,6 +26832,7 @@
         "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",
@@ -25974,9 +26887,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -26000,37 +26913,37 @@
       }
     },
     "@storybook/client-api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-7.0.12.tgz",
-      "integrity": "sha512-kcB0wX9+pL9NW8+xFVABFZJeChsql9i2A69yUQQ8OCaJhB7LS3gl1Ri4zJhVHSuTTWBlbNUSPbu1yEkFiAWt/g==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-7.0.23.tgz",
+      "integrity": "sha512-Z2ubbWJXORuhb1Faur3DL5zV8OObanQY7ow506CmEwNKRgy2LVzkBwpm4woEJHgw95sOyGuz3f3xfDP2DC6M7A==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23"
       }
     },
     "@storybook/client-logger": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.12.tgz",
-      "integrity": "sha512-MQMtIgGEgdixvxnBvZ2m8hhc0DGJWeCpHtxg7oqBLBEBmCYFueTqDZHl4Z6SoCrK0a2YS5X/BIXOcEtP1ulMKw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.23.tgz",
+      "integrity": "sha512-L287SRO8EaYOxTpryV7N/1WCL5I1IFs5Naiq3FpybhguUP7F3Si7KWvVdFmSW06K9jNj2IEQ/8zBRM8ra4ttyg==",
       "dev": true,
       "requires": {
         "@storybook/global": "^5.0.0"
       }
     },
     "@storybook/codemod": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.0.12.tgz",
-      "integrity": "sha512-eGbGZSglvbnY1omzRyEC4XP0FbpuCFKgjXmdHn9faGQUU5EJHwcGYYrRW8JZL3nEVIvNDuRAKzM3p0BVo1xeSQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.0.23.tgz",
+      "integrity": "sha512-Jr1UmOT4h/0Cst1a6xOIxCstN7arJYdQPvcmnM9QUqYjVpJ65y8ASANinyD27xZS8pshJ38z4pPzZCFE+YVP3Q==",
       "dev": true,
       "requires": {
         "@babel/core": "~7.21.0",
         "@babel/preset-env": "~7.21.0",
         "@babel/types": "~7.21.2",
         "@storybook/csf": "^0.1.0",
-        "@storybook/csf-tools": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/csf-tools": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/types": "7.0.23",
         "cross-spawn": "^7.0.3",
         "globby": "^11.0.2",
         "jscodeshift": "^0.14.0",
@@ -26040,40 +26953,41 @@
       }
     },
     "@storybook/components": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.0.12.tgz",
-      "integrity": "sha512-6TxByzYS4+LxwZRioGpP6Zh9If5ctjQs5OnR2UmQvP6HDjmMWYTntoHKIbDwAL9C6MrnQYpPOGCPkqrtODQ4/w==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.0.23.tgz",
+      "integrity": "sha512-nEMWjqL34uDzQsHM/MJQt6IoeVzbyONeS14UsS/WKTVpnQvxYLeZAg/kyMwZsl28U25na3d+EhZKv/0mWXw5Nw==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "memoizerific": "^1.11.3",
         "use-resize-observer": "^9.1.0",
         "util-deprecate": "^1.0.2"
       }
     },
     "@storybook/core-client": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.0.12.tgz",
-      "integrity": "sha512-m0r+Vl3LfU8cJl8UqIwzh0sEN9I//nMaT8UIIm481AINhQTNihQcnYi9jRw7USjfz2fv5CYkg8cEr4KhI8QlRA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.0.23.tgz",
+      "integrity": "sha512-YKZvUtFl0DH4xq6GkrYTx9UXfJoNlh6ZiybBXkD0eRi2cEo/EFKM6w5IIXYuyfn8uogBX1cUo61FrcRNulS5bw==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23"
       }
     },
     "@storybook/core-common": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.0.12.tgz",
-      "integrity": "sha512-PFVjYXHUxDQO1oqfqwQe7S3XoLNO0aZYEr9Zl0LiexlxxnU1v+TQjEfNd/H3T0xxpXlsgzhtEcagdzJeAKyh2g==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.0.23.tgz",
+      "integrity": "sha512-2W87Z9I0ObEMQkGVPMvgB3I5lWkqqkQDkfIbfoc717+DO3Lqgg/CGy5WL7+v2xVlzfoUnYIeXgkeAwDPDrDyMA==",
       "dev": true,
       "requires": {
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/node": "^16.0.0",
+        "@types/node-fetch": "^2.6.4",
         "@types/pretty-hrtime": "^1.0.0",
         "chalk": "^4.1.0",
         "esbuild": "^0.17.0",
@@ -26085,6 +26999,7 @@
         "glob-promise": "^6.0.2",
         "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",
@@ -26093,9 +27008,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.18.32",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-          "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+          "version": "16.18.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+          "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
           "dev": true
         },
         "ansi-styles": {
@@ -26135,38 +27050,37 @@
       }
     },
     "@storybook/core-events": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.12.tgz",
-      "integrity": "sha512-VTmb/zjbz3o1bg+bATzLigVXMVDC/S1FP8CqIrz4mkiys52139FGzMandL2Y2AecPZPGss7ZRdfma28HKVYTRg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.23.tgz",
+      "integrity": "sha512-Hdt18p/qbgJc+1wY2dGcdjmlsuNXWsoLTaXrjInuvr1U0kmKmKs0VMaB0cFubnUgCmB3YQWTGnVr3q8iz9iB7g==",
       "dev": true
     },
     "@storybook/core-server": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.0.12.tgz",
-      "integrity": "sha512-X35Kmg7y35Ph4J+gCDJrnVgBwlz4/DzOQofUS6rAbi4KvrPWDJXeM2OzOgx6B0abKl4CeMmjuc0tjbg4vbUFuA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.0.23.tgz",
+      "integrity": "sha512-xHt2WB2kL7VQIxYgtE1TDjd4WEvyqlaf256L3RbuQVGZ/AkuFUEV60FULimM6V+/DyF83hGZTREkjovI+Mb16w==",
       "dev": true,
       "requires": {
         "@aw-web-design/x-default-browser": "1.4.88",
         "@discoveryjs/json-ext": "^0.5.3",
-        "@storybook/builder-manager": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/builder-manager": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
-        "@storybook/csf-tools": "7.0.12",
+        "@storybook/csf-tools": "7.0.23",
         "@storybook/docs-mdx": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/telemetry": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/manager": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/telemetry": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/detect-port": "^1.3.0",
         "@types/node": "^16.0.0",
         "@types/node-fetch": "^2.5.7",
         "@types/pretty-hrtime": "^1.0.0",
         "@types/semver": "^7.3.4",
         "better-opn": "^2.1.1",
-        "boxen": "^5.1.2",
         "chalk": "^4.1.0",
         "cli-table3": "^0.6.1",
         "compression": "^1.7.4",
@@ -26191,9 +27105,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.18.32",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-          "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+          "version": "16.18.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+          "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
           "dev": true
         },
         "ansi-styles": {
@@ -26231,9 +27145,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -26257,22 +27171,22 @@
       }
     },
     "@storybook/core-webpack": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.0.12.tgz",
-      "integrity": "sha512-71tLTurZg5rYfjHuSUtnT8mcKc4CugvXh6DrJSf/1lTFarWvOZkYha9oh4gVokFWpAiK3GM9LE2DlCAozc9Xnw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.0.23.tgz",
+      "integrity": "sha512-WSdqTnVbBbcaf2dE+dvdfGTutAGquQ4TeVm3Y8yxe03BbZ86LHjQg/sQEYgJq1sud4SHPgvQ/lhF9SSAwFXVBQ==",
       "dev": true,
       "requires": {
-        "@storybook/core-common": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/node": "^16.0.0",
         "ts-dedent": "^2.0.0"
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.18.32",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-          "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+          "version": "16.18.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+          "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
           "dev": true
         }
       }
@@ -26287,19 +27201,19 @@
       }
     },
     "@storybook/csf-plugin": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.0.12.tgz",
-      "integrity": "sha512-iiH0ynLQV5BYFc0o7RlSJS2S3GT/ffyfbV4rnCnPKdqyo4REEVvmhOuLhwzurtsXsjh+xF6VUYUDN+8/5mbkYw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.0.23.tgz",
+      "integrity": "sha512-hKlCkZ8NONqRfzt5rdyQznnf/jMbbUF3h8mLxs1nYSevqH8CaHH9w8dYW2y67hyzT7Wt050bqRO2YH8ZQG/VVA==",
       "dev": true,
       "requires": {
-        "@storybook/csf-tools": "7.0.12",
+        "@storybook/csf-tools": "7.0.23",
         "unplugin": "^0.10.2"
       }
     },
     "@storybook/csf-tools": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.0.12.tgz",
-      "integrity": "sha512-EcDzKeENzs4awyjx0VxlONDLibiEtIPDP1XdOCcZGtv3nXXBFtS2WDsYhJHkwyvE37jWTyw2e4xKQmBi0Hjvbw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.0.23.tgz",
+      "integrity": "sha512-fCRmI/UduL7/Bhz4Ww8pn+dHqU/qCaZTcigxQSeWm3OpTUpHzbFwVLXLr/ZnL4ofS+AWa5FhiZXcMF5TMXWXLw==",
       "dev": true,
       "requires": {
         "@babel/generator": "~7.21.1",
@@ -26307,7 +27221,7 @@
         "@babel/traverse": "~7.21.2",
         "@babel/types": "~7.21.2",
         "@storybook/csf": "^0.1.0",
-        "@storybook/types": "7.0.12",
+        "@storybook/types": "7.0.23",
         "fs-extra": "^11.1.0",
         "recast": "^0.23.1",
         "ts-dedent": "^2.0.0"
@@ -26320,15 +27234,15 @@
       "dev": true
     },
     "@storybook/docs-tools": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.0.12.tgz",
-      "integrity": "sha512-+HykeQLgjyDyF9G7HqY0FHXlX7X5YpQcmNjftJzBrc/GO1EeO0M78d54avcOPyyTfuWOh7oZtSJ0MzjA1qrqaQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.0.23.tgz",
+      "integrity": "sha512-sf0eGmx7ZfFgj/lrSjvDoqOQWRdAk9Os5nuy/rtSyOYLv8Y7+Pwdjn+1cUTs6j/yhgOooC0IweJom0+D40Mkog==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/doctrine": "^0.0.3",
         "doctrine": "^3.0.0",
         "lodash": "^4.17.21"
@@ -26341,38 +27255,38 @@
       "dev": true
     },
     "@storybook/instrumenter": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.0.12.tgz",
-      "integrity": "sha512-jx4rb4AMT1YIOpE0HCdfyLvpYU+94wPkC9vt7sZGWAp7nnYG+KO/lx3XCJaR9qQPIxVYejJtWkeGn4RID79SoQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.0.23.tgz",
+      "integrity": "sha512-CeV2se64XxccD4L6XFI3cFfEz3/Lcbrvb+T3bZZzGOXO18zH5tN3jXVfAONrz/mU69jL9mbo96hFl51UDtwcAg==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/preview-api": "7.0.23"
       }
     },
     "@storybook/manager": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.0.12.tgz",
-      "integrity": "sha512-19BsDcwJOYXn6zEarxvNGDdYLUqZyhX92x6GPHSC4cf8BoxHuhmtnz5vOTZHusCxkKIu/C9W0H6wH2Ma47kDCg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.0.23.tgz",
+      "integrity": "sha512-D3WIqtzjSY3UOskZhKQ2R7RypPUeqAmsXLKxw2EEEx7iLHgJfKvFeAZ77NCKNOxQsEDjLrjTQH4WjiKEaSpK5Q==",
       "dev": true
     },
     "@storybook/manager-api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.0.12.tgz",
-      "integrity": "sha512-3QXARtxpc6Xxqf5pviUw2UuhK53+IsINSljeWhAqdQ1Gzbywl67TpibTd7xVN6NKxhUH5Bzo9bIZTAzMZGqaKw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.0.23.tgz",
+      "integrity": "sha512-tvq5+xVkpqWDDnvyoi/sfAR7ZaIu7oiommMtuEt1/mhItn9nv8TXkWbthWUlwRgUrPiJJl2BNSnXMRS+byOAZg==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/router": "7.0.12",
-        "@storybook/theming": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/router": "7.0.23",
+        "@storybook/theming": "7.0.23",
+        "@storybook/types": "7.0.23",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
         "memoizerific": "^1.11.3",
@@ -26392,9 +27306,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -26415,9 +27329,9 @@
       "dev": true
     },
     "@storybook/nextjs": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-7.0.12.tgz",
-      "integrity": "sha512-XFO62uKiS1Cojn2SFQCQXL1RWyylrug1ywKl88OVDmOwBVfJQ/Xm/PMJVp+4dMRFOGQFAIS86uUImNZRHyGsfA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-7.0.23.tgz",
+      "integrity": "sha512-y3lyFgY7CZm4O59Td58AooeQQNV6NQWRgV+/PEqBh6csHgLSM744te3POmc5L1LXOtAs7dc5sGbKfPdMV1M+Kw==",
       "dev": true,
       "requires": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -26432,19 +27346,20 @@
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.21.0",
         "@babel/runtime": "^7.21.0",
-        "@storybook/addon-actions": "7.0.12",
-        "@storybook/builder-webpack5": "7.0.12",
-        "@storybook/core-common": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/preset-react-webpack": "7.0.12",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/react": "7.0.12",
+        "@storybook/addon-actions": "7.0.23",
+        "@storybook/builder-webpack5": "7.0.23",
+        "@storybook/core-common": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/preset-react-webpack": "7.0.23",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/react": "7.0.23",
         "@types/node": "^16.0.0",
         "css-loader": "^6.7.3",
         "find-up": "^5.0.0",
         "fs-extra": "^11.1.0",
         "image-size": "^1.0.0",
         "loader-utils": "^3.2.0",
+        "node-polyfill-webpack-plugin": "^2.0.1",
         "pnp-webpack-plugin": "^1.7.0",
         "postcss": "^8.4.21",
         "postcss-loader": "^7.0.2",
@@ -26572,9 +27487,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -26596,9 +27511,9 @@
       }
     },
     "@storybook/node-logger": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.0.12.tgz",
-      "integrity": "sha512-VL+NXzc9NuOP6/9alg4Sofz9kh8tmlo3p+UtCIYCHH088yCsB3XsNhkG9lF1C5EZVWcuHxc2u6MMF3ezOjvKfQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.0.23.tgz",
+      "integrity": "sha512-bVa0LnD0pAI0ZU9cue+hvWiWEli3Gny6ofolaWiOw1W03P5ogUo7gHHw/+Is4Iba7FxD1+W1BXm5oi22xD1x0g==",
       "dev": true,
       "requires": {
         "@types/npmlog": "^4.1.2",
@@ -26644,24 +27559,24 @@
       }
     },
     "@storybook/postinstall": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.0.12.tgz",
-      "integrity": "sha512-RKNvBLgABBTQwvGyF2jX4vP7OMLB3KvEEOQDoeOKjqyWfekDn5smI+eT714mtmKIH0YMcwmvzLgEdZkjmM/XhA==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.0.23.tgz",
+      "integrity": "sha512-GOVF1MXIRjK8Qx5FjMVoYGlQetJJFjxh75FHb2cm2xxEiIxLpMWOOHkTcsqh2BQzGqi/Bs4IKx2OxMxZazgroQ==",
       "dev": true
     },
     "@storybook/preset-react-webpack": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.0.12.tgz",
-      "integrity": "sha512-EBgP5p8uiwJXPpM5M6mC4SrKCKSeQEJI+oQ36olUIB7PUhysiVFhLB+rOIgkXc3nhX1uRTO/PYefd9PBMwE11A==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.0.23.tgz",
+      "integrity": "sha512-kYJXxQnDSRW3/W2XBqPjuZmtifOStpoQd+h4uvQovVD8ydcZVw8cCId8LBRlJ+SGUnZX4eRC2D5qDQJd4ljQ+A==",
       "dev": true,
       "requires": {
         "@babel/preset-flow": "^7.18.6",
         "@babel/preset-react": "^7.18.6",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-        "@storybook/core-webpack": "7.0.12",
-        "@storybook/docs-tools": "7.0.12",
-        "@storybook/node-logger": "7.0.12",
-        "@storybook/react": "7.0.12",
+        "@storybook/core-webpack": "7.0.23",
+        "@storybook/docs-tools": "7.0.23",
+        "@storybook/node-logger": "7.0.23",
+        "@storybook/react": "7.0.23",
         "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
         "@types/node": "^16.0.0",
         "@types/semver": "^7.3.4",
@@ -26674,9 +27589,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.18.32",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-          "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+          "version": "16.18.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+          "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
           "dev": true
         },
         "lru-cache": {
@@ -26689,9 +27604,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -26706,24 +27621,24 @@
       }
     },
     "@storybook/preview": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.0.12.tgz",
-      "integrity": "sha512-za8El/nnkyAo/uqyqAg7PMuP6DSdPoEnDRyIk4LzY7sAGly6i4Uge377cdo1nUBQLS5S4kKIc4xf8TUegb3G1Q==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.0.23.tgz",
+      "integrity": "sha512-D4oDayFOXqNDLJStbZ35Lc0UAXvzdWiij1IE01wH1mzndlEgR+/1ZEPQfm5Leb5LZd7pWmyYLJqh6m/CCK2uPg==",
       "dev": true
     },
     "@storybook/preview-api": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.0.12.tgz",
-      "integrity": "sha512-YI/AfHszIOYt967fsRlc7j6I0zZB+RSsBwD/nMA8y9vszdpQ0MgRhxHgQxFf6cgqbuQcdCsnTIpT0iQ4GHjDXg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.0.23.tgz",
+      "integrity": "sha512-kXhDX6gVjQu4Lx4SnCW5Yt5W/TbQofp9SL0paB1ywsJ15xSAPU5KVILe9OWAOba2YUnk7sHux/xDX/gH5RCpVw==",
       "dev": true,
       "requires": {
-        "@storybook/channel-postmessage": "7.0.12",
-        "@storybook/channels": "7.0.12",
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-events": "7.0.12",
+        "@storybook/channel-postmessage": "7.0.23",
+        "@storybook/channels": "7.0.23",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-events": "7.0.23",
         "@storybook/csf": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.0.12",
+        "@storybook/types": "7.0.23",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -26735,18 +27650,18 @@
       }
     },
     "@storybook/react": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.0.12.tgz",
-      "integrity": "sha512-dKHKc02LSgn3St7U/xj/Rr2DFLbS4dWQka+pS/AOvPPvMAR2gGHVhkmoFuFMf176hUTuE5MCoWBoNJIRMz7ZiQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.0.23.tgz",
+      "integrity": "sha512-vQQ+OaYXwab9PelUggI/ObJ0a5Luyn5lsAWI9QF3BV1WsiHwCKM862OGsfUEfV3WXaN+uHPx/LpyHC7XTFp2yA==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-client": "7.0.12",
-        "@storybook/docs-tools": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-client": "7.0.23",
+        "@storybook/docs-tools": "7.0.23",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.0.12",
-        "@storybook/react-dom-shim": "7.0.12",
-        "@storybook/types": "7.0.12",
+        "@storybook/preview-api": "7.0.23",
+        "@storybook/react-dom-shim": "7.0.23",
+        "@storybook/types": "7.0.23",
         "@types/escodegen": "^0.0.6",
         "@types/estree": "^0.0.51",
         "@types/node": "^16.0.0",
@@ -26764,9 +27679,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.18.32",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.32.tgz",
-          "integrity": "sha512-zpnXe4dEz6PrWz9u7dqyRoq9VxwCvoXRPy/ewhmMa1CgEyVmtL1NJPQ2MX+4pf97vetquVKkpiMx0MwI8pjNOw==",
+          "version": "16.18.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz",
+          "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==",
           "dev": true
         }
       }
@@ -26787,90 +27702,41 @@
       }
     },
     "@storybook/react-dom-shim": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.0.12.tgz",
-      "integrity": "sha512-4z9J54TD7uphxPqSuLEzeKTV4oF8Fmv8qFfnT0XZJ2mpYTC2NTbkYoYZQ8N0eYzvNOk6xgfpDqBdmIANf4NaYw==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.0.23.tgz",
+      "integrity": "sha512-v4jIaDb3SwYmRADuNZDwR/5r0V65zAc+hJlW+8z3FRZ5xN3gGV/3s08VL2xnItmidsneMndz9ECjlaTHvSGOng==",
       "dev": true,
       "requires": {}
     },
     "@storybook/router": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.0.12.tgz",
-      "integrity": "sha512-dOtBiCBGeDem86BCWR7AlTVQjoBk0yw/XZLXS9qcpUfpe+UDjd0Rh21ZdEEMHG1Wfu4d2AhhG5l/JSJ1IE83jQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.0.23.tgz",
+      "integrity": "sha512-qZJJJKqcyhTAXRWxGwBlL97BSt/TbWcXNUB1H3Q4ufKrgdrCRuThfr8R8Fir+iggr7vF3QnMQ7rCyPT/yB56/g==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0"
       }
     },
-    "@storybook/semver": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-      "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-      "dev": true,
-      "requires": {
-        "core-js": "^3.6.5",
-        "find-up": "^4.1.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "dev": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        }
-      }
-    },
     "@storybook/store": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-7.0.12.tgz",
-      "integrity": "sha512-+gqs6y55fXp9vLrq9VyCGoAHbjfEBMZClkCNksPUBPoLRCY0knxGvhIOoDdcqHkHpm3AQGsfW/ESurbLj/Q76Q==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-7.0.23.tgz",
+      "integrity": "sha512-rTSAwn44Pm1c4ChF29zF/YRAtPInvFCrW7lBHTQoXT+fL3FHXUgxv61rlby+DGJlLZmEHM2SF+1DgIKzvXNNkg==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/preview-api": "7.0.12"
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/preview-api": "7.0.23"
       }
     },
     "@storybook/telemetry": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.0.12.tgz",
-      "integrity": "sha512-oxqe15bn5W+1pLpLjXTfj3H+YPZq3jExjdJwTCUHtFrrsNs0k6dyqAUk8qTOUqOTclANHb6vlNBFJDvZ6qbfEQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.0.23.tgz",
+      "integrity": "sha512-bV6U58+JXvliq6FHnEOmy902Coa2JVD0M1N6En0us9kNNrtxpn4xSO4dvFW0A+veZimtT6kI55liG89IKeN3Nw==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "7.0.12",
-        "@storybook/core-common": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
+        "@storybook/core-common": "7.0.23",
         "chalk": "^4.1.0",
         "detect-package-manager": "^2.0.1",
         "fetch-retry": "^5.0.2",
@@ -26917,176 +27783,35 @@
       }
     },
     "@storybook/testing-library": {
-      "version": "0.0.13",
-      "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.0.13.tgz",
-      "integrity": "sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw==",
+      "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": {
-        "@storybook/client-logger": "^6.4.0",
-        "@storybook/instrumenter": "^6.4.0",
-        "@testing-library/dom": "^8.3.0",
-        "@testing-library/user-event": "^13.2.1",
+        "@testing-library/dom": "^9.0.0",
+        "@testing-library/user-event": "^14.0.0",
         "ts-dedent": "^2.2.0"
-      },
-      "dependencies": {
-        "@storybook/addons": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz",
-          "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==",
-          "dev": true,
-          "requires": {
-            "@storybook/api": "6.5.16",
-            "@storybook/channels": "6.5.16",
-            "@storybook/client-logger": "6.5.16",
-            "@storybook/core-events": "6.5.16",
-            "@storybook/csf": "0.0.2--canary.4566f4d.1",
-            "@storybook/router": "6.5.16",
-            "@storybook/theming": "6.5.16",
-            "@types/webpack-env": "^1.16.0",
-            "core-js": "^3.8.2",
-            "global": "^4.4.0",
-            "regenerator-runtime": "^0.13.7"
-          }
-        },
-        "@storybook/api": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz",
-          "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==",
-          "dev": true,
-          "requires": {
-            "@storybook/channels": "6.5.16",
-            "@storybook/client-logger": "6.5.16",
-            "@storybook/core-events": "6.5.16",
-            "@storybook/csf": "0.0.2--canary.4566f4d.1",
-            "@storybook/router": "6.5.16",
-            "@storybook/semver": "^7.3.2",
-            "@storybook/theming": "6.5.16",
-            "core-js": "^3.8.2",
-            "fast-deep-equal": "^3.1.3",
-            "global": "^4.4.0",
-            "lodash": "^4.17.21",
-            "memoizerific": "^1.11.3",
-            "regenerator-runtime": "^0.13.7",
-            "store2": "^2.12.0",
-            "telejson": "^6.0.8",
-            "ts-dedent": "^2.0.0",
-            "util-deprecate": "^1.0.2"
-          }
-        },
-        "@storybook/channels": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz",
-          "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==",
-          "dev": true,
-          "requires": {
-            "core-js": "^3.8.2",
-            "ts-dedent": "^2.0.0",
-            "util-deprecate": "^1.0.2"
-          }
-        },
-        "@storybook/client-logger": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz",
-          "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==",
-          "dev": true,
-          "requires": {
-            "core-js": "^3.8.2",
-            "global": "^4.4.0"
-          }
-        },
-        "@storybook/core-events": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz",
-          "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==",
-          "dev": true,
-          "requires": {
-            "core-js": "^3.8.2"
-          }
-        },
-        "@storybook/csf": {
-          "version": "0.0.2--canary.4566f4d.1",
-          "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-          "integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-          "dev": true,
-          "requires": {
-            "lodash": "^4.17.15"
-          }
-        },
-        "@storybook/instrumenter": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-6.5.16.tgz",
-          "integrity": "sha512-q8/GaBk8PA/cL7m5OW+ec5t63+Zja9YvYSPGXrYtW17koSv7OnNPmk6RvI7tIHHO0mODBYnaHjF4zQfEGoyR5Q==",
-          "dev": true,
-          "requires": {
-            "@storybook/addons": "6.5.16",
-            "@storybook/client-logger": "6.5.16",
-            "@storybook/core-events": "6.5.16",
-            "core-js": "^3.8.2",
-            "global": "^4.4.0"
-          }
-        },
-        "@storybook/router": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz",
-          "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==",
-          "dev": true,
-          "requires": {
-            "@storybook/client-logger": "6.5.16",
-            "core-js": "^3.8.2",
-            "memoizerific": "^1.11.3",
-            "qs": "^6.10.0",
-            "regenerator-runtime": "^0.13.7"
-          }
-        },
-        "@storybook/theming": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
-          "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
-          "dev": true,
-          "requires": {
-            "@storybook/client-logger": "6.5.16",
-            "core-js": "^3.8.2",
-            "memoizerific": "^1.11.3",
-            "regenerator-runtime": "^0.13.7"
-          }
-        },
-        "telejson": {
-          "version": "6.0.8",
-          "resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-          "integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-          "dev": true,
-          "requires": {
-            "@types/is-function": "^1.0.0",
-            "global": "^4.4.0",
-            "is-function": "^1.0.2",
-            "is-regex": "^1.1.2",
-            "is-symbol": "^1.0.3",
-            "isobject": "^4.0.0",
-            "lodash": "^4.17.21",
-            "memoizerific": "^1.11.3"
-          }
-        }
       }
     },
     "@storybook/theming": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.12.tgz",
-      "integrity": "sha512-frBkvH7LF8j23ODaywLK4m4LLscw49oKblkZ+30QZkBAzRf2o3a/QSZW2V1zfBo7ygcXiUJ5bIjh7Y17mMJqbQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.23.tgz",
+      "integrity": "sha512-hKmpjFS24YK0vl69KhqNauARTgxQu5mvlifHmu7xO80bigXi6NzA5VyyCMHO1SKVFJwPBVHHfauQCenSRm2PDQ==",
       "dev": true,
       "requires": {
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.0.12",
+        "@storybook/client-logger": "7.0.23",
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3"
       }
     },
     "@storybook/types": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.12.tgz",
-      "integrity": "sha512-nlvU4MyO2grwPCRQ8alA3AnY1bQxGJ6A4QgJu+1MhtjVenifFlxOQX4H1OiA+YXfjlV096oO5LrxvetJPFAKKQ==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.23.tgz",
+      "integrity": "sha512-ziszL3OfhTT5PHE7kiQjWWx3Lw3qro8eLX+56dXDNgmft5LS66yEANcaA7OzxLnEgdyWSxJqgrVo6r0JwHp2Eg==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "7.0.12",
+        "@storybook/channels": "7.0.23",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "^2.0.0"
@@ -27140,18 +27865,18 @@
       }
     },
     "@testing-library/dom": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
-      "integrity": "sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==",
+      "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.0.0",
+        "aria-query": "5.1.3",
         "chalk": "^4.1.0",
         "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.4.4",
+        "lz-string": "^1.5.0",
         "pretty-format": "^27.0.2"
       },
       "dependencies": {
@@ -27192,13 +27917,11 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
+      "version": "14.4.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
+      "integrity": "sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==",
       "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.12.5"
-      }
+      "requires": {}
     },
     "@types/argon2-browser": {
       "version": "1.18.1",
@@ -27212,9 +27935,9 @@
       "dev": true
     },
     "@types/babel__core": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
-      "integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==",
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
+      "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.20.7",
@@ -27244,12 +27967,12 @@
       }
     },
     "@types/babel__traverse": {
-      "version": "7.18.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.5.tgz",
-      "integrity": "sha512-enCvTL8m/EHS/zIvJno9nE+ndYPh1/oNFzRYRmtUqJICG2VnCSBzMLW5VN2KCQU91f23tsNKR8v7VJJQMatl7Q==",
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
+      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.3.0"
+        "@babel/types": "^7.20.7"
       }
     },
     "@types/body-parser": {
@@ -27280,9 +28003,9 @@
       }
     },
     "@types/detect-port": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.2.tgz",
-      "integrity": "sha512-xxgAGA2SAU4111QefXPSp5eGbDm/hW6zhvYl9IeEPZEry9F4d66QAHm5qpUXjb6IsevZV/7emAEx5MhP6O192g==",
+      "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": {
@@ -27401,10 +28124,10 @@
       "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
       "dev": true
     },
-    "@types/is-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.1.tgz",
-      "integrity": "sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==",
+    "@types/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==",
       "dev": true
     },
     "@types/istanbul-lib-coverage": {
@@ -27609,11 +28332,12 @@
       }
     },
     "@types/serve-static": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
-      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.2.tgz",
+      "integrity": "sha512-J2LqtvFYCzaj8pVYKw8klQXrLLk7TBZmQ4ShlcdkELFKGwGMfevMLneMMRkMgZxotOD9wg497LpC7O8PcvAmfw==",
       "dev": true,
       "requires": {
+        "@types/http-errors": "*",
         "@types/mime": "*",
         "@types/node": "*"
       }
@@ -27633,12 +28357,6 @@
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
       "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
     },
-    "@types/webpack-env": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz",
-      "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==",
-      "dev": true
-    },
     "@types/yargs": {
       "version": "17.0.24",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
@@ -27682,9 +28400,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -27763,9 +28481,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -27805,9 +28523,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -27998,6 +28716,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dev": true,
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -28139,15 +28866,6 @@
       "dev": true,
       "requires": {}
     },
-    "ansi-align": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
-      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
-      "dev": true,
-      "requires": {
-        "string-width": "^4.1.0"
-      }
-    },
     "ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -28345,6 +29063,26 @@
         "get-intrinsic": "^1.1.3"
       }
     },
+    "asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
     "assert": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
@@ -28489,9 +29227,9 @@
           "dev": true
         },
         "schema-utils": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
-          "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
           "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.9",
@@ -28696,6 +29434,12 @@
         }
       }
     },
+    "bn.js": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
+      "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
+      "dev": true
+    },
     "body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -28748,70 +29492,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "boxen": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
-      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
-      "dev": true,
-      "requires": {
-        "ansi-align": "^3.0.0",
-        "camelcase": "^6.2.0",
-        "chalk": "^4.1.0",
-        "cli-boxes": "^2.2.1",
-        "string-width": "^4.2.2",
-        "type-fest": "^0.20.2",
-        "widest-line": "^3.1.0",
-        "wrap-ansi": "^7.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"
-          }
-        },
-        "camelcase": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-          "dev": true
-        },
-        "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"
-          }
-        },
-        "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"
-          }
-        },
-        "type-fest": {
-          "version": "0.20.2",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-          "dev": true
-        }
-      }
-    },
     "bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
@@ -28840,19 +29520,111 @@
         "fill-range": "^7.0.1"
       }
     },
+    "brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==",
+      "dev": true
+    },
     "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
     },
-    "browserify-zlib": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-      "integrity": "sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==",
+    "browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
-        "pako": "~0.2.0"
+        "buffer-xor": "^1.0.3",
+        "cipher-base": "^1.0.0",
+        "create-hash": "^1.1.0",
+        "evp_bytestokey": "^1.0.3",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "dev": true,
+      "requires": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "browserify-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "dev": true,
+      "requires": {
+        "pako": "~1.0.5"
       }
     },
     "browserslist": {
@@ -28901,6 +29673,18 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
       "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
     },
+    "buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==",
+      "dev": true
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==",
+      "dev": true
+    },
     "bundle-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
@@ -28917,9 +29701,9 @@
       "dev": true
     },
     "c8": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/c8/-/c8-7.13.0.tgz",
-      "integrity": "sha512-/NL4hQTv1gBL6J6ei80zu3IiTrmePDKXKXOTLpHvcIWZTVYQlDhVWjjWvkhICylE8EwwnMVzDZugCvdx0/DIIA==",
+      "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",
@@ -29109,10 +29893,19 @@
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
       "dev": true
     },
-    "cli-boxes": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
-      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-spinners": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
+      "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
       "dev": true
     },
     "cli-table3": {
@@ -29141,6 +29934,12 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true
+    },
     "clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -29160,12 +29959,6 @@
           "requires": {
             "isobject": "^3.0.1"
           }
-        },
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-          "dev": true
         }
       }
     },
@@ -29369,12 +30162,24 @@
       "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "dev": true
     },
+    "console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
+      "dev": true
+    },
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
       "dev": 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",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -29416,11 +30221,21 @@
         "keygrip": "~1.1.0"
       }
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "core-js": {
       "version": "3.30.2",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
       "integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==",
-      "devOptional": true
+      "optional": true
     },
     "core-js-compat": {
       "version": "3.30.2",
@@ -29432,9 +30247,9 @@
       }
     },
     "core-js-pure": {
-      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.30.2.tgz",
-      "integrity": "sha512-p/npFUJXXBkCCTIlEGBdghofn00jWG6ZOtdoIXSJmAu2QBvN0IqpZXWweOytcwE6cfx8ZvVUy1vw8zxhe4Y2vg==",
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.31.0.tgz",
+      "integrity": "sha512-/AnE9Y4OsJZicCzIe97JP5XoPKQJfTuEG43aEVLFJGOJpyqELod+pE6LEl63DfG1Mp8wX97LDaDpy1GmLEUxlg==",
       "dev": true
     },
     "core-util-is": {
@@ -29461,6 +30276,24 @@
         }
       }
     },
+    "create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -29473,6 +30306,20 @@
         "sha.js": "^2.4.0"
       }
     },
+    "create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
     "cross-fetch": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
@@ -29492,6 +30339,25 @@
         "which": "^2.0.1"
       }
     },
+    "crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "dev": true,
+      "requires": {
+        "browserify-cipher": "^1.0.0",
+        "browserify-sign": "^4.0.0",
+        "create-ecdh": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "create-hmac": "^1.1.0",
+        "diffie-hellman": "^5.0.0",
+        "inherits": "^2.0.1",
+        "pbkdf2": "^3.0.3",
+        "public-encrypt": "^4.0.0",
+        "randombytes": "^2.0.0",
+        "randomfill": "^1.0.3"
+      }
+    },
     "crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -29520,82 +30386,6 @@
         "utrie": "^1.0.2"
       }
     },
-    "css-loader": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
-      "integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
-      "dev": true,
-      "requires": {
-        "camelcase": "^5.3.1",
-        "cssesc": "^3.0.0",
-        "icss-utils": "^4.1.1",
-        "loader-utils": "^1.2.3",
-        "normalize-path": "^3.0.0",
-        "postcss": "^7.0.32",
-        "postcss-modules-extract-imports": "^2.0.0",
-        "postcss-modules-local-by-default": "^3.0.2",
-        "postcss-modules-scope": "^2.2.0",
-        "postcss-modules-values": "^3.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "schema-utils": "^2.7.0",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
     "css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -29815,6 +30605,15 @@
         "untildify": "^4.0.0"
       }
     },
+    "defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      }
+    },
     "define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -29885,6 +30684,16 @@
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
     },
+    "des.js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
+      "integrity": "sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -29948,6 +30757,25 @@
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
       "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw=="
     },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -30006,10 +30834,10 @@
         }
       }
     },
-    "dom-walk": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+    "domain-browser": {
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz",
+      "integrity": "sha512-IGBwjF7tNk3cwypFNH/7bfzBcgSCbaMOD3GsaY1AU/JRrnHnYgEM0+9kQt52iZxjNsjBtJYtao146V+f8jFZNw==",
       "dev": true
     },
     "domelementtype": {
@@ -30178,6 +31006,29 @@
       "integrity": "sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA==",
       "dev": true
     },
+    "elliptic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
     "emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -30231,11 +31082,22 @@
       "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
     },
     "envinfo": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.9.0.tgz",
+      "integrity": "sha512-RODB4txU+xImYDemN5DqaKC0CHk05XSVkOX4pq0hK26Qx+1LChkuOyUDlGEjYb3ACr0n9qBhFjg37hQuJvpkRQ==",
       "dev": true
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -30609,12 +31471,12 @@
       }
     },
     "eslint-config-next": {
-      "version": "13.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.3.tgz",
-      "integrity": "sha512-1lXwdFi29fKxzeugof/TUE7lpHyJQt5+U4LaUHyvQfHjvsWO77vFNicJv5sX6k0VDVSbnfz0lw+avxI+CinbMg==",
+      "version": "13.4.7",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.7.tgz",
+      "integrity": "sha512-+IRAyD0+J1MZaTi9RQMPUfr6Q+GCZ1wOkK6XM52Vokh7VI4R6YFGOFzdkEFHl4ZyIX4FKa5vcwUP2WscSFNjNQ==",
       "dev": true,
       "requires": {
-        "@next/eslint-plugin-next": "13.4.3",
+        "@next/eslint-plugin-next": "13.4.7",
         "@rushstack/eslint-patch": "^1.1.3",
         "@typescript-eslint/parser": "^5.42.0",
         "eslint-import-resolver-node": "^0.3.6",
@@ -30985,6 +31847,12 @@
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "dev": true
     },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "dev": true
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -30996,6 +31864,16 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true
     },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "dev": true,
+      "requires": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -31402,9 +32280,9 @@
       "dev": true
     },
     "flow-parser": {
-      "version": "0.206.0",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.206.0.tgz",
-      "integrity": "sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==",
+      "version": "0.209.1",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.209.1.tgz",
+      "integrity": "sha512-7YdhWfCsLRn31or7oK9M7Svd4WFk1qfj6VIFY/9S6HRyzBBiLlobNbUbitZHfdi0nhkik5S498UmF3phdzM6ug==",
       "dev": true
     },
     "follow-redirects": {
@@ -31497,9 +32375,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -31620,9 +32498,9 @@
       }
     },
     "fs-monkey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.4.tgz",
+      "integrity": "sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ==",
       "dev": true
     },
     "fs.realpath": {
@@ -31816,9 +32694,9 @@
       }
     },
     "glob-promise": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-6.0.2.tgz",
-      "integrity": "sha512-Ni2aDyD1ekD6x8/+K4hDriRDbzzfuK4yKpqSymJ4P7IxbtARiOOuU+k40kbHM0sLIlbf1Qh0qdMkAHMZYE6XJQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-6.0.3.tgz",
+      "integrity": "sha512-m+kxywR5j/2Z2V9zvHKfwwL5Gp7gIFEBX+deTB9w2lJB+wSuw9kcS43VfvTAMk8TXL5JCl/cCjsR+tgNVspGyA==",
       "dev": true,
       "requires": {
         "@types/glob": "^8.0.0"
@@ -31830,16 +32708,6 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
-    "global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "dev": true,
-      "requires": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -31920,12 +32788,27 @@
         "through2": "^2.0.3"
       },
       "dependencies": {
+        "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": {
+            "pako": "~0.2.0"
+          }
+        },
         "isarray": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
           "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
           "dev": true
         },
+        "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
+        },
         "readable-stream": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -32074,6 +32957,16 @@
         }
       }
     },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
     "hast-util-whitespace": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
@@ -32090,6 +32983,17 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
+      "dev": true,
+      "requires": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -32112,9 +33016,9 @@
       "dev": true
     },
     "html-entities": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
-      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.6.tgz",
+      "integrity": "sha512-9o0+dcpIw2/HxkNuYKxSJUF/MMRZQECK4GnF+oQOmJ83yCVHTWgCH5aOXxK5bozNRmM8wtgryjHD3uloPBDEGw==",
       "dev": true
     },
     "html-escaper": {
@@ -32165,9 +33069,9 @@
       }
     },
     "html-webpack-plugin": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.1.tgz",
-      "integrity": "sha512-cTUzZ1+NqjGEKjmVgZKLMdiFg3m9MdRXkZW2OEe69WYVi5ONLMmlnSZdXzGGMOq0C8jGDrL6EWyEDDUioHO/pA==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
+      "integrity": "sha512-6YrDKTuqaP/TquFH7h4srYWsZx+x6k6+FbsTm0ziCwGHDP78Unr1r9F/H4+sGmMbX08GQcJ+K64x55b+7VM/jg==",
       "dev": true,
       "requires": {
         "@types/html-minifier-terser": "^6.0.0",
@@ -32230,6 +33134,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==",
+      "dev": true
+    },
     "https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -32279,39 +33189,6 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
-    "icss-utils": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
-      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.14"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -32567,12 +33444,6 @@
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true
     },
-    "is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
-      "dev": true
-    },
     "is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -32614,6 +33485,12 @@
         }
       }
     },
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true
+    },
     "is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -32735,6 +33612,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true
+    },
     "is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -32760,6 +33643,13 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "peer": true
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -32782,9 +33672,9 @@
       "dev": true
     },
     "isobject": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-      "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
       "dev": true
     },
     "isomorphic-unfetch": {
@@ -32855,9 +33745,9 @@
       }
     },
     "jake": {
-      "version": "10.8.6",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.6.tgz",
-      "integrity": "sha512-G43Ub9IYEFfu72sua6rzooi8V8Gz2lkfk48rW20vEWCGizeaEPlKB1Kh8JIA84yQbiAEfqlPmSpGgCKKxH3rDA==",
+      "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",
@@ -33353,6 +34243,78 @@
         "dotenv-expand": "^10.0.0"
       }
     },
+    "less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "image-size": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+          "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.3.tgz",
+      "integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==",
+      "dev": true,
+      "requires": {}
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -33448,6 +34410,52 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.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"
+          }
+        },
+        "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"
+          }
+        },
+        "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"
+          }
+        }
+      }
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -33537,9 +34545,9 @@
       }
     },
     "markdown-to-jsx": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.0.tgz",
-      "integrity": "sha512-3l4/Bigjm4bEqjCR6Xr+d4DtM1X6vvtGsMGSjJYyep8RjjIvcWtrXBS8Wbfe1/P+atKNMccpsraESIaWVplzVg==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.1.tgz",
+      "integrity": "sha512-9HrdzBAo0+sFz9ZYAGT5fB8ilzTW+q6lPocRxrIesMO+aB40V9MgFfbfMXxlGjf22OpRy+IXlvVaQenicdpgbg==",
       "dev": true,
       "requires": {}
     },
@@ -33657,12 +34665,12 @@
       "dev": true
     },
     "memfs": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.1.tgz",
-      "integrity": "sha512-UWbFJKvj5k+nETdteFndTpYxdeTMox/ULeqX5k/dpaQJCCFmj5EeKv3dBcyO2xmkRAx2vppRu5dVG7SOtsGOzA==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
+      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
       "dev": true,
       "requires": {
-        "fs-monkey": "^1.0.3"
+        "fs-monkey": "^1.0.4"
       }
     },
     "memoize-one": {
@@ -33925,6 +34933,24 @@
         "picomatch": "^2.3.1"
       }
     },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
     "mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -33955,21 +34981,24 @@
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
       "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
     },
-    "min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
-      "dev": true,
-      "requires": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -34077,6 +35106,43 @@
       "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
       "dev": true
     },
+    "needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -34160,9 +35226,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -34203,9 +35269,9 @@
       }
     },
     "node-fetch-native": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.1.1.tgz",
-      "integrity": "sha512-9VvspTSUp2Sxbl+9vbZTlFGq9lHwE8GDVVekxx6YsNd1YH59sb3Ba8v3Y3cD8PkLNcileGGcA21PFjVl0jzDaw==",
+      "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-int64": {
@@ -34214,6 +35280,78 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
       "dev": true
     },
+    "node-polyfill-webpack-plugin": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/node-polyfill-webpack-plugin/-/node-polyfill-webpack-plugin-2.0.1.tgz",
+      "integrity": "sha512-ZUMiCnZkP1LF0Th2caY6J/eKKoA0TefpoVa68m/LQU1I/mE8rGt4fNYGgNuCcK+aG8P8P43nbeJ2RqJMOL/Y1A==",
+      "dev": true,
+      "requires": {
+        "assert": "^2.0.0",
+        "browserify-zlib": "^0.2.0",
+        "buffer": "^6.0.3",
+        "console-browserify": "^1.2.0",
+        "constants-browserify": "^1.0.0",
+        "crypto-browserify": "^3.12.0",
+        "domain-browser": "^4.22.0",
+        "events": "^3.3.0",
+        "filter-obj": "^2.0.2",
+        "https-browserify": "^1.0.0",
+        "os-browserify": "^0.3.0",
+        "path-browserify": "^1.0.1",
+        "process": "^0.11.10",
+        "punycode": "^2.1.1",
+        "querystring-es3": "^0.2.1",
+        "readable-stream": "^4.0.0",
+        "stream-browserify": "^3.0.0",
+        "stream-http": "^3.2.0",
+        "string_decoder": "^1.3.0",
+        "timers-browserify": "^2.0.12",
+        "tty-browserify": "^0.0.1",
+        "type-fest": "^2.14.0",
+        "url": "^0.11.0",
+        "util": "^0.12.4",
+        "vm-browserify": "^1.1.2"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+          "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.2.1"
+          }
+        },
+        "filter-obj": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-2.0.2.tgz",
+          "integrity": "sha512-lO3ttPjHZRfjMcxWKb1j1eDhTFsu4meeR3lnMcnBFhk6RuLhvEiuALu2TlfL310ph4lCYYwgF/ElIjdP739tdg==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.4.0.tgz",
+          "integrity": "sha512-kDMOq0qLtxV9f/SQv522h8cxZBqNZXuXNyjyezmfAAuribMyVXziljpQ/uQhfE1XLg2/TLTW2DsnoE4VAi/krg==",
+          "dev": true,
+          "requires": {
+            "abort-controller": "^3.0.0",
+            "buffer": "^6.0.3",
+            "events": "^3.3.0",
+            "process": "^0.11.10"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
+      }
+    },
     "node-releases": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.11.tgz",
@@ -34460,6 +35598,65 @@
         }
       }
     },
+    "ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.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"
+          }
+        },
+        "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"
+          }
+        }
+      }
+    },
+    "os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
+      "dev": true
+    },
     "p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -34494,9 +35691,9 @@
       "dev": true
     },
     "pako": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
-      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
     "param-case": {
@@ -34517,6 +35714,19 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "dev": true,
+      "requires": {
+        "asn1.js": "^5.2.0",
+        "browserify-aes": "^1.0.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -34528,6 +35738,13 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "peer": true
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -34585,11 +35802,24 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pathe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
-      "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
+      "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
     },
+    "pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "dev": true,
+      "requires": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
     "peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -34684,9 +35914,9 @@
       "dev": true
     },
     "pirates": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
-      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
       "dev": true
     },
     "pkg-dir": {
@@ -34758,193 +35988,6 @@
         "camelcase-css": "^2.0.1"
       }
     },
-    "postcss-loader": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
-      "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.4"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "dev": true,
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
-        "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-modules-extract-imports": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
-      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.5"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-modules-local-by-default": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
-      "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^4.1.1",
-        "postcss": "^7.0.32",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-modules-scope": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
-      "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.6",
-        "postcss-selector-parser": "^6.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-modules-values": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
-      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^4.0.0",
-        "postcss": "^7.0.6"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
     "postcss-nested": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
@@ -35135,6 +36178,36 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "browserify-rsa": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "parse-asn1": "^5.0.0",
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -35267,6 +36340,12 @@
         "strict-uri-encode": "^2.0.0"
       }
     },
+    "querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
+      "dev": true
+    },
     "queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -35316,6 +36395,16 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -35543,9 +36632,9 @@
       }
     },
     "react-inspector": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.1.tgz",
-      "integrity": "sha512-cxKSeFTf7jpSSVddm66sKdolG90qURAX3g1roTeaN6x0YEbtWc8JpmFN9+yIqLNH2uEkYerWLtJZIXRIFuBKrg==",
+      "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": {}
     },
@@ -36103,6 +37192,16 @@
         }
       }
     },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -36212,6 +37311,14 @@
         "neo-async": "^2.6.2"
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -36352,6 +37459,12 @@
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
       "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -36405,9 +37518,9 @@
           }
         },
         "semver": {
-          "version": "7.5.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+          "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -36652,168 +37765,92 @@
       "dev": true
     },
     "storybook": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.0.12.tgz",
-      "integrity": "sha512-HKi7NQQTZhBGEU3KUFxTNGtIZcG8+hokiO5TwcIr7s7smAVKdvj9vY5YGsVkiWF39o+5UtafW1B/i9D8lBFsYg==",
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.0.23.tgz",
+      "integrity": "sha512-eko4DZ6lheJZCsL55RJhYksXX3UWgdO6rkR52pmfhCjlitxf07We+lEuzVou8+HLg8jnSqLi2GIzDKh+hBS4og==",
       "dev": true,
       "requires": {
-        "@storybook/cli": "7.0.12"
+        "@storybook/cli": "7.0.23"
       }
     },
     "storybook-dark-mode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-2.1.1.tgz",
-      "integrity": "sha512-Ops6u/htODxIUXnAYASttqcbd2PRN723o0uIKpoYQn1+so2g6gYalpAhuysxnRhCG8yHsm6NJuX5drzzI+uFvQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-3.0.0.tgz",
+      "integrity": "sha512-aeAvqP/mmdccEiCsvx6aw3M0i7mZSiXROsrAsEQN8vl1lAg3FZN+y3Xu/f+ye59wLMRuKJC/JBp7E3/H7vLBRQ==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "^6.5.14",
-        "@storybook/api": "^6.5.14",
-        "@storybook/components": "^6.5.14",
-        "@storybook/core-events": "^6.5.14",
+        "@storybook/addons": "^7.0.0",
+        "@storybook/api": "^7.0.0",
+        "@storybook/components": "^7.0.0",
+        "@storybook/core-events": "^7.0.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/theming": "^6.5.14",
+        "@storybook/theming": "^7.0.0",
         "fast-deep-equal": "^3.1.3",
         "memoizerific": "^1.11.3"
+      }
+    },
+    "stream-browserify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
+      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.4",
+        "readable-stream": "^3.5.0"
       },
       "dependencies": {
-        "@storybook/addons": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz",
-          "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==",
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
           "dev": true,
           "requires": {
-            "@storybook/api": "6.5.16",
-            "@storybook/channels": "6.5.16",
-            "@storybook/client-logger": "6.5.16",
-            "@storybook/core-events": "6.5.16",
-            "@storybook/csf": "0.0.2--canary.4566f4d.1",
-            "@storybook/router": "6.5.16",
-            "@storybook/theming": "6.5.16",
-            "@types/webpack-env": "^1.16.0",
-            "core-js": "^3.8.2",
-            "global": "^4.4.0",
-            "regenerator-runtime": "^0.13.7"
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
           }
         },
-        "@storybook/api": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz",
-          "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==",
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
           "dev": true,
           "requires": {
-            "@storybook/channels": "6.5.16",
-            "@storybook/client-logger": "6.5.16",
-            "@storybook/core-events": "6.5.16",
-            "@storybook/csf": "0.0.2--canary.4566f4d.1",
-            "@storybook/router": "6.5.16",
-            "@storybook/semver": "^7.3.2",
-            "@storybook/theming": "6.5.16",
-            "core-js": "^3.8.2",
-            "fast-deep-equal": "^3.1.3",
-            "global": "^4.4.0",
-            "lodash": "^4.17.21",
-            "memoizerific": "^1.11.3",
-            "regenerator-runtime": "^0.13.7",
-            "store2": "^2.12.0",
-            "telejson": "^6.0.8",
-            "ts-dedent": "^2.0.0",
-            "util-deprecate": "^1.0.2"
+            "safe-buffer": "~5.2.0"
+          }
+        }
+      }
+    },
+    "stream-http": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-3.2.0.tgz",
+      "integrity": "sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==",
+      "dev": true,
+      "requires": {
+        "builtin-status-codes": "^3.0.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
           }
         },
-        "@storybook/channels": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz",
-          "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==",
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
           "dev": true,
           "requires": {
-            "core-js": "^3.8.2",
-            "ts-dedent": "^2.0.0",
-            "util-deprecate": "^1.0.2"
-          }
-        },
-        "@storybook/client-logger": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz",
-          "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==",
-          "dev": true,
-          "requires": {
-            "core-js": "^3.8.2",
-            "global": "^4.4.0"
-          }
-        },
-        "@storybook/components": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.16.tgz",
-          "integrity": "sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==",
-          "dev": true,
-          "requires": {
-            "@storybook/client-logger": "6.5.16",
-            "@storybook/csf": "0.0.2--canary.4566f4d.1",
-            "@storybook/theming": "6.5.16",
-            "core-js": "^3.8.2",
-            "memoizerific": "^1.11.3",
-            "qs": "^6.10.0",
-            "regenerator-runtime": "^0.13.7",
-            "util-deprecate": "^1.0.2"
-          }
-        },
-        "@storybook/core-events": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz",
-          "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==",
-          "dev": true,
-          "requires": {
-            "core-js": "^3.8.2"
-          }
-        },
-        "@storybook/csf": {
-          "version": "0.0.2--canary.4566f4d.1",
-          "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-          "integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-          "dev": true,
-          "requires": {
-            "lodash": "^4.17.15"
-          }
-        },
-        "@storybook/router": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz",
-          "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==",
-          "dev": true,
-          "requires": {
-            "@storybook/client-logger": "6.5.16",
-            "core-js": "^3.8.2",
-            "memoizerific": "^1.11.3",
-            "qs": "^6.10.0",
-            "regenerator-runtime": "^0.13.7"
-          }
-        },
-        "@storybook/theming": {
-          "version": "6.5.16",
-          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz",
-          "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==",
-          "dev": true,
-          "requires": {
-            "@storybook/client-logger": "6.5.16",
-            "core-js": "^3.8.2",
-            "memoizerific": "^1.11.3",
-            "regenerator-runtime": "^0.13.7"
-          }
-        },
-        "telejson": {
-          "version": "6.0.8",
-          "resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-          "integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-          "dev": true,
-          "requires": {
-            "@types/is-function": "^1.0.0",
-            "global": "^4.4.0",
-            "is-function": "^1.0.2",
-            "is-regex": "^1.1.2",
-            "is-symbol": "^1.0.3",
-            "isobject": "^4.0.0",
-            "lodash": "^4.17.21",
-            "memoizerific": "^1.11.3"
+            "safe-buffer": "~5.2.0"
           }
         }
       }
@@ -36943,40 +37980,6 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
-    "style-loader": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
-      "integrity": "sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^2.7.0"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
     "style-to-object": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.1.tgz",
@@ -37431,6 +38434,15 @@
         }
       }
     },
+    "timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "dev": true,
+      "requires": {
+        "setimmediate": "^1.0.4"
+      }
+    },
     "tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
@@ -37611,6 +38623,12 @@
         }
       }
     },
+    "tty-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
+      "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==",
+      "dev": true
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -37836,9 +38854,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.8.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+          "version": "8.9.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
+          "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
           "dev": true
         }
       }
@@ -37868,6 +38886,24 @@
         "punycode": "^2.1.0"
       }
     },
+    "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
+        }
+      }
+    },
     "use-callback-ref": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
@@ -38030,6 +39066,12 @@
         "unist-util-stringify-position": "^3.0.0"
       }
     },
+    "vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
+      "dev": true
+    },
     "void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -38054,6 +39096,15 @@
         "graceful-fs": "^4.1.2"
       }
     },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -38153,9 +39204,9 @@
           "dev": true
         },
         "schema-utils": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
-          "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
           "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.9",
@@ -38167,9 +39218,9 @@
       }
     },
     "webpack-hot-middleware": {
-      "version": "2.25.3",
-      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.3.tgz",
-      "integrity": "sha512-IK/0WAHs7MTu1tzLTjio73LjS3Ov+VvBKQmE8WPlJutgG5zT6Urgq/BbAdRrHTRpyzK0dvAvFh1Qg98akxgZpA==",
+      "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",
@@ -38255,15 +39306,6 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
-    "widest-line": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
-      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
-      "dev": true,
-      "requires": {
-        "string-width": "^4.0.0"
-      }
-    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index efe833849..420cec611 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -62,8 +62,8 @@
     "infisical-node": "^1.0.37",
     "jspdf": "^2.5.1",
     "jsrp": "^0.2.4",
-    "lottie-react": "^2.4.0",
     "jwt-decode": "^3.1.2",
+    "lottie-react": "^2.4.0",
     "markdown-it": "^13.0.1",
     "next": "^12.3.4",
     "posthog-js": "^1.58.0",
@@ -91,14 +91,14 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.0-beta.30",
-    "@storybook/addon-interactions": "^7.0.0-beta.30",
-    "@storybook/addon-links": "^7.0.0-beta.30",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/blocks": "^7.0.0-beta.30",
-    "@storybook/nextjs": "^7.0.0-beta.30",
-    "@storybook/react": "^7.0.0-beta.30",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-interactions": "^7.0.23",
+    "@storybook/addon-links": "^7.0.23",
+    "@storybook/addon-styling": "^1.3.0",
+    "@storybook/blocks": "^7.0.23",
+    "@storybook/nextjs": "^7.0.23",
+    "@storybook/react": "^7.0.23",
+    "@storybook/testing-library": "^0.2.0",
     "@tailwindcss/typography": "^0.5.4",
     "@types/jsrp": "^0.2.4",
     "@types/node": "18.11.9",
@@ -118,12 +118,12 @@
     "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.12",
     "postcss": "^8.4.14",
     "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.2.2",
-    "storybook": "^7.0.0-beta.30",
-    "storybook-dark-mode": "^2.0.5",
+    "storybook": "^7.0.23",
+    "storybook-dark-mode": "^3.0.0",
     "tailwindcss": "3.2",
     "typescript": "^4.9.3"
   }

From 9c0e32a790fb6a080836d5586de7276924a31046 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sat, 24 Jun 2023 23:35:55 +0530
Subject: [PATCH 04/22] fix(integrations-page): added back cloudflare changes
 in main integrations page

---
 .../IntegrationPage.utils.tsx                 | 53 +++++++-------
 .../IntegrationsPage/IntegrationsPage.tsx     | 69 ++++++++++---------
 2 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
index 3a8c3e130..3db86abf2 100644
--- a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
@@ -1,17 +1,17 @@
-import crypto from 'crypto';
+import crypto from "crypto";
 
-import { UserWsKeyPair, TCloudIntegration } from '@app/hooks/api/types';
+import { UserWsKeyPair, TCloudIntegration } from "@app/hooks/api/types";
 
 import {
   decryptAssymmetric,
   encryptAssymmetric
-} from '../../components/utilities/cryptography/crypto';
+} from "../../components/utilities/cryptography/crypto";
 
 export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) => {
-  const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
 
   if (!PRIVATE_KEY) {
-    throw new Error('Private Key missing');
+    throw new Error("Private Key missing");
   }
 
   const WORKSPACE_KEY = decryptAssymmetric({
@@ -33,64 +33,67 @@ export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) =
 export const redirectForProviderAuth = (integrationOption: TCloudIntegration) => {
   try {
     // generate CSRF token for OAuth2 code-token exchange integrations
-    const state = crypto.randomBytes(16).toString('hex');
-    localStorage.setItem('latestCSRFToken', state);
+    const state = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", state);
 
-    let link = '';
+    let link = "";
     switch (integrationOption.slug) {
-      case 'azure-key-vault':
+      case "azure-key-vault":
         link = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
         break;
-      case 'aws-parameter-store':
+      case "aws-parameter-store":
         link = `${window.location.origin}/integrations/aws-parameter-store/authorize`;
         break;
-      case 'aws-secret-manager':
+      case "aws-secret-manager":
         link = `${window.location.origin}/integrations/aws-secret-manager/authorize`;
         break;
-      case 'heroku':
+      case "heroku":
         link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
         break;
-      case 'vercel':
+      case "vercel":
         link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`;
         break;
-      case 'netlify':
+      case "netlify":
         link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
         break;
-      case 'github':
+      case "github":
         link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
         break;
-      case 'gitlab':
+      case "gitlab":
         link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
         break;
-      case 'render':
+      case "render":
         link = `${window.location.origin}/integrations/render/authorize`;
         break;
-      case 'flyio':
+      case "flyio":
         link = `${window.location.origin}/integrations/flyio/authorize`;
         break;
-      case 'circleci':
+      case "circleci":
         link = `${window.location.origin}/integrations/circleci/authorize`;
         break;
-      case 'travisci':
+      case "travisci":
         link = `${window.location.origin}/integrations/travisci/authorize`;
         break;
-      case 'supabase':
+      case "supabase":
         link = `${window.location.origin}/integrations/supabase/authorize`;
         break;
-      case 'checkly':
+      case "checkly":
         link = `${window.location.origin}/integrations/checkly/authorize`;
         break;
-      case 'railway':
+      case "railway":
         link = `${window.location.origin}/integrations/railway/authorize`;
         break;
-      case 'hashicorp-vault':
+      case "hashicorp-vault":
         link = `${window.location.origin}/integrations/hashicorp-vault/authorize`;
         break;
+      case "cloudflare-pages":
+        link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
+        break;
       default:
         break;
     }
 
-    if (link !== '') {
+    if (link !== "") {
       window.location.assign(link);
     }
   } catch (err) {
diff --git a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
index e90cabf13..54f859f99 100644
--- a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
@@ -1,12 +1,12 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRouter } from 'next/router';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
 
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
-import NavHeader from '@app/components/navigation/NavHeader';
-import { Button,Modal, ModalContent } from '@app/components/v2';
-import { useWorkspace } from '@app/context';
-import { usePopUp } from '@app/hooks';
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import NavHeader from "@app/components/navigation/NavHeader";
+import { Button, Modal, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
 import {
   useDeleteIntegration,
   useDeleteIntegrationAuth,
@@ -15,17 +15,18 @@ import {
   useGetWorkspaceAuthorizations,
   useGetWorkspaceBot,
   useGetWorkspaceIntegrations,
-  useUpdateBotActiveStatus} from '@app/hooks/api';
-import { IntegrationAuth } from '@app/hooks/api/types';
+  useUpdateBotActiveStatus
+} from "@app/hooks/api";
+import { IntegrationAuth } from "@app/hooks/api/types";
 
-import { CloudIntegrationSection } from './components/CloudIntegrationSection';
-import { FrameworkIntegrationSection } from './components/FrameworkIntegrationSection';
-import { IntegrationsSection } from './components/IntegrationsSection';
+import { CloudIntegrationSection } from "./components/CloudIntegrationSection";
+import { FrameworkIntegrationSection } from "./components/FrameworkIntegrationSection";
+import { IntegrationsSection } from "./components/IntegrationsSection";
 import {
   generateBotKey,
   redirectForProviderAuth,
   redirectToIntegrationAppConfigScreen
-} from './IntegrationPage.utils';
+} from "./IntegrationPage.utils";
 
 type Props = {
   frameworkIntegrations: Array<{ name: string; slug: string; image: string; docsLink: string }>;
@@ -37,15 +38,15 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   const router = useRouter();
 
   const { currentWorkspace } = useWorkspace();
-  const workspaceId = currentWorkspace?._id || '';
+  const workspaceId = currentWorkspace?._id || "";
   const environments = currentWorkspace?.environments || [];
 
   const { data: latestWsKey } = useGetUserWsKey(workspaceId);
 
   const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-    'activeBot',
-    'revokeProviderPermissionConf',
-    'removeIntegrationConf'
+    "activeBot",
+    "revokeProviderPermissionConf",
+    "removeIntegrationConf"
   ] as const);
 
   const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } =
@@ -126,7 +127,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   // confirmation to user passing the bot key for provider to get secret access
   const handleProviderIntegrationStart = (provider: string) => {
     if (!bot?.isActive) {
-      handlePopUpOpen('activeBot', { provider });
+      handlePopUpOpen("activeBot", { provider });
       return;
     }
     handleProviderIntegration(provider);
@@ -135,7 +136,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   const handleUserAcceptBotCondition = () => {
     const { provider } = popUp.activeBot?.data as { provider: string };
     handleProviderIntegration(provider);
-    handlePopUpClose('activeBot');
+    handlePopUpClose("activeBot");
   };
 
   const handleIntegrationDelete = async (integrationId: string, cb: () => void) => {
@@ -143,14 +144,14 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
       await deleteIntegration({ id: integrationId, workspaceId });
       if (cb) cb();
       createNotification({
-        type: 'success',
-        text: 'Deleted integration'
+        type: "success",
+        text: "Deleted integration"
       });
     } catch (err) {
       console.log(err);
       createNotification({
-        type: 'error',
-        text: 'Failed to delete integration'
+        type: "error",
+        text: "Failed to delete integration"
       });
     }
   };
@@ -165,21 +166,21 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
       });
       if (cb) cb();
       createNotification({
-        type: 'success',
-        text: 'Revoked provider authentication'
+        type: "success",
+        text: "Revoked provider authentication"
       });
     } catch (err) {
       console.error(err);
       createNotification({
-        type: 'error',
-        text: 'Failed to revoke provider authentication'
+        type: "error",
+        text: "Failed to revoke provider authentication"
       });
     }
   };
 
   return (
     <div className="container mx-auto px-8 pb-12 text-white">
-      <NavHeader pageName={t('integrations.title')} isProjectRelated />
+      <NavHeader pageName={t("integrations.title")} isProjectRelated />
       <IntegrationsSection
         isLoading={isIntegrationLoading}
         integrations={integrations}
@@ -195,17 +196,17 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
       />
       <Modal
         isOpen={popUp.activeBot?.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle('activeBot', isOpen)}
+        onOpenChange={(isOpen) => handlePopUpToggle("activeBot", isOpen)}
       >
         <ModalContent
-          title={t('integrations.grant-access-to-secrets') as string}
+          title={t("integrations.grant-access-to-secrets") as string}
           footerContent={
             <div className="flex items-center space-x-2">
               <Button onClick={() => handleUserAcceptBotCondition()}>
-                {t('integrations.grant-access-button') as string}
+                {t("integrations.grant-access-button") as string}
               </Button>
               <Button
-                onClick={() => handlePopUpClose('activeBot')}
+                onClick={() => handlePopUpClose("activeBot")}
                 variant="outline_bg"
                 colorSchema="secondary"
               >
@@ -214,7 +215,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
             </div>
           }
         >
-          {t('integrations.why-infisical-needs-access')}
+          {t("integrations.why-infisical-needs-access")}
         </ModalContent>
       </Modal>
       <FrameworkIntegrationSection frameworks={frameworkIntegrations} />

From 7c77cc4ea455b836e05e481af4116158d9d7f099 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sat, 24 Jun 2023 23:44:52 +0530
Subject: [PATCH 05/22] fix(integrations-page): eslint fixes to the new
 upstream changes made

---
 frontend/package.json                         |  2 +-
 .../DeleteActionModal/DeleteActionModal.tsx   |  2 +-
 frontend/src/hooks/api/bots/index.tsx         |  2 +-
 frontend/src/hooks/api/bots/queries.tsx       |  8 ++--
 frontend/src/hooks/api/integrations/index.tsx |  2 +-
 .../src/hooks/api/integrations/queries.tsx    | 12 +++---
 .../IntegrationPage.utils.tsx                 |  2 +-
 .../CloudIntegrationSection.tsx               | 40 +++++++++----------
 .../CloudIntegrationSection/index.tsx         |  2 +-
 .../FrameworkIntegrationSection.tsx           | 10 ++---
 .../FrameworkIntegrationSection/index.tsx     |  2 +-
 .../IntegrationsSection.tsx                   | 36 ++++++++---------
 .../components/IntegrationsSection/index.tsx  |  2 +-
 frontend/src/views/IntegrationsPage/index.tsx |  2 +-
 14 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 420cec611..a678504f7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,7 @@
     "start": "next start",
     "start:docker": "next build && next start",
     "lint": "eslint --ext js,ts,tsx ./src",
-    "lint-and-fix": "eslint --fix --ext js,ts,tsx ./src",
+    "lint:fix": "eslint --fix --ext js,ts,tsx ./src",
     "type-check": "tsc --project tsconfig.json",
     "storybook": "storybook dev -p 6006 -s ./public",
     "build-storybook": "storybook build"
diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
index ebe45bf9b..5c1bb376a 100644
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -24,7 +24,7 @@ export const DeleteActionModal = ({
   deleteKey,
   onDeleteApproved,
   title,
-  subTitle = 'This action is irreversible!'
+  subTitle = "This action is irreversible!"
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();
diff --git a/frontend/src/hooks/api/bots/index.tsx b/frontend/src/hooks/api/bots/index.tsx
index aa2ee6030..17a5fe768 100644
--- a/frontend/src/hooks/api/bots/index.tsx
+++ b/frontend/src/hooks/api/bots/index.tsx
@@ -1 +1 @@
-export { useGetWorkspaceBot, useUpdateBotActiveStatus } from './queries';
+export { useGetWorkspaceBot, useUpdateBotActiveStatus } from "./queries";
diff --git a/frontend/src/hooks/api/bots/queries.tsx b/frontend/src/hooks/api/bots/queries.tsx
index 14c5d4f94..1c28c9640 100644
--- a/frontend/src/hooks/api/bots/queries.tsx
+++ b/frontend/src/hooks/api/bots/queries.tsx
@@ -1,11 +1,11 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { apiRequest } from '@app/config/request';
+import { apiRequest } from "@app/config/request";
 
-import { TBot, TSetBotActiveStatusDto } from './types';
+import { TBot, TSetBotActiveStatusDto } from "./types";
 
 const queryKeys = {
-  getBot: (workspaceId: string) => [{ workspaceId }, 'bot'] as const
+  getBot: (workspaceId: string) => [{ workspaceId }, "bot"] as const
 };
 
 const fetchWorkspaceBot = async (workspaceId: string) => {
diff --git a/frontend/src/hooks/api/integrations/index.tsx b/frontend/src/hooks/api/integrations/index.tsx
index 9ea8edb17..3ad1051f4 100644
--- a/frontend/src/hooks/api/integrations/index.tsx
+++ b/frontend/src/hooks/api/integrations/index.tsx
@@ -1 +1 @@
-export { useDeleteIntegration,useGetCloudIntegrations } from './queries';
+export { useDeleteIntegration,useGetCloudIntegrations } from "./queries";
diff --git a/frontend/src/hooks/api/integrations/queries.tsx b/frontend/src/hooks/api/integrations/queries.tsx
index 6f8db4882..c1353b6c6 100644
--- a/frontend/src/hooks/api/integrations/queries.tsx
+++ b/frontend/src/hooks/api/integrations/queries.tsx
@@ -1,17 +1,17 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { apiRequest } from '@app/config/request';
+import { apiRequest } from "@app/config/request";
 
-import { workspaceKeys } from '../workspace/queries';
-import { TCloudIntegration } from './types';
+import { workspaceKeys } from "../workspace/queries";
+import { TCloudIntegration } from "./types";
 
 export const integrationQueryKeys = {
-  getIntegrations: () => ['integrations'] as const
+  getIntegrations: () => ["integrations"] as const
 };
 
 const fetchIntegrations = async () => {
   const { data } = await apiRequest.get<{ integrationOptions: TCloudIntegration[] }>(
-    '/api/v1/integration-auth/integration-options'
+    "/api/v1/integration-auth/integration-options"
   );
 
   return data.integrationOptions;
diff --git a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
index 3db86abf2..fc60ead6d 100644
--- a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
@@ -1,6 +1,6 @@
 import crypto from "crypto";
 
-import { UserWsKeyPair, TCloudIntegration } from "@app/hooks/api/types";
+import { TCloudIntegration,UserWsKeyPair } from "@app/hooks/api/types";
 
 import {
   decryptAssymmetric,
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
index 5a41f9984..f3b88a6c0 100644
--- a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
@@ -1,10 +1,10 @@
-import { useTranslation } from 'react-i18next';
-import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useTranslation } from "react-i18next";
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { DeleteActionModal,Skeleton, Tooltip } from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
-import { IntegrationAuth, TCloudIntegration } from '@app/hooks/api/types';
+import { DeleteActionModal,Skeleton, Tooltip } from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { IntegrationAuth, TCloudIntegration } from "@app/hooks/api/types";
 
 type Props = {
   isLoading?: boolean;
@@ -26,7 +26,7 @@ export const CloudIntegrationSection = ({
 }: Props) => {
   const { t } = useTranslation();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    'deleteConfirmation'
+    "deleteConfirmation"
   ] as const);
 
   const isEmpty = !isLoading && !cloudIntegrations?.length;
@@ -34,12 +34,12 @@ export const CloudIntegrationSection = ({
   return (
     <div>
       <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
-        <h1 className="text-3xl font-semibold">{t('integrations.cloud-integrations')}</h1>
-        <p className="text-base text-gray-400">{t('integrations.click-to-start')}</p>
+        <h1 className="text-3xl font-semibold">{t("integrations.cloud-integrations")}</h1>
+        <p className="text-base text-gray-400">{t("integrations.click-to-start")}</p>
       </div>
       <div
         className="mx-6 grid grid-flow-dense gap-4"
-        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))' }}
+        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(256px, 1fr))" }}
       >
         {isLoading &&
           Array.from({ length: 12 }).map((_, index) => (
@@ -53,8 +53,8 @@ export const CloudIntegrationSection = ({
               tabIndex={0}
               className={`group relative ${
                 cloudIntegration.isAvailable
-                  ? 'cursor-pointer duration-200 hover:bg-mineshaft-700'
-                  : 'opacity-50'
+                  ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
+                  : "opacity-50"
               } flex h-32 flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4`}
               onClick={() => {
                 if (!cloudIntegration.isAvailable) return;
@@ -68,11 +68,11 @@ export const CloudIntegrationSection = ({
                 width={70}
                 alt="integration logo"
               />
-              {cloudIntegration.name.split(' ').length > 2 ? (
+              {cloudIntegration.name.split(" ").length > 2 ? (
                 <div className="ml-4 max-w-xs text-3xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
-                  <div>{cloudIntegration.name.split(' ')[0]}</div>
+                  <div>{cloudIntegration.name.split(" ")[0]}</div>
                   <div className="text-base">
-                    {cloudIntegration.name.split(' ')[1]} {cloudIntegration.name.split(' ')[2]}
+                    {cloudIntegration.name.split(" ")[1]} {cloudIntegration.name.split(" ")[2]}
                   </div>
                 </div>
               ) : (
@@ -95,7 +95,7 @@ export const CloudIntegrationSection = ({
                           tabIndex={0}
                           onClick={async (event) => {
                             event.stopPropagation();
-                            handlePopUpOpen('deleteConfirmation', {
+                            handlePopUpOpen("deleteConfirmation", {
                               provider: cloudIntegration.slug
                             });
                           }}
@@ -123,15 +123,15 @@ export const CloudIntegrationSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteConfirmation.isOpen}
         title={`Are you sure want to revoke access ${
-          (popUp?.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider || ' '
+          (popUp?.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider || " "
         }?`}
         subTitle="This will remove all the secret integration of this provider!!!"
-        onChange={(isOpen) => handlePopUpToggle('deleteConfirmation', isOpen)}
-        deleteKey={(popUp?.deleteConfirmation?.data as TRevokeIntegrationPopUp)?.provider || ''}
+        onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
+        deleteKey={(popUp?.deleteConfirmation?.data as TRevokeIntegrationPopUp)?.provider || ""}
         onDeleteApproved={async () => {
           onIntegrationRevoke(
             (popUp.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider,
-            () => handlePopUpClose('deleteConfirmation')
+            () => handlePopUpClose("deleteConfirmation")
           );
         }}
       />
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
index ffb6c738d..62f7a006c 100644
--- a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
@@ -1 +1 @@
-export { CloudIntegrationSection } from './CloudIntegrationSection';
+export { CloudIntegrationSection } from "./CloudIntegrationSection";
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
index c51b2d3ee..1b2a4f5ce 100644
--- a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 type Props = {
   frameworks: Array<{
@@ -15,12 +15,12 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
   return (
     <>
       <div className="mx-4 mt-12 mb-4 flex flex-col items-start justify-between px-2 text-xl">
-        <h1 className="text-3xl font-semibold">{t('integrations.framework-integrations')}</h1>
-        <p className="text-base text-gray-400">{t('integrations.click-to-setup')}</p>
+        <h1 className="text-3xl font-semibold">{t("integrations.framework-integrations")}</h1>
+        <p className="text-base text-gray-400">{t("integrations.click-to-setup")}</p>
       </div>
       <div
         className="mx-6 mt-4 grid grid-flow-dense gap-4"
-        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))' }}
+        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))" }}
       >
         {frameworks.map((framework) => (
           <a
@@ -32,7 +32,7 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
           >
             <div
               className={`flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 font-semibold text-gray-300 duration-200 hover:bg-mineshaft-700 group-hover:text-gray-200 ${
-                framework?.name?.split(' ').length > 1 ? 'px-1 text-sm' : 'px-2 text-xl'
+                framework?.name?.split(" ").length > 1 ? "px-1 text-sm" : "px-2 text-xl"
               } w-full max-w-xs text-center`}
             >
               {framework?.image && (
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
index 04bbda30b..1738b8179 100644
--- a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
@@ -1 +1 @@
-export { FrameworkIntegrationSection } from './FrameworkIntegrationSection';
+export { FrameworkIntegrationSection } from "./FrameworkIntegrationSection";
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index c38242990..5c0df8fd7 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -1,6 +1,6 @@
-import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { integrationSlugNameMapping } from 'public/data/frequentConstants';
+import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
 import {
   DeleteActionModal,
@@ -11,9 +11,9 @@ import {
   Select,
   SelectItem,
   Skeleton
-} from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
-import { TIntegration } from '@app/hooks/api/types';
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { TIntegration } from "@app/hooks/api/types";
 
 type Props = {
   environments: Array<{ name: string; slug: string }>;
@@ -29,7 +29,7 @@ export const IntegrationsSection = ({
   onIntegrationDelete
 }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    'deleteConfirmation'
+    "deleteConfirmation"
   ] as const);
 
   return (
@@ -95,15 +95,15 @@ export const IntegrationsSection = ({
                 <div className="ml-2 flex flex-col">
                   <FormLabel label="App" />
                   <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                    {integration.integration === 'hashicorp-vault'
+                    {integration.integration === "hashicorp-vault"
                       ? `${integration.app} - path: ${integration.path}`
                       : integration.app}
                   </div>
                 </div>
-                {(integration.integration === 'vercel' ||
-                  integration.integration === 'netlify' ||
-                  integration.integration === 'railway' ||
-                  integration.integration === 'gitlab') && (
+                {(integration.integration === "vercel" ||
+                  integration.integration === "netlify" ||
+                  integration.integration === "railway" ||
+                  integration.integration === "gitlab") && (
                   <div className="ml-4 flex flex-col">
                     <FormLabel label="Target Environment" />
                     <div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
@@ -115,7 +115,7 @@ export const IntegrationsSection = ({
               <div className="flex cursor-default items-center">
                 <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
                   <IconButton
-                    onClick={() => handlePopUpOpen('deleteConfirmation', integration)}
+                    onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
                     ariaLabel="delete"
                     colorSchema="danger"
                   >
@@ -130,13 +130,13 @@ export const IntegrationsSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteConfirmation.isOpen}
         title={`Are you sure want to remove ${
-          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || ' '
-        } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || ' '}?`}
-        onChange={(isOpen) => handlePopUpToggle('deleteConfirmation', isOpen)}
-        deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ''}
+          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || " "
+        } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
+        deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""}
         onDeleteApproved={async () =>
           onIntegrationDelete(popUp?.deleteConfirmation.data as TIntegration, () =>
-            handlePopUpClose('deleteConfirmation')
+            handlePopUpClose("deleteConfirmation")
           )
         }
       />
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
index a171edb8a..6f40d79fa 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
@@ -1 +1 @@
-export { IntegrationsSection } from './IntegrationsSection';
+export { IntegrationsSection } from "./IntegrationsSection";
diff --git a/frontend/src/views/IntegrationsPage/index.tsx b/frontend/src/views/IntegrationsPage/index.tsx
index 5cef86ea2..eb9f8496e 100644
--- a/frontend/src/views/IntegrationsPage/index.tsx
+++ b/frontend/src/views/IntegrationsPage/index.tsx
@@ -1 +1 @@
-export { IntegrationsPage } from './IntegrationsPage';
+export { IntegrationsPage } from "./IntegrationsPage";

From a127d452bd4ce22ddb6ad455cc112a62f1b734de Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Sun, 25 Jun 2023 17:03:41 +0700
Subject: [PATCH 06/22] Continue to make progress on usage and billing page
 revamp

---
 .../controllers/v1/organizationsController.ts | 142 ++++++++-
 backend/src/ee/routes/v1/organizations.ts     | 151 +++++++++
 .../src/components/navigation/NavHeader.tsx   |   2 +-
 frontend/src/hooks/api/organization/index.ts  |  19 +-
 .../src/hooks/api/organization/queries.tsx    | 289 +++++++++++++++++-
 frontend/src/hooks/api/organization/types.ts  |   5 +
 frontend/src/pages/settings/billing/[id].tsx  |  80 ++---
 .../BillingSettingsPage.tsx                   | 120 ++++++++
 .../BillingCloudTab/BillingCloudTab.tsx       |  33 ++
 .../BillingCloudTab/CurrentPlanSection.tsx    |  94 ++++++
 .../BillingCloudTab/ManagePlansModal.tsx      |  78 +++++
 .../BillingCloudTab/ManagePlansTable.tsx      | 187 ++++++++++++
 .../BillingCloudTab/PreviewSection.tsx        |  75 +++++
 .../components/BillingCloudTab/index.tsx      |   1 +
 .../BillingDetailsTab/BillingDetailsTab.tsx   |  15 +
 .../BillingDetailsTab/CompanyNameSection.tsx  |  98 ++++++
 .../BillingDetailsTab/InvoiceEmailSection.tsx |  86 ++++++
 .../BillingDetailsTab/PmtMethodsSection.tsx   | 130 ++++++++
 .../BillingDetailsTab/TaxIDSection.tsx        | 276 +++++++++++++++++
 .../components/BillingDetailsTab/index.tsx    |   1 +
 .../BillingReceiptsTab/BillingReceiptsTab.tsx | 100 ++++++
 .../components/BillingReceiptsTab/index.tsx   |   1 +
 .../BillingSelfHostedTab.tsx                  |   0
 .../components/BillingSelfHostedTab/index.tsx |   0
 .../BillingSettingsPage/components/index.tsx  |   3 +
 .../Settings/BillingSettingsPage/index.tsx    |   1 +
 .../OrgSettingsPage/OrgSettingsPage.tsx       |  21 --
 27 files changed, 1940 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/index.tsx

diff --git a/backend/src/ee/controllers/v1/organizationsController.ts b/backend/src/ee/controllers/v1/organizationsController.ts
index 7ab2c5d32..d91efa057 100644
--- a/backend/src/ee/controllers/v1/organizationsController.ts
+++ b/backend/src/ee/controllers/v1/organizationsController.ts
@@ -3,8 +3,37 @@ import { getLicenseServerUrl } from "../../../config";
 import { licenseServerKeyRequest } from "../../../config/request";
 import { EELicenseService } from "../../services";
 
+export const createProductCheckoutSession = async (req: Request, res: Response) => {
+    const {
+        productId,
+        success_url
+    } = req.body;
+    console.log('createProductCheckoutSession req.body: ', req.body);
+
+    const { data } = await licenseServerKeyRequest.post(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details/session`,
+        {
+            productId,
+            success_url
+        }
+    ); 
+    console.log('createProductCheckoutSession data: ', data);
+
+    return res.status(200).send(data);
+}
+
+export const getOrganizationPlansTable = async (req: Request, res: Response) => {
+    const billingCycle = req.query.billingCycle as string;
+    
+    const { data } = await licenseServerKeyRequest.get(
+        `${await getLicenseServerUrl()}/api/license-server/v1/cloud-products?billing-cycle=${billingCycle}`
+    ); 
+
+    return res.status(200).send(data); 
+}
+
 /**
- * Return the organization's current plan and allowed feature set
+ * Return the organization current plan's feature set
  */
 export const getOrganizationPlan = async (req: Request, res: Response) => {
     const { organizationId } = req.params;
@@ -17,6 +46,34 @@ export const getOrganizationPlan = async (req: Request, res: Response) => {
     });
 }
 
+/**
+ * Return the organization's current plan's billing info
+ * @param req 
+ * @param res 
+ * @returns 
+ */
+export const getOrganizationPlanBillingInfo = async (req: Request, res: Response) => {
+    const { data } = await licenseServerKeyRequest.get(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/cloud-plan/billing`
+    ); 
+    
+    return res.status(200).send(data);
+}
+
+/**
+ * Return the organization's current plan's feature table
+ * @param req 
+ * @param res 
+ * @returns 
+ */
+export const getOrganizationPlanTable = async (req: Request, res: Response) => {
+    const { data } = await licenseServerKeyRequest.get(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/cloud-plan/table`
+    ); 
+
+    return res.status(200).send(data);
+}
+
 /**
  * Update the organization plan to product with id [productId]
  * @param req 
@@ -28,16 +85,44 @@ export const updateOrganizationPlan = async (req: Request, res: Response) => {
         productId,
     } = req.body;
 
-    const { data  } = await licenseServerKeyRequest.patch(
+    console.log('backend update productId: ', productId);
+    const { data } = await licenseServerKeyRequest.patch(
         `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/cloud-plan`,
         {
             productId,
         }
     ); 
+
+    console.log(' ttproductId: ', data);
     
     return res.status(200).send(data);
 }
 
+export const getOrganizationBillingDetails = async (req: Request, res: Response) => {
+    const { data  } = await licenseServerKeyRequest.get(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details`
+    ); 
+
+    return res.status(200).send(data);
+}
+
+export const updateOrganizationBillingDetails = async (req: Request, res: Response) => {
+    const {
+        name,
+        email
+    } = req.body;
+
+    const { data } = await licenseServerKeyRequest.patch(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details`,
+        {
+            ...(name ? { name } : {}),
+            ...(email ? { email } : {})
+        }
+    ); 
+
+    return res.status(200).send(data); 
+}
+
 /**
  * Return the organization's payment methods on file
  */
@@ -46,9 +131,7 @@ export const getOrganizationPmtMethods = async (req: Request, res: Response) =>
         `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details/payment-methods`
     );
 
-    return res.status(200).send({
-        pmtMethods,
-    }); 
+    return res.status(200).send(pmtMethods); 
 }
 
 /**
@@ -81,4 +164,53 @@ export const deleteOrganizationPmtMethod = async (req: Request, res: Response) =
     );
         
     return res.status(200).send(data);
+}
+
+/**
+ * Return the organization's tax ids on file
+ */
+export const getOrganizationTaxIds = async (req: Request, res: Response) => {
+    const { data: { tax_ids } } = await licenseServerKeyRequest.get(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details/tax-ids`
+    );
+
+    return res.status(200).send(tax_ids); 
+}
+
+/**
+ * Add tax id to organization
+ */
+export const addOrganizationTaxId = async (req: Request, res: Response) => {
+    const {
+        type,
+        value
+    } = req.body;
+
+    const { data } = await licenseServerKeyRequest.post(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details/tax-ids`,
+        {
+            type,
+            value
+        }
+    );
+
+    return res.status(200).send(data); 
+}
+
+export const deleteOrganizationTaxId = async (req: Request, res: Response) => {
+    const { taxId } = req.params;
+
+    const { data } = await licenseServerKeyRequest.delete(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details/tax-ids/${taxId}`,
+    );
+        
+    return res.status(200).send(data); 
+}
+
+export const getOrganizationInvoices = async (req: Request, res: Response) => {
+    const { data } = await licenseServerKeyRequest.get(
+        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/invoices`
+    );
+
+    return res.status(200).send(data); 
 }
\ No newline at end of file
diff --git a/backend/src/ee/routes/v1/organizations.ts b/backend/src/ee/routes/v1/organizations.ts
index 5a9c603b1..e9ea8f0e4 100644
--- a/backend/src/ee/routes/v1/organizations.ts
+++ b/backend/src/ee/routes/v1/organizations.ts
@@ -11,6 +11,37 @@ import {
     ACCEPTED, ADMIN, MEMBER, OWNER,
 } from "../../../variables";
 
+router.post(
+    "/:organizationId/billing-details/session",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    body("productId").exists().trim(),
+    body("success_url").exists().trim(),
+    validateRequest,
+    organizationsController.createProductCheckoutSession
+);
+
+router.get(
+    "/:organizationId/plans/table",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    query("billingCycle").exists().isString().isIn(["monthly", "yearly"]),
+    validateRequest,
+    organizationsController.getOrganizationPlansTable
+);
+
 router.get(
     "/:organizationId/plan",
     requireAuth({
@@ -26,6 +57,36 @@ router.get(
     organizationsController.getOrganizationPlan
 );
 
+router.get(
+    "/:organizationId/plan/billing",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    query("workspaceId").optional().isString(),
+    validateRequest,
+    organizationsController.getOrganizationPlanBillingInfo
+);
+
+router.get(
+    "/:organizationId/plan/table",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    query("workspaceId").optional().isString(),
+    validateRequest,
+    organizationsController.getOrganizationPlanTable
+);
+
 router.patch(
     "/:organizationId/plan",
     requireAuth({
@@ -41,6 +102,36 @@ router.patch(
     organizationsController.updateOrganizationPlan
 );
 
+router.get(
+    "/:organizationId/billing-details",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    validateRequest,
+    organizationsController.getOrganizationBillingDetails
+);
+
+router.patch(
+    "/:organizationId/billing-details",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    body("email").optional().isString().trim(),
+    body("name").optional().isString().trim(),
+    validateRequest,
+    organizationsController.updateOrganizationBillingDetails
+);
+
 router.get(
     "/:organizationId/billing-details/payment-methods",
     requireAuth({
@@ -81,8 +172,68 @@ router.delete(
         acceptedStatuses: [ACCEPTED],
     }),
     param("organizationId").exists().trim(),
+    param("pmtMethodId").exists().trim(),
     validateRequest,
     organizationsController.deleteOrganizationPmtMethod
 );
 
+router.get(
+    "/:organizationId/billing-details/tax-ids",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    validateRequest,
+    organizationsController.getOrganizationTaxIds
+);
+
+router.post(
+    "/:organizationId/billing-details/tax-ids",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    body("type").exists().isString(),
+    body("value").exists().isString(),
+    validateRequest,
+    organizationsController.addOrganizationTaxId
+);
+
+router.delete(
+    "/:organizationId/billing-details/tax-ids/:taxId",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    param("taxId").exists().trim(),
+    validateRequest,
+    organizationsController.deleteOrganizationTaxId
+);
+
+router.get(
+    "/:organizationId/invoices",
+    requireAuth({
+		acceptedAuthModes: ["jwt", "apiKey"],
+	}),
+    requireOrganizationAuth({
+        acceptedRoles: [OWNER, ADMIN, MEMBER],
+        acceptedStatuses: [ACCEPTED],
+    }),
+    param("organizationId").exists().trim(),
+    validateRequest,
+    organizationsController.getOrganizationInvoices
+);
+
 export default router;
\ No newline at end of file
diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx
index 6891de792..4bbdce1bc 100644
--- a/frontend/src/components/navigation/NavHeader.tsx
+++ b/frontend/src/components/navigation/NavHeader.tsx
@@ -57,7 +57,7 @@ export default function NavHeader({
   );
 
   return (
-    <div className="ml-6 flex flex-row items-center pt-6">
+    <div className="flex flex-row items-center pt-6">
       <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
         {currentOrg?.name?.charAt(0)}
       </div>
diff --git a/frontend/src/hooks/api/organization/index.ts b/frontend/src/hooks/api/organization/index.ts
index 107978949..a856001c7 100644
--- a/frontend/src/hooks/api/organization/index.ts
+++ b/frontend/src/hooks/api/organization/index.ts
@@ -1 +1,18 @@
-export { useGetOrganization, useRenameOrg } from "./queries";
+export {
+    useGetOrgPlanBillingInfo,
+    useGetOrgPlanTable,
+    useGetOrgPlansTable,
+    useGetOrganization, 
+    useRenameOrg, 
+    useGetOrgBillingDetails,
+    useUpdateOrgBillingDetails,
+    useGetOrgPmtMethods,
+    useAddOrgPmtMethod,
+    useDeleteOrgPmtMethod,
+    useGetOrgTaxIds,
+    useAddOrgTaxId,
+    useDeleteOrgTaxId,
+    useGetOrgInvoices,
+    useUpdateOrgPlan,
+    useCreateProductCheckoutSession
+} from "./queries";
diff --git a/frontend/src/hooks/api/organization/queries.tsx b/frontend/src/hooks/api/organization/queries.tsx
index 7e02b21a5..08476ba00 100644
--- a/frontend/src/hooks/api/organization/queries.tsx
+++ b/frontend/src/hooks/api/organization/queries.tsx
@@ -1,11 +1,16 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-
 import { apiRequest } from "@app/config/request";
-
-import { Organization, RenameOrgDTO } from "./types";
+import { Organization, RenameOrgDTO, BillingDetails } from "./types";
 
 const organizationKeys = {
-  getUserOrganization: ["organization"] as const
+  getUserOrganization: ["organization"] as const,
+  getOrgPlanBillingInfo: (orgId: string) => [{ orgId }, "organization-plan-billing"] as const,
+  getOrgPlanTable: (orgId: string) => [{ orgId }, "organization-plan-table"] as const,
+  getOrgPlansTable: (orgId: string, billingCycle: "monthly" | "yearly") => [{ orgId, billingCycle }, "organization-plans-table"] as const,
+  getOrgBillingDetails: (orgId: string) => [{ orgId }, "organization-billing-details"] as const,
+  getOrgPmtMethods: (orgId: string) => [{ orgId }, "organization-pmt-methods"] as const,
+  getOrgTaxIds: (orgId: string) => [{ orgId }, "organization-tax-ids"] as const,
+  getOrgInvoices: (orgId: string) => [{ orgId }, "organization-invoices"] as const
 };
 
 const fetchUserOrganization = async () => {
@@ -14,6 +19,40 @@ const fetchUserOrganization = async () => {
   return data.organizations;
 };
 
+// TODO: fix the type situation here and move fetches directly into hooks
+
+const fetchOrgBillingDetails = async (organizationId: string) => {
+  const { data } = await apiRequest.get<BillingDetails>(
+    `/api/v1/organizations/${organizationId}/billing-details`
+  );
+
+  return data;
+}
+
+const fetchOrgPmtMethods = async (organizationId: string) => {
+  const { data } = await apiRequest.get<BillingDetails>(
+    `/api/v1/organizations/${organizationId}/billing-details/payment-methods`
+  );
+
+  return data;
+}
+
+const fetchOrgTaxIds = async (organizationId: string) => {
+  const { data } = await apiRequest.get<BillingDetails>(
+    `/api/v1/organizations/${organizationId}/billing-details/tax-ids`
+  );
+
+  return data;
+}
+
+const fetchOrgInvoices = async (organizationId: string) => {
+  const { data: { invoices } } = await apiRequest.get<BillingDetails>(
+    `/api/v1/organizations/${organizationId}/invoices`
+  );
+
+  return invoices;
+}
+
 export const useGetOrganization = () =>
   useQuery({ queryKey: organizationKeys.getUserOrganization, queryFn: fetchUserOrganization });
 
@@ -29,3 +68,245 @@ export const useRenameOrg = () => {
     }
   });
 };
+
+export const useGetOrgPlanBillingInfo = (organizationId: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgPlanBillingInfo(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<BillingDetails>(
+        `/api/v1/organizations/${organizationId}/plan/billing`
+      );
+
+      return data; 
+    },
+    enabled: true
+  });
+}
+
+export const useGetOrgPlanTable = (organizationId: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgPlanTable(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<BillingDetails>(
+        `/api/v1/organizations/${organizationId}/plan/table`
+      );
+
+      return data; 
+    },
+    enabled: true
+  });
+}
+
+export const useGetOrgPlansTable = ({
+  organizationId,
+  billingCycle
+}: {
+  organizationId: string;
+  billingCycle: "monthly" | "annual"
+}) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgPlansTable(organizationId, billingCycle),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<BillingDetails>(
+        `/api/v1/organizations/${organizationId}/plans/table?billingCycle=${billingCycle}`
+      );
+
+      return data; 
+    },
+    enabled: true
+  });
+}
+
+export const useGetOrgBillingDetails = (organizationId: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgBillingDetails(organizationId),
+    queryFn: () => fetchOrgBillingDetails(organizationId),
+    enabled: true
+  });
+}
+
+export const useUpdateOrgBillingDetails = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      name,
+      email
+    }: {
+      organizationId: string;
+      name?: string;
+      email?: string;
+    }) => {
+      const { data } = await apiRequest.patch(`/api/v1/organizations/${organizationId}/billing-details`, {
+        name,
+        email
+      });
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(organizationKeys.getOrgBillingDetails(dto.organizationId));
+    }
+  });
+};
+
+export const useGetOrgPmtMethods = (organizationId: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgPmtMethods(organizationId),
+    queryFn: () => fetchOrgPmtMethods(organizationId),
+    enabled: true
+  });
+}
+
+export const useAddOrgPmtMethod = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      success_url,
+      cancel_url
+    }: {
+      organizationId: string;
+      success_url: string;
+      cancel_url: string;
+    }) => {
+      const { data: { url } } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/payment-methods`, {
+        success_url,
+        cancel_url
+      });
+      return url;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId));
+    }
+  });
+};
+
+export const useDeleteOrgPmtMethod = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      pmtMethodId,
+    }: {
+      organizationId: string;
+      pmtMethodId: string;
+    }) => {
+      const { data } = await apiRequest.delete(`/api/v1/organizations/${organizationId}/billing-details/payment-methods/${pmtMethodId}`);
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId));
+    }
+  });
+}
+
+export const useGetOrgTaxIds = (organizationId: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgTaxIds(organizationId),
+    queryFn: () => fetchOrgTaxIds(organizationId),
+    enabled: true
+  });
+}
+
+export const useAddOrgTaxId = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      type,
+      value
+    }: {
+      organizationId: string;
+      type: string;
+      value: string;
+    }) => {
+      const { data } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/tax-ids`, {
+        type,
+        value
+      });
+
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId));
+    }
+  });
+};
+
+export const useDeleteOrgTaxId = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      taxId,
+    }: {
+      organizationId: string;
+      taxId: string;
+    }) => {
+      const { data } = await apiRequest.delete(`/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}`);
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId));
+    }
+  });
+}
+
+export const useGetOrgInvoices = (organizationId: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgInvoices(organizationId),
+    queryFn: () => fetchOrgInvoices(organizationId),
+    enabled: true
+  });
+}
+
+export const useUpdateOrgPlan = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      productId
+    }: {
+      organizationId: string;
+      productId: string;
+    }) => {
+      const { data } = await apiRequest.patch(`/api/v1/organizations/${organizationId}/plan`, {
+        productId
+      });
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries([
+        organizationKeys.getOrgPlanTable(dto.organizationId),
+      ]);
+    }
+  });
+};
+
+export const useCreateProductCheckoutSession = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      productId,
+      success_url
+    }: {
+      organizationId: string;
+      productId: string;
+      success_url: string;
+    }) => {
+      const { data } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/session`, {
+        productId,
+        success_url
+      });
+      return data;
+    },
+    onSuccess(_, dto) {
+      console.log('onSuccess');
+    }
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/api/organization/types.ts b/frontend/src/hooks/api/organization/types.ts
index 92a5c5f1d..94528cd15 100644
--- a/frontend/src/hooks/api/organization/types.ts
+++ b/frontend/src/hooks/api/organization/types.ts
@@ -9,3 +9,8 @@ export type RenameOrgDTO = {
   orgId: string;
   newOrgName: string;
 };
+
+export type BillingDetails = {
+  name: string;
+  email: string;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/settings/billing/[id].tsx b/frontend/src/pages/settings/billing/[id].tsx
index e7b396fa3..39c8e71ac 100644
--- a/frontend/src/pages/settings/billing/[id].tsx
+++ b/frontend/src/pages/settings/billing/[id].tsx
@@ -1,9 +1,7 @@
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
-
-import Plan from "@app/components/billing/Plan";
-import NavHeader from "@app/components/navigation/NavHeader";
 import { useSubscription } from "@app/context";
+import { BillingSettingsPage } from "@app/views/Settings/BillingSettingsPage";
 
 export default function SettingsBilling() {
   const { subscription } = useSubscription();
@@ -55,45 +53,55 @@ export default function SettingsBilling() {
   ];
 
   return (
-    <div className="flex flex-col justify-between bg-bunker-800 pb-4 text-white">
+    <div className="h-full bg-bunker-800">
       <Head>
         <title>{t("common.head-title", { title: t("billing.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className="flex flex-row">
-        <div className="w-full pb-2">
-          <NavHeader pageName={t("billing.title")} />
-          <div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
-            <div className="flex flex-col items-start justify-start text-3xl">
-              <p className="mr-4 font-semibold text-gray-200">{t("billing.title")}</p>
-              <p className="mr-4 text-base font-normal text-gray-400">{t("billing.description")}</p>
-            </div>
-          </div>
-          <div className="ml-6 flex w-max flex-col text-mineshaft-50">
-            <p className="text-xl font-semibold">{t("billing.subscription")}</p>
-            <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
-              {plans.map((plan) => (
-                <Plan key={plan.name} plan={plan} />
-              ))}
-            </div>
-            {/* <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
-            <div className="flex flex-row">
-              <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
-                <p className="text-6xl font-bold">{numUsers}</p>
-                <p className="text-gray-300">
-                  Organization members
-                </p>
-              </div>
-              <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
-									<p className="text-6xl font-bold">1 </p>
-									<p className="text-gray-300">Organization projects</p>
-								</div>
-            </div> */}
-          </div>
-        </div>
-      </div>
+      <BillingSettingsPage />
     </div>
   );
 }
 
 SettingsBilling.requireAuth = true;
+
+
+
+// return (
+//     <div className="h-full bg-bunker-800">
+//       <Head>
+//         <title>{t("common.head-title", { title: t("billing.title") })}</title>
+//         <link rel="icon" href="/infisical.ico" />
+//       </Head>
+//       <div className="h-full bg-red">
+//         <NavHeader pageName={t("billing.title")} />
+//         <div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
+//           <div className="flex flex-col items-start justify-start text-3xl">
+//             <p className="mr-4 font-semibold text-gray-200">{t("billing.title")}</p>
+//             <p className="mr-4 text-base font-normal text-gray-400">{t("billing.description")}</p>
+//           </div>
+//         </div>
+//         <div className="ml-6 flex w-max flex-col text-mineshaft-50">
+//           <p className="text-xl font-semibold">{t("billing.subscription")}</p>
+//           <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
+//             {plans.map((plan) => (
+//               <Plan key={plan.name} plan={plan} />
+//             ))}
+//           </div>
+//           {/* <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
+//           <div className="flex flex-row">
+//             <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
+//               <p className="text-6xl font-bold">{numUsers}</p>
+//               <p className="text-gray-300">
+//                 Organization members
+//               </p>
+//             </div>
+//             <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
+//                 <p className="text-6xl font-bold">1 </p>
+//                 <p className="text-gray-300">Organization projects</p>
+//               </div>
+//           </div> */}
+//         </div>
+//       </div>
+//     </div>
+//   );
diff --git a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
new file mode 100644
index 000000000..02ee258c9
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
@@ -0,0 +1,120 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Plan from "@app/components/billing/Plan";
+import NavHeader from "@app/components/navigation/NavHeader";
+import { useSubscription } from "@app/context";
+import {
+  Input,
+  Button,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faMagnifyingGlass, faDownload } from "@fortawesome/free-solid-svg-icons";
+
+import { Tab } from '@headlessui/react'
+import { Fragment } from 'react'
+
+import { 
+    BillingCloudTab,
+    BillingReceiptsTab,
+    BillingDetailsTab
+} from "./components";
+
+export const BillingSettingsPage = () => {
+    const { t } = useTranslation();
+    return (
+      <div className="h-full p-8">
+        <NavHeader pageName={t("billing.title")} />
+        
+        <div className="flex text-3xl mt-8 items-start max-w-screen-lg">
+          <div className="flex-1">
+            <p className="font-semibold text-gray-200">{t("billing.title")}</p>
+            {/* <p className="text-base font-normal text-gray-400">
+              Manage usage and billing for Infisical Cloud and Self-hosted instances here
+            </p> */}
+          </div>
+          <div>
+          </div>
+        </div>
+
+        <Tab.Group>
+            <Tab.List className="mt-8 border-b-2 border-mineshaft-800 max-w-screen-lg">
+                <Tab as={Fragment}>
+                    {({ selected }) => (
+                        /* Use the `selected` state to conditionally style the selected tab. */
+                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                            Infisical Cloud
+                        </button>
+                    )}
+                </Tab>
+                {/* <Tab as={Fragment}>
+                    {({ selected }) => (
+                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                            Self-hosted
+                        </button>
+                    )}
+                </Tab> */}
+                <Tab as={Fragment}>
+                    {({ selected }) => (
+                        /* Use the `selected` state to conditionally style the selected tab. */
+                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                            Receipts
+                        </button>
+                    )}
+                </Tab>
+                <Tab as={Fragment}>
+                    {({ selected }) => (
+                        /* Use the `selected` state to conditionally style the selected tab. */
+                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                            Billing details
+                        </button>
+                    )}
+                </Tab>
+            </Tab.List>
+            <Tab.Panels>
+                <Tab.Panel>
+                    <BillingCloudTab />
+                </Tab.Panel>
+                {/* <Tab.Panel>Content 2</Tab.Panel> */}
+                <Tab.Panel>
+                    <BillingReceiptsTab />
+                </Tab.Panel>
+                <Tab.Panel>
+                    <BillingDetailsTab />
+                </Tab.Panel>
+            </Tab.Panels>
+        </Tab.Group>
+
+        
+        
+        {/* <div className="flex w-max flex-col text-mineshaft-50 mt-8">
+          <p className="text-xl font-semibold">{t("billing.subscription")}</p>
+          <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
+            {plans.map((plan) => (
+              <Plan key={plan.name} plan={plan} />
+            ))}
+          </div>
+          <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
+          <div className="flex flex-row">
+            <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
+              <p className="text-6xl font-bold">{numUsers}</p>
+              <p className="text-gray-300">
+                Organization members
+              </p>
+            </div>
+            <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
+                <p className="text-6xl font-bold">1 </p>
+                <p className="text-gray-300">Organization projects</p>
+              </div>
+          </div>
+        </div> */}
+      </div>
+    );
+};
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
new file mode 100644
index 000000000..331b7545c
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
@@ -0,0 +1,33 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Plan from "@app/components/billing/Plan";
+import NavHeader from "@app/components/navigation/NavHeader";
+import {
+  Input,
+  Button,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faMagnifyingGlass, faDownload } from "@fortawesome/free-solid-svg-icons";
+
+import { PreviewSection } from "./PreviewSection";
+import { CurrentPlanSection } from "./CurrentPlanSection";
+
+// TODO: optimize + modularize
+// TODO: get cloud plan full
+
+export const BillingCloudTab = () => {
+    return (
+        <div>
+            <PreviewSection />
+            <CurrentPlanSection />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
new file mode 100644
index 000000000..cfdacd869
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
@@ -0,0 +1,94 @@
+import {
+  Input,
+  IconButton,
+  Button,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  EmptyState
+} from "@app/components/v2";
+import { 
+    useGetOrgPlanTable
+} from "@app/hooks/api";
+import { useOrganization } from "@app/context";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileInvoice, faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+
+export const CurrentPlanSection = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgPlanTable(currentOrg?._id ?? '');
+    
+    const displayCell = (value: null | number | string | boolean) => {
+        if (value === null) return '-';
+        
+        if (typeof value === 'boolean') {
+            if (value) return (
+                <FontAwesomeIcon 
+                    icon={faCircleCheck}
+                    color='#2ecc71'
+                />
+            );
+
+            return (
+                <FontAwesomeIcon 
+                    icon={faCircleXmark}
+                    color='#e74c3c'
+                />
+            );
+        }
+        
+        return value;
+    }
+
+    return (
+        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+            <h2 className="text-xl font-semibold flex-1 text-white mb-8">Current Usage</h2>
+            <TableContainer className="mt-4">
+                <Table>
+                <THead>
+                    <Tr>
+                    <Th className="w-1/3">Feature</Th>
+                    <Th className="w-1/3">Allowed</Th>
+                    <Th className="w-1/3">Used</Th>
+                    </Tr>
+                </THead>
+                <TBody>
+                    {!isLoading && data?.rows?.length > 0 && data.rows.map(({
+                        name,
+                        allowed,
+                        used
+                    }: {
+                        name: string;
+                        allowed: number | boolean;
+                        used: string;
+                    }) => {
+                        return (
+                           <Tr key={`current-plan-row-${name}`} className="h-12">
+                                <Td>{name}</Td>
+                                <Td>{displayCell(allowed)}</Td>
+                                <Td>{used}</Td>
+                            </Tr> 
+                        );
+                    })}
+                    {isLoading && <TableSkeleton columns={5} key="invoices" />}
+                    {!isLoading && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={3}>
+                                <EmptyState 
+                                    title="No plan details found" 
+                                    icon={faFileInvoice}
+                                />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+                </Table>
+            </TableContainer> 
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
new file mode 100644
index 000000000..6a7da542f
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
@@ -0,0 +1,78 @@
+import { useSubscription } from "@app/context";
+import { useOrganization } from "@app/context";
+import { Tab } from '@headlessui/react'
+import { Fragment } from 'react'
+import { 
+    useGetOrgPlanBillingInfo,
+    useGetOrgPlanTable,
+    useGetOrgPlansTable
+} from "@app/hooks/api";
+import {
+  FormControl,
+  Button,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  EmptyState,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks/usePopUp";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileInvoice, faCircleCheck, faCircleXmark, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+
+import { ManagePlansTable } from "./ManagePlansTable";
+
+export const ManagePlansModal = ({
+    popUp,
+    handlePopUpToggle
+}) => {
+    const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
+    
+    return (
+        <Modal
+            isOpen={popUp?.managePlan?.isOpen}
+            onOpenChange={(isOpen) => {
+                handlePopUpToggle("managePlan", isOpen);
+            }}
+        >
+            <ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
+                <Tab.Group>
+                    <Tab.List className="border-b-2 border-mineshaft-600 max-w-screen-lg">
+                        <Tab as={Fragment}>
+                            {({ selected }) => (
+                                <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                                    Bill monthly
+                                </button>
+                            )}
+                        </Tab>
+                        <Tab as={Fragment}>
+                            {({ selected }) => (
+                                <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                                    Bill yearly
+                                </button>
+                            )}
+                        </Tab>
+                    </Tab.List>
+                    <Tab.Panels className="mt-4">
+                        <Tab.Panel>
+                            <ManagePlansTable billingCycle="monthly" />
+                        </Tab.Panel>
+                        <Tab.Panel>
+                            <ManagePlansTable billingCycle="yearly" />
+                        </Tab.Panel>
+                    </Tab.Panels>
+                </Tab.Group>
+            </ModalContent>
+        </Modal>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
new file mode 100644
index 000000000..f4ae1884c
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
@@ -0,0 +1,187 @@
+import { useSubscription } from "@app/context";
+import { useOrganization } from "@app/context";
+import { Tab } from '@headlessui/react'
+import { Fragment } from 'react'
+import { 
+    useGetOrgPlanBillingInfo,
+    useGetOrgPlanTable,
+    useGetOrgPlansTable,
+    useUpdateOrgPlan,
+    useCreateProductCheckoutSession
+} from "@app/hooks/api";
+import {
+  FormControl,
+  Button,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  EmptyState,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileInvoice, faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+
+// TODO: upgrade
+
+type Props = {
+    billingCycle: 'monthly' | 'yearly'
+}
+
+export const ManagePlansTable = ({
+    billingCycle
+}: Props) => {
+    const { currentOrg } = useOrganization();
+    const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
+    const { data: tableData, isLoading: isTableDataLoading } = useGetOrgPlansTable({
+        organizationId: currentOrg?._id ?? '',
+        billingCycle
+    });
+    const updateOrgPlan = useUpdateOrgPlan();
+    const createProductCheckoutSession = useCreateProductCheckoutSession();
+
+    console.log('tableData: ', tableData);
+
+    const displayCell = (value: null | number | string | boolean) => {
+        if (value === null) return '-';
+        
+        if (typeof value === 'boolean') {
+            if (value) return (
+                <FontAwesomeIcon 
+                    icon={faCircleCheck}
+                    color='#2ecc71'
+                />
+            );
+
+            return (
+                <FontAwesomeIcon 
+                    icon={faCircleXmark}
+                    color='#e74c3c'
+                />
+            );
+        }
+        
+        return value;
+    }
+
+    return (
+        <TableContainer>
+            <Table>
+                <THead>
+                    {!isTableDataLoading && tableData?.head.length > 0 && (
+                        <Tr>
+                            <Th className="">Feature / Limit</Th>
+                            {tableData.head.map(({
+                                name,
+                                slug,
+                                priceLine
+                            }: {
+                                name: string;
+                                slug: string;
+                                priceLine: string;
+                            }) => {
+                                return (
+                                    <Th className={`${slug === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}`}>
+                                        <p>{name}</p>
+                                        <p>{priceLine}</p>
+                                    </Th>
+                                );
+                            })}
+                        </Tr>
+                    )}
+                </THead>
+                <TBody>
+                    {!isTableDataLoading && tableData?.rows.length > 0 && tableData.rows.map(({
+                        name,
+                        starter,
+                        team,
+                        pro,
+                        enterprise
+                    }: {
+                        name: string;
+                        starter: null | number | string | boolean;
+                        team: null | number | string | boolean;
+                        pro: null | number | string | boolean;
+                        enterprise: null | number | string | boolean;
+                    }) => {
+                        return (
+                            <Tr className="h-12">
+                                <Td>{displayCell(name)}</Td>
+                                <Td className={'starter' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(starter)}</Td>
+                                <Td className={'team' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(team)}</Td>
+                                <Td className={'pro' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(pro)}</Td>
+                                <Td className={'enterprise' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(enterprise)}</Td>
+                            </Tr>
+                        );
+                    })}
+                    {isTableDataLoading && <TableSkeleton columns={5} key="cloud-products" />}
+                    {!isTableDataLoading && tableData?.rows.length === 0 && (
+                        <Tr>
+                            <Td colSpan={5}>
+                                <EmptyState 
+                                    title="No cloud product details found" 
+                                    icon={faFileInvoice}
+                                />
+                            </Td>
+                        </Tr>
+                    )}
+                    {subscription && !isTableDataLoading && tableData?.head.length > 0 && (
+                        <Tr className="h-12">
+                            <Td></Td>
+                            {tableData.head.map(({
+                                slug,
+                                productId
+                            }: {
+                                slug: string;
+                                productId: string;
+                            }) => {
+                                const isCurrentPlan = slug === subscription.slug;
+
+                                console.log('productId: ', productId);
+                                return isCurrentPlan ? (
+                                    <Td className="bg-mineshaft-600">
+                                        <p className="text-center font-semibold">Current</p>
+                                    </Td>
+                                ) : (
+                                    <Td>
+                                        <Button 
+                                            onClick={async () => {
+                                                console.log('upgrade to product: ', productId);
+                                                if (!currentOrg?._id) return;
+                                                // const test = await updateOrgPlan.mutateAsync({
+                                                //     organizationId: currentOrg._id,
+                                                //     productId
+                                                // });
+                                                
+                                                const { url } = await createProductCheckoutSession.mutateAsync({
+                                                    organizationId: currentOrg._id,
+                                                    productId,
+                                                    success_url: window.location.href
+                                                })
+                                                
+                                                window.location.href = url;
+                                            }}
+                                            color="mineshaft"
+                                            className="w-full"
+                                        >
+                                            Upgrade
+                                        </Button>
+                                    </Td>
+                                );
+                            })}
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
new file mode 100644
index 000000000..e03cb14c9
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
@@ -0,0 +1,75 @@
+import { useSubscription } from "@app/context";
+import { useOrganization } from "@app/context";
+import { useGetOrgPlanBillingInfo } from "@app/hooks/api";
+import { Button } from "@app/components/v2";
+import { usePopUp } from "@app/hooks/usePopUp";
+import { ManagePlansModal } from "./ManagePlansModal";
+
+export const PreviewSection = () => {
+    const { currentOrg } = useOrganization();
+    const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
+    const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? '');
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "managePlan"
+    ] as const);
+    
+    const formatAmount = (amount: number) => {
+        const formattedTotal = (Math.floor(amount) / 100).toLocaleString('en-US', {
+            style: 'currency',
+            currency: 'USD',
+        });
+        
+        return formattedTotal;
+    }
+    
+    const formatDate = (date: number) => {
+        const createdDate = new Date(date * 1000);
+        const day: number = createdDate.getDate();
+        const month: number = createdDate.getMonth() + 1;
+        const year: number = createdDate.getFullYear();
+        const formattedDate: string = `${day}/${month}/${year}`;
+        
+        return formattedDate;
+    }
+    
+    return (
+        <div>
+            {!isSubscriptionLoading && subscription?.slug !== 'enterprise' && subscription?.slug !== 'pro' && subscription?.slug !== 'pro-annual' && (
+                <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mt-8 flex items-center bg-mineshaft-600 max-w-screen-lg">
+                    <div className="flex-1">
+                        <h2 className="text-xl font-semibold text-mineshaft-50">Become Infisical</h2>
+                        <p className="text-gray-400 mt-4">Unlimited members, projects, RBAC, smart alerts, and so much more</p>
+                    </div>
+                    <Button 
+                        onClick={() => handlePopUpOpen("managePlan")}
+                        color="mineshaft"
+                    >
+                        Upgrade
+                    </Button>
+                </div>
+            )}
+            {!isLoading && data && (
+                <div className="flex mt-8 max-w-screen-lg">
+                    <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
+                        <p className="mb-2 text-gray-400">Current plan</p>
+                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">Starter</p>
+                        <p className="text-primary">Manage plan &rarr;</p>
+                    </div>
+                    <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mr-4">
+                        <p className="mb-2 text-gray-400">Price</p>
+                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">{`${formatAmount(data.amount)} / ${data.interval}`}</p>
+                    </div>
+                    <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600">
+                        <p className="mb-2 text-gray-400">Subscription renews on</p>
+                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">{formatDate(data.currentPeriodEnd)}</p>
+                    </div>
+                </div>
+            )}
+            <ManagePlansModal 
+                popUp={popUp}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
new file mode 100644
index 000000000..07696dc7e
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
@@ -0,0 +1 @@
+export { BillingCloudTab } from "./BillingCloudTab";
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
new file mode 100644
index 000000000..471cdb050
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
@@ -0,0 +1,15 @@
+import { CompanyNameSection } from "./CompanyNameSection";
+import { InvoiceEmailSection } from "./InvoiceEmailSection";
+import { PmtMethodsSection } from "./PmtMethodsSection";
+import { TaxIDSection } from "./TaxIDSection";
+
+export const BillingDetailsTab = () => {
+    return (
+        <div>
+            <CompanyNameSection />
+            <InvoiceEmailSection />
+            <PmtMethodsSection />
+            <TaxIDSection />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
new file mode 100644
index 000000000..b8c88ff10
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
@@ -0,0 +1,98 @@
+import { useEffect } from "react";
+import {
+  Input,
+//   Button,
+  FormControl
+} from "@app/components/v2";
+import { Controller, useForm } from 'react-hook-form'; 
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { useOrganization } from "@app/context";
+import { 
+    useGetOrgBillingDetails,
+    useUpdateOrgBillingDetails
+} from "@app/hooks/api";
+
+import Button from "@app/components/basic/buttons/Button";
+
+const schema = yup.object({
+    name: yup.string().required('Company name is required')
+}).required();
+
+export const CompanyNameSection = () => {
+    const { currentOrg } = useOrganization();
+    const { reset, control, register, handleSubmit, watch, formState: { errors } } = useForm({
+        defaultValues: {
+            name: ''
+        },
+        resolver: yupResolver(schema)
+    });
+    const { data } = useGetOrgBillingDetails(currentOrg?._id ?? '');
+    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+    
+    useEffect(() => {
+        if (data) {
+            reset({
+                name: data?.name ?? ''
+            });
+        }
+    }, [data]);
+    
+    const onFormSubmit = async ({ name }: { name: string }) => {
+        try {
+            if (!currentOrg?._id) return;
+            if (name === '') return;
+            await updateOrgBillingDetails.mutateAsync({
+                name,
+                organizationId: currentOrg._id
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    return (
+        <form 
+            onSubmit={handleSubmit(onFormSubmit)}
+            className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600"
+        >
+            <div className="flex items-center mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-white">
+                    Business name
+                </h2>
+                <Button 
+                    color="mineshaft"
+                    type="submit"
+                >
+                    Save
+                </Button>
+            </div>
+            <div className="max-w-md">
+                <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                            <Input 
+                                placeholder="Acme Corp" 
+                                {...field} 
+                                className="bg-mineshaft-800" 
+                            />
+                        </FormControl>
+                    )}
+                    control={control}
+                    name="name"
+                />
+            </div>
+            <Button
+                text="Test"
+                onButtonPressed={() => {
+                    console.log('Button pressed');
+                    // setIsAddApiKeyDialogOpen(true);
+                }}
+                color="mineshaft"
+                // icon={faPlus}
+                size="md"
+            />
+        </form>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
new file mode 100644
index 000000000..cb21aeff2
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
@@ -0,0 +1,86 @@
+import { useEffect } from "react";
+import {
+  Input,
+  Button,
+  FormControl
+} from "@app/components/v2";
+import { Controller, useForm } from 'react-hook-form'; 
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { useOrganization } from "@app/context";
+import { 
+    useGetOrgBillingDetails,
+    useUpdateOrgBillingDetails
+} from "@app/hooks/api";
+
+const schema = yup.object({
+    email: yup.string().required('Email is required')
+}).required();
+
+export const InvoiceEmailSection = () => {
+    const { currentOrg } = useOrganization();
+    const { reset, control, register, handleSubmit, watch, formState: { errors } } = useForm({
+        defaultValues: {
+            name: ''
+        },
+        resolver: yupResolver(schema)
+    });
+    const { data } = useGetOrgBillingDetails(currentOrg?._id ?? '');
+    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+
+    useEffect(() => {
+        if (data) {
+            reset({
+                email: data?.email ?? ''
+            });
+        }
+    }, [data]);
+
+    const onFormSubmit = async ({ email }: { email: string }) => {
+        try {
+            if (!currentOrg?._id) return;
+            if (email === '') return;
+            await updateOrgBillingDetails.mutateAsync({
+                email,
+                organizationId: currentOrg._id
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    return (
+        <form 
+            onSubmit={handleSubmit(onFormSubmit)}
+            className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600"
+        >
+            <div className="flex items-center mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-white">
+                    Invoice email recipient
+                </h2>
+                <Button 
+                    color="mineshaft"
+                    type="submit"
+                >
+                    Save
+                </Button>
+            </div>
+            <div className="max-w-md">
+                <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                            <Input 
+                                placeholder="jane@acme.com" 
+                                {...field} 
+                                className="bg-mineshaft-800" 
+                            />
+                        </FormControl>
+                    )}
+                    control={control}
+                    name="email"
+                />
+            </div>
+        </form>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
new file mode 100644
index 000000000..f05be12fb
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
@@ -0,0 +1,130 @@
+import {
+  Button,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  EmptyState
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { 
+    useGetOrgPmtMethods,
+    useAddOrgPmtMethod,
+    useDeleteOrgPmtMethod
+} from "@app/hooks/api";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faXmark, faCreditCard } from "@fortawesome/free-solid-svg-icons";
+
+// TODO: optimize + modularize
+
+export const PmtMethodsSection = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgPmtMethods(currentOrg?._id ?? '');
+    const addOrgPmtMethod = useAddOrgPmtMethod();
+    const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
+    
+    const handleAddPmtMethodBtnClick = async () => {
+        if (!currentOrg?._id) return;
+        const url = await addOrgPmtMethod.mutateAsync({
+            organizationId: currentOrg._id,
+            success_url: window.location.href,
+            cancel_url: window.location.href
+        });
+        
+        window.location.href = url;
+    }
+
+    const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
+        if (!currentOrg?._id) return;
+        await deleteOrgPmtMethod.mutateAsync({
+            organizationId: currentOrg._id,
+            pmtMethodId
+        });
+    }
+    
+    return (
+        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+            <div className="flex items-center mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-white">
+                    Payment Methods
+                </h2>
+                <Button 
+                    color="mineshaft"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={handleAddPmtMethodBtnClick}
+                >
+                    Add method
+                </Button>
+            </div>
+            <TableContainer className="mt-4">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="flex-1">Brand</Th>
+                  <Th className="flex-1">Type</Th>
+                  <Th className="flex-1">Last 4 Digits</Th>
+                  <Th className="flex-1">Expiration</Th>
+                  <Th className="w-5"></Th>
+                </Tr>
+              </THead>
+              <TBody>
+                {!isLoading && data?.length > 0 && data.map(({
+                    _id,
+                    brand,
+                    exp_month,
+                    exp_year,
+                    funding,
+                    last4
+                }: {
+                    _id: string;
+                    brand: string;
+                    exp_month: number;
+                    exp_year: number;
+                    funding: string;
+                    last4: string;
+                }) => (
+                    <Tr key={`pmt-method-${_id}`} className="h-10">
+                        <Td>{brand}</Td>
+                        <Td>{funding}</Td>
+                        <Td>{last4}</Td>
+                        <Td>{`${exp_month}/${exp_year}`}</Td>
+                        <Td>
+                            <IconButton
+                                onClick={async () => {
+                                    console.log('delete pmt method!');
+                                    await handleDeletePmtMethodBtnClick(_id);
+                                    console.log('delete pmt method done!');
+                                }}
+                                size="lg"
+                                colorSchema="danger"
+                                variant="plain"
+                                ariaLabel="update"
+                            >
+                                <FontAwesomeIcon icon={faXmark} />
+                            </IconButton>
+                        </Td>
+                    </Tr>
+                ))}
+                {isLoading && <TableSkeleton columns={5} key="pmt-methods" />}
+                {!isLoading && data?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={5}>
+                            <EmptyState 
+                                title="No payment methods on file" 
+                                icon={faCreditCard}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+              </TBody>
+            </Table>
+          </TableContainer>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
new file mode 100644
index 000000000..4b299a471
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
@@ -0,0 +1,276 @@
+import {
+  FormControl,
+  Button,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  EmptyState,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { 
+    useGetOrgTaxIds,
+    useAddOrgTaxId,
+    useDeleteOrgTaxId
+} from "@app/hooks/api";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faXmark, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+import { usePopUp } from "@app/hooks/usePopUp";
+import { Controller, useForm } from 'react-hook-form'; 
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+const taxIDTypes = [
+  { label: 'Australia ABN', value: 'au_abn' },
+  { label: 'Australia ARN', value: 'au_arn' },
+  { label: 'Bulgaria UIC', value: 'bg_uic' },
+  { label: 'Brazil CNPJ', value: 'br_cnpj' },
+  { label: 'Brazil CPF', value: 'br_cpf' },
+  { label: 'Canada BN', value: 'ca_bn' },
+  { label: 'Canada GST/HST', value: 'ca_gst_hst' },
+  { label: 'Canada PST BC', value: 'ca_pst_bc' },
+  { label: 'Canada PST MB', value: 'ca_pst_mb' },
+  { label: 'Canada PST SK', value: 'ca_pst_sk' },
+  { label: 'Canada QST', value: 'ca_qst' },
+  { label: 'Switzerland VAT', value: 'ch_vat' },
+  { label: 'Chile TIN', value: 'cl_tin' },
+  { label: 'Egypt TIN', value: 'eg_tin' },
+  { label: 'Spain CIF', value: 'es_cif' },
+  { label: 'EU OSS VAT', value: 'eu_oss_vat' },
+  { label: 'EU VAT', value: 'eu_vat' },
+  { label: 'GB VAT', value: 'gb_vat' },
+  { label: 'Georgia VAT', value: 'ge_vat' },
+  { label: 'Hong Kong BR', value: 'hk_br' },
+  { label: 'Hungary TIN', value: 'hu_tin' },
+  { label: 'Indonesia NPWP', value: 'id_npwp' },
+  { label: 'Israel VAT', value: 'il_vat' },
+  { label: 'India GST', value: 'in_gst' },
+  { label: 'Iceland VAT', value: 'is_vat' },
+  { label: 'Japan CN', value: 'jp_cn' },
+  { label: 'Japan RN', value: 'jp_rn' },
+  { label: 'Japan TRN', value: 'jp_trn' },
+  { label: 'Kenya PIN', value: 'ke_pin' },
+  { label: 'South Korea BRN', value: 'kr_brn' },
+  { label: 'Liechtenstein UID', value: 'li_uid' },
+  { label: 'Mexico RFC', value: 'mx_rfc' },
+  { label: 'Malaysia FRP', value: 'my_frp' },
+  { label: 'Malaysia ITN', value: 'my_itn' },
+  { label: 'Malaysia SST', value: 'my_sst' },
+  { label: 'Norway VAT', value: 'no_vat' },
+  { label: 'New Zealand GST', value: 'nz_gst' },
+  { label: 'Philippines TIN', value: 'ph_tin' },
+  { label: 'Russia INN', value: 'ru_inn' },
+  { label: 'Russia KPP', value: 'ru_kpp' },
+  { label: 'Saudi Arabia VAT', value: 'sa_vat' },
+  { label: 'Singapore GST', value: 'sg_gst' },
+  { label: 'Singapore UEN', value: 'sg_uen' },
+  { label: 'Slovenia TIN', value: 'si_tin' },
+  { label: 'Thailand VAT', value: 'th_vat' },
+  { label: 'Turkey TIN', value: 'tr_tin' },
+  { label: 'Taiwan VAT', value: 'tw_vat' },
+  { label: 'Ukraine VAT', value: 'ua_vat' },
+  { label: 'US EIN', value: 'us_ein' },
+  { label: 'South Africa VAT', value: 'za_vat' }
+];
+
+const schema = yup.object({
+    type: yup.string().required('Tax ID type is required'),
+    value: yup.string().required('Tax ID value is required')
+}).required();
+
+export type AddTaxIDFormData = yup.InferType<typeof schema>;
+
+// TODO: optimize + modularize
+
+export const TaxIDSection = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgTaxIds(currentOrg?._id ?? '');
+    const addOrgTaxId = useAddOrgTaxId();
+    const deleteOrgTaxId = useDeleteOrgTaxId();
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<AddTaxIDFormData>({
+        resolver: yupResolver(schema)
+    });
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "addTaxID"
+    ] as const);
+
+    const onTaxIDModalSubmit = async ({ type, value }: AddTaxIDFormData) => {
+        try {
+            if (!currentOrg?._id) return;
+            await addOrgTaxId.mutateAsync({
+                organizationId: currentOrg._id,
+                type,
+                value
+            });
+            handlePopUpClose("addTaxID");
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    const handleDeleteTaxIdBtnClick = async (taxId: string) => {
+        if (!currentOrg?._id) return;
+        await deleteOrgTaxId.mutateAsync({
+            organizationId: currentOrg._id,
+            taxId
+        });
+    }
+
+    return (
+        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+            <div className="flex items-center mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-white">
+                    Tax ID
+                </h2>
+                <Button 
+                    color="mineshaft"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={() => handlePopUpOpen("addTaxID")}
+                >
+                    Add Tax ID
+                </Button>
+            </div>
+            <TableContainer className="mt-4">
+                <Table>
+                    <THead>
+                        <Tr>
+                            <Th className="flex-1">Type</Th>
+                            <Th className="flex-1">Value</Th>
+                            <Th className="w-5"></Th>
+                        </Tr>
+                    </THead>
+                    <TBody>
+                        {!isLoading && data?.length > 0 && data.map(({
+                            _id,
+                            country,
+                            type,
+                            value
+                        }: {
+                            _id: string;
+                            country: string;
+                            type: string;
+                            value: string;
+                        }) => (
+                            <Tr key={`tax-id-${_id}`} className="h-10">
+                                <Td>{type}</Td>
+                                <Td>{value}</Td>
+                                <Td>
+                                    <IconButton
+                                        onClick={async () => {
+                                            console.log('del');
+                                            await handleDeleteTaxIdBtnClick(_id);
+                                            console.log('del done');
+                                        }}
+                                        size="lg"
+                                        colorSchema="danger"
+                                        variant="plain"
+                                        ariaLabel="update"
+                                    >
+                                        <FontAwesomeIcon icon={faXmark} />
+                                    </IconButton>
+                                </Td>
+                            </Tr>
+                        ))}
+                        {isLoading && <TableSkeleton columns={3} key="tax-ids" />}
+                        {!isLoading && data?.length === 0 && (
+                            <Tr>
+                                <Td colSpan={5}>
+                                    <EmptyState 
+                                        title="No Tax IDs on file" 
+                                        icon={faFileInvoice}
+                                    />
+                                </Td>
+                            </Tr>
+                        )}
+                    </TBody>
+                </Table>
+            </TableContainer>
+            <Modal
+                isOpen={popUp?.addTaxID?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addTaxID", isOpen);
+                reset();
+                }}
+            >
+                <ModalContent title="Add Tax ID">
+                <form onSubmit={handleSubmit(onTaxIDModalSubmit)}>
+                    <Controller
+                    control={control}
+                    name="type"
+                    defaultValue="eu_vat"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Type"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => onChange(e)}
+                          className="w-full"
+                        >
+                          {taxIDTypes.map(({ label, value }) => (
+                            <SelectItem value={String(value || "")} key={label}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                    <Controller
+                    control={control}
+                    defaultValue=""
+                    name="value"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                        label="Value"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="DE000000000"
+                        />
+                        </FormControl>
+                    )}
+                    />
+                    <div className="mt-8 flex items-center">
+                    <Button
+                        className="mr-4"
+                        size="sm"
+                        type="submit"
+                        isLoading={isSubmitting}
+                        isDisabled={isSubmitting}
+                    >
+                        Add
+                    </Button>
+                    <Button colorSchema="secondary" variant="plain">
+                        Cancel
+                    </Button>
+                    </div>
+                </form>
+                </ModalContent>
+            </Modal>
+        </div>    
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx
new file mode 100644
index 000000000..359e74012
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx
@@ -0,0 +1 @@
+export { BillingDetailsTab } from "./BillingDetailsTab";
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
new file mode 100644
index 000000000..fd7d049c0
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
@@ -0,0 +1,100 @@
+import {
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  EmptyState
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { 
+    useGetOrgInvoices
+} from "@app/hooks/api";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+
+// TODO: optimize + modularize
+
+export const BillingReceiptsTab = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgInvoices(currentOrg?._id ?? '');
+    return (
+        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+          <h2 className="text-xl font-semibold flex-1 text-white">Invoices</h2>
+          <TableContainer className="mt-4">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="flex-1">Invoice #</Th>
+                  <Th className="flex-1">Date</Th>
+                  <Th className="flex-1">Status</Th>
+                  <Th className="flex-1">Amount</Th>
+                  <Th className="w-5"></Th>
+                </Tr>
+              </THead>
+              <TBody>
+                {!isLoading && data?.length > 0 && data.map(({
+                    _id,
+                    created,
+                    paid,
+                    number,
+                    total,
+                    invoice_pdf
+                }: {
+                    _id: string;
+                    created: number;
+                    paid: boolean;
+                    number: string;
+                    total: number;
+                    invoice_pdf: string;
+                }) => {
+                    const formattedTotal = (Math.floor(total) / 100).toLocaleString('en-US', {
+                        style: 'currency',
+                        currency: 'USD',
+                    });
+                    const createdDate = new Date(created * 1000);
+                    const day: number = createdDate.getDate();
+                    const month: number = createdDate.getMonth() + 1;
+                    const year: number = createdDate.getFullYear();
+                    const formattedDate: string = `${day}/${month}/${year}`;
+                    
+                    return (
+                        <Tr key={`invoice-${_id}`} className="h-10">
+                            <Td>{number}</Td>
+                            <Td>{formattedDate}</Td>
+                            <Td>{paid ? "Paid" : "Not Paid"}</Td>
+                            <Td>{formattedTotal}</Td>
+                            <Td>
+                                <IconButton
+                                    onClick={async () => window.open(invoice_pdf)}
+                                    size="lg"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                >
+                                    <FontAwesomeIcon icon={faDownload} />
+                                </IconButton>
+                            </Td>
+                        </Tr>
+                    );
+                })}
+                {isLoading && <TableSkeleton columns={5} key="invoices" />}
+                {!isLoading && data?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={5}>
+                            <EmptyState 
+                                title="No invoices on file" 
+                                icon={faFileInvoice}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+              </TBody>
+            </Table>
+          </TableContainer>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx
new file mode 100644
index 000000000..4f4b60a8c
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx
@@ -0,0 +1 @@
+export { BillingReceiptsTab } from "./BillingReceiptsTab";
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
new file mode 100644
index 000000000..a14bd1320
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
@@ -0,0 +1,3 @@
+export { BillingCloudTab } from "./BillingCloudTab";
+export { BillingReceiptsTab } from "./BillingReceiptsTab";
+export { BillingDetailsTab } from "./BillingDetailsTab";
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/index.tsx
new file mode 100644
index 000000000..2c4e77101
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/index.tsx
@@ -0,0 +1 @@
+export { BillingSettingsPage } from "./BillingSettingsPage";
\ No newline at end of file
diff --git a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
index b9a409e0d..d51d31f39 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
@@ -210,27 +210,6 @@ export const OrgSettingsPage = () => {
     }
   };
 
-  /**
-   * This function deleted a workspace.
-   * It first checks if there is more than one workspace available. Otherwise, it doesn't delete
-   * It then checks if the name of the workspace to be deleted is correct. Otherwise, it doesn't delete.
-   * It then deletes the workspace and forwards the user to another available workspace.
-   */
-  // const executeDeletingWorkspace = async () => {
-  //   const userWorkspaces = await getWorkspaces();
-  //
-  //   if (userWorkspaces.length > 1) {
-  //     if (
-  //       userWorkspaces.filter((workspace) => workspace._id === workspaceId)[0].name ===
-  //       workspaceToBeDeletedName
-  //     ) {
-  //       await deleteWorkspace(workspaceId);
-  //       const ws = await getWorkspaces();
-  //       router.push(`/dashboard/${ws[0]._id}`);
-  //     }
-  //   }
-  // };
-  //
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       <NavHeader pageName={t("settings.org.title")} />

From 6959fc52ac79f717ec360a87f30a73fac9c46a33 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sun, 25 Jun 2023 21:49:28 -0700
Subject: [PATCH 07/22] minor style updates

---
 frontend/src/components/v2/FormControl/FormControl.tsx          | 2 +-
 frontend/src/views/IntegrationsPage/IntegrationsPage.tsx        | 2 +-
 .../CloudIntegrationSection/CloudIntegrationSection.tsx         | 2 +-
 .../FrameworkIntegrationSection/FrameworkIntegrationSection.tsx | 2 +-
 .../components/IntegrationsSection/IntegrationsSection.tsx      | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index c9209493a..2493cdb54 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -11,7 +11,7 @@ export type FormLabelProps = {
 };
 
 export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="mb-1 ml-0.5 block text-sm font-medium text-mineshaft-300" htmlFor={id}>
+  <Label.Root className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400" htmlFor={id}>
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
   </Label.Root>
diff --git a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
index 54f859f99..5606c61a2 100644
--- a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
@@ -179,7 +179,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   };
 
   return (
-    <div className="container mx-auto px-8 pb-12 text-white">
+    <div className="container mr-auto pb-12 text-white">
       <NavHeader pageName={t("integrations.title")} isProjectRelated />
       <IntegrationsSection
         isLoading={isIntegrationLoading}
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
index f3b88a6c0..d3e118e37 100644
--- a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
@@ -84,7 +84,7 @@ export const CloudIntegrationSection = ({
                 Boolean(integrationAuths?.[cloudIntegration.slug]) && (
                   <div className="absolute top-0 right-0 z-40 h-full">
                     <div className="relative h-full">
-                      <div className="absolute top-0 right-0 w-24 flex-row items-center overflow-hidden whitespace-nowrap rounded-tr-md bg-primary py-0.5 px-2 text-xs text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
+                      <div className="absolute top-0 right-0 w-24 flex-row items-center overflow-hidden whitespace-nowrap rounded-tr-md rounded-bl-md bg-primary py-0.5 px-2 text-xs text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
                         <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
                         Authorized
                       </div>
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
index 1b2a4f5ce..9b567eaaa 100644
--- a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
@@ -19,7 +19,7 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
         <p className="text-base text-gray-400">{t("integrations.click-to-setup")}</p>
       </div>
       <div
-        className="mx-6 mt-4 grid grid-flow-dense gap-4"
+        className="mx-6 mt-4 grid grid-flow-dense gap-3"
         style={{ gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))" }}
       >
         {frameworks.map((framework) => (
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index 5c0df8fd7..514e57e32 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -45,7 +45,7 @@ export const IntegrationsSection = ({
       )}
       {!isLoading && !integrations.length && (
         <EmptyState
-          className="mx-6 py-8"
+          className="mx-6 pt-8 pb-4 rounded-md border border-mineshaft-700"
           title="No integrations found. Click on one of the below providers to sync secrets."
         />
       )}

From 2526cbe6ca1be0e0682e7aaf575610bf612d8567 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Mon, 26 Jun 2023 12:39:29 +0700
Subject: [PATCH 08/22] Add padding Checkly integration page

---
 frontend/src/pages/integrations/checkly/create.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/integrations/checkly/create.tsx b/frontend/src/pages/integrations/checkly/create.tsx
index 6ebf3a98f..5b2e1018b 100644
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/frontend/src/pages/integrations/checkly/create.tsx
@@ -98,7 +98,7 @@ export default function ChecklyCreateIntegrationPage() {
         >
           Checkly Integration
         </CardTitle>
-        <FormControl label="Infisical Project Environment" className="mt-2 px-6">
+        <FormControl label="Infisical Project Environment" className="mt-4 px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -114,7 +114,7 @@ export default function ChecklyCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="mt-4 px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}

From 5f683dd389658402305daab1dd177a3f73493787 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Mon, 26 Jun 2023 14:28:25 +0530
Subject: [PATCH 09/22] feat(integrations-page): updated current integrations
 width and fixed id in delete modal

---
 frontend/src/views/IntegrationsPage/IntegrationsPage.tsx    | 6 ++----
 .../components/IntegrationsSection/IntegrationsSection.tsx  | 6 +++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
index 5606c61a2..5a585151d 100644
--- a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
@@ -44,9 +44,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   const { data: latestWsKey } = useGetUserWsKey(workspaceId);
 
   const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-    "activeBot",
-    "revokeProviderPermissionConf",
-    "removeIntegrationConf"
+    "activeBot"
   ] as const);
 
   const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } =
@@ -179,7 +177,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   };
 
   return (
-    <div className="container mr-auto pb-12 text-white">
+    <div className="container mx-auto max-w-7xl px-8 pb-12 text-white">
       <NavHeader pageName={t("integrations.title")} isProjectRelated />
       <IntegrationsSection
         isLoading={isIntegrationLoading}
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index 514e57e32..fe79f66e1 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -34,7 +34,7 @@ export const IntegrationsSection = ({
 
   return (
     <div className="mb-8">
-      <div className="mx-4 mb-4 mt-6 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
+      <div className="mx-4 mb-4 mt-6 flex flex-col items-start justify-between px-2 text-xl">
         <h1 className="text-3xl font-semibold">Current Integrations</h1>
         <p className="text-base text-bunker-300">Manage integrations with third-party services.</p>
       </div>
@@ -53,7 +53,7 @@ export const IntegrationsSection = ({
         <div className="flex flex-col space-y-4 p-6 pt-0">
           {integrations?.map((integration) => (
             <div
-              className="flex max-w-6xl justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
+              className="flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
               key={`integration-${integration?._id.toString()}`}
             >
               <div className="flex">
@@ -130,7 +130,7 @@ export const IntegrationsSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteConfirmation.isOpen}
         title={`Are you sure want to remove ${
-          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || " "
+          (popUp?.deleteConfirmation.data as TIntegration)?.integration || " "
         } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
         onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
         deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""}

From 072f6c737c1fb586b5bade57460b18b7b663df87 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Mon, 26 Jun 2023 18:08:00 -0700
Subject: [PATCH 10/22] UI update to inetgrations

---
 .../IntegrationsSection.tsx                   | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index fe79f66e1..272b96a3b 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -10,7 +10,8 @@ import {
   IconButton,
   Select,
   SelectItem,
-  Skeleton
+  Skeleton,
+  Tooltip
 } from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
 import { TIntegration } from "@app/hooks/api/types";
@@ -53,7 +54,7 @@ export const IntegrationsSection = ({
         <div className="flex flex-col space-y-4 p-6 pt-0">
           {integrations?.map((integration) => (
             <div
-              className="flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
+              className="flex max-w-8xl justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
               key={`integration-${integration?._id.toString()}`}
             >
               <div className="flex">
@@ -62,7 +63,7 @@ export const IntegrationsSection = ({
                     <Select
                       value={integration.environment}
                       isDisabled={integration.isActive}
-                      className="min-w-[8rem]"
+                      className="min-w-[8rem] border border-mineshaft-700"
                     >
                       {environments.map((environment) => {
                         return (
@@ -79,7 +80,7 @@ export const IntegrationsSection = ({
                 </div>
                 <div className="ml-2 flex flex-col">
                   <FormLabel label="Secret Path" />
-                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
                     {integration.secretPath}
                   </div>
                 </div>
@@ -88,13 +89,13 @@ export const IntegrationsSection = ({
                 </div>
                 <div className="ml-4 flex flex-col">
                   <FormLabel label="Integration" />
-                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
                     {integrationSlugNameMapping[integration.integration]}
                   </div>
                 </div>
                 <div className="ml-2 flex flex-col">
                   <FormLabel label="App" />
-                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
                     {integration.integration === "hashicorp-vault"
                       ? `${integration.app} - path: ${integration.path}`
                       : integration.app}
@@ -106,7 +107,7 @@ export const IntegrationsSection = ({
                   integration.integration === "gitlab") && (
                   <div className="ml-4 flex flex-col">
                     <FormLabel label="Target Environment" />
-                    <div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                    <div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
                       {integration.targetEnvironment}
                     </div>
                   </div>
@@ -114,13 +115,16 @@ export const IntegrationsSection = ({
               </div>
               <div className="flex cursor-default items-center">
                 <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
-                  <IconButton
-                    onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
-                    ariaLabel="delete"
-                    colorSchema="danger"
-                  >
-                    <FontAwesomeIcon icon={faXmark} />
-                  </IconButton>
+                  <Tooltip content="Remove Integration">
+                    <IconButton
+                      onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
+                      ariaLabel="delete"
+                      colorSchema="danger"
+                      variant="star"
+                    >
+                      <FontAwesomeIcon icon={faXmark} className="px-0.5" />
+                    </IconButton>
+                  </Tooltip>
                 </div>
               </div>
             </div>
@@ -130,7 +134,7 @@ export const IntegrationsSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteConfirmation.isOpen}
         title={`Are you sure want to remove ${
-          (popUp?.deleteConfirmation.data as TIntegration)?.integration || " "
+          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || " "
         } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
         onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
         deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""}

From 924a969307d7fc4bc1bc7d1c851e4d83008b6d87 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 15:39:36 +0700
Subject: [PATCH 11/22] Fix lint errors for revamped billing and usage page

---
 .../controllers/v1/organizationsController.ts |  47 +--
 backend/src/ee/routes/v1/organizations.ts     |  57 +---
 .../src/components/login/InitialLoginStep.tsx |   2 +-
 frontend/src/hooks/api/organization/index.ts  |  24 +-
 .../src/hooks/api/organization/queries.tsx    | 193 ++++++------
 frontend/src/hooks/api/organization/types.ts  |  71 +++++
 frontend/src/hooks/usePopUp.tsx               |   4 +-
 frontend/src/pages/settings/billing/[id].tsx  |  91 +-----
 .../BillingSettingsPage.tsx                   | 106 +------
 .../BillingCloudTab/BillingCloudTab.tsx       |  24 +-
 .../BillingCloudTab/CurrentPlanSection.tsx    |  29 +-
 .../BillingCloudTab/ManagePlansModal.tsx      |  60 ++--
 .../BillingCloudTab/ManagePlansTable.tsx      | 133 ++++-----
 .../BillingCloudTab/PreviewSection.tsx        |  41 ++-
 .../BillingDetailsTab/BillingDetailsTab.tsx   |   4 +-
 .../BillingDetailsTab/CompanyNameSection.tsx  |  72 +++--
 .../BillingDetailsTab/InvoiceEmailSection.tsx |  61 ++--
 .../BillingDetailsTab/PmtMethodsSection.tsx   | 120 ++------
 .../BillingDetailsTab/PmtMethodsTable.tsx     |  90 ++++++
 .../BillingDetailsTab/TaxIDModal.tsx          | 195 ++++++++++++
 .../BillingDetailsTab/TaxIDSection.tsx        | 277 ++----------------
 .../BillingDetailsTab/TaxIDTable.tsx          | 137 +++++++++
 .../BillingReceiptsTab/BillingReceiptsTab.tsx |  94 +-----
 .../BillingReceiptsTab/InvoicesTable.tsx      |  88 ++++++
 .../BillingSelfHostedTab.tsx                  |   0
 .../components/BillingSelfHostedTab/index.tsx |   0
 .../BillingTabGroup/BillingTabGroup.tsx       |  44 +++
 .../components/BillingTabGroup/index.tsx      |   1 +
 .../BillingSettingsPage/components/index.tsx  |   4 +-
 29 files changed, 989 insertions(+), 1080 deletions(-)
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx
 delete mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
 delete mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
 create mode 100644 frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx

diff --git a/backend/src/ee/controllers/v1/organizationsController.ts b/backend/src/ee/controllers/v1/organizationsController.ts
index d91efa057..fb13a6575 100644
--- a/backend/src/ee/controllers/v1/organizationsController.ts
+++ b/backend/src/ee/controllers/v1/organizationsController.ts
@@ -3,25 +3,6 @@ import { getLicenseServerUrl } from "../../../config";
 import { licenseServerKeyRequest } from "../../../config/request";
 import { EELicenseService } from "../../services";
 
-export const createProductCheckoutSession = async (req: Request, res: Response) => {
-    const {
-        productId,
-        success_url
-    } = req.body;
-    console.log('createProductCheckoutSession req.body: ', req.body);
-
-    const { data } = await licenseServerKeyRequest.post(
-        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details/session`,
-        {
-            productId,
-            success_url
-        }
-    ); 
-    console.log('createProductCheckoutSession data: ', data);
-
-    return res.status(200).send(data);
-}
-
 export const getOrganizationPlansTable = async (req: Request, res: Response) => {
     const billingCycle = req.query.billingCycle as string;
     
@@ -74,30 +55,6 @@ export const getOrganizationPlanTable = async (req: Request, res: Response) => {
     return res.status(200).send(data);
 }
 
-/**
- * Update the organization plan to product with id [productId]
- * @param req 
- * @param res 
- * @returns 
- */
-export const updateOrganizationPlan = async (req: Request, res: Response) => {
-    const {
-        productId,
-    } = req.body;
-
-    console.log('backend update productId: ', productId);
-    const { data } = await licenseServerKeyRequest.patch(
-        `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/cloud-plan`,
-        {
-            productId,
-        }
-    ); 
-
-    console.log(' ttproductId: ', data);
-    
-    return res.status(200).send(data);
-}
-
 export const getOrganizationBillingDetails = async (req: Request, res: Response) => {
     const { data  } = await licenseServerKeyRequest.get(
         `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details`
@@ -208,9 +165,9 @@ export const deleteOrganizationTaxId = async (req: Request, res: Response) => {
 }
 
 export const getOrganizationInvoices = async (req: Request, res: Response) => {
-    const { data } = await licenseServerKeyRequest.get(
+    const { data: { invoices } } = await licenseServerKeyRequest.get(
         `${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/invoices`
     );
 
-    return res.status(200).send(data); 
+    return res.status(200).send(invoices); 
 }
\ No newline at end of file
diff --git a/backend/src/ee/routes/v1/organizations.ts b/backend/src/ee/routes/v1/organizations.ts
index e9ea8f0e4..37be3a96d 100644
--- a/backend/src/ee/routes/v1/organizations.ts
+++ b/backend/src/ee/routes/v1/organizations.ts
@@ -11,26 +11,10 @@ import {
     ACCEPTED, ADMIN, MEMBER, OWNER,
 } from "../../../variables";
 
-router.post(
-    "/:organizationId/billing-details/session",
-    requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
-	}),
-    requireOrganizationAuth({
-        acceptedRoles: [OWNER, ADMIN, MEMBER],
-        acceptedStatuses: [ACCEPTED],
-    }),
-    param("organizationId").exists().trim(),
-    body("productId").exists().trim(),
-    body("success_url").exists().trim(),
-    validateRequest,
-    organizationsController.createProductCheckoutSession
-);
-
 router.get(
     "/:organizationId/plans/table",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -45,7 +29,7 @@ router.get(
 router.get(
     "/:organizationId/plan",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -60,7 +44,7 @@ router.get(
 router.get(
     "/:organizationId/plan/billing",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -75,7 +59,7 @@ router.get(
 router.get(
     "/:organizationId/plan/table",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -87,25 +71,10 @@ router.get(
     organizationsController.getOrganizationPlanTable
 );
 
-router.patch(
-    "/:organizationId/plan",
-    requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
-	}),
-    requireOrganizationAuth({
-        acceptedRoles: [OWNER, ADMIN, MEMBER],
-        acceptedStatuses: [ACCEPTED],
-    }),
-    param("organizationId").exists().trim(),
-    body("productId").exists().isString(),
-    validateRequest,
-    organizationsController.updateOrganizationPlan
-);
-
 router.get(
     "/:organizationId/billing-details",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -119,7 +88,7 @@ router.get(
 router.patch(
     "/:organizationId/billing-details",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -135,7 +104,7 @@ router.patch(
 router.get(
     "/:organizationId/billing-details/payment-methods",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -149,7 +118,7 @@ router.get(
 router.post(
     "/:organizationId/billing-details/payment-methods",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -165,7 +134,7 @@ router.post(
 router.delete(
     "/:organizationId/billing-details/payment-methods/:pmtMethodId",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -180,7 +149,7 @@ router.delete(
 router.get(
     "/:organizationId/billing-details/tax-ids",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -194,7 +163,7 @@ router.get(
 router.post(
     "/:organizationId/billing-details/tax-ids",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -210,7 +179,7 @@ router.post(
 router.delete(
     "/:organizationId/billing-details/tax-ids/:taxId",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -225,7 +194,7 @@ router.delete(
 router.get(
     "/:organizationId/invoices",
     requireAuth({
-		acceptedAuthModes: ["jwt", "apiKey"],
+		acceptedAuthModes: ["jwt"],
 	}),
     requireOrganizationAuth({
         acceptedRoles: [OWNER, ADMIN, MEMBER],
diff --git a/frontend/src/components/login/InitialLoginStep.tsx b/frontend/src/components/login/InitialLoginStep.tsx
index 5f17b1cf9..bcce19d1c 100644
--- a/frontend/src/components/login/InitialLoginStep.tsx
+++ b/frontend/src/components/login/InitialLoginStep.tsx
@@ -97,7 +97,7 @@ export default function InitialLoginStep({
 
         setIsLoading(false);
     }
-
+    
     return <div className='flex flex-col mx-auto w-full justify-center items-center'>
         <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
         {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
diff --git a/frontend/src/hooks/api/organization/index.ts b/frontend/src/hooks/api/organization/index.ts
index a856001c7..cffa80d63 100644
--- a/frontend/src/hooks/api/organization/index.ts
+++ b/frontend/src/hooks/api/organization/index.ts
@@ -1,18 +1,16 @@
 export {
-    useGetOrgPlanBillingInfo,
-    useGetOrgPlanTable,
-    useGetOrgPlansTable,
-    useGetOrganization, 
-    useRenameOrg, 
-    useGetOrgBillingDetails,
-    useUpdateOrgBillingDetails,
-    useGetOrgPmtMethods,
     useAddOrgPmtMethod,
-    useDeleteOrgPmtMethod,
-    useGetOrgTaxIds,
     useAddOrgTaxId,
+    useCreateCustomerPortalSession,
+    useDeleteOrgPmtMethod,
     useDeleteOrgTaxId,
+    useGetOrganization, 
+    useGetOrgBillingDetails,
     useGetOrgInvoices,
-    useUpdateOrgPlan,
-    useCreateProductCheckoutSession
-} from "./queries";
+    useGetOrgPlanBillingInfo,
+    useGetOrgPlansTable,
+    useGetOrgPlanTable,
+    useGetOrgPmtMethods,
+    useGetOrgTaxIds,
+    useRenameOrg, 
+    useUpdateOrgBillingDetails} from "./queries";
diff --git a/frontend/src/hooks/api/organization/queries.tsx b/frontend/src/hooks/api/organization/queries.tsx
index 08476ba00..d3f161f64 100644
--- a/frontend/src/hooks/api/organization/queries.tsx
+++ b/frontend/src/hooks/api/organization/queries.tsx
@@ -1,6 +1,17 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
 import { apiRequest } from "@app/config/request";
-import { Organization, RenameOrgDTO, BillingDetails } from "./types";
+
+import { 
+  BillingDetails,
+  Invoice,
+  Organization, 
+  OrgPlanTable,
+  PlanBillingInfo,
+  PmtMethod,
+  ProductsTable,
+  RenameOrgDTO, 
+  TaxID} from "./types";
 
 const organizationKeys = {
   getUserOrganization: ["organization"] as const,
@@ -13,50 +24,17 @@ const organizationKeys = {
   getOrgInvoices: (orgId: string) => [{ orgId }, "organization-invoices"] as const
 };
 
-const fetchUserOrganization = async () => {
-  const { data } = await apiRequest.get<{ organizations: Organization[] }>("/api/v1/organization");
+export const useGetOrganization = () => {
+  return useQuery({ 
+    queryKey: organizationKeys.getUserOrganization, 
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ organizations: Organization[] }>("/api/v1/organization");
 
-  return data.organizations;
-};
-
-// TODO: fix the type situation here and move fetches directly into hooks
-
-const fetchOrgBillingDetails = async (organizationId: string) => {
-  const { data } = await apiRequest.get<BillingDetails>(
-    `/api/v1/organizations/${organizationId}/billing-details`
-  );
-
-  return data;
+      return data.organizations;
+    }
+  });
 }
 
-const fetchOrgPmtMethods = async (organizationId: string) => {
-  const { data } = await apiRequest.get<BillingDetails>(
-    `/api/v1/organizations/${organizationId}/billing-details/payment-methods`
-  );
-
-  return data;
-}
-
-const fetchOrgTaxIds = async (organizationId: string) => {
-  const { data } = await apiRequest.get<BillingDetails>(
-    `/api/v1/organizations/${organizationId}/billing-details/tax-ids`
-  );
-
-  return data;
-}
-
-const fetchOrgInvoices = async (organizationId: string) => {
-  const { data: { invoices } } = await apiRequest.get<BillingDetails>(
-    `/api/v1/organizations/${organizationId}/invoices`
-  );
-
-  return invoices;
-}
-
-export const useGetOrganization = () =>
-  useQuery({ queryKey: organizationKeys.getUserOrganization, queryFn: fetchUserOrganization });
-
-// mutation
 export const useRenameOrg = () => {
   const queryClient = useQueryClient();
 
@@ -73,7 +51,7 @@ export const useGetOrgPlanBillingInfo = (organizationId: string) => {
   return useQuery({
     queryKey: organizationKeys.getOrgPlanBillingInfo(organizationId),
     queryFn: async () => {
-      const { data } = await apiRequest.get<BillingDetails>(
+      const { data } = await apiRequest.get<PlanBillingInfo>(
         `/api/v1/organizations/${organizationId}/plan/billing`
       );
 
@@ -87,7 +65,7 @@ export const useGetOrgPlanTable = (organizationId: string) => {
   return useQuery({
     queryKey: organizationKeys.getOrgPlanTable(organizationId),
     queryFn: async () => {
-      const { data } = await apiRequest.get<BillingDetails>(
+      const { data } = await apiRequest.get<OrgPlanTable>(
         `/api/v1/organizations/${organizationId}/plan/table`
       );
 
@@ -102,12 +80,12 @@ export const useGetOrgPlansTable = ({
   billingCycle
 }: {
   organizationId: string;
-  billingCycle: "monthly" | "annual"
+  billingCycle: "monthly" | "yearly"
 }) => {
   return useQuery({
     queryKey: organizationKeys.getOrgPlansTable(organizationId, billingCycle),
     queryFn: async () => {
-      const { data } = await apiRequest.get<BillingDetails>(
+      const { data } = await apiRequest.get<ProductsTable>(
         `/api/v1/organizations/${organizationId}/plans/table?billingCycle=${billingCycle}`
       );
 
@@ -120,7 +98,13 @@ export const useGetOrgPlansTable = ({
 export const useGetOrgBillingDetails = (organizationId: string) => {
   return useQuery({
     queryKey: organizationKeys.getOrgBillingDetails(organizationId),
-    queryFn: () => fetchOrgBillingDetails(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<BillingDetails>(
+        `/api/v1/organizations/${organizationId}/billing-details`
+      );
+
+      return data;
+    },
     enabled: true
   });
 }
@@ -137,10 +121,14 @@ export const useUpdateOrgBillingDetails = () => {
       name?: string;
       email?: string;
     }) => {
-      const { data } = await apiRequest.patch(`/api/v1/organizations/${organizationId}/billing-details`, {
-        name,
-        email
-      });
+      const { data } = await apiRequest.patch(
+        `/api/v1/organizations/${organizationId}/billing-details`, 
+        {
+          name,
+          email
+        }
+      );
+
       return data;
     },
     onSuccess(_, dto) {
@@ -152,7 +140,13 @@ export const useUpdateOrgBillingDetails = () => {
 export const useGetOrgPmtMethods = (organizationId: string) => {
   return useQuery({
     queryKey: organizationKeys.getOrgPmtMethods(organizationId),
-    queryFn: () => fetchOrgPmtMethods(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<PmtMethod[]>(
+        `/api/v1/organizations/${organizationId}/billing-details/payment-methods`
+      );
+
+      return data;
+    },
     enabled: true
   });
 }
@@ -170,10 +164,14 @@ export const useAddOrgPmtMethod = () => {
       success_url: string;
       cancel_url: string;
     }) => {
-      const { data: { url } } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/payment-methods`, {
-        success_url,
-        cancel_url
-      });
+      const { data: { url } } = await apiRequest.post(
+        `/api/v1/organizations/${organizationId}/billing-details/payment-methods`, 
+        {
+          success_url,
+          cancel_url
+        }
+      );
+
       return url;
     },
     onSuccess(_, dto) {
@@ -193,7 +191,10 @@ export const useDeleteOrgPmtMethod = () => {
       organizationId: string;
       pmtMethodId: string;
     }) => {
-      const { data } = await apiRequest.delete(`/api/v1/organizations/${organizationId}/billing-details/payment-methods/${pmtMethodId}`);
+      const { data } = await apiRequest.delete(
+        `/api/v1/organizations/${organizationId}/billing-details/payment-methods/${pmtMethodId}`
+      );
+
       return data;
     },
     onSuccess(_, dto) {
@@ -205,7 +206,13 @@ export const useDeleteOrgPmtMethod = () => {
 export const useGetOrgTaxIds = (organizationId: string) => {
   return useQuery({
     queryKey: organizationKeys.getOrgTaxIds(organizationId),
-    queryFn: () => fetchOrgTaxIds(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TaxID[]>(
+        `/api/v1/organizations/${organizationId}/billing-details/tax-ids`
+      );
+
+      return data;
+    },
     enabled: true
   });
 }
@@ -223,10 +230,13 @@ export const useAddOrgTaxId = () => {
       type: string;
       value: string;
     }) => {
-      const { data } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/tax-ids`, {
-        type,
-        value
-      });
+      const { data } = await apiRequest.post(
+        `/api/v1/organizations/${organizationId}/billing-details/tax-ids`, 
+        {
+          type,
+          value
+        }
+      );
 
       return data;
     },
@@ -247,7 +257,10 @@ export const useDeleteOrgTaxId = () => {
       organizationId: string;
       taxId: string;
     }) => {
-      const { data } = await apiRequest.delete(`/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}`);
+      const { data } = await apiRequest.delete(
+        `/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}`
+      );
+
       return data;
     },
     onSuccess(_, dto) {
@@ -259,54 +272,24 @@ export const useDeleteOrgTaxId = () => {
 export const useGetOrgInvoices = (organizationId: string) => {
   return useQuery({
     queryKey: organizationKeys.getOrgInvoices(organizationId),
-    queryFn: () => fetchOrgInvoices(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<Invoice[]>(
+        `/api/v1/organizations/${organizationId}/invoices`
+      );
+
+      return data;
+    },
     enabled: true
   });
 }
 
-export const useUpdateOrgPlan = () => {
-  const queryClient = useQueryClient();
+export const useCreateCustomerPortalSession = () => {
   return useMutation({
-    mutationFn: async ({
-      organizationId,
-      productId
-    }: {
-      organizationId: string;
-      productId: string;
-    }) => {
-      const { data } = await apiRequest.patch(`/api/v1/organizations/${organizationId}/plan`, {
-        productId
-      });
+    mutationFn: async (organizationId: string) => {
+      const { data } = await apiRequest.post(
+        `/api/v1/organization/${organizationId}/customer-portal-session`
+      );
       return data;
-    },
-    onSuccess(_, dto) {
-      queryClient.invalidateQueries([
-        organizationKeys.getOrgPlanTable(dto.organizationId),
-      ]);
-    }
-  });
-};
-
-export const useCreateProductCheckoutSession = () => {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      organizationId,
-      productId,
-      success_url
-    }: {
-      organizationId: string;
-      productId: string;
-      success_url: string;
-    }) => {
-      const { data } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/session`, {
-        productId,
-        success_url
-      });
-      return data;
-    },
-    onSuccess(_, dto) {
-      console.log('onSuccess');
     }
   });
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/api/organization/types.ts b/frontend/src/hooks/api/organization/types.ts
index 94528cd15..a33a7f875 100644
--- a/frontend/src/hooks/api/organization/types.ts
+++ b/frontend/src/hooks/api/organization/types.ts
@@ -13,4 +13,75 @@ export type RenameOrgDTO = {
 export type BillingDetails = {
   name: string;
   email: string;
+}
+
+export type PlanBillingInfo = {
+  amount: number;
+  currentPeriodEnd: number;
+  currentPeriodStart: number;
+  interval: "month" | "year";
+  intervalCount: number;
+  quantity: number;
+}
+
+export type Invoice = {
+  _id: string;
+  created: number;
+  invoice_pdf: string;
+  number: string;
+  paid: boolean;
+  total: number;
+}
+
+export type PmtMethod = {
+  _id: string;
+  brand: string;
+  exp_month: number;  
+  exp_year: number;
+  funding: string;
+  last4: string;
+}
+
+export type TaxID = {
+  _id: string;
+  country: string;
+  type: string;
+  value: string;
+}
+
+export type OrgPlanTableHead = {
+  name: string;
+}
+
+export type OrgPlanTableRow = {
+  name: string;
+  allowed: number | boolean | null;
+  used: string;
+}
+
+export type OrgPlanTable = {
+  head: OrgPlanTableHead[];
+  rows: OrgPlanTableRow[];
+}
+
+export type ProductsTableHead = {
+  name: string;
+  price: number | null;
+  priceLine: string;
+  productId: string;
+  slug: string;
+  tier: number;
+}
+
+export type ProductsTableRow = {
+  name: string;
+  starter: number | boolean | null;
+  team: number | boolean | null;
+  pro: number | boolean | null;
+  enterprise: number | boolean | null;
+}
+
+export type ProductsTable = {
+  head: ProductsTableHead[];
+  rows: ProductsTableRow[];
 }
\ No newline at end of file
diff --git a/frontend/src/hooks/usePopUp.tsx b/frontend/src/hooks/usePopUp.tsx
index f3b849870..e9d8257e3 100644
--- a/frontend/src/hooks/usePopUp.tsx
+++ b/frontend/src/hooks/usePopUp.tsx
@@ -10,14 +10,14 @@ interface UsePopUpProps {
  * checks which type of inputProps were given and converts them into key-names
  * SIDENOTE: On inputting give it as const and not string with (as const)
  */
-type UsePopUpState<T extends Readonly<string[]> | UsePopUpProps[]> = {
+export type UsePopUpState<T extends Readonly<string[]> | UsePopUpProps[]> = {
   [P in T extends UsePopUpProps[] ? T[number]["name"] : T[number]]: {
     isOpen: boolean;
     data?: unknown;
   };
 };
 
-interface UsePopUpReturn<T extends Readonly<string[]> | UsePopUpProps[]> {
+export interface UsePopUpReturn<T extends Readonly<string[]> | UsePopUpProps[]> {
   popUp: UsePopUpState<T>;
   handlePopUpOpen: (popUpName: keyof UsePopUpState<T>, data?: unknown) => void;
   handlePopUpClose: (popUpName: keyof UsePopUpState<T>) => void;
diff --git a/frontend/src/pages/settings/billing/[id].tsx b/frontend/src/pages/settings/billing/[id].tsx
index 39c8e71ac..20cb57f02 100644
--- a/frontend/src/pages/settings/billing/[id].tsx
+++ b/frontend/src/pages/settings/billing/[id].tsx
@@ -1,57 +1,11 @@
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
-import { useSubscription } from "@app/context";
+
 import { BillingSettingsPage } from "@app/views/Settings/BillingSettingsPage";
 
 export default function SettingsBilling() {
-  const { subscription } = useSubscription();
-
   const { t } = useTranslation();
 
-  const plans = [
-    {
-      key: 1,
-      name: t("billing.starter.name")!,
-      price: t("billing.free")!,
-      priceExplanation: t("billing.starter.price-explanation")!,
-      text: t("billing.starter.text")!,
-      subtext: t("billing.starter.subtext")!,
-      buttonTextMain: t("billing.downgrade")!,
-      buttonTextSecondary: t("billing.learn-more")!,
-      current: subscription?.slug === "starter"
-    },
-    {
-      key: 2,
-      name: "Team",
-      price: "$8",
-      priceExplanation: t("billing.professional.price-explanation")!,
-      text: "Unlimited members, up to 10 projects. Additional developer experience features.",
-      buttonTextMain: t("billing.upgrade")!,
-      buttonTextSecondary: t("billing.learn-more")!,
-      current: subscription?.slug === "team" || subscription?.slug === "team-annual"
-    },
-    {
-      key: 3,
-      name: t("billing.professional.name")!,
-      price: "$18",
-      priceExplanation: t("billing.professional.price-explanation")!,
-      text: t("billing.enterprise.text")!,
-      subtext: t("billing.professional.subtext")!,
-      buttonTextMain: t("billing.upgrade")!,
-      buttonTextSecondary: t("billing.learn-more")!,
-      current: subscription?.slug === "pro" || subscription?.slug === "pro-annual"
-    },
-    {
-      key: 4,
-      name: t("billing.enterprise.name")!,
-      price: t("billing.custom-pricing")!,
-      text: "Boost the security and efficiency of your engineering teams.",
-      buttonTextMain: t("billing.schedule-demo")!,
-      buttonTextSecondary: t("billing.learn-more")!,
-      current: subscription?.slug === "enterprise"
-    }
-  ];
-
   return (
     <div className="h-full bg-bunker-800">
       <Head>
@@ -63,45 +17,4 @@ export default function SettingsBilling() {
   );
 }
 
-SettingsBilling.requireAuth = true;
-
-
-
-// return (
-//     <div className="h-full bg-bunker-800">
-//       <Head>
-//         <title>{t("common.head-title", { title: t("billing.title") })}</title>
-//         <link rel="icon" href="/infisical.ico" />
-//       </Head>
-//       <div className="h-full bg-red">
-//         <NavHeader pageName={t("billing.title")} />
-//         <div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
-//           <div className="flex flex-col items-start justify-start text-3xl">
-//             <p className="mr-4 font-semibold text-gray-200">{t("billing.title")}</p>
-//             <p className="mr-4 text-base font-normal text-gray-400">{t("billing.description")}</p>
-//           </div>
-//         </div>
-//         <div className="ml-6 flex w-max flex-col text-mineshaft-50">
-//           <p className="text-xl font-semibold">{t("billing.subscription")}</p>
-//           <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
-//             {plans.map((plan) => (
-//               <Plan key={plan.name} plan={plan} />
-//             ))}
-//           </div>
-//           {/* <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
-//           <div className="flex flex-row">
-//             <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
-//               <p className="text-6xl font-bold">{numUsers}</p>
-//               <p className="text-gray-300">
-//                 Organization members
-//               </p>
-//             </div>
-//             <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
-//                 <p className="text-6xl font-bold">1 </p>
-//                 <p className="text-gray-300">Organization projects</p>
-//               </div>
-//           </div> */}
-//         </div>
-//       </div>
-//     </div>
-//   );
+SettingsBilling.requireAuth = true;
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
index 02ee258c9..32f61c006 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
@@ -1,30 +1,9 @@
 import { useTranslation } from "react-i18next";
-import Head from "next/head";
-import Plan from "@app/components/billing/Plan";
+
 import NavHeader from "@app/components/navigation/NavHeader";
-import { useSubscription } from "@app/context";
+
 import {
-  Input,
-  Button,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus, faMagnifyingGlass, faDownload } from "@fortawesome/free-solid-svg-icons";
-
-import { Tab } from '@headlessui/react'
-import { Fragment } from 'react'
-
-import { 
-    BillingCloudTab,
-    BillingReceiptsTab,
-    BillingDetailsTab
+  BillingTabGroup
 } from "./components";
 
 export const BillingSettingsPage = () => {
@@ -36,85 +15,10 @@ export const BillingSettingsPage = () => {
         <div className="flex text-3xl mt-8 items-start max-w-screen-lg">
           <div className="flex-1">
             <p className="font-semibold text-gray-200">{t("billing.title")}</p>
-            {/* <p className="text-base font-normal text-gray-400">
-              Manage usage and billing for Infisical Cloud and Self-hosted instances here
-            </p> */}
-          </div>
-          <div>
           </div>
+          <div />
         </div>
-
-        <Tab.Group>
-            <Tab.List className="mt-8 border-b-2 border-mineshaft-800 max-w-screen-lg">
-                <Tab as={Fragment}>
-                    {({ selected }) => (
-                        /* Use the `selected` state to conditionally style the selected tab. */
-                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
-                            Infisical Cloud
-                        </button>
-                    )}
-                </Tab>
-                {/* <Tab as={Fragment}>
-                    {({ selected }) => (
-                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
-                            Self-hosted
-                        </button>
-                    )}
-                </Tab> */}
-                <Tab as={Fragment}>
-                    {({ selected }) => (
-                        /* Use the `selected` state to conditionally style the selected tab. */
-                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
-                            Receipts
-                        </button>
-                    )}
-                </Tab>
-                <Tab as={Fragment}>
-                    {({ selected }) => (
-                        /* Use the `selected` state to conditionally style the selected tab. */
-                        <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
-                            Billing details
-                        </button>
-                    )}
-                </Tab>
-            </Tab.List>
-            <Tab.Panels>
-                <Tab.Panel>
-                    <BillingCloudTab />
-                </Tab.Panel>
-                {/* <Tab.Panel>Content 2</Tab.Panel> */}
-                <Tab.Panel>
-                    <BillingReceiptsTab />
-                </Tab.Panel>
-                <Tab.Panel>
-                    <BillingDetailsTab />
-                </Tab.Panel>
-            </Tab.Panels>
-        </Tab.Group>
-
-        
-        
-        {/* <div className="flex w-max flex-col text-mineshaft-50 mt-8">
-          <p className="text-xl font-semibold">{t("billing.subscription")}</p>
-          <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
-            {plans.map((plan) => (
-              <Plan key={plan.name} plan={plan} />
-            ))}
-          </div>
-          <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
-          <div className="flex flex-row">
-            <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
-              <p className="text-6xl font-bold">{numUsers}</p>
-              <p className="text-gray-300">
-                Organization members
-              </p>
-            </div>
-            <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
-                <p className="text-6xl font-bold">1 </p>
-                <p className="text-gray-300">Organization projects</p>
-              </div>
-          </div>
-        </div> */}
+        <BillingTabGroup />
       </div>
     );
 };
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
index 331b7545c..4ce5fb1d7 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
@@ -1,27 +1,5 @@
-import { useTranslation } from "react-i18next";
-import Head from "next/head";
-import Plan from "@app/components/billing/Plan";
-import NavHeader from "@app/components/navigation/NavHeader";
-import {
-  Input,
-  Button,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus, faMagnifyingGlass, faDownload } from "@fortawesome/free-solid-svg-icons";
-
-import { PreviewSection } from "./PreviewSection";
 import { CurrentPlanSection } from "./CurrentPlanSection";
-
-// TODO: optimize + modularize
-// TODO: get cloud plan full
+import { PreviewSection } from "./PreviewSection";
 
 export const BillingCloudTab = () => {
     return (
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
index cfdacd869..c9973646a 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
@@ -1,7 +1,8 @@
+import { faCircleCheck, faCircleXmark,faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import {
-  Input,
-  IconButton,
-  Button,
+  EmptyState,
   Table,
   TableContainer,
   TableSkeleton,
@@ -9,24 +10,20 @@ import {
   Td,
   Th,
   THead,
-  Tr,
-  EmptyState
-} from "@app/components/v2";
+  Tr} from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { 
     useGetOrgPlanTable
 } from "@app/hooks/api";
-import { useOrganization } from "@app/context";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFileInvoice, faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
 
 export const CurrentPlanSection = () => {
     const { currentOrg } = useOrganization();
-    const { data, isLoading } = useGetOrgPlanTable(currentOrg?._id ?? '');
+    const { data, isLoading } = useGetOrgPlanTable(currentOrg?._id ?? "");
     
     const displayCell = (value: null | number | string | boolean) => {
-        if (value === null) return '-';
+        if (value === null) return "-";
         
-        if (typeof value === 'boolean') {
+        if (typeof value === "boolean") {
             if (value) return (
                 <FontAwesomeIcon 
                     icon={faCircleCheck}
@@ -58,14 +55,10 @@ export const CurrentPlanSection = () => {
                     </Tr>
                 </THead>
                 <TBody>
-                    {!isLoading && data?.rows?.length > 0 && data.rows.map(({
+                    {!isLoading && data && data?.rows?.length > 0 && data.rows.map(({
                         name,
                         allowed,
                         used
-                    }: {
-                        name: string;
-                        allowed: number | boolean;
-                        used: string;
                     }) => {
                         return (
                            <Tr key={`current-plan-row-${name}`} className="h-12">
@@ -76,7 +69,7 @@ export const CurrentPlanSection = () => {
                         );
                     })}
                     {isLoading && <TableSkeleton columns={5} key="invoices" />}
-                    {!isLoading && data?.length === 0 && (
+                    {!isLoading && data && data?.rows?.length === 0 && (
                         <Tr>
                             <Td colSpan={3}>
                                 <EmptyState 
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
index 6a7da542f..20c240544 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
@@ -1,45 +1,25 @@
-import { useSubscription } from "@app/context";
-import { useOrganization } from "@app/context";
-import { Tab } from '@headlessui/react'
-import { Fragment } from 'react'
+import { Fragment } from "react"
+import { Tab } from "@headlessui/react"
+
 import { 
-    useGetOrgPlanBillingInfo,
-    useGetOrgPlanTable,
-    useGetOrgPlansTable
-} from "@app/hooks/api";
-import {
-  FormControl,
-  Button,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  EmptyState,
-  Modal,
-  ModalContent
+    Modal,
+    ModalContent
 } from "@app/components/v2";
-import { usePopUp } from "@app/hooks/usePopUp";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFileInvoice, faCircleCheck, faCircleXmark, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { ManagePlansTable } from "./ManagePlansTable";
 
+type Props = {
+  popUp: UsePopUpState<["managePlan"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["managePlan"]>, state?: boolean) => void;
+};
+
 export const ManagePlansModal = ({
     popUp,
-    handlePopUpToggle
-}) => {
-    const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
-    
+    handlePopUpToggle 
+}: Props) => {
     return (
-        <Modal
+    <Modal
             isOpen={popUp?.managePlan?.isOpen}
             onOpenChange={(isOpen) => {
                 handlePopUpToggle("managePlan", isOpen);
@@ -50,14 +30,20 @@ export const ManagePlansModal = ({
                     <Tab.List className="border-b-2 border-mineshaft-600 max-w-screen-lg">
                         <Tab as={Fragment}>
                             {({ selected }) => (
-                                <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                                <button 
+                                    type="button"
+                                    className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
+                                >
                                     Bill monthly
                                 </button>
                             )}
                         </Tab>
                         <Tab as={Fragment}>
                             {({ selected }) => (
-                                <button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
+                                <button 
+                                    type="button"
+                                    className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
+                                >
                                     Bill yearly
                                 </button>
                             )}
@@ -75,4 +61,4 @@ export const ManagePlansModal = ({
             </ModalContent>
         </Modal>
     );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
index f4ae1884c..7e0a73b2f 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
@@ -1,21 +1,9 @@
-import { useSubscription } from "@app/context";
-import { useOrganization } from "@app/context";
-import { Tab } from '@headlessui/react'
-import { Fragment } from 'react'
-import { 
-    useGetOrgPlanBillingInfo,
-    useGetOrgPlanTable,
-    useGetOrgPlansTable,
-    useUpdateOrgPlan,
-    useCreateProductCheckoutSession
-} from "@app/hooks/api";
+import { faCircleCheck, faCircleXmark,faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import {
-  FormControl,
   Button,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
+  EmptyState,
   Table,
   TableContainer,
   TableSkeleton,
@@ -24,37 +12,31 @@ import {
   Th,
   THead,
   Tr,
-  EmptyState,
-  Modal,
-  ModalContent
 } from "@app/components/v2";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFileInvoice, faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
-
-// TODO: upgrade
+import { useOrganization,useSubscription  } from "@app/context";
+import { 
+    useCreateCustomerPortalSession,
+    useGetOrgPlansTable} from "@app/hooks/api";
 
 type Props = {
-    billingCycle: 'monthly' | 'yearly'
+    billingCycle: "monthly" | "yearly"
 }
 
 export const ManagePlansTable = ({
     billingCycle
 }: Props) => {
     const { currentOrg } = useOrganization();
-    const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
+    const { subscription } = useSubscription();
     const { data: tableData, isLoading: isTableDataLoading } = useGetOrgPlansTable({
-        organizationId: currentOrg?._id ?? '',
+        organizationId: currentOrg?._id ?? "",
         billingCycle
     });
-    const updateOrgPlan = useUpdateOrgPlan();
-    const createProductCheckoutSession = useCreateProductCheckoutSession();
-
-    console.log('tableData: ', tableData);
+    const createCustomerPortalSession = useCreateCustomerPortalSession();
 
     const displayCell = (value: null | number | string | boolean) => {
-        if (value === null) return '-';
+        if (value === null) return "-";
         
-        if (typeof value === 'boolean') {
+        if (typeof value === "boolean") {
             if (value) return (
                 <FontAwesomeIcon 
                     icon={faCircleCheck}
@@ -77,20 +59,18 @@ export const ManagePlansTable = ({
         <TableContainer>
             <Table>
                 <THead>
-                    {!isTableDataLoading && tableData?.head.length > 0 && (
+                    {subscription && !isTableDataLoading && tableData && (
                         <Tr>
                             <Th className="">Feature / Limit</Th>
                             {tableData.head.map(({
                                 name,
-                                slug,
                                 priceLine
-                            }: {
-                                name: string;
-                                slug: string;
-                                priceLine: string;
                             }) => {
                                 return (
-                                    <Th className={`${slug === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}`}>
+                                    <Th 
+                                        key={`plans-feature-head-${billingCycle}-${name}`}
+                                        className="text-center flex-1"
+                                    >
                                         <p>{name}</p>
                                         <p>{priceLine}</p>
                                     </Th>
@@ -100,26 +80,28 @@ export const ManagePlansTable = ({
                     )}
                 </THead>
                 <TBody>
-                    {!isTableDataLoading && tableData?.rows.length > 0 && tableData.rows.map(({
+                    {subscription && !isTableDataLoading && tableData && tableData.rows.map(({
                         name,
                         starter,
                         team,
                         pro,
                         enterprise
-                    }: {
-                        name: string;
-                        starter: null | number | string | boolean;
-                        team: null | number | string | boolean;
-                        pro: null | number | string | boolean;
-                        enterprise: null | number | string | boolean;
                     }) => {
                         return (
-                            <Tr className="h-12">
+                            <Tr className="h-12" key={`plans-feature-row-${billingCycle}-${name}`}>
                                 <Td>{displayCell(name)}</Td>
-                                <Td className={'starter' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(starter)}</Td>
-                                <Td className={'team' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(team)}</Td>
-                                <Td className={'pro' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(pro)}</Td>
-                                <Td className={'enterprise' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(enterprise)}</Td>
+                                <Td className="text-center">
+                                    {displayCell(starter)}
+                                </Td>
+                                <Td className="text-center">
+                                    {displayCell(team)}
+                                </Td>
+                                <Td className="text-center">
+                                    {displayCell(pro)}
+                                </Td>
+                                <Td className="text-center">
+                                    {displayCell(enterprise)}
+                                </Td>
                             </Tr>
                         );
                     })}
@@ -134,46 +116,53 @@ export const ManagePlansTable = ({
                             </Td>
                         </Tr>
                     )}
-                    {subscription && !isTableDataLoading && tableData?.head.length > 0 && (
+                    {subscription && !isTableDataLoading && tableData && (
                         <Tr className="h-12">
-                            <Td></Td>
+                            <Td />
                             {tableData.head.map(({
                                 slug,
-                                productId
-                            }: {
-                                slug: string;
-                                productId: string;
+                                tier
                             }) => {
+                                
                                 const isCurrentPlan = slug === subscription.slug;
+                                let subscriptionText = "Upgrade";
+                                
+                                if (subscription.tier > tier) {
+                                   subscriptionText = "Downgrade"
+                                }
+                                
+                                if (tier === 3) {
+                                   subscriptionText = "Contact sales"
+                                }
 
-                                console.log('productId: ', productId);
                                 return isCurrentPlan ? (
-                                    <Td className="bg-mineshaft-600">
-                                        <p className="text-center font-semibold">Current</p>
+                                    <Td>
+                                        <Button 
+                                            colorSchema="secondary"
+                                            className="w-full"
+                                            isDisabled
+                                        >
+                                            Current
+                                        </Button>
                                     </Td>
                                 ) : (
                                     <Td>
                                         <Button 
                                             onClick={async () => {
-                                                console.log('upgrade to product: ', productId);
                                                 if (!currentOrg?._id) return;
-                                                // const test = await updateOrgPlan.mutateAsync({
-                                                //     organizationId: currentOrg._id,
-                                                //     productId
-                                                // });
                                                 
-                                                const { url } = await createProductCheckoutSession.mutateAsync({
-                                                    organizationId: currentOrg._id,
-                                                    productId,
-                                                    success_url: window.location.href
-                                                })
+                                                if (tier !== 3) {
+                                                    const { url } = await createCustomerPortalSession.mutateAsync(currentOrg._id);
+                                                    window.location.href = url;
+                                                    return;
+                                                }
                                                 
-                                                window.location.href = url;
+                                                window.location.href = "https://infisical.com/scheduledemo";
                                             }}
                                             color="mineshaft"
                                             className="w-full"
                                         >
-                                            Upgrade
+                                            {subscriptionText}
                                         </Button>
                                     </Td>
                                 );
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
index e03cb14c9..4050e7936 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
@@ -1,23 +1,26 @@
-import { useSubscription } from "@app/context";
-import { useOrganization } from "@app/context";
-import { useGetOrgPlanBillingInfo } from "@app/hooks/api";
 import { Button } from "@app/components/v2";
+import { useOrganization,useSubscription  } from "@app/context";
+import { 
+    useCreateCustomerPortalSession,
+    useGetOrgPlanBillingInfo} from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
+
 import { ManagePlansModal } from "./ManagePlansModal";
 
 export const PreviewSection = () => {
     const { currentOrg } = useOrganization();
     const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
-    const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? '');
+    const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? "");
+    const createCustomerPortalSession = useCreateCustomerPortalSession();
 
-    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
         "managePlan"
     ] as const);
     
     const formatAmount = (amount: number) => {
-        const formattedTotal = (Math.floor(amount) / 100).toLocaleString('en-US', {
-            style: 'currency',
-            currency: 'USD',
+        const formattedTotal = (Math.floor(amount) / 100).toLocaleString("en-US", {
+            style: "currency",
+            currency: "USD",
         });
         
         return formattedTotal;
@@ -35,7 +38,7 @@ export const PreviewSection = () => {
     
     return (
         <div>
-            {!isSubscriptionLoading && subscription?.slug !== 'enterprise' && subscription?.slug !== 'pro' && subscription?.slug !== 'pro-annual' && (
+            {!isSubscriptionLoading && subscription?.slug !== "enterprise" && subscription?.slug !== "pro" && subscription?.slug !== "pro-annual" && (
                 <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mt-8 flex items-center bg-mineshaft-600 max-w-screen-lg">
                     <div className="flex-1">
                         <h2 className="text-xl font-semibold text-mineshaft-50">Become Infisical</h2>
@@ -54,15 +57,29 @@ export const PreviewSection = () => {
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
                         <p className="mb-2 text-gray-400">Current plan</p>
                         <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">Starter</p>
-                        <p className="text-primary">Manage plan &rarr;</p>
+                        <button 
+                            type="button"
+                            onClick={async () => {
+                                 if (!currentOrg?._id) return;
+                                const { url } = await createCustomerPortalSession.mutateAsync(currentOrg._id);
+                                window.location.href = url;
+                            }}
+                            className="text-primary"
+                        >
+                            Manage plan &rarr; 
+                        </button>
                     </div>
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mr-4">
                         <p className="mb-2 text-gray-400">Price</p>
-                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">{`${formatAmount(data.amount)} / ${data.interval}`}</p>
+                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
+                            {`${formatAmount(data.amount)} / ${data.interval}`}
+                        </p>
                     </div>
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600">
                         <p className="mb-2 text-gray-400">Subscription renews on</p>
-                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">{formatDate(data.currentPeriodEnd)}</p>
+                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
+                            {formatDate(data.currentPeriodEnd)}
+                        </p>
                     </div>
                 </div>
             )}
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
index 471cdb050..3e149a1fd 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
@@ -5,11 +5,11 @@ import { TaxIDSection } from "./TaxIDSection";
 
 export const BillingDetailsTab = () => {
     return (
-        <div>
+        <>
             <CompanyNameSection />
             <InvoiceEmailSection />
             <PmtMethodsSection />
             <TaxIDSection />
-        </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
index b8c88ff10..fb2eadf86 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
@@ -1,39 +1,37 @@
 import { useEffect } from "react";
-import {
-  Input,
-//   Button,
-  FormControl
-} from "@app/components/v2";
-import { Controller, useForm } from 'react-hook-form'; 
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import Button from "@app/components/basic/buttons/Button";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { FormControl,Input } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useGetOrgBillingDetails,
     useUpdateOrgBillingDetails
 } from "@app/hooks/api";
 
-import Button from "@app/components/basic/buttons/Button";
-
 const schema = yup.object({
-    name: yup.string().required('Company name is required')
+    name: yup.string().required("Company name is required")
 }).required();
 
 export const CompanyNameSection = () => {
+    const { createNotification } = useNotificationContext();
     const { currentOrg } = useOrganization();
-    const { reset, control, register, handleSubmit, watch, formState: { errors } } = useForm({
+    const { reset, control, handleSubmit } = useForm({
         defaultValues: {
-            name: ''
+            name: ""
         },
         resolver: yupResolver(schema)
     });
-    const { data } = useGetOrgBillingDetails(currentOrg?._id ?? '');
+    const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
     const updateOrgBillingDetails = useUpdateOrgBillingDetails();
     
     useEffect(() => {
         if (data) {
             reset({
-                name: data?.name ?? ''
+                name: data?.name ?? ""
             });
         }
     }, [data]);
@@ -41,13 +39,22 @@ export const CompanyNameSection = () => {
     const onFormSubmit = async ({ name }: { name: string }) => {
         try {
             if (!currentOrg?._id) return;
-            if (name === '') return;
+            if (name === "") return;
             await updateOrgBillingDetails.mutateAsync({
                 name,
                 organizationId: currentOrg._id
             });
+        
+            createNotification({
+                text: "Successfully updated business name",
+                type: "success"
+            });
         } catch (err) {
             console.error(err);
+            createNotification({
+                text: "Failed to update business name",
+                type: "error"
+            });
         }
     }
 
@@ -56,17 +63,9 @@ export const CompanyNameSection = () => {
             onSubmit={handleSubmit(onFormSubmit)}
             className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600"
         >
-            <div className="flex items-center mb-8">
-                <h2 className="text-xl font-semibold flex-1 text-white">
-                    Business name
-                </h2>
-                <Button 
-                    color="mineshaft"
-                    type="submit"
-                >
-                    Save
-                </Button>
-            </div>
+            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
+                Business name
+            </h2>
             <div className="max-w-md">
                 <Controller
                     defaultValue=""
@@ -83,16 +82,15 @@ export const CompanyNameSection = () => {
                     name="name"
                 />
             </div>
-            <Button
-                text="Test"
-                onButtonPressed={() => {
-                    console.log('Button pressed');
-                    // setIsAddApiKeyDialogOpen(true);
-                }}
-                color="mineshaft"
-                // icon={faPlus}
-                size="md"
-            />
+            <div className="inline-block">
+                <Button
+                    text="Save"
+                    type="submit"
+                    color="mineshaft"
+                    size="md"
+                    onButtonPressed={() => console.log("Saved company name")}
+                />
+            </div>
         </form>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
index cb21aeff2..991a21869 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
@@ -1,12 +1,13 @@
 import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import Button from "@app/components/basic/buttons/Button";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
-  Input,
-  Button,
-  FormControl
-} from "@app/components/v2";
-import { Controller, useForm } from 'react-hook-form'; 
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+  FormControl,
+  Input} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useGetOrgBillingDetails,
@@ -14,24 +15,25 @@ import {
 } from "@app/hooks/api";
 
 const schema = yup.object({
-    email: yup.string().required('Email is required')
+    email: yup.string().required("Email is required")
 }).required();
 
 export const InvoiceEmailSection = () => {
+    const { createNotification } = useNotificationContext();
     const { currentOrg } = useOrganization();
-    const { reset, control, register, handleSubmit, watch, formState: { errors } } = useForm({
+    const { reset, control, handleSubmit } = useForm({
         defaultValues: {
-            name: ''
+            email: ""
         },
         resolver: yupResolver(schema)
     });
-    const { data } = useGetOrgBillingDetails(currentOrg?._id ?? '');
+    const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
     const updateOrgBillingDetails = useUpdateOrgBillingDetails();
 
     useEffect(() => {
         if (data) {
             reset({
-                email: data?.email ?? ''
+                email: data?.email ?? ""
             });
         }
     }, [data]);
@@ -39,13 +41,23 @@ export const InvoiceEmailSection = () => {
     const onFormSubmit = async ({ email }: { email: string }) => {
         try {
             if (!currentOrg?._id) return;
-            if (email === '') return;
+            if (email === "") return;
+
             await updateOrgBillingDetails.mutateAsync({
                 email,
                 organizationId: currentOrg._id
             });
+            
+            createNotification({
+                text: "Successfully updated invoice email recipient",
+                type: "success"
+            });
         } catch (err) {
             console.error(err);
+            createNotification({
+                text: "Failed to update invoice email recipient",
+                type: "error"
+            });
         }
     }
 
@@ -54,17 +66,9 @@ export const InvoiceEmailSection = () => {
             onSubmit={handleSubmit(onFormSubmit)}
             className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600"
         >
-            <div className="flex items-center mb-8">
-                <h2 className="text-xl font-semibold flex-1 text-white">
-                    Invoice email recipient
-                </h2>
-                <Button 
-                    color="mineshaft"
-                    type="submit"
-                >
-                    Save
-                </Button>
-            </div>
+            <h2 className="text-xl font-semibold flex-1 text-white mb-8">
+                Invoice email recipient
+            </h2>
             <div className="max-w-md">
                 <Controller
                     defaultValue=""
@@ -81,6 +85,15 @@ export const InvoiceEmailSection = () => {
                     name="email"
                 />
             </div>
+            <div className="inline-block">
+                <Button
+                    text="Save"
+                    type="submit"
+                    color="mineshaft"
+                    size="md"
+                    onButtonPressed={() => console.log("Saved email address")}
+                />
+            </div>
         </form>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
index f05be12fb..ecdf27bb7 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
@@ -1,32 +1,14 @@
-import {
-  Button,
-  IconButton,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  EmptyState
-} from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import { 
-    useGetOrgPmtMethods,
-    useAddOrgPmtMethod,
-    useDeleteOrgPmtMethod
-} from "@app/hooks/api";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus, faXmark, faCreditCard } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
-// TODO: optimize + modularize
+import Button from "@app/components/basic/buttons/Button";
+import { useOrganization } from "@app/context";
+import { useAddOrgPmtMethod } from "@app/hooks/api";
+
+import { PmtMethodsTable } from "./PmtMethodsTable";
 
 export const PmtMethodsSection = () => {
     const { currentOrg } = useOrganization();
-    const { data, isLoading } = useGetOrgPmtMethods(currentOrg?._id ?? '');
     const addOrgPmtMethod = useAddOrgPmtMethod();
-    const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
     
     const handleAddPmtMethodBtnClick = async () => {
         if (!currentOrg?._id) return;
@@ -38,14 +20,6 @@ export const PmtMethodsSection = () => {
         
         window.location.href = url;
     }
-
-    const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
-        if (!currentOrg?._id) return;
-        await deleteOrgPmtMethod.mutateAsync({
-            organizationId: currentOrg._id,
-            pmtMethodId
-        });
-    }
     
     return (
         <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
@@ -53,78 +27,18 @@ export const PmtMethodsSection = () => {
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Payment Methods
                 </h2>
-                <Button 
-                    color="mineshaft"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    onClick={handleAddPmtMethodBtnClick}
-                >
-                    Add method
-                </Button>
+                <div className="inline-block">
+                    <Button
+                        text="Add method"
+                        type="submit"
+                        color="mineshaft"
+                        size="md"
+                        icon={faPlus}
+                        onButtonPressed={handleAddPmtMethodBtnClick}
+                    />
+                </div>
             </div>
-            <TableContainer className="mt-4">
-            <Table>
-              <THead>
-                <Tr>
-                  <Th className="flex-1">Brand</Th>
-                  <Th className="flex-1">Type</Th>
-                  <Th className="flex-1">Last 4 Digits</Th>
-                  <Th className="flex-1">Expiration</Th>
-                  <Th className="w-5"></Th>
-                </Tr>
-              </THead>
-              <TBody>
-                {!isLoading && data?.length > 0 && data.map(({
-                    _id,
-                    brand,
-                    exp_month,
-                    exp_year,
-                    funding,
-                    last4
-                }: {
-                    _id: string;
-                    brand: string;
-                    exp_month: number;
-                    exp_year: number;
-                    funding: string;
-                    last4: string;
-                }) => (
-                    <Tr key={`pmt-method-${_id}`} className="h-10">
-                        <Td>{brand}</Td>
-                        <Td>{funding}</Td>
-                        <Td>{last4}</Td>
-                        <Td>{`${exp_month}/${exp_year}`}</Td>
-                        <Td>
-                            <IconButton
-                                onClick={async () => {
-                                    console.log('delete pmt method!');
-                                    await handleDeletePmtMethodBtnClick(_id);
-                                    console.log('delete pmt method done!');
-                                }}
-                                size="lg"
-                                colorSchema="danger"
-                                variant="plain"
-                                ariaLabel="update"
-                            >
-                                <FontAwesomeIcon icon={faXmark} />
-                            </IconButton>
-                        </Td>
-                    </Tr>
-                ))}
-                {isLoading && <TableSkeleton columns={5} key="pmt-methods" />}
-                {!isLoading && data?.length === 0 && (
-                    <Tr>
-                        <Td colSpan={5}>
-                            <EmptyState 
-                                title="No payment methods on file" 
-                                icon={faCreditCard}
-                            />
-                        </Td>
-                    </Tr>
-                )}
-              </TBody>
-            </Table>
-          </TableContainer>
+            <PmtMethodsTable />
         </div>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx
new file mode 100644
index 000000000..4eba19a50
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx
@@ -0,0 +1,90 @@
+import { faCreditCard, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { 
+    useDeleteOrgPmtMethod,
+    useGetOrgPmtMethods
+} from "@app/hooks/api";
+
+export const PmtMethodsTable = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgPmtMethods(currentOrg?._id ?? "");
+    const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
+
+    const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
+        if (!currentOrg?._id) return;
+        await deleteOrgPmtMethod.mutateAsync({
+            organizationId: currentOrg._id,
+            pmtMethodId
+        });
+    }
+
+    return (
+        <TableContainer className="mt-4">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="flex-1">Brand</Th>
+                  <Th className="flex-1">Type</Th>
+                  <Th className="flex-1">Last 4 Digits</Th>
+                  <Th className="flex-1">Expiration</Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {!isLoading && data && data?.length > 0 && data.map(({
+                    _id,
+                    brand,
+                    exp_month,
+                    exp_year,
+                    funding,
+                    last4
+                }) => (
+                    <Tr key={`pmt-method-${_id}`} className="h-10">
+                        <Td>{brand.charAt(0).toUpperCase() + brand.slice(1)}</Td>
+                        <Td>{funding.charAt(0).toUpperCase() + funding.slice(1)}</Td>
+                        <Td>{last4}</Td>
+                        <Td>{`${exp_month}/${exp_year}`}</Td>
+                        <Td>
+                            <IconButton
+                                onClick={async () => {
+                                    await handleDeletePmtMethodBtnClick(_id);
+                                }}
+                                size="lg"
+                                colorSchema="danger"
+                                variant="plain"
+                                ariaLabel="update"
+                            >
+                                <FontAwesomeIcon icon={faXmark} />
+                            </IconButton>
+                        </Td>
+                    </Tr>
+                ))}
+                {isLoading && <TableSkeleton columns={5} key="pmt-methods" />}
+                {!isLoading && data && data?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={5}>
+                            <EmptyState 
+                                title="No payment methods on file" 
+                                icon={faCreditCard}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+              </TBody>
+            </Table>
+        </TableContainer>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx
new file mode 100644
index 000000000..d08d14377
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx
@@ -0,0 +1,195 @@
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useAddOrgTaxId } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const taxIDTypes = [
+  { label: "Australia ABN", value: "au_abn" },
+  { label: "Australia ARN", value: "au_arn" },
+  { label: "Bulgaria UIC", value: "bg_uic" },
+  { label: "Brazil CNPJ", value: "br_cnpj" },
+  { label: "Brazil CPF", value: "br_cpf" },
+  { label: "Canada BN", value: "ca_bn" },
+  { label: "Canada GST/HST", value: "ca_gst_hst" },
+  { label: "Canada PST BC", value: "ca_pst_bc" },
+  { label: "Canada PST MB", value: "ca_pst_mb" },
+  { label: "Canada PST SK", value: "ca_pst_sk" },
+  { label: "Canada QST", value: "ca_qst" },
+  { label: "Switzerland VAT", value: "ch_vat" },
+  { label: "Chile TIN", value: "cl_tin" },
+  { label: "Egypt TIN", value: "eg_tin" },
+  { label: "Spain CIF", value: "es_cif" },
+  { label: "EU OSS VAT", value: "eu_oss_vat" },
+  { label: "EU VAT", value: "eu_vat" },
+  { label: "GB VAT", value: "gb_vat" },
+  { label: "Georgia VAT", value: "ge_vat" },
+  { label: "Hong Kong BR", value: "hk_br" },
+  { label: "Hungary TIN", value: "hu_tin" },
+  { label: "Indonesia NPWP", value: "id_npwp" },
+  { label: "Israel VAT", value: "il_vat" },
+  { label: "India GST", value: "in_gst" },
+  { label: "Iceland VAT", value: "is_vat" },
+  { label: "Japan CN", value: "jp_cn" },
+  { label: "Japan RN", value: "jp_rn" },
+  { label: "Japan TRN", value: "jp_trn" },
+  { label: "Kenya PIN", value: "ke_pin" },
+  { label: "South Korea BRN", value: "kr_brn" },
+  { label: "Liechtenstein UID", value: "li_uid" },
+  { label: "Mexico RFC", value: "mx_rfc" },
+  { label: "Malaysia FRP", value: "my_frp" },
+  { label: "Malaysia ITN", value: "my_itn" },
+  { label: "Malaysia SST", value: "my_sst" },
+  { label: "Norway VAT", value: "no_vat" },
+  { label: "New Zealand GST", value: "nz_gst" },
+  { label: "Philippines TIN", value: "ph_tin" },
+  { label: "Russia INN", value: "ru_inn" },
+  { label: "Russia KPP", value: "ru_kpp" },
+  { label: "Saudi Arabia VAT", value: "sa_vat" },
+  { label: "Singapore GST", value: "sg_gst" },
+  { label: "Singapore UEN", value: "sg_uen" },
+  { label: "Slovenia TIN", value: "si_tin" },
+  { label: "Thailand VAT", value: "th_vat" },
+  { label: "Turkey TIN", value: "tr_tin" },
+  { label: "Taiwan VAT", value: "tw_vat" },
+  { label: "Ukraine VAT", value: "ua_vat" },
+  { label: "US EIN", value: "us_ein" },
+  { label: "South Africa VAT", value: "za_vat" }
+];
+
+const schema = yup.object({
+    type: yup.string().required("Tax ID type is required"),
+    value: yup.string().required("Tax ID value is required")
+}).required();
+
+export type AddTaxIDFormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["addTaxID"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addTaxID"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addTaxID"]>, state?: boolean) => void;
+};
+
+export const TaxIDModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const addOrgTaxId = useAddOrgTaxId();
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<AddTaxIDFormData>({
+        resolver: yupResolver(schema)
+    });
+
+    const onTaxIDModalSubmit = async ({ type, value }: AddTaxIDFormData) => {
+        try {
+            if (!currentOrg?._id) return;
+            await addOrgTaxId.mutateAsync({
+                organizationId: currentOrg._id,
+                type,
+                value
+            });
+
+            createNotification({
+                text: "Successfully added Tax ID",
+                type: "success"
+            });
+            handlePopUpClose("addTaxID");
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to add Tax ID",
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <Modal
+            isOpen={popUp?.addTaxID?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addTaxID", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add Tax ID">
+            <form onSubmit={handleSubmit(onTaxIDModalSubmit)}>
+                <Controller
+                    control={control}
+                    name="type"
+                    defaultValue="eu_vat"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                        <FormControl
+                        label="Type"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                        >
+                        <Select
+                            defaultValue={field.value}
+                            {...field}
+                            onValueChange={(e) => onChange(e)}
+                            className="w-full"
+                        >
+                            {taxIDTypes.map(({ label, value }) => (
+                            <SelectItem value={String(value || "")} key={label}>
+                                {label}
+                            </SelectItem>
+                            ))}
+                        </Select>
+                        </FormControl>
+                    )}
+                />
+                <Controller
+                    control={control}
+                    defaultValue=""
+                    name="value"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                        label="Value"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="DE000000000"
+                        />
+                        </FormControl>
+                    )}
+                />
+                <div className="mt-8 flex items-center">
+                <Button
+                    className="mr-4"
+                    size="sm"
+                    type="submit"
+                    isLoading={isSubmitting}
+                    isDisabled={isSubmitting}
+                >
+                    Add
+                </Button>
+                <Button colorSchema="secondary" variant="plain">
+                    Cancel
+                </Button>
+                </div>
+            </form>
+            </ModalContent>
+        </Modal>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
index 4b299a471..ff5f0430d 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
@@ -1,276 +1,39 @@
-import {
-  FormControl,
-  Button,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  EmptyState,
-  Modal,
-  ModalContent
-} from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import { 
-    useGetOrgTaxIds,
-    useAddOrgTaxId,
-    useDeleteOrgTaxId
-} from "@app/hooks/api";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus, faXmark, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+import Button from "@app/components/basic/buttons/Button";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { Controller, useForm } from 'react-hook-form'; 
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
 
-const taxIDTypes = [
-  { label: 'Australia ABN', value: 'au_abn' },
-  { label: 'Australia ARN', value: 'au_arn' },
-  { label: 'Bulgaria UIC', value: 'bg_uic' },
-  { label: 'Brazil CNPJ', value: 'br_cnpj' },
-  { label: 'Brazil CPF', value: 'br_cpf' },
-  { label: 'Canada BN', value: 'ca_bn' },
-  { label: 'Canada GST/HST', value: 'ca_gst_hst' },
-  { label: 'Canada PST BC', value: 'ca_pst_bc' },
-  { label: 'Canada PST MB', value: 'ca_pst_mb' },
-  { label: 'Canada PST SK', value: 'ca_pst_sk' },
-  { label: 'Canada QST', value: 'ca_qst' },
-  { label: 'Switzerland VAT', value: 'ch_vat' },
-  { label: 'Chile TIN', value: 'cl_tin' },
-  { label: 'Egypt TIN', value: 'eg_tin' },
-  { label: 'Spain CIF', value: 'es_cif' },
-  { label: 'EU OSS VAT', value: 'eu_oss_vat' },
-  { label: 'EU VAT', value: 'eu_vat' },
-  { label: 'GB VAT', value: 'gb_vat' },
-  { label: 'Georgia VAT', value: 'ge_vat' },
-  { label: 'Hong Kong BR', value: 'hk_br' },
-  { label: 'Hungary TIN', value: 'hu_tin' },
-  { label: 'Indonesia NPWP', value: 'id_npwp' },
-  { label: 'Israel VAT', value: 'il_vat' },
-  { label: 'India GST', value: 'in_gst' },
-  { label: 'Iceland VAT', value: 'is_vat' },
-  { label: 'Japan CN', value: 'jp_cn' },
-  { label: 'Japan RN', value: 'jp_rn' },
-  { label: 'Japan TRN', value: 'jp_trn' },
-  { label: 'Kenya PIN', value: 'ke_pin' },
-  { label: 'South Korea BRN', value: 'kr_brn' },
-  { label: 'Liechtenstein UID', value: 'li_uid' },
-  { label: 'Mexico RFC', value: 'mx_rfc' },
-  { label: 'Malaysia FRP', value: 'my_frp' },
-  { label: 'Malaysia ITN', value: 'my_itn' },
-  { label: 'Malaysia SST', value: 'my_sst' },
-  { label: 'Norway VAT', value: 'no_vat' },
-  { label: 'New Zealand GST', value: 'nz_gst' },
-  { label: 'Philippines TIN', value: 'ph_tin' },
-  { label: 'Russia INN', value: 'ru_inn' },
-  { label: 'Russia KPP', value: 'ru_kpp' },
-  { label: 'Saudi Arabia VAT', value: 'sa_vat' },
-  { label: 'Singapore GST', value: 'sg_gst' },
-  { label: 'Singapore UEN', value: 'sg_uen' },
-  { label: 'Slovenia TIN', value: 'si_tin' },
-  { label: 'Thailand VAT', value: 'th_vat' },
-  { label: 'Turkey TIN', value: 'tr_tin' },
-  { label: 'Taiwan VAT', value: 'tw_vat' },
-  { label: 'Ukraine VAT', value: 'ua_vat' },
-  { label: 'US EIN', value: 'us_ein' },
-  { label: 'South Africa VAT', value: 'za_vat' }
-];
-
-const schema = yup.object({
-    type: yup.string().required('Tax ID type is required'),
-    value: yup.string().required('Tax ID value is required')
-}).required();
-
-export type AddTaxIDFormData = yup.InferType<typeof schema>;
-
-// TODO: optimize + modularize
+import { TaxIDModal } from "./TaxIDModal";
+import { TaxIDTable } from "./TaxIDTable";
 
 export const TaxIDSection = () => {
-    const { currentOrg } = useOrganization();
-    const { data, isLoading } = useGetOrgTaxIds(currentOrg?._id ?? '');
-    const addOrgTaxId = useAddOrgTaxId();
-    const deleteOrgTaxId = useDeleteOrgTaxId();
-
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<AddTaxIDFormData>({
-        resolver: yupResolver(schema)
-    });
-
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
         "addTaxID"
     ] as const);
 
-    const onTaxIDModalSubmit = async ({ type, value }: AddTaxIDFormData) => {
-        try {
-            if (!currentOrg?._id) return;
-            await addOrgTaxId.mutateAsync({
-                organizationId: currentOrg._id,
-                type,
-                value
-            });
-            handlePopUpClose("addTaxID");
-        } catch (err) {
-            console.error(err);
-        }
-    }
-    
-    const handleDeleteTaxIdBtnClick = async (taxId: string) => {
-        if (!currentOrg?._id) return;
-        await deleteOrgTaxId.mutateAsync({
-            organizationId: currentOrg._id,
-            taxId
-        });
-    }
-
     return (
         <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
             <div className="flex items-center mb-8">
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Tax ID
                 </h2>
-                <Button 
-                    color="mineshaft"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    onClick={() => handlePopUpOpen("addTaxID")}
-                >
-                    Add Tax ID
-                </Button>
-            </div>
-            <TableContainer className="mt-4">
-                <Table>
-                    <THead>
-                        <Tr>
-                            <Th className="flex-1">Type</Th>
-                            <Th className="flex-1">Value</Th>
-                            <Th className="w-5"></Th>
-                        </Tr>
-                    </THead>
-                    <TBody>
-                        {!isLoading && data?.length > 0 && data.map(({
-                            _id,
-                            country,
-                            type,
-                            value
-                        }: {
-                            _id: string;
-                            country: string;
-                            type: string;
-                            value: string;
-                        }) => (
-                            <Tr key={`tax-id-${_id}`} className="h-10">
-                                <Td>{type}</Td>
-                                <Td>{value}</Td>
-                                <Td>
-                                    <IconButton
-                                        onClick={async () => {
-                                            console.log('del');
-                                            await handleDeleteTaxIdBtnClick(_id);
-                                            console.log('del done');
-                                        }}
-                                        size="lg"
-                                        colorSchema="danger"
-                                        variant="plain"
-                                        ariaLabel="update"
-                                    >
-                                        <FontAwesomeIcon icon={faXmark} />
-                                    </IconButton>
-                                </Td>
-                            </Tr>
-                        ))}
-                        {isLoading && <TableSkeleton columns={3} key="tax-ids" />}
-                        {!isLoading && data?.length === 0 && (
-                            <Tr>
-                                <Td colSpan={5}>
-                                    <EmptyState 
-                                        title="No Tax IDs on file" 
-                                        icon={faFileInvoice}
-                                    />
-                                </Td>
-                            </Tr>
-                        )}
-                    </TBody>
-                </Table>
-            </TableContainer>
-            <Modal
-                isOpen={popUp?.addTaxID?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addTaxID", isOpen);
-                reset();
-                }}
-            >
-                <ModalContent title="Add Tax ID">
-                <form onSubmit={handleSubmit(onTaxIDModalSubmit)}>
-                    <Controller
-                    control={control}
-                    name="type"
-                    defaultValue="eu_vat"
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                      <FormControl
-                        label="Type"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <Select
-                          defaultValue={field.value}
-                          {...field}
-                          onValueChange={(e) => onChange(e)}
-                          className="w-full"
-                        >
-                          {taxIDTypes.map(({ label, value }) => (
-                            <SelectItem value={String(value || "")} key={label}>
-                              {label}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </FormControl>
-                    )}
-                  />
-                    <Controller
-                    control={control}
-                    defaultValue=""
-                    name="value"
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                        label="Value"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        >
-                        <Input 
-                            {...field} 
-                            placeholder="DE000000000"
-                        />
-                        </FormControl>
-                    )}
-                    />
-                    <div className="mt-8 flex items-center">
+                <div className="inline-block">
                     <Button
-                        className="mr-4"
-                        size="sm"
+                        text="Add Tax ID"
                         type="submit"
-                        isLoading={isSubmitting}
-                        isDisabled={isSubmitting}
-                    >
-                        Add
-                    </Button>
-                    <Button colorSchema="secondary" variant="plain">
-                        Cancel
-                    </Button>
-                    </div>
-                </form>
-                </ModalContent>
-            </Modal>
+                        color="mineshaft"
+                        size="md"
+                        icon={faPlus}
+                        onButtonPressed={() => handlePopUpOpen("addTaxID")}
+                    />
+                </div>
+            </div>
+            <TaxIDTable />
+            <TaxIDModal 
+                popUp={popUp}
+                handlePopUpClose={handlePopUpClose}
+                handlePopUpToggle={handlePopUpToggle}
+            />
         </div>    
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx
new file mode 100644
index 000000000..873b41cf6
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx
@@ -0,0 +1,137 @@
+import { faFileInvoice,faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { 
+    useDeleteOrgTaxId,
+    useGetOrgTaxIds
+} from "@app/hooks/api";
+
+const taxIDTypeLabelMap: { [key: string]: string } = {
+  "au_abn": "Australia ABN",
+  "au_arn": "Australia ARN",
+  "bg_uic": "Bulgaria UIC",
+  "br_cnpj": "Brazil CNPJ",
+  "br_cpf": "Brazil CPF",
+  "ca_bn": "Canada BN",
+  "ca_gst_hst": "Canada GST/HST",
+  "ca_pst_bc": "Canada PST BC",
+  "ca_pst_mb": "Canada PST MB",
+  "ca_pst_sk": "Canada PST SK",
+  "ca_qst": "Canada QST",
+  "ch_vat": "Switzerland VAT",
+  "cl_tin": "Chile TIN",
+  "eg_tin": "Egypt TIN",
+  "es_cif": "Spain CIF",
+  "eu_oss_vat": "EU OSS VAT",
+  "eu_vat": "EU VAT",
+  "gb_vat": "GB VAT",
+  "ge_vat": "Georgia VAT",
+  "hk_br": "Hong Kong BR",
+  "hu_tin": "Hungary TIN",
+  "id_npwp": "Indonesia NPWP",
+  "il_vat": "Israel VAT",
+  "in_gst": "India GST",
+  "is_vat": "Iceland VAT",
+  "jp_cn": "Japan CN",
+  "jp_rn": "Japan RN",
+  "jp_trn": "Japan TRN",
+  "ke_pin": "Kenya PIN",
+  "kr_brn": "South Korea BRN",
+  "li_uid": "Liechtenstein UID",
+  "mx_rfc": "Mexico RFC",
+  "my_frp": "Malaysia FRP",
+  "my_itn": "Malaysia ITN",
+  "my_sst": "Malaysia SST",
+  "no_vat": "Norway VAT",
+  "nz_gst": "New Zealand GST",
+  "ph_tin": "Philippines TIN",
+  "ru_inn": "Russia INN",
+  "ru_kpp": "Russia KPP",
+  "sa_vat": "Saudi Arabia VAT",
+  "sg_gst": "Singapore GST",
+  "sg_uen": "Singapore UEN",
+  "si_tin": "Slovenia TIN",
+  "th_vat": "Thailand VAT",
+  "tr_tin": "Turkey TIN",
+  "tw_vat": "Taiwan VAT",
+  "ua_vat": "Ukraine VAT",
+  "us_ein": "US EIN",
+  "za_vat": "South Africa VAT"
+};
+
+export const TaxIDTable = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgTaxIds(currentOrg?._id ?? "");
+    const deleteOrgTaxId = useDeleteOrgTaxId();
+
+    const handleDeleteTaxIdBtnClick = async (taxId: string) => {
+        if (!currentOrg?._id) return;
+        await deleteOrgTaxId.mutateAsync({
+            organizationId: currentOrg._id,
+            taxId
+        });
+    }
+
+    return (
+        <TableContainer className="mt-4">
+            <Table>
+                <THead>
+                    <Tr>
+                        <Th className="flex-1">Type</Th>
+                        <Th className="flex-1">Value</Th>
+                        <Th className="w-5" />
+                    </Tr>
+                </THead>
+                <TBody>
+                    {!isLoading && data && data?.length > 0 && data.map(({
+                        _id,
+                        type,
+                        value
+                    }) => (
+                        <Tr key={`tax-id-${_id}`} className="h-10">
+                            <Td>{taxIDTypeLabelMap[type]}</Td>
+                            <Td>{value}</Td>
+                            <Td>
+                                <IconButton
+                                    onClick={async () => {
+                                        await handleDeleteTaxIdBtnClick(_id);
+                                    }}
+                                    size="lg"
+                                    colorSchema="danger"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                >
+                                    <FontAwesomeIcon icon={faXmark} />
+                                </IconButton>
+                            </Td>
+                        </Tr>
+                    ))}
+                    {isLoading && <TableSkeleton columns={3} key="tax-ids" />}
+                    {!isLoading && data && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={5}>
+                                <EmptyState 
+                                    title="No Tax IDs on file" 
+                                    icon={faFileInvoice}
+                                />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
index fd7d049c0..f5c542186 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
@@ -1,100 +1,10 @@
-import {
-  IconButton,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  EmptyState
-} from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import { 
-    useGetOrgInvoices
-} from "@app/hooks/api";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faDownload, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
-
-// TODO: optimize + modularize
+import { InvoicesTable } from "./InvoicesTable";
 
 export const BillingReceiptsTab = () => {
-    const { currentOrg } = useOrganization();
-    const { data, isLoading } = useGetOrgInvoices(currentOrg?._id ?? '');
     return (
         <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
           <h2 className="text-xl font-semibold flex-1 text-white">Invoices</h2>
-          <TableContainer className="mt-4">
-            <Table>
-              <THead>
-                <Tr>
-                  <Th className="flex-1">Invoice #</Th>
-                  <Th className="flex-1">Date</Th>
-                  <Th className="flex-1">Status</Th>
-                  <Th className="flex-1">Amount</Th>
-                  <Th className="w-5"></Th>
-                </Tr>
-              </THead>
-              <TBody>
-                {!isLoading && data?.length > 0 && data.map(({
-                    _id,
-                    created,
-                    paid,
-                    number,
-                    total,
-                    invoice_pdf
-                }: {
-                    _id: string;
-                    created: number;
-                    paid: boolean;
-                    number: string;
-                    total: number;
-                    invoice_pdf: string;
-                }) => {
-                    const formattedTotal = (Math.floor(total) / 100).toLocaleString('en-US', {
-                        style: 'currency',
-                        currency: 'USD',
-                    });
-                    const createdDate = new Date(created * 1000);
-                    const day: number = createdDate.getDate();
-                    const month: number = createdDate.getMonth() + 1;
-                    const year: number = createdDate.getFullYear();
-                    const formattedDate: string = `${day}/${month}/${year}`;
-                    
-                    return (
-                        <Tr key={`invoice-${_id}`} className="h-10">
-                            <Td>{number}</Td>
-                            <Td>{formattedDate}</Td>
-                            <Td>{paid ? "Paid" : "Not Paid"}</Td>
-                            <Td>{formattedTotal}</Td>
-                            <Td>
-                                <IconButton
-                                    onClick={async () => window.open(invoice_pdf)}
-                                    size="lg"
-                                    variant="plain"
-                                    ariaLabel="update"
-                                >
-                                    <FontAwesomeIcon icon={faDownload} />
-                                </IconButton>
-                            </Td>
-                        </Tr>
-                    );
-                })}
-                {isLoading && <TableSkeleton columns={5} key="invoices" />}
-                {!isLoading && data?.length === 0 && (
-                    <Tr>
-                        <Td colSpan={5}>
-                            <EmptyState 
-                                title="No invoices on file" 
-                                icon={faFileInvoice}
-                            />
-                        </Td>
-                    </Tr>
-                )}
-              </TBody>
-            </Table>
-          </TableContainer>
+          <InvoicesTable />
         </div>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx
new file mode 100644
index 000000000..9050f9d5f
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx
@@ -0,0 +1,88 @@
+import { faDownload, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { 
+    useGetOrgInvoices
+} from "@app/hooks/api";
+
+export const InvoicesTable = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgInvoices(currentOrg?._id ?? "");
+    return (
+        <TableContainer className="mt-8">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="flex-1">Invoice #</Th>
+                  <Th className="flex-1">Date</Th>
+                  <Th className="flex-1">Status</Th>
+                  <Th className="flex-1">Amount</Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {!isLoading && data && data?.length > 0 && data.map(({
+                    _id,
+                    created,
+                    paid,
+                    number,
+                    total,
+                    invoice_pdf
+                }) => {
+                    const formattedTotal = (Math.floor(total) / 100).toLocaleString("en-US", {
+                        style: "currency",
+                        currency: "USD",
+                    });
+                    const createdDate = new Date(created * 1000);
+                    const day: number = createdDate.getDate();
+                    const month: number = createdDate.getMonth() + 1;
+                    const year: number = createdDate.getFullYear();
+                    const formattedDate: string = `${day}/${month}/${year}`;
+                    
+                    return (
+                        <Tr key={`invoice-${_id}`} className="h-10">
+                            <Td>{number}</Td>
+                            <Td>{formattedDate}</Td>
+                            <Td>{paid ? "Paid" : "Not Paid"}</Td>
+                            <Td>{formattedTotal}</Td>
+                            <Td>
+                                <IconButton
+                                    onClick={async () => window.open(invoice_pdf)}
+                                    size="lg"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                >
+                                    <FontAwesomeIcon icon={faDownload} />
+                                </IconButton>
+                            </Td>
+                        </Tr>
+                    );
+                })}
+                {isLoading && <TableSkeleton columns={5} key="invoices" />}
+                {!isLoading && data && data?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={5}>
+                            <EmptyState 
+                                title="No invoices on file" 
+                                icon={faFileInvoice}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+              </TBody>
+            </Table>
+        </TableContainer>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
new file mode 100644
index 000000000..72b2e942b
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
@@ -0,0 +1,44 @@
+import { Fragment } from "react"
+import { Tab } from "@headlessui/react"
+
+import { BillingCloudTab } from "../BillingCloudTab";
+import { BillingDetailsTab } from "../BillingDetailsTab";
+import { BillingReceiptsTab } from "../BillingReceiptsTab";
+
+const tabs = [
+    { name: "Infisical Cloud", key: "tab-infisical-cloud" },
+    { name: "Receipts", key: "tab-receipts" },
+    { name: "Billing details", key: "tab-billing-details" }
+];
+
+export const BillingTabGroup = () => {
+    return (
+        <Tab.Group>
+            <Tab.List className="mt-8 border-b-2 border-mineshaft-800 max-w-screen-lg">
+                {tabs.map((tab) => (
+                    <Tab as={Fragment} key={tab.key}> 
+                        {({ selected }) => (
+                            <button 
+                                type="button"
+                                className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
+                            >
+                                {tab.name}
+                            </button>
+                        )}
+                    </Tab>
+                ))}
+            </Tab.List>
+            <Tab.Panels>
+                <Tab.Panel>
+                    <BillingCloudTab />
+                </Tab.Panel>
+                <Tab.Panel>
+                    <BillingReceiptsTab />
+                </Tab.Panel>
+                <Tab.Panel>
+                    <BillingDetailsTab />
+                </Tab.Panel>
+            </Tab.Panels>
+        </Tab.Group>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx
new file mode 100644
index 000000000..6c13599f8
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx
@@ -0,0 +1 @@
+export { BillingTabGroup } from "./BillingTabGroup";
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
index a14bd1320..6c13599f8 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
@@ -1,3 +1 @@
-export { BillingCloudTab } from "./BillingCloudTab";
-export { BillingReceiptsTab } from "./BillingReceiptsTab";
-export { BillingDetailsTab } from "./BillingDetailsTab";
\ No newline at end of file
+export { BillingTabGroup } from "./BillingTabGroup";
\ No newline at end of file

From da144b4d02a297c179dd8833f5b02c4939ada27e Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 15:56:48 +0700
Subject: [PATCH 12/22] Hide usage and billing from Navbar in self-hosted

---
 .../AppLayout/components/NavBar/NavBar.tsx    | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx b/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
index 26bb1c99f..5db9b7a32 100644
--- a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
+++ b/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
@@ -20,7 +20,7 @@ import { Menu, Transition } from "@headlessui/react";
 import {TFunction} from "i18next";
 
 import guidGenerator from "@app/components/utilities/randomId";
-import { useOrganization, useUser } from "@app/context";
+import { useOrganization, useSubscription,useUser } from "@app/context";
 import { useLogoutUser } from "@app/hooks/api";
 
 const supportOptions = (t: TFunction) => [
@@ -63,6 +63,9 @@ export interface IUser {
  */
 export const Navbar = () => {
   const router = useRouter();
+  const { subscription } = useSubscription();
+  
+  console.log("subscription: ", subscription);
 
   const { currentOrg, orgs } = useOrganization();
   const { user } = useUser();
@@ -220,22 +223,24 @@ export const Navbar = () => {
                     />
                   </div>
                 </div>
-                <button
-                  // onClick={buttonAction}
-                  type="button"
-                  className="w-full cursor-pointer"
-                >
-                  <div
-                    onKeyDown={() => null}
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => router.push(`/settings/billing/${router.query.id}`)}
-                    className="relative mt-1 flex cursor-pointer select-none justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/5 hover:text-gray-200"
+                {subscription && subscription.slug !== null && (
+                  <button
+                    // onClick={buttonAction}
+                    type="button"
+                    className="w-full cursor-pointer"
                   >
-                    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faCoins} />
-                    <div className="text-sm">{t("nav.user.usage-billing")}</div>
-                  </div>
-                </button>
+                    <div
+                      onKeyDown={() => null}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => router.push(`/settings/billing/${router.query.id}`)}
+                      className="relative mt-1 flex cursor-pointer select-none justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/5 hover:text-gray-200"
+                    >
+                      <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faCoins} />
+                      <div className="text-sm">{t("nav.user.usage-billing")}</div>
+                    </div>
+                  </button>
+                )}
                 <button
                   type="button"
                   // onClick={buttonAction}

From 825143f17ce0048e890a182c2b4a260a1dc299b3 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 16:12:18 +0700
Subject: [PATCH 13/22] Adjust breadcrumb spacing

---
 frontend/src/components/navigation/NavHeader.tsx          | 2 +-
 .../Settings/BillingSettingsPage/BillingSettingsPage.tsx  | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx
index 4bbdce1bc..ee7274fdc 100644
--- a/frontend/src/components/navigation/NavHeader.tsx
+++ b/frontend/src/components/navigation/NavHeader.tsx
@@ -57,7 +57,7 @@ export default function NavHeader({
   );
 
   return (
-    <div className="flex flex-row items-center pt-6">
+    <div className="ml-4 flex flex-row items-center pt-6">
       <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
         {currentOrg?.name?.charAt(0)}
       </div>
diff --git a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
index 32f61c006..ae5c01c85 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
@@ -9,16 +9,18 @@ import {
 export const BillingSettingsPage = () => {
     const { t } = useTranslation();
     return (
-      <div className="h-full p-8">
+      <div className="h-full py-8 px-4">
         <NavHeader pageName={t("billing.title")} />
         
-        <div className="flex text-3xl mt-8 items-start max-w-screen-lg">
+        <div className="ml-4 flex text-3xl mt-8 items-start max-w-screen-lg">
           <div className="flex-1">
             <p className="font-semibold text-gray-200">{t("billing.title")}</p>
           </div>
           <div />
         </div>
-        <BillingTabGroup />
+        <div className="ml-4">
+          <BillingTabGroup />
+        </div>
       </div>
     );
 };
\ No newline at end of file

From 1dfd18e779cdc8e7979db6b8a63d96f089d15fd4 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 17:19:33 +0700
Subject: [PATCH 14/22] Add paywall for PIT and redirect paywall to contact
 sales in self-hosted

---
 backend/src/ee/services/EELicenseService.ts   |  2 +-
 .../v2/UpgradePlanModal/UpgradePlanModal.tsx  | 59 +++++++++++--------
 frontend/src/pages/activity/[id].tsx          | 12 ++--
 .../src/views/DashboardPage/DashboardPage.tsx | 26 ++++++--
 .../OrgSettingsPage/OrgSettingsPage.tsx       |  2 -
 5 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/backend/src/ee/services/EELicenseService.ts b/backend/src/ee/services/EELicenseService.ts
index d6fce3c7f..9e3416583 100644
--- a/backend/src/ee/services/EELicenseService.ts
+++ b/backend/src/ee/services/EELicenseService.ts
@@ -55,7 +55,7 @@ class EELicenseService {
         environmentLimit: null,
         environmentsUsed: 0,
         secretVersioning: true,
-        pitRecovery: true,
+        pitRecovery: false,
         rbac: true,
         customRateLimits: true,
         customAlerts: true,
diff --git a/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx b/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
index 7b9777783..293376b9d 100644
--- a/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
+++ b/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-
+import { useSubscription } from "@app/context";
 import { Button } from "../Button";
 import { Modal, ModalClose, ModalContent } from "../Modal";
 
@@ -9,28 +9,35 @@ type Props = {
   text: string;
 };
 
-export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => (
-  <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-    <ModalContent
-      title="Unleash Infisical's Full Power"
-      footerContent={[
-        <Link
-          href={`/settings/billing/${localStorage.getItem("projectData.id") as string}`}
-          key="upgrade-plan"
-        >
-          <Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>
-        </Link>,
-        <ModalClose asChild key="upgrade-plan-cancel">
-          <Button colorSchema="secondary" variant="plain">
-            Cancel
-          </Button>
-        </ModalClose>
-      ]}
-    >
-      <p className="mb-2 text-bunker-300">{text}</p>
-      <p className="text-bunker-300">
-        Upgrade and get access to this, as well as to other powerful enhancements.
-      </p>
-    </ModalContent>
-  </Modal>
-);
+export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => {
+  const { subscription } = useSubscription();
+  const link = (subscription && subscription.slug !== null) 
+    ? `/settings/billing/${localStorage.getItem("projectData.id") as string}` 
+    : "https://infisical.com/scheduledemo";
+  
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        title="Unleash Infisical's Full Power"
+        footerContent={[
+          <Link
+            href={link}
+            key="upgrade-plan"
+          >
+            <Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>
+          </Link>,
+          <ModalClose asChild key="upgrade-plan-cancel">
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        ]}
+      >
+        <p className="mb-2 text-bunker-300">{text}</p>
+        <p className="text-bunker-300">
+          Upgrade and get access to this, as well as to other powerful enhancements.
+        </p>
+      </ModalContent>
+    </Modal>
+  )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/activity/[id].tsx b/frontend/src/pages/activity/[id].tsx
index 7fad29421..1f7b7b75a 100644
--- a/frontend/src/pages/activity/[id].tsx
+++ b/frontend/src/pages/activity/[id].tsx
@@ -184,11 +184,13 @@ export default function Activity() {
           />
         </div>
       </div>
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={() => handlePopUpClose("upgradePlan")}
-        text="You can see more logs if you switch to Infisical's Business/Professional Plan."
-      />
+      {subscription && (
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={() => handlePopUpClose("upgradePlan")}
+          text={subscription.slug === null ? "You can see more logs under an Enterprise license" : "You can see more logs if you switch to Infisical's Business/Professional Plan."}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index a3e3028e4..b226c145b 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -32,10 +32,11 @@ import {
   PopoverTrigger,
   TableContainer,
   Tag,
-  Tooltip
+  Tooltip,
+  UpgradePlanModal
 } from "@app/components/v2";
 import { leaveConfirmDefaultMessage } from "@app/const";
-import { useWorkspace } from "@app/context";
+import { useWorkspace, useSubscription } from "@app/context";
 import { useLeaveConfirm, usePopUp, useToggle } from "@app/hooks";
 import {
   useBatchSecretsOp,
@@ -97,6 +98,8 @@ const USER_ACTION_PUSH = "first_time_secrets_pushed";
  * They will get it back
  */
 export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
+  const { subscription } = useSubscription();
+  console.log('dashboard sub: ', subscription);
   const { t } = useTranslation();
   const router = useRouter();
   const { createNotification } = useNotificationContext();
@@ -110,7 +113,8 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     "uploadedSecOpts",
     "compareSecrets",
     "folderForm",
-    "deleteFolder"
+    "deleteFolder",
+    "upgradePlan"
   ] as const);
   const [isSecretValueHidden, setIsSecretValueHidden] = useToggle(true);
   const [searchFilter, setSearchFilter] = useState("");
@@ -624,7 +628,14 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
               <div className="hidden xl:block">
                 <Button
                   variant="outline_bg"
-                  onClick={() => handlePopUpOpen("secretSnapshots")}
+                  onClick={() => {
+                    if (subscription && subscription.pitRecovery) {
+                      handlePopUpOpen("secretSnapshots");
+                      return;
+                    }
+                    
+                    handlePopUpOpen("upgradePlan");
+                  }}
                   leftIcon={<FontAwesomeIcon icon={faCodeCommit} />}
                   isLoading={isLoadingSnapshotCount}
                   isDisabled={!canDoRollback}
@@ -886,6 +897,13 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
           </ModalContent>
         </Modal>
       </FormProvider>
+      {subscription && (
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={subscription.slug === null ? "You can perform point-in-time recovery under an Enterprise license" : "You can perform point-in-time recovery if you switch to Infisical's Team plan"}
+        />
+      )}
     </div>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
index d51d31f39..70722315f 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
@@ -31,8 +31,6 @@ import {
 } from "./components";
 
 export const OrgSettingsPage = () => {
-  const host = window.location.origin;
-
   const { t } = useTranslation();
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();

From 492c6a6f9700e8259a858907f3e36cd6bbfb7525 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 17:30:37 +0700
Subject: [PATCH 15/22] Fix lint errors

---
 .../src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx   | 2 ++
 frontend/src/views/DashboardPage/DashboardPage.tsx            | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx b/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
index 293376b9d..968f131bc 100644
--- a/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
+++ b/frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx
@@ -1,5 +1,7 @@
 import Link from "next/link";
+
 import { useSubscription } from "@app/context";
+
 import { Button } from "../Button";
 import { Modal, ModalClose, ModalContent } from "../Modal";
 
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index b226c145b..a31e46fbb 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -36,7 +36,7 @@ import {
   UpgradePlanModal
 } from "@app/components/v2";
 import { leaveConfirmDefaultMessage } from "@app/const";
-import { useWorkspace, useSubscription } from "@app/context";
+import { useSubscription,useWorkspace } from "@app/context";
 import { useLeaveConfirm, usePopUp, useToggle } from "@app/hooks";
 import {
   useBatchSecretsOp,
@@ -99,7 +99,7 @@ const USER_ACTION_PUSH = "first_time_secrets_pushed";
  */
 export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   const { subscription } = useSubscription();
-  console.log('dashboard sub: ', subscription);
+  console.log("dashboard sub: ", subscription);
   const { t } = useTranslation();
   const router = useRouter();
   const { createNotification } = useNotificationContext();

From c8d081e8188c7605c753b83dba0803d5ad000a5a Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 17:45:20 +0700
Subject: [PATCH 16/22] Remove print statement

---
 frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx b/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
index 5db9b7a32..c1d134eae 100644
--- a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
+++ b/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
@@ -65,8 +65,6 @@ export const Navbar = () => {
   const router = useRouter();
   const { subscription } = useSubscription();
   
-  console.log("subscription: ", subscription);
-
   const { currentOrg, orgs } = useOrganization();
   const { user } = useUser();
 

From 1cf65aca1bffe6e0ff860a5375a0bc9f8cdf9e54 Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 17:46:36 +0700
Subject: [PATCH 17/22] Remove print statement

---
 frontend/src/views/DashboardPage/DashboardPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index a31e46fbb..539d9fea7 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -99,7 +99,6 @@ const USER_ACTION_PUSH = "first_time_secrets_pushed";
  */
 export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   const { subscription } = useSubscription();
-  console.log("dashboard sub: ", subscription);
   const { t } = useTranslation();
   const router = useRouter();
   const { createNotification } = useNotificationContext();

From 29d50f850be28f86de474256520c41340db2bf2d Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 19:01:31 +0700
Subject: [PATCH 18/22] Correct current plan text in usage and billing

---
 .../components/BillingCloudTab/PreviewSection.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
index 4050e7936..5e3d50c42 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
@@ -12,7 +12,7 @@ export const PreviewSection = () => {
     const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
     const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? "");
     const createCustomerPortalSession = useCreateCustomerPortalSession();
-
+    
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
         "managePlan"
     ] as const);
@@ -35,6 +35,12 @@ export const PreviewSection = () => {
         
         return formattedDate;
     }
+
+    function formatPlanSlug(slug: string) {
+        return slug
+            .replace(/(\b[a-z])/g, match => match.toUpperCase())
+            .replace(/-/g, " ");
+    }
     
     return (
         <div>
@@ -52,11 +58,13 @@ export const PreviewSection = () => {
                     </Button>
                 </div>
             )}
-            {!isLoading && data && (
+            {!isLoading && data && subscription && (
                 <div className="flex mt-8 max-w-screen-lg">
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
                         <p className="mb-2 text-gray-400">Current plan</p>
-                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">Starter</p>
+                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
+                            {formatPlanSlug(subscription.slug)}
+                        </p>
                         <button 
                             type="button"
                             onClick={async () => {

From f9d0e0d971800daf716c819ba291bb48d70918ba Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 22:00:13 +0700
Subject: [PATCH 19/22] Replace - with Unlimited in compare plans table

---
 .../components/BillingCloudTab/ManagePlansTable.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
index 7e0a73b2f..ffdcbc994 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
@@ -34,7 +34,7 @@ export const ManagePlansTable = ({
     const createCustomerPortalSession = useCreateCustomerPortalSession();
 
     const displayCell = (value: null | number | string | boolean) => {
-        if (value === null) return "-";
+        if (value === null) return "Unlimited";
         
         if (typeof value === "boolean") {
             if (value) return (

From 8381944bb267bda5e8a96fdbb8481db32ef322fa Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Tue, 27 Jun 2023 23:56:43 +0530
Subject: [PATCH 20/22] feat(integrations-page): fixed id in delete modal

---
 .../IntegrationsSection/IntegrationsSection.tsx    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index 272b96a3b..e61c6fe47 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -46,7 +46,7 @@ export const IntegrationsSection = ({
       )}
       {!isLoading && !integrations.length && (
         <EmptyState
-          className="mx-6 pt-8 pb-4 rounded-md border border-mineshaft-700"
+          className="mx-6 rounded-md border border-mineshaft-700 pt-8 pb-4"
           title="No integrations found. Click on one of the below providers to sync secrets."
         />
       )}
@@ -54,7 +54,7 @@ export const IntegrationsSection = ({
         <div className="flex flex-col space-y-4 p-6 pt-0">
           {integrations?.map((integration) => (
             <div
-              className="flex max-w-8xl justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
+              className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
               key={`integration-${integration?._id.toString()}`}
             >
               <div className="flex">
@@ -80,7 +80,7 @@ export const IntegrationsSection = ({
                 </div>
                 <div className="ml-2 flex flex-col">
                   <FormLabel label="Secret Path" />
-                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
+                  <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
                     {integration.secretPath}
                   </div>
                 </div>
@@ -89,13 +89,13 @@ export const IntegrationsSection = ({
                 </div>
                 <div className="ml-4 flex flex-col">
                   <FormLabel label="Integration" />
-                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
+                  <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
                     {integrationSlugNameMapping[integration.integration]}
                   </div>
                 </div>
                 <div className="ml-2 flex flex-col">
                   <FormLabel label="App" />
-                  <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
+                  <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
                     {integration.integration === "hashicorp-vault"
                       ? `${integration.app} - path: ${integration.path}`
                       : integration.app}
@@ -107,7 +107,7 @@ export const IntegrationsSection = ({
                   integration.integration === "gitlab") && (
                   <div className="ml-4 flex flex-col">
                     <FormLabel label="Target Environment" />
-                    <div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
+                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
                       {integration.targetEnvironment}
                     </div>
                   </div>
@@ -134,7 +134,7 @@ export const IntegrationsSection = ({
       <DeleteActionModal
         isOpen={popUp.deleteConfirmation.isOpen}
         title={`Are you sure want to remove ${
-          (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || " "
+          (popUp?.deleteConfirmation.data as TIntegration)?.integration || " "
         } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
         onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
         deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""}

From 798f091ff287da08afc27f2561141883cfbc3361 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Tue, 27 Jun 2023 15:00:03 -0400
Subject: [PATCH 21/22] fix fetching secrets via service token

---
 backend/src/controllers/v2/serviceTokenDataController.ts | 2 +-
 cli/packages/api/model.go                                | 2 +-
 cli/packages/util/secrets.go                             | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/backend/src/controllers/v2/serviceTokenDataController.ts b/backend/src/controllers/v2/serviceTokenDataController.ts
index 471ac1f3f..304311da7 100644
--- a/backend/src/controllers/v2/serviceTokenDataController.ts
+++ b/backend/src/controllers/v2/serviceTokenDataController.ts
@@ -53,7 +53,7 @@ export const getServiceTokenData = async (req: Request, res: Response) => {
     req.authData.authPayload._id
   )
     .select("+encryptedKey +iv +tag")
-    .populate("user");
+    .populate("user").lean();
 
   return res.status(200).json(serviceTokenData);
 };
diff --git a/cli/packages/api/model.go b/cli/packages/api/model.go
index 7de7a962b..954982dc9 100644
--- a/cli/packages/api/model.go
+++ b/cli/packages/api/model.go
@@ -188,7 +188,7 @@ type GetServiceTokenDetailsResponse struct {
 	Tag          string    `json:"tag"`
 	CreatedAt    time.Time `json:"createdAt"`
 	UpdatedAt    time.Time `json:"updatedAt"`
-	V            int       `json:"__v"`
+	SecretPath   string    `json:"secretPath"`
 }
 
 type GetAccessibleEnvironmentsRequest struct {
diff --git a/cli/packages/util/secrets.go b/cli/packages/util/secrets.go
index eef691fdc..3f742372f 100644
--- a/cli/packages/util/secrets.go
+++ b/cli/packages/util/secrets.go
@@ -37,6 +37,7 @@ func GetPlainTextSecretsViaServiceToken(fullServiceToken string) ([]models.Singl
 	encryptedSecrets, err := api.CallGetSecretsV3(httpClient, api.GetEncryptedSecretsV3Request{
 		WorkspaceId: serviceTokenDetails.Workspace,
 		Environment: serviceTokenDetails.Environment,
+		SecretPath:  serviceTokenDetails.SecretPath,
 	})
 
 	if err != nil {

From f445bac42f39c99ac0982c132cf893c40433472e Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Tue, 27 Jun 2023 17:20:30 -0400
Subject: [PATCH 22/22] swap out for v3 secrets

---
 helm-charts/secrets-operator/Chart.yaml       |  2 +-
 .../controllers/infisicalsecret_helper.go     |  6 +--
 k8-operator/packages/api/api.go               | 32 +++++++------
 k8-operator/packages/api/models.go            | 47 ++++++++++++-------
 k8-operator/packages/util/secrets.go          | 41 ++++++++--------
 5 files changed, 73 insertions(+), 55 deletions(-)

diff --git a/helm-charts/secrets-operator/Chart.yaml b/helm-charts/secrets-operator/Chart.yaml
index 35475b8d8..6a290b96c 100644
--- a/helm-charts/secrets-operator/Chart.yaml
+++ b/helm-charts/secrets-operator/Chart.yaml
@@ -18,4 +18,4 @@ version: 0.1.6
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-appVersion: "0.1.6"
+appVersion: "0.1.7"
diff --git a/k8-operator/controllers/infisicalsecret_helper.go b/k8-operator/controllers/infisicalsecret_helper.go
index faf4a4e30..32216e2e3 100644
--- a/k8-operator/controllers/infisicalsecret_helper.go
+++ b/k8-operator/controllers/infisicalsecret_helper.go
@@ -127,7 +127,7 @@ func (r *InfisicalSecretReconciler) GetInfisicalServiceAccountCredentialsFromKub
 	return model.ServiceAccountDetails{AccessKey: string(accessKeyFromSecret), PrivateKey: string(privateKeyFromSecret), PublicKey: string(publicKeyFromSecret)}, nil
 }
 
-func (r *InfisicalSecretReconciler) CreateInfisicalManagedKubeSecret(ctx context.Context, infisicalSecret v1alpha1.InfisicalSecret, secretsFromAPI []model.SingleEnvironmentVariable, encryptedSecretsResponse api.GetEncryptedSecretsV2Response) error {
+func (r *InfisicalSecretReconciler) CreateInfisicalManagedKubeSecret(ctx context.Context, infisicalSecret v1alpha1.InfisicalSecret, secretsFromAPI []model.SingleEnvironmentVariable, encryptedSecretsResponse api.GetEncryptedSecretsV3Response) error {
 	plainProcessedSecrets := make(map[string][]byte)
 	for _, secret := range secretsFromAPI {
 		plainProcessedSecrets[secret.Key] = []byte(secret.Value) // plain process
@@ -155,7 +155,7 @@ func (r *InfisicalSecretReconciler) CreateInfisicalManagedKubeSecret(ctx context
 	return nil
 }
 
-func (r *InfisicalSecretReconciler) UpdateInfisicalManagedKubeSecret(ctx context.Context, managedKubeSecret corev1.Secret, secretsFromAPI []model.SingleEnvironmentVariable, encryptedSecretsResponse api.GetEncryptedSecretsV2Response) error {
+func (r *InfisicalSecretReconciler) UpdateInfisicalManagedKubeSecret(ctx context.Context, managedKubeSecret corev1.Secret, secretsFromAPI []model.SingleEnvironmentVariable, encryptedSecretsResponse api.GetEncryptedSecretsV3Response) error {
 	plainProcessedSecrets := make(map[string][]byte)
 	for _, secret := range secretsFromAPI {
 		plainProcessedSecrets[secret.Key] = []byte(secret.Value)
@@ -208,7 +208,7 @@ func (r *InfisicalSecretReconciler) ReconcileInfisicalSecret(ctx context.Context
 	}
 
 	var plainTextSecretsFromApi []model.SingleEnvironmentVariable
-	var fullEncryptedSecretsResponse api.GetEncryptedSecretsV2Response
+	var fullEncryptedSecretsResponse api.GetEncryptedSecretsV3Response
 
 	if serviceAccountCreds.AccessKey != "" || serviceAccountCreds.PrivateKey != "" || serviceAccountCreds.PublicKey != "" {
 		plainTextSecretsFromApi, fullEncryptedSecretsResponse, err = util.GetPlainTextSecretsViaServiceAccount(serviceAccountCreds, infisicalSecret.Spec.Authentication.ServiceAccount.ProjectId, infisicalSecret.Spec.Authentication.ServiceAccount.EnvironmentName, secretVersionBasedOnETag)
diff --git a/k8-operator/packages/api/api.go b/k8-operator/packages/api/api.go
index bb719f650..0dd3d7a6f 100644
--- a/k8-operator/packages/api/api.go
+++ b/k8-operator/packages/api/api.go
@@ -47,36 +47,40 @@ func CallGetServiceTokenDetailsV2(httpClient *resty.Client) (GetServiceTokenDeta
 	return tokenDetailsResponse, nil
 }
 
-func CallGetSecretsV2(httpClient *resty.Client, request GetEncryptedSecretsV2Request) (GetEncryptedSecretsV2Response, error) {
-	var encryptedSecretsResponse GetEncryptedSecretsV2Response
-	createHttpRequest := httpClient.
+func CallGetSecretsV3(httpClient *resty.Client, request GetEncryptedSecretsV3Request) (GetEncryptedSecretsV3Response, error) {
+	var secretsResponse GetEncryptedSecretsV3Response
+
+	httpRequest := httpClient.
 		R().
+		SetResult(&secretsResponse).
+		SetHeader("User-Agent", USER_AGENT_NAME).
+		SetHeader("If-None-Match", request.ETag).
 		SetQueryParam("environment", request.Environment).
-		SetQueryParam("workspaceId", request.WorkspaceId).
-		SetResult(&encryptedSecretsResponse).
-		SetHeader("User-Agent", USER_AGENT_NAME)
+		SetQueryParam("workspaceId", request.WorkspaceId)
 
-	createHttpRequest.SetHeader("If-None-Match", request.ETag)
+	if request.SecretPath != "" {
+		httpRequest.SetQueryParam("secretPath", request.SecretPath)
+	}
 
-	response, err := createHttpRequest.Get(fmt.Sprintf("%v/v2/secrets", API_HOST_URL))
+	response, err := httpRequest.Get(fmt.Sprintf("%v/v3/secrets", API_HOST_URL))
 
 	if err != nil {
-		return GetEncryptedSecretsV2Response{}, fmt.Errorf("CallGetSecretsV2: Unable to complete api request [err=%s]", err)
+		return GetEncryptedSecretsV3Response{}, fmt.Errorf("CallGetSecretsV3: Unable to complete api request [err=%s]", err)
 	}
 
 	if response.IsError() {
-		return GetEncryptedSecretsV2Response{}, fmt.Errorf("CallGetSecretsV2: Unsuccessful response: [response=%s]", response)
+		return GetEncryptedSecretsV3Response{}, fmt.Errorf("CallGetSecretsV3: Unsuccessful response. Please make sure your secret path, workspace and environment name are all correct [response=%s]", response)
 	}
 
 	if response.StatusCode() == 304 {
-		encryptedSecretsResponse.Modified = false
+		secretsResponse.Modified = false
 	} else {
-		encryptedSecretsResponse.Modified = true
+		secretsResponse.Modified = true
 	}
 
-	encryptedSecretsResponse.ETag = response.Header().Get("etag")
+	secretsResponse.ETag = response.Header().Get("etag")
 
-	return encryptedSecretsResponse, nil
+	return secretsResponse, nil
 }
 
 func CallGetServiceTokenAccountDetailsV2(httpClient *resty.Client) (ServiceAccountDetailsResponse, error) {
diff --git a/k8-operator/packages/api/models.go b/k8-operator/packages/api/models.go
index 623cf05c9..8e68d65c5 100644
--- a/k8-operator/packages/api/models.go
+++ b/k8-operator/packages/api/models.go
@@ -28,30 +28,42 @@ type GetEncryptedWorkspaceKeyResponse struct {
 	UpdatedAt time.Time `json:"updatedAt"`
 }
 
-type GetEncryptedSecretsV2Request struct {
+type GetEncryptedSecretsV3Request struct {
 	Environment string `json:"environment"`
 	WorkspaceId string `json:"workspaceId"`
+	SecretPath  string `json:"secretPath"`
 	ETag        string `json:"etag,omitempty"`
 }
 
-type GetEncryptedSecretsV2Response struct {
+type GetEncryptedSecretsV3Response struct {
 	Secrets []struct {
-		ID                    string    `json:"_id"`
-		Version               int       `json:"version"`
-		Workspace             string    `json:"workspace"`
-		Type                  string    `json:"type"`
-		Environment           string    `json:"environment"`
-		SecretKeyCiphertext   string    `json:"secretKeyCiphertext"`
-		SecretKeyIV           string    `json:"secretKeyIV"`
-		SecretKeyTag          string    `json:"secretKeyTag"`
-		SecretValueCiphertext string    `json:"secretValueCiphertext"`
-		SecretValueIV         string    `json:"secretValueIV"`
-		SecretValueTag        string    `json:"secretValueTag"`
-		CreatedAt             time.Time `json:"createdAt"`
-		UpdatedAt             time.Time `json:"updatedAt"`
-		User                  string    `json:"user,omitempty"`
+		ID        string `json:"_id"`
+		Version   int    `json:"version"`
+		Workspace string `json:"workspace"`
+		Type      string `json:"type"`
+		Tags      []struct {
+			ID        string `json:"_id"`
+			Name      string `json:"name"`
+			Slug      string `json:"slug"`
+			Workspace string `json:"workspace"`
+		} `json:"tags"`
+		Environment             string    `json:"environment"`
+		SecretKeyCiphertext     string    `json:"secretKeyCiphertext"`
+		SecretKeyIV             string    `json:"secretKeyIV"`
+		SecretKeyTag            string    `json:"secretKeyTag"`
+		SecretValueCiphertext   string    `json:"secretValueCiphertext"`
+		SecretValueIV           string    `json:"secretValueIV"`
+		SecretValueTag          string    `json:"secretValueTag"`
+		SecretCommentCiphertext string    `json:"secretCommentCiphertext"`
+		SecretCommentIV         string    `json:"secretCommentIV"`
+		SecretCommentTag        string    `json:"secretCommentTag"`
+		Algorithm               string    `json:"algorithm"`
+		KeyEncoding             string    `json:"keyEncoding"`
+		Folder                  string    `json:"folder"`
+		V                       int       `json:"__v"`
+		CreatedAt               time.Time `json:"createdAt"`
+		UpdatedAt               time.Time `json:"updatedAt"`
 	} `json:"secrets"`
-
 	Modified bool   `json:"modified,omitempty"`
 	ETag     string `json:"ETag,omitempty"`
 }
@@ -64,6 +76,7 @@ type GetServiceTokenDetailsResponse struct {
 	EncryptedKey string `json:"encryptedKey"`
 	Iv           string `json:"iv"`
 	Tag          string `json:"tag"`
+	SecretPath   string `json:"secretPath"`
 }
 
 type ServiceAccountDetailsResponse struct {
diff --git a/k8-operator/packages/util/secrets.go b/k8-operator/packages/util/secrets.go
index 8134fb882..5087cd03a 100644
--- a/k8-operator/packages/util/secrets.go
+++ b/k8-operator/packages/util/secrets.go
@@ -48,10 +48,10 @@ func GetServiceTokenDetails(infisicalToken string) (api.GetServiceTokenDetailsRe
 	return serviceTokenDetails, nil
 }
 
-func GetPlainTextSecretsViaServiceToken(fullServiceToken string, etag string) ([]model.SingleEnvironmentVariable, api.GetEncryptedSecretsV2Response, error) {
+func GetPlainTextSecretsViaServiceToken(fullServiceToken string, etag string) ([]model.SingleEnvironmentVariable, api.GetEncryptedSecretsV3Response, error) {
 	serviceTokenParts := strings.SplitN(fullServiceToken, ".", 4)
 	if len(serviceTokenParts) < 4 {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("invalid service token entered. Please double check your service token and try again")
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("invalid service token entered. Please double check your service token and try again")
 	}
 
 	serviceToken := fmt.Sprintf("%v.%v.%v", serviceTokenParts[0], serviceTokenParts[1], serviceTokenParts[2])
@@ -63,32 +63,33 @@ func GetPlainTextSecretsViaServiceToken(fullServiceToken string, etag string) ([
 
 	serviceTokenDetails, err := api.CallGetServiceTokenDetailsV2(httpClient)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("unable to get service token details. [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("unable to get service token details. [err=%v]", err)
 	}
 
-	encryptedSecretsResponse, err := api.CallGetSecretsV2(httpClient, api.GetEncryptedSecretsV2Request{
+	encryptedSecretsResponse, err := api.CallGetSecretsV3(httpClient, api.GetEncryptedSecretsV3Request{
 		WorkspaceId: serviceTokenDetails.Workspace,
 		Environment: serviceTokenDetails.Environment,
 		ETag:        etag,
+		SecretPath:  serviceTokenDetails.SecretPath,
 	})
 
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, err
+		return nil, api.GetEncryptedSecretsV3Response{}, err
 	}
 
 	decodedSymmetricEncryptionDetails, err := GetBase64DecodedSymmetricEncryptionDetails(serviceTokenParts[3], serviceTokenDetails.EncryptedKey, serviceTokenDetails.Iv, serviceTokenDetails.Tag)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("unable to decode symmetric encryption details [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("unable to decode symmetric encryption details [err=%v]", err)
 	}
 
 	plainTextWorkspaceKey, err := crypto.DecryptSymmetric([]byte(serviceTokenParts[3]), decodedSymmetricEncryptionDetails.Cipher, decodedSymmetricEncryptionDetails.Tag, decodedSymmetricEncryptionDetails.IV)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("unable to decrypt the required workspace key")
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("unable to decrypt the required workspace key")
 	}
 
 	plainTextSecrets, err := GetPlainTextSecrets(plainTextWorkspaceKey, encryptedSecretsResponse)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("unable to decrypt your secrets [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("unable to decrypt your secrets [err=%v]", err)
 	}
 
 	return plainTextSecrets, encryptedSecretsResponse, nil
@@ -97,19 +98,19 @@ func GetPlainTextSecretsViaServiceToken(fullServiceToken string, etag string) ([
 // Fetches plaintext secrets from an API endpoint using a service account.
 // The function fetches the service account details and keys, decrypts the workspace key, fetches the encrypted secrets for the specified project and environment, and decrypts the secrets using the decrypted workspace key.
 // Returns the plaintext secrets, encrypted secrets response, and any errors that occurred during the process.
-func GetPlainTextSecretsViaServiceAccount(serviceAccountCreds model.ServiceAccountDetails, projectId string, environmentName string, etag string) ([]model.SingleEnvironmentVariable, api.GetEncryptedSecretsV2Response, error) {
+func GetPlainTextSecretsViaServiceAccount(serviceAccountCreds model.ServiceAccountDetails, projectId string, environmentName string, etag string) ([]model.SingleEnvironmentVariable, api.GetEncryptedSecretsV3Response, error) {
 	httpClient := resty.New()
 	httpClient.SetAuthToken(serviceAccountCreds.AccessKey).
 		SetHeader("Accept", "application/json")
 
 	serviceAccountDetails, err := api.CallGetServiceTokenAccountDetailsV2(httpClient)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to get service account details. [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to get service account details. [err=%v]", err)
 	}
 
 	serviceAccountKeys, err := api.CallGetServiceAccountKeysV2(httpClient, api.GetServiceAccountKeysRequest{ServiceAccountId: serviceAccountDetails.ServiceAccount.ID})
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to get service account key details. [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to get service account key details. [err=%v]", err)
 	}
 
 	// find key for requested project
@@ -121,45 +122,45 @@ func GetPlainTextSecretsViaServiceAccount(serviceAccountCreds model.ServiceAccou
 	}
 
 	if workspaceServiceAccountKey.ID == "" || workspaceServiceAccountKey.EncryptedKey == "" || workspaceServiceAccountKey.Nonce == "" || serviceAccountCreds.PublicKey == "" || serviceAccountCreds.PrivateKey == "" {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("unable to find key for [projectId=%s] [err=%v]. Ensure that the given service account has access to given projectId", projectId, err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("unable to find key for [projectId=%s] [err=%v]. Ensure that the given service account has access to given projectId", projectId, err)
 	}
 
 	cipherText, err := base64.StdEncoding.DecodeString(workspaceServiceAccountKey.EncryptedKey)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode EncryptedKey secrets because [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode EncryptedKey secrets because [err=%v]", err)
 	}
 
 	nonce, err := base64.StdEncoding.DecodeString(workspaceServiceAccountKey.Nonce)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode nonce secrets because [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode nonce secrets because [err=%v]", err)
 	}
 
 	publickey, err := base64.StdEncoding.DecodeString(serviceAccountCreds.PublicKey)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode PublicKey secrets because [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode PublicKey secrets because [err=%v]", err)
 	}
 
 	privateKey, err := base64.StdEncoding.DecodeString(serviceAccountCreds.PrivateKey)
 
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode PrivateKey secrets because [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to decode PrivateKey secrets because [err=%v]", err)
 	}
 
 	plainTextWorkspaceKey := crypto.DecryptAsymmetric(cipherText, nonce, publickey, privateKey)
 
-	encryptedSecretsResponse, err := api.CallGetSecretsV2(httpClient, api.GetEncryptedSecretsV2Request{
+	encryptedSecretsResponse, err := api.CallGetSecretsV3(httpClient, api.GetEncryptedSecretsV3Request{
 		WorkspaceId: projectId,
 		Environment: environmentName,
 		ETag:        etag,
 	})
 
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("unable to fetch secrets because [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("unable to fetch secrets because [err=%v]", err)
 	}
 
 	plainTextSecrets, err := GetPlainTextSecrets(plainTextWorkspaceKey, encryptedSecretsResponse)
 	if err != nil {
-		return nil, api.GetEncryptedSecretsV2Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to get plain text secrets because [err=%v]", err)
+		return nil, api.GetEncryptedSecretsV3Response{}, fmt.Errorf("GetPlainTextSecretsViaServiceAccount: unable to get plain text secrets because [err=%v]", err)
 	}
 
 	return plainTextSecrets, encryptedSecretsResponse, nil
@@ -194,7 +195,7 @@ func GetBase64DecodedSymmetricEncryptionDetails(key string, cipher string, IV st
 	}, nil
 }
 
-func GetPlainTextSecrets(key []byte, encryptedSecretsResponse api.GetEncryptedSecretsV2Response) ([]model.SingleEnvironmentVariable, error) {
+func GetPlainTextSecrets(key []byte, encryptedSecretsResponse api.GetEncryptedSecretsV3Response) ([]model.SingleEnvironmentVariable, error) {
 	plainTextSecrets := []model.SingleEnvironmentVariable{}
 	for _, secret := range encryptedSecretsResponse.Secrets {
 		// Decrypt key