@sheerid/jslib 1.84.0 → 1.85.0

package/sheerides6.js

@@ -2824,7 +2824,7 @@ const getMessages = async (locale, programThemeMessages, segment) => {
     const hasSegmentMessages = messagesModule && messagesModule.segmentMessages;
     const segmentSpecificMessages = segment && hasSegmentMessages ? messagesModule.segmentMessages[segment] : {};
     const optionsMessages = getOptionsMessages(usedLocale);
-    const cleanFlatThemeMessages = programThemeMessages && usedLocale === DEFAULT_LOCALE ? getThemeMessages$1(programThemeMessages) : {};
+    const cleanFlatThemeMessages = programThemeMessages ? getThemeMessages$1(programThemeMessages) : {};
     // For non en-US locales, we'll merge en-US messages as a base
     const defaultLocaleMessages = usedLocale !== DEFAULT_LOCALE ? await getMessages(DEFAULT_LOCALE, programThemeMessages, segment) : {};
     // Flatten these before object.assign so they are dot-props, so nested objects aren't overwritten, deleting properties
@@ -3432,7 +3432,6 @@ const getExtendedFieldValidationErrorsEmpty = () => {
 const GetEmptyTheme = () => ({
     intl: {
         locale: getLocaleSafely(),
-        // @ts-ignore
         messages: {},
     },
     customCss: '',
@@ -4586,7 +4585,7 @@ const handleEmailOnKeyDown = (event) => {
     }
 };
 /**
- * @private
+ * @deprecated Accessibility standards prevent setting focus without user keyboard interaction
  */
 const handleCountryOnKeyDown = (event) => {
     if (event.key === 'Tab' && !event.shiftKey) {
@@ -4695,6 +4694,18 @@ const produceDraftViewModel = (previousModel, key, value) => fn(previousModel, (
     draft[key] = value;
 });
 
+const FieldLabel = ({ text, htmlForLabel, id, displayClasses, isRequired, children, }) => (React.createElement("label", { htmlFor: htmlForLabel },
+    React.createElement("div", { id: id, className: `sid-field__label sid-l-space-btm-sm ${displayClasses}` },
+        text,
+        isRequired && React.createElement("span", { className: "sid-field__label--required" }, "*"),
+        children && (React.createElement("div", { className: "sid-field__label-explanation" }, children)))));
+FieldLabel.defaultProps = {
+    id: '',
+    displayClasses: '',
+    isRequired: true,
+    children: null,
+};
+
 const InputText = ({ id, isErrored, className = undefined, hidePlaceholder = true, refId, required = false, type = 'text', ariaDescribedBy, ariaLabel, ...props // forward any remaining props to the input
  }) => {
     let internalClassName = '';
@@ -4715,9 +4726,7 @@ const InputTextComponent = injectIntl(InputText);
 
 const FirstName = ({ value, isErrored, onChange, intl, placeholder = '', }) => (React.createElement("div", { className: "sid-field sid-first-name" },
     React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-first-name" },
-        React.createElement("div", { className: `sid-field__label sid-field__label--required sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-            React.createElement(FormattedHTMLMessage, { id: "firstName", defaultMessage: "First name" }))),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "firstName", defaultMessage: "First name" }), htmlForLabel: "sid-first-name", id: "sid-first-name-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
     React.createElement(InputTextComponent, { id: "first-name", isErrored: isErrored, onChange: e => onChange(e.target.value), placeholder: placeholder || intl.formatMessage({ id: 'firstNamePlaceholder', defaultMessage: 'First Name*' }), refId: "firstName", value: value, required: true }),
     isErrored ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidFirstName", defaultMessage: "Invalid first name" }))) : null));
@@ -4725,9 +4734,7 @@ const FirstNameComponent = injectIntl(FirstName);
 
 const LastName = ({ value, isErrored, onChange, intl, placeholder = '', }) => (React.createElement("div", { className: "sid-field sid-last-name" },
     React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-last-name" },
-        React.createElement("div", { className: `sid-field__label sid-field__label--required sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-            React.createElement(FormattedHTMLMessage, { id: "lastName", defaultMessage: "Last name" }))),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "lastName", defaultMessage: "Last name" }), htmlForLabel: "sid-last-name", id: "sid-last-name-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
     React.createElement(InputTextComponent, { id: "last-name", isErrored: isErrored, onChange: event => onChange(event.target.value), placeholder: placeholder || intl.formatMessage({ id: 'lastNamePlaceholder', defaultMessage: 'Last Name*' }), refId: "lastName", value: value, required: true }),
     isErrored ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidLastName", defaultMessage: "Invalid last name" }))) : null));
@@ -4735,11 +4742,7 @@ const LastNameComponent = injectIntl(LastName);
 
 const Email = ({ value, isErrored, onChange, explanation, intl, onKeyDown = undefined, placeholder = '', }) => (React.createElement("div", { className: "sid-field sid-email" },
     React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-email" },
-        React.createElement("div", { className: `sid-field__label-with-explanation sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-            React.createElement("div", { className: "sid-field__label sid-field__label--required" },
-                React.createElement(FormattedHTMLMessage, { id: "emailAddress", defaultMessage: "Email address" })),
-            React.createElement("div", { className: "sid-field__label-explanation" }, explanation || (React.createElement(FormattedHTMLMessage, { id: "emailExplanation", defaultMessage: "Needed to send you your unique code" }))))),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "emailAddress", defaultMessage: "Email address" }), htmlForLabel: "sid-email", id: "sid-email-label", displayClasses: `sid-field__label-with-explanation${placeholder && ' sid-h-screen-reader-only'}` }, explanation || (React.createElement(FormattedHTMLMessage, { id: "emailExplanation", defaultMessage: "Needed to send you your unique code" }))),
     React.createElement(InputTextComponent, { id: "email", isErrored: isErrored, onChange: event => onChange(event.target.value), onKeyDown: typeof onKeyDown === 'function' ? e => onKeyDown(e) : undefined, placeholder: placeholder || intl.formatMessage({ id: 'emailAddressPlaceholder', defaultMessage: 'Email*' }), type: "email", value: value, required: true }),
     isErrored ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidEmail", defaultMessage: "Invalid email" }))) : null));
@@ -9358,7 +9361,7 @@ const InputSelectButton = ({ clearSelection, disabled, getToggleButtonProps, isO
 const InputSelectButtonComponent = InputSelectButton;
 
 /* eslint-disable indent */
-const InputSelect = ({ className, inputId, disabled, fieldId, isErrored, options, onKeyDown, onChange, placeholder, 
+const InputSelect = ({ className, inputId, disabled, fieldId, fieldLabelId, isErrored, options, onKeyDown, onChange, placeholder, 
 // Most invokers want placeholder hidden by css, so it can be easily shown when
 // customizing the implementation. Birth date is an example of an exception.
 suppressPlaceholder = true, value, autoFocus, ariaLabel, isRequired, buttonRef, }) => {
@@ -9381,13 +9384,13 @@ suppressPlaceholder = true, value, autoFocus, ariaLabel, isRequired, buttonRef,
     };
     return (React.createElement(Downshift, { id: inputId, onChange: onChange, itemToString: itemToString, selectedItem: value && value.value && value.label ? value : '', defaultHighlightedIndex: 0 }, ({ clearSelection, getInputProps, getItemProps, getMenuProps, getToggleButtonProps, highlightedIndex, inputValue, isOpen, openMenu, selectedItem, selectHighlightedItem, }) => (React.createElement("div", { className: `sid-input-select-list ${className}` },
         React.createElement("input", Object.assign({}, getInputProps({
-            onFocus: () => openMenu(),
+            onClick: () => openMenu(),
             onBlur: event => handleOnBlur(event, selectHighlightedItem, selectedItem),
             onKeyDown: event => handleOnKeyDown(event),
         }), { 
             // TODO resolve next line. Product needs this to autofocus, but linter says bad for accessibility
             // eslint-disable-next-line
-            autoFocus: autoFocus, id: inputId, className: `sid-l-full-width sid-text-input ${suppressPlaceholder ? 'sid-hidden-placeholder' : ''} ${isErrored ? 'sid-text-input--error' : ''}`, disabled: disabled, placeholder: placeholder, ref: input => setRef(fieldId, input), "aria-required": isRequired })),
+            autoFocus: autoFocus, id: inputId, className: `sid-l-full-width sid-text-input ${suppressPlaceholder ? 'sid-hidden-placeholder' : ''} ${isErrored ? 'sid-text-input--error' : ''}`, disabled: disabled, placeholder: placeholder, ref: input => setRef(fieldId, input), "aria-required": isRequired, "aria-labelledby": fieldLabelId })),
         React.createElement(InputSelectButtonComponent, { disabled: disabled, getToggleButtonProps: getToggleButtonProps, isOpen: isOpen, clearSelection: selectedItem ? clearSelection : undefined, buttonRef: buttonRef }),
         isOpen
             ? (React.createElement("div", null, filterOptions(options, inputValue).length > 0
@@ -9408,17 +9411,18 @@ InputSelect.defaultProps = {
 };
 const InputSelectComponent = InputSelect;
 
-const Country = ({ value, isErrored, options, onChange, onKeyDown, intl, placeholder = '', isRequired = false, }) => (React.createElement("div", { className: "sid-field sid-country" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-country" },
-        React.createElement("div", { className: `sid-field__label sid-country__label sid-l-space-btm-sm${isRequired ? ' sid-field__label--required' : ''}` },
-            React.createElement(FormattedHTMLMessage, { id: "country", defaultMessage: "Country where you go to school" }))),
-    React.createElement(InputSelectComponent, { fieldId: "country", inputId: "sid-country", isErrored: isErrored, options: options, onChange: (country) => onChange(country), onKeyDown: onKeyDown, placeholder: placeholder || intl.formatMessage({ id: 'countryPlaceholder', defaultMessage: 'Country*' }), value: value ? {
-            value: value.value,
-            label: intl.formatMessage({ id: `countries.${value.value}`, defaultMessage: value.label || value.value }),
-        } : undefined }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidCountry", defaultMessage: "Invalid country" }))) : null));
+const Country = ({ value, isErrored, options, onChange, onKeyDown, intl, placeholder = '', isRequired = false, }) => {
+    const inputId = 'sid-country';
+    return (React.createElement("div", { className: `sid-field ${inputId}` },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "country", defaultMessage: "Country" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only', isRequired: isRequired }),
+        React.createElement(InputSelectComponent, { fieldId: "country", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (country) => onChange(country), onKeyDown: onKeyDown, placeholder: placeholder || intl.formatMessage({ id: 'countryPlaceholder', defaultMessage: 'Country*' }), value: value ? {
+                value: value.value,
+                label: intl.formatMessage({ id: `countries.${value.value}`, defaultMessage: value.label || value.value }),
+            } : undefined, isRequired: true }),
+        isErrored ? (React.createElement("div", { className: "sid-field-error" },
+            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidCountry", defaultMessage: "Invalid country" }))) : null));
+};
 const CountryComponent = injectIntl(Country);
 
 const ROW_HEIGHT$1 = 42;
@@ -15789,27 +15793,28 @@ module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;va
 
 var PhoneInput = unwrapExports(lib);
 
-const PhoneNumber = ({ value, isErrored, onChange, explanation, onCarrierConsentChange, intl, isRequired = false, onKeyDown = undefined, placeholder = '', displaySmsConsent = true, requireCarrierConsent = false, carrierConsent = false, internationalSupport = false, }) => {
+const PhoneNumber = ({ value, isErrored, onChange, explanation, onCarrierConsentChange, 
+// eslint-disable-next-line
+intl, // deprecated
+isRequired = false, onKeyDown = undefined, placeholder = '', displaySmsConsent = true, requireCarrierConsent = false, carrierConsent = false, 
+// eslint-disable-next-line
+internationalSupport = false, // deprecated
+selectedCountryCode = 'us', }) => {
     const getDefaultExplanation = () => (!isRequired
         ? (React.createElement(FormattedHTMLMessage, { id: "phoneNumberExplanation", defaultMessage: "Optional - get text notifications of status updates" }))
         : '');
     return (React.createElement("div", { className: "sid-field sid-phone-number" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-phone-number" },
-            React.createElement("div", { className: `sid-field__label-with-explanation sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-                React.createElement("div", { className: `sid-field__label${isRequired ? ' sid-field__label--required' : ''}` },
-                    React.createElement(FormattedHTMLMessage, { id: "phoneNumber", defaultMessage: "Mobile Number" })),
-                React.createElement("div", { className: "sid-field__label-explanation" }, explanation || getDefaultExplanation()))),
-        internationalSupport ? (React.createElement(React.Fragment, null,
-            React.createElement(InputTextComponent, { className: "sid-phone-number__placeholder", id: "phone-number-placeholder", isErrored: false }),
-            React.createElement(PhoneInput, { country: "us", containerClass: "react-tel-input sid-phone-number__wrapper", inputClass: `sid-text-input sid-phone-number__field sid-phone-number__field--intl ${isRequired ? 'sid-text-input--required' : ''}
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "phoneNumber", defaultMessage: "Mobile Number" }), htmlForLabel: "sid-phone-number", id: "sid-phone-number-label", displayClasses: `sid-field__label-with-explanation${placeholder && 'sid-h-screen-reader-only'}`, isRequired: isRequired }, explanation || getDefaultExplanation()),
+        React.createElement(React.Fragment, null,
+            React.createElement(PhoneInput, { country: selectedCountryCode.toLowerCase(), containerClass: "react-tel-input sid-phone-number__wrapper", inputClass: `sid-text-input sid-phone-number__field sid-phone-number__field--intl ${isRequired ? 'sid-text-input--required' : ''}
                                     sid-l-full-width ${isErrored ? 'sid-text-input--error' : ''}`, autoFormat: false, value: value, onChange: value => onChange(value), placeholder: placeholder, 
                 // @ts-ignore
                 ref: input => setRef('phoneNumber', input), inputProps: {
                     id: 'sid-phone-number',
                     name: 'sid-phone-number',
                     onKeyDown: e => (onKeyDown ? onKeyDown(e) : undefined),
-                } }))) : (React.createElement(InputTextComponent, { className: "sid-phone-number__field", id: "phone-number", isErrored: isErrored, onChange: e => onChange(e.target.value), onKeyDown: e => (onKeyDown ? onKeyDown(e) : undefined), placeholder: placeholder || intl.formatMessage({ id: 'phoneUsPlaceholder', defaultMessage: '555-555-5555' }), refId: "phoneNumber", required: isRequired, type: "tel", value: value })),
+                } })),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidPhoneNumber", defaultMessage: "Invalid mobile number" }))) : null,
         displaySmsConsent && (React.createElement("div", { className: "sid-h-small-text sid-l-space-top-md sid-sms-consent" },
@@ -16048,7 +16053,7 @@ const Typeahead = ({ onChange, programId, className, countryCode, disabled, mini
 };
 const TypeaheadComponent = Typeahead;
 
-const CollegeName = ({ onChange, value, isErrored, verificationService, intl, placeholder = '', }) => {
+const CollegeName = ({ onChange, value, isErrored, verificationService, intl, placeholder = '', isRequired = true, }) => {
     const { programId, viewModel, verificationResponse } = verificationService;
     const locale = getLocaleSafely(viewModel, verificationResponse);
     const urlAddSchoolForm = (getOptions().urlAddSchoolForm || '').trim();
@@ -16056,10 +16061,8 @@ const CollegeName = ({ onChange, value, isErrored, verificationService, intl, pl
     const searchTags = getOrgSearchCountryTags(verificationService.programTheme, country);
     return (React.createElement("div", { className: "sid-field sid-college-name-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-college-name" },
-            React.createElement("div", { id: "sid-college-name-label", className: `sid-field__label sid-field__label--required sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-                React.createElement(FormattedHTMLMessage, { id: "schoolName", defaultMessage: "University / College name" }))),
-        React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: country, minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, onChange: (choice) => onChange(choice), placeholder: placeholder || intl.formatMessage({ id: 'schoolNamePlaceholder', defaultMessage: 'University / College name*' }), programId: programId, value: value, inputHtmlId: "sid-college-name", openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl, orgSearchTags: searchTags, locale: locale, urlAddSchoolForm: urlAddSchoolForm }),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "schoolName", defaultMessage: "University / College name" }), htmlForLabel: "sid-college-name", id: "sid-college-name-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
+        React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: country, minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, onChange: (choice) => onChange(choice), placeholder: placeholder || intl.formatMessage({ id: 'schoolNamePlaceholder', defaultMessage: 'University / College name*' }), programId: programId, value: value, inputHtmlId: "sid-college-name", openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl, orgSearchTags: searchTags, locale: locale, urlAddSchoolForm: urlAddSchoolForm, isRequired: isRequired }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
 };
@@ -16158,20 +16161,17 @@ const BirthDate = ({ onChange, intl, isErrored, isRequired = true, errorId, valu
         }
     };
     const monthFieldId = 'sid-birthdate__month';
+    const fieldLabelId = 'sid-birthdate-label';
     const errMsg = errorId ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: `errorId.${errorId}`, defaultMessage: "Invalid birth date" })))
         : (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidBirthDate", defaultMessage: "Invalid birth date" })));
     return (React.createElement("div", { className: "sid-field sid-birthdate" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: monthFieldId },
-            React.createElement("div", { id: `${monthFieldId}-label`, className: "sid-field__label-with-explanation sid-l-space-btm-sm" },
-                React.createElement("div", { id: "sid-birthdate", className: `sid-field__label${isRequired ? ' sid-field__label--required' : ''}` },
-                    React.createElement(FormattedHTMLMessage, { id: "birthDate", defaultMessage: "Date of birth" })),
-                React.createElement("div", { className: "sid-field__label-explanation" },
-                    React.createElement(FormattedHTMLMessage, { id: "verificationPurposesOnly", defaultMessage: "Used for verification purposes only" })))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "birthDate", defaultMessage: "Date of birth" }), htmlForLabel: monthFieldId, id: fieldLabelId, displayClasses: "sid-field__label-with-explanation", isRequired: isRequired },
+            React.createElement(FormattedHTMLMessage, { id: "verificationPurposesOnly", defaultMessage: "Used for verification purposes only" })),
         React.createElement("div", { className: "sid-birthdate__inputs" },
-            React.createElement(InputSelectComponent, { className: "sid-birthdate__month", fieldId: "birthDate", inputId: monthFieldId, isErrored: isErrored, options: months, onKeyDown: event => handleOnKeyDown(event), onChange: (choice) => {
+            React.createElement(InputSelectComponent, { className: "sid-birthdate__month", fieldId: "birthDate", inputId: monthFieldId, fieldLabelId: fieldLabelId, isErrored: isErrored, options: months, onKeyDown: event => handleOnKeyDown(event), onChange: (choice) => {
                     if (choice) {
                         updateBirthMonth(choice.value);
                     }
@@ -16345,7 +16345,7 @@ const HowDoesVerifyingWorkComponent = ({ verificationService, initialVisibility
             : null));
 };
 
-const BaseCountryComponentWrapper = ({ verificationService, viewModel, intl, nextFocusField, viewModelDraftDecorator, }) => {
+const BaseCountryComponentWrapper = ({ verificationService, viewModel, intl, viewModelDraftDecorator, }) => {
     const countryChoices = getAvailableCountryChoices(verificationService.programTheme, intl);
     const defaultCountryChoice = getDefaultCountryChoice(countryChoices);
     const { fieldValidationErrors } = verificationService;
@@ -16388,13 +16388,10 @@ const BaseCountryComponentWrapper = ({ verificationService, viewModel, intl, nex
     if (!hasMultipleCountries) {
         return null;
     }
-    return (React.createElement(CountryComponent, { isRequired: true, options: countryChoices, value: viewModel.countryChoice, isErrored: Boolean(fieldValidationErrors.country), onKeyDown: event => handleCountryOnKeyDown(event), onChange: async (countryChoice) => {
+    return (React.createElement(CountryComponent, { isRequired: true, options: countryChoices, value: viewModel.countryChoice, isErrored: Boolean(fieldValidationErrors.country), onChange: async (countryChoice) => {
             const countryValue = countryChoice ? countryChoice.value : undefined;
             updateCountryChoice(countryChoice);
             updateFieldValidationErrorsByFieldId('country', countryValue, verificationService);
-            if (nextFocusField && countryValue) {
-                setFocus(nextFocusField);
-            }
         } }));
 };
 const CountryComponentWrapper = injectIntl(BaseCountryComponentWrapper);
@@ -16454,8 +16451,8 @@ const StepStudentPersonalInfo = ({ intl, verificationService }) => {
         localeChoices.length > 1
             ? (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) }))
             : null,
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, nextFocusField: "organization" }),
-        React.createElement(CollegeNameComponent, { value: verificationService.viewModel.organization, verificationService: verificationService, isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(CollegeNameComponent, { value: verificationService.viewModel.organization, verificationService: verificationService, isErrored: !!fieldValidationErrors.organization, isRequired: true, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId('organization', choice, verificationService);
             } }),
@@ -16468,10 +16465,10 @@ const StepStudentPersonalInfo = ({ intl, verificationService }) => {
                     updateStudentViewModel('lastName', newValue);
                     updateFieldValidationErrorsByFieldId('lastName', newValue, verificationService);
                 } })),
-        React.createElement(BirthDateComponent, { isErrored: !!fieldValidationErrors.birthDate, errorId: fieldValidationErrors.birthDate, onChange: (newValue) => {
+        React.createElement(BirthDateComponent, { value: viewModel.birthDate, isErrored: !!fieldValidationErrors.birthDate, errorId: fieldValidationErrors.birthDate, isRequired: true, onChange: (newValue) => {
                 updateStudentViewModel('birthDate', newValue);
                 updateFieldValidationErrorsByFieldId('birthDate', newValue, verificationService);
-            }, value: viewModel.birthDate }),
+            } }),
         React.createElement(EmailComponent, { value: viewModel.email, isErrored: !!fieldValidationErrors.email, explanation: (React.createElement(FormattedHTMLMessage, { id: "emailExplanation", defaultMessage: "Personal or school email is fine" })), onChange: (newValue) => {
                 updateStudentViewModel('email', newValue);
                 updateFieldValidationErrorsByFieldId('email', newValue, verificationService);
@@ -16480,7 +16477,7 @@ const StepStudentPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateStudentViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateStudentViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
@@ -16504,11 +16501,7 @@ const PostalCodeInputComponent = injectIntl(PostalCodeInput);
 
 const PostalCodeComponent = ({ value, isErrored, onChange, explanation, }) => (React.createElement("div", { className: "sid-field sid-postal-code" },
     React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-postal-code" },
-        React.createElement("div", { className: "sid-field__label-with-explanation sid-l-space-btm-sm" },
-            React.createElement("div", { className: "sid-field__label sid-field__label--required" },
-                React.createElement(FormattedMessage, { id: "postalCode", defaultMessage: "Postal Code" })),
-            explanation ? (React.createElement("div", { className: "sid-field__label-explanation" }, explanation)) : null)),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "postalCode", defaultMessage: "Postal Code" }), htmlForLabel: "sid-postal-code", id: "sid-postal-code-label", displayClasses: "sid-field__label-with-explanation" }, explanation && explanation),
     React.createElement(PostalCodeInputComponent, { value: value, isValid: !isErrored, onChange: onChange }),
     isErrored ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidPostalCode", defaultMessage: "Invalid postal code" }))) : null));
@@ -16571,7 +16564,7 @@ const StepSeniorPersonalInfo = ({ verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateSeniorViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateSeniorViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
@@ -16609,10 +16602,7 @@ const carrierConsentValueValidator = (countryChoiceValue) => (value, programThem
 
 const City = ({ value, isErrored, onChange, intl, onKeyDown = undefined, placeholder = '', }) => (React.createElement("div", { className: "sid-field sid-city" },
     React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-city" },
-        React.createElement("div", { className: `sid-field__label sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-            React.createElement("div", { className: "sid-field__label sid-field__label--required" },
-                React.createElement(FormattedHTMLMessage, { id: "city", defaultMessage: "City" })))),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "city", defaultMessage: "City" }), htmlForLabel: "sid-city", id: "sid-city-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
     React.createElement(InputTextComponent, { id: "city", isErrored: isErrored, onChange: e => onChange(e.target.value), onKeyDown: typeof onKeyDown === 'function' ? e => onKeyDown(e) : undefined, placeholder: placeholder || intl.formatMessage({ id: 'cityPlaceholder', defaultMessage: 'City*' }), value: value }),
     isErrored ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidCity", defaultMessage: "Invalid city" }))) : null));
@@ -16620,10 +16610,7 @@ const CityComponent = injectIntl(City);
 
 const Address = ({ value, isErrored, onChange, intl, onKeyDown = undefined, placeholder = '', }) => (React.createElement("div", { className: "sid-field sid-address" },
     React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-address" },
-        React.createElement("div", { className: `sid-field__label sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-            React.createElement("div", { className: "sid-field__label sid-field__label--required" },
-                React.createElement(FormattedHTMLMessage, { id: "address", defaultMessage: "Address" })))),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "address", defaultMessage: "Address" }), htmlForLabel: "sid-address", id: "sid-address-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
     React.createElement(InputTextComponent, { id: "address", isErrored: isErrored, onChange: e => onChange(e.target.value), onKeyDown: typeof onKeyDown === 'function' ? e => onKeyDown(e) : undefined, placeholder: placeholder || intl.formatMessage({ id: 'addressPlaceholder', defaultMessage: 'Address*' }), value: value }),
     isErrored ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidAddress", defaultMessage: "Invalid address" }))) : null));
@@ -16741,10 +16728,10 @@ const StepAgePersonalInfo = ({ verificationService, intl }) => {
                 updateFieldValidationErrorsByFieldId('email', newValue, verificationService);
             }, onKeyDown: event => handleEmailOnKeyDown(event) }),
         (displayPhoneNumber(safeCountryValue, smsLoopEnabled) || isSmsNotifierConfigured)
-            && (React.createElement(PhoneNumberComponent, { value: viewModel.phoneNumber, internationalSupport: true, isRequired: (verificationService.programTheme.smsLoopEnabled) || safeCountryValue !== 'US', isErrored: !!fieldValidationErrors.phoneNumber, displaySmsConsent: isSmsNotifierConfigured, onChange: (value) => {
+            && (React.createElement(PhoneNumberComponent, { value: viewModel.phoneNumber, isRequired: (verificationService.programTheme.smsLoopEnabled) || safeCountryValue !== 'US', isErrored: !!fieldValidationErrors.phoneNumber, displaySmsConsent: isSmsNotifierConfigured, onChange: (value) => {
                     updateAgeViewModel('phoneNumber', value);
                     updateFieldValidationErrorsByFieldId('phoneNumber', value, verificationService);
-                }, errorId: fieldValidationErrors.phoneNumber, requireCarrierConsent: verificationService.programTheme.smsLoopEnabled || safeCountryValue !== 'US', onCarrierConsentChange: onCarrierConsentChange, carrierConsent: Boolean(viewModel.metadata && viewModel.metadata.carrierConsentValue) })),
+                }, errorId: fieldValidationErrors.phoneNumber, requireCarrierConsent: verificationService.programTheme.smsLoopEnabled || safeCountryValue !== 'US', onCarrierConsentChange: onCarrierConsentChange, carrierConsent: Boolean(viewModel.metadata && viewModel.metadata.carrierConsentValue), selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateAgeViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
                 updateFieldValidationErrorsByFieldId('marketConsentValue', newValue, verificationService);
@@ -16772,9 +16759,7 @@ const TeacherSchool = ({ value, isErrored, onChange, verificationService, intl,
     const searchTags = getOrgSearchCountryTags(verificationService.programTheme, country);
     return (React.createElement("div", { className: "sid-field sid-teacher-school-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: id },
-            React.createElement("div", { id: `${id}-label`, className: "sid-field__label sid-field__label--required sid-l-space-btm-sm" },
-                React.createElement(FormattedHTMLMessage, { id: "schoolName", defaultMessage: "School name" }))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "schoolName", defaultMessage: "School name" }), htmlForLabel: id, id: `${id}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only' }),
         React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: country, onChange: (choice) => onChange(choice), minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, placeholder: placeholder || intl.formatMessage({ id: 'schoolNamePlaceholder', defaultMessage: 'University / College name*' }), programId: programId, value: value, inputHtmlId: id, openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl, orgSearchTags: searchTags, locale: locale, urlAddSchoolForm: urlAddSchoolForm, isRequired: true }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
@@ -16836,7 +16821,7 @@ const StepTeacherPersonalInfo = ({ intl, verificationService }) => {
         localeChoices.length > 1
             ? (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) }))
             : null,
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, nextFocusField: "organization" }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
         React.createElement(TeacherSchoolComponent, { value: verificationService.viewModel.organization, verificationService: verificationService, isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId('organization', choice, verificationService);
@@ -16864,7 +16849,7 @@ const StepTeacherPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateTeacherViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         shouldCollectPostalCode(verificationService.programTheme, viewModel)
             ? (React.createElement(PostalCodeComponent, { isErrored: !!fieldValidationErrors.postalCode, onChange: (newValue) => {
@@ -16892,10 +16877,7 @@ const MemberId = ({ value, isErrored, onChange, explanation, intl, placeholder =
         : '');
     return (React.createElement("div", { className: "sid-field sid-member-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-member-id" },
-            React.createElement("div", { className: `sid-field__label-with-explanation sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-                React.createElement("div", { className: `sid-field__label${isRequired ? ' sid-field__label--required' : ''} ` }, label || (React.createElement(FormattedHTMLMessage, { id: "memberId", defaultMessage: "ID Number" }))),
-                React.createElement("div", { className: "sid-field__label-explanation" }, explanation || getDefaultExplanation()))),
+        React.createElement(FieldLabel, { text: label || React.createElement(FormattedHTMLMessage, { id: "memberId", defaultMessage: "ID Number" }), htmlForLabel: "sid-member-id", id: "sid-member-id-label", displayClasses: `sid-field__label-with-explanation${placeholder && ' sid-h-screen-reader-only'}`, isRequired: isRequired }, explanation || getDefaultExplanation()),
         React.createElement(InputTextComponent, { id: "member-id", isErrored: isErrored, onChange: e => onChange(e.target.value), placeholder: placeholder || intl.formatMessage({ id: 'memberIdPlaceholder', defaultMessage: 'ID Number*' }), refId: "memberId", value: value }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidMemberId", defaultMessage: "Invalid ID Number" }))) : null));
@@ -16906,9 +16888,7 @@ const MembershipOrganization = ({ value, isErrored, onChange, verificationServic
     const { programId } = verificationService;
     return (React.createElement("div", { className: "sid-field sid-membership-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-membership" },
-            React.createElement("div", { className: "sid-field__label sid-field__label--required sid-l-space-btm-sm" },
-                React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization name" }))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization" }), htmlForLabel: "sid-membership", id: "sid-membership-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
         React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: getSafe(() => verificationService.viewModel.countryChoice.value), onChange: (choice) => onChange(choice), minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, placeholder: placeholder || intl.formatMessage({ id: 'organizationNamePlaceholder', defaultMessage: 'Organization*' }), programId: programId, value: value, inputHtmlId: "sid-membership", openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
@@ -16960,7 +16940,7 @@ const StepMemberPersonalInfo = ({ intl, verificationService }) => {
         localeChoices.length > 1
             ? (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) }))
             : null,
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, nextFocusField: "organization" }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
         React.createElement(MembershipOrganizationComponent, { value: verificationService.viewModel.organization, verificationService: verificationService, isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId('organization', choice, verificationService);
@@ -16990,7 +16970,7 @@ const StepMemberPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateMemberViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateMemberViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
@@ -17018,14 +16998,15 @@ const compareLabel = (a, b) => {
 };
 const SortByLabel = (choices) => choices.sort(compareLabel);
 
-const MilitaryStatus = ({ value, isErrored, options, onChange, intl, placeholder = '', }) => (React.createElement("div", { className: "sid-field sid-military-status" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-military-status" },
-        React.createElement("div", { id: "sid-military-status-label", className: "sid-field__label sid-field__label--required sid-military-status__label sid-l-space-btm-sm" },
-            React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }))),
-    React.createElement(InputSelectComponent, { fieldId: "status", inputId: "sid-military-status", isErrored: isErrored, options: SortByLabel(options), onChange: (status) => onChange(status), value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }) }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidStatus", defaultMessage: "Invalid military status" }))) : null));
+const MilitaryStatus = ({ value, isErrored, options, onChange, intl, placeholder = '', }) => {
+    const inputId = 'sid-military-status';
+    return (React.createElement("div", { className: `sid-field ${inputId}` },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only' }),
+        React.createElement(InputSelectComponent, { fieldId: "status", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: SortByLabel(options), onChange: (status) => onChange(status), value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }) }),
+        isErrored ? (React.createElement("div", { className: "sid-field-error" },
+            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidStatus", defaultMessage: "Invalid military status" }))) : null));
+};
 const MilitaryStatusComponent = injectIntl(MilitaryStatus);
 
 const orgsInStatus = (status) => (org) => {
@@ -17059,6 +17040,7 @@ const updateMilitaryViewModel = (key, value, verificationService, availableStatu
 const BranchOfService = ({ autoFocus, onChange, value, isErrored, organizations, verificationService, intl, placeholder = '', }) => {
     let options = [];
     const { status } = verificationService.viewModel;
+    const inputId = 'sid-branch-of-service';
     if (organizations)
         options = organizations.filter(orgsInStatus(status)).map(orgToOption);
     const handleStateChange = (selectedOrgOption, onChange) => {
@@ -17075,12 +17057,10 @@ const BranchOfService = ({ autoFocus, onChange, value, isErrored, organizations,
             });
         }
     };
-    return (React.createElement("div", { className: "sid-field sid-branch-of-service-id" },
+    return (React.createElement("div", { className: `sid-field ${inputId}-id` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-branch-of-service" },
-            React.createElement("div", { id: "sid-branch-of-service-label", className: "sid-field__label sid-field__label--required sid-l-space-btm-sm" },
-                React.createElement(FormattedHTMLMessage, { id: "branchOfService", defaultMessage: "Branch Of Service" }))),
-        React.createElement(InputSelectComponent, { autoFocus: autoFocus, fieldId: "organization", inputId: "sid-branch-of-service", isErrored: isErrored, options: SortByLabel(options), onChange: (branch) => handleStateChange(branch, onChange), value: value, placeholder: placeholder || intl.formatMessage({ id: 'branchOfServicePlaceholder', defaultMessage: 'Branch Of Service*' }) }),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "branchOfService", defaultMessage: "Branch Of Service" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only' }),
+        React.createElement(InputSelectComponent, { autoFocus: autoFocus, fieldId: "organization", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: SortByLabel(options), onChange: (branch) => handleStateChange(branch, onChange), value: value, placeholder: placeholder || intl.formatMessage({ id: 'branchOfServicePlaceholder', defaultMessage: 'Branch Of Service*' }) }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
 };
@@ -17130,7 +17110,7 @@ const StepActiveMilitaryPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                     React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                     React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, nextFocusField: "status" }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
         availableStatuses
             ? (React.createElement(MilitaryStatusComponent, { value: {
                     value: viewModel.status,
@@ -17170,7 +17150,7 @@ const StepActiveMilitaryPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateActiveMilitaryViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateActiveMilitaryViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
@@ -17193,6 +17173,7 @@ const DischargeDate = ({ onChange, intl, isErrored, value, }) => {
     const dischargeDateDay = 1;
     const minDischargeYear = 1900;
     const thisYear = new Date().getFullYear();
+    const inputId = 'sid-discharge-date';
     const months = [
         { value: '1', label: intl.formatMessage({ id: 'dateTime.january', defaultMessage: 'January' }) },
         { value: '2', label: intl.formatMessage({ id: 'dateTime.february', defaultMessage: 'February' }) },
@@ -17242,16 +17223,12 @@ const DischargeDate = ({ onChange, intl, isErrored, value, }) => {
             }
         }
     };
-    return (React.createElement("div", { className: "sid-field sid-discharge-date" },
+    return (React.createElement("div", { className: `sid-field ${inputId}` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-discharge-date__month" },
-            React.createElement("div", { className: "sid-field__label-with-explanation sid-l-space-btm-sm" },
-                React.createElement("div", { className: "sid-field__label sid-field__label--required" },
-                    React.createElement(FormattedHTMLMessage, { id: "dischargeDate", defaultMessage: "Discharge date" })),
-                React.createElement("div", { className: "sid-field__label-explanation" },
-                    React.createElement(FormattedHTMLMessage, { id: "verificationPurposesOnly", defaultMessage: "Used for verification purposes only" })))),
-        React.createElement("div", { className: "sid-discharge-date__inputs" },
-            React.createElement(InputSelectComponent, { className: "sid-discharge-date__month", fieldId: "dischargeDate", inputId: "sid-discharge-date__month", isErrored: isErrored, options: months, onKeyDown: event => handleOnKeyDown(event), onChange: (choice) => {
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "dischargeDate", defaultMessage: "Discharge date" }), htmlForLabel: `${inputId}__month`, id: `${inputId}-label`, displayClasses: "sid-field__label-with-explanation" },
+            React.createElement(FormattedHTMLMessage, { id: "verificationPurposesOnly", defaultMessage: "Used for verification purposes only" })),
+        React.createElement("div", { className: `${inputId}__inputs` },
+            React.createElement(InputSelectComponent, { className: `${inputId}__month`, fieldId: "dischargeDate", inputId: `${inputId}__month`, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: months, onKeyDown: event => handleOnKeyDown(event), onChange: (choice) => {
                     if (choice) {
                         updateDischargeMonth(choice.value);
                     }
@@ -17259,8 +17236,8 @@ const DischargeDate = ({ onChange, intl, isErrored, value, }) => {
                         // clear the discharge month
                         updateDischargeMonth(null);
                     }
-                }, placeholder: intl.formatMessage({ id: 'dateTime.month', defaultMessage: 'Month' }), suppressPlaceholder: false, value: dischargeDateMonth ? months[dischargeDateMonth - 1] : undefined, buttonRef: "inputSelectButtonDischargeDate" }),
-            React.createElement(InputTextComponent, { className: "sid-discharge-date__year", id: "discharge-date-year", isErrored: isErrored, max: thisYear, min: minDischargeYear, onBlur: getDischargeDate, onChange: e => updateDischargeYear(e.target.value), pattern: "\\d*", placeholder: intl.formatMessage({ id: 'dateTime.year', defaultMessage: 'Year' }), hidePlaceholder: false, refId: "dischargeDateYear", required: true, value: dischargeDateYear || '' })),
+                }, placeholder: intl.formatMessage({ id: 'dateTime.month', defaultMessage: 'Month' }), suppressPlaceholder: false, value: dischargeDateMonth ? months[dischargeDateMonth - 1] : undefined, buttonRef: "inputSelectButtonDischargeDate", isRequired: true }),
+            React.createElement(InputTextComponent, { className: `${inputId}__year`, id: "discharge-date-year", isErrored: isErrored, max: thisYear, min: minDischargeYear, onBlur: getDischargeDate, onChange: e => updateDischargeYear(e.target.value), pattern: "\\d*", placeholder: intl.formatMessage({ id: 'dateTime.year', defaultMessage: 'Year' }), hidePlaceholder: false, refId: "dischargeDateYear", required: true, value: dischargeDateYear || '' })),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidDischargeDate", defaultMessage: "Invalid discharge date" }))) : null));
 };
@@ -17313,7 +17290,7 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService }) => {
                     "\u00A0",
                     React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                     React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, nextFocusField: "status" }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
         availableStatuses
             ? (React.createElement(MilitaryStatusComponent, { value: {
                     value: viewModel.status,
@@ -17355,7 +17332,7 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateInactiveMilitaryViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateInactiveMilitaryViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
@@ -17371,23 +17348,22 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService }) => {
 };
 const StepInactiveMilitaryPersonalInfoComponent = injectIntl(StepInactiveMilitaryPersonalInfo);
 
-const FirstResponderStatus = ({ value, isErrored, options, onChange, placeholder = '', intl, onKeyDown = undefined, }) => (React.createElement("div", { className: "sid-field sid-first-responder-status" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-first-responder-status" },
-        React.createElement("div", { id: "sid-first-responder-status-label", className: "sid-field__label sid-field__label--required sid-first-responder-status__label sid-l-space-btm-sm" },
-            React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }))),
-    React.createElement(InputSelectComponent, { fieldId: "status", inputId: "sid-first-responder-status", isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }) }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidStatus", defaultMessage: "Invalid first responder status" }))) : null));
+const FirstResponderStatus = ({ value, isErrored, options, onChange, placeholder = '', intl, onKeyDown = undefined, }) => {
+    const inputId = 'sid-first-responder-status';
+    return (React.createElement("div", { className: `sid-field ${inputId}` },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }), htmlForLabel: `${inputId}`, id: `${inputId}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only' }),
+        React.createElement(InputSelectComponent, { fieldId: "status", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }) }),
+        isErrored ? (React.createElement("div", { className: "sid-field-error" },
+            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidStatus", defaultMessage: "Invalid first responder status" }))) : null));
+};
 const FirstResponderStatusComponent = injectIntl(FirstResponderStatus);
 
 const FirstResponderOrganization = ({ onChange, value, isErrored, verificationService, intl, placeholder = '', }) => {
     const { programId } = verificationService;
     return (React.createElement("div", { className: "sid-field sid-first-responder-organization-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-first-responder-organization" },
-            React.createElement("div", { id: "sid-first-responder-organization-label", className: "sid-field__label sid-field__label--required sid-l-space-btm-sm" },
-                React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization" }))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization" }), htmlForLabel: "sid-first-responder-organization", id: "sid-first-responder-organization-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
         React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: getSafe(() => verificationService.viewModel.countryChoice.value), minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, onChange: (choice) => onChange(choice), placeholder: placeholder || intl.formatMessage({ id: 'organizationPlaceholder', defaultMessage: 'Organization*' }), programId: programId, value: value, inputHtmlId: "sid-first-responder-organization", openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
@@ -17419,12 +17395,6 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService }) => {
         });
         return availableStatuses;
     };
-    const handleFirstResponderStatusOnKeyDown = (event) => {
-        if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault();
-            setFocus('organization');
-        }
-    };
     const collectPostalCode = getSafe(() => verificationService.programTheme.openOrgSearchEnabled)
         && getSafe(() => viewModel.organization.id) === 0
         && getSafe(() => viewModel.organization.name, '').length > 0;
@@ -17454,17 +17424,14 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                     React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                     React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, nextFocusField: "status" }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
         React.createElement(FirstResponderStatusComponent, { value: {
                 value: viewModel.status,
                 label: getStatusLabel(intl, viewModel.status, FirstResponderStatusDefaultMessagesEnum),
             }, isErrored: !!fieldValidationErrors.status, options: getAvailableFirstResponderStatuses(), onChange: (status) => {
                 updateFirstResponderViewModel('status', status ? status.value : '');
                 updateFieldValidationErrorsByFieldId('status', status ? status.value : '', verificationService);
-                if (status) {
-                    setFocus('organization');
-                }
-            }, onKeyDown: event => handleFirstResponderStatusOnKeyDown(event) }),
+            } }),
         React.createElement(FirstResponderOrganizationComponent, { isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId('organization', choice, verificationService);
@@ -17490,7 +17457,7 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateFirstResponderViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         collectPostalCode
             ? (React.createElement(PostalCodeComponent, { isErrored: !!fieldValidationErrors.postalCode, onChange: (newValue) => {
@@ -17513,13 +17480,11 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService }) => {
 const StepFirstResponderPersonalInfoComponent = injectIntl(StepFirstResponderPersonalInfo);
 
 const MedicalStatus = ({ value, isErrored, options, onChange, intl, placeholder = '', onKeyDown = undefined, }) => {
-    const id = 'sid-medical-status';
-    return (React.createElement("div", { className: "sid-field sid-medical-status" },
+    const inputId = 'sid-medical-status';
+    return (React.createElement("div", { className: `sid-field ${inputId}` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: id },
-            React.createElement("div", { id: `${id}-label`, className: "sid-field__label sid-field__label--required sid-medical-status__label sid-l-space-btm-sm" },
-                React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }))),
-        React.createElement(InputSelectComponent, { fieldId: "status", inputId: id, isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }), isRequired: true }),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only' }),
+        React.createElement(InputSelectComponent, { fieldId: "status", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }), isRequired: true }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidStatus", defaultMessage: "Invalid medical status" }))) : null));
 };
@@ -17530,9 +17495,7 @@ const MedicalProfessionalOrganization = ({ onChange, value, isErrored, verificat
     const id = 'sid-medical-professional-organization';
     return (React.createElement("div", { className: "sid-field sid-medical-professional-organization-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: id },
-            React.createElement("div", { id: `${id}-label`, className: "sid-field__label sid-field__label--required sid-l-space-btm-sm" },
-                React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization" }))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization" }), htmlForLabel: id, id: `${id}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only' }),
         React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: getSafe(() => verificationService.viewModel.countryChoice.value), minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, onChange: (choice) => onChange(choice), placeholder: placeholder || intl.formatMessage({ id: 'organizationPlaceholder', defaultMessage: 'Organization*' }), programId: programId, value: value, inputHtmlId: id, openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl, isRequired: true }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
@@ -17572,12 +17535,6 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService }) => {
         });
         return availableStatuses;
     };
-    const handleMedicalStatusOnKeyDown = (event) => {
-        if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault();
-            setFocus('organization');
-        }
-    };
     React.useEffect(() => {
         (async () => {
             if (viewModel.country && viewModel.status) {
@@ -17625,10 +17582,7 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService }) => {
             }, isErrored: !!fieldValidationErrors.status, options: getAvailableMedicalStatuses(), onChange: (status) => {
                 updateMedicalProfessionalViewModel('status', status ? status.value : '');
                 updateFieldValidationErrorsByFieldId('status', status ? status.value : '', verificationService);
-                if (status) {
-                    setFocus('organization');
-                }
-            }, onKeyDown: event => handleMedicalStatusOnKeyDown(event) }),
+            } }),
         React.createElement(MedicalProfessionalOrganizationComponent, { isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId('organization', choice, verificationService);
@@ -17658,7 +17612,7 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateMedicalProfessionalViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         showMemberId && (React.createElement(MemberIdComponent, { value: viewModel.memberId, isErrored: !!fieldValidationErrors.memberId, isRequired: false, onChange: (newValue) => {
                 updateMedicalProfessionalViewModel('memberId', newValue);
@@ -17680,10 +17634,7 @@ const StepMedicalProfessionalPersonalInfoComponent = injectIntl(StepMedicalProfe
 
 const State = ({ value, isErrored, onChange, intl, onKeyDown = undefined, placeholder = '', }) => (React.createElement("div", { className: "sid-field sid-state" },
     React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-state" },
-        React.createElement("div", { className: `sid-field__label sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-            React.createElement("div", { className: "sid-field__label sid-field__label--required" },
-                React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State" })))),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State" }), htmlForLabel: "sid-state", id: "sid-state-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
     React.createElement(InputTextComponent, { id: "state", isErrored: isErrored, onChange: e => onChange(e.target.value), onKeyDown: typeof onKeyDown === 'function' ? e => onKeyDown(e) : undefined, placeholder: placeholder || intl.formatMessage({ id: 'statePlaceholder', defaultMessage: 'State*' }), value: value }),
     isErrored ? (React.createElement("div", { className: "sid-field-error" },
         React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
@@ -17693,9 +17644,7 @@ const Company = ({ onChange, value, isErrored, verificationService, intl, placeh
     const { programId } = verificationService;
     return (React.createElement("div", { className: "sid-field sid-company-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-company" },
-            React.createElement("div", { className: `sid-field__label sid-field__label--required sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-                React.createElement(FormattedHTMLMessage, { id: "company", defaultMessage: "Company" }))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "company", defaultMessage: "Company" }), htmlForLabel: "sid-company", id: "sid-company-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
         React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: getSafe(() => verificationService.viewModel.countryChoice.value), minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, onChange: (choice) => onChange(choice), placeholder: placeholder || intl.formatMessage({ id: 'companyPlaceholder', defaultMessage: 'Company*' }), programId: programId, value: value, inputHtmlId: "sid-company", openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
@@ -17725,7 +17674,7 @@ const StepEmploymentPersonalInfo = ({ verificationService }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService }))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, nextFocusField: "organization", viewModelDraftDecorator: (draft, countryChoice) => {
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, viewModelDraftDecorator: (draft, countryChoice) => {
                 const viewModel = draft;
                 viewModel.shouldCollectAddress = shouldCollectAddressFields(countryChoice, verificationService.programTheme.config.countries);
                 if (!viewModel.shouldCollectAddress) {
@@ -17781,7 +17730,7 @@ const StepEmploymentPersonalInfo = ({ verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateEmploymentViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateEmploymentViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
@@ -17803,11 +17752,7 @@ const DriverLicenseNumber = ({ value, isErrored, onChange, explanation, intl, pl
         : '');
     return (React.createElement("div", { className: "sid-field sid-driver-license-number" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-driver-license-number" },
-            React.createElement("div", { className: `sid-field__label-with-explanation sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-                React.createElement("div", { className: `sid-field__label${isRequired ? ' sid-field__label--required' : ''} ` },
-                    React.createElement(FormattedHTMLMessage, { id: "driverLicenseNumber", defaultMessage: "Driver license number" })),
-                React.createElement("div", { className: "sid-field__label-explanation" }, explanation || getDefaultExplanation()))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "driverLicenseNumber", defaultMessage: "Driver license number" }), htmlForLabel: "sid-driver-license-number", id: "sid-driver-license-number-label", displayClasses: `sid-field__label-with-explanation${placeholder && ' sid-h-screen-reader-only'}`, isRequired: isRequired }, explanation || getDefaultExplanation()),
         React.createElement(InputTextComponent, { id: "driver-license-number", isErrored: isErrored, onChange: e => onChange(e.target.value), placeholder: placeholder
                 || intl.formatMessage({
                     id: 'driverLicenseNumberPlaceholder',
@@ -17818,16 +17763,18 @@ const DriverLicenseNumber = ({ value, isErrored, onChange, explanation, intl, pl
 };
 const DriverLicenseNumberComponent = injectIntl(DriverLicenseNumber);
 
-const StateSelect = ({ value, isErrored, options, onChange, onKeyDown, intl, placeholder = '', label = '', isRequired = false, }) => (React.createElement("div", { className: "sid-field sid-state" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement("label", { htmlFor: "sid-state" },
-        React.createElement("div", { className: `sid-field__label sid-state__label sid-l-space-btm-sm${isRequired ? ' sid-field__label--required' : ''}` }, label || (React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State where you live" })))),
-    React.createElement(InputSelectComponent, { fieldId: "state", inputId: "sid-state", isErrored: isErrored, options: options, onChange: (state) => onChange(state), onKeyDown: onKeyDown, placeholder: placeholder || intl.formatMessage({ id: 'statePlaceholder', defaultMessage: isRequired ? 'State*' : 'State' }), value: value ? {
-            value: value.value,
-            label: intl.formatMessage({ id: `states.${value.value}`, defaultMessage: value.label || value.value }),
-        } : undefined }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
+const StateSelect = ({ value, isErrored, options, onChange, onKeyDown, intl, placeholder = '', label = '', isRequired = false, }) => {
+    const inputId = 'sid-state';
+    return (React.createElement("div", { className: `sid-field ${inputId}` },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement(FieldLabel, { text: label || React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State where you live" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only', isRequired: isRequired }),
+        React.createElement(InputSelectComponent, { fieldId: "state", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (state) => onChange(state), onKeyDown: onKeyDown, placeholder: placeholder || intl.formatMessage({ id: 'statePlaceholder', defaultMessage: isRequired ? 'State*' : 'State' }), value: value ? {
+                value: value.value,
+                label: intl.formatMessage({ id: `states.${value.value}`, defaultMessage: value.label || value.value }),
+            } : undefined }),
+        isErrored ? (React.createElement("div", { className: "sid-field-error" },
+            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
+};
 const StateSelectComponent = injectIntl(StateSelect);
 
 /**
@@ -17882,7 +17829,7 @@ const StepDriverLicensePersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateIdentityViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(StateSelectComponent, { isRequired: true, options: getAvailableStateChoices(verificationService.programTheme, intl), value: viewModel.state || undefined, isErrored: Boolean(fieldValidationErrors.state), onChange: async (stateChoice) => {
                 const stateValue = stateChoice ? stateChoice.value : undefined;
@@ -17959,7 +17906,7 @@ const StepGeneralIdentityPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateIdentityViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(BirthDateComponent, { isErrored: !!fieldValidationErrors.birthDate, errorId: fieldValidationErrors.birthDate, onChange: (newValue) => {
                 updateIdentityViewModel('birthDate', newValue);
@@ -18049,7 +17996,7 @@ const StepHybridIdentityPersonalInfo = ({ intl, verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateIdentityViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(BirthDateComponent, { isErrored: !!fieldValidationErrors.birthDate, errorId: fieldValidationErrors.birthDate, onChange: (newValue) => {
                 updateIdentityViewModel('birthDate', newValue);
@@ -18092,13 +18039,11 @@ const StepHybridIdentityPersonalInfo = ({ intl, verificationService }) => {
 const StepHybridIdentityPersonalInfoComponent = injectIntl(StepHybridIdentityPersonalInfo);
 
 const Status = ({ value, isErrored, options, onChange, intl, placeholder = '', onKeyDown = undefined, segmentId = '', }) => {
-    const id = `sid-${segmentId}-status`;
-    return (React.createElement("div", { className: `sid-field sid-${segmentId}-status` },
+    const inputId = `sid-${segmentId}-status`;
+    return (React.createElement("div", { className: `sid-field ${inputId}` },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: id },
-            React.createElement("div", { id: `${id}-label`, className: `sid-field__label sid-field__label--required sid-${segmentId}-status__label sid-l-space-btm-sm` },
-                React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }))),
-        React.createElement(InputSelectComponent, { fieldId: "status", inputId: id, isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }), isRequired: true }),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "status", defaultMessage: "Status" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && 'sid-h-screen-reader-only' }),
+        React.createElement(InputSelectComponent, { fieldId: "status", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (status) => onChange(status), onKeyDown: onKeyDown, value: value, placeholder: placeholder || intl.formatMessage({ id: 'statusPlaceholder', defaultMessage: 'Status*' }), isRequired: true }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidStatus", defaultMessage: "Invalid status" }))) : null));
 };
@@ -18108,9 +18053,7 @@ const LicensedProfessionalOrganization = ({ value, isErrored, onChange, verifica
     const { programId } = verificationService;
     return (React.createElement("div", { className: "sid-field sid-licensed-professional-id" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-licensed-professional" },
-            React.createElement("div", { className: "sid-field__label sid-field__label--required sid-l-space-btm-sm" },
-                React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization or Licensing Body" }))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "organization", defaultMessage: "Organization" }), htmlForLabel: "sid-licensed-professional", id: "sid-licensed-professional-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
         React.createElement(TypeaheadComponent, { className: isErrored ? 'sid-text-input--error' : '', countryCode: getSafe(() => verificationService.viewModel.countryChoice.value), onChange: (choice) => onChange(choice), minimumSearchValueLength: getOptions().minimumOrganizationSearchLength, placeholder: placeholder || intl.formatMessage({ id: 'organizationNamePlaceholder', defaultMessage: 'Organization*' }), programId: programId, value: value, inputHtmlId: "sid-licensed-professional", openOrgSearchEnabled: verificationService.programTheme.openOrgSearchEnabled, orgSearchUrl: verificationService.programTheme.config.orgSearchUrl }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidOrganization", defaultMessage: "You must select an organization from the list" }))) : null));
@@ -18153,12 +18096,6 @@ const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService }) =>
         }
         return availableStatuses;
     };
-    const handleLicensedProfessionalStatusOnKeyDown = (event) => {
-        if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault();
-            setFocus('organization');
-        }
-    };
     return (React.createElement("div", { id: "sid-step-licensed-professional-personal-info", className: "sid-l-container" },
         failedInstantMatch ? React.createElement("p", null, "Failied instant match")
             : (React.createElement("div", { className: "sid-header" },
@@ -18178,10 +18115,7 @@ const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService }) =>
                 const updatedStatuses = status ? [status.value] : [];
                 updateLicensedProfessionalViewModel('statuses', updatedStatuses);
                 updateFieldValidationErrorsByFieldId('statuses', status ? status.value : '', verificationService);
-                if (status) {
-                    setFocus('organization');
-                }
-            }, onKeyDown: event => handleLicensedProfessionalStatusOnKeyDown(event) }),
+            } }),
         React.createElement(LicensedProfessionalOrganizationComponent, { isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId('organization', choice, verificationService);
@@ -18280,7 +18214,7 @@ const StepMoverPersonalInfo = ({ verificationService }) => {
             ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
                     updateMoverViewModel('phoneNumber', newValue);
                     updateFieldValidationErrorsByFieldId('phoneNumber', newValue, verificationService);
-                } }))
+                }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value }))
             : null,
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateMoverViewModel('metadata', { ...verificationService.viewModel.metadata, marketConsentValue: newValue });
@@ -18337,9 +18271,7 @@ const SocialSecurity = ({ value, isErrored, onChange, intl, placeholder = '', })
     };
     return (React.createElement("div", { className: "sid-field sid-ssn" },
         React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement("label", { htmlFor: "sid-ssn" },
-            React.createElement("div", { className: `sid-field__label sid-field__label--required sid-l-space-btm-sm ${placeholder ? 'sid-h-screen-reader-only' : ''}` },
-                React.createElement(FormattedHTMLMessage, { id: "ssn", defaultMessage: "Social Security Number" }))),
+        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "ssn", defaultMessage: "Social Security Number" }), htmlForLabel: "sid-ssn", id: "sid-ssn-label", displayClasses: placeholder && 'sid-h-screen-reader-only' }),
         React.createElement(InputTextComponent, { id: "ssn", refId: FieldIdEnum.socialSecurityNumber, className: "sid-ssn__input", isErrored: isErrored, required: true, placeholder: placeholder || intl.formatMessage({ id: 'ssnPlaceholder', defaultMessage: '000-00-0000' }), value: displaySSN(value), hidePlaceholder: false, onChange: e => changeSsn(unDisplaySSN(e.target.value)) }),
         isErrored ? (React.createElement("div", { className: "sid-field-error" },
             React.createElement(FormattedHTMLMessage, { id: "errorId.invalidSocialSecurityNumber", defaultMessage: "Invalid SSN" }))) : null));
@@ -18555,7 +18487,7 @@ const StepSuccess = ({ verificationService }) => {
             React.createElement("div", { className: "sid-l-horz-center" }, hasLogo
                 ? React.createElement(LogoComponent, { verificationService: verificationService })
                 : (React.createElement("img", { className: "sid-l-lead-image", alt: "design element", src: "https://s3.amazonaws.com/com.sheerid.resources/common/images/2018/icons/circle-check.svg" }))),
-            React.createElement("div", { className: "sid-header__title sid-l-horz-center sid-l-space-top-md" },
+            React.createElement("div", { className: "sid-header__title sid-l-horz-center sid-l-space-top-md", role: "alert", "aria-live": "polite" },
                 React.createElement(FormattedHTMLMessage, { id: "step.success.title", defaultMessage: "Success! You've been verified." })),
             React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center sid-l-two-thirds-width" },
                 React.createElement(FormattedHTMLMessage, { id: "step.success.subtitle", defaultMessage: `Here is your personal coupon code.