@saasquatch/mint-components 2.1.2-4 → 2.1.3

package/dist/esm/{ShadowViewAddon-534d989f.js → ShadowViewAddon-8f13244a.js}

@@ -1,19 +1,19 @@
-import { h, c as Host, d as getAssetPath, F as Fragment, g as getElement } from './index-38ad4957.js';
-import { i as intl } from './global-52a25cf2.js';
-import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-50442785.js';
-import { H, L, J, d as dist, w as wn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-8ba90d99.js';
+import { h, c as Host, d as getAssetPath, F as Fragment, g as getElement } from './index-b3a06de8.js';
+import { i as intl } from './global-bd937f60.js';
+import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-63370afd.js';
+import { H, L, J, d as dist, w as wn, j as jn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-6fedc77b.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-2415f732.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-e350af33.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-87259b11.js';
-import { T as TextSpanView } from './sqm-text-span-view-738acfb3.js';
-import { u as useChildElements } from './useChildElements-6d7c412e.js';
-import { l as luxon } from './luxon-1be92a8e.js';
+import { C as CopyTextView } from './copy-text-view-fac47254.js';
+import { u as useChildElements } from './useChildElements-3634dc9c.js';
+import { l as luxon } from './luxon-bbf75a9d.js';
+import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-e613f25f.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-a8c708cd.js';
+import { a as isValidColor, b as isMobile } from './utilities-d71fe436.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-176e92e3.js';
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
@@ -941,8 +941,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,
     };
   });
 };
@@ -984,8 +984,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,
     };
   });
 };
@@ -1038,13 +1038,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(dist.gql `
       query (
         $programId: ID
         $type: RewardType!
         $unit: String!
-        $format: RewardValueFormatType!
         $locale: RSLocale
+        $format: RewardValueFormatType!
       ) {
         fallback: formatRewardPrettyValue(
           value: 0
@@ -1060,7 +1061,8 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
               locale: $locale
             ) {
               ... on CreditRewardBalance {
-                prettyAvailableValue(formatType: $format)
+                totalAssignedCredit
+                totalPendingCredit
               }
             }
           }
@@ -1070,15 +1072,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 = wn(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,
     };
   });
 };
@@ -2165,11 +2192,11 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
-        states.loading ? (h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
+        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -2179,9 +2206,9 @@ function TaskCardView(props) {
               : "",
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
@@ -2216,6 +2243,79 @@ function TaskCardView(props) {
 }
 
 const style$4 = {
+  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Column: AuthColumn,
+  HostBlock: HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle$1 = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$4 = 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 (h("div", { class: sheet$4.classes.Wrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$4),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      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 }) => {
+          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 && (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 || ((_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,
+      h("div", { class: sheet$4.classes.ButtonsContainer },
+        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)",
@@ -2237,7 +2337,7 @@ const style$4 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2260,16 +2360,16 @@ sl-checkbox[checked]::part(checked-icon){
 }
 `;
 jss.setup(create());
-const sheet$4 = jss.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = 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 (h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$5.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$1,
-      styleString$4),
+      vanillaStyle$2,
+      styleString$5),
     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);
@@ -2278,7 +2378,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,
     }
       : [])), intl.formatMessage({
       id: content.checkboxName + "-message",
@@ -2286,7 +2386,7 @@ function CheckboxFieldView(props) {
     }, {
       labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
     })),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$4.classes.ErrorMessageStyle }, content.errorMessage))));
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$5.classes.ErrorMessageStyle }, content.errorMessage))));
 }
 
 function CouponCodeView(props) {
@@ -2316,7 +2416,7 @@ function CouponCodeView(props) {
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(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)",
@@ -2332,7 +2432,7 @@ const style$5 = {
     "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2344,24 +2444,24 @@ sl-select::part(label){
 }
 `;
 jss.setup(create());
-const sheet$5 = jss.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$6 = 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 (h("div", { class: sheet$5.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$6.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$2,
-      styleString$5),
+      vanillaStyle$3,
+      styleString$6),
     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]) && (h("p", { class: sheet$5.classes.ErrorMessageStyle }, intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$6.classes.ErrorMessageStyle }, intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
@@ -2381,7 +2481,7 @@ const EditProfileView = (props) => {
         } }, text.editprofileheader),
       h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
         h("div", { class: "FormSection" },
-          states.formState.error && (h("sqm-form-message", { loading: states.loading, type: "error", exportparts: "erroralert-icon" },
+          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"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
@@ -2494,10 +2594,10 @@ function LeaderboardView(props) {
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      h("table", null, [...Array(5)].map(() => {
+      h("table", null, [...Array(10)].map(() => {
         return (h("tr", null,
           h("td", null,
-            h("sqm-skeleton", null))));
+            h("sl-skeleton", null))));
       }))));
   }
   if (!states.hasLeaders)
@@ -2691,13 +2791,13 @@ function HeroView(props) {
           : ""}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
-const style$6 = {
+const style$7 = {
   ErrorStyle: ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2705,21 +2805,21 @@ const vanillaStyle$3 = `
 }
 `;
 jss.setup(create());
-const sheet$6 = jss.createStyleSheet(style$6);
-const styleString$6 = sheet$6.toString();
+const sheet$7 = 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 (h("div", { class: sheet$6.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$7.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$3,
-      styleString$6),
+      vanillaStyle$4,
+      styleString$7),
     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: intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2728,7 +2828,7 @@ function InputFieldView(props) {
       : [])))));
 }
 
-const style$7 = {
+const style$8 = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2736,7 +2836,7 @@ const style$7 = {
     },
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2773,21 +2873,21 @@ sl-input {
 }
 
 `;
-const sheet$7 = createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = 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 (h("div", { class: sheet$7.classes.FieldsContainer },
+  return (h("div", { class: sheet$8.classes.FieldsContainer },
     h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$7),
+      vanillaStyle$5,
+      styleString$8),
     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",
     }
       : []))),
@@ -2795,7 +2895,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",
     }
       : [])))));
@@ -2845,7 +2945,7 @@ function ChangeMarktingView(props) {
         h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
 
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
   :host {
     margin: 0 auto;
     width: 100%;
@@ -2901,7 +3001,7 @@ function PortalFooterView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$5,
+      vanillaStyle$6,
       styleString),
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2917,6 +3017,50 @@ function PortalFooterView(props) {
       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: {
+      ...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: { ...AuthColumn },
+    ButtonsContainer: AuthButtonsContainer,
+    SecondaryButton: {
+      margin: "auto",
+      display: "block",
+      cursor: "pointer",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle$7,
+      styleString),
+    h(TextSpanView, { type: "h3" }, content.messageSlot),
+    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))),
+      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("div", { class: sheet.classes.ButtonsContainer },
+        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
+        h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => jn.push(states.loginPath) }, content.loginText)))));
+}
+
 function PortalFrameView(props, children) {
   const { data, notFullScreen, border } = props;
   const style = {
@@ -2969,6 +3113,56 @@ function PortalFrameView(props, children) {
     h("div", { class: sheet.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
 }
 
+const style$9 = {
+  Wrapper: AuthWrapper,
+  Column: AuthColumn,
+  ForgotButtonContainer: {
+    display: "inline",
+    cursor: "pointer",
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "var(--sqm-text-subdued)",
+    margin: "0",
+  },
+  ButtonsContainer: {
+    ...AuthButtonsContainer,
+    gap: "var(--sl-spacing-medium)",
+    "& > *": {
+      margin: "0 !important",
+    },
+  },
+};
+const vanillaStyle$8 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet$9 = createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
+function PortalLoginView(props) {
+  const { states, callbacks, content } = props;
+  return (h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle$8,
+      styleString$9),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet$9.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("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("div", { class: sheet$9.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      h("div", { class: sheet$9.classes.ButtonsContainer },
+        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
+        content.googleButton && h("sl-menu-divider", null),
+        content.googleButton,
+        content.secondaryButton))));
+}
+
 function ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
@@ -3083,7 +3277,7 @@ function ProgressBar({ stageCount, currentStage, }) {
   return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
 }
 
-const style$8 = {
+const style$a = {
   HostBlock: HostBlock,
   Container: {
     minWidth: "300px",
@@ -3433,8 +3627,8 @@ const style$8 = {
   },
 };
 // JSS config
-const sheet$8 = createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$a = createStyleSheet(style$a);
+const styleString$a = sheet$a.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3457,7 +3651,7 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    return (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 (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,
@@ -3465,7 +3659,7 @@ function RewardExchangeView(props) {
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
-      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$8.classes.SelectItem },
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$a.classes.SelectItem },
         step.prettyDestinationValue,
         h("br", null),
         h("div", { class: "step-cost", slot: "suffix" },
@@ -3484,8 +3678,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       h("div", { part: "choose-reward-container" },
-        h("div", { class: sheet$8.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$8.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        h("div", { class: sheet$a.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (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)
@@ -3495,7 +3689,7 @@ function RewardExchangeView(props) {
             borderColor: "none",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$8.classes.Card, style: {
+            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$a.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3512,14 +3706,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                h("div", { class: sheet$8.classes.Image, style: {
+                h("div", { class: sheet$a.classes.Image, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("img", { class: item.unavailableReasonCode
                       ? "image subdued"
                       : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
                       getAssetPath("./assets/Reward-image.png") })),
-                h("div", { class: sheet$8.classes.TextArea, style: {
+                h("div", { class: sheet$a.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("div", { class: "title", style: {
@@ -3552,7 +3746,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        h("div", { class: sheet$8.classes.Button },
+        h("div", { class: sheet$a.classes.Button },
           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))),
     ];
   }
@@ -3563,7 +3757,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (h("div", null,
-      h("div", { class: sheet$8.classes.ChooseAmount, part: "choose-amount-container" },
+      h("div", { class: sheet$a.classes.ChooseAmount, part: "choose-amount-container" },
         h("div", { class: "wrapper" },
           h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               getAssetPath("./assets/Reward-image.png") }),
@@ -3572,7 +3766,7 @@ function RewardExchangeView(props) {
             ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (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" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
             h("div", { class: "space" }))),
-        h("div", { class: sheet$8.classes.Button },
+        h("div", { class: sheet$a.classes.Button },
           h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -3580,8 +3774,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 (h("div", null,
-      h("div", { class: sheet$8.classes.Confirmation, part: "confirmation-container" },
-        h("div", { class: sheet$8.classes.Title }, states.content.text.redeemTitle),
+      h("div", { class: sheet$a.classes.Confirmation, part: "confirmation-container" },
+        h("div", { class: sheet$a.classes.Title }, states.content.text.redeemTitle),
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
@@ -3596,13 +3790,13 @@ function RewardExchangeView(props) {
         h("div", { class: "wrapper top-border padding" },
           h("div", { class: "field" }, states.content.text.costTitle),
           h("div", { class: "value" }, cost)),
-        h("div", { class: sheet$8.classes.Button },
+        h("div", { class: sheet$a.classes.Button },
           h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
           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 (h("div", { class: sheet$8.classes.Success, part: "success-container" },
+    return (h("div", { class: sheet$a.classes.Success, part: "success-container" },
       h(Gift$1, null),
       h(Confetti, null),
       h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -3616,7 +3810,7 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
         h(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 }))),
-      h("div", { class: sheet$8.classes.Button },
+      h("div", { class: sheet$a.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3628,7 +3822,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet$8.classes.ProgressBar },
+    return (h("div", { class: sheet$a.classes.ProgressBar },
       h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return h("span", { class: "text" }, stageProgressList[stage]);
@@ -3640,24 +3834,24 @@ function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet$8.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (h("div", { class: sheet$a.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (h("div", null,
-        h("sl-card", { class: sheet$8.classes.Card },
-          h("div", { class: sheet$8.classes.CardLayout },
+        h("sl-card", { class: sheet$a.classes.Card },
+          h("div", { class: sheet$a.classes.CardLayout },
             h("div", null,
-              h("sqm-skeleton", { style: {
+              h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
                   margin: "9px",
-                }, width: "100px", height: "100px" })),
+                  "--border-radius": "var(--sqm-border-radius-normal)",
+                } })),
             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)",
               } },
-              h("sqm-skeleton", null),
-              h("sqm-skeleton", null),
-              h("sqm-skeleton", { width: "45%" }))))));
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { width: "45%" } }))))));
     })));
   }
   function errorMessage() {
@@ -3675,12 +3869,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 (h("div", { class: sheet$8.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString$8),
+  return (h("div", { class: sheet$a.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString$a),
     h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -4256,7 +4450,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, copyString: copyString };
 }
 
-const style$9 = {
+const style$b = {
   Wrapper: {
     ...AuthWrapper,
     "max-width": "600px",
@@ -4294,7 +4488,7 @@ const style$9 = {
   },
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$6 = `
+const vanillaStyle$9 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -4309,8 +4503,8 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$9 = createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$b = createStyleSheet(style$b);
+const styleString$b = sheet$b.toString();
 function LeadFormView(props) {
   var _a, _b, _c, _d;
   const { states, refs, callbacks, content } = props;
@@ -4324,33 +4518,35 @@ function LeadFormView(props) {
     fieldLabel,
   });
   return (h(Fragment, null,
-    states.success && (h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
+    states.success && (h("div", { class: sheet$b.classes.Wrapper, part: "sqm-base" },
       h("style", { type: "text/css" },
-        vanillaStyle$6,
-        styleString$9),
+        vanillaStyle$9,
+        styleString$b),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
+      h("sqm-form-message", { exportparts: "success-icon" },
         h("b", null, content.submitSuccessHeader),
         h("br", null),
         h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
-      h("sl-button", { class: sheet$9.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
-    h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
+      h("sl-button", { class: sheet$b.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
+    h("div", { class: sheet$b.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
       h("style", { type: "text/css" },
-        vanillaStyle$6,
-        styleString$9),
+        vanillaStyle$9,
+        styleString$b),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "error" },
-          h("p", { part: "alert-title" }, content.submitErrorHeader),
-          h("p", { part: "alert-text" }, intl.formatMessage({
+      h("sl-form", { class: sheet$b.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet$b.classes.ErrorAlertContainer, open: true },
+          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          h("b", null, content.submitErrorHeader),
+          h("br", null),
+          intl.formatMessage({
             id: "submitErrorDescription",
             defaultMessage: content.submitErrorDescription,
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
-          })))),
-        h("div", { class: sheet$9.classes.NameFieldWrapper },
-          h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
-          h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
+          }))),
+        h("div", { class: sheet$b.classes.NameFieldWrapper },
+          h("sqm-lead-input-field", { class: sheet$b.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
+          h("sqm-lead-input-field", { class: sheet$b.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
         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({
@@ -4362,18 +4558,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,
         }
           : []))),
         h("input", { type: "hidden", hidden: true, name: "/referralCode", value: states.referralCode }),
         content.formData,
-        h("div", { class: sheet$9.classes.ButtonsContainer },
+        h("div", { class: sheet$b.classes.ButtonsContainer },
           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)",
@@ -4389,7 +4585,7 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$a = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -4404,8 +4600,8 @@ sl-select::part(menu){
 }
 `;
 jss.setup(create());
-const sheet$a = jss.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
+const sheet$c = jss.createStyleSheet(style$c);
+const styleString$c = sheet$c.toString();
 function LeadDropdownFieldView(props) {
   var _a, _b, _c, _d, _e;
   const { states, content } = props;
@@ -4416,10 +4612,10 @@ function LeadDropdownFieldView(props) {
   }, {
     dropdownLabel,
   });
-  return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$c.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$7,
-      styleString$a),
+      vanillaStyle$a,
+      styleString$c),
     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({
@@ -4427,10 +4623,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]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$c.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
       dropdownLabel: content.dropdownLabel,
     })))));
 }
@@ -4469,4 +4665,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { empty as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, rewardExchange as F, useShareButton as G, HeroView as H, InputFieldView as I, useShareLink as J, ProgressBarView as K, LeaderboardView as L, ProgressBar as M, NameFieldsView as N, LeadFormView as O, PortalChangePasswordView as P, LeadDropdownFieldView as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, ShadowViewAddon as U, useBigStat as V, withShadowView as W, demoRewardExchange as X, ShareButtonView as a, PoweredByImg as b, BaseRegistrationFormView as c, CheckboxFieldView as d, CouponCodeView as e, ChangeMarktingView as f, PortalFooterView as g, PortalFrameView as h, RewardExchangeView as i, rewardExchangeLongText as j, rewardExchangeSelected as k, chooseAmountFixed as l, chooseAmountFixedNoDescription as m, chooseAmountVariable as n, chooseAmountVariableNoDescription as o, chooseAmountVariableDisabled as p, chooseAmountVariableUnavailable as q, rewardExchangeCustomErrorMsg as r, confirmFixed as s, confirmVariable as t, useDemoBigStat as u, redemptionError as v, queryError as w, success as x, successVariable as y, loading as z };
+export { success as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, successVariable as F, loading as G, HeroView as H, InputFieldView as I, empty as J, rewardExchange as K, LeaderboardView as L, useShareButton as M, NameFieldsView as N, useShareLink as O, PortalChangePasswordView as P, ProgressBarView as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, ProgressBar as U, LeadFormView as V, LeadDropdownFieldView as W, ShadowViewAddon as X, useBigStat as Y, withShadowView as Z, demoRewardExchange as _, ShareButtonView as a, PoweredByImg as b, BaseRegistrationFormView as c, CheckboxFieldView as d, PortalRegisterView as e, CouponCodeView as f, ChangeMarktingView as g, PortalFooterView as h, PortalForgotPasswordView as i, PortalFrameView as j, PortalLoginView as k, RewardExchangeView as l, rewardExchangeLongText as m, rewardExchangeSelected as n, chooseAmountFixed as o, chooseAmountFixedNoDescription as p, chooseAmountVariable as q, rewardExchangeCustomErrorMsg as r, chooseAmountVariableNoDescription as s, chooseAmountVariableDisabled as t, useDemoBigStat as u, chooseAmountVariableUnavailable as v, confirmFixed as w, confirmVariable as x, redemptionError as y, queryError as z };