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/Icons/ProficiencyLevelIcon/HalfProficiencyIcon/HalfProficiencyIcon.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import { Tooltip } from "@dndbeyond/character-common-components/es";
+import {
+  CharacterTheme,
+  Constants,
+} from "@dndbeyond/character-rules-engine/es";
+
+import { ModifiedProficiencyHalfSvg, ProficiencyHalfSvg } from "../../../Svg";
+
+interface Props {
+  isModified: boolean;
+  className: string;
+  theme?: CharacterTheme;
+}
+
+export default class HalfProficiencyIcon extends React.PureComponent<Props> {
+  static defaultProps = {
+    isModified: false,
+    className: "",
+  };
+
+  render() {
+    const { isModified, className, theme } = this.props;
+
+    let IconComponent: React.ComponentType<any> = isModified
+      ? ModifiedProficiencyHalfSvg
+      : ProficiencyHalfSvg;
+    let classNames: Array<string> = ["ddbc-half-proficiency-icon", className];
+    if (isModified) {
+      classNames.push("ddbc-half-proficiency-icon--modified");
+    }
+    let fillColor;
+    if (theme?.isDarkMode) {
+      fillColor = isModified
+        ? Constants.CharacterColorEnum.DARKMODE_TEXT
+        : theme?.themeColor;
+    }
+
+    return (
+      <Tooltip title="Half Proficiency" isDarkMode={theme?.isDarkMode}>
+        <IconComponent className={classNames.join(" ")} fillColor={fillColor} />
+      </Tooltip>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/HalfProficiencyIcon/index.ts

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

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/NoProficiencyIcon/NoProficiencyIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { Tooltip } from "@dndbeyond/character-common-components/es";
+import { CharacterTheme } from "@dndbeyond/character-rules-engine/es";
+
+interface Props {
+  isModified: boolean;
+  className: string;
+  theme?: CharacterTheme;
+}
+
+export default class NoProficiencyIcon extends React.PureComponent<Props> {
+  static defaultProps = {
+    isModified: false,
+    className: "",
+  };
+
+  render() {
+    const { isModified, className, theme } = this.props;
+
+    let classNames: Array<string> = ["ddbc-no-proficiency-icon", className];
+    if (isModified) {
+      classNames.push("ddbc-no-proficiency-icon--modified");
+    }
+    if (theme?.isDarkMode) {
+      classNames.push("ddbc-no-proficiency-icon--dark-mode");
+    }
+
+    return (
+      <Tooltip title="Not Proficient" isDarkMode={theme?.isDarkMode}>
+        <span className={classNames.join(" ")} />
+      </Tooltip>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/NoProficiencyIcon/index.ts

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

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/ProficiencyIcon/ProficiencyIcon.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import { Tooltip } from "@dndbeyond/character-common-components/es";
+import {
+  CharacterTheme,
+  Constants,
+} from "@dndbeyond/character-rules-engine/es";
+
+import { ProficiencySvg, ModifiedProficiencySvg } from "../../../Svg";
+
+interface Props {
+  isModified: boolean;
+  className: string;
+  theme?: CharacterTheme;
+}
+
+export default class ProficiencyIcon extends React.PureComponent<Props> {
+  static defaultProps = {
+    isModified: false,
+    className: "",
+  };
+
+  render() {
+    const { isModified, className, theme } = this.props;
+
+    let IconComponent: React.ComponentType<any> = isModified
+      ? ModifiedProficiencySvg
+      : ProficiencySvg;
+    let classNames: Array<string> = ["ddbc-proficiency-icon", className];
+
+    if (isModified) {
+      classNames.push("ddbc-proficiency-icon--modified");
+    }
+
+    return (
+      <Tooltip title="Proficiency" isDarkMode={theme?.isDarkMode}>
+        <IconComponent
+          className={classNames.join(" ")}
+          fillColor={
+            theme?.isDarkMode && !isModified
+              ? theme.themeColor
+              : theme?.isDarkMode
+              ? Constants.CharacterColorEnum.DARKMODE_TEXT
+              : undefined
+          }
+        />
+      </Tooltip>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/ProficiencyIcon/index.ts

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

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/ProficiencyLevelIcon.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import {
+  CharacterTheme,
+  Constants,
+} from "@dndbeyond/character-rules-engine/es";
+
+import HalfProficiencyIcon from "./HalfProficiencyIcon";
+import NoProficiencyIcon from "./NoProficiencyIcon";
+import ProficiencyIcon from "./ProficiencyIcon";
+import TwiceProficiencyIcon from "./TwiceProficiencyIcon";
+
+interface Props {
+  proficiencyLevel: number;
+  isModified: boolean;
+  theme?: CharacterTheme;
+}
+export default class ProficiencyLevelIcon extends React.PureComponent<Props> {
+  static defaultProps = {
+    isModified: false,
+  };
+
+  render() {
+    const { proficiencyLevel, isModified, theme } = this.props;
+
+    let IconComponent: React.ComponentType<any> | null = null;
+    let proficiencyVerbiage: string = "Not Proficient";
+
+    switch (proficiencyLevel) {
+      case Constants.ProficiencyLevelEnum.NONE:
+        IconComponent = NoProficiencyIcon;
+        break;
+      case Constants.ProficiencyLevelEnum.HALF:
+        IconComponent = HalfProficiencyIcon;
+        proficiencyVerbiage = "Half Proficient";
+        break;
+      case Constants.ProficiencyLevelEnum.FULL:
+        IconComponent = ProficiencyIcon;
+        proficiencyVerbiage = "Proficient";
+        break;
+      case Constants.ProficiencyLevelEnum.EXPERT:
+        IconComponent = TwiceProficiencyIcon;
+        proficiencyVerbiage = "Expert";
+        break;
+      default:
+      //not implemented
+    }
+
+    if (IconComponent === null) {
+      return null;
+    }
+
+    return (
+      <span aria-label={proficiencyVerbiage}>
+        <IconComponent
+          className="ddbc-proficiency-level-icon"
+          isModified={isModified}
+          theme={theme}
+        />
+      </span>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/TwiceProficiencyIcon/TwiceProficiencyIcon.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import { Tooltip } from "@dndbeyond/character-common-components/es";
+import {
+  CharacterTheme,
+  Constants,
+} from "@dndbeyond/character-rules-engine/es";
+
+import {
+  ModifiedProficiencyDoubleSvg,
+  ProficiencyDoubleSvg,
+} from "../../../Svg";
+
+interface Props {
+  isModified: boolean;
+  className: string;
+  theme?: CharacterTheme;
+}
+
+export default class TwiceProficiencyIcon extends React.PureComponent<Props> {
+  static defaultProps = {
+    isModified: false,
+    className: "",
+  };
+
+  render() {
+    const { isModified, className, theme } = this.props;
+
+    let IconComponent: React.ComponentType<any> = isModified
+      ? ModifiedProficiencyDoubleSvg
+      : ProficiencyDoubleSvg;
+
+    let classNames: Array<string> = ["ddbc-twice-proficiency-icon", className];
+    if (isModified) {
+      classNames.push("ddbc-twice-proficiency-icon--modified");
+    }
+    let secondaryFill;
+    if (theme?.isDarkMode) {
+      secondaryFill = isModified
+        ? Constants.CharacterColorEnum.DARKMODE_TEXT
+        : theme?.themeColor;
+    }
+
+    return (
+      <Tooltip title="Expertise" isDarkMode={theme?.isDarkMode}>
+        <span className={classNames.join(" ")}>
+          <IconComponent
+            className="ddbc-twice-proficiency-icon__inner"
+            fillColor={theme?.isDarkMode ? theme.themeColor : undefined}
+            secondaryFillColor={secondaryFill}
+          />
+        </span>
+      </Tooltip>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Icons/ProficiencyLevelIcon/TwiceProficiencyIcon/index.ts

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