New source found from dndbeyond.com

ddb_main/tools/js/Shared/containers/panes/ProficienciesPane/ProficienciesPane.tsx

@@ -1,7 +1,8 @@
+import clsx from "clsx";
 import React from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
-import { Select } from "@dndbeyond/character-components/es";
 import {
   characterActions,
   CharacterValuesContract,
@@ -19,6 +20,8 @@ import {
   ValueUtils,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Select } from "~/components/Select";
+import formStyles from "~/subApps/builder/styles/form.module.css";
 import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
 import { Heading } from "~/subApps/sheet/components/Sidebar/components/Heading";
 
@@ -26,6 +29,7 @@ import ProficiencyGroups from "../../../../CharacterSheet/components/Proficiency
 import { SharedAppState } from "../../../stores/typings";
 import ProficienciesPaneCustomProficiency from "./ProficienciesPaneCustomProficiency";
 import ProficienciesPaneExistingProficiency from "./ProficienciesPaneExistingProficiency";
+import styles from "./styles.module.css";
 
 export const PROFICIENCY_TYPE = {
   ARMOR: 1,
@@ -36,7 +40,9 @@ export const PROFICIENCY_TYPE = {
   LANGUAGE_OTHER: 6,
 };
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   customProficiencies: Array<CustomProficiencyContract>;
   proficiencyGroups: Array<ProficiencyGroup>;
   typeValueLookup: TypeValueLookup;
@@ -372,29 +378,31 @@ class ProficienciesPane extends React.PureComponent<Props, State> {
     let subtypeOptions = this.getSubtypeOptions();
 
     return (
-      <React.Fragment>
+      <>
         <Heading>Add New Proficiencies</Heading>
-        <div className="ct-proficiencies-pane__add">
-          <div className="ct-proficiencies-pane__add-field ct-proficiencies-pane__add-field--type">
+        <label className={formStyles.label}>Proficiency Type</label>
+        <Select
+          className={styles.select}
+          options={typeOptions}
+          onChange={this.handleTypeChange}
+          value={type}
+          name="proficiency-type-select"
+        />
+        {subtypeOptions.length > 0 && (
+          <>
+            <label className={clsx([formStyles.label, styles.subtype])}>
+              Available Proficiencies
+            </label>
             <Select
-              options={typeOptions}
-              onChange={this.handleTypeChange}
-              value={type}
+              className={styles.subtype}
+              options={subtypeOptions}
+              onChange={this.handleSubtypeChange}
+              value={subtype}
+              name="proficiency-subtype-select"
             />
-          </div>
-          {subtypeOptions.length > 0 && (
-            <div className="ct-proficiencies-pane__add-field ct-proficiencies-pane__add-field--subtype">
-              <Select
-                options={subtypeOptions}
-                onChange={this.handleSubtypeChange}
-                value={subtype}
-                initialOptionRemoved={true}
-                resetAfterChoice={true}
-              />
-            </div>
-          )}
-        </div>
-      </React.Fragment>
+          </>
+        )}
+      </>
     );
   };