@saasquatch/mint-components 1.8.5-24 → 1.8.5-26

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

@@ -10,25 +10,33 @@ require('./mixins-fe9d4112.js');
 require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-ce552bbc.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1ae5724a.js');
 
 const SUBMITTED_CONTEXT = "sq:verify-submitted";
-function setSubmitted(submitted) {
+function setWindowSubmitted(submitted) {
   // using window due to dom-context getting reset on re-render
   window[SUBMITTED_CONTEXT] = submitted;
 }
 function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const submitted = window[SUBMITTED_CONTEXT];
+  var _b, _c, _d, _e, _f, _g, _h, _j;
+  const [submitted, setSubmitted] = stencilHooks_module.useState(window[SUBMITTED_CONTEXT]);
   const userIdent = index_module.Q();
+  const [verificationError, setVerificationError] = stencilHooks_module.useState(null);
+  const [success, setSuccess] = stencilHooks_module.useState(false);
   const [request, { loading, data, errors }] = index_module.an();
   const urlParams = new URLSearchParams(index_module.$n.location.search);
   const oobCode = urlParams.get("oobCode");
+  const oobEmail = urlParams.get("email");
   const nextPageOverride = urlParams.get("nextPage");
+  const syncSubmitted = (submitted) => {
+    setSubmitted(submitted);
+    setWindowSubmitted(submitted);
+  };
   // derived from useMutation in component boilerplate initialState
   const disableContinue = data === undefined && errors === undefined && !!oobCode;
   // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
-  const verified = !!(((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
+  const hasContext = localStorage.getItem("sq:user-identity");
+  const verified = !!((_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified);
   const failed = () => {
     return index_module.$n.push({
       pathname: failedPage,
@@ -40,40 +48,89 @@ function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyE
     const url = utils.sanitizeUrlPath(nextPageOverride || nextPage);
     index_module.$n.push(url.href);
   };
-  const submit = async () => {
-    var _a;
-    setSubmitted(true);
-    if (oobCode) {
-      const result = await request({ oobCode });
-      if ((result instanceof Error ||
-        !result.verifyManagedIdentityEmail.success) &&
-        !((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified)) {
-        // pause on error if logged out/unverified
-        return;
+  console.log({
+    hasContext,
+    userIdent,
+    data,
+    submitted,
+    verified,
+    verificationError,
+    success,
+  });
+  stencilHooks_module.useEffect(() => {
+    const check = async () => {
+      var _a;
+      const response = await request({ oobCode });
+      if (response instanceof Error ||
+        !((_a = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success)) {
+        console.debug("set verification error");
+        setVerificationError({ message: true });
       }
-      setTimeout(() => {
-        gotoNextPage();
-        setSubmitted(false);
-      }, 3000);
-    }
-  };
+      else {
+        console.debug("set success: true");
+        setSuccess(true);
+      }
+      console.debug("SUBMITTED", response);
+      console.debug("window", window[SUBMITTED_CONTEXT]);
+      syncSubmitted(true);
+    };
+    if (!submitted)
+      check();
+  }, [submitted]);
   stencilHooks_module.useEffect(() => {
-    // Already verified, begin redirect
-    if (verified) {
+    var _a;
+    if (!submitted)
+      return;
+    if (!verificationError &&
+      ((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email) === oobEmail &&
+      (success || verified)) {
+      console.log("LOGGING IN", success, verified, verificationError);
+      setTimeout(gotoNextPage, 3000);
+    }
+    else {
+      console.log("LOGGING OUT", success, verified, verificationError);
       setTimeout(() => {
+        index_module.setUserIdentity(undefined);
         gotoNextPage();
-        setSubmitted(false);
       }, 3000);
-      return;
     }
-    if (userIdent && !data && !submitted)
-      submit();
-  }, [verified, submitted, data, userIdent, submitted]);
+  }, [verified, verificationError, success, submitted, userIdent]);
+  stencilHooks_module.useEffect(() => {
+    if (errors)
+      setVerificationError(errors);
+  }, [errors, setVerificationError]);
+  // useEffect(() => {
+  //   if (!data && !submitted && oobCode) {
+  //     submit();
+  //     return;
+  //   }
+  //   // verification successful but user in context is not verified
+  //   // or mismatch between logged in user and user associated with oobCode
+  //   if (submitted) {
+  //     console.debug("in submit condition");
+  //     if (email && email !== oobEmail) {
+  //       console.debug("email mismatch");
+  //       logout();
+  //       return;
+  //       // Already verified, begin redirect
+  //     }
+  //     if (verified) {
+  //       if (!verificationError) setSuccess(true);
+  //       console.debug("verified");
+  //       setTimeout(() => {
+  //         gotoNextPage();
+  //         setSubmitted(false);
+  //       }, 3000);
+  //       return;
+  //     }
+  //   }
+  // }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
   return {
     states: {
-      loading: loading || disableContinue,
-      error: ((_e = (_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extensions) === null || _e === void 0 ? void 0 : _e.message) || ((_h = (_g = (_f = errors === null || errors === void 0 ? void 0 : errors.response) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.message) ||
-        ((errors === null || errors === void 0 ? void 0 : errors.message) && networkErrorMessage),
+      loading: disableContinue,
+      success,
+      error: ((_f = (_e = (_d = (_c = verificationError === null || verificationError === void 0 ? void 0 : verificationError.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 = verificationError === null || verificationError === void 0 ? void 0 : verificationError.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) ||
+        ((verificationError === null || verificationError === void 0 ? void 0 : verificationError.message) && networkErrorMessage),
       verified,
     },
     data: {

package/dist/cjs/sqm-referred-registration.cjs.entry.js

@@ -9,7 +9,7 @@ require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 require('./JSS-8503a151.js');
-const emailRegistrationView = require('./email-registration-view-5170d9f1.js');
+const emailRegistrationView = require('./email-registration-view-a6b6430e.js');
 require('./useRegistrationFormState-ad3190c9.js');
 const useInstantAccessRegistration = require('./useInstantAccessRegistration-fe258c50.js');
 

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -17,20 +17,20 @@ require('./sqm-text-span-view-e1cd9bd3.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-a0e33f21.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-fd6e8f60.js');
 require('./index-8c6255f5.js');
-const emailRegistrationView = require('./email-registration-view-5170d9f1.js');
+const emailRegistrationView = require('./email-registration-view-a6b6430e.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-c9f18d96.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-dd53f947.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-7f79627b.js');
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-8f15bace.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-969c49ed.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-851a020f.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-ca5f6db9.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-d8697f23.js');
 require('./utilities-73df97e1.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-ce552bbc.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1e2f6f9b.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-07a13210.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1ae5724a.js');
+const ShadowViewAddon = require('./ShadowViewAddon-89ba2ab0.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-cae2a67d.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-501f8985.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -7239,8 +7239,8 @@ const slottedProps = {
     requiredFieldErrorMessage: "Cannot be empty",
     invalidEmailErrorMessage: "Must be a valid email address",
     formData: (index.h("div", null,
-      index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+      index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label", label: "Slotted Input", required: true }),
+      index.h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),
   },
 };
 const Default$3 = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultProps$3));
@@ -7605,7 +7605,7 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
   CodeValidating: CodeValidating
 });
 
-const scenario$9 = "@author:derek\n@owner:ian\nFeature: Verify Email\n\n    Background: A user is on the email verification page\n        Given a user who has been redirected to the email verification page\n\n    @motivating\n    Scenario: Verifying your email takes you to the portal login page\n        Given a user has a valid oob code as a url query parameter\n        When they click \"Verify Email\"\n        Then the button enters a loading state\n        When their email is validated\n        Then a button that says \"Continue\" appears\n        When they click \"Continue\"\n        Then they are redirected to login\n\n    @motivating\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\n        Given a user has a valid oob code as a url query parameter\n        When they click \"Verify Email\"\n        Then the button enters a loading state\n        When their email is validated\n        Then a button that says \"Continue\" appears\n        When they wait 5 seconds\n        Then they are redirected to login\n\n    @motivating\n    Scenario: Users are notified if verifying their email has failed\n        Given a user has a valid oob code as a url query parameter\n        When they click \"Verify Email\"\n        Then the button enters a loading state\n        When their email fails to be validated\n        Then an banner is shown stating that an error occured\n\n    @motivating\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\n        Given a user has a <oobCode> as a url query parameter\n        And the component <mayHave> \"failed-page\" with <value>\n        Then they see an error message saying that their verification code is invalid/expired\n        When they click \"Continue\"\n        Then they are redirected to <redirectPath>\n        Examples:\n            | oobCode               | mayHave      | value  | redirectPath |\n            | invalid oob code      | doesn't have | N/A    | /            |\n            | non existant oob code | doesn't have | N/A    | /            |\n            | invalid oob code      | has          | /login | /login       |\n            | non existant oob code | has          | /login | /login       |\n\n    @motivating\n    Scenario: Users are redirected to \"/\" by default\n        Given the component does not have prop \"nextPage\"\n        And the users url does not contain a \"nextPage\" query parameter\n        And a user has verified their email\n        When they click \"Continue\"\n        Then they are redirected to \"/\"\n\n    @motivating\n    Scenario: Custom redirection can be configured\n        Given the component has prop \"nextPage\" with value \"/activity\"\n        And the users url does not contain a \"nextPage\" query parameter\n        And a user has verified their email\n        When they click \"Continue\"\n        Then they are redirected to \"/activity\"\n\n    @motivating\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\n        And the user has verified their email\n        When they click \"Continue\"\n        Then they are redirected to <nextPageParamValue>\n        Examples:\n            | mayHave       | nextPageValue | nextPageParamValue |\n            | has           | /dashboard    | /activity          |\n            | does not have | N/A           | /activity          |\n\n    @motivating\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n        Given the component is loaded at <currentUrl>\n        And the user has verified their email\n        When they click \"Continue\"\n        And they are redirected to <url>\n        Examples:\n            | currentUrl                                                                 | url                                           |\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\n\n    @landmine\n    Scenario Outline: Username and password are not persisted on redirects\n        Given the component is loaded at <currentUrl>\n        And the user has verified their email\n        When they click \"Continue\"\n        And they are redirected to <url>\n        Examples:\n            | currentUrl                                              | url                                  |\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
+const scenario$9 = "@author:derek\n@owner:ian\nFeature: Verify Email\n\n  Background: A user is on the email verification page\n    Given a user who has been redirected to the email verification page\n\n  @motivating\n  Scenario: Verifying your email takes you to the portal login page\n    Given a user has a valid oob code as a url query parameter\n    When they click \"Verify Email\"\n    Then the button enters a loading state\n    When their email is validated\n    Then a button that says \"Continue\" appears\n    When they click \"Continue\"\n    Then they are redirected to login\n\n  @motivating\n  Scenario: Users are automatically redirected if they dont click \"Continue\"\n    Given a user has a valid oob code as a url query parameter\n    When they click \"Verify Email\"\n    Then the button enters a loading state\n    When their email is validated\n    Then a button that says \"Continue\" appears\n    When they wait 5 seconds\n    Then they are redirected to login\n\n  @motivating\n  Scenario: Users are notified if verifying their email has failed\n    Given a user has a valid oob code as a url query parameter\n    When they click \"Verify Email\"\n    Then the button enters a loading state\n    When their email fails to be validated\n    Then an banner is shown stating that an error occured\n\n  @motivating\n  Scenario Outline: Users cannot verify their email with an invalid or missing oob code\n    Given a user has a <oobCode> as a url query parameter\n    And the component <mayHave> \"failed-page\" with <value>\n    Then they see an error message saying that their verification code is invalid/expired\n    When they click \"Continue\"\n    Then they are redirected to <redirectPath>\n    Examples:\n      | oobCode               | mayHave      | value  | redirectPath |\n      | invalid oob code      | doesn't have | N/A    | /            |\n      | non existant oob code | doesn't have | N/A    | /            |\n      | invalid oob code      | has          | /login | /login       |\n      | non existant oob code | has          | /login | /login       |\n\n  @motivating\n  Scenario: Users are redirected to \"/\" by default\n    Given the component does not have prop \"nextPage\"\n    And the users url does not contain a \"nextPage\" query parameter\n    And a user has verified their email\n    When they click \"Continue\"\n    Then they are redirected to \"/\"\n\n  @motivating\n  Scenario: Custom redirection can be configured\n    Given the component has prop \"nextPage\" with value \"/activity\"\n    And the users url does not contain a \"nextPage\" query parameter\n    And a user has verified their email\n    When they click \"Continue\"\n    Then they are redirected to \"/activity\"\n\n  @motivating\n  Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\n    Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\n    And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\n    And the user has verified their email\n    When they click \"Continue\"\n    Then they are redirected to <nextPageParamValue>\n    Examples:\n      | mayHave       | nextPageValue | nextPageParamValue |\n      | has           | /dashboard    | /activity          |\n      | does not have | N/A           | /activity          |\n\n  @motivating\n  Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n    Given the component is loaded at <currentUrl>\n    And the user has verified their email\n    When they click \"Continue\"\n    And they are redirected to <url>\n    Examples:\n      | currentUrl                                                                 | url                                           |\n      | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\n      | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\n      | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\n      | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\n      | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\n      | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\n      | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\n      | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\n      | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\n      | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\n      | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\n      | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\n      | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\n\n  @landmine\n  Scenario Outline: Username and password are not persisted on redirects\n    Given the component is loaded at <currentUrl>\n    And the user has verified their email\n    When they click \"Continue\"\n    And they are redirected to <url>\n    Examples:\n      | currentUrl                                              | url                                  |\n      | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |\n\n\n  @minutia\n  Scenario Outline: Users may be logged in or logged out depending on the verified status and logged in email\n    Given an oobCode with email <oobCodeEmail> as a url query parameter\n    And the user is logged in as <loggedInEmail>\n    And the logged in user <isVerified>\n    When the oobCode is submitted\n    And the oobCode <isValid>\n    Then the <submitState> screen is shown\n    And after 3 seconds pass\n    Then the user is redirected to <redirect>\n    Examples:\n      | oobCodeEmail      | loggedInEmail     | isVerified | isValid      | submitState | redirect  |\n      | user1@example.com | N/A               | false      | is valid     | success     | /login    |\n      | user1@example.com | N/A               | false      | is not valid | error       | /login    |\n      | user1@example.com | user1@example.com | false      | is valid     | success     | /activity |\n      | user1@example.com | user1@example.com | false      | is not valid | error       | N/A       |\n      | user1@example.com | user2@example.com | false      | is valid     | success     | /login    |\n      | user1@example.com | user2@example.com | false      | is not valid | error       | /login    |\n      | user1@example.com | user1@example.com | true       | is valid     | success     | /activity |\n      | user1@example.com | user1@example.com | true       | is not valid | success     | /activity |\n      | user1@example.com | user2@example.com | true       | is not valid | error       | /login    |\n      | N/A               | N/A               | false      | is not valid | error       | N/A       |\n";
 
 const PortalVerifyEmail_stories = {
   title: "Components/Microsite Verify Email",
@@ -7618,6 +7618,7 @@ const errorProps$5 = {
     error: "Something went wrong. Please try again.",
     loading: false,
     verified: false,
+    success: false,
   },
   data: {
     oobCode: "abc123",
@@ -7637,6 +7638,7 @@ const verifiedProps = {
     error: "",
     loading: false,
     verified: true,
+    success: true,
   },
   data: {
     oobCode: "abc123",
@@ -9955,7 +9957,7 @@ const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Genera
 
 const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                     | Attribute                      | Description                                                       | Type                                                                                                                                                                                                                                                                                                                                                                              | Default                                                                                                                                                  |\n| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `demoData`                   | --                             |                                                                   | `{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; verificationResentMessage?: string; }; }` | `undefined`                                                                                                                                              |\n| `emailVerificationHeader`    | `email-verification-header`    |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Verify your email\"`                                                                                                                                    |\n| `networkErrorMessage`        | `network-error-message`        |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"An error occurred while verifying your password. Please refresh the page.\"`                                                                            |\n| `redirectPath`               | `redirect-path`                | Redirect participants to this page from their verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"/verifyEmail\"`                                                                                                                                         |\n| `resendEmailButtonText`      | `resend-email-button-text`     |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Re-send Email\"`                                                                                                                                        |\n| `verificationLoadingMessage` | `verification-loading-message` |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Checking verification status\"`                                                                                                                         |\n| `verificationResentMessage`  | `verification-resent-message`  |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Your verification email has been resent successfully\"`                                                                                                 |\n| `verificationStatusMessage`  | `verification-status-message`  |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Checking verification status in {countdown}\"`                                                                                                          |\n| `verifyMessage`              | `verify-message`               |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-email-verification --> sqm-form-message\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
-const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                                                                                       | Type                                                                                                                                                                                                                         | Default                                                                                                          |\n| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `continueText`        | `continue-text`         |                                                                                                   | `string`                                                                                                                                                                                                                     | `\"Continue\"`                                                                                                     |\n| `demoData`            | --                      |                                                                                                   | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined`                                                                                                      |\n| `failedPage`          | `failed-page`           | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string`                                                                                                                                                                                                                     | `\"/\"`                                                                                                            |\n| `networkErrorMessage` | `network-error-message` |                                                                                                   | `string`                                                                                                                                                                                                                     | `\"An error occurred while verifying your email. Please refresh the page and try again.\"`                         |\n| `nextPage`            | `next-page`             | Redirect participants to this page when they successfully verify their email.                     | `string`                                                                                                                                                                                                                     | `\"/\"`                                                                                                            |\n| `verifyEmailText`     | `verify-email-text`     |                                                                                                   | `string`                                                                                                                                                                                                                     | `\"Verify your email\"`                                                                                            |\n| `verifyInvalidText`   | `verify-invalid-text`   |                                                                                                   | `string`                                                                                                                                                                                                                     | `\"The email verification code is invalid or has expired, please try again.\"`                                     |\n| `verifySuccessText`   | `verify-success-text`   |                                                                                                   | `string`                                                                                                                                                                                                                     | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                                                                                       | Type                                                                                                                                                                                                                                           | Default                                                                                                          |\n| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `continueText`        | `continue-text`         |                                                                                                   | `string`                                                                                                                                                                                                                                       | `\"Continue\"`                                                                                                     |\n| `demoData`            | --                      |                                                                                                   | `{ states?: { error: string; loading: boolean; success: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined`                                                                                                      |\n| `failedPage`          | `failed-page`           | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string`                                                                                                                                                                                                                                       | `\"/\"`                                                                                                            |\n| `networkErrorMessage` | `network-error-message` |                                                                                                   | `string`                                                                                                                                                                                                                                       | `\"An error occurred while verifying your email. Please refresh the page and try again.\"`                         |\n| `nextPage`            | `next-page`             | Redirect participants to this page when they successfully verify their email.                     | `string`                                                                                                                                                                                                                                       | `\"/\"`                                                                                                            |\n| `verifyEmailText`     | `verify-email-text`     |                                                                                                   | `string`                                                                                                                                                                                                                                       | `\"Verify your email\"`                                                                                            |\n| `verifyInvalidText`   | `verify-invalid-text`   |                                                                                                   | `string`                                                                                                                                                                                                                                       | `\"The email verification code is invalid or has expired, please try again.\"`                                     |\n| `verifySuccessText`   | `verify-success-text`   |                                                                                                   | `string`                                                                                                                                                                                                                                       | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const PortalTemplates_stories = {
   title: "Templates / Microsite",

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -51,7 +51,7 @@ export function CheckboxFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+    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 } : []), { 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])

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js

@@ -40,7 +40,7 @@ export function DropdownFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", 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]) ? {
+    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]) ? {

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile-view.js

@@ -15,17 +15,17 @@ const EditProfileView = (props) => {
         h("div", { class: "FormSection" },
           states.formState.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
             h("div", { part: "erroralert-text" }, states.formState.error))),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
+          h("sl-input", Object.assign({ exportparts: "label: input-label", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
             : []), { id: "firstName", name: "firstName", error: errors.firstName && errors.firstName.status !== "valid"
               ? errors.firstName.message
               : undefined })),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
+          h("sl-input", Object.assign({ exportparts: "label: input-label", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
             : []), { error: errors.lastName && errors.lastName.status !== "valid"
               ? errors.lastName.message
               : undefined }))),
-        text.showregion && states.formState.currentRegion && (h("sl-input", { exportparts: "label: input-label, base: input-base", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
+        text.showregion && states.formState.currentRegion && (h("sl-input", { exportparts: "label: input-label", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
         h("div", { class: "ButtonWrapper" },
           h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
               callbacks.onSubmit(e);

package/dist/collection/components/sqm-empty/sqm-empty-view.js

@@ -5,7 +5,7 @@ export function EmptyStateView(props) {
     h("img", { style: { height: "100px", margin: "auto" }, src: emptyStateImage }),
     h("sqm-titled-section", { style: { maxHeight: "400px" }, "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },
-        h("p", { part: "header-text" }, emptyStateHeader)),
+        h("p", null, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { part: "description-text", style: { color: "var(--sl-color-gray-500)" } }, emptyStateText)))));
+        h("p", { style: { color: "var(--sl-color-gray-500)" } }, emptyStateText)))));
 }

package/dist/collection/components/sqm-input-field/sqm-input-field-view.js

@@ -27,7 +27,7 @@ export function InputFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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]) ? {
+    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]) ? {

package/dist/collection/components/sqm-link-button/sqm-link-button-view.js

@@ -20,6 +20,6 @@ export function LinkButtonView(props) {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" },
-      h("a", { onClick: onClick, class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
+    h("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
+      h("a", { class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
 }

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -31,7 +31,7 @@ export function NameFieldsView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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) ? {
+    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) ? {
@@ -39,7 +39,7 @@ export function NameFieldsView(props) {
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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) ? {
+    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) ? {

package/dist/collection/components/sqm-password-field/sqm-password-field-view.js

@@ -28,7 +28,7 @@ export function PortalResetPasswordView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: states.content.fieldLabel || "Password", 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), validationError: ({ value }) => {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", 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), validationError: ({ value }) => {
         if (!value) {
           return "Cannot be empty";
         }

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password-view.js

@@ -59,7 +59,7 @@ export function PortalChangePasswordView(props) {
           h("sl-form", { "onSl-submit": callbacks.submit },
             h("div", { class: sheet.classes.InputContainer },
               h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
-              h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
+              h("sl-input", { exportparts: "label: input-label", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
               h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
               h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.js

@@ -33,7 +33,7 @@ export function PortalForgotPasswordView(props) {
         h("div", { part: "erroralert-text" }, props.states.error))),
       props.states.success && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
         h("div", { part: "successalert-text" }, content.successAlertText))),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
         h("div", { class: sheet.classes.SecondaryButton }, content.secondaryButton)))));

package/dist/collection/components/sqm-portal-login/sqm-portal-login-view.js

@@ -35,9 +35,9 @@ export function PortalLoginView(props) {
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       h("div", null,
-        h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
+        h("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
         h("div", { class: sheet.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile-view.js

@@ -66,16 +66,16 @@ export function PortalProfileView(props) {
       error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, error))),
       h("div", { class: sheet.classes.NameInputContainer },
-        h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label, base: input-base", value: (_c = states.user) === null || _c === void 0 ? void 0 : _c.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, ((errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
+        h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_c = states.user) === null || _c === void 0 ? void 0 : _c.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, ((errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
           ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
           : []), { id: "firstName", name: "firstName", error: (errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
             ? errors === null || errors === void 0 ? void 0 : errors.firstName.message : undefined })),
-        h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label, base: input-base", value: (_d = states.user) === null || _d === void 0 ? void 0 : _d.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, ((errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
+        h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_d = states.user) === null || _d === void 0 ? void 0 : _d.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, ((errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
           ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
           : []), { error: (errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
             ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
-      h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label, base: input-base", disabled: true }),
-      states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label, base: input-base", disabled: true })),
+      h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label", disabled: true }),
+      states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label", disabled: true })),
       h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
           callbacks.onSubmit(e);
         }, submit: true }, text.submitChangeButtonText))));

package/dist/collection/components/sqm-portal-register/PortalRegister.stories.js

@@ -94,8 +94,8 @@ const slottedProps = {
     requiredFieldErrorMessage: "Cannot be empty",
     invalidEmailErrorMessage: "Must be a valid email address",
     formData: (h("div", null,
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label", label: "Slotted Input", required: true }),
+      h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),
   },
 };
 export const Default = () => h(PortalRegisterView, Object.assign({}, defaultProps));

package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js

@@ -45,7 +45,7 @@ export function PortalRegisterView(props) {
       states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
-      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -61,7 +61,7 @@ export function PortalRegisterView(props) {
         : [])))),
       !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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) ? {
+      !states.hideInputs && states.confirmPassword && (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.classes.ErrorStyle,
         helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || content.requiredFieldErrorMessage,
       }

package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js

@@ -76,8 +76,8 @@ const slottedProps = {
     pageLabel: "Register",
     confirmPasswordLabel: "Confirm Password",
     formData: (h("div", null,
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label", label: "Slotted Input", required: true }),
+      h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),
   },
 };
 export const Default = () => h(PortalRegistrationFormView, Object.assign({}, defaultProps));

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js

@@ -46,7 +46,7 @@ export function PortalRegistrationFormView(props) {
         h("div", { part: "erroralert-text" }, states.registrationFormState.disabledMessage))) : (states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error)))),
       content.formData,
-      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), required: true, validationError: ({ value }) => {
+      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -65,7 +65,7 @@ export function PortalRegistrationFormView(props) {
         : [])))),
       !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.disabled), required: true }, (((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.confirmPassword) ? {
+      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.disabled), required: true }, (((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.confirmPassword) ? {
         value: (_q = (_p = states.registrationFormState) === null || _p === void 0 ? void 0 : _p.initialData) === null || _q === void 0 ? void 0 : _q.confirmPassword,
       }
         : {}), (((_s = (_r = states.registrationFormState) === null || _r === void 0 ? void 0 : _r.validationErrors) === null || _s === void 0 ? void 0 : _s.confirmPassword) ? {

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password-view.js

@@ -68,7 +68,7 @@ export function PortalResetPasswordView(props) {
       props.states.error && (h("sqm-form-message", { type: "error", class: sheet.classes.Banner, exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
       !states.reset && (h("sqm-password-field", { fieldLabel: states.content.passwordFieldLabel, demoData: states.passwordDemoData, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText })),
-      !states.reset && states.confirmPassword && (h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, disabled: states.loading, required: true })),
+      !states.reset && states.confirmPassword && (h("sl-input", { exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, disabled: states.loading, required: true })),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset
           ? states.content.continueButtonText

package/dist/collection/components/sqm-portal-verify-email/PortalVerifyEmail.stories.js

@@ -12,6 +12,7 @@ const errorProps = {
     error: "Something went wrong. Please try again.",
     loading: false,
     verified: false,
+    success: false,
   },
   data: {
     oobCode: "abc123",
@@ -31,6 +32,7 @@ const verifiedProps = {
     error: "",
     loading: false,
     verified: true,
+    success: true,
   },
   data: {
     oobCode: "abc123",