update graphiql to v2 (#702)

Co-authored-by: Kamil Kisiela <kamil.kisiela@gmail.com>

README.md

@@ -4,8 +4,8 @@ GraphQL Hive provides all the tools the get visibility of your GraphQL architect
 from standalone APIs to composed schemas (Federation, Stitching).
 
 - Visit [graphql-hive.com](https://graphql-hive.com)
-  ([status page](https://status.graphql-hive.com/))
-- [Read the announcement blog post](https://www.the-guild.dev/blog/announcing-graphql-hive-public)
+  ([status page](https://status.graphql-hive.com))
+- [Read the announcement blog post](https://the-guild.dev/blog/announcing-graphql-hive-public)
 - [Read the docs](https://docs.graphql-hive.com)
 
 ## Built for the community, for all GraphQL APIs
@@ -77,7 +77,7 @@ See you in Hive! 🐝
 - App: React, Next.js, Tailwind CSS, Radix Primitives
 - CLI: Oclif
 - Deployment: Pulumi, K8s, Nginx Proxy, Azure Cloud, CloudFlare Workers + KV Cache
-- Monitoring: Promthues, Grafana, Sentry
+- Monitoring: Prometheus, Grafana, Sentry
 - DB: Postgres, Redis, ClickHouse
 
 ## Docs

docs/DEVELOPMENT.md

@@ -16,6 +16,7 @@ Developing Hive locally requires you to have the following software installed lo
 - In the root of the repo, run `nvm use` to use the same version of node as mentioned
 - Run `pnpm i` at the root to install all the dependencies and run the hooks
 - Run `pnpm setup` to create and apply migrations on the PostgreSQL database
+- Run `pnpm run --filter @hive/storage setup`
 - Run `pnpm generate` to generate the typings from the graphql files (use `pnpm graphql:generate` if
   you only need to run GraphQL Codegen)
 - Run `pnpm build` to build all services
@@ -93,7 +94,7 @@ We have a script to feed your local instance of Hive.
 Since we migrated from Auth0 to SuperTokens there is a compatibility layer for importing/migrating
 accounts from Auth0 to SuperTokens.
 
-By default you don't need to set this up and can just use SuperTokens locally. However, if you need
+By default, you don't need to set this up and can just use SuperTokens locally. However, if you need
 to test some stuff or fix the Auth0 -> SuperTokens migration flow you have to set up some stuff.
 
 1. Create your own Auth0 application
@@ -109,9 +110,9 @@ to test some stuff or fix the Auth0 -> SuperTokens migration flow you have to se
       1. This can be done from the "Auth Pipeline -> Rules" section on the left navigation bar.
          - [`https://manage.auth0.com/dashboard/<REGION>/<DOMAIN>/rules`](https://manage.auth0.com/dashboard/us/dev-azj17nyp/rules)
       2. Enter the following code:
-         ```javascript
+         ```js
          function (user, context, callback) {
-           var namespace = 'https://graphql-hive.com';
+           const namespace = 'https://graphql-hive.com';
            context.accessToken[namespace + '/metadata'] = user.user_metadata;
            context.idToken[namespace + '/metadata'] = user.user_metadata;
            context.accessToken[namespace + '/userinfo'] = {

packages/libraries/cli/hive.json

@@ -1,4 +1,4 @@
 {
-  "registry": "http://localhost:4000/graphql",
+  "registry": "http://localhost:3001/graphql",
   "token": ""
 }

packages/services/storage/src/db/types.ts

@@ -65,9 +65,9 @@ export interface oidc_integrations {
   client_id: string;
   client_secret: string;
   created_at: Date;
-  oauth_api_url: string;
   id: string;
   linked_organization_id: string;
+  oauth_api_url: string;
   updated_at: Date;
 }
 
@@ -177,8 +177,8 @@ export interface users {
   full_name: string;
   id: string;
   is_admin: boolean | null;
-  supertoken_user_id: string | null;
   oidc_integration_id: string | null;
+  supertoken_user_id: string | null;
 }
 
 export interface version_commit {

packages/web/app/.env.template

@@ -1,4 +1,4 @@
-GRAPHQL_ENDPOINT="http://localhost:4000/graphql"
+GRAPHQL_ENDPOINT="http://localhost:3001/graphql"
 APP_BASE_URL="http://localhost:3000"
 
 # Supertokens

packages/web/app/package.json

@@ -55,7 +55,7 @@
     "echarts-for-react": "3.0.2",
     "formik": "2.2.9",
     "framer-motion": "4.1.17",
-    "graphiql": "1.7.2",
+    "graphiql": "2.2.0",
     "graphql": "16.6.0",
     "hyperid": "2.3.1",
     "immer": "9.0.16",

packages/web/app/pages/[orgId]/[projectId]/[targetId]/laboratory.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback, useState } from 'react';
+import { ReactElement } from 'react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
 
@@ -7,7 +7,7 @@ import { TargetLayout } from '@/components/layouts';
 import { Button, Title } from '@/components/v2';
 import { HiveLogo, Link2Icon } from '@/components/v2/icon';
 import { ConnectLabModal } from '@/components/v2/modals/connect-lab';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import { withSessionProtection } from '@/lib/supertokens/guard';
 import 'graphiql/graphiql.css';
 
@@ -17,14 +17,15 @@ const Page = ({ endpoint }: { endpoint: string }): ReactElement => {
       <p className="mb-5 font-light text-gray-500">
         Experiment, mock and create live environment for your schema, without running any backend.
       </p>
+      <style global jsx>{`
+        body.graphiql-dark .graphiql-container {
+          --color-base: transparent;
+          --color-primary: 40, 89%, 60%;
+        }
+      `}</style>
       <GraphiQL fetcher={createGraphiQLFetcher({ url: endpoint })}>
         <GraphiQL.Logo>
-          <HiveLogo className="h-6 w-6 brightness-0" />
-          <style jsx global>{`
-            .graphiql-container {
-              filter: invert(1);
-            }
-          `}</style>
+          <HiveLogo className="h-6 w-6" />
         </GraphiQL.Logo>
       </GraphiQL>
     </>
@@ -32,12 +33,9 @@ const Page = ({ endpoint }: { endpoint: string }): ReactElement => {
 };
 
 function LaboratoryPage(): ReactElement {
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
   const router = useRouteSelector();
-  const endpoint = `${window.location.origin}/api/lab/${router.organizationId}/${router.projectId}/${router.targetId}`;
+  const endpoint = `${location.origin}/api/lab/${router.organizationId}/${router.projectId}/${router.targetId}`;
 
   return (
     <>

packages/web/app/pages/[orgId]/[projectId]/[targetId]/settings.tsx

@@ -33,7 +33,7 @@ import {
   TokensDocument,
 } from '@/graphql';
 import { canAccessTarget, TargetAccessScope } from '@/lib/access/target';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import { withSessionProtection } from '@/lib/supertokens/guard';
 
 const columns = [
@@ -48,10 +48,7 @@ const Tokens = ({ me }: { me: MemberFieldsFragment }): ReactElement => {
   const router = useRouteSelector();
   const [{ fetching: deleting }, mutate] = useMutation(DeleteTokensDocument);
   const [checked, setChecked] = useState<string[]>([]);
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
 
   const [tokensQuery] = useQuery({
     query: TokensDocument,
@@ -589,10 +586,7 @@ const Page = ({
   organization: OrganizationFieldsFragment;
 }) => {
   const router = useRouteSelector();
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
 
   const [mutation, mutate] = useMutation(Settings_UpdateTargetNameMutation);
   const { handleSubmit, values, handleChange, handleBlur, isSubmitting, errors, touched } =

packages/web/app/pages/[orgId]/[projectId]/alerts.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback, useState } from 'react';
+import { ReactElement, useState } from 'react';
 import { useMutation, useQuery } from 'urql';
 
 import { authenticated } from '@/components/authenticated-container';
@@ -15,7 +15,7 @@ import {
   ProjectFieldsFragment,
 } from '@/graphql';
 import { ProjectAccessScope, useProjectAccess } from '@/lib/access/project';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import { withSessionProtection } from '@/lib/supertokens/guard';
 
 const channelAlertsColumns = [
@@ -44,10 +44,7 @@ const Channels = (): ReactElement => {
     },
     requestPolicy: 'cache-and-network',
   });
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
   const [mutation, mutate] = useMutation(DeleteAlertChannelsDocument);
 
   const channelAlerts = channelAlertsQuery.data?.alertChannels || [];
@@ -120,10 +117,7 @@ const Page = (props: {
   });
   const [checked, setChecked] = useState<string[]>([]);
   const router = useRouteSelector();
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
   const [mutation, mutate] = useMutation(DeleteAlertsDocument);
   const [alertsQuery] = useQuery({
     query: AlertsDocument,

packages/web/app/pages/[orgId]/[projectId]/settings.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback, useState } from 'react';
+import { ReactElement } from 'react';
 import NextLink from 'next/link';
 import { useFormik } from 'formik';
 import { gql, useMutation, useQuery } from 'urql';
@@ -17,7 +17,7 @@ import {
   ProjectType,
 } from '@/graphql';
 import { canAccessProject, ProjectAccessScope, useProjectAccess } from '@/lib/access/project';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import { withSessionProtection } from '@/lib/supertokens/guard';
 
 const Settings_UpdateProjectGitRepositoryMutation = gql(/* GraphQL */ `
@@ -160,10 +160,7 @@ const Page = ({
     redirect: true,
   });
   const router = useRouteSelector();
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
 
   const [mutation, mutate] = useMutation(Settings_UpdateProjectNameMutation);
 

packages/web/app/pages/[orgId]/members.tsx

@@ -242,9 +242,9 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
   });
 
   const [checked, setChecked] = useState<string[]>([]);
-  const [selectedMemberId, setSelectedMemberId] = useState<string>('');
-  const [isPermissionsModalOpen, togglePermissionsModalOpen] = useToggle(false);
-  const [isDeleteMembersModalOpen, toggleDeleteMembersModalOpen] = useToggle(false);
+  const [selectedMemberId, setSelectedMemberId] = useState('');
+  const [isPermissionsModalOpen, togglePermissionsModalOpen] = useToggle();
+  const [isDeleteMembersModalOpen, toggleDeleteMembersModalOpen] = useToggle();
 
   const [meQuery] = useQuery({ query: MeDocument });
   const router = useRouteSelector();

packages/web/app/pages/[orgId]/settings.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback, useState } from 'react';
+import { ReactElement } from 'react';
 import { useFormik } from 'formik';
 import { gql, useMutation, useQuery } from 'urql';
 import * as Yup from 'yup';
@@ -22,7 +22,7 @@ import {
   OrganizationAccessScope,
   useOrganizationAccess,
 } from '@/lib/access/organization';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import { withSessionProtection } from '@/lib/supertokens/guard';
 
 const Integrations = (): ReactElement => {
@@ -148,10 +148,7 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
   });
   const router = useRouteSelector();
   const isRegularOrg = organization?.type === OrganizationType.Regular;
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
 
   const [mutation, mutate] = useMutation(UpdateOrganizationNameMutation);
 

packages/web/app/pages/_app.tsx

@@ -7,7 +7,6 @@ import GlobalStylesComponent from '@/components/common/GlobalStyles';
 import * as gtag from '@/lib/gtag';
 import { colors } from '@/lib/theme';
 import { LoadingAPIIndicator } from '@/components/common/LoadingAPI';
-import '@/lib/graphiql.css';
 import '../public/styles.css';
 import cookies from 'js-cookie';
 import Session from 'supertokens-auth-react/recipe/session';

packages/web/app/pages/dev.tsx

@@ -1,29 +1,25 @@
-import React from 'react';
-import 'twin.macro';
-
-import dynamic from 'next/dynamic';
+import { ReactElement } from 'react';
+import { GraphiQL } from 'graphiql';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { HiveLogo } from '@/components/v2/icon';
 import 'graphiql/graphiql.css';
 
-const GraphiQL = dynamic(() => import('graphiql'), {
-  ssr: false,
-});
-
-const fetcher = process.browser
-  ? // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('@graphiql/toolkit').createGraphiQLFetcher({
-      url: window.location.origin + '/api/proxy',
-    })
-  : null;
-
-export default function Dev() {
+export default function DevPage(): ReactElement {
   return (
-    <div tw="mt-20 h-full w-full">
-      <GraphiQL fetcher={fetcher} headerEditorEnabled={true} />
-      <style jsx global>{`
-        .graphiql-container {
-          filter: invert(1);
+    <div className="mt-20 h-full w-full">
+      <style global jsx>{`
+        body.graphiql-dark .graphiql-container {
+          --color-base: transparent;
+          --color-primary: 40, 89%, 60%;
         }
       `}</style>
+      {process.browser && (
+        <GraphiQL fetcher={createGraphiQLFetcher({ url: `${location.origin}/api/proxy` })}>
+          <GraphiQL.Logo>
+            <HiveLogo className="h-6 w-6" />
+          </GraphiQL.Logo>
+        </GraphiQL>
+      )}
     </div>
   );
 }

packages/web/app/src/components/common/Page.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { FiTarget } from 'react-icons/fi';
 import { VscOrganization, VscFolder } from 'react-icons/vsc';
 import { useNavigation, Navigation, NavigationItem } from './Navigation';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 const PageContainer = tw.div`flex flex-col flex-1 overflow-y-auto relative`;
 

packages/web/app/src/components/layouts/organization.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useCallback, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useQuery } from 'urql';
 import NextLink from 'next/link';
@@ -13,7 +13,7 @@ import {
   OrgBillingInfoFieldsFragment,
   OrgRateLimitFieldsFragment,
 } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import {
   canAccessOrganization,
   OrganizationAccessScope,
@@ -64,10 +64,7 @@ export function OrganizationLayout({
 >): ReactElement | null {
   const router = useRouteSelector();
   const { push } = useRouter();
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
 
   const orgId = router.organizationId;
 

packages/web/app/src/components/layouts/project.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useCallback, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect } from 'react';
 import NextLink from 'next/link';
 import 'twin.macro';
 import { useQuery } from 'urql';
@@ -12,7 +12,7 @@ import {
   ProjectFieldsFragment,
   OrganizationFieldsFragment,
 } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import { useProjectAccess, ProjectAccessScope, canAccessProject } from '@/lib/access/project';
 
 enum TabValue {
@@ -34,10 +34,7 @@ export const ProjectLayout = ({
   className?: string;
 }): ReactElement | null => {
   const router = useRouteSelector();
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
 
   const { organizationId: orgId, projectId } = router;
 

packages/web/app/src/components/layouts/target.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useCallback, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect } from 'react';
 import NextLink from 'next/link';
 import { useQuery } from 'urql';
 
@@ -12,7 +12,7 @@ import {
   OrganizationFieldsFragment,
 } from '@/graphql';
 import { gql } from 'urql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 import { useTargetAccess, canAccessTarget, TargetAccessScope } from '@/lib/access/target';
 import { QueryError } from '../common/DataWrapper';
 import { ConnectSchemaModal } from '@/components/v2/modals';
@@ -47,10 +47,7 @@ export const TargetLayout = ({
   className?: string;
   connect?: ReactNode;
 }): ReactElement | null => {
-  const [isModalOpen, setModalOpen] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
+  const [isModalOpen, toggleModalOpen] = useToggle();
 
   const router = useRouteSelector();
 

packages/web/app/src/components/organization/Creator.tsx

@@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react';
 import { CreateOrganizationDocument } from '@/graphql';
 import { Label, Description } from '@/components/common';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const OrganizationCreator: React.FC<{
   isOpen: boolean;

packages/web/app/src/components/organization/Permissions.tsx

@@ -14,7 +14,7 @@ import { Scope, NoAccess } from '@/lib/access/common';
 import { canAccessOrganization } from '@/lib/access/organization';
 import { canAccessProject } from '@/lib/access/project';
 import { canAccessTarget } from '@/lib/access/target';
-import { useNotifications } from '@/lib/hooks/use-notifications';
+import { useNotifications } from '@/lib/hooks';
 
 interface Props<T> {
   title: string;

packages/web/app/src/components/organization/Switcher.tsx

@@ -15,7 +15,7 @@ import {
 import 'twin.macro';
 import { OrganizationsDocument, OrganizationsQuery, OrganizationType } from '@/graphql';
 import { OrganizationCreator } from './Creator';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const OrganizationSwitcher: React.FC<{
   organizationId: string;

packages/web/app/src/components/project/Switcher.tsx

@@ -5,7 +5,7 @@ import 'twin.macro';
 import { VscChevronDown } from 'react-icons/vsc';
 import { Button, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
 import { ProjectsDocument } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const ProjectSwitcher: React.FC<{
   organizationId: string;

packages/web/app/src/components/project/settings/external-composition.tsx

@@ -5,7 +5,7 @@ import * as Yup from 'yup';
 
 import { Button, Card, Heading, Input, Spinner, Switch } from '@/components/v2';
 import { OrganizationFieldsFragment, ProjectFieldsFragment } from '@/graphql';
-import { useNotifications } from '@/lib/hooks/use-notifications';
+import { useNotifications } from '@/lib/hooks';
 
 export const ExternalCompositionForm_EnableMutation = gql(`
   mutation ExternalCompositionForm_EnableMutation($input: EnableExternalSchemaCompositionInput!) {

packages/web/app/src/components/target/Switcher.tsx

@@ -5,7 +5,7 @@ import 'twin.macro';
 import { VscChevronDown } from 'react-icons/vsc';
 import { Button, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
 import { TargetsDocument } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const TargetSwitcher: React.FC<{
   organizationId: string;

packages/web/app/src/components/target/explorer/common.tsx

@@ -4,10 +4,9 @@ import clsx from 'clsx';
 import { gql, DocumentType } from 'urql';
 import * as Popover from '@radix-ui/react-popover';
 import { VscCommentDiscussion, VscPulse } from 'react-icons/vsc';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, formatNumber } from '@/lib/hooks';
 import { Link } from '@/components/v2/link';
 import { Markdown } from '@/components/v2/markdown';
-import { formatNumber } from '@/lib/hooks/use-formatted-number';
 import { useArgumentListToggle } from './provider';
 
 function useCollapsibleList<T>(list: T[], max: number, defaultValue: boolean) {

packages/web/app/src/components/target/explorer/provider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formatISO, subDays } from 'date-fns';
-import { useLocalStorage } from '@/lib/hooks/use-local-storage';
+import { useLocalStorage } from '@/lib/hooks';
 
 export type PeriodOption = '365d' | '180d' | '90d' | '30d' | '14d' | '7d';
 export type Period = {

packages/web/app/src/components/target/history/MarkAsValid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useMutation } from 'urql';
 import { Tooltip } from '@chakra-ui/react';
 import { Button } from '@/components/v2';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 import { SchemaVersionFieldsFragment, UpdateSchemaVersionStatusDocument } from '@/graphql';
 
 export const MarkAsValid: React.FC<{

packages/web/app/src/components/target/operations/Filters.tsx

@@ -23,8 +23,7 @@ import { useDebouncedCallback } from 'use-debounce';
 
 import { Spinner } from '@/components/common/Spinner';
 import { DateRangeInput, OperationsStatsDocument, OperationStatsFieldsFragment } from '@/graphql';
-import { useFormattedNumber } from '@/lib/hooks/use-formatted-number';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useFormattedNumber } from '@/lib/hooks';
 
 const OperationsFilter: React.FC<{
   onClose(): void;

packages/web/app/src/components/target/operations/List.tsx

@@ -45,9 +45,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { Scale, Section } from '@/components/common';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { DateRangeInput, OperationsStatsDocument, OperationStatsFieldsFragment } from '@/graphql';
-import { useDecimal } from '@/lib/hooks/use-decimal';
-import { useFormattedDuration } from '@/lib/hooks/use-formatted-duration';
-import { useFormattedNumber } from '@/lib/hooks/use-formatted-number';
+import { useDecimal, useFormattedDuration, useFormattedNumber } from '@/lib/hooks';
 import { OperationsFallback } from './Fallback';
 import { env } from '@/env/frontend';
 

packages/web/app/src/components/target/operations/Stats.tsx

@@ -12,10 +12,13 @@ import {
   GeneralOperationsStatsQuery,
 } from '@/graphql';
 import { theme } from '@/lib/charts';
-import { toDecimal } from '@/lib/hooks/use-decimal';
-import { useFormattedDuration } from '@/lib/hooks/use-formatted-duration';
-import { useFormattedNumber } from '@/lib/hooks/use-formatted-number';
-import { formatThroughput, useFormattedThroughput } from '@/lib/hooks/use-formatted-throughput';
+import {
+  toDecimal,
+  useFormattedDuration,
+  useFormattedNumber,
+  formatThroughput,
+  useFormattedThroughput,
+} from '@/lib/hooks';
 import { OperationsFallback } from './Fallback';
 
 function resolutionToMilliseconds(

packages/web/app/src/components/v2/activities.tsx

@@ -21,7 +21,7 @@ import {
   ProjectIdUpdatedActivity,
 } from '@/graphql';
 import { fixDuplicatedFragments } from '@/lib/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 const organizationActivitiesDocument = fixDuplicatedFragments(OrganizationActivitiesDocument);
 

packages/web/app/src/components/v2/copy-value.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useCallback, useEffect, useState } from 'react';
 
 import { Button, Input } from '@/components/v2';
 import { CheckIcon, CopyIcon } from '@/components/v2/icon';
-import { useClipboard } from '@/lib/hooks/use-clipboard';
+import { useClipboard } from '@/lib/hooks';
 
 export const CopyValue = ({
   value,

packages/web/app/src/components/v2/header.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 import NextLink from 'next/link';
 import clsx from 'clsx';
 import { useQuery } from 'urql';
@@ -21,7 +21,7 @@ import { CreateOrganizationModal } from '@/components/v2/modals';
 import { env } from '@/env/frontend';
 import { MeDocument, OrganizationsDocument, OrganizationsQuery, OrganizationType } from '@/graphql';
 import { getDocsUrl } from '@/lib/docs-url';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector, useToggle } from '@/lib/hooks';
 
 type DropdownOrganization = OrganizationsQuery['organizations']['nodes'];
 
@@ -29,11 +29,8 @@ export const Header = (): ReactElement => {
   const router = useRouteSelector();
   const [meQuery] = useQuery({ query: MeDocument });
   const [organizationsQuery] = useQuery({ query: OrganizationsDocument });
-  const [isModalOpen, setModalOpen] = useState(false);
+  const [isModalOpen, toggleModalOpen] = useToggle();
   const [isOpaque, setIsOpaque] = useState(false);
-  const toggleModalOpen = useCallback(() => {
-    setModalOpen(prevOpen => !prevOpen);
-  }, []);
 
   const me = meQuery.data?.me;
   const allOrgs = organizationsQuery.data?.organizations.nodes || [];

packages/web/app/src/components/v2/hive-link.tsx

@@ -3,7 +3,7 @@ import NextLink from 'next/link';
 import clsx from 'clsx';
 
 import { HiveLogo } from '@/components/v2/icon';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const HiveLink = ({ className }: { className?: string }): ReactElement => {
   const router = useRouteSelector();

packages/web/app/src/components/v2/inline-code.tsx

@@ -1,4 +1,4 @@
-import { useNotifications } from '@/lib/hooks/use-notifications';
+import { useNotifications } from '@/lib/hooks';
 import { CopyIcon } from './icon';
 
 export const InlineCode = (props: { content: string }) => {

packages/web/app/src/components/v2/modals/connect-schema.tsx

@@ -5,7 +5,7 @@ import { useMutation, useQuery } from 'urql';
 import { Button, CopyValue, Heading, Link, Modal, Tag } from '@/components/v2';
 import { CreateCdnTokenDocument, ProjectDocument, ProjectType } from '@/graphql';
 import { getDocsUrl } from '@/lib/docs-url';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 const taxonomy = {
   [ProjectType.Federation]: 'supergraph schema',

packages/web/app/src/components/v2/modals/create-access-token.tsx

@@ -8,7 +8,7 @@ import { PermissionsSpace, usePermissionsManager } from '@/components/organizati
 import { Button, CopyValue, Heading, Input, Modal, Tag } from '@/components/v2';
 import { OrganizationDocument, OrganizationQuery } from '@/graphql';
 import { scopes } from '@/lib/access/common';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 const CreateAccessToken_CreateTokenMutation = gql(/* GraphQL */ `
   mutation CreateAccessToken_CreateToken($input: CreateTokenInput!) {

packages/web/app/src/components/v2/modals/create-alert.tsx

@@ -5,7 +5,7 @@ import * as Yup from 'yup';
 
 import { Button, Heading, Modal, Select } from '@/components/v2';
 import { AddAlertDocument, AlertChannelsDocument, AlertType, TargetsDocument } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const CreateAlertModal = ({
   isOpen,

packages/web/app/src/components/v2/modals/create-channel.tsx

@@ -5,7 +5,7 @@ import * as Yup from 'yup';
 
 import { Button, Heading, Input, Modal, Select, Tag } from '@/components/v2';
 import { AlertChannelType } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 const CreateChannel_AddAlertChannelMutation = gql(/* GraphQL */ `
   mutation CreateChannel_AddAlertChannel($input: AddAlertChannelInput!) {

packages/web/app/src/components/v2/modals/create-project.tsx

@@ -6,7 +6,7 @@ import * as Yup from 'yup';
 
 import { Button, Heading, Input, Modal, ProjectTypes } from '@/components/v2';
 import { ProjectType } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 const CreateProjectMutation = gql(/* GraphQL */ `
   mutation CreateProject_CreateProject($input: CreateProjectInput!) {

packages/web/app/src/components/v2/modals/create-target.tsx

@@ -5,7 +5,7 @@ import { gql, useMutation } from 'urql';
 import * as Yup from 'yup';
 
 import { Button, Heading, Input, Modal } from '@/components/v2';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 const CreateTarget_CreateTargetMutation = gql(/* GraphQL */ `
   mutation CreateTarget_CreateTarget($input: CreateTargetInput!) {

packages/web/app/src/components/v2/modals/delete-members.tsx

@@ -4,7 +4,7 @@ import { useMutation } from 'urql';
 import { Button, Heading, Modal } from '@/components/v2';
 import { TrashIcon } from '@/components/v2/icon';
 import { DeleteOrganizationMembersDocument } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const DeleteMembersModal = ({
   isOpen,

packages/web/app/src/components/v2/modals/delete-organization.tsx

@@ -5,7 +5,7 @@ import { useMutation } from 'urql';
 import { Button, Heading, Modal } from '@/components/v2';
 import { TrashIcon } from '@/components/v2/icon';
 import { DeleteOrganizationDocument, OrganizationFieldsFragment } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const DeleteOrganizationModal = ({
   isOpen,

packages/web/app/src/components/v2/modals/delete-project.tsx

@@ -5,7 +5,7 @@ import { useMutation } from 'urql';
 import { Button, Heading, Modal } from '@/components/v2';
 import { TrashIcon } from '@/components/v2/icon';
 import { DeleteProjectDocument } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const DeleteProjectModal = ({
   isOpen,

packages/web/app/src/components/v2/modals/delete-target.tsx

@@ -5,7 +5,7 @@ import { useMutation } from 'urql';
 import { Button, Heading, Modal } from '@/components/v2';
 import { TrashIcon } from '@/components/v2/icon';
 import { DeleteTargetDocument } from '@/graphql';
-import { useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { useRouteSelector } from '@/lib/hooks';
 
 export const DeleteTargetModal = ({
   isOpen,

packages/web/app/src/lib/access/common.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Router, useRouteSelector } from '@/lib/hooks/use-route-selector';
+import { Router, useRouteSelector } from '@/lib/hooks';
 import { OrganizationAccessScope, ProjectAccessScope, TargetAccessScope } from '../../graphql';
 
 export interface Scope<T> {

packages/web/app/src/lib/graphiql.css

@@ -1,20 +0,0 @@
-/* Customize styles for GraphiQL */
-.graphiql-container .topBar {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important;
-}
-
-.graphiql-container .doc-explorer-title,
-.graphiql-container .history-title {
-  padding: 0 !important;
-  padding-top: 5px !important;
-}
-
-.graphiql-container .docExplorerHide {
-  padding-bottom: 0 !important;
-  padding-top: 12px !important;
-}
-
-.graphiql-container .queryWrap {
-  line-height: 1.2rem !important;
-}

packages/web/app/src/lib/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useClipboard } from './use-clipboard';
+export { useDecimal, toDecimal } from './use-decimal';
+export { useFormattedDuration } from './use-formatted-duration';
+export { useFormattedNumber, formatNumber } from './use-formatted-number';
+export { formatThroughput, useFormattedThroughput } from './use-formatted-throughput';
+export { useLocalStorage } from './use-local-storage';
+export { useNotifications } from './use-notifications';
+export { useRouteSelector, type Router } from './use-route-selector';
+export { useToggle } from './use-toggle';

packages/web/app/src/lib/hooks/use-toggle.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 
-export function useToggle(defaultValue: boolean) {
+export function useToggle(defaultValue = false) {
   const [value, setValue] = useState(defaultValue);
   const toggle = useCallback(() => {
     setValue(value => !value);

patches/@theguild__buddy@0.1.0.patch

@@ -1,17 +1,32 @@
+diff --git a/index.js b/index.js
+index f8b4b959baf4010ff4e38cea8b43d99364a30a3b..eabb5cc98d39a8ea4d83e4c41020491eb45e343a 100644
+--- a/index.js
++++ b/index.js
+@@ -65,10 +65,10 @@ function sharePromise(setter) {
+         return sharedPromise;
+     };
+ }
+-const cacheSymbol = Symbol.for("@cache");
+ function cacheResult(cacheKeyFn) {
+     return (_target, _propertyKey, descriptor) => {
+         const originalMethod = descriptor.value;
++        const cacheSymbol = Symbol.for("@cache");
+         function ensureCache(obj) {
+             if (!obj[cacheSymbol]) {
+                 obj[cacheSymbol] = new Map();
 diff --git a/index.mjs b/index.mjs
-index 7db160e..a94f537 100644
+index 7db160e5b92587f8655ee04052272e08879dea58..b9de7170da38136b70d68aa495305f03bce6b4ae 100644
 --- a/index.mjs
 +++ b/index.mjs
-@@ -61,10 +61,11 @@ function sharePromise(setter) {
-         return sharedPromise;
-     };
- }
--const cacheSymbol = Symbol.for("@cache");
- function cacheResult(cacheKeyFn) {
-     return (_target, _propertyKey, descriptor) => {
-         const originalMethod = descriptor.value;
-+        const cacheSymbol = Symbol('@cache');
-+        
-         function ensureCache(obj) {
-             if (!obj[cacheSymbol]) {
-                 obj[cacheSymbol] = new Map();
+@@ -61,10 +61,10 @@ function sharePromise(setter) {
+         return sharedPromise;
+     };
+ }
+-const cacheSymbol = Symbol.for("@cache");
+ function cacheResult(cacheKeyFn) {
+     return (_target, _propertyKey, descriptor) => {
+         const originalMethod = descriptor.value;
++        const cacheSymbol = Symbol('@cache');
+         function ensureCache(obj) {
+             if (!obj[cacheSymbol]) {
+                 obj[cacheSymbol] = new Map();

pnpm-lock.yaml

@@ -8,30 +8,30 @@ overrides:
   ts-node: 10.9.1
 
 patchedDependencies:
-  bullmq@1.81.4:
-    hash: d7likfulu5mfjaaerbpls6og24
-    path: patches/bullmq@1.81.4.patch
-  '@n1ru4l/dockest@2.1.0-rc.6':
-    hash: 2borp2lvtycfyctncvbphkqq2a
-    path: patches/@n1ru4l__dockest@2.1.0-rc.6.patch
-  mjml-core@4.13.0:
-    hash: zxxsxbqejjmcwuzpigutzzq6wa
-    path: patches/mjml-core@4.13.0.patch
-  slonik@30.1.2:
-    hash: wg2hxbo7txnklmvja4aeqnygfi
-    path: patches/slonik@30.1.2.patch
-  bob-the-bundler@4.0.0:
-    hash: sum6gc2cezfosivdgsdg22qyja
-    path: patches/bob-the-bundler@4.0.0.patch
-  atomic-sleep@1.0.0:
-    hash: ofrh3divoxil53fpajpmtnq43q
-    path: patches/atomic-sleep@1.0.0.patch
   '@tgriesser/schemats@7.0.0':
     hash: u3kbucfchakklx3sci2vh6wjau
     path: patches/@tgriesser__schemats@7.0.0.patch
+  atomic-sleep@1.0.0:
+    hash: ofrh3divoxil53fpajpmtnq43q
+    path: patches/atomic-sleep@1.0.0.patch
+  mjml-core@4.13.0:
+    hash: zxxsxbqejjmcwuzpigutzzq6wa
+    path: patches/mjml-core@4.13.0.patch
   '@theguild/buddy@0.1.0':
-    hash: by7lpfnfs364rrj52jl5kihtv4
+    hash: ryylgra5xglhidfoiaxehn22hq
     path: patches/@theguild__buddy@0.1.0.patch
+  bullmq@1.81.4:
+    hash: d7likfulu5mfjaaerbpls6og24
+    path: patches/bullmq@1.81.4.patch
+  slonik@30.1.2:
+    hash: wg2hxbo7txnklmvja4aeqnygfi
+    path: patches/slonik@30.1.2.patch
+  '@n1ru4l/dockest@2.1.0-rc.6':
+    hash: 2borp2lvtycfyctncvbphkqq2a
+    path: patches/@n1ru4l__dockest@2.1.0-rc.6.patch
+  bob-the-bundler@4.0.0:
+    hash: sum6gc2cezfosivdgsdg22qyja
+    path: patches/bob-the-bundler@4.0.0.patch
   oclif@3.2.25:
     hash: zdmnkkzcdbpcmhe6nuh2wxowhi
     path: patches/oclif@3.2.25.patch
@@ -375,7 +375,7 @@ importers:
       '@sentry/node': 7.21.1
       '@sentry/types': 7.21.1
       '@slack/web-api': 6.4.0
-      '@theguild/buddy': 0.1.0_by7lpfnfs364rrj52jl5kihtv4
+      '@theguild/buddy': 0.1.0_ryylgra5xglhidfoiaxehn22hq
       '@trpc/client': 9.23.2
       '@whatwg-node/fetch': 0.4.7
       abort-controller: 3.0.0
@@ -694,7 +694,7 @@ importers:
     dependencies:
       '@sentry/node': 7.21.1
       '@slonik/migrator': 0.8.5_slonik@30.1.2
-      '@theguild/buddy': 0.1.0_by7lpfnfs364rrj52jl5kihtv4
+      '@theguild/buddy': 0.1.0_ryylgra5xglhidfoiaxehn22hq
       dotenv: 10.0.0
       got: 12.5.3
       param-case: 3.0.4
@@ -984,7 +984,7 @@ importers:
       eslint-plugin-tailwindcss: 3.6.2
       formik: 2.2.9
       framer-motion: 4.1.17
-      graphiql: 1.7.2
+      graphiql: 2.2.0
       graphql: 16.6.0
       hyperid: 2.3.1
       immer: 9.0.16
@@ -1065,7 +1065,7 @@ importers:
       echarts-for-react: 3.0.2_echarts@5.3.2+react@17.0.2
       formik: 2.2.9_react@17.0.2
       framer-motion: 4.1.17_sfoxds7t5ydpegc3knd667wn6m
-      graphiql: 1.7.2_4acpsgwrblrf7yma4ztoevvkgq
+      graphiql: 2.2.0_yw6veynvoxc2n44gl6g5u6zfru
       graphql: 16.6.0
       hyperid: 2.3.1
       immer: 9.0.16
@@ -4702,8 +4702,39 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@graphiql/toolkit/0.4.5_graphql@16.6.0:
-    resolution: {integrity: sha512-QXuuMSSK/0GfBS7tltrGZdyhIvm6oe9TK4VW9pfa8dALYttpzyJ64Q4Sx9I1Ng++yOMJWziM/ksa043zkNHsjQ==}
+  /@graphiql/react/0.15.0_yw6veynvoxc2n44gl6g5u6zfru:
+    resolution: {integrity: sha512-kJqkdf6d4Cck05Wt5yCDZXWfs7HZgcpuoWq/v8nOa698qVaNMM3qdG4CpRsZEexku0DSSJzWWuanxd5x+sRcFg==}
+    peerDependencies:
+      graphql: ^15.5.0 || ^16.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@graphiql/toolkit': 0.8.0_graphql@16.6.0
+      '@reach/combobox': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/dialog': 0.17.0_k2mvpji5i2ojml6m4ftklg47pa
+      '@reach/listbox': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/menu-button': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/tooltip': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/visually-hidden': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      codemirror: 5.65.9
+      codemirror-graphql: 2.0.2_jei7j5ousrsupd5srb5vzlhguq
+      copy-to-clipboard: 3.3.2
+      graphql: 16.6.0
+      graphql-language-service: 5.1.0_graphql@16.6.0
+      markdown-it: 12.3.2
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      set-value: 4.1.0
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@types/node'
+      - '@types/react'
+      - graphql-ws
+      - react-is
+    dev: false
+
+  /@graphiql/toolkit/0.6.0_graphql@16.6.0:
+    resolution: {integrity: sha512-mbAwbt4lw2bFp9QW3NLVmh/r/ymczlcqvXk1HfvuC7Ma4h0yzrJiQauJyh1/gF5kjqevcRSquvP/YQJSvh1u6w==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
       graphql-ws: '>= 4.5.0'
@@ -4715,11 +4746,14 @@ packages:
       - '@types/node'
     dev: false
 
-  /@graphiql/toolkit/0.6.0_graphql@16.6.0:
-    resolution: {integrity: sha512-mbAwbt4lw2bFp9QW3NLVmh/r/ymczlcqvXk1HfvuC7Ma4h0yzrJiQauJyh1/gF5kjqevcRSquvP/YQJSvh1u6w==}
+  /@graphiql/toolkit/0.8.0_graphql@16.6.0:
+    resolution: {integrity: sha512-DbMFhEKejpPzB6k8W3Mj+Rl8geXiw49USDF9Wdi06EEk1XLVh1iebDqveYY+4lViITsV4+BeGikxlqi8umfP4g==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
       graphql-ws: '>= 4.5.0'
+    peerDependenciesMeta:
+      graphql-ws:
+        optional: true
     dependencies:
       '@n1ru4l/push-pull-async-iterable-iterator': 3.2.0
       graphql: 16.6.0
@@ -8454,6 +8488,174 @@ packages:
       tslib: 2.4.1
     dev: false
 
+  /@reach/auto-id/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-ud8iPwF52RVzEmkHq1twuqGuPA+moreumUHdtgvU3sr3/15BNhwp3KyDLrKKSz0LP1r3V4pSdyF9MbYM8BoSjA==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/combobox/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-2mYvU5agOBCQBMdlM4cri+P1BbNwp05P1OuDyc33xJSNiBG7BMy4+ZSHJ0X4fyle6rHwSgCAOCLOeWV1XUYjoQ==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/auto-id': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/descendants': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/popover': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/portal': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/descendants/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-c7lUaBfjgcmKFZiAWqhG+VnXDMEhPkI4kAav/82XKZD6NVvFjsQOTH+v3tUkskrAPV44Yuch0mFW/u5Ntifr7Q==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/dialog/0.17.0_k2mvpji5i2ojml6m4ftklg47pa:
+    resolution: {integrity: sha512-AnfKXugqDTGbeG3c8xDcrQDE4h9b/vnc27Sa118oQSquz52fneUeX9MeFb5ZEiBJK8T5NJpv7QUTBIKnFCAH5A==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/portal': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      react-focus-lock: 2.9.2_hx2b44akkvgcgvvtmk7ds2qk6q
+      react-remove-scroll: 2.5.5_hx2b44akkvgcgvvtmk7ds2qk6q
+      tslib: 2.4.1
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
+  /@reach/dropdown/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-qBTIGInhxtPHtdj4Pl2XZgZMz3e37liydh0xR3qc48syu7g71sL4nqyKjOzThykyfhA3Pb3/wFgsFJKGTSdaig==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/auto-id': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/descendants': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/popover': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/listbox/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-AMnH1P6/3VKy2V/nPb4Es441arYR+t4YRdh9jdcFVrCOD6y7CQrlmxsYjeg9Ocdz08XpdoEBHM3PKLJqNAUr7A==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/auto-id': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/descendants': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/machine': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/popover': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
+  /@reach/machine/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-9EHnuPgXzkbRENvRUzJvVvYt+C2jp7PGN0xon7ffmKoK8rTO6eA/bb7P0xgloyDDQtu88TBUXKzW0uASqhTXGA==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@xstate/fsm': 1.4.0
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/menu-button/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-YyuYVyMZKamPtivoEI6D0UEILYH3qZtg4kJzEAuzPmoR/aHN66NZO75Fx0gtjG1S6fZfbiARaCOZJC0VEiDOtQ==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+      react-is: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/dropdown': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/popover': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/observe-rect/1.2.0:
+    resolution: {integrity: sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==}
+    dev: false
+
+  /@reach/popover/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-yYbBF4fMz4Ml4LB3agobZjcZ/oPtPsNv70ZAd7lEC2h7cvhF453pA+zOBGYTPGupKaeBvgAnrMjj7RnxDU5hoQ==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/portal': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/rect': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tabbable: 4.0.0
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/portal/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.4.1
+    dev: false
+
+  /@reach/rect/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-3YB7KA5cLjbLc20bmPkJ06DIfXSK06Cb5BbD2dHgKXjUkT9WjZaLYIbYCO8dVjwcyO3GCNfOmPxy62VsPmZwYA==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/observe-rect': 1.2.0
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.4.1
+    dev: false
+
   /@reach/skip-nav/0.17.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-wkkpQK3ffczzGHis6TaUvpOabuAL9n9Kh5vr4h56XPIJP3X77VcHUDk7MK3HbV1mTgamGxc9Hbd1sXKSWLu3yA==}
     peerDependencies:
@@ -8466,6 +8668,24 @@ packages:
       tslib: 2.4.1
     dev: false
 
+  /@reach/tooltip/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-HP8Blordzqb/Cxg+jnhGmWQfKgypamcYLBPlcx6jconyV5iLJ5m93qipr1giK7MqKT2wlsKWy44ZcOrJ+Wrf8w==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      '@reach/auto-id': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/portal': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/rect': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/utils': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      '@reach/visually-hidden': 0.17.0_sfoxds7t5ydpegc3knd667wn6m
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.4.1
+    dev: false
+
   /@reach/utils/0.13.2_sfoxds7t5ydpegc3knd667wn6m:
     resolution: {integrity: sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==}
     peerDependencies:
@@ -8491,6 +8711,18 @@ packages:
       tslib: 2.4.1
     dev: false
 
+  /@reach/utils/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tiny-warning: 1.0.3
+      tslib: 2.4.1
+    dev: false
+
   /@reach/visually-hidden/0.13.2_sfoxds7t5ydpegc3knd667wn6m:
     resolution: {integrity: sha512-sPZwNS0/duOuG0mYwE5DmgEAzW9VhgU3aIt1+mrfT/xiT9Cdncqke+kRBQgU708q/Ttm9tWsoHni03nn/SuPTQ==}
     peerDependencies:
@@ -8503,6 +8735,18 @@ packages:
       tslib: 2.4.1
     dev: false
 
+  /@reach/visually-hidden/0.17.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-T6xF3Nv8vVnjVkGU6cm0+kWtvliLqPAo8PcZ+WxkKacZsaHTjaZb4v1PaCcyQHmuTNT/vtTVNOJLG0SjQOIb7g==}
+    peerDependencies:
+      react: ^16.8.0 || 17.x
+      react-dom: ^16.8.0 || 17.x
+    dependencies:
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      tslib: 2.4.1
+    dev: false
+
   /@repeaterjs/repeater/3.0.4:
     resolution: {integrity: sha512-AW8PKd6iX3vAZ0vA43nOUOnbq/X5ihgU+mSXXqunMkeQADGiqw/PY0JNeYtD5sr0PAy51YPgAPbDoeapv9r8WA==}
 
@@ -9053,7 +9297,7 @@ packages:
     dev: true
     patched: true
 
-  /@theguild/buddy/0.1.0_by7lpfnfs364rrj52jl5kihtv4:
+  /@theguild/buddy/0.1.0_ryylgra5xglhidfoiaxehn22hq:
     resolution: {integrity: sha512-eaABtwy4vzvU8H+ocjph0lrCguza8vS3DKhc5gfFtHOzBimLJa9N2qYjrTJkslkoB7XNSkU6UYlSDvUJBieh+g==}
     dev: false
     patched: true
@@ -10021,6 +10265,10 @@ packages:
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
     dev: false
 
+  /@xstate/fsm/1.4.0:
+    resolution: {integrity: sha512-uTHDeu2xI5E1IFwf37JFQM31RrH7mY7877RqPBS4ZqSNUwoLDuct8AhBWaXGnVizBAYyimVwgCyGa9z/NiRhXA==}
+    dev: false
+
   /abbrev/1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -11809,10 +12057,10 @@ packages:
     resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
     engines: {node: '>=0.10.0'}
 
-  /codemirror-graphql/1.3.2_jei7j5ousrsupd5srb5vzlhguq:
-    resolution: {integrity: sha512-glwFsEVlH5TvxjSKGymZ1sNy37f3Mes58CB4fXOd0zy9+JzDL08Wti1b5ycy4vFZYghMDK1/Or/zRSjMAGtC2w==}
+  /codemirror-graphql/2.0.2_jei7j5ousrsupd5srb5vzlhguq:
+    resolution: {integrity: sha512-9c1cItR+8lG7thmTnDDQ3zI8YesNKiFCp2BnLFkYWCtdhSSuCUHebU/Vurew6ayyUl8MBCldNx3Ev66QAWM5Kw==}
     peerDependencies:
-      '@codemirror/language': ^0.20.0
+      '@codemirror/language': 6.0.0
       codemirror: ^5.65.3
       graphql: ^15.5.0 || ^16.0.0
     dependencies:
@@ -14142,10 +14390,6 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /escape-html/1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-    dev: false
-
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -14877,6 +15121,13 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: false
 
+  /focus-lock/0.11.4:
+    resolution: {integrity: sha512-LzZWJcOBIcHslQ46N3SUu/760iLPSrUtp8omM4gh9du438V2CQdks8TcOu1yvmu2C68nVOBnl1WFiKGPbQ8L6g==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.4.1
+    dev: false
+
   /focus-lock/0.8.1:
     resolution: {integrity: sha512-/LFZOIo82WDsyyv7h7oc0MJF9ACOvDRdx9rWPZ2pgMfNWu/z8hQDBtOchuB/0BVLmuFOZjV02YwUVzNsWx/EzA==}
     engines: {node: '>=10'}
@@ -15418,29 +15669,27 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
-  /graphiql/1.7.2_4acpsgwrblrf7yma4ztoevvkgq:
-    resolution: {integrity: sha512-ZgWBMQgDSDzVHwAOKUqG+ZL6jTmglGiH96o4qKnmpgfk+JDrrJpiEFEJbEhk8D/ZkKuXO9EZBrSfbGz3aoKerQ==}
+  /graphiql/2.2.0_yw6veynvoxc2n44gl6g5u6zfru:
+    resolution: {integrity: sha512-w1ujpCKMlkwkoUjeg0HpRiBBTm1WHAjHNkFv1TbMu6trjzz63mQ48GLZlmyQY1yhwmc+diCcvmmAt+AyvKLWWA==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@graphiql/toolkit': 0.4.5_graphql@16.6.0
-      codemirror: 5.65.9
-      codemirror-graphql: 1.3.2_jei7j5ousrsupd5srb5vzlhguq
-      copy-to-clipboard: 3.3.2
-      dset: 3.1.2
+      '@graphiql/react': 0.15.0_yw6veynvoxc2n44gl6g5u6zfru
+      '@graphiql/toolkit': 0.8.0_graphql@16.6.0
       entities: 2.2.0
-      escape-html: 1.0.3
       graphql: 16.6.0
-      graphql-language-service: 5.0.6_graphql@16.6.0
+      graphql-language-service: 5.1.0_graphql@16.6.0
       markdown-it: 12.3.2
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
     transitivePeerDependencies:
       - '@codemirror/language'
       - '@types/node'
+      - '@types/react'
       - graphql-ws
+      - react-is
     dev: false
 
   /graphlib/2.1.8:
@@ -15614,6 +15863,17 @@ packages:
       vscode-languageserver-types: 3.17.2
     dev: false
 
+  /graphql-language-service/5.1.0_graphql@16.6.0:
+    resolution: {integrity: sha512-APffigZ/l2me6soek+Yq5Us3HBwmfw4vns4QoqsTePXkK3knVO8rn0uAC6PmTyglb1pmFFPbYaRIzW4wmcnnGQ==}
+    hasBin: true
+    peerDependencies:
+      graphql: ^15.5.0 || ^16.0.0
+    dependencies:
+      graphql: 16.6.0
+      nullthrows: 1.1.1
+      vscode-languageserver-types: 3.17.2
+    dev: false
+
   /graphql-modules/2.0.0:
     resolution: {integrity: sha512-CM5CIJp428+ripgcLyrioBmAKB3ucvIEOgJG4WMjnOgScHY/eCZh/8I51cF8oc+pqebOgBCR3HH//IH5v7kv+w==}
     peerDependencies:
@@ -16553,10 +16813,22 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /is-plain-object/2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: false
+
   /is-plain-object/5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
 
+  /is-primitive/3.0.1:
+    resolution: {integrity: sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /is-reference/3.0.0:
     resolution: {integrity: sha512-Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==}
     dependencies:
@@ -21687,6 +21959,25 @@ packages:
       - '@types/react'
     dev: false
 
+  /react-focus-lock/2.9.2_hx2b44akkvgcgvvtmk7ds2qk6q:
+    resolution: {integrity: sha512-5JfrsOKyA5Zn3h958mk7bAcfphr24jPoMoznJ8vaJF6fUrPQ8zrtEd3ILLOK8P5jvGxdMd96OxWNjDzATfR2qw==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.4
+      '@types/react': 17.0.45
+      focus-lock: 0.11.4
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-clientside-effect: 1.2.6_react@17.0.2
+      use-callback-ref: 1.3.0_hx2b44akkvgcgvvtmk7ds2qk6q
+      use-sidecar: 1.1.2_hx2b44akkvgcgvvtmk7ds2qk6q
+    dev: false
+
   /react-icons/4.3.1_react@17.0.2:
     resolution: {integrity: sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==}
     peerDependencies:
@@ -22756,6 +23047,14 @@ packages:
     engines: {node: '>=6.9'}
     dev: false
 
+  /set-value/4.1.0:
+    resolution: {integrity: sha512-zTEg4HL0RwVrqcWs3ztF+x1vkxfm0lP+MQQFPiMJTKVceBwEV0A569Ou8l9IYQG8jOZdMVI1hGsc0tmeD2o/Lw==}
+    engines: {node: '>=11.0'}
+    dependencies:
+      is-plain-object: 2.0.4
+      is-primitive: 3.0.1
+    dev: false
+
   /setimmediate/1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
 
@@ -23663,6 +23962,10 @@ packages:
       tslib: 2.4.1
     dev: true
 
+  /tabbable/4.0.0:
+    resolution: {integrity: sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==}
+    dev: false
+
   /tabbable/6.0.1:
     resolution: {integrity: sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==}
     dev: false