fix: build and types

package.json

@@ -40,5 +40,12 @@
     "html-parse-stringify": "html-parse-stringify/dist/html-parse-stringify.module.js",
     "react-hook-form": "react-hook-form/dist/index.esm.mjs",
     "superstruct": "superstruct/lib/index.es.js"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "react": "^18.0.0"
+      }
+    }
   }
 }

packages/console/package.json

@@ -23,7 +23,7 @@
     "@logto/react": "^1.0.0-beta.0",
     "@logto/schemas": "^1.0.0-beta.3",
     "@logto/shared": "^1.0.0-beta.3",
-    "@mdx-js/react": "^2.1.2",
+    "@mdx-js/react": "^1.6.22",
     "@parcel/core": "2.6.2",
     "@parcel/transformer-mdx": "2.6.2",
     "@parcel/transformer-sass": "2.6.2",
@@ -77,7 +77,7 @@
     "recharts": "^2.1.13",
     "remark-gfm": "^3.0.1",
     "stylelint": "^14.9.1",
-    "swr": "^1.2.2",
+    "swr": "^1.3.0",
     "typescript": "^4.7.4",
     "zod": "^3.14.3"
   },

packages/console/src/assets/index.d.ts

@@ -1,4 +1,4 @@
-interface SvgComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+interface SvgComponent extends React.FunctionComponent<React.SVGAttributes<SVGElement>> {}
 
 declare module '*.svg' {
   const value: SvgComponent;

packages/console/src/components/AppBoundary/index.tsx

@@ -7,7 +7,7 @@ import initI18n from '@/i18n/init';
 import * as styles from './index.module.scss';
 
 type Props = {
-  children?: ReactNode;
+  children: ReactNode;
 };
 
 const AppBoundary = ({ children }: Props) => {

packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx

@@ -31,8 +31,8 @@ const Contact = ({ isOpen, onCancel }: Props) => {
                 <ContactIcon />
               </div>
               <div className={styles.text}>
-                <div className={styles.title}>{t(title)}</div>
+                <div className={styles.title}>{String(t(title))}</div>
-                <div className={styles.description}>{t(description)}</div>
+                <div className={styles.description}>{String(t(description))}</div>
               </div>
               <div>
                 <Button

packages/console/src/components/Button/index.tsx

@@ -82,7 +82,7 @@ const Button = ({
     >
       {showSpinner && <Spinner className={styles.spinner} />}
       {icon && <span className={styles.icon}>{icon}</span>}
-      {title && (typeof title === 'string' ? <span>{t(title)}</span> : title)}
+      {title && (typeof title === 'string' ? <span>{String(t(title))}</span> : title)}
     </button>
   );
 };

packages/console/src/components/CardTitle/index.tsx

@@ -20,10 +20,10 @@ const CardTitle = ({ title, subtitle, size = 'large' }: Props) => {
 
   return (
     <div className={classNames(styles.container, styles[size])}>
-      <div className={styles.title}>{typeof title === 'string' ? t(title) : title}</div>
+      <div className={styles.title}>{typeof title === 'string' ? String(t(title)) : title}</div>
       {subtitle && (
         <div className={styles.subtitle}>
-          {typeof subtitle === 'string' ? t(subtitle) : subtitle}
+          {typeof subtitle === 'string' ? String(t(subtitle)) : subtitle}
         </div>
       )}
     </div>

packages/console/src/components/Dropdown/DropdownItem.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
-import { MouseEvent } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 
 import * as styles from './DropdownItem.module.scss';
 
 type Props = {
   onClick?: (event: MouseEvent<HTMLLIElement>) => void;
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode | Record<string, unknown>;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   iconClassName?: string;
   type?: 'default' | 'danger';
 };
@@ -22,7 +22,7 @@ const DropdownItem = ({
 }: Props) => (
   <li className={classNames(styles.item, styles[type], className)} onClick={onClick}>
     {icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
-    {children}
+    {React.isValidElement(children) ? children : String(children)}
   </li>
 );
 

packages/console/src/components/FormField/index.tsx

@@ -25,7 +25,7 @@ const FormField = ({ title, children, isRequired, className, tooltip }: Props) =
   return (
     <div className={classNames(styles.field, className)}>
       <div className={styles.headline}>
-        <div className={styles.title}>{typeof title === 'string' ? t(title) : title}</div>
+        <div className={styles.title}>{typeof title === 'string' ? String(t(title)) : title}</div>
         {tooltip && (
           <div ref={tipRef} className={styles.icon}>
             <Tip />

packages/console/src/components/LinkButton/index.tsx

@@ -20,7 +20,7 @@ const LinkButton = ({ to, title, icon, className }: Props) => {
   return (
     <Link to={to} className={classNames(styles.linkButton, className)}>
       {icon}
-      {typeof title === 'string' ? <span>{t(title)}</span> : title}
+      {typeof title === 'string' ? <span>{String(t(title))}</span> : title}
     </Link>
   );
 };

packages/console/src/components/RadioGroup/Radio.tsx

@@ -76,9 +76,9 @@ const Radio = ({
       {type === 'card' && <Check />}
       {children}
       {type === 'plain' && <div className={styles.indicator} />}
-      {title && t(title)}
+      {title && String(t(title))}
       {isDisabled && disabledLabel && (
-        <div className={styles.disabledLabel}>{t(disabledLabel)}</div>
+        <div className={styles.disabledLabel}>{String(t(disabledLabel))}</div>
       )}
     </div>
   );

packages/console/src/components/Tooltip/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactNode, RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { ReactNode, RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import usePosition, { HorizontalAlignment } from '@/hooks/use-position';
@@ -7,7 +7,7 @@ import usePosition, { HorizontalAlignment } from '@/hooks/use-position';
 import * as styles from './index.module.scss';
 
 type Props = {
-  content: ReactNode;
+  content: ReactNode | Record<string, unknown>;
   anchorRef: RefObject<Element>;
   className?: string;
   isKeepOpen?: boolean;
@@ -131,7 +131,9 @@ const Tooltip = ({
       )}
       style={{ ...position }}
     >
-      <div className={styles.content}>{content}</div>
+      <div className={styles.content}>
+        {React.isValidElement(content) ? content : String(content)}
+      </div>
     </div>,
     tooltipDom
   );

packages/console/src/hooks/use-user-preferences.ts

@@ -70,7 +70,7 @@ const useUserPreferences = () => {
 
   return {
     isLoading: !data && !error,
-    isLoaded: data && !error,
+    isLoaded: Boolean(data && !error),
     data: userPreferences,
     update,
     error,

packages/console/src/mdx-components/DetailsSummary/index.tsx

@@ -7,11 +7,11 @@ import ArrowRight from '@/assets/images/triangle-right.svg';
 import * as styles from './index.module.scss';
 
 type Props = {
-  children: ReactNode[];
+  children?: ReactNode[] | ReactNode;
 };
 
 const DetailsSummary = ({ children }: Props) => {
-  const [summary, details] = children;
+  const [summary, details] = Array.isArray(children) ? children : [children];
   const [isExpanded, setIsExpanded] = useState(false);
   const [height, setHeight] = useState<Height>(0);
 

packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx

@@ -48,7 +48,7 @@ const ConnectorTabs = ({ target, connectorId }: Props) => {
               <ConnectorPlatformIcon platform={connector.platform} />
             </div>
           )}
-          {connector.platform && t(connectorPlatformLabel[connector.platform])}
+          {connector.platform && String(t(connectorPlatformLabel[connector.platform]))}
         </Link>
       ))}
     </div>

packages/console/src/pages/Connectors/components/ConnectorName/index.tsx

@@ -34,7 +34,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
       <ItemPreview
         title={
           <div className={styles.previewTitle}>
-            <div>{t(connectorTitlePlaceHolder[type])}</div>
+            <div>{String(t(connectorTitlePlaceHolder[type]))}</div>
             {type !== ConnectorType.Social && (
               <Button title="general.set_up" onClick={onClickSetup} />
             )}
@@ -63,7 +63,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
                     platform && (
                       <div key={id} className={styles.platform}>
                         <ConnectorPlatformIcon platform={platform} />
-                        {t(`${connectorPlatformLabel[platform]}`)}
+                        {String(t(`${connectorPlatformLabel[platform]}`))}
                       </div>
                     )
                 )}

packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx

@@ -36,7 +36,7 @@ const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
       <td>
         <ConnectorName type={type} connectors={connectors} onClickSetup={onClickSetup} />
       </td>
-      <td>{t(connectorTitlePlaceHolder[type])}</td>
+      <td>{String(t(connectorTitlePlaceHolder[type]))}</td>
       <td>
         {inUse !== undefined && (
           <Status status={inUse ? 'enabled' : 'disabled'}>

packages/console/src/pages/Connectors/components/CreateForm/index.tsx

@@ -99,7 +99,7 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
         onClose={onClose}
       >
         {isLoading && 'Loading...'}
-        {error && error}
+        {error?.message}
         {groups && (
           <RadioGroup name="group" value={activeGroupId} type="card" onChange={handleGroupChange}>
             {groups.map(({ id, name, logo, description, connectors }) => (

packages/console/src/pages/Dashboard/components/Block.tsx

@@ -29,7 +29,7 @@ const Block = ({ variant = 'default', count, delta, title, tooltip }: Props) =>
   return (
     <Card className={classNames(styles.block, styles[variant])}>
       <div className={styles.title}>
-        {t(title)}
+        {String(t(title))}
         {tooltip && (
           <div ref={tipRef} className={styles.icon}>
             <Tip />

packages/console/src/pages/GetStarted/index.tsx

@@ -53,8 +53,8 @@ const GetStarted = () => {
             {!isComplete && <CardIcon className={styles.icon} />}
             {isComplete && <CompleteIndicator className={styles.icon} />}
             <div className={styles.wrapper}>
-              <div className={styles.title}>{t(title)}</div>
+              <div className={styles.title}>{Boolean(t(title))}</div>
-              <div className={styles.subtitle}>{t(subtitle)}</div>
+              <div className={styles.subtitle}>{Boolean(t(subtitle))}</div>
             </div>
             <Button
               className={styles.button}

packages/demo-app/src/App.tsx

@@ -62,17 +62,17 @@ const Main = () => {
     <div className={styles.app}>
       <div className={styles.card}>
         {congratsIcon && <img src={congratsIcon} alt="Congrats" />}
-        <div className={styles.title}>{t('title')}</div>
+        <div className={styles.title}>{String(t('title'))}</div>
-        <div className={styles.text}>{t('subtitle')}</div>
+        <div className={styles.text}>{String(t('subtitle'))}</div>
         <div className={styles.infoCard}>
           {user.username && (
             <div>
-              {t('username')}
+              {String(t('username'))}
               <span>{user.username}</span>
             </div>
           )}
           <div>
-            {t('user_id')}
+            {String(t('user_id'))}
             <span>{user.sub}</span>
           </div>
         </div>
@@ -80,7 +80,7 @@ const Main = () => {
           className={styles.button}
           onClick={async () => signOut(`${window.location.origin}/demo-app`)}
         >
-          {t('sign_out')}
+          {String(t('sign_out'))}
         </div>
       </div>
     </div>

packages/integration-tests/package.json

@@ -37,12 +37,5 @@
   "eslintConfig": {
     "extends": "@silverhand"
   },
-  "prettier": "@silverhand/eslint-config/.prettierrc",
+  "prettier": "@silverhand/eslint-config/.prettierrc"
-  "pnpm": {
-    "peerDependencyRules": {
-      "allowedVersions": {
-        "@mdx-js/react": "2.1.2"
-      }
-    }
-  }
 }

packages/ui/src/assets/index.d.ts

@@ -1,4 +1,4 @@
-interface SvgComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+interface SvgComponent extends React.FunctionComponent<React.SVGAttributes<SVGElement>> {}
 
 declare module '@/assets/icons/*.svg' {
   const value: SvgComponent;

packages/ui/src/components/Button/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import * as styles from './index.module.scss';
 
@@ -7,7 +7,7 @@ export type Props = {
   htmlType?: 'button' | 'submit' | 'reset';
   isDisabled?: boolean;
   className?: string;
-  children: ReactNode;
+  children: ReactNode | Record<string, unknown>;
   type?: 'primary' | 'secondary' | 'outline';
   size?: 'small' | 'large';
   onClick?: React.MouseEventHandler;
@@ -34,7 +34,7 @@ const Button = ({
     type={htmlType}
     onClick={onClick}
   >
-    {children}
+    {React.isValidElement(children) ? children : String(children)}
   </button>
 );
 

packages/ui/src/components/Divider/index.tsx

@@ -14,7 +14,7 @@ const Divider = ({ className, label }: Props) => {
   return (
     <div className={classNames(styles.divider, className)}>
       <i className={styles.line} />
-      {label && t(label)}
+      {label && String(t(label))}
       <i className={styles.line} />
     </div>
   );

packages/ui/src/components/TextLink/index.tsx

@@ -19,14 +19,14 @@ const TextLink = ({ className, children, text, type = 'primary', to, ...rest }:
   if (to) {
     return (
       <Link className={classNames(styles.link, styles[type], className)} to={to}>
-        {children ?? (text ? t(text) : '')}
+        {children ?? (text ? String(t(text)) : '')}
       </Link>
     );
   }
 
   return (
     <a className={classNames(styles.link, styles[type], className)} {...rest} rel="noreferrer">
-      {children ?? (text ? t(text) : '')}
+      {children ?? (text ? String(t(text)) : '')}
     </a>
   );
 };

packages/ui/src/hooks/use-bind-social.ts

@@ -23,7 +23,7 @@ const useBindSocial = () => {
   );
 
   const bindRelatedUserHandler = useCallback(
-    (connectorId) => {
+    (connectorId: string) => {
       void asyncBindSocialRelatedUser(connectorId);
     },
     [asyncBindSocialRelatedUser]

packages/ui/src/pages/ErrorPage/index.tsx

@@ -24,8 +24,8 @@ const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Pro
       <NavBar />
       <div className={styles.container}>
         <ErrorImage />
-        <div className={styles.title}>{t(title)}</div>
+        <div className={styles.title}>{String(t(title))}</div>
-        {errorMessage && <div className={styles.message}>{errorMessage}</div>}
+        {errorMessage && <div className={styles.message}>{String(errorMessage)}</div>}
       </div>
       <Button
         className={styles.backButton}

pnpm-lock.yaml

@@ -782,7 +782,7 @@ importers:
       '@logto/react': ^1.0.0-beta.0
       '@logto/schemas': ^1.0.0-beta.3
       '@logto/shared': ^1.0.0-beta.3
-      '@mdx-js/react': ^2.1.2
+      '@mdx-js/react': ^1.6.22
       '@parcel/core': 2.6.2
       '@parcel/transformer-mdx': 2.6.2
       '@parcel/transformer-sass': 2.6.2
@@ -836,7 +836,7 @@ importers:
       recharts: ^2.1.13
       remark-gfm: ^3.0.1
       stylelint: ^14.9.1
-      swr: ^1.2.2
+      swr: ^1.3.0
       typescript: ^4.7.4
       zod: ^3.14.3
     devDependencies:
@@ -846,9 +846,9 @@ importers:
       '@logto/react': 1.0.0-beta.0_react@18.2.0
       '@logto/schemas': link:../schemas
       '@logto/shared': link:../shared
-      '@mdx-js/react': 2.1.2_react@18.2.0
+      '@mdx-js/react': 1.6.22_react@18.2.0
       '@parcel/core': 2.6.2
-      '@parcel/transformer-mdx': 2.6.2_6on4ch7ldmuyqgtyiquyfzuvzi
+      '@parcel/transformer-mdx': 2.6.2_vink6i55tfbj7e5e3upc7yifsu
       '@parcel/transformer-sass': 2.6.2_@parcel+core@2.6.2
       '@parcel/transformer-svg-react': 2.6.2_@parcel+core@2.6.2
       '@silverhand/eslint-config': 1.0.0-rc.2_swk2g7ygmfleszo5c33j4vooni
@@ -900,7 +900,7 @@ importers:
       recharts: 2.1.13_v2m5e27vhdewzwhryxwfaorcca
       remark-gfm: 3.0.1
       stylelint: 14.9.1
-      swr: 1.2.2_react@18.2.0
+      swr: 1.3.0_react@18.2.0
       typescript: 4.7.4
       zod: 3.14.3
 
@@ -3156,7 +3156,7 @@ packages:
   /@logto/react/1.0.0-beta.0_react@18.2.0:
     resolution: {integrity: sha512-K6tg8iYl0XEdvr06+mATSkg2VlFbtwlH63317w4VuDNMDPZVGnr/vGBkFjS97sflz13IAZNYfk7mKWEiJsP8BA==}
     peerDependencies:
-      react: '>=16.8.0'
+      react: '>=16.8.0 || ^18.0.0'
     dependencies:
       '@logto/browser': 1.0.0-beta.0
       '@silverhand/essentials': 1.1.7
@@ -3207,13 +3207,11 @@ packages:
       - supports-color
     dev: true
 
-  /@mdx-js/react/2.1.2_react@18.2.0:
+  /@mdx-js/react/1.6.22_react@18.2.0:
-    resolution: {integrity: sha512-52e3DTJBrjsw3U51ZCdZ3N1IBaqnbzLIngCSXpKtiYiGr7PIqp3/P/+kym0MPTwBL/y9ZBmCieD8FyrXuEDrRw==}
+    resolution: {integrity: sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==}
     peerDependencies:
-      react: '>=16'
+      react: ^16.13.1 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@types/mdx': 2.0.1
-      '@types/react': 18.0.15
       react: 18.2.0
     dev: true
 
@@ -4217,14 +4215,14 @@ packages:
       - '@parcel/core'
     dev: true
 
-  /@parcel/transformer-mdx/2.6.2_6on4ch7ldmuyqgtyiquyfzuvzi:
+  /@parcel/transformer-mdx/2.6.2_vink6i55tfbj7e5e3upc7yifsu:
     resolution: {integrity: sha512-1IwMN2CA0N9eSAR5IpgOnMBo3oiUEzR8krY4XFMPy27Vy/4BtVbHFR7B95t68aF6Spwet0eysdwUNUS/uXMx8g==}
     engines: {node: '>= 12.0.0', parcel: ^2.6.2}
     peerDependencies:
       '@mdx-js/react': ^1.6.22
     dependencies:
       '@mdx-js/mdx': 1.6.22
-      '@mdx-js/react': 2.1.2_react@18.2.0
+      '@mdx-js/react': 1.6.22_react@18.2.0
       '@parcel/plugin': 2.6.2_@parcel+core@2.6.2
     transitivePeerDependencies:
       - '@parcel/core'
@@ -13071,7 +13069,7 @@ packages:
     resolution: {integrity: sha512-k+mBS8yCzpFp+7BdrHsL5bXd6CO/2bYO2SvRGKfxK+Ss3nzplAJLlgnd6Zhcxe/avdpy/CgcziicFj7pIHgG5g==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
-      react: '>=16.8.0'
+      react: '>=16.8.0 || ^18.0.0'
       react-dom: '>=16.8.0'
     dependencies:
       classnames: 2.3.1
@@ -13102,7 +13100,7 @@ packages:
       '@types/hoist-non-react-statics': '>= 3.3.1'
       '@types/node': '>= 12'
       '@types/react': '>= 16'
-      react: '>= 16.14'
+      react: '>= 16.14 || ^18.0.0'
     peerDependenciesMeta:
       '@types/hoist-non-react-statics':
         optional: true
@@ -13123,7 +13121,7 @@ packages:
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
-      react: ^18.2.0
+      react: ^18.2.0 || ^18.0.0
     dependencies:
       loose-envify: 1.4.0
       react: 18.2.0
@@ -13138,7 +13136,7 @@ packages:
     resolution: {integrity: sha512-s0/TJ09NVlEk2JPp3yit1WnMuPNBXFmUKEQPulgDi9pYBw/ZmmAFHe6AXWq73Y+kp8ye4OcMf0Jv+i/qLPektg==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
-      react: ^16.8.0 || ^17 || ^18
+      react: ^16.8.0 || ^17 || ^18 || ^18.0.0
     dependencies:
       react: 18.2.0
     dev: true
@@ -13147,7 +13145,7 @@ packages:
     resolution: {integrity: sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==}
     engines: {node: '>=10'}
     peerDependencies:
-      react: '>=16'
+      react: '>=16 || ^18.0.0'
       react-dom: '>=16'
     dependencies:
       goober: 2.1.8_csstype@3.0.11
@@ -13161,7 +13159,7 @@ packages:
     resolution: {integrity: sha512-jKJNAcVcbPGK+yrTcXhLblgPY16n6NbpZZL3Mk8nswj1v3ayIiUBVDU09SgqnT+DluyQBS97hwSvPU5yVFG0yg==}
     peerDependencies:
       i18next: '>= 19.0.0'
-      react: '>= 16.8.0'
+      react: '>= 16.8.0 || ^18.0.0'
       react-dom: '*'
       react-native: '*'
     peerDependenciesMeta:
@@ -13197,7 +13195,7 @@ packages:
     resolution: {integrity: sha512-qbrWpLny6Ef2xHqnYqtot948LXP+4FtC+MWIuaN1kvSnowM+r1qEeEHpSaU0TDBOisQuj+Qe6eFY15cNL3gLAw==}
     peerDependencies:
       '@types/react': '>=16'
-      react: '>=16'
+      react: '>=16 || ^18.0.0'
     dependencies:
       '@types/hast': 2.3.4
       '@types/react': 18.0.15
@@ -13233,7 +13231,7 @@ packages:
     resolution: {integrity: sha512-duB9bxOaYg7Zt6TMFldIFxQRtSP+Dg3F1ZX3FXxSUn+3tZZ/9JCgeAQKDg7rhZSAqopq8TFRw3yIbnx77gyFTw==}
     engines: {node: '>=8'}
     peerDependencies:
-      react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+      react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^18.0.0
       react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
     dependencies:
       exenv: 1.2.2
@@ -13247,7 +13245,7 @@ packages:
   /react-paginate/8.1.3_react@18.2.0:
     resolution: {integrity: sha512-zBp80DBRcaeBnAeHUfbGKD0XHfbGNUolQ+S60Ymfs8o7rusYaJYZMAt1j93ADDNLlzRmJ0tMF/NeTlcdKf7dlQ==}
     peerDependencies:
-      react: ^16 || ^17 || ^18
+      react: ^16 || ^17 || ^18 || ^18.0.0
     dependencies:
       prop-types: 15.8.1
       react: 18.2.0
@@ -13284,7 +13282,7 @@ packages:
   /react-router-dom/6.3.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
     peerDependencies:
-      react: '>=16.8'
+      react: '>=16.8 || ^18.0.0'
       react-dom: '>=16.8'
     dependencies:
       history: 5.3.0
@@ -13305,7 +13303,7 @@ packages:
   /react-router/6.3.0_react@18.2.0:
     resolution: {integrity: sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==}
     peerDependencies:
-      react: '>=16.8'
+      react: '>=16.8 || ^18.0.0'
     dependencies:
       history: 5.3.0
       react: 18.2.0
@@ -13333,7 +13331,7 @@ packages:
   /react-syntax-highlighter/15.5.0_react@18.2.0:
     resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
     peerDependencies:
-      react: '>= 0.14.0'
+      react: '>= 0.14.0 || ^18.0.0'
     dependencies:
       '@babel/runtime': 7.17.9
       highlight.js: 10.7.3
@@ -13356,7 +13354,7 @@ packages:
   /react-transition-group/2.9.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==}
     peerDependencies:
-      react: '>=15.0.0'
+      react: '>=15.0.0 || ^18.0.0'
       react-dom: '>=15.0.0'
     dependencies:
       dom-helpers: 3.4.0
@@ -14719,8 +14717,8 @@ packages:
       stable: 0.1.8
     dev: true
 
-  /swr/1.2.2_react@18.2.0:
+  /swr/1.3.0_react@18.2.0:
-    resolution: {integrity: sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==}
+    resolution: {integrity: sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0
     dependencies: