chore(dev-deps): bump react-md to v4.0.0

Author: mlaursen

components/ErrorHeader.tsx

@@ -5,7 +5,7 @@ import {
   FileSizeError,
   isFileSizeError,
   isTooManyFilesError,
-  Text,
+  Typography,
   TooManyFilesError,
 } from "react-md";
 
@@ -19,32 +19,32 @@ export function ErrorHeader({ error }: ErrorHeaderProps): ReactElement {
     const limit = filesize(error.limit);
     if (type === "total") {
       return (
-        <Text type="subtitle-2" margin="none">
+        <Typography type="subtitle-2" margin="none">
           {`Unable to upload the following files due to total upload size limit (${limit})`}
-        </Text>
+        </Typography>
       );
     }
 
     const range = type === "min" ? "greater" : "less";
     return (
-      <Text type="subtitle-2" margin="none">
+      <Typography type="subtitle-2" margin="none">
         {`Unable to upload the following files because files must be ${range} than ${limit}`}
-      </Text>
+      </Typography>
     );
   }
   if (isTooManyFilesError(error)) {
     const { limit } = error;
     return (
-      <Text type="subtitle-2" margin="none">
+      <Typography type="subtitle-2" margin="none">
         {`Unable to upload the following files due to total files allowed limit (${limit})`}
-      </Text>
+      </Typography>
     );
   }
 
   const { extensions } = error;
   return (
-    <Text type="subtitle-2" margin="none">
+    <Typography type="subtitle-2" margin="none">
       {`Invalid file extension. Must be one of ${extensions.join(", ")}`}
-    </Text>
+    </Typography>
   );
 }

components/ErrorRenderer.tsx

@@ -5,7 +5,7 @@ import {
   isFileSizeError,
   List,
   SimpleListItem,
-  Text,
+  Typography,
 } from "react-md";
 
 import { ErrorHeader } from "./ErrorHeader";
@@ -36,8 +36,8 @@ export function ErrorRenderer({ error }: ErrorRendererProps): ReactElement {
   // error
   /* ^ is a {@link FileAccessError} */
   return (
-    <Text margin="none">
+    <Typography margin="none">
       File access is restricted. Try a different file or folder.
-    </Text>
+    </Typography>
   );
 }

components/FileDropzone.tsx

@@ -1,6 +1,11 @@
 import cn from "classnames";
 import { ReactElement, useEffect, useState } from "react";
-import { FileUploadSVGIcon, Text, TextContainer, useDropzone } from "react-md";
+import {
+  FileUploadSVGIcon,
+  Typography,
+  TextContainer,
+  useDropzone,
+} from "react-md";
 
 import styles from "./FileDropzone.module.scss";
 import { useUpload } from "./useUpload";
@@ -41,10 +46,10 @@ export function FileDropzone(): ReactElement | null {
       onMouseLeave={() => setEnabled(false)}
     >
       <TextContainer>
-        <Text type="headline-5">
+        <Typography type="headline-5">
           Drag and drop a text file to update the markdown text with the file
           contents.
-        </Text>
+        </Typography>
         <FileUploadSVGIcon />
       </TextContainer>
     </div>

components/HelpDialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   Link,
-  Text,
+  Typography,
   TextContainer,
 } from "react-md";
 
@@ -72,32 +72,32 @@ export function HelpDialog({
       </DialogHeader>
       <TextContainer clone>
         <DialogContent>
-          <Text type="headline-6" margin="none">
+          <Typography type="headline-6" margin="none">
             About
-          </Text>
-          <Text>
+          </Typography>
+          <Typography>
             This playground allows you to preview markdown with either the
             default renderer behavior or custom renderers using{" "}
             <Link href="https://react-md.dev">react-md</Link> for custom
             styling. Markdown can be manually typed into the editor or text
             files can be uploaded via drag-and drop.
-          </Text>
-          <Text>
+          </Typography>
+          <Typography>
             The website can be viewed in split-view mode (default) or in a
             tabbed view which can be useful if there isn&apos;t enough screen
             space. The split-view mode also allows for resizing the panes by
             grabbing the divider in the middle of the page.
-          </Text>
-          <Text type="headline-6" margin="top">
+          </Typography>
+          <Typography type="headline-6" margin="top">
             Useful links:
-          </Text>
+          </Typography>
           <ul>
             {links.map(({ name, href }) => (
-              <Text key={href} component="li" type="subtitle-1">
+              <Typography key={href} component="li" type="subtitle-1">
                 <Link href={href} target="_blank">
                   {name}
                 </Link>
-              </Text>
+              </Typography>
             ))}
           </ul>
         </DialogContent>

components/renderers.tsx

@@ -11,7 +11,7 @@ import {
   TableContainer,
   TableHeader,
   TableRow,
-  Text,
+  Typography,
 } from "react-md";
 
 import {
@@ -43,7 +43,7 @@ export const renderers: MarkdownRenderers = {
   },
 
   paragraph: function Paragraph({ children }) {
-    return <Text>{children}</Text>;
+    return <Typography>{children}</Typography>;
   },
 
   heading: function Heading({ depth, tokens, children }) {
@@ -80,9 +80,9 @@ export const renderers: MarkdownRenderers = {
 
     const id = useSluggedId(tokens);
     return (
-      <Text id={id} type={type}>
+      <Typography id={id} type={type}>
         {children}
-      </Text>
+      </Typography>
     );
   },
 
@@ -130,7 +130,7 @@ ${PRISM_LANGUAGES.map((lang) => `- ${lang}`).join("\n")}
   },
 
   listitem: function ListItem({ children }) {
-    return <Text component="li">{children}</Text>;
+    return <Typography component="li">{children}</Typography>;
   },
 
   blockquote: function Blockquote({ children }) {

package.json

@@ -67,7 +67,7 @@
     "prismjs": "^1.25.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-md": "^3.1.1",
+    "react-md": "^4.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.1",
     "rollup-plugin-terser": "^7.0.2",