@saasquatch/mint-components 2.1.2-4 → 2.1.3

package/dist/cjs/{ShadowViewAddon-18afe394.js → ShadowViewAddon-6e8188f3.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-const index = require('./index-8277cbb3.js');
-const global = require('./global-ab5fc787.js');
-const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-9d33658c.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-a0e651c9.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-56edbb0b.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-d78c563e.js');
+const useReferralCodes = require('./useReferralCodes-7a49a3d7.js');
 const mixins = require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-bb2c0ea7.js');
-const sqmTextSpanView = require('./sqm-text-span-view-f274fdf2.js');
-const useChildElements = require('./useChildElements-6b1f61c5.js');
-const luxon = require('./luxon-c1ad356a.js');
+const copyTextView = require('./copy-text-view-322436c2.js');
+const useChildElements = require('./useChildElements-8e4e37cc.js');
+const luxon = require('./luxon-949beaf2.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 const index$1 = require('./index-8c6255f5.js');
-const utilities = require('./utilities-15548f3e.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
+const utilities = require('./utilities-84ae62cd.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
@@ -943,8 +943,8 @@ const rewardsExpiredQuery = (programId, locale, type, unit, global = "") => {
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
     return {
-      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyExpiredCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyExpiredCredit) || fallback,
     };
   });
 };
@@ -986,8 +986,8 @@ const rewardsCancelledQuery = (programId, locale, type, unit, global = "") => {
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
     return {
-      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyCancelledCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyCancelledCredit) || fallback,
     };
   });
 };
@@ -1040,13 +1040,14 @@ const parseRewardValueFormat = {
 };
 const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
   var _a;
+  const formatType = (_a = parseRewardValueFormat[format]) !== null && _a !== void 0 ? _a : "UNIT_FORMATTED";
   return debugQuery(index_module.dist.gql `
       query (
         $programId: ID
         $type: RewardType!
         $unit: String!
-        $format: RewardValueFormatType!
         $locale: RSLocale
+        $format: RewardValueFormatType!
       ) {
         fallback: formatRewardPrettyValue(
           value: 0
@@ -1062,7 +1063,8 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
               locale: $locale
             ) {
               ... on CreditRewardBalance {
-                prettyAvailableValue(formatType: $format)
+                totalAssignedCredit
+                totalPendingCredit
               }
             }
           }
@@ -1072,15 +1074,40 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
     programId: !global && programId !== "classic" ? programId : null,
     type,
     unit,
-    format: (_a = parseRewardValueFormat[format]) !== null && _a !== void 0 ? _a : "UNIT_FORMATTED",
     locale,
+    format: formatType,
   }, (res) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    const balance = arr === null || arr === void 0 ? void 0 : arr[0];
+    const totalEarned = balance
+      ? (balance.totalAssignedCredit || 0) +
+        (balance.totalPendingCredit || 0)
+      : 0;
+    const result = index_module.wn(index_module.dist.gql `
+          query (
+            $value: Int!
+            $unit: String!
+            $locale: RSLocale
+            $format: RewardValueFormatType!
+          ) {
+            formatRewardPrettyValue(
+              value: $value
+              unit: $unit
+              locale: $locale
+              formatType: $format
+            )
+          }
+        `, {
+      value: totalEarned,
+      unit,
+      locale,
+      format: formatType,
+    }, res.loading);
     return {
-      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
+      value: totalEarned,
+      statvalue: ((_d = result === null || result === void 0 ? void 0 : result.data) === null || _d === void 0 ? void 0 : _d.formatRewardPrettyValue) || fallback,
     };
   });
 };
@@ -2167,11 +2194,11 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       index.h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        index.h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
+        index.h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
           showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           index.h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           index.h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
-        states.loading ? (index.h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: "title", part: "sqm-title", style: {
+        states.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -2181,9 +2208,9 @@ function TaskCardView(props) {
               : "",
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (index.h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (index.h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (index.h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        index.h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
+        states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (index.h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        index.h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
           index.h("span", { class: "text" },
             content.repeatable && (index.h("div", null,
               index.h("span", { class: repetitions > 0
@@ -2218,6 +2245,79 @@ function TaskCardView(props) {
 }
 
 const style$4 = {
+  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
+  Column: mixins.AuthColumn,
+  HostBlock: mixins.HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: mixins.AuthButtonsContainer,
+  ErrorStyle: mixins.ErrorStyles,
+};
+const vanillaStyle$1 = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+function PortalRegisterView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  return (index.h("div", { class: sheet$4.classes.Wrapper, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$4),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+    index.h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
+      !states.hideInputs && (index.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 }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet$4.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      !states.hideInputs && (index.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 && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
+        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
+      }
+        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
+        class: sheet$4.classes.ErrorStyle,
+        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      content.terms,
+      index.h("div", { class: sheet$4.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}
+
+const style$5 = {
   ErrorStyle: {
     "&::part(control)": {
       borderColor: "var(--sl-color-danger-500)",
@@ -2239,7 +2339,7 @@ const style$4 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2262,16 +2362,16 @@ sl-checkbox[checked]::part(checked-icon){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$4 = JSS.jss.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = JSS.jss.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 function CheckboxFieldView(props) {
   var _a, _b, _c, _d, _e;
   const { states, content, callbacks } = props;
   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$4.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$5.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$1,
-      styleString$4),
+      vanillaStyle$2,
+      styleString$5),
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
@@ -2280,7 +2380,7 @@ function CheckboxFieldView(props) {
           return content.errorMessage;
         }
       } }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
-      class: sheet$4.classes.ErrorStyle,
+      class: sheet$5.classes.ErrorStyle,
     }
       : [])), global.intl.formatMessage({
       id: content.checkboxName + "-message",
@@ -2288,7 +2388,7 @@ function CheckboxFieldView(props) {
     }, {
       labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
     })),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$4.classes.ErrorMessageStyle }, content.errorMessage))));
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$5.classes.ErrorMessageStyle }, content.errorMessage))));
 }
 
 function CouponCodeView(props) {
@@ -2318,7 +2418,7 @@ function CouponCodeView(props) {
       index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(copyTextView.CopyTextView, Object.assign({}, props)))));
 }
 
-const style$5 = {
+const style$6 = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
     "--sl-input-background-color": "var(--sl-color-danger-10)",
@@ -2334,7 +2434,7 @@ const style$5 = {
     "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2346,24 +2446,24 @@ sl-select::part(label){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$5 = JSS.jss.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$6 = JSS.jss.createStyleSheet(style$6);
+const styleString$6 = sheet$6.toString();
 function DropdownFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   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$5.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$6.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$2,
-      styleString$5),
+      vanillaStyle$3,
+      styleString$6),
     index.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]) ? {
       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$5.classes.ErrorStyle,
+      class: sheet$6.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$5.classes.ErrorMessageStyle }, global.intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$6.classes.ErrorMessageStyle }, global.intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
@@ -2383,7 +2483,7 @@ const EditProfileView = (props) => {
         } }, text.editprofileheader),
       index.h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
         index.h("div", { class: "FormSection" },
-          states.formState.error && (index.h("sqm-form-message", { loading: states.loading, type: "error", exportparts: "erroralert-icon" },
+          states.formState.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
             index.h("div", { part: "erroralert-text" }, states.formState.error))),
           index.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"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
@@ -2496,10 +2596,10 @@ function LeaderboardView(props) {
       index.h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      index.h("table", null, [...Array(5)].map(() => {
+      index.h("table", null, [...Array(10)].map(() => {
         return (index.h("tr", null,
           index.h("td", null,
-            index.h("sqm-skeleton", null))));
+            index.h("sl-skeleton", null))));
       }))));
   }
   if (!states.hasLeaders)
@@ -2693,13 +2793,13 @@ function HeroView(props) {
           : ""}` }, content.secondaryColumn))) : (index.h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
-const style$6 = {
+const style$7 = {
   ErrorStyle: mixins.ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2707,21 +2807,21 @@ const vanillaStyle$3 = `
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$6 = JSS.jss.createStyleSheet(style$6);
-const styleString$6 = sheet$6.toString();
+const sheet$7 = JSS.jss.createStyleSheet(style$7);
+const styleString$7 = sheet$7.toString();
 function InputFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   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$6.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$7.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$3,
-      styleString$6),
+      vanillaStyle$4,
+      styleString$7),
     index.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]) ? {
       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$6.classes.ErrorStyle,
+      class: sheet$7.classes.ErrorStyle,
       helpText: global.intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2730,7 +2830,7 @@ function InputFieldView(props) {
       : [])))));
 }
 
-const style$7 = {
+const style$8 = {
   ErrorStyle: mixins.ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2738,7 +2838,7 @@ const style$7 = {
     },
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2775,21 +2875,21 @@ sl-input {
 }
 
 `;
-const sheet$7 = JSS.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = JSS.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function NameFieldsView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = props;
   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$7.classes.FieldsContainer },
+  return (index.h("div", { class: sheet$8.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$7),
+      vanillaStyle$5,
+      styleString$8),
     index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: !states.optional, 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$7.classes.ErrorStyle,
+      class: sheet$8.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
@@ -2797,7 +2897,7 @@ function NameFieldsView(props) {
       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$7.classes.ErrorStyle,
+      class: sheet$8.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }
       : [])))));
@@ -2847,7 +2947,7 @@ function ChangeMarktingView(props) {
         index.h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
 
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
   :host {
     margin: 0 auto;
     width: 100%;
@@ -2903,7 +3003,7 @@ function PortalFooterView(props) {
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$5,
+      vanillaStyle$6,
       styleString),
     index.h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2919,6 +3019,50 @@ function PortalFooterView(props) {
       index.h(PoweredByImg, { color: "currentColor" })))));
 }
 
+const vanillaStyle$7 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+function PortalForgotPasswordView(props) {
+  const { states, callbacks, content } = props;
+  const style = {
+    FormWrapper: {
+      ...mixins.AuthWrapper,
+      background: content.backgroundColor || "var(--sqm-portal-background)",
+      borderRadius: content.borderRadius || "var(--sqm-border-radius-normal)",
+      border: content.border ||
+        "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+    },
+    Column: { ...mixins.AuthColumn },
+    ButtonsContainer: mixins.AuthButtonsContainer,
+    SecondaryButton: {
+      margin: "auto",
+      display: "block",
+      cursor: "pointer",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$7,
+      styleString),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.messageSlot),
+    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
+      props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      props.states.success && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        index.h("div", { part: "successalert-text" }, content.successAlertText))),
+      index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      index.h("div", { class: sheet.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
+        index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => index_module.jn.push(states.loginPath) }, content.loginText)))));
+}
+
 function PortalFrameView(props, children) {
   const { data, notFullScreen, border } = props;
   const style = {
@@ -2971,6 +3115,56 @@ function PortalFrameView(props, children) {
     index.h("div", { class: sheet.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
 }
 
+const style$9 = {
+  Wrapper: mixins.AuthWrapper,
+  Column: mixins.AuthColumn,
+  ForgotButtonContainer: {
+    display: "inline",
+    cursor: "pointer",
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "var(--sqm-text-subdued)",
+    margin: "0",
+  },
+  ButtonsContainer: {
+    ...mixins.AuthButtonsContainer,
+    gap: "var(--sl-spacing-medium)",
+    "& > *": {
+      margin: "0 !important",
+    },
+  },
+};
+const vanillaStyle$8 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet$9 = JSS.createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
+function PortalLoginView(props) {
+  const { states, callbacks, content } = props;
+  return (index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$8,
+      styleString$9),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+    index.h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit },
+      props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      index.h("div", null,
+        index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
+        index.h("div", { class: sheet$9.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      index.h("div", { class: sheet$9.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
+        content.googleButton && index.h("sl-menu-divider", null),
+        content.googleButton,
+        content.secondaryButton))));
+}
+
 function ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
@@ -3085,7 +3279,7 @@ function ProgressBar({ stageCount, currentStage, }) {
   return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
 }
 
-const style$8 = {
+const style$a = {
   HostBlock: mixins.HostBlock,
   Container: {
     minWidth: "300px",
@@ -3435,8 +3629,8 @@ const style$8 = {
   },
 };
 // JSS config
-const sheet$8 = JSS.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$a = JSS.createStyleSheet(style$a);
+const styleString$a = sheet$a.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3459,7 +3653,7 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    return (index.h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet$8.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    return (index.h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet$a.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
         var _a, _b, _c, _d, _e;
         return callbacks.setExchangeState({
           amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
@@ -3467,7 +3661,7 @@ function RewardExchangeView(props) {
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
-      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$8.classes.SelectItem },
+      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$a.classes.SelectItem },
         step.prettyDestinationValue,
         index.h("br", null),
         index.h("div", { class: "step-cost", slot: "suffix" },
@@ -3486,8 +3680,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       index.h("div", { part: "choose-reward-container" },
-        index.h("div", { class: sheet$8.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$8.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        index.h("div", { class: sheet$a.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$a.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
@@ -3497,7 +3691,7 @@ function RewardExchangeView(props) {
             borderColor: "none",
           };
           return (index.h("div", { key: item.key, style: style },
-            index.h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$8.classes.Card, style: {
+            index.h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$a.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3514,14 +3708,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                index.h("div", { class: sheet$8.classes.Image, style: {
+                index.h("div", { class: sheet$a.classes.Image, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("img", { class: item.unavailableReasonCode
                       ? "image subdued"
                       : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
                       index.getAssetPath("./assets/Reward-image.png") })),
-                index.h("div", { class: sheet$8.classes.TextArea, style: {
+                index.h("div", { class: sheet$a.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("div", { class: "title", style: {
@@ -3554,7 +3748,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        index.h("div", { class: sheet$8.classes.Button },
+        index.h("div", { class: sheet$a.classes.Button },
           index.h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -3565,7 +3759,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", { class: sheet$8.classes.ChooseAmount, part: "choose-amount-container" },
+      index.h("div", { class: sheet$a.classes.ChooseAmount, part: "choose-amount-container" },
         index.h("div", { class: "wrapper" },
           index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               index.getAssetPath("./assets/Reward-image.png") }),
@@ -3574,7 +3768,7 @@ function RewardExchangeView(props) {
             ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "points" }, input)) : (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", null, input)),
             index.h("div", { class: "space" }))),
-        index.h("div", { class: sheet$8.classes.Button },
+        index.h("div", { class: sheet$a.classes.Button },
           index.h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           index.h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -3582,8 +3776,8 @@ function RewardExchangeView(props) {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (index.h("div", null,
-      index.h("div", { class: sheet$8.classes.Confirmation, part: "confirmation-container" },
-        index.h("div", { class: sheet$8.classes.Title }, states.content.text.redeemTitle),
+      index.h("div", { class: sheet$a.classes.Confirmation, part: "confirmation-container" },
+        index.h("div", { class: sheet$a.classes.Title }, states.content.text.redeemTitle),
         index.h("div", { class: "wrapper" },
           index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
           index.h("div", { class: "reward-item-container" },
@@ -3598,13 +3792,13 @@ function RewardExchangeView(props) {
         index.h("div", { class: "wrapper top-border padding" },
           index.h("div", { class: "field" }, states.content.text.costTitle),
           index.h("div", { class: "value" }, cost)),
-        index.h("div", { class: sheet$8.classes.Button },
+        index.h("div", { class: sheet$a.classes.Button },
           index.h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
           index.h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (index.h("div", { class: sheet$8.classes.Success, part: "success-container" },
+    return (index.h("div", { class: sheet$a.classes.Success, part: "success-container" },
       index.h(Gift$1, null),
       index.h(Confetti, null),
       index.h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -3618,7 +3812,7 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { class: "promo" },
         states.content.text.promoCode,
         index.h(copyTextView.CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
-      index.h("div", { class: sheet$8.classes.Button },
+      index.h("div", { class: sheet$a.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3630,7 +3824,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { class: sheet$8.classes.ProgressBar },
+    return (index.h("div", { class: sheet$a.classes.ProgressBar },
       index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return index.h("span", { class: "text" }, stageProgressList[stage]);
@@ -3642,24 +3836,24 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet$8.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$a.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
-        index.h("sl-card", { class: sheet$8.classes.Card },
-          index.h("div", { class: sheet$8.classes.CardLayout },
+        index.h("sl-card", { class: sheet$a.classes.Card },
+          index.h("div", { class: sheet$a.classes.CardLayout },
             index.h("div", null,
-              index.h("sqm-skeleton", { style: {
+              index.h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
                   margin: "9px",
-                }, width: "100px", height: "100px" })),
+                  "--border-radius": "var(--sqm-border-radius-normal)",
+                } })),
             index.h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                 width: "100%",
-                display: "flex",
-                flexDirection: "column",
-                gap: "var(--sl-spacing-small)",
               } },
-              index.h("sqm-skeleton", null),
-              index.h("sqm-skeleton", null),
-              index.h("sqm-skeleton", { width: "45%" }))))));
+              index.h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              index.h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              index.h("sl-skeleton", { style: { width: "45%" } }))))));
     })));
   }
   function errorMessage() {
@@ -3677,12 +3871,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$8.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$a.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (index.h("div", { class: sheet$8.classes.Container, part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$8),
+  return (index.h("div", { class: sheet$a.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString$a),
     index.h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -4258,7 +4452,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, copyString: copyString };
 }
 
-const style$9 = {
+const style$b = {
   Wrapper: {
     ...mixins.AuthWrapper,
     "max-width": "600px",
@@ -4296,7 +4490,7 @@ const style$9 = {
   },
   ErrorStyle: mixins.ErrorStyles,
 };
-const vanillaStyle$6 = `
+const vanillaStyle$9 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -4311,8 +4505,8 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$9 = JSS.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$b = JSS.createStyleSheet(style$b);
+const styleString$b = sheet$b.toString();
 function LeadFormView(props) {
   var _a, _b, _c, _d;
   const { states, refs, callbacks, content } = props;
@@ -4326,33 +4520,35 @@ function LeadFormView(props) {
     fieldLabel,
   });
   return (index.h(index.Fragment, null,
-    states.success && (index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
+    states.success && (index.h("div", { class: sheet$b.classes.Wrapper, part: "sqm-base" },
       index.h("style", { type: "text/css" },
-        vanillaStyle$6,
-        styleString$9),
+        vanillaStyle$9,
+        styleString$b),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-      index.h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
+      index.h("sqm-form-message", { exportparts: "success-icon" },
         index.h("b", null, content.submitSuccessHeader),
         index.h("br", null),
         index.h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
-      index.h("sl-button", { class: sheet$9.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
-    index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
+      index.h("sl-button", { class: sheet$b.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
+    index.h("div", { class: sheet$b.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
       index.h("style", { type: "text/css" },
-        vanillaStyle$6,
-        styleString$9),
+        vanillaStyle$9,
+        styleString$b),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-      index.h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-        states.error && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "error" },
-          index.h("p", { part: "alert-title" }, content.submitErrorHeader),
-          index.h("p", { part: "alert-text" }, global.intl.formatMessage({
+      index.h("sl-form", { class: sheet$b.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+        states.error && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet$b.classes.ErrorAlertContainer, open: true },
+          index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          index.h("b", null, content.submitErrorHeader),
+          index.h("br", null),
+          global.intl.formatMessage({
             id: "submitErrorDescription",
             defaultMessage: content.submitErrorDescription,
           }, {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
-          })))),
-        index.h("div", { class: sheet$9.classes.NameFieldWrapper },
-          index.h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
-          index.h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
+          }))),
+        index.h("div", { class: sheet$b.classes.NameFieldWrapper },
+          index.h("sqm-lead-input-field", { class: sheet$b.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
+          index.h("sqm-lead-input-field", { class: sheet$b.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
         index.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 }) => {
             if (!value) {
               return getRequiredFieldErrorMessage({
@@ -4364,18 +4560,18 @@ function LeadFormView(props) {
               return content.invalidEmailErrorMessage;
             }
           } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-          class: sheet$9.classes.ErrorStyle,
+          class: sheet$b.classes.ErrorStyle,
           helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
             content.requiredFieldErrorMessage,
         }
           : []))),
         index.h("input", { type: "hidden", hidden: true, name: "/referralCode", value: states.referralCode }),
         content.formData,
-        index.h("div", { class: sheet$9.classes.ButtonsContainer },
+        index.h("div", { class: sheet$b.classes.ButtonsContainer },
           index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"))))));
 }
 
-const style$a = {
+const style$c = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
     "--sl-input-background-color": "var(--sl-color-danger-10)",
@@ -4391,7 +4587,7 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$a = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -4406,8 +4602,8 @@ sl-select::part(menu){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$a = JSS.jss.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
+const sheet$c = JSS.jss.createStyleSheet(style$c);
+const styleString$c = sheet$c.toString();
 function LeadDropdownFieldView(props) {
   var _a, _b, _c, _d, _e;
   const { states, content } = props;
@@ -4418,10 +4614,10 @@ function LeadDropdownFieldView(props) {
   }, {
     dropdownLabel,
   });
-  return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$c.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$7,
-      styleString$a),
+      vanillaStyle$a,
+      styleString$c),
     index.h("sl-select", Object.assign({ style: { maxHeight: "100px" }, exportparts: "label: input-label, base: input-base", label: `${content.dropdownLabel}${content.dropdownOptional ? ` ${content.optionalLabel}` : ""}`, name: `/${content.dropdownName}`, multiple: content.multiple }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
         if (!value && !content.dropdownOptional) {
           return getRequiredFieldErrorMessage({
@@ -4429,10 +4625,10 @@ function LeadDropdownFieldView(props) {
           });
         }
       } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
-      class: sheet$a.classes.ErrorStyle,
+      class: sheet$c.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$c.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
       dropdownLabel: content.dropdownLabel,
     })))));
 }
@@ -4487,7 +4683,10 @@ exports.LeaderboardView = LeaderboardView;
 exports.NameFieldsView = NameFieldsView;
 exports.PortalChangePasswordView = PortalChangePasswordView;
 exports.PortalFooterView = PortalFooterView;
+exports.PortalForgotPasswordView = PortalForgotPasswordView;
 exports.PortalFrameView = PortalFrameView;
+exports.PortalLoginView = PortalLoginView;
+exports.PortalRegisterView = PortalRegisterView;
 exports.PoweredByImg = PoweredByImg;
 exports.ProgressBar = ProgressBar;
 exports.ProgressBarView = ProgressBarView;