@saasquatch/mint-components 2.0.5-2 → 2.0.5-3

package/dist/esm/{ShadowViewAddon-2b061a3a.js → ShadowViewAddon-78a1c35c.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-fc653a2a.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-849b7d56.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-58a69018.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-c9811a48.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-f87eea47.js';
-import { H as HostBlock, E as ErrorStyles, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer } 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-14eb2cd7.js';
-import { l as luxon } from './luxon-1be92a8e.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-c2e809cf.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-fac47254.js';
+import { u as useChildElements } from './useChildElements-3d872cef.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-8dba1079.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-a8c708cd.js';
+import { a as isValidColor, b as isMobile } from './utilities-72c07b09.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;
@@ -2146,6 +2146,79 @@ function TaskCardView(props) {
 }
 
 const style$3 = {
+  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Column: AuthColumn,
+  HostBlock: HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$3 = 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 (h("div", { class: sheet$3.classes.Wrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString$3),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet$3.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$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 && (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$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,
+      h("div", { class: sheet$3.classes.ButtonsContainer },
+        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)",
@@ -2167,7 +2240,7 @@ const style$3 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle = `
+const vanillaStyle$1 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2190,16 +2263,16 @@ sl-checkbox[checked]::part(checked-icon){
 }
 `;
 jss.setup(create());
-const sheet$3 = jss.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$4 = 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 (h("div", { class: sheet$3.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$3),
+      vanillaStyle$1,
+      styleString$4),
     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);
@@ -2208,7 +2281,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,
     }
       : [])), intl.formatMessage({
       id: content.checkboxName + "-message",
@@ -2216,7 +2289,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$3.classes.ErrorMessageStyle }, content.errorMessage))));
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$4.classes.ErrorMessageStyle }, content.errorMessage))));
 }
 
 function CouponCodeView(props) {
@@ -2246,7 +2319,7 @@ function CouponCodeView(props) {
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(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)",
@@ -2262,7 +2335,7 @@ const style$4 = {
     "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2274,24 +2347,24 @@ sl-select::part(label){
 }
 `;
 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 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$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-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]) && (h("p", { class: sheet$4.classes.ErrorMessageStyle }, intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$5.classes.ErrorMessageStyle }, intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
@@ -2621,13 +2694,13 @@ function HeroView(props) {
           : ""}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
-const style$5 = {
+const style$6 = {
   ErrorStyle: ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2635,21 +2708,21 @@ const vanillaStyle$2 = `
 }
 `;
 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 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$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-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: intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2658,7 +2731,7 @@ function InputFieldView(props) {
       : [])))));
 }
 
-const style$6 = {
+const style$7 = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2666,7 +2739,7 @@ const style$6 = {
     },
   },
 };
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2703,21 +2776,21 @@ sl-input {
 }
 
 `;
-const sheet$6 = createStyleSheet(style$6);
-const styleString$6 = sheet$6.toString();
+const sheet$7 = 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 (h("div", { class: sheet$6.classes.FieldsContainer },
+  return (h("div", { class: sheet$7.classes.FieldsContainer },
     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: "/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",
     }
       : []))),
@@ -2725,7 +2798,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",
     }
       : [])))));
@@ -2775,15 +2848,15 @@ function ChangeMarktingView(props) {
         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) {
@@ -2831,7 +2904,7 @@ function PortalFooterView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$4,
+      vanillaStyle$5,
       styleString),
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2847,6 +2920,50 @@ function PortalFooterView(props) {
       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: {
+      ...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$6,
+      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 = {
@@ -3013,7 +3130,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$7 = {
+const style$8 = {
   HostBlock: HostBlock,
   Container: {
     minWidth: "300px",
@@ -3363,8 +3480,8 @@ const style$7 = {
   },
 };
 // JSS config
-const sheet$7 = createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3387,7 +3504,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$7.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$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,
@@ -3395,7 +3512,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$7.classes.SelectItem },
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$8.classes.SelectItem },
         step.prettyDestinationValue,
         h("br", null),
         h("div", { class: "step-cost", slot: "suffix" },
@@ -3414,8 +3531,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       h("div", { part: "choose-reward-container" },
-        h("div", { class: sheet$7.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$7.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        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) => {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
@@ -3425,7 +3542,7 @@ function RewardExchangeView(props) {
             borderColor: "none",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$7.classes.Card, style: {
+            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$8.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3442,14 +3559,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                h("div", { class: sheet$7.classes.Image, style: {
+                h("div", { class: sheet$8.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$7.classes.TextArea, style: {
+                h("div", { class: sheet$8.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("div", { class: "title", style: {
@@ -3482,7 +3599,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        h("div", { class: sheet$7.classes.Button },
+        h("div", { class: sheet$8.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))),
     ];
   }
@@ -3493,7 +3610,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (h("div", null,
-      h("div", { class: sheet$7.classes.ChooseAmount, part: "choose-amount-container" },
+      h("div", { class: sheet$8.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") }),
@@ -3502,7 +3619,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$7.classes.Button },
+        h("div", { class: sheet$8.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)))));
   }
@@ -3510,8 +3627,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$7.classes.Confirmation, part: "confirmation-container" },
-        h("div", { class: sheet$7.classes.Title }, states.content.text.redeemTitle),
+      h("div", { class: sheet$8.classes.Confirmation, part: "confirmation-container" },
+        h("div", { class: sheet$8.classes.Title }, states.content.text.redeemTitle),
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
@@ -3526,13 +3643,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$7.classes.Button },
+        h("div", { class: sheet$8.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$7.classes.Success, part: "success-container" },
+    return (h("div", { class: sheet$8.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),
@@ -3546,7 +3663,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$7.classes.Button },
+      h("div", { class: sheet$8.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3558,7 +3675,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet$7.classes.ProgressBar },
+    return (h("div", { class: sheet$8.classes.ProgressBar },
       h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return h("span", { class: "text" }, stageProgressList[stage]);
@@ -3570,10 +3687,10 @@ function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet$7.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (h("div", { class: sheet$8.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (h("div", null,
-        h("sl-card", { class: sheet$7.classes.Card },
-          h("div", { class: sheet$7.classes.CardLayout },
+        h("sl-card", { class: sheet$8.classes.Card },
+          h("div", { class: sheet$8.classes.CardLayout },
             h("div", null,
               h("sl-skeleton", { style: {
                   width: "100px",
@@ -3605,12 +3722,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 (h("div", { class: sheet$7.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString$7),
+  return (h("div", { class: sheet$8.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString$8),
     h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -4186,7 +4303,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, copyString: copyString };
 }
 
-const style$8 = {
+const style$9 = {
   Wrapper: {
     ...AuthWrapper,
     "max-width": "600px",
@@ -4224,7 +4341,7 @@ const style$8 = {
   },
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$5 = `
+const vanillaStyle$7 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -4239,8 +4356,8 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$8 = createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$9 = createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
 function LeadFormView(props) {
   var _a, _b, _c, _d;
   const { states, refs, callbacks, content } = props;
@@ -4254,23 +4371,23 @@ function LeadFormView(props) {
     fieldLabel,
   });
   return (h(Fragment, null,
-    states.success && (h("div", { class: sheet$8.classes.Wrapper, part: "sqm-base" },
+    states.success && (h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
       h("style", { type: "text/css" },
-        vanillaStyle$5,
-        styleString$8),
+        vanillaStyle$7,
+        styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
       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$8.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
-    h("div", { class: sheet$8.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
+      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("style", { type: "text/css" },
-        vanillaStyle$5,
-        styleString$8),
+        vanillaStyle$7,
+        styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sl-form", { class: sheet$8.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$8.classes.ErrorAlertContainer, open: true },
+      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: "danger", class: sheet$9.classes.ErrorAlertContainer, open: true },
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           h("b", null, content.submitErrorHeader),
           h("br", null),
@@ -4280,9 +4397,9 @@ function LeadFormView(props) {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
           }))),
-        h("div", { class: sheet$8.classes.NameFieldWrapper },
-          h("sqm-lead-input-field", { class: sheet$8.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
-          h("sqm-lead-input-field", { class: sheet$8.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
+        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("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({
@@ -4294,18 +4411,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,
         }
           : []))),
         h("input", { type: "hidden", hidden: true, name: "/referralCode", value: states.referralCode }),
         content.formData,
-        h("div", { class: sheet$8.classes.ButtonsContainer },
+        h("div", { class: sheet$9.classes.ButtonsContainer },
           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)",
@@ -4321,7 +4438,7 @@ const style$9 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$8 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -4336,8 +4453,8 @@ sl-select::part(menu){
 }
 `;
 jss.setup(create());
-const sheet$9 = jss.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$a = jss.createStyleSheet(style$a);
+const styleString$a = sheet$a.toString();
 function LeadDropdownFieldView(props) {
   var _a, _b, _c, _d, _e;
   const { states, content } = props;
@@ -4348,10 +4465,10 @@ function LeadDropdownFieldView(props) {
   }, {
     dropdownLabel,
   });
-  return (h("div", { class: sheet$9.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$6,
-      styleString$9),
+      vanillaStyle$8,
+      styleString$a),
     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({
@@ -4359,10 +4476,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]) && (h("p", { class: sheet$9.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
       dropdownLabel: content.dropdownLabel,
     })))));
 }
@@ -4401,4 +4518,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { rewardExchange as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, useShareButton as F, useShareLink as G, HeroView as H, InputFieldView as I, ProgressBarView as J, ProgressBar as K, LeaderboardView as L, LeadFormView as M, NameFieldsView as N, LeadDropdownFieldView as O, PortalChangePasswordView as P, ShadowViewAddon as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, useBigStat as U, withShadowView as V, demoRewardExchange as W, ShareButtonView as a, PoweredByImg as b, CheckboxFieldView as c, CouponCodeView as d, ChangeMarktingView as e, PortalFooterView as f, PortalFrameView as g, RewardExchangeView as h, rewardExchangeLongText as i, rewardExchangeSelected as j, chooseAmountFixed as k, chooseAmountFixedNoDescription as l, chooseAmountVariable as m, chooseAmountVariableNoDescription as n, chooseAmountVariableDisabled as o, chooseAmountVariableUnavailable as p, confirmFixed as q, rewardExchangeCustomErrorMsg as r, confirmVariable as s, redemptionError as t, useDemoBigStat as u, queryError as v, success as w, successVariable as x, loading as y, empty as z };
+export { loading as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, empty as F, rewardExchange as G, HeroView as H, InputFieldView as I, useShareButton as J, useShareLink as K, LeaderboardView as L, ProgressBarView as M, NameFieldsView as N, ProgressBar as O, PortalChangePasswordView as P, LeadFormView as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, LeadDropdownFieldView as U, ShadowViewAddon as V, useBigStat as W, withShadowView as X, demoRewardExchange as Y, ShareButtonView as a, PoweredByImg as b, CheckboxFieldView as c, PortalRegisterView as d, CouponCodeView as e, ChangeMarktingView as f, PortalFooterView as g, PortalForgotPasswordView as h, PortalFrameView as i, RewardExchangeView as j, rewardExchangeLongText as k, rewardExchangeSelected as l, chooseAmountFixed as m, chooseAmountFixedNoDescription as n, chooseAmountVariable as o, chooseAmountVariableNoDescription as p, chooseAmountVariableDisabled as q, rewardExchangeCustomErrorMsg as r, chooseAmountVariableUnavailable as s, confirmFixed as t, useDemoBigStat as u, confirmVariable as v, redemptionError as w, queryError as x, success as y, successVariable as z };