improve barrel import

apps/app/src/client/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -1,8 +1,8 @@
-import React, { type JSX, useCallback, useEffect } from 'react';
+import { type JSX, useCallback, useEffect } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
-import { PrismAsyncLight } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import PrismAsyncLight from 'react-syntax-highlighter/dist/esm/prism-async-light';
+import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';

apps/app/src/client/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -1,8 +1,8 @@
 import React, { type JSX, useCallback, useEffect } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
-import { PrismAsyncLight } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import PrismAsyncLight from 'react-syntax-highlighter/dist/esm/prism-async-light';
+import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';

apps/app/src/client/components/PageEditor/Cheatsheet.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'react';
 import { useTranslation } from 'next-i18next';
-import { PrismAsyncLight } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import PrismAsyncLight from 'react-syntax-highlighter/dist/esm/prism-async-light';
+import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
 
 export const Cheatsheet = (): JSX.Element => {
   const { t } = useTranslation();

apps/app/src/components/ReactMarkdownComponents/PrismHighlighter.tsx

@@ -1,6 +1,6 @@
 import type { JSX, ReactNode } from 'react';
-import { PrismAsyncLight } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import PrismAsyncLight from 'react-syntax-highlighter/dist/esm/prism-async-light';
+import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
 
 // Remove font-family to use the page's default monospace font
 Object.entries<object>(oneDark).forEach(([key, value]) => {