+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+ {tokens.map((line, i) => (
+
+ {line.map((token, key) => (
+
+ ))}
+
+ ))}
+
+ )}
+
+ );
+};
diff --git a/apps/lockfile-explorer-web/src/containers/PackageJsonViewer/index.tsx b/apps/lockfile-explorer-web/src/containers/PackageJsonViewer/index.tsx
index b7588f360a7..a0be0ebd7c3 100644
--- a/apps/lockfile-explorer-web/src/containers/PackageJsonViewer/index.tsx
+++ b/apps/lockfile-explorer-web/src/containers/PackageJsonViewer/index.tsx
@@ -2,8 +2,8 @@
// See LICENSE in the project root for license information.
import React, { useCallback, useEffect, useState } from 'react';
+
import { readPnpmfileAsync, readPackageSpecAsync, readPackageJsonAsync } from '../../helpers/lfxApiClient';
-import styles from './styles.scss';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { selectCurrentEntry } from '../../store/slices/entrySlice';
import type { IPackageJson } from '../../types/IPackageJson';
@@ -13,6 +13,9 @@ import { displaySpecChanges } from '../../helpers/displaySpecChanges';
import { isEntryModified } from '../../helpers/isEntryModified';
import { ScrollArea, Tabs, Text } from '@rushstack/rush-themed-ui';
import { LfxGraphEntryKind } from '../../packlets/lfx-shared';
+import { CodeBox } from './CodeBox';
+
+import styles from './styles.scss';
const PackageView: { [key: string]: string } = {
PACKAGE_JSON: 'PACKAGE_JSON',
@@ -48,9 +51,9 @@ export const PackageJsonViewer = (): JSX.Element => {
useEffect(() => {
async function loadPackageDetailsAsync(packageName: string): Promise