@saasquatch/mint-components 1.6.2-20 → 1.6.2-23

package/dist/cjs/{ShadowViewAddon-312e517f.js → ShadowViewAddon-fa9574a8.js}

@@ -1619,18 +1619,17 @@ function PortalRegisterView(props) {
           if (!value.includes("@")) {
             return "Must be a valid email address";
           }
-        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
         class: sheet$5.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           "Cannot be empty",
       }
         : [])))),
       !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
         class: sheet$5.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
-          "Cannot be empty",
+        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || "Cannot be empty",
       }
         : [])))),
       content.terms,
@@ -2446,23 +2445,23 @@ sl-input::part(label){
 const sheet$9 = JSS.createStyleSheet(style$9);
 const styleString$9 = sheet$9.toString();
 function NameFieldsView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (index.h("div", { class: sheet$9.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$3,
       styleString$9),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled) }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.firstName) ? {
-      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.firstName,
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
       class: sheet$9.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.loading) || ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.disabled) }, (((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.initialData) === null || _k === void 0 ? void 0 : _k.lastName) ? {
-      value: (_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.lastName,
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
       class: sheet$9.classes.ErrorStyle,
@@ -2513,8 +2512,9 @@ JSS.jss.setup(JSS.create());
 const sheet$a = JSS.jss.createStyleSheet(style$a);
 const styleString$a = sheet$a.toString();
 function CheckboxFieldView(props) {
+  var _a, _b, _c;
   const { states, content, callbacks } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (index.h("div", { class: sheet$a.classes.FieldContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$4,
@@ -2522,7 +2522,7 @@ function CheckboxFieldView(props) {
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet$a.classes.ErrorStyle,
       }
@@ -2570,13 +2570,17 @@ JSS.jss.setup(JSS.create());
 const sheet$b = JSS.jss.createStyleSheet(style$b);
 const styleString$b = sheet$b.toString();
 function DropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (index.h("div", { class: sheet$b.classes.FieldContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$5,
       styleString$b),
-    index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
       class: sheet$b.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
@@ -2603,13 +2607,17 @@ JSS.jss.setup(JSS.create());
 const sheet$c = JSS.jss.createStyleSheet(style$c);
 const styleString$c = sheet$c.toString();
 function InputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (index.h("div", { class: sheet$c.classes.FieldContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$6,
       styleString$c),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
       class: sheet$c.classes.ErrorStyle,
       helpText: global.intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,

package/dist/cjs/sqm-big-stat_35.cjs.entry.js

@@ -18,8 +18,8 @@ const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-b318af73.js');
 require('./sqm-portal-container-view-2ddcaa12.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const useRegistrationFormState = require('./useRegistrationFormState-d0e43ca9.js');
-const ShadowViewAddon = require('./ShadowViewAddon-312e517f.js');
+const useRegistrationFormState = require('./useRegistrationFormState-bee054d6.js');
+const ShadowViewAddon = require('./ShadowViewAddon-fa9574a8.js');
 require('./sqm-portal-section-view-1e5bbcb1.js');
 
 const BigStat = class {
@@ -68,7 +68,13 @@ const BrandComponent = class {
   render() {
     var _a, _b;
     const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "#FFF";
-    const css = ShadowViewAddon.autoColorScaleCss(brandColor);
+    let css;
+    try {
+      css = ShadowViewAddon.autoColorScaleCss(brandColor);
+    }
+    catch {
+      css = ShadowViewAddon.autoColorScaleCss("#FFF");
+    }
     const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "Nunito Sans").trim() || undefined;
     stencilHooks_module.useEffect(() => {
       if (!sanitizedFont) {
@@ -179,12 +185,19 @@ function RequiredPropsError({ missingProps, heading = "There was a problem loadi
     index.h("div", { class: sheet.classes.Children }, children)));
 }
 
-function useCheckboxField() {
-  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
+function useCheckboxField(props) {
+  var _a;
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   const [checked, setChecked] = stencilHooks_module.useState(false);
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    if ((_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
+      setChecked(!!((_b = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
+    }
+  }, [(_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
       checked,
     },
     callbacks: {
@@ -238,14 +251,14 @@ const CheckboxField = class {
     };
     const { states, callbacks } = index_module.isDemo()
       ? useCheckboxFieldDemo(this)
-      : useCheckboxField();
+      : useCheckboxField(this);
     return (index.h(ShadowViewAddon.CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
   }
 };
 function useCheckboxFieldDemo(props) {
   return cjs.cjs({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
       checked: false,
     },
     callbacks: {
@@ -309,7 +322,7 @@ const DividedLayout = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
-     * Uses Shorthand CSS border syntax
+     * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border Style
      */
     this.dividerStyle = "1px solid #EAEAEA";
@@ -322,10 +335,10 @@ const DividedLayout = class {
 };
 
 function useDropdownField() {
-  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
     },
   };
 }
@@ -373,7 +386,7 @@ const DropdownField = class {
 function useDropdownFieldDemo(props) {
   return cjs.cjs({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -813,10 +826,10 @@ const SqmHookStoryContainer = class {
 };
 
 function useInputField() {
-  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState: registrationFormState,
     },
   };
 }
@@ -864,7 +877,7 @@ const InputField = class {
 function useInputFieldDemo(props) {
   return cjs.cjs({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -1106,10 +1119,8 @@ function useLeaderboardDemo(props) {
 
 function useNameFields(props) {
   const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
-  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
       registrationFormState,
       content: {
         lastNameLabel: props.lastNameLabel,
@@ -1288,25 +1299,25 @@ const PortalChangePassword = class {
      */
     this.modalChangePasswordHeader = "Change Password";
     /**
-     * Modal cancel button text
+     * Found in modal
      *
      * @uiName Cancel Button Text
      */
     this.cancelText = "Cancel";
     /**
-     * Modal change password button text
+     * Found in modal
      *
      * @uiName Change Password Button Text
      */
     this.changePasswordButtonText = "Change Password";
     /**
-     * Password input field label
+     * Found in modal
      *
-     * @uiName Password Label
+     * @uiName New Password Field Label
      */
     this.passwordFieldLabel = "New Password";
     /**
-     * Password confirmation input field label
+     * Found in modal
      *
      * @uiName Confirm Password Label
      */
@@ -1532,7 +1543,7 @@ function useLoginDemo(props) {
 function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const formRef = stencilHooks_module.useRef(null);
-  const { validationState, setValidationState } = useRegistrationFormState.useValidationState({});
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
   const [request, { loading, errors, data }] = index_module.je();
   stencilHooks_module.useEffect(() => {
     if (!formRef.current)
@@ -1573,11 +1584,16 @@ function usePortalRegister(props) {
         confirmPassword: "Passwords do not match.",
       };
     }
-    setValidationState({ error: "", validationErrors });
     if (Object.keys(validationErrors).length) {
+      setRegistrationFormState({ loading: false, error: "", validationErrors });
       // early return for validation errors
       return;
     }
+    setRegistrationFormState({
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
     const { email, password } = formData;
     delete formData.email;
     delete formData.password;
@@ -1595,12 +1611,21 @@ function usePortalRegister(props) {
       if (result instanceof Error) {
         throw result;
       }
+      setRegistrationFormState({
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
       if ((_a = result.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
         index_module.fn.push(props.nextPage);
       }
     }
     catch (error) {
-      setValidationState({ error: "Network request failed." });
+      setRegistrationFormState({
+        loading: false,
+        error: "Network request failed.",
+        validationErrors: {},
+      });
     }
   };
   const inputFunction = useCallback.useCallback((e) => {
@@ -1620,13 +1645,13 @@ function usePortalRegister(props) {
   }
   else {
     errorMessage =
-      ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
+      ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
   }
   return {
     states: {
       loading,
       error: errorMessage,
-      validationState,
+      registrationFormState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
       loginPath: props.loginPath,
@@ -1647,7 +1672,7 @@ const PortalRegister = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * Redirect participants to this page after they successfully register.
+     * Redirect participants to this page from their verification email
      *
      * @uiName Registration Redirect
      * @uiWidget pageSelect
@@ -1689,9 +1714,9 @@ const PortalRegister = class {
      */
     this.disablePasswordValidation = false;
     /**
-     * Hide default input fields to use custom fields.
+     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
      *
-     * @uiName Hide Default Inputs
+     * @uiName Hide Default Fields
      */
     this.hideInputs = false;
     /**
@@ -2025,12 +2050,12 @@ const SqmReferralIframe = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * Height of the iframe container
+     * Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto.
      * @uiName Iframe Height
      */
     this.iframeHeight = "100%";
     /**
-     * Width of the iframe container
+     * Width of the iframe container  to Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto.
      * @uiName Iframe Width
      */
     this.iframeWidth = "100%";

package/dist/cjs/sqm-password-field.cjs.entry.js

@@ -9,7 +9,7 @@ const index_module = require('./index.module-93c78ac7.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
-const useRegistrationFormState = require('./useRegistrationFormState-d0e43ca9.js');
+const useRegistrationFormState = require('./useRegistrationFormState-bee054d6.js');
 
 var constants = {
   error: {
@@ -487,7 +487,7 @@ const vanillaStyle = `
 const sheet$1 = JSS.createStyleSheet(style$1);
 const styleString$1 = sheet$1.toString();
 function PortalResetPasswordView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const { states, callbacks } = props;
   return (index.h("div", { class: sheet$1.classes.InputContainer },
     index.h("style", { type: "text/css" },
@@ -500,16 +500,16 @@ function PortalResetPasswordView(props) {
       } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.password) ? {
       value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.password,
     }
-      : {}), (((_g = states.validationErrors) === null || _g === void 0 ? void 0 : _g.password) ? {
+      : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.password) ? {
       class: sheet$1.classes.ErrorStyle,
-      helpText: ((_h = states.validationErrors) === null || _h === void 0 ? void 0 : _h.password) || "Cannot be empty",
+      helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.password) ||
+        "Cannot be empty",
     }
       : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
     states.dynamicValidation));
 }
 
 function usePasswordField(props) {
-  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
   const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   const [dynamicValidation, setDynamicValidation] = stencilHooks_module.useState("");
   function onInput(input) {
@@ -521,7 +521,6 @@ function usePasswordField(props) {
       enableValidation: !props.disableValidation,
       dynamicValidation,
       registrationFormState,
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
       content: {
         fieldLabel: props.fieldLabel,
       },
@@ -574,8 +573,7 @@ function usePasswordFieldDemo(props) {
     states: {
       enableValidation: !props.disableValidation,
       dynamicValidation,
-      validationErrors: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.validationErrors) || {},
-      registrationFormState: {},
+      registrationFormState: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.registrationFormState) || {},
       content: {
         fieldLabel: props.fieldLabel,
       },

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -64,9 +64,9 @@ const PortalEmailVerification = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * The microsite page that participants are redirected to from the verification email.
+     * Redirect participants to this page from their verification email.
      *
-     * @uiName Email Redirection Path
+     * @uiName Email Redirect
      * @uiWidget pageSelect
      */
     this.redirectPath = "/verifyEmail";

package/dist/cjs/sqm-portal-protected-route.cjs.entry.js

@@ -37,7 +37,7 @@ const PortalProtectedRoute = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * Redirect participants to this path they are not logged in.
+     * Redirect participants to this page they are not logged in.
      *
      * @uiName Redirect Path
      */

package/dist/cjs/sqm-portal-registration-form.cjs.entry.js

@@ -12,7 +12,7 @@ const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b318af73.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const useRegistrationFormState = require('./useRegistrationFormState-d0e43ca9.js');
+const useRegistrationFormState = require('./useRegistrationFormState-bee054d6.js');
 
 const style = {
   Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
@@ -69,9 +69,9 @@ function PortalRegistrationFormView(props) {
         } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.email) ? {
         value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.email,
       }
-        : {}), (((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
+        : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_k = (_j = states.validationState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
+        helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
           "Cannot be empty",
       }
         : [])))),
@@ -80,10 +80,9 @@ function PortalRegistrationFormView(props) {
       !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.confirmPassword) ? {
         value: (_p = (_o = states.registrationFormState) === null || _o === void 0 ? void 0 : _o.initialData) === null || _p === void 0 ? void 0 : _p.confirmPassword,
       }
-        : {}), (((_r = (_q = states.validationState) === null || _q === void 0 ? void 0 : _q.validationErrors) === null || _r === void 0 ? void 0 : _r.confirmPassword) ? {
+        : {}), (((_r = (_q = states.registrationFormState) === null || _q === void 0 ? void 0 : _q.validationErrors) === null || _r === void 0 ? void 0 : _r.confirmPassword) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_t = (_s = states.validationState) === null || _s === void 0 ? void 0 : _s.validationErrors) === null || _t === void 0 ? void 0 : _t.confirmPassword) ||
-          "Cannot be empty",
+        helpText: ((_t = (_s = states.registrationFormState) === null || _s === void 0 ? void 0 : _s.validationErrors) === null || _t === void 0 ? void 0 : _t.confirmPassword) || "Cannot be empty",
       }
         : [])))),
       content.terms,
@@ -109,7 +108,6 @@ function usePortalRegistrationForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
   const formRef = stencilHooks_module.useRef(null);
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
-  const { validationState, setValidationState } = useRegistrationFormState.useValidationState({});
   const [request, { loading, errors, data, formError }] = index_module.qe();
   const queryResponse = index_module.dn(RegistrationFormQuery, { key: props.formKey });
   const formLoading = loading || queryResponse.loading;
@@ -167,11 +165,22 @@ function usePortalRegistrationForm(props) {
         confirmPassword: "Passwords do not match.",
       };
     }
-    setValidationState({ error: "", validationErrors });
     if (Object.keys(validationErrors).length) {
       // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
       return;
     }
+    setRegistrationFormState({
+      ...registrationFormState,
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
     const { email, password } = formData;
     delete formData.email;
     delete formData.password;
@@ -191,6 +200,12 @@ function usePortalRegistrationForm(props) {
       if (result instanceof Error) {
         throw result;
       }
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
       const managedIdentityResponse = (_a = result.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => result.formHandler.namespace === "identity");
       if (managedIdentityResponse &&
         managedIdentityResponse.result.results.length &&
@@ -200,7 +215,11 @@ function usePortalRegistrationForm(props) {
       }
     }
     catch (error) {
-      setValidationState({ error: "Network request failed." });
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "Network request failed.",
+      });
     }
   };
   const inputFunction = useCallback.useCallback((e) => {
@@ -225,13 +244,12 @@ function usePortalRegistrationForm(props) {
   }
   else {
     errorMessage =
-      formError || ((_j = (_h = (_g = (_f = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.errors) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || ((_o = (_m = (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.response) === null || _k === void 0 ? void 0 : _k.errors) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.extensions) === null || _o === void 0 ? void 0 : _o.message) || ((_r = (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.response) === null || _p === void 0 ? void 0 : _p.errors) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
+      formError || ((_j = (_h = (_g = (_f = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.errors) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || ((_o = (_m = (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.response) === null || _k === void 0 ? void 0 : _k.errors) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.extensions) === null || _o === void 0 ? void 0 : _o.message) || ((_r = (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.response) === null || _p === void 0 ? void 0 : _p.errors) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
   }
   return {
     states: {
       loading: loading || queryResponse.loading,
       error: errorMessage,
-      validationState,
       registrationFormState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
@@ -260,7 +278,7 @@ const PortalRegistrationForm = class {
      */
     this.nextPage = "/";
     /**
-     * The page that participants are redirected to from the verification email.
+     * Redirect participants to this page from their verification email
      *
      * @uiName Email Verification Redirect
      * @uiWidget pageSelect
@@ -295,9 +313,9 @@ const PortalRegistrationForm = class {
      */
     this.disablePasswordValidation = false;
     /**
-     * Hide default input fields to use custom fields.
+     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
      *
-     * @uiName Hide Default Inputs
+     * @uiName Hide Default Fields
      */
     this.hideInputs = false;
     /**