fix: force prism as external dep

packages/ui/src/codeblock/index.tsx

@@ -6,7 +6,7 @@ export type CodeBlockProps = HighlighterProps & BoxProps;
 
 export const CodeBlock = React.forwardRef(
   (
-    { code, showLineNumbers, hideLineHover, style = {}, language, ...rest }: CodeBlockProps,
+    { code, showLineNumbers, hideLineHover, style = {}, language, Prism, ...rest }: CodeBlockProps,
     ref: React.Ref<HTMLDivElement>
   ) => (
     <Box
@@ -29,6 +29,7 @@ export const CodeBlock = React.forwardRef(
         code={code.toString().trim()}
         showLineNumbers={showLineNumbers}
         hideLineHover={hideLineHover}
+        Prism={Prism}
       />
     </Box>
   )

packages/ui/src/highlighter/clarity.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import Prism from 'prismjs';
 
 (function (Prism) {
   // Functions to construct regular expressions
@@ -112,4 +111,4 @@ buff|hash160|sha256|sha512|sha512/256|keccak256|true|false|none)' +
   };
 
   Prism.languages.clarity = language;
-})(Prism);
+});

packages/ui/src/highlighter/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Prism from 'prismjs';
 import Highlight from 'prism-react-renderer';
 import { Box } from '../box';
 import { Flex } from '../flex';
@@ -122,16 +121,30 @@ const Lines = ({
     </Box>
   );
 };
+type PrismToken = {
+  type: string;
+  content: (PrismToken | string)[] | string;
+};
+type PrismGrammar = {
+  [key: string]: any;
+};
+type LanguageDict = { [lang in Language]: PrismGrammar };
+type PrismLib = {
+  languages: LanguageDict;
+  tokenize: (code: string, grammar: PrismGrammar, language: Language) => PrismToken[] | string[];
+  highlight: (code: string, grammar: PrismGrammar, language: Language) => string;
+};
 
 export interface HighlighterProps {
   code: string;
   language?: Language;
   showLineNumbers?: boolean;
   hideLineHover?: boolean;
+  Prism: PrismLib;
 }
 
 export const Highlighter = React.memo(
-  ({ code, language = 'clarity', showLineNumbers, hideLineHover }: HighlighterProps) => {
+  ({ code, language = 'clarity', showLineNumbers, hideLineHover, Prism }: HighlighterProps) => {
     return (
       <Highlight theme={theme} code={code} language={language as any} Prism={Prism as any}>
         {props => (