@saasquatch/mint-components 1.12.1-7 → 1.12.1-8

package/dist/esm/{ShadowViewAddon-f91cd444.js → ShadowViewAddon-0d8b1430.js}

@@ -1,18 +1,18 @@
-import { h, c as Host, d as getAssetPath, g as getElement } from './index-60f16d0a.js';
-import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-e20edc0b.js';
-import { i as intl } from './global-3611a2b7.js';
-import { d as dist, z as z$1, K, D as Dn, E as En, x as xe, n as ne, g as getEnvironmentSDK, Q } from './index.module-f3d96fbb.js';
+import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
+import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-ac12ca1c.js';
+import { i as intl } from './global-62554cef.js';
+import { d as dist, H, Q, y as yn, e as $e, B, a as getEnvironmentSDK, L } from './index.module-48f73e70.js';
 import { c as cjs } from './cjs-bdfb4486.js';
+import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
+import { j as jss, a as create } from './jss-preset-default.esm-f910d30d.js';
+import { c as createStyleSheet } from './JSS-1c144d47.js';
+import { u as useChildElements } from './useChildElements-a6b895dd.js';
+import { l as luxon } from './luxon-7600be8d.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, C as CopyTextView } from './copy-text-view-61eebf5d.js';
-import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { u as useChildElements } from './useChildElements-d1d3fedd.js';
-import { l as luxon } from './luxon-9b1f9912.js';
-import { T as TextSpanView } from './sqm-text-span-view-d1b54710.js';
+import { T as TextSpanView } from './sqm-text-span-view-02ce93d8.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-33996ce7.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-c3be4b88.js';
+import { a as isValidColor, b as isMobile } from './utilities-e8022681.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-05f4bbe1.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -217,6 +217,80 @@ function LeaderboardView(props) {
         h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }
 
+const style$2 = {
+  HostBlock: HostBlock,
+  inputStyle: {
+    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
+    "&::part(base)": { cursor: "pointer", overflow: "visible" },
+    width: "100%",
+  },
+  inputErrorStyle: {
+    "&::part(base)": {
+      border: "2px solid red",
+    },
+  },
+  containerStyle: {
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
+  },
+  errorTextStyle: {
+    margin: "0",
+    color: "var(--sl-color-danger-500)",
+  },
+};
+const vanillaStyle$1 = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+const textAlignStyle = {
+  right: `
+sl-input::part(input){
+  text-align: right;
+}`,
+  center: `  
+sl-input::part(input){
+  text-align: center;
+}`,
+  left: ``,
+};
+const disabledStyles = `
+  sl-input::part(input){
+    cursor: default;
+  }
+`;
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+function CopyTextView(props) {
+  const { buttonStyle = "icon" } = props;
+  const error = !props.loading && props.error;
+  const inputText = error ? props.inputPlaceholderText : props.copyString;
+  const disabled = error || props.loading || props.disabled;
+  const tooltipPlacement = props.buttonStyle === "button-below"
+    ? "bottom"
+    : props.buttonStyle === "button-outside"
+      ? "top"
+      : "top-end";
+  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString$2,
+      vanillaStyle$1,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    h("div", { class: sheet$2.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      h("sl-input", { class: `${sheet$2.classes.inputStyle} ${error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "base: input-base, input: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
+        buttonStyle === "icon" && copyButton,
+        error && (h("p", { slot: "help-text", class: sheet$2.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton)));
+}
+
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment } = props;
   // Dependent on props, not feasiable to move out
@@ -252,7 +326,7 @@ function BigStatView(props) {
     h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
 }
 
-const style$2 = {
+const style$3 = {
   HostBlock: HostBlock,
   Frame: {
     display: "flex",
@@ -286,17 +360,17 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$3 = createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
   const { data, notFullScreen } = props;
-  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$2.classes.Frame, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString$2),
-    h("div", { class: sheet$2.classes.HeaderWrapper, part: "sqm-header" },
+  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString$3),
+    h("div", { class: sheet$3.classes.HeaderWrapper, part: "sqm-header" },
       data.header,
       h("slot", { name: "sqm-navigation-menu" })),
     children,
-    h("div", { class: sheet$2.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
+    h("div", { class: sheet$3.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -373,22 +447,16 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = z$1() } = props;
-  const user = K();
-  const engagementMedium = ne();
-  const contextData = Dn(REFERRAL_CODES_NAMESPACE);
-  const { data } = En(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-  const [sendLoadEvent] = xe(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = xe(SET_CODE_COPIED);
-  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
+  const { programId = H() } = props;
+  const user = Q();
+  const engagementMedium = B();
+  const { data } = yn(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = useState(false);
-  async function onClick() {
-    if (contextData) {
-      await setCopied({ referralCode: contextData.referralCode });
-      contextData.refresh();
-    }
+  function onClick() {
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
     navigator.clipboard.writeText(copyString);
@@ -447,70 +515,60 @@ function NativeShare(props, directLink, undefinedErrorText, unsupportedPlatformT
     alert(unsupportedPlatformText);
   }
 }
-function FacebookShare(directLink, messageLink, errorText) {
-  if (messageLink === "undefined" || directLink === "undefined") {
+function FacebookShare(directLink, res, errorText) {
+  var _a, _b;
+  if (((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) === "undefined" ||
+    directLink === "undefined") {
     return alert(errorText);
   }
   if (typeof SquatchAndroid.shareOnFacebook !== "undefined") {
-    return SquatchAndroid.shareOnFacebook(directLink, messageLink);
+    return SquatchAndroid.shareOnFacebook(directLink, res.data.viewer.messageLink);
   }
   else {
-    return GenericShare(messageLink, errorText);
+    return GenericShare(res, errorText);
   }
 }
-function GenericShare(messageLink, errorText) {
-  return messageLink ? window.open(messageLink) : alert(errorText);
+function GenericShare(res, errorText) {
+  var _a, _b;
+  return ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) ? window.open(res.data.viewer.messageLink)
+    : alert(errorText);
 }
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : z$1();
-  const user = K();
-  const engagementMedium = ne();
+  const programId = props.programId ? props.programId : H();
+  const user = Q();
   const variables = {
-    engagementMedium,
+    engagementMedium: B(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const contextData = Dn(REFERRAL_CODES_NAMESPACE);
-  const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
   // only queries if a programId is available
-  const res = En(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setCopied, copiedRes] = xe(SET_CODE_COPIED);
-  const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink);
+  const res = yn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
   const environment = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
-  async function onClick() {
-    var _a, _b, _c, _d;
-    if (overrideData) {
-      await setCopied({ referralCode: contextData.referralCode });
-      contextData.refresh();
-    }
+  function onClick() {
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {
-      FacebookShare(directLink, (overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink), props.errorText);
+      FacebookShare(directLink, res, props.errorText);
     }
     else if (medium.toLocaleUpperCase() === "DIRECT") {
       NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
     }
     else {
-      GenericShare((overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.messageLink), props.errorText);
+      GenericShare(res, props.errorText);
     }
   }
-  return {
-    ...props,
-    loading: res.loading && !(overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink),
-    onClick,
-    hide,
-  };
+  return { ...props, loading: res.loading, onClick, hide };
 }
 
 const debug = browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = En(query, variables);
+  const res = yn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -921,7 +979,7 @@ const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") =>
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = En(query, {
+      const result = yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -980,7 +1038,7 @@ const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") =
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = En(query, {
+      const result = yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -1376,11 +1434,11 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, programId = z$1(), } = props;
+  const { statType, flexReverse, alignment, programId = H(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements();
-  const locale = Q();
-  const userIdent = K();
+  const locale = L();
+  const userIdent = Q();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -1577,7 +1635,7 @@ function PortalChangePasswordView(props) {
       h("style", { type: "text/css" }, styleString))));
 }
 
-const style$3 = {
+const style$4 = {
   Wrapper: AuthWrapper,
   Column: AuthColumn,
   ForgotButtonContainer: {
@@ -1588,15 +1646,9 @@ const style$3 = {
     color: "#AAAAAA",
     margin: "0",
   },
-  ButtonsContainer: {
-    ...AuthButtonsContainer,
-    gap: "var(--sl-spacing-medium)",
-    "& > *": {
-      margin: "0 !important",
-    },
-  },
+  ButtonsContainer: AuthButtonsContainer,
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   display: block;
 }
@@ -1604,30 +1656,28 @@ const vanillaStyle$1 = `
   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 PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  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$1,
-      styleString$3),
+      vanillaStyle$2,
+      styleString$4),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit },
+    h("sl-form", { class: sheet$4.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$3.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
-      h("div", { class: sheet$3.classes.ButtonsContainer },
+        h("div", { class: sheet$4.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      h("div", { class: sheet$4.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))));
 }
 
-const style$4 = {
+const style$5 = {
   Wrapper: { ...AuthWrapper, "max-width": "600px" },
   Column: AuthColumn,
   HostBlock: HostBlock,
@@ -1638,7 +1688,7 @@ const style$4 = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -1653,20 +1703,20 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 function PortalRegisterView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (h("div", { class: sheet$4.classes.Wrapper, part: "sqm-base" },
+  return (h("div", { class: sheet$5.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$2,
-      styleString$4),
+      vanillaStyle$3,
+      styleString$5),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    h("sl-form", { class: sheet$5.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,
@@ -1679,28 +1729,25 @@ 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$4.classes.ErrorStyle,
+        class: sheet$5.classes.ErrorStyle,
         helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           content.requiredFieldErrorMessage,
       }
         : [])))),
       !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
-        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
-      }
-        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
-        class: sheet$4.classes.ErrorStyle,
-        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
+      !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, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+        class: sheet$5.classes.ErrorStyle,
+        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
       content.terms,
-      h("div", { class: sheet$4.classes.ButtonsContainer },
+      h("div", { class: sheet$5.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }
 
-const style$5 = {
+const style$6 = {
   Description: {
     "& input[type=checkbox]": {
       display: "none",
@@ -1739,13 +1786,13 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$6 = createStyleSheet(style$6);
+const styleString$6 = sheet$6.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$5),
-    h("span", { class: sheet$5.classes.Description },
+    h("style", { type: "text/css" }, styleString$6),
+    h("span", { class: sheet$6.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
         h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
@@ -1767,7 +1814,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$6 = {
+const style$7 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1879,14 +1926,14 @@ const style$6 = {
     },
   },
 };
-const sheet$6 = createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
-const styleString$6 = sheet$6.toString();
+const sheet$7 = createStyleSheet(style$7, { classNamePrefix: "sqm-prog-bar" });
+const styleString$7 = sheet$7.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$6.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    h("style", { type: "text/css" }, styleString$6),
+  return (h("div", { class: sheet$7.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    h("style", { type: "text/css" }, styleString$7),
     h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2177,7 +2224,7 @@ const arrow_left_right = () => {
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
 };
 
-const style$7 = {
+const style$8 = {
   TaskCard: {
     display: "inline-block",
     width: "100%",
@@ -2331,8 +2378,8 @@ const style$7 = {
     },
   },
 };
-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 TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
@@ -2368,11 +2415,11 @@ function TaskCardView(props) {
 	}
 
   `;
-  return (h("div", { class: sheet$7.classes.TaskCard, part: "sqm-base" },
+  return (h("div", { class: sheet$8.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      styleString$7,
+      styleString$8,
       vanillaStyle),
-    !states.loading && taskNotStarted && (h("div", { class: sheet$7.classes.NotStarted },
+    !states.loading && taskNotStarted && (h("div", { class: sheet$8.classes.NotStarted },
       h("span", { class: "icon" },
         h("sl-icon", { name: "info-circle-fill" })),
       intl.formatMessage({
@@ -2383,7 +2430,7 @@ function TaskCardView(props) {
           .setLocale(luxonLocale(states.locale))
           .toLocaleString(luxon.DateTime.DATETIME_MED),
       }))),
-    !states.loading && taskEnded && (h("div", { class: sheet$7.classes.Ended },
+    !states.loading && taskEnded && (h("div", { class: sheet$8.classes.Ended },
       h("span", { class: "icon" },
         h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       intl.formatMessage({
@@ -2403,7 +2450,7 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet$7.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet$8.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
@@ -2419,7 +2466,7 @@ function TaskCardView(props) {
           } }, content.cardTitle)),
         states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
         content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet$7.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        h("div", { class: sheet$8.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
@@ -2490,7 +2537,7 @@ 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 vanillaStyle$3 = `
+const vanillaStyle$4 = `
   :host{
     margin: 0 auto;
     width: 100%;
@@ -2546,7 +2593,7 @@ function PortalFooterView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$3,
+      vanillaStyle$4,
       styleString),
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2718,76 +2765,55 @@ function ReferralIframeView(props) {
     h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }
 
-const style$8 = {
-  ErrorStyle: {
-    "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
-      borderColor: "var(--sl-color-danger-500)",
-      outline: "var(--sl-color-danger-500)",
-    },
-    "&:host": {
-      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+const style$9 = {
+  ErrorStyle: ErrorStyles,
+  FieldsContainer: {
+    "& sl-input": {
+      "margin-bottom": "var(--sl-spacing-large)",
     },
   },
-  ErrorMessageStyle: {
-    margin: 0,
-    marginTop: "5px",
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-    fontFamily: "var(--sl-font-sans)",
-    fontWeight: "var(--sl-font-weight-normal)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
   display: block;
 }
-sl-checkbox::part(label){
+
+sl-input::part(label){
   font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
+  font-weight: var(--sl-font-weight-semibold);
 }
 `;
-jss.setup(create());
-const sheet$8 = jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
-function CheckboxFieldView(props) {
-  var _a, _b, _c;
-  const { states, content, callbacks } = props;
+const sheet$9 = createStyleSheet(style$9);
+const styleString$9 = sheet$9.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$8.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$9.classes.FieldsContainer },
     h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$8),
-    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);
-      } }, (!content.checkboxOptional ? { 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) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
-      ? {
-        class: sheet$8.classes.ErrorStyle,
-      }
-      : [])),
-      intl.formatMessage({
-        id: content.checkboxName + "-message",
-        defaultMessage: content.checkboxLabel,
-      }, {
-        labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-      }),
-      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$8.classes.ErrorMessageStyle }, intl.formatMessage({
-        id: `errorMessage-${content.checkboxName}`,
-        defaultMessage: content.errorMessage,
-      }))))));
+      vanillaStyle$5,
+      styleString$9),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, 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.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$9.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
+    }
+      : []))),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+      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$9.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
+    }
+      : [])))));
 }
 
-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)",
@@ -2803,7 +2829,7 @@ const style$9 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2815,36 +2841,36 @@ sl-select::part(label){
 }
 `;
 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 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$9.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$5,
-      styleString$9),
+      vanillaStyle$6,
+      styleString$a),
     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$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 }, intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle }, intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
 }
 
-const style$a = {
+const style$b = {
   ErrorStyle: ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2852,21 +2878,21 @@ const vanillaStyle$6 = `
 }
 `;
 jss.setup(create());
-const sheet$a = jss.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
+const sheet$b = jss.createStyleSheet(style$b);
+const styleString$b = sheet$b.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$a.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$b.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$6,
-      styleString$a),
+      vanillaStyle$7,
+      styleString$b),
     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$a.classes.ErrorStyle,
+      class: sheet$b.classes.ErrorStyle,
       helpText: intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2961,7 +2987,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$b = {
+const style$c = {
   HostBlock: HostBlock,
   Container: {
     minWidth: "300px",
@@ -3312,8 +3338,8 @@ const style$b = {
   },
 };
 // JSS config
-const sheet$b = createStyleSheet(style$b);
-const styleString$b = sheet$b.toString();
+const sheet$c = createStyleSheet(style$c);
+const styleString$c = sheet$c.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3336,7 +3362,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$b.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$c.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,
@@ -3344,7 +3370,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$b.classes.SelectItem },
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$c.classes.SelectItem },
         step.prettyDestinationValue,
         h("br", null),
         h("div", { class: "step-cost", slot: "suffix" },
@@ -3363,8 +3389,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       h("div", { part: "choose-reward-container" },
-        h("div", { class: sheet$b.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$b.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        h("div", { class: sheet$c.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$c.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)
@@ -3373,7 +3399,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$b.classes.Card, style: {
+            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$c.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3390,14 +3416,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                h("div", { class: sheet$b.classes.Image, style: {
+                h("div", { class: sheet$c.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$b.classes.TextArea, style: {
+                h("div", { class: sheet$c.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("div", { class: "title", style: {
@@ -3430,7 +3456,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        h("div", { class: sheet$b.classes.Button },
+        h("div", { class: sheet$c.classes.Button },
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -3441,7 +3467,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (h("div", null,
-      h("div", { class: sheet$b.classes.ChooseAmount, part: "choose-amount-container" },
+      h("div", { class: sheet$c.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") }),
@@ -3450,7 +3476,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$b.classes.Button },
+        h("div", { class: sheet$c.classes.Button },
           h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -3458,8 +3484,8 @@ function RewardExchangeView(props) {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (h("div", null,
-      h("div", { class: sheet$b.classes.Confirmation, part: "confirmation-container" },
-        h("div", { class: sheet$b.classes.Title }, states.content.text.redeemTitle),
+      h("div", { class: sheet$c.classes.Confirmation, part: "confirmation-container" },
+        h("div", { class: sheet$c.classes.Title }, states.content.text.redeemTitle),
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
@@ -3474,13 +3500,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$b.classes.Button },
+        h("div", { class: sheet$c.classes.Button },
           h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
           h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f;
-    return (h("div", { class: sheet$b.classes.Success, part: "success-container" },
+    return (h("div", { class: sheet$c.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),
@@ -3495,7 +3521,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: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
-      h("div", { class: sheet$b.classes.Button },
+      h("div", { class: sheet$c.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3507,7 +3533,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet$b.classes.ProgressBar },
+    return (h("div", { class: sheet$c.classes.ProgressBar },
       h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return h("span", { class: "text" }, stageProgressList[stage]);
@@ -3519,10 +3545,10 @@ function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet$b.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (h("div", { class: sheet$c.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (h("div", null,
-        h("sl-card", { class: sheet$b.classes.Card },
-          h("div", { class: sheet$b.classes.CardLayout },
+        h("sl-card", { class: sheet$c.classes.Card },
+          h("div", { class: sheet$c.classes.CardLayout },
             h("div", null,
               h("sl-skeleton", { style: {
                   width: "100px",
@@ -3554,12 +3580,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$b.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$c.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (h("div", { class: sheet$b.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString$b),
+  return (h("div", { class: sheet$c.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString$c),
     h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -3975,7 +4001,7 @@ function CardFeedView(props, children) {
     h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
-const style$c = {
+const style$d = {
   HostBlock: HostBlock,
   couponCodeLabel: {
     margin: "var(--sl-spacing-x-small) 0",
@@ -3983,21 +4009,21 @@ const style$c = {
     fontSize: "var(--sl-font-size-small)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$8 = `
   :host{
     display: block;   
     width: 100%;
   }
 `;
-const sheet$c = createStyleSheet(style$c);
-const styleString$c = sheet$c.toString();
+const sheet$d = createStyleSheet(style$d);
+const styleString$d = sheet$d.toString();
 function CouponCodeView(props) {
   const error = !props.loading && props.error;
   return (h("div", null,
     h("style", { type: "text/css" },
-      styleString$c,
-      vanillaStyle$7),
-    h("p", { class: sheet$c.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+      styleString$d,
+      vanillaStyle$8),
+    h("p", { class: sheet$d.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
     error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
 }
@@ -4087,4 +4113,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { loading as A, BigStatView as B, CheckboxFieldView as C, DropdownFieldView as D, EditProfileView as E, empty as F, rewardExchange as G, HeroView as H, InputFieldView as I, CardFeedView as J, CouponCodeView as K, LeaderboardView as L, ProgressBar as M, autoColorScaleCss as N, ShadowViewAddon as O, PortalFrameView as P, useBigStat as Q, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, withShadowView as U, demoRewardExchange as V, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalLoginView as e, PortalRegisterView as f, ProgressBarView as g, PoweredByImg as h, PortalFooterView 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, useShareLink as u, confirmVariable as v, redemptionError as w, queryError as x, success as y, successVariable as z };
+export { loading as A, BigStatView as B, CopyTextView as C, DropdownFieldView as D, EditProfileView as E, empty as F, rewardExchange as G, HeroView as H, InputFieldView as I, CardFeedView as J, CouponCodeView as K, LeaderboardView as L, ProgressBar as M, NameFieldsView as N, autoColorScaleCss as O, PortalFrameView as P, ShadowViewAddon as Q, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, useBigStat as U, withShadowView as V, demoRewardExchange as W, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalLoginView as e, PortalRegisterView as f, ProgressBarView as g, PoweredByImg as h, PortalFooterView 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, useShareLink as u, confirmVariable as v, redemptionError as w, queryError as x, success as y, successVariable as z };