@saasquatch/mint-components 2.0.8 → 2.0.9

package/dist/esm/{ShadowViewAddon-78a1c35c.js → ShadowViewAddon-49bebd13.js}

@@ -1,18 +1,18 @@
 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 { i as intl } from './global-5d501632.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 { H, L, J, d as dist, w as wn, j as jn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-234e8f5e.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-c2e809cf.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-75d67509.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 { u as useChildElements } from './useChildElements-daf489b1.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-72c07b09.js';
+import { a as isValidColor, b as isMobile } from './utilities-e6f8716e.js';
 import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-176e92e3.js';
 
 function BigStatView(props) {
@@ -289,6 +289,72 @@ function PoweredByImg({ color = "#A6A6A6", width = 120, height = 16, }) {
     h("path", { d: "M1661.53 157.54H1589.77C1590.42 169.37 1593.54 178.535 1599.13 185.035C1604.85 191.535 1612.65 194.785 1622.53 194.785C1628.51 194.785 1633.97 193.485 1638.91 190.885C1643.98 188.285 1647.95 184.645 1650.81 179.965L1657.24 186.4C1653.34 192.12 1648.4 196.475 1642.42 199.465C1636.57 202.455 1629.94 203.95 1622.53 203.95C1609.01 203.95 1598.35 199.465 1590.55 190.495C1582.88 181.525 1579.05 169.175 1579.05 153.445C1579.05 137.585 1582.82 125.17 1590.36 116.2C1597.9 107.1 1608.23 102.55 1621.36 102.55C1633.84 102.55 1643.66 106.84 1650.81 115.42C1657.96 124 1661.53 135.895 1661.53 151.105V157.54ZM1651.39 147.4C1651.39 136.48 1648.66 127.77 1643.2 121.27C1637.74 114.77 1630.46 111.52 1621.36 111.52C1611.74 111.52 1604.2 114.77 1598.74 121.27C1593.28 127.77 1590.29 137.065 1589.77 149.155H1651.39V147.4Z", fill: color })));
 }
 
+const style$1 = {
+  Wrapper: AuthWrapper,
+  Column: AuthColumn,
+  HostBlock: HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: {
+    ...AuthButtonsContainer,
+    gap: "var(--sl-spacing-medium)",
+    "& > *": {
+      margin: "0 !important",
+    },
+  },
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+function BaseRegistrationFormView(props) {
+  var _a, _b;
+  const { states, content, callbacks } = props;
+  return (h("div", { class: sheet$1.classes.Wrapper },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString$1),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet$1.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
+      content.formData,
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet$1.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
+      h("div", { class: sheet$1.classes.ButtonsContainer },
+        h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
+        h("sl-menu-divider", { style: { margin: "0" } }),
+        content.googleButton,
+        content.secondaryButton))));
+}
+
 const debug = browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
@@ -1400,7 +1466,7 @@ function CardFeedView(props, children) {
     h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
-const style$1 = {
+const style$2 = {
   Description: {
     "& .icon": {
       color: "var(--sqm-text)",
@@ -1445,13 +1511,13 @@ const style$1 = {
     },
   },
 };
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
   return (h("div", { style: { opacity: props.opacity } },
-    h("style", { type: "text/css" }, styleString$1),
-    h("span", { class: sheet$1.classes.Description },
+    h("style", { type: "text/css" }, styleString$2),
+    h("span", { class: sheet$2.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
         h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
@@ -1473,7 +1539,7 @@ const GreyGift = () => {
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
 };
 
-const style$2 = {
+const style$3 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1586,14 +1652,14 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = createStyleSheet(style$2, { classNamePrefix: "sqm-prog-bar" });
-const styleString$2 = sheet$2.toString();
+const sheet$3 = createStyleSheet(style$3, { classNamePrefix: "sqm-prog-bar" });
+const styleString$3 = sheet$3.toString();
 function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, finite = 0, opacity = "1", } = props;
   let aggregate = buildProgressBar(repeatable, steps, props);
   const { columns, items } = aggregate;
-  return (h("div", { class: sheet$2.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    h("style", { type: "text/css" }, styleString$2),
+  return (h("div", { class: sheet$3.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    h("style", { type: "text/css" }, styleString$3),
     h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2145,7 +2211,7 @@ function TaskCardView(props) {
             } }, content.buttonText)))))))));
 }
 
-const style$3 = {
+const style$4 = {
   Wrapper: { ...AuthWrapper, "max-width": "600px" },
   Column: AuthColumn,
   HostBlock: HostBlock,
@@ -2156,7 +2222,7 @@ const style$3 = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle = `
+const vanillaStyle$1 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -2171,20 +2237,20 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+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$3.classes.Wrapper, part: "sqm-base" },
+  return (h("div", { class: sheet$4.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$3),
+      vanillaStyle$1,
+      styleString$4),
     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 },
+    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,
@@ -2197,7 +2263,7 @@ function PortalRegisterView(props) {
             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,
+        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,
       }
@@ -2208,17 +2274,17 @@ function PortalRegisterView(props) {
         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,
+        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$3.classes.ButtonsContainer },
+      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$4 = {
+const style$5 = {
   ErrorStyle: {
     "&::part(control)": {
       borderColor: "var(--sl-color-danger-500)",
@@ -2240,7 +2306,7 @@ const style$4 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2263,16 +2329,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);
@@ -2281,7 +2347,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",
@@ -2289,7 +2355,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) {
@@ -2319,7 +2385,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)",
@@ -2335,7 +2401,7 @@ const style$5 = {
     "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2347,24 +2413,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,
     })))));
@@ -2694,13 +2760,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%;
@@ -2708,21 +2774,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]),
@@ -2731,7 +2797,7 @@ function InputFieldView(props) {
       : [])))));
 }
 
-const style$7 = {
+const style$8 = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2739,7 +2805,7 @@ const style$7 = {
     },
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2776,21 +2842,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",
     }
       : []))),
@@ -2798,7 +2864,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",
     }
       : [])))));
@@ -2848,7 +2914,7 @@ function ChangeMarktingView(props) {
         h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
 
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
   :host {
     margin: 0 auto;
     width: 100%;
@@ -2904,7 +2970,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)),
@@ -2920,7 +2986,7 @@ function PortalFooterView(props) {
       h(PoweredByImg, { color: "currentColor" })))));
 }
 
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 :host {
   display: block;
 }
@@ -2950,7 +3016,7 @@ function PortalForgotPasswordView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$6,
+      vanillaStyle$7,
       styleString),
     h(TextSpanView, { type: "h3" }, content.messageSlot),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
@@ -3016,6 +3082,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;
@@ -3130,7 +3246,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",
@@ -3480,8 +3596,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;
@@ -3504,7 +3620,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,
@@ -3512,7 +3628,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" },
@@ -3531,8 +3647,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)
@@ -3542,7 +3658,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",
@@ -3559,14 +3675,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: {
@@ -3599,7 +3715,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))),
     ];
   }
@@ -3610,7 +3726,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") }),
@@ -3619,7 +3735,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)))));
   }
@@ -3627,8 +3743,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" },
@@ -3643,13 +3759,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),
@@ -3663,7 +3779,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 = {
@@ -3675,7 +3791,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]);
@@ -3687,10 +3803,10 @@ 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("sl-skeleton", { style: {
                   width: "100px",
@@ -3722,12 +3838,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(),
@@ -4303,7 +4419,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, copyString: copyString };
 }
 
-const style$9 = {
+const style$b = {
   Wrapper: {
     ...AuthWrapper,
     "max-width": "600px",
@@ -4341,7 +4457,7 @@ const style$9 = {
   },
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$7 = `
+const vanillaStyle$9 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -4356,8 +4472,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;
@@ -4371,23 +4487,23 @@ 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$7,
-        styleString$9),
+        vanillaStyle$9,
+        styleString$b),
       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$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$7,
-        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: "danger", class: sheet$9.classes.ErrorAlertContainer, open: true },
+      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),
@@ -4397,9 +4513,9 @@ function LeadFormView(props) {
           }, {
             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({
@@ -4411,18 +4527,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)",
@@ -4438,7 +4554,7 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$8 = `
+const vanillaStyle$a = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -4453,8 +4569,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;
@@ -4465,10 +4581,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$8,
-      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({
@@ -4476,10 +4592,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,
     })))));
 }
@@ -4518,4 +4634,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-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 };
+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 };