scoobie 14.3.2 → 14.3.4

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "14.3.2",
+  "version": "14.3.4",
   "dependencies": {
     "@capsizecss/core": "^3.0.0",
     "@mdx-js/loader": "^1.6.22",
@@ -18,7 +18,7 @@
     "fs-extra": "^11.0.0",
     "jsonc-parser": "^3.0.0",
     "polished": "^4.1.3",
-    "prism-react-renderer": "1.3.5",
+    "prism-react-renderer": "2.0.4",
     "react-keyed-flatten-children": "^1.3.0",
     "refractor": "^3.4.0",
     "remark-slug": "^6.1.0",
@@ -41,7 +41,7 @@
     "react-helmet-async": "1.3.0",
     "react-router-dom": "6.9.0",
     "semantic-release": "21.0.0",
-    "sku": "11.11.0",
+    "sku": "11.12.0",
     "webpack": "5.76.3"
   },
   "files": [

package/src/components/CodeBlock/Lines.tsx

@@ -1,11 +1,13 @@
 import { Box, Stack } from 'braid-design-system';
-import type Highlight from 'prism-react-renderer';
+import type { Highlight } from 'prism-react-renderer';
 import React from 'react';
 
 import type { Size } from '../../private/size';
 
 import { code } from '../../../styles/code.css';
 
+type Highlight = Parameters<Parameters<typeof Highlight>[0]['children']>[0];
+
 type Token = Parameters<Highlight['getTokenProps']>[0]['token'];
 
 interface Props {

package/src/components/CodeBlock.tsx

@@ -1,9 +1,9 @@
 import { Box, Stack, Text, TextLinkButton } from 'braid-design-system';
 import { parse } from 'jsonc-parser';
-import Highlight from 'prism-react-renderer';
+import { Highlight } from 'prism-react-renderer';
 import React, { useState } from 'react';
 
-import { Prism, prismTheme } from '../private/Prism';
+import { Prism, themes } from '../private/Prism';
 import { ScrollableInline } from '../private/ScrollableInline';
 import {
   DEFAULT_SIZE,
@@ -117,10 +117,10 @@ export const CodeBlock = ({
 
       <Box borderRadius="large" className={styles.codeContainer}>
         <Highlight
-          Prism={Prism}
+          prism={Prism}
           code={child.code}
           language={child.language}
-          theme={prismTheme}
+          theme={themes.github}
         >
           {({ getTokenProps, tokens }) => (
             <Box display="flex">

package/src/private/ExternalTextLink.tsx

@@ -16,6 +16,7 @@ export const ExternalTextLink = ({ children, href, icon, title }: Props) => (
     target="_blank"
     title={title}
   >
-    {children} <IconNewWindow alignY="lowercase" />
+    {children}&nbsp;
+    <IconNewWindow alignY="lowercase" />
   </TextLink>
 );

package/src/private/Prism.ts

@@ -1,4 +1,4 @@
-import { type Language, Prism } from 'prism-react-renderer';
+import { Prism } from 'prism-react-renderer';
 // @ts-ignore
 import csharpLang from 'refractor/lang/csharp';
 // @ts-ignore
@@ -11,9 +11,9 @@ httpLang(Prism);
 splunkSplLang(Prism);
 
 export { Prism } from 'prism-react-renderer';
-export { default as prismTheme } from 'prism-react-renderer/themes/github';
+export { themes } from 'prism-react-renderer';
 
-const DEFAULT_LANGUAGE = 'text' as Language;
+const DEFAULT_LANGUAGE = 'text';
 
 const DISPLAY_LANGUAGE_REPLACEMENTS: Record<string, string> = {
   'splunk-spl': 'Splunk SPL',
@@ -64,7 +64,7 @@ export const prismLanguage = (language?: string) => {
   const lower = (language ?? DEFAULT_LANGUAGE).toLocaleLowerCase();
 
   // This type is pointless. We extend it and there is a fallback anyway.
-  return (PRISM_LANGUAGE_REPLACEMENTS[lower] ?? lower) as Language;
+  return PRISM_LANGUAGE_REPLACEMENTS[lower] ?? lower;
 };
 
 export const displayLanguage = (language?: string) => {