@saasquatch/mint-components 1.8.5-8 → 1.9.0

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", 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, 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]) && {
       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", 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, 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) && {
         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", 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) && {
+      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) && {
         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", 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, 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) && {
         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", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
+        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),
         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", 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, 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) && {
           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", 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, 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) && {
           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", 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, 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) ? {
             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", 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, 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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
-          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) ? {
+          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) ? {
             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", 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, 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) ? {
               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", label: " ", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, style: { marginTop: "2px", width: "362px" }, validationError: ({ value }) => 
+            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 }) => 
               // 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", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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", 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, 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) ? {
             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", 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, 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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          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) ? {
+          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) ? {
             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", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+            h("sl-checkbox", { exportparts: "label: input-label, base: input-base", 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", 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 }) => {
+      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 }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }

package/dist/esm/{ShadowViewAddon-c22043d9.js → ShadowViewAddon-8fd4f148.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", 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, base: input-base", 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", 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, 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"
             ? { 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", 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, base: input-base", 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", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
+              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(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", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      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", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
+        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$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", 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, base: input-base", 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", 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, 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,
       }
@@ -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", 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, 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) ? {
@@ -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", 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, 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) ? {
@@ -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", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+    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])
@@ -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", 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, 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]) ? {
@@ -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", 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, 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]) ? {
@@ -3439,7 +3439,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { class: sheet$d.classes.Card, style: {
+            h("sl-card", { exportparts: "base: exchange-card-container", 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", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
+          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))),
     ];
   }
   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", { 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)))));
+          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)))));
   }
   function confirmation() {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;

package/dist/esm/{email-registration-view-4a4202e7.js → email-registration-view-07d80492.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", 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 }) => {
+      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 }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }

package/dist/esm/sqm-banking-info-form_16.entry.js

@@ -12,7 +12,7 @@ import { u as useChildElements } from './useChildElements-cd29b2fc.js';
 import { l as luxon } from './luxon-4706d11b.js';
 import { g as generateUserError } from './useReferralTable-669cae58.js';
 import { g as getProps, l as luxonLocale } from './utils-334c1e34.js';
-import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-d00894ce.js';
+import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-c905071b.js';
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
 const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
@@ -863,7 +863,7 @@ 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", 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, base: input-base", 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)
           : [
@@ -871,7 +871,7 @@ const BankingInfoFormView = (props) => {
             slots.paymentMethodSlot,
             slots.formInputsSlot,
           ])),
-        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({
+        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({
           id: "paypal-input-label",
           defaultMessage: text.toPayPalAccount,
         }, { feeCap: states.feeCap }))),
@@ -880,11 +880,11 @@ 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", 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, 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),
         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", 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, 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),
         formState.paymentScheduleChecked === "FIXED_DAY" && (h("div", { class: classes.InputContainer, style: states.hideFixedDay ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentFixedDaySelectSlot))))),
@@ -6668,18 +6668,18 @@ const UserInfoFormView = (props) => {
         text.isPartnerAlertDescription)),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          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) ? {
+          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) ? {
             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", 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, 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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
-          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) ? {
+          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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.country, formState.errors.countryCode),
           }
@@ -6693,7 +6693,7 @@ 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", 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, 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) ? {
               class: classes.ErrorInput,
             }
               : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
@@ -6715,7 +6715,7 @@ 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", label: " ", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, style: { marginTop: "2px", width: "362px" }, validationError: ({ value }) => 
+            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 }) => 
               // 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) ? {
@@ -6723,7 +6723,7 @@ const UserInfoFormView = (props) => {
               helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
             }
               : {}), { required: true }))),
-          h("sl-input", Object.assign({ exportparts: "label: input-label", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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) ? {
@@ -6731,7 +6731,7 @@ const UserInfoFormView = (props) => {
             helpText: formatErrorMessage(text.address, formState.errors.address),
           }
             : {}), { required: true })),
-          h("sl-input", Object.assign({ exportparts: "label: input-label", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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) ? {
@@ -6739,17 +6739,17 @@ 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", 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, 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) ? {
             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", 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, 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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          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) ? {
+          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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.currency, formState.errors.currency),
           }
@@ -6769,7 +6769,7 @@ const UserInfoFormView = (props) => {
               " - ",
               c.displayName)))),
           h("div", { class: classes.CheckboxWrapper },
-            h("sl-checkbox", { exportparts: "label: input-label", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+            h("sl-checkbox", { exportparts: "label: input-label, base: input-base", 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/esm/sqm-big-stat_38.entry.js

@@ -15,7 +15,7 @@ import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-0e09e2ca.js';
 import { i as isEmpty } from './utilities-21d8a4df.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-c22043d9.js';
+import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-8fd4f148.js';
 import './sqm-portal-container-view-ab89c6cc.js';
 
 const BigStat = class {

package/dist/esm/sqm-empty_4.entry.js

@@ -10,9 +10,9 @@ function EmptyStateView(props) {
     h("img", { style: { height: "100px", margin: "auto" }, src: emptyStateImage }),
     h("sqm-titled-section", { style: { maxHeight: "400px" }, "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },
-        h("p", null, emptyStateHeader)),
+        h("p", { part: "header-text" }, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { style: { color: "var(--sl-color-gray-500)" } }, emptyStateText)))));
+        h("p", { part: "description-text", style: { color: "var(--sl-color-gray-500)" } }, emptyStateText)))));
 }
 
 const Empty = class {

package/dist/esm/sqm-instant-access-registration.entry.js

@@ -5,7 +5,7 @@ import './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import './JSS-67b5cff8.js';
-import { E as EmailRegistrationView } from './email-registration-view-4a4202e7.js';
+import { E as EmailRegistrationView } from './email-registration-view-07d80492.js';
 import './useRegistrationFormState-0e09e2ca.js';
 import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-0d27c474.js';
 

package/dist/esm/{sqm-invoice-table-view-d00894ce.js → sqm-invoice-table-view-c905071b.js}

@@ -1751,7 +1751,7 @@ const OtherRegionSlotView = (props) => {
   };
   const IndirectTaxNumberInput = ({ label, error, name, }) => {
     var _a;
-    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]) && {
+    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]) && {
       class: classes.ErrorInput,
       helpText: error,
     }), { id: name, name: `/${name}` })));
@@ -1759,13 +1759,13 @@ 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", 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, 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) && {
         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", 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) && {
+      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) && {
         class: classes.ErrorInput,
         helpText: formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
       }), { id: "subRegionTaxNumber", name: "/subRegionTaxNumber" })))));
@@ -1775,14 +1775,14 @@ const OtherRegionSlotView = (props) => {
     const { classes } = sheet$1;
     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", 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, 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) && {
         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", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
+        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),
         formState.hasQst && (h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
   };
   const getActiveForm = (selectedRegion) => {
@@ -1793,7 +1793,7 @@ const OtherRegionSlotView = (props) => {
       case "ES":
         return h(SpainFields, null);
       default:
-        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) && {
+        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) && {
           class: classes.ErrorInput,
           helpText: getTaxFieldError(vatLabels[selectedRegion] || "GENERAL"),
         }), { id: "indirectTaxNumber", name: "/indirectTaxNumber" })));
@@ -1807,7 +1807,7 @@ 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", 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, 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) && {
           class: classes.ErrorInput,
           helpText: formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
         }), { id: "selectedRegion", name: "/selectedRegion" }),