Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/tools/js/smartComponents/CharacterName/CharacterName.tsx

@@ -0,0 +1,40 @@
+import Typography from "@mui/material/Typography";
+
+import { DefaultCharacterName as DefaultName } from "~/constants";
+
+interface Props {
+  defaultCharacterName?: string;
+  isDead?: boolean;
+  isFaceMenu?: boolean;
+  name: string;
+}
+
+export default function CharacterName({
+  defaultCharacterName = DefaultName,
+  isDead = false,
+  isFaceMenu = false,
+  name,
+}: Props) {
+  let displayName: string = name ? name : defaultCharacterName;
+  if (isDead) {
+    displayName = `(Dead) ${displayName}`;
+  }
+
+  return (
+    <Typography
+      variant="h4"
+      component="h1"
+      style={{ fontFamily: "Roboto Condensed" }}
+      sx={{
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        fontSize: isFaceMenu ? "24px" : { xs: "18px", sm: "24px" },
+        lineHeight: 1.4,
+        letterSpacing: "normal",
+      }}
+    >
+      {displayName}
+    </Typography>
+  );
+}

ddb_main/tools/js/smartComponents/CharacterName/index.ts

@@ -0,0 +1,4 @@
+import CharacterName from "./CharacterName";
+
+export default CharacterName;
+export { CharacterName };