@sheerid/jslib 1.82.0 → 1.85.0

package/sheerides6.js

@@ -1131,7 +1131,7 @@ const defaultOptions = {
     urlMedicalFaq: 'https://verify.sheerid.com/us-medical-faq/',
     urlEmploymentFaq: 'https://verify.sheerid.com/employment-faq/',
     urlIdentityFaq: 'https://verify.sheerid.com/identity-faq/',
-    urlLicensedProfessionalFaq: 'https://verify.sheerid.com/licensed-professional-faq/',
+    urlLicensedProfessionalFaq: 'https://verify.sheerid.com/professions-faq/',
     urlAddSchoolFaq: 'https://verify.sheerid.com/add-school-request-faq/',
     urlAddSchoolForm: 'https://offers.sheerid.com/sheerid/add-school-request/',
     privacyPolicyUrl: undefined,
@@ -2622,118 +2622,118 @@ const getMessagesModuleByLocale = async (locale) => {
     /* tslint:disable:space-in-parens */
     switch (locale) {
         case 'ar':
-            localizedMessages = await import(/* webpackChunkName: "messages_ar" */ './es6/ar-9e0fad1f.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_ar" */ './es6/ar-45218d09.es.js').then(m => m.default);
             break;
         case 'bg':
-            localizedMessages = await import(/* webpackChunkName: "messages_bg" */ './es6/bg-2aca771b.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_bg" */ './es6/bg-9fc8dc83.es.js').then(m => m.default);
             break;
         case 'cs':
-            localizedMessages = await import(/* webpackChunkName: "messages_cs" */ './es6/cs-f5c83c6a.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_cs" */ './es6/cs-405794db.es.js').then(m => m.default);
             break;
         case 'da':
-            localizedMessages = await import(/* webpackChunkName: "messages_da" */ './es6/da-b8d9bd0b.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_da" */ './es6/da-aa14f8b8.es.js').then(m => m.default);
             break;
         case 'de':
-            localizedMessages = await import(/* webpackChunkName: "messages_de" */ './es6/de-0a779e2e.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_de" */ './es6/de-85ee9944.es.js').then(m => m.default);
             break;
         case 'el':
-            localizedMessages = await import(/* webpackChunkName: "messages_el" */ './es6/el-0408a569.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_el" */ './es6/el-578ba48b.es.js').then(m => m.default);
             break;
         case 'en-GB':
-            localizedMessages = await import(/* webpackChunkName: "messages_en-GB" */ './es6/en-GB-8b783a90.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_en-GB" */ './es6/en-GB-f4994296.es.js').then(m => m.default);
             break;
         case 'en-US':
             localizedMessages = enUSMessages;
             break;
         case 'es-ES':
-            localizedMessages = await import(/* webpackChunkName: "messages_es-ES" */ './es6/es-ES-0f1f844e.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_es-ES" */ './es6/es-ES-356fb969.es.js').then(m => m.default);
             break;
         case 'es':
-            localizedMessages = await import(/* webpackChunkName: "messages_es" */ './es6/es-20274dff.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_es" */ './es6/es-00de3342.es.js').then(m => m.default);
             break;
         case 'fi':
-            localizedMessages = await import(/* webpackChunkName: "messages_fi" */ './es6/fi-a7b09e0e.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_fi" */ './es6/fi-fb16dee9.es.js').then(m => m.default);
             break;
         case 'fr-CA':
-            localizedMessages = await import(/* webpackChunkName: "messages_fr-CA" */ './es6/fr-CA-77227517.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_fr-CA" */ './es6/fr-CA-0d541b88.es.js').then(m => m.default);
             break;
         case 'fr':
-            localizedMessages = await import(/* webpackChunkName: "messages_fr" */ './es6/fr-759c23ea.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_fr" */ './es6/fr-f339b695.es.js').then(m => m.default);
             break;
         case 'ga':
-            localizedMessages = await import(/* webpackChunkName: "messages_ga" */ './es6/ga-8ad780c1.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_ga" */ './es6/ga-2ef75556.es.js').then(m => m.default);
             break;
         case 'hr':
-            localizedMessages = await import(/* webpackChunkName: "messages_hr" */ './es6/hr-8f666201.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_hr" */ './es6/hr-9ea6b84e.es.js').then(m => m.default);
             break;
         case 'hu':
-            localizedMessages = await import(/* webpackChunkName: "messages_hu" */ './es6/hu-2d552fd1.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_hu" */ './es6/hu-f8d0f7b3.es.js').then(m => m.default);
             break;
         case 'id':
-            localizedMessages = await import(/* webpackChunkName: "messages_id" */ './es6/id-d4274ccb.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_id" */ './es6/id-20cc43df.es.js').then(m => m.default);
             break;
         case 'it':
-            localizedMessages = await import(/* webpackChunkName: "messages_it" */ './es6/it-e6743833.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_it" */ './es6/it-6e1647cb.es.js').then(m => m.default);
             break;
         case 'iw':
-            localizedMessages = await import(/* webpackChunkName: "messages_iw" */ './es6/iw-0aa73f61.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_iw" */ './es6/iw-9da3d502.es.js').then(m => m.default);
             break;
         case 'ja':
-            localizedMessages = await import(/* webpackChunkName: "messages_ja" */ './es6/ja-c1f752a6.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_ja" */ './es6/ja-fdb63bed.es.js').then(m => m.default);
             break;
         case 'ko':
-            localizedMessages = await import(/* webpackChunkName: "messages_ko" */ './es6/ko-bcddc775.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_ko" */ './es6/ko-600681df.es.js').then(m => m.default);
             break;
         case 'lo':
-            localizedMessages = await import(/* webpackChunkName: "messages_lo" */ './es6/lo-ab067913.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_lo" */ './es6/lo-b13786ca.es.js').then(m => m.default);
             break;
         case 'lt':
-            localizedMessages = await import(/* webpackChunkName: "messages_lt" */ './es6/lt-7f1cd913.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_lt" */ './es6/lt-86bcff40.es.js').then(m => m.default);
             break;
         case 'ms':
-            localizedMessages = await import(/* webpackChunkName: "messages_ms" */ './es6/ms-e3f64cc3.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_ms" */ './es6/ms-6cf76c5f.es.js').then(m => m.default);
             break;
         case 'nl':
-            localizedMessages = await import(/* webpackChunkName: "messages_nl" */ './es6/nl-7a4d62d2.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_nl" */ './es6/nl-1840217b.es.js').then(m => m.default);
             break;
         case 'no':
-            localizedMessages = await import(/* webpackChunkName: "messages_no" */ './es6/no-a25a637c.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_no" */ './es6/no-39cdc2f9.es.js').then(m => m.default);
             break;
         case 'pl':
-            localizedMessages = await import(/* webpackChunkName: "messages_pl" */ './es6/pl-8981210c.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_pl" */ './es6/pl-61f6449b.es.js').then(m => m.default);
             break;
         case 'pt-BR':
-            localizedMessages = await import(/* webpackChunkName: "messages_pt-BR" */ './es6/pt-BR-ea998ac8.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_pt-BR" */ './es6/pt-BR-b8d159b3.es.js').then(m => m.default);
             break;
         case 'pt':
-            localizedMessages = await import(/* webpackChunkName: "messages_pt" */ './es6/pt-db66cedf.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_pt" */ './es6/pt-5fd522ff.es.js').then(m => m.default);
             break;
         case 'ru':
-            localizedMessages = await import(/* webpackChunkName: "messages_ru" */ './es6/ru-b8865189.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_ru" */ './es6/ru-5b8abbc8.es.js').then(m => m.default);
             break;
         case 'sk':
-            localizedMessages = await import(/* webpackChunkName: "messages_sk" */ './es6/sk-43185e62.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_sk" */ './es6/sk-e1b4e309.es.js').then(m => m.default);
             break;
         case 'sl':
-            localizedMessages = await import(/* webpackChunkName: "messages_sl" */ './es6/sl-efe6c730.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_sl" */ './es6/sl-bfb1e97c.es.js').then(m => m.default);
             break;
         case 'sr':
-            localizedMessages = await import(/* webpackChunkName: "messages_sr" */ './es6/sr-a179f1ae.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_sr" */ './es6/sr-55cd6511.es.js').then(m => m.default);
             break;
         case 'sv':
-            localizedMessages = await import(/* webpackChunkName: "messages_sv" */ './es6/sv-28a792ba.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_sv" */ './es6/sv-65116117.es.js').then(m => m.default);
             break;
         case 'th':
-            localizedMessages = await import(/* webpackChunkName: "messages_th" */ './es6/th-243f9d7e.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_th" */ './es6/th-152afbae.es.js').then(m => m.default);
             break;
         case 'tr':
-            localizedMessages = await import(/* webpackChunkName: "messages_tr" */ './es6/tr-68ce213a.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_tr" */ './es6/tr-85a3c50d.es.js').then(m => m.default);
             break;
         case 'zh-HK':
-            localizedMessages = await import(/* webpackChunkName: "messages_zh-HK" */ './es6/zh-HK-cc047d27.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_zh-HK" */ './es6/zh-HK-2ded2e8e.es.js').then(m => m.default);
             break;
         case 'zh':
-            localizedMessages = await import(/* webpackChunkName: "messages_zh" */ './es6/zh-14c4dc8f.es.js').then(m => m.default);
+            localizedMessages = await import(/* webpackChunkName: "messages_zh" */ './es6/zh-c84d40ec.es.js').then(m => m.default);
             break;
         default:
             logger.warn(`getMessagesModuleByLocale: Unable to load messages for ${locale}, falling back to en-US`);
@@ -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
@@ -3326,6 +3326,7 @@ const licensedProfessionalPInfoReqEmpty = {
         name: '',
     },
     statuses: [],
+    metadata: { marketConsentValue: false },
 };
 const moverPInfoReqEmpty = {
     ...coreFieldsEmpty,
@@ -3431,7 +3432,6 @@ const getExtendedFieldValidationErrorsEmpty = () => {
 const GetEmptyTheme = () => ({
     intl: {
         locale: getLocaleSafely(),
-        // @ts-ignore
         messages: {},
     },
     customCss: '',
@@ -4567,7 +4567,7 @@ const adjustFirstErroredFieldId = (firstErroredFieldId) => {
  */
 const getFirstErroredFieldId = (fieldDisplayOrder, fieldValidationErrors) => {
     let firstErroredFieldId;
-    fieldDisplayOrder.forEach((field) => {
+    fieldDisplayOrder.reverse().forEach((field) => {
         if (fieldValidationErrors[field]) {
             firstErroredFieldId = field;
             return adjustFirstErroredFieldId(firstErroredFieldId);
@@ -4585,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) {
@@ -4694,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 = '';
@@ -4714,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));
@@ -4724,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));
@@ -4734,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));
@@ -9346,18 +9350,18 @@ const InputSelectListComponent = InputSelectList;
 const InputSelectButton = ({ clearSelection, disabled, getToggleButtonProps, isOpen, buttonRef, }) => {
     if (clearSelection) {
         return (React.createElement("button", { "aria-label": "clear selection", className: "sid-input-select-button", disabled: disabled, onClick: clearSelection, type: "button", tabIndex: 0, ref: input => setRef(buttonRef, input) },
-            React.createElement("svg", { viewBox: "0 0 20 20", preserveAspectRatio: "none", width: 12, fill: "transparent", stroke: "#979797", strokeWidth: "1.1px" },
+            React.createElement("svg", { viewBox: "0 0 20 20", preserveAspectRatio: "none", width: 12, fill: "transparent", stroke: "#8A8A8A", strokeWidth: "1.1px" },
                 React.createElement("path", { d: "M1,1 L19,19" }),
                 React.createElement("path", { d: "M19,1 L1,19" }))));
     }
     return (React.createElement("button", Object.assign({}, getToggleButtonProps(), { className: "sid-input-select-button", disabled: disabled, type: "button", tabIndex: 0, ref: input => setRef(buttonRef, input) }),
-        React.createElement("svg", { viewBox: "0 0 20 20", preserveAspectRatio: "none", width: 16, fill: "transparent", stroke: "#979797", strokeWidth: "1.1px", transform: isOpen ? 'rotate(180)' : undefined },
+        React.createElement("svg", { viewBox: "0 0 20 20", preserveAspectRatio: "none", width: 16, fill: "transparent", stroke: "#8A8A8A", strokeWidth: "1.1px", transform: isOpen ? 'rotate(180)' : undefined },
             React.createElement("path", { d: "M1,6 L10,15 L19,6" }))));
 };
 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, }) => {
@@ -9380,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
@@ -9407,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;
@@ -15697,6 +15702,7 @@ Object.defineProperty(self$1, '_BIDI_RTL_LANGS', {
         'dv',   /* Dhivehi */
         'fa',   /* 'فارسی', Persian */
         'glk',  /* 'گیلکی', Gilaki */
+        'he',   /* 'עברית', Hebrew */
         'ku',   /* 'Kurdî / كوردی', Kurdish */
         'mzn',  /* 'مازِرونی', Mazanderani */
         'nqo',  /* N'Ko */
@@ -15704,7 +15710,8 @@ Object.defineProperty(self$1, '_BIDI_RTL_LANGS', {
         'ps',   /* 'پښتو', Pashto, */
         'sd',   /* 'سنڌي', Sindhi */
         'ug',   /* 'Uyghurche / ئۇيغۇرچە', Uyghur */
-        'ur'    /* 'اردو', Urdu */
+        'ur',    /* 'اردو', Urdu */
+        'yi'    /* 'ייִדיש', Yiddish */
     ],
     writable: false,
     enumerable: true,
@@ -15786,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" },
@@ -16036,19 +16044,16 @@ const Typeahead = ({ onChange, programId, className, countryCode, disabled, mini
     // Maintain same labelledby value as previous versions even though label has "for" attribute
     const comboboxArgs = { 'aria-labelledby': `${inputHtmlId}-label` };
     const inputRef = React.createRef();
-    useEffect(() => {
-        setRef('organization', inputRef.current);
-    }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({ className: "sid-organization-list" }, getComboboxProps(comboboxArgs)),
-            React.createElement("input", Object.assign({}, getInputProps({ ref: inputRef }), { className: `sid-l-full-width sid-hidden-placeholder sid-text-input ${className}`, disabled: disabled, id: inputHtmlId, placeholder: placeholder, "aria-required": isRequired })),
+            React.createElement("input", Object.assign({}, getInputProps({ ref: inputRef }), { className: `sid-l-full-width sid-hidden-placeholder sid-text-input ${className}`, disabled: disabled, id: inputHtmlId, placeholder: placeholder, "aria-required": isRequired, ref: (input => setRef('organization', input)) })),
             React.createElement("div", Object.assign({}, getMenuProps()), isOpen
                 ? (React.createElement(FetchOrganizationsComponent, { countryCode: countryCode, getItemProps: getItemProps, highlightedIndex: highlightedIndex, itemToString: itemToString, minimumSearchValueLength: minimumSearchValueLength, onLoaded: loadedOrganizations => setLoadedOrgs(loadedOrganizations), programId: programId, searchValue: inputValue, orgSearchUrl: orgSearchUrl, orgSearchTags: orgSearchTags, locale: locale, urlAddSchoolForm: urlAddSchoolForm, openOrgSearchEnabled: openOrgSearchEnabled }))
                 : null))));
 };
 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);
                     }
@@ -16328,8 +16328,8 @@ const HowDoesVerifyingWorkComponent = ({ verificationService, initialVisibility
         timeoutId = window.setTimeout(() => setTooltipVisibility(false));
     };
     const handleOnClick = (tooltipIsOpen) => (tooltipIsOpen ? hideTooltip() : showTooltip());
-    return (React.createElement("div", { className: "sid-how-verify-works", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip },
-        React.createElement("a", { href: "#", className: "sid-link", "aria-expanded": tooltipVisibility, onClick: () => handleOnClick(tooltipVisibility), "aria-describedby": tooltipVisibility ? 'how-does-verifying-work-tooltip' : null },
+    return (React.createElement("div", { className: "sid-how-verify-works", onMouseEnter: showTooltip, onMouseLeave: hideTooltip },
+        React.createElement("a", { href: "#", className: "sid-link", "aria-expanded": tooltipVisibility, onClick: () => handleOnClick(tooltipVisibility), "aria-describedby": tooltipVisibility ? 'how-does-verifying-work-tooltip' : null, role: "button" },
             React.createElement(FormattedHTMLMessage, { id: "howDoesVerifyingWork", defaultMessage: "How does verifying work?" })),
         tooltipVisibility
             ? (React.createElement("div", { className: "sid-how-verify-works__container" },
@@ -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);
@@ -16445,7 +16442,7 @@ const StepStudentPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Student-Only Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Student-Only Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're a student at a degree-granting school." }),
                     "\u00A0",
@@ -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));
@@ -16540,7 +16533,7 @@ const StepSeniorPersonalInfo = ({ verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock Your Special Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock Your Special Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify your current age." }),
                     "\u00A0",
@@ -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));
@@ -16827,7 +16812,7 @@ const StepTeacherPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Teaching Staff-Only Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Teaching Staff-Only Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're a teacher, faculty or staff at a K-12 or degree-granting university." }),
                     "\u00A0",
@@ -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));
@@ -16951,7 +16931,7 @@ const StepMemberPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Members-Only Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Members-Only Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're a current member of an eligible organization." }),
                     "\u00A0",
@@ -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));
 };
@@ -17124,13 +17104,13 @@ const StepActiveMilitaryPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Military-Only Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Military-Only Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're a member of the armed forces." })),
                 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));
 };
@@ -17307,13 +17284,13 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Military-Only Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Military-Only Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're a member of the armed forces." }),
                     "\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;
@@ -17448,23 +17418,20 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this 1st Responder-Only Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this 1st Responder-Only Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're an active first responder." })),
                 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) {
@@ -17612,7 +17569,7 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Medical Professional-Only Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Medical Professional-Only Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're a licensed medical professional." })),
                 React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
@@ -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));
@@ -17719,13 +17668,13 @@ const StepEmploymentPersonalInfo = ({ verificationService }) => {
             React.createElement("div", { className: "sid-l-horz-center" },
                 React.createElement(LogoComponent, { verificationService: verificationService })),
             React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Employment-Only Offer" })),
+                React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Employment-Only Offer", tagName: "h1" })),
             React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                 React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you're a current employee at an eligible company." }),
                 "\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);
 
 /**
@@ -17859,7 +17806,7 @@ const StepDriverLicensePersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you have a valid driver license" })),
                 React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
@@ -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;
@@ -17936,7 +17883,7 @@ const StepGeneralIdentityPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify your identity" })),
                 React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
@@ -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);
@@ -18026,7 +17973,7 @@ const StepHybridIdentityPersonalInfo = ({ intl, verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify your identity" })),
                 React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
@@ -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,19 +18096,13 @@ 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" },
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title***", defaultMessage: "Unlock this Special Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title***", defaultMessage: "Unlock this Special Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle***", defaultMessage: "Verify you have a professional license in your field." })),
                 React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
@@ -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);
@@ -18249,7 +18183,7 @@ const StepMoverPersonalInfo = ({ verificationService }) => {
                 React.createElement("div", { className: "sid-l-horz-center" },
                     React.createElement(LogoComponent, { verificationService: verificationService })),
                 React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
-                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer" })),
+                    React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.title", defaultMessage: "Unlock this Special Offer", tagName: "h1" })),
                 React.createElement("div", { className: "sid-header__subtitle sid-l-horz-center" },
                     React.createElement(FormattedHTMLMessage, { id: "step.personalInfo.subtitle", defaultMessage: "Verify you have recently moved." }),
                     React.createElement("br", null),
@@ -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.