@saasquatch/mint-components 2.0.5-2 → 2.0.5

package/dist/cjs/{ShadowViewAddon-5a9d4a55.js → ShadowViewAddon-ae3a32c3.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-const index = require('./index-8277cbb3.js');
-const global = require('./global-d90f3195.js');
-const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f267fad6.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-e862bfd4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-03024ff4.js');
+const useReferralCodes = require('./useReferralCodes-11cdf43b.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-84b623d1.js');
-const luxon = require('./luxon-c1ad356a.js');
+const copyTextView = require('./copy-text-view-322436c2.js');
+const useChildElements = require('./useChildElements-966c9041.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-3577b60d.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
+const utilities = require('./utilities-9a0c5e91.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
@@ -2148,6 +2148,79 @@ function TaskCardView(props) {
 }
 
 const style$3 = {
+  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 = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.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$3.classes.Wrapper, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString$3),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+    index.h("sl-form", { class: sheet$3.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$3.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$3.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$3.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}
+
+const style$4 = {
   ErrorStyle: {
     "&::part(control)": {
       borderColor: "var(--sl-color-danger-500)",
@@ -2169,7 +2242,7 @@ const style$3 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle = `
+const vanillaStyle$1 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2192,16 +2265,16 @@ sl-checkbox[checked]::part(checked-icon){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$3 = JSS.jss.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$4 = JSS.jss.createStyleSheet(style$4);
+const styleString$4 = sheet$4.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$3.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$3),
+      vanillaStyle$1,
+      styleString$4),
     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);
@@ -2210,7 +2283,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$3.classes.ErrorStyle,
+      class: sheet$4.classes.ErrorStyle,
     }
       : [])), global.intl.formatMessage({
       id: content.checkboxName + "-message",
@@ -2218,7 +2291,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$3.classes.ErrorMessageStyle }, content.errorMessage))));
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$4.classes.ErrorMessageStyle }, content.errorMessage))));
 }
 
 function CouponCodeView(props) {
@@ -2248,7 +2321,7 @@ function CouponCodeView(props) {
       index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(copyTextView.CopyTextView, Object.assign({}, props)))));
 }
 
-const style$4 = {
+const style$5 = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
     "--sl-input-background-color": "var(--sl-color-danger-10)",
@@ -2264,7 +2337,7 @@ const style$4 = {
     "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2276,24 +2349,24 @@ sl-select::part(label){
 }
 `;
 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 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$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-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$4.classes.ErrorStyle,
+      class: sheet$5.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$4.classes.ErrorMessageStyle }, global.intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$5.classes.ErrorMessageStyle }, global.intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
@@ -2623,13 +2696,13 @@ function HeroView(props) {
           : ""}` }, content.secondaryColumn))) : (index.h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
-const style$5 = {
+const style$6 = {
   ErrorStyle: mixins.ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2637,21 +2710,21 @@ const vanillaStyle$2 = `
 }
 `;
 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 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$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-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$5.classes.ErrorStyle,
+      class: sheet$6.classes.ErrorStyle,
       helpText: global.intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2660,7 +2733,7 @@ function InputFieldView(props) {
       : [])))));
 }
 
-const style$6 = {
+const style$7 = {
   ErrorStyle: mixins.ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2668,7 +2741,7 @@ const style$6 = {
     },
   },
 };
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2705,21 +2778,21 @@ sl-input {
 }
 
 `;
-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 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$6.classes.FieldsContainer },
+  return (index.h("div", { class: sheet$7.classes.FieldsContainer },
     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: "/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$6.classes.ErrorStyle,
+      class: sheet$7.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
@@ -2727,7 +2800,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$6.classes.ErrorStyle,
+      class: sheet$7.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }
       : [])))));
@@ -2777,15 +2850,15 @@ function ChangeMarktingView(props) {
         index.h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
 
-const vanillaStyle$4 = `
-  :host{
+const vanillaStyle$5 = `
+  :host {
     margin: 0 auto;
     width: 100%;
   }
-  a{
+  a {
     cursor:pointer;
     color: var(--sqm-text-subdued);
-    text-decoration: none ;
+    text-decoration: none;
   }
 `;
 function PortalFooterView(props) {
@@ -2833,7 +2906,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$4,
+      vanillaStyle$5,
       styleString),
     index.h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2849,6 +2922,50 @@ function PortalFooterView(props) {
       index.h(PoweredByImg, { color: "currentColor" })))));
 }
 
+const vanillaStyle$6 = `
+: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$6,
+      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 = {
@@ -3015,7 +3132,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$7 = {
+const style$8 = {
   HostBlock: mixins.HostBlock,
   Container: {
     minWidth: "300px",
@@ -3365,8 +3482,8 @@ const style$7 = {
   },
 };
 // JSS config
-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();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3389,7 +3506,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$7.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$8.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,
@@ -3397,7 +3514,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$7.classes.SelectItem },
+      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$8.classes.SelectItem },
         step.prettyDestinationValue,
         index.h("br", null),
         index.h("div", { class: "step-cost", slot: "suffix" },
@@ -3416,8 +3533,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       index.h("div", { part: "choose-reward-container" },
-        index.h("div", { class: sheet$7.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$7.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        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) => {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
@@ -3427,7 +3544,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$7.classes.Card, style: {
+            index.h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$8.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3444,14 +3561,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                index.h("div", { class: sheet$7.classes.Image, style: {
+                index.h("div", { class: sheet$8.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$7.classes.TextArea, style: {
+                index.h("div", { class: sheet$8.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("div", { class: "title", style: {
@@ -3484,7 +3601,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        index.h("div", { class: sheet$7.classes.Button },
+        index.h("div", { class: sheet$8.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))),
     ];
   }
@@ -3495,7 +3612,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", { class: sheet$7.classes.ChooseAmount, part: "choose-amount-container" },
+      index.h("div", { class: sheet$8.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") }),
@@ -3504,7 +3621,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$7.classes.Button },
+        index.h("div", { class: sheet$8.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)))));
   }
@@ -3512,8 +3629,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$7.classes.Confirmation, part: "confirmation-container" },
-        index.h("div", { class: sheet$7.classes.Title }, states.content.text.redeemTitle),
+      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: "wrapper" },
           index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
           index.h("div", { class: "reward-item-container" },
@@ -3528,13 +3645,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$7.classes.Button },
+        index.h("div", { class: sheet$8.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$7.classes.Success, part: "success-container" },
+    return (index.h("div", { class: sheet$8.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),
@@ -3548,7 +3665,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$7.classes.Button },
+      index.h("div", { class: sheet$8.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3560,7 +3677,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { class: sheet$7.classes.ProgressBar },
+    return (index.h("div", { class: sheet$8.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]);
@@ -3572,10 +3689,10 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet$7.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$8.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
-        index.h("sl-card", { class: sheet$7.classes.Card },
-          index.h("div", { class: sheet$7.classes.CardLayout },
+        index.h("sl-card", { class: sheet$8.classes.Card },
+          index.h("div", { class: sheet$8.classes.CardLayout },
             index.h("div", null,
               index.h("sl-skeleton", { style: {
                   width: "100px",
@@ -3607,12 +3724,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$7.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$8.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (index.h("div", { class: sheet$7.classes.Container, part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$7),
+  return (index.h("div", { class: sheet$8.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString$8),
     index.h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -4188,7 +4305,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, copyString: copyString };
 }
 
-const style$8 = {
+const style$9 = {
   Wrapper: {
     ...mixins.AuthWrapper,
     "max-width": "600px",
@@ -4226,7 +4343,7 @@ const style$8 = {
   },
   ErrorStyle: mixins.ErrorStyles,
 };
-const vanillaStyle$5 = `
+const vanillaStyle$7 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -4241,8 +4358,8 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$8 = JSS.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$9 = JSS.createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
 function LeadFormView(props) {
   var _a, _b, _c, _d;
   const { states, refs, callbacks, content } = props;
@@ -4256,23 +4373,23 @@ function LeadFormView(props) {
     fieldLabel,
   });
   return (index.h(index.Fragment, null,
-    states.success && (index.h("div", { class: sheet$8.classes.Wrapper, part: "sqm-base" },
+    states.success && (index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
       index.h("style", { type: "text/css" },
-        vanillaStyle$5,
-        styleString$8),
+        vanillaStyle$7,
+        styleString$9),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
       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$8.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
-    index.h("div", { class: sheet$8.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
+      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("style", { type: "text/css" },
-        vanillaStyle$5,
-        styleString$8),
+        vanillaStyle$7,
+        styleString$9),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-      index.h("sl-form", { class: sheet$8.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$8.classes.ErrorAlertContainer, open: true },
+      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: "danger", class: sheet$9.classes.ErrorAlertContainer, open: true },
           index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           index.h("b", null, content.submitErrorHeader),
           index.h("br", null),
@@ -4282,9 +4399,9 @@ function LeadFormView(props) {
           }, {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
           }))),
-        index.h("div", { class: sheet$8.classes.NameFieldWrapper },
-          index.h("sqm-lead-input-field", { class: sheet$8.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
-          index.h("sqm-lead-input-field", { class: sheet$8.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
+        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("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({
@@ -4296,18 +4413,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$8.classes.ErrorStyle,
+          class: sheet$9.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$8.classes.ButtonsContainer },
+        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 || "Register"))))));
 }
 
-const style$9 = {
+const style$a = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
     "--sl-input-background-color": "var(--sl-color-danger-10)",
@@ -4323,7 +4440,7 @@ const style$9 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$8 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -4338,8 +4455,8 @@ sl-select::part(menu){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$9 = JSS.jss.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$a = JSS.jss.createStyleSheet(style$a);
+const styleString$a = sheet$a.toString();
 function LeadDropdownFieldView(props) {
   var _a, _b, _c, _d, _e;
   const { states, content } = props;
@@ -4350,10 +4467,10 @@ function LeadDropdownFieldView(props) {
   }, {
     dropdownLabel,
   });
-  return (index.h("div", { class: sheet$9.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$6,
-      styleString$9),
+      vanillaStyle$8,
+      styleString$a),
     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({
@@ -4361,10 +4478,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$9.classes.ErrorStyle,
+      class: sheet$a.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$9.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
       dropdownLabel: content.dropdownLabel,
     })))));
 }
@@ -4418,7 +4535,9 @@ exports.LeaderboardView = LeaderboardView;
 exports.NameFieldsView = NameFieldsView;
 exports.PortalChangePasswordView = PortalChangePasswordView;
 exports.PortalFooterView = PortalFooterView;
+exports.PortalForgotPasswordView = PortalForgotPasswordView;
 exports.PortalFrameView = PortalFrameView;
+exports.PortalRegisterView = PortalRegisterView;
 exports.PoweredByImg = PoweredByImg;
 exports.ProgressBar = ProgressBar;
 exports.ProgressBarView = ProgressBarView;