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/CharacterSheet/components/ProficiencyGroupsBox/ProficiencyGroupsBox.tsx

@@ -0,0 +1,48 @@
+import { visuallyHidden } from "@mui/utils";
+import React from "react";
+
+import {
+  BoxBackground,
+  SquaredBoxSvg228x338,
+  SquaredBoxSvg278x338,
+} from "@dndbeyond/character-components/es";
+import {
+  CharacterTheme,
+  ProficiencyGroup,
+} from "@dndbeyond/character-rules-engine/es";
+
+import { StyleSizeTypeEnum } from "../../../Shared/reducers/appEnv";
+import { AppEnvDimensionsState } from "../../../Shared/stores/typings";
+import ProficiencyGroups from "../ProficiencyGroups";
+
+interface Props {
+  dimensions: AppEnvDimensionsState;
+  theme: CharacterTheme;
+  proficiencyGroups: Array<ProficiencyGroup>;
+  onClick?: () => void;
+}
+export default class ProficiencyGroupsBox extends React.PureComponent<Props> {
+  render() {
+    const { dimensions, theme, proficiencyGroups, onClick } = this.props;
+
+    let BoxBackgroundComponent: React.ComponentType = SquaredBoxSvg228x338;
+    if (
+      dimensions.styleSizeType > StyleSizeTypeEnum.DESKTOP ||
+      dimensions.styleSizeType <= StyleSizeTypeEnum.TABLET
+    ) {
+      BoxBackgroundComponent = SquaredBoxSvg278x338;
+    }
+
+    return (
+      <section className="ct-proficiency-groups-box">
+        <BoxBackground StyleComponent={BoxBackgroundComponent} theme={theme} />
+        <h2 style={visuallyHidden}>Proficiencies and Languages</h2>
+        <ProficiencyGroups
+          proficiencyGroups={proficiencyGroups}
+          onClick={onClick}
+          theme={theme}
+        />
+      </section>
+    );
+  }
+}

ddb_main/tools/js/CharacterSheet/components/ProficiencyGroupsBox/index.ts

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