New source found from dndbeyond.com

ddb_main/tools/js/CharacterBuilder/containers/pages/HomeBasicInfo/HomeBasicInfo.tsx

@@ -1,5 +1,10 @@
 import { Typography } from "@mui/material";
-import React, { ChangeEvent, HTMLAttributes, ReactNode } from "react";
+import React, {
+  ChangeEvent,
+  FocusEvent,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
 import { DispatchProp } from "react-redux";
 
 import {
@@ -24,12 +29,12 @@ import {
 import { Dice } from "@dndbeyond/dice";
 
 import { SourceCategoryDescription } from "~/constants";
+import { InputField } from "~/subApps/builder/components/InputField";
 import { RouteKey } from "~/subApps/builder/constants";
 import {
   ModalData,
   useModalManager,
 } from "~/subApps/builder/contexts/ModalManager";
-import { FormInputField } from "~/tools/js/Shared/components/common/FormInputField";
 import UserRoles from "~/tools/js/Shared/constants/UserRoles";
 import PrivacyTypeRadio from "~/tools/js/smartComponents/PrivacyTypeRadio";
 
@@ -723,66 +728,67 @@ class HomeBasicInfo extends React.PureComponent<Props> {
                 this.forceUpdate();
               }}
             />
-            <FormInputField
+            <InputField
               label="Long Description"
               initialValue={premadeInfo.definition.longDescription}
-              inputAttributes={inputAttributes}
-              onBlur={(value: string) => {
-                premadeInfo.definition.longDescription = value;
+              inputProps={inputAttributes}
+              onBlur={(e: FocusEvent<HTMLInputElement>) => {
+                premadeInfo.definition.longDescription = e.target.value;
                 this.handlePremadeInfoChanged(premadeInfo);
               }}
             />
-            <FormInputField
+            <InputField
               label="Short Description"
               initialValue={premadeInfo.definition.shortDescription}
-              inputAttributes={inputAttributes}
-              onBlur={(value: string) => {
-                premadeInfo.definition.shortDescription = value;
+              inputProps={inputAttributes}
+              onBlur={(e: FocusEvent<HTMLInputElement>) => {
+                premadeInfo.definition.shortDescription = e.target.value;
                 this.handlePremadeInfoChanged(premadeInfo);
               }}
             />
-            <FormInputField
+            <InputField
               label="Image Url"
               initialValue={premadeInfo.definition.imageUrl}
-              inputAttributes={inputAttributes}
-              onBlur={(value: string) => {
-                premadeInfo.definition.imageUrl = value;
+              inputProps={inputAttributes}
+              onBlur={(e: FocusEvent<HTMLInputElement>) => {
+                premadeInfo.definition.imageUrl = e.target.value;
                 this.handlePremadeInfoChanged(premadeInfo);
               }}
             />
-            <FormInputField
+            <InputField
               label="Image Alt Text"
               initialValue={premadeInfo.definition.imageAltText}
-              inputAttributes={inputAttributes}
-              onBlur={(value: string) => {
-                premadeInfo.definition.imageAltText = value;
+              inputProps={inputAttributes}
+              onBlur={(e: FocusEvent<HTMLInputElement>) => {
+                premadeInfo.definition.imageAltText = e.target.value;
                 this.handlePremadeInfoChanged(premadeInfo);
               }}
             />
-            <FormInputField
+            <InputField
               label="Mobile Image Url"
               initialValue={premadeInfo.definition.mobileImageUrl}
-              inputAttributes={inputAttributes}
-              onBlur={(value: string) => {
-                premadeInfo.definition.mobileImageUrl = value;
+              inputProps={inputAttributes}
+              onBlur={(e: FocusEvent<HTMLInputElement>) => {
+                premadeInfo.definition.mobileImageUrl = e.target.value;
                 this.handlePremadeInfoChanged(premadeInfo);
               }}
             />
-            <FormInputField
+            <InputField
               label="Mobile Image Accessibility"
               initialValue={premadeInfo.definition.mobileImageAccessibility}
-              inputAttributes={inputAttributes}
-              onBlur={(value: string) => {
-                premadeInfo.definition.mobileImageAccessibility = value;
+              inputProps={inputAttributes}
+              onBlur={(e: FocusEvent<HTMLInputElement>) => {
+                premadeInfo.definition.mobileImageAccessibility =
+                  e.target.value;
                 this.handlePremadeInfoChanged(premadeInfo);
               }}
             />
-            <FormInputField
+            <InputField
               label="Theme Color Hex Code"
               initialValue={premadeInfo.definition.themeColor}
-              inputAttributes={inputAttributes}
-              onBlur={(value: string) => {
-                premadeInfo.definition.themeColor = value;
+              inputProps={inputAttributes}
+              onBlur={(e: FocusEvent<HTMLInputElement>) => {
+                premadeInfo.definition.themeColor = e.target.value;
                 this.handlePremadeInfoChanged(premadeInfo);
               }}
             />