@saasquatch/mint-components 1.8.5-24 → 1.8.5-25

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email.js

@@ -228,7 +228,7 @@ export class PortalVerifyEmail {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalVerifyEmailViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -1,23 +1,32 @@
-import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
+import { navigation, setUserIdentity, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { sanitizeUrlPath } from "../../utils/utils";
 const SUBMITTED_CONTEXT = "sq:verify-submitted";
-function setSubmitted(submitted) {
+function setWindowSubmitted(submitted) {
   // using window due to dom-context getting reset on re-render
   window[SUBMITTED_CONTEXT] = submitted;
 }
 export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const submitted = window[SUBMITTED_CONTEXT];
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const [submitted, setSubmitted] = useState(window[SUBMITTED_CONTEXT]);
   const userIdent = useUserIdentity();
+  const [verificationError, setVerificationError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
   const [request, { loading, data, errors }] = useVerifyEmailMutation();
   const urlParams = new URLSearchParams(navigation.location.search);
   const oobCode = urlParams.get("oobCode");
+  const oobEmail = urlParams.get("email");
   const nextPageOverride = urlParams.get("nextPage");
+  const syncSubmitted = (submitted) => {
+    setSubmitted(submitted);
+    setWindowSubmitted(submitted);
+  };
   // derived from useMutation in component boilerplate initialState
   const disableContinue = data === undefined && errors === undefined && !!oobCode;
   // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
-  const verified = !!(((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
+  const hasContext = localStorage.getItem("sq:user-identity");
+  const verified = !!((_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified);
   const failed = () => {
     return navigation.push({
       pathname: failedPage,
@@ -29,40 +38,90 @@ export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText,
     const url = sanitizeUrlPath(nextPageOverride || nextPage);
     navigation.push(url.href);
   };
-  const submit = async () => {
-    var _a;
-    setSubmitted(true);
-    if (oobCode) {
-      const result = await request({ oobCode });
-      if ((result instanceof Error ||
-        !result.verifyManagedIdentityEmail.success) &&
-        !((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified)) {
-        // pause on error if logged out/unverified
+  console.log({
+    hasContext,
+    userIdent,
+    data,
+    submitted,
+    verified,
+    verificationError,
+    success,
+  });
+  useEffect(() => {
+    const check = async () => {
+      var _a;
+      const response = await request({ oobCode });
+      if (response instanceof Error ||
+        !((_a = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success)) {
+        console.debug("set verification error");
+        setVerificationError({ message: true });
         return;
       }
-      setTimeout(() => {
-        gotoNextPage();
-        setSubmitted(false);
-      }, 3000);
-    }
-  };
+      else {
+        console.debug("set success: true");
+        setSuccess(true);
+      }
+      console.debug("SUBMITTED", response);
+      console.debug("window", window[SUBMITTED_CONTEXT]);
+      syncSubmitted(true);
+    };
+    if (!submitted)
+      check();
+  }, [submitted]);
   useEffect(() => {
-    // Already verified, begin redirect
-    if (verified) {
+    var _a;
+    if (!submitted)
+      return;
+    if (!verificationError &&
+      ((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email) === oobEmail &&
+      (success || verified)) {
+      console.log("LOGGING IN", success, verified, verificationError);
+      setTimeout(gotoNextPage, 3000);
+    }
+    else {
+      console.log("LOGGING OUT", success, verified, verificationError);
       setTimeout(() => {
+        setUserIdentity(undefined);
         gotoNextPage();
-        setSubmitted(false);
       }, 3000);
-      return;
     }
-    if (userIdent && !data && !submitted)
-      submit();
-  }, [verified, submitted, data, userIdent, submitted]);
+  }, [verified, verificationError, success, submitted, userIdent]);
+  useEffect(() => {
+    if (errors)
+      setVerificationError(errors);
+  }, [errors, setVerificationError]);
+  // useEffect(() => {
+  //   if (!data && !submitted && oobCode) {
+  //     submit();
+  //     return;
+  //   }
+  //   // verification successful but user in context is not verified
+  //   // or mismatch between logged in user and user associated with oobCode
+  //   if (submitted) {
+  //     console.debug("in submit condition");
+  //     if (email && email !== oobEmail) {
+  //       console.debug("email mismatch");
+  //       logout();
+  //       return;
+  //       // Already verified, begin redirect
+  //     }
+  //     if (verified) {
+  //       if (!verificationError) setSuccess(true);
+  //       console.debug("verified");
+  //       setTimeout(() => {
+  //         gotoNextPage();
+  //         setSubmitted(false);
+  //       }, 3000);
+  //       return;
+  //     }
+  //   }
+  // }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
   return {
     states: {
       loading: loading || disableContinue,
-      error: ((_e = (_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extensions) === null || _e === void 0 ? void 0 : _e.message) || ((_h = (_g = (_f = errors === null || errors === void 0 ? void 0 : errors.response) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.message) ||
-        ((errors === null || errors === void 0 ? void 0 : errors.message) && networkErrorMessage),
+      success,
+      error: ((_f = (_e = (_d = (_c = verificationError === null || verificationError === void 0 ? void 0 : verificationError.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = verificationError === null || verificationError === void 0 ? void 0 : verificationError.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) ||
+        ((verificationError === null || verificationError === void 0 ? void 0 : verificationError.message) && networkErrorMessage),
       verified,
     },
     data: {

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -417,7 +417,7 @@ export function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet.classes.Card, style: {
+            h("sl-card", { class: sheet.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -475,7 +475,7 @@ export function RewardExchangeView(props) {
                     }))))))));
         }))),
         h("div", { class: sheet.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))),
+          h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
   function chooseAmount() {
@@ -495,8 +495,8 @@ export function RewardExchangeView(props) {
             ((_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.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)))));
+          h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.js

@@ -234,7 +234,7 @@ export const BankingInfoFormView = (props) => {
         h("p", { class: classes.DescriptionText }, text.paymentMethodSubtext))),
     h("div", null,
       h("div", { class: classes.CheckboxContainer }, states.loading && formState.paymentMethodChecked === undefined ? (getLoadingSkeleton(undefined)) : (h("div", { class: classes.RadioContainer },
-        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentMethodChecked === "toBankAccount", onInput: () => callbacks.setPaymentMethodChecked("toBankAccount"), disabled: states.disabled, id: "toBankAccount", name: "/toBankAccount" }, text.directlyToBankAccount)),
+        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label", checked: formState.paymentMethodChecked === "toBankAccount", onInput: () => callbacks.setPaymentMethodChecked("toBankAccount"), disabled: states.disabled, id: "toBankAccount", name: "/toBankAccount" }, text.directlyToBankAccount)),
         formState.paymentMethodChecked === "toBankAccount" && (h("div", { class: classes.InputContainer, style: states.hideBanking ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toBankAccount", slots.formInputsSlot.length + 3)
           : [
@@ -242,7 +242,7 @@ export const BankingInfoFormView = (props) => {
             slots.paymentMethodSlot,
             slots.formInputsSlot,
           ])),
-        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentMethodChecked === "toPayPalAccount", onInput: () => callbacks.setPaymentMethodChecked("toPayPalAccount"), disabled: states.disabled, id: "toPayPalAccount", name: "/toPayPalAccount" }, intl.formatMessage({
+        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label", checked: formState.paymentMethodChecked === "toPayPalAccount", onInput: () => callbacks.setPaymentMethodChecked("toPayPalAccount"), disabled: states.disabled, id: "toPayPalAccount", name: "/toPayPalAccount" }, intl.formatMessage({
           id: "paypal-input-label",
           defaultMessage: text.toPayPalAccount,
         }, { feeCap: states.feeCap }))),
@@ -251,11 +251,11 @@ export const BankingInfoFormView = (props) => {
           : slots.paypalInputSlot)),
         h("div", { style: { paddingTop: "24px", paddingBottom: "12px" } },
           h("h4", null, text.paymentSchedule)),
-        h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentScheduleChecked === "BALANCE_THRESHOLD", onInput: () => callbacks.setPaymentScheduleChecked("BALANCE_THRESHOLD"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "BALANCE_THRESHOLD" }, text.paymentScheduleBalanceThreshold),
+        h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label", checked: formState.paymentScheduleChecked === "BALANCE_THRESHOLD", onInput: () => callbacks.setPaymentScheduleChecked("BALANCE_THRESHOLD"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "BALANCE_THRESHOLD" }, text.paymentScheduleBalanceThreshold),
         formState.paymentScheduleChecked === "BALANCE_THRESHOLD" && (h("div", { class: classes.InputContainer, style: states.hideBalanceThreshold ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentThresholdSelectSlot)),
-        h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentScheduleChecked === "FIXED_DAY", onInput: () => callbacks.setPaymentScheduleChecked("FIXED_DAY"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "FIXED_DAY" }, text.paymentScheduleFixedDay),
+        h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label", checked: formState.paymentScheduleChecked === "FIXED_DAY", onInput: () => callbacks.setPaymentScheduleChecked("FIXED_DAY"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "FIXED_DAY" }, text.paymentScheduleFixedDay),
         formState.paymentScheduleChecked === "FIXED_DAY" && (h("div", { class: classes.InputContainer, style: states.hideFixedDay ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentFixedDaySelectSlot))))),

package/dist/collection/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.js

@@ -78,7 +78,7 @@ export const OtherRegionSlotView = (props) => {
   };
   const IndirectTaxNumberInput = ({ label, error, name, }) => {
     var _a;
-    return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: label, disabled: states.loading || states.disabled, value: formState[name] }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a[name]) && {
+    return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, label: label, disabled: states.loading || states.disabled, value: formState[name] }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a[name]) && {
       class: classes.ErrorInput,
       helpText: error,
     }), { id: name, name: `/${name}` })));
@@ -86,13 +86,13 @@ export const OtherRegionSlotView = (props) => {
   const SpainFields = () => {
     var _a, _b;
     return (h("div", { class: classes.ConditionalInputsContainer },
-      h("sl-select", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.subRegion, label: text.subRegion, disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
+      h("sl-select", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, value: formState.subRegion, label: text.subRegion, disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
         class: classes.ErrorInput,
         helpText: formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
       }), { id: "subRegion", name: "/subRegion" }), props.data.esRegions.map((r) => (h("sl-menu-item", { value: r.regionCode }, r.displayName)))),
       h(IndirectTaxNumberInput, { name: "indirectTaxNumber", label: getTaxFieldLabel("VAT"), error: getTaxFieldError("VAT") }),
-      h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
-      formState.hasSubRegionTaxNumber && (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.subRegionTaxNumberLabel, disabled: states.loading || states.disabled, value: formState.subRegionTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.subRegionTaxNumber) && {
+      h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
+      formState.hasSubRegionTaxNumber && (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, label: text.subRegionTaxNumberLabel, disabled: states.loading || states.disabled, value: formState.subRegionTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.subRegionTaxNumber) && {
         class: classes.ErrorInput,
         helpText: formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
       }), { id: "subRegionTaxNumber", name: "/subRegionTaxNumber" })))));
@@ -102,14 +102,14 @@ export const OtherRegionSlotView = (props) => {
     const { classes } = sheet;
     const currentTaxType = (_a = INDIRECT_TAX_PROVINCES === null || INDIRECT_TAX_PROVINCES === void 0 ? void 0 : INDIRECT_TAX_PROVINCES.find((p) => p.regionCode === formState.province)) === null || _a === void 0 ? void 0 : _a.taxType;
     return (h("div", { class: classes.ConditionalInputsContainer },
-      h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.province, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("province", e) }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.province) && {
+      h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label", class: classes.Input, label: text.province, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("province", e) }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.province) && {
         class: classes.ErrorInput,
         helpText: formatErrorMessage(text.province, text.error.fieldRequiredError),
       }), { id: "province", name: "/province" }), props.data.provinces.map((p) => (h("sl-menu-item", { value: p.regionCode }, p.displayName)))),
       currentTaxType === "GST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("GST"), error: getTaxFieldError("GST"), name: "indirectTaxNumber" })),
       currentTaxType === "HST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("HST"), error: getTaxFieldError("HST"), name: "indirectTaxNumber" })),
       formState.province === "QUEBEC" && (h("div", { class: classes.ConditionalInputsContainer },
-        h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
+        h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
         formState.hasQst && (h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
   };
   const getActiveForm = (selectedRegion) => {
@@ -120,7 +120,7 @@ export const OtherRegionSlotView = (props) => {
       case "ES":
         return h(SpainFields, null);
       default:
-        return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.indirectTaxNumber, label: getTaxFieldLabel(vatLabels[selectedRegion] || "GENERAL"), disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
+        return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, value: formState.indirectTaxNumber, label: getTaxFieldLabel(vatLabels[selectedRegion] || "GENERAL"), disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
           class: classes.ErrorInput,
           helpText: getTaxFieldError(vatLabels[selectedRegion] || "GENERAL"),
         }), { id: "indirectTaxNumber", name: "/indirectTaxNumber" })));
@@ -134,7 +134,7 @@ export const OtherRegionSlotView = (props) => {
         vanillaStyle),
       h("hr", { class: classes.HR }),
       h("div", { class: classes.InputContainer },
-        h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.selectedRegion, exportparts: "label: input-label, base: input-base", label: text.selectedRegion, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("selectedRegion", e) }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
+        h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.selectedRegion, exportparts: "label: input-label", label: text.selectedRegion, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("selectedRegion", e) }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
           class: classes.ErrorInput,
           helpText: formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
         }), { id: "selectedRegion", name: "/selectedRegion" }),

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -167,18 +167,18 @@ export const UserInfoFormView = (props) => {
         text.isPartnerAlertDescription)),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled || states.isUser || states.isPartner }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+          h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.lastName, label: text.lastName, disabled: states.disabled || states.isUser || states.isPartner }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
-          h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
-          h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || states.isPartner }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+          h("sl-input", { exportparts: "label: input-label", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
+          h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || states.isPartner }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.country, formState.errors.countryCode),
           }
@@ -192,7 +192,7 @@ export const UserInfoFormView = (props) => {
             _e.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_f = data === null || data === void 0 ? void 0 : data.allCountries) === null || _f === void 0 ? void 0 :
             _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
           h("div", { style: { display: "flex", gap: "4px" } },
-            h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", label: text.phoneNumber, style: { minWidth: "140px" }, value: formState.phoneNumberCountryCode, disabled: states.disabled || states.isPartner, ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+            h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label", name: "/phoneNumberCountryCode", label: text.phoneNumber, style: { minWidth: "140px" }, value: formState.phoneNumberCountryCode, disabled: states.disabled || states.isPartner, ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
               class: classes.ErrorInput,
             }
               : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
@@ -214,7 +214,7 @@ export const UserInfoFormView = (props) => {
                   h("div", { slot: "prefix", style: { marginRight: "8px" } }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
                   _b.dial_code));
               })),
-            h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: " ", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, style: { marginTop: "2px", width: "362px" }, validationError: ({ value }) => 
+            h("sl-input", Object.assign({ exportparts: "label: input-label", label: " ", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, style: { marginTop: "2px", width: "362px" }, validationError: ({ value }) => 
               // Naive phone number validation
               validateBillingField(/[a-zA-Z]+/, value) &&
                 formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
@@ -222,7 +222,7 @@ export const UserInfoFormView = (props) => {
               helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
             }
               : {}), { required: true }))),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
+          h("sl-input", Object.assign({ exportparts: "label: input-label", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
               formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
@@ -230,7 +230,7 @@ export const UserInfoFormView = (props) => {
             helpText: formatErrorMessage(text.address, formState.errors.address),
           }
             : {}), { required: true })),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
+          h("sl-input", Object.assign({ exportparts: "label: input-label", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
               formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
@@ -238,17 +238,17 @@ export const UserInfoFormView = (props) => {
             helpText: formatErrorMessage(text.city, formState.errors.city),
           }
             : {}), { required: true })),
-          !states.hideState && (h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || states.isPartner }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
+          !states.hideState && (h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label", id: "state", name: "/state", value: formState.state, disabled: states.disabled || states.isPartner }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.state, formState.errors.state),
           }
             : {}), { required: true }), (_p = data.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (h("sl-menu-item", { value: r.value }, r.label))))),
-          h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || states.isPartner }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
+          h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || states.isPartner }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || states.isPartner, helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
+          h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || states.isPartner, helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.currency, formState.errors.currency),
           }
@@ -268,7 +268,7 @@ export const UserInfoFormView = (props) => {
               " - ",
               c.displayName)))),
           h("div", { class: classes.CheckboxWrapper },
-            h("sl-checkbox", { exportparts: "label: input-label, base: input-base", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+            h("sl-checkbox", { exportparts: "label: input-label", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
                 e.target.value = e.target.checked;
               }, disabled: states.isPartner ? false : states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
             ((_u = formState.errors) === null || _u === void 0 ? void 0 : _u.allowBankingCollection) && (h("p", { class: classes.ErrorText }, formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),

package/dist/collection/components/views/email-registration-view.js

@@ -57,9 +57,9 @@ export function EmailRegistrationView(props) {
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error &&
         getErrorMessage(props.states.error, props.content.fraudErrorMessage, props.content.fraudErrorMessageTitle),
-      content.includeName && (h("sl-input", { exportparts: "label: input-label, base: input-base", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading })),
-      content.includeName && (h("sl-input", { exportparts: "label: input-label, base: input-base", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading })),
-      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 }) => {
+      content.includeName && (h("sl-input", { exportparts: "label: input-label", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading })),
+      content.includeName && (h("sl-input", { exportparts: "label: input-label", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading })),
+      h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }

package/dist/esm/{ShadowViewAddon-8fd4f148.js → ShadowViewAddon-c22043d9.js}

@@ -360,17 +360,17 @@ const EditProfileView = (props) => {
         h("div", { class: "FormSection" },
           states.formState.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
             h("div", { part: "erroralert-text" }, states.formState.error))),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
+          h("sl-input", Object.assign({ exportparts: "label: input-label", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
             : []), { id: "firstName", name: "firstName", error: errors.firstName && errors.firstName.status !== "valid"
               ? errors.firstName.message
               : undefined })),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
+          h("sl-input", Object.assign({ exportparts: "label: input-label", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
             : []), { error: errors.lastName && errors.lastName.status !== "valid"
               ? errors.lastName.message
               : undefined }))),
-        text.showregion && states.formState.currentRegion && (h("sl-input", { exportparts: "label: input-label, base: input-base", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
+        text.showregion && states.formState.currentRegion && (h("sl-input", { exportparts: "label: input-label", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
         h("div", { class: "ButtonWrapper" },
           h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
               callbacks.onSubmit(e);
@@ -1592,7 +1592,7 @@ function PortalChangePasswordView(props) {
           h("sl-form", { "onSl-submit": callbacks.submit },
             h("div", { class: sheet.classes.InputContainer },
               h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
-              h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
+              h("sl-input", { exportparts: "label: input-label", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
               h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
               h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
@@ -1639,9 +1639,9 @@ function PortalLoginView(props) {
     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("sl-input", { exportparts: "label: input-label", 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("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
         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"),
@@ -1691,7 +1691,7 @@ function PortalRegisterView(props) {
       states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
-      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -1707,7 +1707,7 @@ function PortalRegisterView(props) {
         : [])))),
       !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, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", 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,
       }
@@ -2766,7 +2766,7 @@ function NameFieldsView(props) {
     h("style", { type: "text/css" },
       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) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", 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) ? {
@@ -2774,7 +2774,7 @@ function NameFieldsView(props) {
       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) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", 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) ? {
@@ -2833,7 +2833,7 @@ function CheckboxFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle$6,
       styleString$a),
-    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label", 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])
@@ -2891,7 +2891,7 @@ function DropdownFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle$7,
       styleString$b),
-    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]) ? {
+    h("sl-select", Object.assign({ exportparts: "label: input-label", 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]) ? {
@@ -2928,7 +2928,7 @@ function InputFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle$8,
       styleString$c),
-    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]) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", 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]) ? {
@@ -3439,7 +3439,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$d.classes.Card, style: {
+            h("sl-card", { class: sheet$d.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3497,7 +3497,7 @@ function RewardExchangeView(props) {
                     }))))))));
         }))),
         h("div", { class: sheet$d.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))),
+          h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
   function chooseAmount() {
@@ -3517,8 +3517,8 @@ function RewardExchangeView(props) {
             ((_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$d.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)))));
+          h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;

package/dist/esm/{email-registration-view-07d80492.js → email-registration-view-4a4202e7.js}

@@ -58,9 +58,9 @@ function EmailRegistrationView(props) {
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error &&
         getErrorMessage(props.states.error, props.content.fraudErrorMessage, props.content.fraudErrorMessageTitle),
-      content.includeName && (h("sl-input", { exportparts: "label: input-label, base: input-base", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading })),
-      content.includeName && (h("sl-input", { exportparts: "label: input-label, base: input-base", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading })),
-      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 }) => {
+      content.includeName && (h("sl-input", { exportparts: "label: input-label", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading })),
+      content.includeName && (h("sl-input", { exportparts: "label: input-label", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading })),
+      h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }