@saasquatch/mint-components 1.11.0-6 → 1.11.0-8

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

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const global = require('./global-0e1b8019.js');
-const index_module = require('./index.module-2d82a984.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const global = require('./global-02e50f09.js');
+const index_module = require('./index.module-df530553.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const GenericTableView = require('./GenericTableView-80d7642e.js');
-const reRender = require('./re-render-7744b75a.js');
-const useChildElements = require('./useChildElements-079a23aa.js');
-const luxon = require('./luxon-20eafbd9.js');
-const index = require('./index-56d1fa5b.js');
-const useReferralTable = require('./useReferralTable-034e8eb1.js');
+const reRender = require('./re-render-1976e05e.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
+const luxon = require('./luxon-05098e19.js');
+const useReferralTable = require('./useReferralTable-a76adb0d.js');
 const utils = require('./utils-6847bc06.js');
-const jsonpointer = require('./jsonpointer-11327262.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-e75291d8.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-e3b03a00.js');
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
 const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
@@ -29,7 +28,7 @@ const SORTED_COUNTRIES_NAMESPACE = "sq:countries:sorted";
 const COUNTRIES_QUERY_NAMESPACE = "sq:countries:query";
 const CURRENCIES_NAMESPACE = "sq:currencies:list";
 const CURRENCIES_QUERY_NAMESPACE = "sq:currencies:query";
-const GET_USER = index.dist.gql `
+const GET_USER = index_module.dist.gql `
   query getUserTaxInfo {
     user: viewer {
       ... on User {
@@ -70,27 +69,26 @@ const GET_USER = index.dist.gql `
               type
               dateCreated
             }
-            # !!!!! UNCOMMENT ME !!!!!!!!
-            # withdrawalSettings {
-            #   paymentMethod
-            #   paypalEmailAddress
-            #   bankCountry
-            #   bankAccountNumber
-            #   paymentSchedulingType
-            #   paymentThreshold
-            #   paymentDay
-            # }
-            # payoutsAccount {
-            #   hold
-            #   balance
-            # }
+            withdrawalSettings {
+              paymentMethod
+              paypalEmailAddress
+              bankCountry
+              bankAccountNumber
+              paymentSchedulingType
+              paymentThreshold
+              paymentDay
+            }
+            payoutsAccount {
+              hold
+              balance
+            }
           }
         }
       }
     }
   }
 `;
-const GET_COUNTRIES = index.dist.gql `
+const GET_COUNTRIES = index_module.dist.gql `
   query getCountries {
     impactPayoutCountries(limit: 1000) {
       data {
@@ -100,7 +98,7 @@ const GET_COUNTRIES = index.dist.gql `
     }
   }
 `;
-const GET_CURRENCIES = index.dist.gql `
+const GET_CURRENCIES = index_module.dist.gql `
   query currencies($locale: RSLocale) {
     currencies(limit: 300) {
       data {
@@ -110,7 +108,7 @@ const GET_CURRENCIES = index.dist.gql `
     }
   }
 `;
-const GET_FINANCE_NETWORK_SETTINGS = index.dist.gql `
+const GET_FINANCE_NETWORK_SETTINGS = index_module.dist.gql `
   query impactFinanceNetworkSettings(
     $filter: ImpactFinanceNetworkSettingsFilterInput
   ) {
@@ -136,7 +134,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
   const { errors, ...formState } = props.states.formState;
   return {
     0: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: props.text.beneficiaryAccountNameLabel, name: "/beneficiaryAccountName", id: "beneficiaryAccountName", key: "beneficiaryAccountName", type: "text" }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.beneficiaryAccountName) && {
+      input: (index.h("sl-input", Object.assign({ required: true, label: props.text.beneficiaryAccountNameLabel, name: "/beneficiaryAccountName", id: "beneficiaryAccountName", key: "beneficiaryAccountName", type: "text" }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.beneficiaryAccountName) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.beneficiaryAccountName) === null || _c === void 0 ? void 0 : _c.type,
@@ -145,18 +143,18 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     1: {
-      input: (index$1.h("sl-select", Object.assign({ required: true, label: props.text.bankAccountTypeLabel, name: "/bankAccountType", id: "bankAccountType", key: "bankAccountType" }, (((_d = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _d === void 0 ? void 0 : _d.bankAccountType) && {
+      input: (index.h("sl-select", Object.assign({ required: true, label: props.text.bankAccountTypeLabel, name: "/bankAccountType", id: "bankAccountType", key: "bankAccountType" }, (((_d = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _d === void 0 ? void 0 : _d.bankAccountType) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _e === void 0 ? void 0 : _e.bankAccountType) === null || _f === void 0 ? void 0 : _f.type,
           label: props.text.bankAccountTypeLabel,
         }),
       })),
-        index$1.h("sl-menu-item", { value: "CHECKING" }, props.text.checkingSelectItemLabel),
-        index$1.h("sl-menu-item", { value: "SAVINGS" }, props.text.savingsSelectItemLabel))),
+        index.h("sl-menu-item", { value: "CHECKING" }, props.text.checkingSelectItemLabel),
+        index.h("sl-menu-item", { value: "SAVINGS" }, props.text.savingsSelectItemLabel))),
     },
     2: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: props.text.bankAccountNumberLabel, name: "/bankAccountNumber", id: "bankAccountNumber", key: "bankAccountNumber", value: formState.bankAccountNumber, type: "text" }, (((_g = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _g === void 0 ? void 0 : _g.bankAccountNumber) && {
+      input: (index.h("sl-input", Object.assign({ required: true, label: props.text.bankAccountNumberLabel, name: "/bankAccountNumber", id: "bankAccountNumber", key: "bankAccountNumber", value: formState.bankAccountNumber, type: "text" }, (((_g = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _g === void 0 ? void 0 : _g.bankAccountNumber) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_j = (_h = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _h === void 0 ? void 0 : _h.bankAccountNumber) === null || _j === void 0 ? void 0 : _j.type,
@@ -165,7 +163,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     3: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: props.text.ibanLabel, name: "/bankAccountNumber", id: "iban", key: "iban", type: "text", value: formState.bankAccountNumber }, (((_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.bankAccountNumber) && {
+      input: (index.h("sl-input", Object.assign({ required: true, label: props.text.ibanLabel, name: "/bankAccountNumber", id: "iban", key: "iban", type: "text", value: formState.bankAccountNumber }, (((_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.bankAccountNumber) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_m = (_l = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _l === void 0 ? void 0 : _l.bankAccountNumber) === null || _m === void 0 ? void 0 : _m.type,
@@ -174,7 +172,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     4: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: props.text.swiftCodeLabel, name: "/swiftCode", id: "swiftCode", key: "swiftCode", type: "text" }, (((_o = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _o === void 0 ? void 0 : _o.swiftCode) && {
+      input: (index.h("sl-input", Object.assign({ required: true, label: props.text.swiftCodeLabel, name: "/swiftCode", id: "swiftCode", key: "swiftCode", type: "text" }, (((_o = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _o === void 0 ? void 0 : _o.swiftCode) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.swiftCode) === null || _q === void 0 ? void 0 : _q.type,
@@ -183,7 +181,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     5: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: global.intl.formatMessage({
+      input: (index.h("sl-input", Object.assign({ required: true, label: global.intl.formatMessage({
           id: "routingCodeText",
           defaultMessage: props.text.routingCodeLabel,
         }, {
@@ -202,7 +200,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     6: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: props.text.bankNameLabel, name: "/bankName", id: "bankName", key: "bankName", type: "text" }, (((_u = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _u === void 0 ? void 0 : _u.bankName) && {
+      input: (index.h("sl-input", Object.assign({ required: true, label: props.text.bankNameLabel, name: "/bankName", id: "bankName", key: "bankName", type: "text" }, (((_u = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _u === void 0 ? void 0 : _u.bankName) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_w = (_v = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _v === void 0 ? void 0 : _v.bankName) === null || _w === void 0 ? void 0 : _w.type,
@@ -212,17 +210,17 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
     },
     7: {
       input: [
-        index$1.h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_x = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _x === void 0 ? void 0 : _x.beneficiaryClassification) && {
+        index.h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_x = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _x === void 0 ? void 0 : _x.beneficiaryClassification) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_z = (_y = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _y === void 0 ? void 0 : _y.beneficiaryClassification) === null || _z === void 0 ? void 0 : _z.type,
             label: props.text.classificationLabel,
           }),
         })),
-          index$1.h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
-          index$1.h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
-          index$1.h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel)),
-        index$1.h("sl-input", Object.assign({ required: true, label: global.intl.formatMessage({
+          index.h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
+          index.h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
+          index.h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel)),
+        index.h("sl-input", Object.assign({ required: true, label: global.intl.formatMessage({
             id: "fxWireText",
             defaultMessage: props.text.taxPayerIdLabel,
           }, {
@@ -237,18 +235,18 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       ],
     },
     8: {
-      input: (index$1.h("sl-select", Object.assign({ required: true, label: props.text.classificationCPFLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_3 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _3 === void 0 ? void 0 : _3.beneficiaryClassification) && {
+      input: (index.h("sl-select", Object.assign({ required: true, label: props.text.classificationCPFLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_3 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _3 === void 0 ? void 0 : _3.beneficiaryClassification) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_5 = (_4 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _4 === void 0 ? void 0 : _4.beneficiaryClassification) === null || _5 === void 0 ? void 0 : _5.type,
           label: props.text.classificationCPFLabel,
         }),
       })),
-        index$1.h("sl-menu-item", { value: "CPF" }, "CPF"),
-        index$1.h("sl-menu-item", { value: "CNPJ" }, "CNPJ"))),
+        index.h("sl-menu-item", { value: "CPF" }, "CPF"),
+        index.h("sl-menu-item", { value: "CNPJ" }, "CNPJ"))),
     },
     9: {
-      input: (index$1.h("sl-input", Object.assign({ key: "patronymicName", required: true, label: props.text.patronymicNameLabel, name: "/patronymicName", id: "patronymicName", type: "text" }, (((_6 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _6 === void 0 ? void 0 : _6.patronymicName) && {
+      input: (index.h("sl-input", Object.assign({ key: "patronymicName", required: true, label: props.text.patronymicNameLabel, name: "/patronymicName", id: "patronymicName", type: "text" }, (((_6 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _6 === void 0 ? void 0 : _6.patronymicName) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_8 = (_7 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _7 === void 0 ? void 0 : _7.patronymicName) === null || _8 === void 0 ? void 0 : _8.type,
@@ -257,7 +255,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     10: {
-      input: (index$1.h("sl-input", Object.assign({ key: "voCode", label: props.text.voCodeLabel, name: "/voCode", id: "voCode", type: "text" }, (((_9 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _9 === void 0 ? void 0 : _9.voCode) && {
+      input: (index.h("sl-input", Object.assign({ key: "voCode", label: props.text.voCodeLabel, name: "/voCode", id: "voCode", type: "text" }, (((_9 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _9 === void 0 ? void 0 : _9.voCode) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_11 = (_10 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _10 === void 0 ? void 0 : _10.voCode) === null || _11 === void 0 ? void 0 : _11.type,
@@ -266,7 +264,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     11: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: props.text.agencyCodeLabel, name: "/agencyCode", id: "agencyCode", key: "agencyCode", type: "text" }, (((_12 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _12 === void 0 ? void 0 : _12.agencyCode) && {
+      input: (index.h("sl-input", Object.assign({ required: true, label: props.text.agencyCodeLabel, name: "/agencyCode", id: "agencyCode", key: "agencyCode", type: "text" }, (((_12 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _12 === void 0 ? void 0 : _12.agencyCode) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_14 = (_13 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _13 === void 0 ? void 0 : _13.agencyCode) === null || _14 === void 0 ? void 0 : _14.type,
@@ -276,28 +274,28 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
     },
     12: {
       input: [
-        index$1.h("sl-input", Object.assign({ required: true, label: props.text.bankAddressLabel, name: "/bankAddress", id: "bankAddress", key: "bankAddress", type: "text" }, (((_15 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _15 === void 0 ? void 0 : _15.bankAddress) && {
+        index.h("sl-input", Object.assign({ required: true, label: props.text.bankAddressLabel, name: "/bankAddress", id: "bankAddress", key: "bankAddress", type: "text" }, (((_15 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _15 === void 0 ? void 0 : _15.bankAddress) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_17 = (_16 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _16 === void 0 ? void 0 : _16.bankAddress) === null || _17 === void 0 ? void 0 : _17.type,
             label: props.text.bankAddressLabel,
           }),
         }))),
-        index$1.h("sl-input", Object.assign({ required: true, label: props.text.bankCityLabel, name: "/bankCity", id: "bankCity", key: "bankCity", type: "text" }, (((_18 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _18 === void 0 ? void 0 : _18.bankCity) && {
+        index.h("sl-input", Object.assign({ required: true, label: props.text.bankCityLabel, name: "/bankCity", id: "bankCity", key: "bankCity", type: "text" }, (((_18 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _18 === void 0 ? void 0 : _18.bankCity) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_20 = (_19 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _19 === void 0 ? void 0 : _19.bankCity) === null || _20 === void 0 ? void 0 : _20.type,
             label: props.text.bankCityLabel,
           }),
         }))),
-        index$1.h("sl-input", Object.assign({ required: true, label: props.text.bankStateLabel, name: "/bankState", id: "bankState", key: "bankState", type: "text" }, (((_21 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _21 === void 0 ? void 0 : _21.bankState) && {
+        index.h("sl-input", Object.assign({ required: true, label: props.text.bankStateLabel, name: "/bankState", id: "bankState", key: "bankState", type: "text" }, (((_21 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _21 === void 0 ? void 0 : _21.bankState) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_23 = (_22 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _22 === void 0 ? void 0 : _22.bankState) === null || _23 === void 0 ? void 0 : _23.type,
             label: props.text.bankStateLabel,
           }),
         }))),
-        index$1.h("sl-input", Object.assign({ required: true, label: props.text.bankPostalCodeLabel, name: "/bankPostalCode", id: "bankPostalCode", key: "bankPostalCode", type: "text" }, (((_24 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _24 === void 0 ? void 0 : _24.bankPostalCode) && {
+        index.h("sl-input", Object.assign({ required: true, label: props.text.bankPostalCodeLabel, name: "/bankPostalCode", id: "bankPostalCode", key: "bankPostalCode", type: "text" }, (((_24 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _24 === void 0 ? void 0 : _24.bankPostalCode) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_26 = (_25 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _25 === void 0 ? void 0 : _25.bankPostalCode) === null || _26 === void 0 ? void 0 : _26.type,
@@ -307,7 +305,7 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       ],
     },
     13: {
-      input: (index$1.h("sl-input", Object.assign({ required: true, label: props.text.branchCodeLabel, name: "/branchCode", id: "branchCode", key: "branchCode", type: "text" }, (((_27 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _27 === void 0 ? void 0 : _27.branchCode) && {
+      input: (index.h("sl-input", Object.assign({ required: true, label: props.text.branchCodeLabel, name: "/branchCode", id: "branchCode", key: "branchCode", type: "text" }, (((_27 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _27 === void 0 ? void 0 : _27.branchCode) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_29 = (_28 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _28 === void 0 ? void 0 : _28.branchCode) === null || _29 === void 0 ? void 0 : _29.type,
@@ -316,16 +314,16 @@ function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
       })))),
     },
     14: {
-      input: (index$1.h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_30 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _30 === void 0 ? void 0 : _30.beneficiaryClassification) && {
+      input: (index.h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_30 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _30 === void 0 ? void 0 : _30.beneficiaryClassification) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_32 = (_31 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _31 === void 0 ? void 0 : _31.beneficiaryClassification) === null || _32 === void 0 ? void 0 : _32.type,
           label: props.text.classificationLabel,
         }),
       })),
-        index$1.h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
-        index$1.h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
-        index$1.h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel))),
+        index.h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
+        index.h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
+        index.h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel))),
     },
   };
 }
@@ -647,7 +645,6 @@ const style = {
     alignItems: "flex-start",
     justifyContent: "flex-start",
     gap: "var(--sl-spacing-xx-small)",
-    maxWidth: "797px",
   },
   TitleContainer: {
     display: "flex",
@@ -751,7 +748,8 @@ const style = {
     background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
-    width: "320px",
+    width: "100%",
+    maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",
@@ -823,80 +821,80 @@ const BankingInfoFormView = (props) => {
       gap: "8px",
     };
     if (checkedValue === undefined) {
-      return (index$1.h("div", { style: { ...flexBoxStyle, flexDirection: "column", gap: "16px" } },
-        index$1.h("div", { class: classes.SmallSkeleton }),
-        index$1.h("div", { style: { ...flexBoxStyle, flexDirection: "row" } },
-          index$1.h("div", { class: classes.CheckboxSkeleton }),
-          index$1.h("div", { class: classes.SmallSkeleton })),
-        index$1.h("div", { style: { ...flexBoxStyle, flexDirection: "row" } },
-          index$1.h("div", { class: classes.CheckboxSkeleton }),
-          index$1.h("div", { class: classes.SmallSkeleton }))));
+      return (index.h("div", { style: { ...flexBoxStyle, flexDirection: "column", gap: "16px" } },
+        index.h("div", { class: classes.SmallSkeleton }),
+        index.h("div", { style: { ...flexBoxStyle, flexDirection: "row" } },
+          index.h("div", { class: classes.CheckboxSkeleton }),
+          index.h("div", { class: classes.SmallSkeleton })),
+        index.h("div", { style: { ...flexBoxStyle, flexDirection: "row" } },
+          index.h("div", { class: classes.CheckboxSkeleton }),
+          index.h("div", { class: classes.SmallSkeleton }))));
     }
     if (checkedValue === "toPayPalAccount") {
-      return (index$1.h("div", { style: { ...flexBoxStyle, flexDirection: "column" } },
-        index$1.h("div", { class: classes.SmallSkeleton }),
-        index$1.h("div", { class: classes.LargeSkeleton })));
+      return (index.h("div", { style: { ...flexBoxStyle, flexDirection: "column" } },
+        index.h("div", { class: classes.SmallSkeleton }),
+        index.h("div", { class: classes.LargeSkeleton })));
     }
-    const skeletons = inputNumArray.map((_, idx) => (index$1.h("div", { style: { ...flexBoxStyle, flexDirection: "column" }, key: idx },
-      index$1.h("div", { class: classes.SmallSkeleton }),
-      index$1.h("div", { class: classes.LargeSkeleton }))));
+    const skeletons = inputNumArray.map((_, idx) => (index.h("div", { style: { ...flexBoxStyle, flexDirection: "column" }, key: idx },
+      index.h("div", { class: classes.SmallSkeleton }),
+      index.h("div", { class: classes.LargeSkeleton }))));
     return skeletons;
   };
-  return (index$1.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-    index$1.h("style", { type: "text/css" },
+  return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    index.h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    index$1.h("div", { class: classes.TextContainer },
-      index$1.h("div", null,
-        !states.hideSteps && (index$1.h("p", null, global.intl.formatMessage({
+    index.h("div", { class: classes.TextContainer },
+      index.h("div", null,
+        !states.hideSteps && (index.h("p", null, global.intl.formatMessage({
           id: "formStep",
           defaultMessage: text.formStep,
         }, { step: states.step, count: FORM_STEPS }))),
-        index$1.h("h3", { style: { fontSize: "24px" } }, text.taxAndPayouts),
-        index$1.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription)),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.AlertContainer },
-        index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index$1.h("strong", null, text.error.generalTitle),
-        index$1.h("br", null),
+        index.h("h3", { style: { fontSize: "24px" } }, text.taxAndPayouts),
+        index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription)),
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.AlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.generalTitle),
+        index.h("br", null),
         text.error.generalDescription)),
-      states.isPartner && !states.hideSteps && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
-        index$1.h("sl-icon", { slot: "icon", name: "info-circle" }),
-        index$1.h("strong", null, text.isPartnerAlertHeader),
-        index$1.h("br", null),
+      states.isPartner && !states.hideSteps && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "info-circle" }),
+        index.h("strong", null, text.isPartnerAlertHeader),
+        index.h("br", null),
         text.isPartnerAlertDescription)),
-      index$1.h("div", null,
-        index$1.h("h4", null, text.paymentMethod),
-        index$1.h("p", { class: classes.DescriptionText }, text.paymentMethodSubtext))),
-    index$1.h("div", null,
-      index$1.h("div", { class: classes.CheckboxContainer }, states.loading && formState.paymentMethodChecked === undefined ? (getLoadingSkeleton(undefined)) : (index$1.h("div", { class: classes.RadioContainer },
-        states.hasPayPal && (index$1.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" && (index$1.h("div", { class: classes.InputContainer, style: states.hideBanking ? { display: "none" } : {} }, states.loading
+      index.h("div", null,
+        index.h("h4", null, text.paymentMethod),
+        index.h("p", { class: classes.DescriptionText }, text.paymentMethodSubtext))),
+    index.h("div", null,
+      index.h("div", { class: classes.CheckboxContainer }, states.loading && formState.paymentMethodChecked === undefined ? (getLoadingSkeleton(undefined)) : (index.h("div", { class: classes.RadioContainer },
+        states.hasPayPal && (index.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" && (index.h("div", { class: classes.InputContainer, style: states.hideBanking ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toBankAccount", slots.formInputsSlot.length + 3)
           : [
             slots.countryInputSlot,
             slots.paymentMethodSlot,
             slots.formInputsSlot,
           ])),
-        states.hasPayPal && (index$1.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" }, global.intl.formatMessage({
+        states.hasPayPal && (index.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" }, global.intl.formatMessage({
           id: "paypal-input-label",
           defaultMessage: text.toPayPalAccount,
         }, { feeCap: states.feeCap }))),
-        formState.paymentMethodChecked === "toPayPalAccount" && (index$1.h("div", { class: classes.InputContainer, style: states.hidePayPal ? { display: "none" } : {} }, states.loading
+        formState.paymentMethodChecked === "toPayPalAccount" && (index.h("div", { class: classes.InputContainer, style: states.hidePayPal ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paypalInputSlot)),
-        index$1.h("div", { style: { paddingTop: "24px", paddingBottom: "12px" } },
-          index$1.h("h4", null, text.paymentSchedule)),
-        index$1.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" && (index$1.h("div", { class: classes.InputContainer, style: states.hideBalanceThreshold ? { display: "none" } : {} }, states.loading
+        index.h("div", { style: { paddingTop: "24px", paddingBottom: "12px" } },
+          index.h("h4", null, text.paymentSchedule)),
+        index.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" && (index.h("div", { class: classes.InputContainer, style: states.hideBalanceThreshold ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentThresholdSelectSlot)),
-        index$1.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" && (index$1.h("div", { class: classes.InputContainer, style: states.hideFixedDay ? { display: "none" } : {} }, states.loading
+        index.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" && (index.h("div", { class: classes.InputContainer, style: states.hideFixedDay ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentFixedDaySelectSlot))))),
-      index$1.h("div", { class: classes.BtnContainer },
-        index$1.h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        !states.hideBackButton && (index$1.h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
+      index.h("div", { class: classes.BtnContainer },
+        index.h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        !states.hideBackButton && (index.h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
 };
 
 // Hardcoded in Impact backend
@@ -930,7 +928,7 @@ function getFormInputs({ bitset, formMap }) {
   }, []);
   return inputFields;
 }
-const SAVE_WITHDRAWAL_SETTINGS = index.dist.gql `
+const SAVE_WITHDRAWAL_SETTINGS = index_module.dist.gql `
   mutation setImpactPublisherWithdrawalSettings(
     $setImpactPublisherWithdrawalSettingsInput: SetImpactPublisherWithdrawalSettingsInput!
   ) {
@@ -962,15 +960,15 @@ function parseImpactThreshold(threshold) {
 }
 function useBankingInfoForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const locale = index_module.Q();
-  const user = index_module.K();
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const countries = index_module.Dn(SORTED_COUNTRIES_NAMESPACE);
+  const locale = index_module.L();
+  const user = index_module.Q();
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const countries = index_module.In(SORTED_COUNTRIES_NAMESPACE);
   const formRef = stencilHooks_module.useRef(null);
-  const { data: paymentOptionsData, loading: paymentOptionsLoading, errors: paymentOptionsError, } = index_module.qn(FINANCE_NETWORK_SETTINGS_NAMESPACE);
-  const { data: userData, refetch, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
-  const [saveWithdrawalSettings] = index_module.xe(SAVE_WITHDRAWAL_SETTINGS);
+  const { data: paymentOptionsData, loading: paymentOptionsLoading, errors: paymentOptionsError, } = index_module.Mn(FINANCE_NETWORK_SETTINGS_NAMESPACE);
+  const { data: userData, refetch, errors: userError, } = index_module.Mn(USER_QUERY_NAMESPACE);
+  const [saveWithdrawalSettings] = index_module.$e(SAVE_WITHDRAWAL_SETTINGS);
   const [formState, setFormState] = stencilHooks_module.useState({});
   const [currentPaymentOption, setCurrentPaymentOption] = stencilHooks_module.useState(null);
   const [loading, setLoading] = stencilHooks_module.useState(false);
@@ -1192,7 +1190,7 @@ function useBankingInfoForm(props) {
 
 const BankingInfoForm = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
      * @uiName Setup progress
@@ -1433,7 +1431,7 @@ const BankingInfoForm = class {
      * @uiWidget textArea
      */
     this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -1489,40 +1487,40 @@ const BankingInfoForm = class {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    return (index$1.h(index$1.Host, null, index$1.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
+    return (index.h(index.Host, null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
-        countryInputSlot: (index$1.h("sl-select", Object.assign({ label: props.text.bankLocationLabel, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
+        countryInputSlot: (index.h("sl-select", Object.assign({ label: props.text.bankLocationLabel, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
             label: props.text.bankLocationLabel,
           }),
-        })), index$1.h("sl-input", { class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+        })), index.h("sl-input", { class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
             // Stop shoelace intercepting key presses
             e.stopPropagation();
           }, "onSl-input": (e) => {
             props.callbacks.setCountrySearch(e.target.value);
           } }), (_d = props.states.countries) === null || _d === void 0 ? void 0 :
           _d.map((country) => {
-            return (index$1.h("sl-menu-item", { value: country.countryCode }, country.displayName));
+            return (index.h("sl-menu-item", { value: country.countryCode }, country.displayName));
           }), (_f = (_e = props.states) === null || _e === void 0 ? void 0 : _e.allCountries) === null || _f === void 0 ? void 0 :
-          _f.map((c) => (index$1.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName))))),
-        paymentMethodSlot: (index$1.h("sl-input", { key: "paymentMethod", label: props.text.paymentMethod, placeholder: props.states.paymentMethodFeeLabel, disabled: true })),
-        paymentThresholdSelectSlot: (index$1.h("sl-select", Object.assign({ required: true, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
+          _f.map((c) => (index.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName))))),
+        paymentMethodSlot: (index.h("sl-input", { key: "paymentMethod", label: props.text.paymentMethod, placeholder: props.states.paymentMethodFeeLabel, disabled: true })),
+        paymentThresholdSelectSlot: (index.h("sl-select", Object.assign({ required: true, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.paymentThreshold) === null || _l === void 0 ? void 0 : _l.type,
             label: props.text.paymentThresholdSelectLabel,
           }),
-        })), props.states.thresholds.map((t) => (index$1.h("sl-menu-item", { value: t }, `${props.states.currency}${t}`))))),
-        paymentFixedDaySelectSlot: (index$1.h("sl-select", Object.assign({ required: true, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
+        })), props.states.thresholds.map((t) => (index.h("sl-menu-item", { value: t }, `${props.states.currency}${t}`))))),
+        paymentFixedDaySelectSlot: (index.h("sl-select", Object.assign({ required: true, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_r = (_q = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _q === void 0 ? void 0 : _q.paymentDay) === null || _r === void 0 ? void 0 : _r.type,
             label: props.text.paymentDaySelectLabel,
           }),
-        })), index$1.h("sl-menu-item", { value: "1" }, props.text.paymentDayFirstOfMonthLabelText), index$1.h("sl-menu-item", { value: "15" }, props.text.paymentDayFifteenthOfMonthLabelText))),
-        paypalInputSlot: (index$1.h("sl-input", Object.assign({ required: true, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
+        })), index.h("sl-menu-item", { value: "1" }, props.text.paymentDayFirstOfMonthLabelText), index.h("sl-menu-item", { value: "15" }, props.text.paymentDayFifteenthOfMonthLabelText))),
+        paypalInputSlot: (index.h("sl-input", Object.assign({ required: true, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_0 = (_z = (_y = (_x = props.states.formState) === null || _x === void 0 ? void 0 : _x.errors) === null || _y === void 0 ? void 0 : _y.inputErrors) === null || _z === void 0 ? void 0 : _z.paypalEmailAddress) === null || _0 === void 0 ? void 0 : _0.type,
@@ -1538,7 +1536,7 @@ function useDemoBankingInfoForm(props) {
   const defaultPaymentScheduleChecked = (_f = (_e = (_d = props.demoData) === null || _d === void 0 ? void 0 : _d.states) === null || _e === void 0 ? void 0 : _e.formState) === null || _f === void 0 ? void 0 : _f.paymentScheduleChecked;
   const defaultCurrency = (_h = (_g = props.demoData) === null || _g === void 0 ? void 0 : _g.states) === null || _h === void 0 ? void 0 : _h.currency;
   const defaultCountry = (_l = (_k = (_j = props.demoData) === null || _j === void 0 ? void 0 : _j.states) === null || _k === void 0 ? void 0 : _k.formState) === null || _l === void 0 ? void 0 : _l.bankCountry;
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   const [paymentMethodChecked, setPaymentMethodChecked] = stencilHooks_module.useState(undefined);
   const [paymentScheduleChecked, setPaymentScheduleChecked] = stencilHooks_module.useState(undefined);
   const [currency, setCurrency] = stencilHooks_module.useState(defaultCurrency);
@@ -1629,7 +1627,7 @@ function useDemoBankingInfoForm(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_TAX_DOCUMENT = index.dist.gql `
+const GET_TAX_DOCUMENT = index_module.dist.gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!
   ) {
@@ -1640,7 +1638,7 @@ const GET_TAX_DOCUMENT = index.dist.gql `
     }
   }
 `;
-const COMPLETE_TAX_DOCUMENT = index.dist.gql `
+const COMPLETE_TAX_DOCUMENT = index_module.dist.gql `
   mutation completeImpactPublisherTaxDocument($vars: UserIdInput!) {
     completeImpactPublisherTaxDocument(user: $vars) {
       success
@@ -1656,17 +1654,18 @@ const DOCUSIGN_ERROR_STATES = [
 const DOCUSIGN_EXPIRED_STATES = ["ttl_expired", "session_timeout"];
 function useDocusignForm(props) {
   var _a, _b, _c;
-  const user = index_module.K();
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const { data, loading: userLoading, refetch, } = index_module.qn(USER_QUERY_NAMESPACE);
+  const user = index_module.Q();
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const { data, loading: userLoading, refetch, } = index_module.Mn(USER_QUERY_NAMESPACE);
   const publisher = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher;
-  const [createTaxDocument, { loading: documentLoading, data: document, errors: documentErrors },] = index_module.xe(GET_TAX_DOCUMENT);
-  const [completeTaxDocument, { loading: completeDocumentLoading, data: completeData, errors: completeErrors, },] = index_module.xe(COMPLETE_TAX_DOCUMENT);
+  const [createTaxDocument, { loading: documentLoading, data: document, errors: documentErrors },] = index_module.$e(GET_TAX_DOCUMENT);
+  const [completeTaxDocument, { loading: completeDocumentLoading, data: completeData, errors: completeErrors, },] = index_module.$e(COMPLETE_TAX_DOCUMENT);
   const [docusignStatus, setDocusignStatus] = stencilHooks_module.useState(undefined);
   const [participantType, setParticipantType] = stencilHooks_module.useState(undefined);
   const [errors, setErrors] = stencilHooks_module.useState({});
   const [loading, setLoading] = stencilHooks_module.useState(false);
+  const [showExitButton, setShowExitButton] = stencilHooks_module.useState(false);
   // Only look at current document if it's valid (same as required type)
   const existingDocumentType = sqmInvoiceTableView.validTaxDocument(publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType) && (publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument)
     ? publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType : undefined;
@@ -1725,6 +1724,7 @@ function useDocusignForm(props) {
       // @ts-expect-error: no data type for result
       if (!result.completeImpactPublisherTaxDocument.success)
         throw new Error();
+      setShowExitButton(true);
     }
     catch (e) {
       setErrors({ general: true });
@@ -1758,6 +1758,7 @@ function useDocusignForm(props) {
       docusignStatus,
       documentType: actualDocumentType,
       documentTypeString: sqmInvoiceTableView.taxTypeToName(actualDocumentType),
+      showExitButton,
     },
     data: {
       taxForm: actualDocumentType,
@@ -1766,7 +1767,7 @@ function useDocusignForm(props) {
     callbacks: {
       setDocusignStatus,
       completeDocument,
-      progressStep,
+      onExit: progressStep,
       setParticipantType,
     },
     text: props.getTextProps(),
@@ -1805,46 +1806,46 @@ const styleString$1 = sheet$1.toString();
 const DocusignExpiredView = (props) => {
   const { classes } = sheet$1;
   const { text } = props;
-  return (index$1.h("div", null,
-    index$1.h("style", { type: "text/css" }, styleString$1),
-    index$1.h("div", { class: classes.DocusignStatusContainer },
-      index$1.h("sl-icon", { style: {
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("div", { class: classes.DocusignStatusContainer },
+      index.h("sl-icon", { style: {
           width: "50px",
           height: "50px",
           color: "var(--sl-color-neutral-500)",
         }, name: "clock" }),
-      index$1.h("div", { class: classes.MessageContainer },
-        index$1.h("p", { style: { margin: "0" } }, text.docusignExpired)),
-      index$1.h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
+      index.h("div", { class: classes.MessageContainer },
+        index.h("p", { style: { margin: "0" } }, text.docusignExpired)),
+      index.h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
 };
 const DocusignErrorView = (props) => {
   const { classes } = sheet$1;
   const { text } = props;
-  return (index$1.h("div", null,
-    index$1.h("style", { type: "text/css" }, styleString$1),
-    index$1.h("div", { class: classes.DocusignStatusContainer },
-      index$1.h("sl-icon", { style: {
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("div", { class: classes.DocusignStatusContainer },
+      index.h("sl-icon", { style: {
           width: "50px",
           height: "50px",
           color: "var(--sl-color-gray-500)",
         }, name: "exclamation-octagon" }),
-      index$1.h("div", { class: classes.MessageContainer },
-        index$1.h("p", { style: { margin: "0" } }, text.docusignError)),
-      index$1.h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
+      index.h("div", { class: classes.MessageContainer },
+        index.h("p", { style: { margin: "0" } }, text.docusignError)),
+      index.h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
 };
 const DocusignLoadingView = () => {
   const { classes } = sheet$1;
-  return (index$1.h("div", null,
-    index$1.h("style", { type: "text/css" }, styleString$1),
-    index$1.h("div", { class: classes.DocusignStatusContainer },
-      index$1.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("div", { class: classes.DocusignStatusContainer },
+      index.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
 };
 const DocusignIframe = ({ states, data, callbacks, text, }) => {
   const [iFrameHeight, setiFrameHeight] = stencilHooks_module.useState("100%");
-  // TODO: Confirm impact domain before launch
   const allowedDomains = [
     "referralsaasquatch.com",
     "impacttech.complysandbox.com",
+    "impacttech.complytaxforms.com",
   ];
   const callback = index_module.useCallback((e) => {
     const allowed = allowedDomains.some((d) => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes(d); });
@@ -1856,9 +1857,6 @@ const DocusignIframe = ({ states, data, callbacks, text, }) => {
     if (e.data === "Complyexchange Thank you page Load") {
       callbacks.completeDocument();
     }
-    if (e.data == "Complyexchange Thank you page Exit") {
-      callbacks.progressStep();
-    }
   }, []);
   stencilHooks_module.useEffect(() => {
     window.addEventListener("message", callback, false);
@@ -1867,13 +1865,13 @@ const DocusignIframe = ({ states, data, callbacks, text, }) => {
     };
   }, []);
   if (states.urlLoading)
-    return index$1.h(DocusignLoadingView, null);
+    return index.h(DocusignLoadingView, null);
   if (DOCUSIGN_ERROR_STATES.includes(states.status)) {
-    return index$1.h(DocusignErrorView, { text: text });
+    return index.h(DocusignErrorView, { text: text });
   }
   if (DOCUSIGN_EXPIRED_STATES.includes(states.status))
-    return index$1.h(DocusignExpiredView, { text: text });
-  return (index$1.h("iframe", { scrolling: "yes", frameBorder: "0", src: data.documentUrl, width: "100%", height: iFrameHeight }));
+    return index.h(DocusignExpiredView, { text: text });
+  return (index.h("iframe", { scrolling: "yes", frameBorder: "0", src: data.documentUrl, width: "100%", height: iFrameHeight }));
 };
 
 const style$2 = {
@@ -2017,33 +2015,33 @@ const DocusignFormView = (props) => {
   var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
   const { classes } = sheet$2;
-  return (index$1.h("div", { class: classes.Container },
-    index$1.h("style", { type: "text/css" },
+  return (index.h("div", { class: classes.Container },
+    index.h("style", { type: "text/css" },
       styleString$2,
       vanillaStyle$1),
-    index$1.h("div", { class: classes.TextContainer },
-      index$1.h("div", null,
-        !states.hideSteps && (index$1.h("p", null, global.intl.formatMessage({
+    index.h("div", { class: classes.TextContainer },
+      index.h("div", null,
+        !states.hideSteps && (index.h("p", null, global.intl.formatMessage({
           id: "formStep",
           defaultMessage: text.formStep,
         }, { step: states.step, count: FORM_STEPS }))),
-        index$1.h("h3", null, text.taxForm),
-        index$1.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-    states.loadingError && (index$1.h("div", null,
-      index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$2.classes.ErrorAlertContainer },
-        index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index$1.h("strong", null, text.error.loadingErrorAlertHeader),
-        index$1.h("br", null),
+        index.h("h3", null, text.taxForm),
+        index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
+    states.loadingError && (index.h("div", null,
+      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$2.classes.ErrorAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.loadingErrorAlertHeader),
+        index.h("br", null),
         text.error.loadingErrorAlertDescription))),
-    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$2.classes.ErrorAlertContainer },
-      index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      index$1.h("strong", null, text.error.generalTitle),
-      index$1.h("br", null),
+    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$2.classes.ErrorAlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, text.error.generalTitle),
+      index.h("br", null),
       text.error.generalDescription)),
-    index$1.h("div", null,
-      index$1.h("div", null,
-        index$1.h("h5", { class: classes.BoldText }, global.intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),
-        index$1.h("p", null, global.intl.formatMessage({
+    index.h("div", null,
+      index.h("div", null,
+        index.h("h5", { class: classes.BoldText }, global.intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),
+        index.h("p", null, global.intl.formatMessage({
           id: "tax-form-description",
           defaultMessage: states.documentType === "W9"
             ? text.taxFormDescription
@@ -2051,12 +2049,13 @@ const DocusignFormView = (props) => {
               ? text.taxFormDescriptionIndividualParticipant
               : text.taxFormDescriptionBusinessEntity,
         }, { documentType: documentTypeString }))),
-      index$1.h("div", null, slots.docusignIframeSlot))));
+      index.h("div", null, slots.docusignIframeSlot),
+      index.h("div", { class: classes.BtnContainer }, states.showExitButton && (index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onExit }, text.exitButton))))));
 };
 
 const DocusignForm = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
      * @uiName Setup progress
@@ -2154,7 +2153,12 @@ const DocusignForm = class {
      * @uiName Page description
      */
     this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
-    stencilHooks_module.h(this);
+    /**
+     * Exit button text displayed at the end of the Comply Exchange form flow
+     * @uiName Exit button text
+     */
+    this.exitButton = "Exit";
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -2173,26 +2177,25 @@ const DocusignForm = class {
   render() {
     const _isDemo = index_module.isDemo();
     const props = _isDemo ? useDocusignFormDemo(this) : useDocusignForm(this);
-    const docusignIframeSlot = (index$1.h(DocusignIframe, { states: {
+    const docusignIframeSlot = (index.h(DocusignIframe, { states: {
         status: props.states.docusignStatus,
         loading: props.states.loading,
         urlLoading: props.states.urlLoading,
       }, data: {
         documentUrl: props.data.documentUrl,
       }, callbacks: {
-        progressStep: props.callbacks.progressStep,
         completeDocument: props.callbacks.completeDocument,
       }, text: props.text }));
-    return (index$1.h(index$1.Host, null, index$1.h(DocusignFormView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {
+    return (index.h(index.Host, null, index.h(DocusignFormView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {
         docusignIframeSlot: _isDemo
           ? DemoDocusignIframe({ callbacks: props.callbacks })
           : docusignIframeSlot,
       } })));
   }
-  get el() { return index$1.getElement(this); }
+  get el() { return index.getElement(this); }
 };
 function useDocusignFormDemo(props) {
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   return cjs.cjs({
     text: props.getTextProps(),
     states: {
@@ -2226,19 +2229,19 @@ function useDocusignFormDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 const DemoDocusignIframe = ({ callbacks }) => {
-  return (index$1.h("div", { style: {
+  return (index.h("div", { style: {
       width: "100%",
       height: "600px",
       background: "#fafafa",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-    } }, index$1.h("div", { style: {
+    } }, index.h("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: "12px",
       alignItems: "center",
-    } }, index$1.h("span", null, "Placeholder for docusign iframe"), index$1.h("div", { style: { display: "flex", gap: "8px" } }, index$1.h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onBack }, "Back to Step 2"), index$1.h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onSubmit }, "Continue to Step 4")))));
+    } }, index.h("span", null, "Placeholder for docusign iframe"), index.h("div", { style: { display: "flex", gap: "8px" } }, index.h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onBack }, "Back to Step 2"), index.h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onSubmit }, "Continue to Step 4")))));
 };
 
 const style$3 = {
@@ -2261,6 +2264,7 @@ const style$3 = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    width: "100%",
   },
   RadioContent: {
     display: "flex",
@@ -2309,9 +2313,6 @@ const style$3 = {
       color: "var(--sl-color-danger-500)",
     },
   },
-  CannotChangeAlertContainer: {
-    maxWidth: "797px",
-  },
   PartnerAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-sky-100)",
@@ -2373,61 +2374,60 @@ const IndirectTaxFormView = (props) => {
   var _a;
   const { states, states: { formState }, callbacks, text, refs, slots, } = props;
   const { classes } = sheet$3;
-  return (index$1.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-    index$1.h("style", { type: "text/css" },
+  return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    index.h("style", { type: "text/css" },
       styleString$3,
       vanillaStyle$2),
-    index$1.h("div", { class: classes.TextContainer },
-      index$1.h("div", null,
-        !states.hideSteps && (index$1.h("p", null,
+    index.h("div", { class: classes.TextContainer },
+      index.h("div", null,
+        !states.hideSteps && (index.h("p", null,
           " ",
           global.intl.formatMessage({
             id: "formStep",
             defaultMessage: text.formStep,
           }, { step: states.step, count: FORM_STEPS }))),
-        index$1.h("h3", null, text.indirectTax),
-        index$1.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
-        index$1.h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
-      states.loadingError && (index$1.h("div", null,
-        index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$3.classes.AlertContainer },
-          index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-          index$1.h("strong", null, text.error.loadingErrorAlertHeader),
-          index$1.h("br", null),
+        index.h("h3", null, text.indirectTax),
+        index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
+        index.h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
+      states.loadingError && (index.h("div", null,
+        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$3.classes.AlertContainer },
+          index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          index.h("strong", null, text.error.loadingErrorAlertHeader),
+          index.h("br", null),
           text.error.loadingErrorAlertDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$3.classes.AlertContainer },
-        index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index$1.h("strong", null, text.error.generalTitle),
-        index$1.h("br", null),
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$3.classes.AlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.generalTitle),
+        index.h("br", null),
         text.error.generalDescription)),
-      states.isPartner && (index$1.h("sl-alert", { type: "primary", open: true, class: sheet$3.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
-        index$1.h("sl-icon", { slot: "icon", name: "info-circle" }),
-        index$1.h("strong", null, text.isPartnerAlertHeader),
-        index$1.h("br", null),
+      states.isPartner && (index.h("sl-alert", { type: "primary", open: true, class: sheet$3.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+        index.h("sl-icon", { slot: "icon", name: "info-circle" }),
+        index.h("strong", null, text.isPartnerAlertHeader),
+        index.h("br", null),
         text.isPartnerAlertDescription)),
-      index$1.h("div", null,
-        index$1.h("h4", null, text.indirectTaxDetails))),
-    states.loading ? (index$1.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (index$1.h("div", null,
-      index$1.h("div", { class: classes.RadioContainer },
-        index$1.h("div", { class: classes.InnerRadioContainer },
-          index$1.h("sl-radio", { exportparts: "base: radio-base", name: "/checked", value: "notRegistered", id: "notRegistered", checked: formState.checked === "notRegistered", onInput: () => callbacks.onChange("notRegistered"), disabled: states.disabled || states.isPartner },
-            index$1.h("div", { class: classes.RadioContent },
+      index.h("div", null,
+        index.h("h4", null, text.indirectTaxDetails))),
+    states.loading ? (index.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (index.h("div", null,
+      index.h("div", { class: classes.RadioContainer },
+        index.h("div", { class: classes.InnerRadioContainer },
+          index.h("sl-radio", { exportparts: "base: radio-base", name: "/checked", value: "notRegistered", id: "notRegistered", checked: formState.checked === "notRegistered", onInput: () => callbacks.onChange("notRegistered"), disabled: states.disabled || states.isPartner },
+            index.h("div", { class: classes.RadioContent },
               text.notRegistered,
-              index$1.h("p", { class: classes.DescriptionText }, text.notRegisteredSubtext))),
-          index$1.h("sl-radio", { exportparts: "base: radio-base", name: "/checked", value: "otherRegion", id: "otherRegion", checked: formState.checked === "otherRegion", onInput: () => callbacks.onChange("otherRegion"), disabled: states.disabled || states.isPartner },
-            index$1.h("div", { class: classes.RadioContent },
+              index.h("p", { class: classes.DescriptionText }, text.notRegisteredSubtext))),
+          index.h("sl-radio", { exportparts: "base: radio-base", name: "/checked", value: "otherRegion", id: "otherRegion", checked: formState.checked === "otherRegion", onInput: () => callbacks.onChange("otherRegion"), disabled: states.disabled || states.isPartner },
+            index.h("div", { class: classes.RadioContent },
               text.otherRegion,
-              index$1.h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
+              index.h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      index$1.h("div", { class: classes.CannotChangeAlertContainer },
-        index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-          index$1.h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
-          text.cannotChangeInfoAlert)),
-      index$1.h("div", { class: classes.BtnContainer },
-        index$1.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        index$1.h("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
+        index.h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
+        text.cannotChangeInfoAlert),
+      index.h("div", { class: classes.BtnContainer },
+        index.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        index.h("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
 };
 
-const CONNECT_PARTNER = index.dist.gql `
+const CONNECT_PARTNER = index_module.dist.gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {
       success
@@ -2465,15 +2465,15 @@ function getOption(countries, countryCode) {
 }
 function useIndirectTaxForm(props) {
   var _a, _b, _c, _d, _e;
-  const user = index_module.K();
-  const locale = index_module.Q();
+  const user = index_module.Q();
+  const locale = index_module.L();
   const formRef = stencilHooks_module.useRef(null);
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = index_module.xe(CONNECT_PARTNER);
-  const userForm = index_module.Dn(USER_FORM_CONTEXT_NAMESPACE);
-  const { data: userData, refetch, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
-  const { data: _countriesRes, loading: countriesLoading } = index_module.qn(COUNTRIES_QUERY_NAMESPACE);
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = index_module.$e(CONNECT_PARTNER);
+  const userForm = index_module.In(USER_FORM_CONTEXT_NAMESPACE);
+  const { data: userData, refetch, errors: userError, } = index_module.Mn(USER_QUERY_NAMESPACE);
+  const { data: _countriesRes, loading: countriesLoading } = index_module.Mn(COUNTRIES_QUERY_NAMESPACE);
   const intlLocale = (locale === null || locale === void 0 ? void 0 : locale.replace("_", "-")) || "en";
   const _countries = stencilHooks_module.useMemo(() => { var _a, _b; return (_b = (_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map((country) => sqmInvoiceTableView.getCountryObj({ countryCode: country.countryCode, locale: intlLocale })); }, [(_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data]);
   const [loading, setLoading] = stencilHooks_module.useState(false);
@@ -2663,7 +2663,7 @@ function useIndirectTaxForm(props) {
 
 const IndirectTaxForm = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * @uiName Setup progress
      */
@@ -2809,7 +2809,7 @@ const IndirectTaxForm = class {
      * @uiName Page description
      */
     this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -2844,7 +2844,7 @@ const IndirectTaxForm = class {
     const props = index_module.isDemo()
       ? useDemoIndirectTaxForm(this)
       : useIndirectTaxForm(this);
-    const registeredInDifferentCountryDetailsSlot = (index$1.h(sqmInvoiceTableView.OtherRegionSlotView, { states: {
+    const registeredInDifferentCountryDetailsSlot = (index.h(sqmInvoiceTableView.OtherRegionSlotView, { states: {
         hide: props.states.formState.checked !== "otherRegion",
         disabled: props.states.disabled || props.states.isPartner,
         formState: props.slotProps.formState,
@@ -2856,13 +2856,13 @@ const IndirectTaxForm = class {
         provinces: props.data.provinces,
         allCountries: props.data.allCountries,
       }, text: props.text.slotText }));
-    return (index$1.h(index$1.Host, null, index$1.h(IndirectTaxFormView, { callbacks: props.callbacks, states: props.states, refs: props.refs, text: props.text, slots: {
+    return (index.h(index.Host, null, index.h(IndirectTaxFormView, { callbacks: props.callbacks, states: props.states, refs: props.refs, text: props.text, slots: {
         registeredInDifferentCountryDetailsSlot,
       } })));
   }
 };
 function useDemoIndirectTaxForm(props) {
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   const [option, setOption] = stencilHooks_module.useState(null);
   const [demoFormState, setDemoFormState] = stencilHooks_module.useState({});
   return cjs.cjs({
@@ -2946,7 +2946,7 @@ function useDemoIndirectTaxForm(props) {
 
 const debug = stencilHooks_module.browser("sq:useInvoiceTable");
 const CSS_NAMESPACE = "sqm-invoice-table";
-const GET_INVOICES = index.dist.gql `
+const GET_INVOICES = index_module.dist.gql `
   query getUserTaxInfo($limit: Int!, $offset: Int!) {
     user: viewer {
       ... on User {
@@ -2972,8 +2972,8 @@ const GET_INVOICES = index.dist.gql `
 `;
 function useInvoiceTable(props, emptyElement, loadingElement) {
   var _a;
-  const user = index_module.K();
-  const locale = index_module.Q();
+  const user = index_module.Q();
+  const locale = index_module.L();
   const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
@@ -2983,7 +2983,7 @@ function useInvoiceTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const { envelope: invoicesData, states, callbacks, } = index_module.On(GET_INVOICES, (data) => { var _a, _b, _c; return (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.invoices; }, {
+  const { envelope: invoicesData, states, callbacks, } = index_module.kn(GET_INVOICES, (data) => { var _a, _b, _c; return (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.invoices; }, {
     limit: props.perPage,
     offset: 0,
   }, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
@@ -3007,7 +3007,7 @@ function useInvoiceTable(props, emptyElement, loadingElement) {
         netEarnings: `${invoice.currency}${((_c = (invoice.totalAmount - invoice.totalVatAmount)) === null || _c === void 0 ? void 0 : _c.toFixed(2)) || "0.00"}`,
         downloadUrl: invoice.downloadUrl,
       };
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(invoiceData, { locale }, index$1.h)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(invoiceData, { locale }, index.h)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -3076,7 +3076,7 @@ async function tryMethod(c, callback) {
     // renderLabel did not return a promise, so this method probably doesn't exist
     // therefore, we IGNORE the label
     debug("label promise failed", e);
-    return index$1.h("span", null);
+    return index.h("span", null);
   }
   try {
     return await labelPromise;
@@ -3086,8 +3086,8 @@ async function tryMethod(c, callback) {
     // This should not happen so we fail fast
     debug("Error rendering label", e);
     const userError = useReferralTable.generateUserError(e);
-    return (index$1.h("details", null,
-      index$1.h("summary", null, "Error"),
+    return (index.h("details", null,
+      index.h("summary", null, "Error"),
       userError));
   }
 }
@@ -3114,7 +3114,7 @@ const getMockData = () => {
 
 const InvoiceTable = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * Number of invoices displayed per page
      *
@@ -3145,27 +3145,27 @@ const InvoiceTable = class {
     this.emptyStateHeader = "View your invoice details";
     /** @uiName Empty invoice table description */
     this.emptyStateText = "Refer a friend to view the status of your invoices and rewards earned";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = (index$1.h(EmptySlot, { emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
-    const loading = index$1.h(LoadingSlot, null);
+    const empty = (index.h(EmptySlot, { emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
+    const loading = index.h(LoadingSlot, null);
     const { states, data, callbacks, elements } = index_module.isDemo()
       ? useInvoiceTableDemo(this, empty, loading)
       : useInvoiceTable(this, empty, loading);
     reRender.useRequestRerender([this.perPage]);
-    return (index$1.h(sqmInvoiceTableView.InvoiceTableView, { header: this.header, description: this.description }, index$1.h(GenericTableView.GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements })));
+    return (index.h(sqmInvoiceTableView.InvoiceTableView, { header: this.header, description: this.description }, index.h(GenericTableView.GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements })));
   }
 };
 function EmptySlot(props) {
-  return (index$1.h("slot", { name: "empty" }, index$1.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png", "empty-state-header": props.emptyStateHeader, "empty-state-text": props.emptyStateText })));
+  return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png", "empty-state-header": props.emptyStateHeader, "empty-state-text": props.emptyStateText })));
 }
 function LoadingSlot() {
-  return (index$1.h("slot", { name: "loading" }, index$1.h(LoadingRow, null), index$1.h(LoadingRow, null), index$1.h(LoadingRow, null), index$1.h(LoadingRow, null)));
+  return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (index$1.h("sqm-table-row", null, index$1.h("sqm-table-cell", { colspan: 6 }, index$1.h("sl-skeleton", null))));
+  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 6 }, index.h("sl-skeleton", null))));
 }
 function useInvoiceTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
@@ -3259,9 +3259,9 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
 
 const InvoiceTableDataCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3271,28 +3271,28 @@ const InvoiceTableDataCell = class {
 
 const InvoiceTableDataColumn = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data) {
-    return (index$1.h("sqm-invoice-table-data-cell", { data: data[this.property] }));
+    return (index.h("sqm-invoice-table-data-cell", { data: data[this.property] }));
   }
   async renderLabel() {
     return Promise.resolve(this.columnTitle);
   }
   render() {
     reRender.useRequestRerender([this.columnTitle, this.property]);
-    return (index$1.h(index$1.Host, { style: { display: "none" } }, index$1.h("slot", null)));
+    return (index.h(index.Host, { style: { display: "none" } }, index.h("slot", null)));
   }
 };
 
 const RewardTableDateCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.ignored = true;
     this.locale = "en";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3306,58 +3306,58 @@ const RewardTableDateCell = class {
 
 const InvoiceTableDateColumn = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
-    return (index$1.h("sqm-invoice-table-date-cell", { date: data.dateCreated, locale: options === null || options === void 0 ? void 0 : options.locale }));
+    return (index.h("sqm-invoice-table-date-cell", { date: data.dateCreated, locale: options === null || options === void 0 ? void 0 : options.locale }));
   }
   async renderLabel() {
     return this.columnTitle;
   }
   render() {
     reRender.useRequestRerender([this.columnTitle]);
-    return (index$1.h(index$1.Host, { style: { display: "none" } }, index$1.h("slot", null)));
+    return (index.h(index.Host, { style: { display: "none" } }, index.h("slot", null)));
   }
 };
 
 const InvoiceTableDownloadCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const vanillaStyle = `svg:hover, svg:hover * {
       cursor: pointer;
     }`;
-    return (index$1.h(index$1.Host, null, index$1.h("style", null, vanillaStyle), !!this.downloadUrl && (index$1.h("a", { href: this.downloadUrl, target: "_blank" }, index$1.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index$1.h("path", { d: "M0.625 12.4375C0.79076 12.4375 0.949732 12.5033 1.06694 12.6206C1.18415 12.7378 1.25 12.8967 1.25 13.0625V16.1875C1.25 16.519 1.3817 16.837 1.61612 17.0714C1.85054 17.3058 2.16848 17.4375 2.5 17.4375H17.5C17.8315 17.4375 18.1495 17.3058 18.3839 17.0714C18.6183 16.837 18.75 16.519 18.75 16.1875V13.0625C18.75 12.8967 18.8158 12.7378 18.9331 12.6206C19.0503 12.5033 19.2092 12.4375 19.375 12.4375C19.5408 12.4375 19.6997 12.5033 19.8169 12.6206C19.9342 12.7378 20 12.8967 20 13.0625V16.1875C20 16.8505 19.7366 17.4864 19.2678 17.9553C18.7989 18.4241 18.163 18.6875 17.5 18.6875H2.5C1.83696 18.6875 1.20107 18.4241 0.732233 17.9553C0.263392 17.4864 0 16.8505 0 16.1875V13.0625C0 12.8967 0.065848 12.7378 0.183058 12.6206C0.300269 12.5033 0.45924 12.4375 0.625 12.4375Z", fill: "#717179" }), index$1.h("path", { d: "M9.5575 14.88C9.61556 14.9382 9.68453 14.9844 9.76046 15.0159C9.83639 15.0474 9.91779 15.0636 10 15.0636C10.0822 15.0636 10.1636 15.0474 10.2395 15.0159C10.3155 14.9844 10.3844 14.9382 10.4425 14.88L14.1925 11.13C14.3099 11.0126 14.3758 10.8535 14.3758 10.6875C14.3758 10.5215 14.3099 10.3624 14.1925 10.245C14.0751 10.1276 13.916 10.0617 13.75 10.0617C13.584 10.0617 13.4249 10.1276 13.3075 10.245L10.625 12.9288V1.9375C10.625 1.77174 10.5592 1.61277 10.4419 1.49556C10.3247 1.37835 10.1658 1.3125 10 1.3125C9.83424 1.3125 9.67527 1.37835 9.55806 1.49556C9.44085 1.61277 9.375 1.77174 9.375 1.9375V12.9288L6.6925 10.245C6.57514 10.1276 6.41597 10.0617 6.25 10.0617C6.08403 10.0617 5.92486 10.1276 5.8075 10.245C5.69014 10.3624 5.62421 10.5215 5.62421 10.6875C5.62421 10.8535 5.69014 11.0126 5.8075 11.13L9.5575 14.88Z", fill: "#717179" }))))));
+    return (index.h(index.Host, null, index.h("style", null, vanillaStyle), !!this.downloadUrl && (index.h("a", { href: this.downloadUrl, target: "_blank" }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.625 12.4375C0.79076 12.4375 0.949732 12.5033 1.06694 12.6206C1.18415 12.7378 1.25 12.8967 1.25 13.0625V16.1875C1.25 16.519 1.3817 16.837 1.61612 17.0714C1.85054 17.3058 2.16848 17.4375 2.5 17.4375H17.5C17.8315 17.4375 18.1495 17.3058 18.3839 17.0714C18.6183 16.837 18.75 16.519 18.75 16.1875V13.0625C18.75 12.8967 18.8158 12.7378 18.9331 12.6206C19.0503 12.5033 19.2092 12.4375 19.375 12.4375C19.5408 12.4375 19.6997 12.5033 19.8169 12.6206C19.9342 12.7378 20 12.8967 20 13.0625V16.1875C20 16.8505 19.7366 17.4864 19.2678 17.9553C18.7989 18.4241 18.163 18.6875 17.5 18.6875H2.5C1.83696 18.6875 1.20107 18.4241 0.732233 17.9553C0.263392 17.4864 0 16.8505 0 16.1875V13.0625C0 12.8967 0.065848 12.7378 0.183058 12.6206C0.300269 12.5033 0.45924 12.4375 0.625 12.4375Z", fill: "#717179" }), index.h("path", { d: "M9.5575 14.88C9.61556 14.9382 9.68453 14.9844 9.76046 15.0159C9.83639 15.0474 9.91779 15.0636 10 15.0636C10.0822 15.0636 10.1636 15.0474 10.2395 15.0159C10.3155 14.9844 10.3844 14.9382 10.4425 14.88L14.1925 11.13C14.3099 11.0126 14.3758 10.8535 14.3758 10.6875C14.3758 10.5215 14.3099 10.3624 14.1925 10.245C14.0751 10.1276 13.916 10.0617 13.75 10.0617C13.584 10.0617 13.4249 10.1276 13.3075 10.245L10.625 12.9288V1.9375C10.625 1.77174 10.5592 1.61277 10.4419 1.49556C10.3247 1.37835 10.1658 1.3125 10 1.3125C9.83424 1.3125 9.67527 1.37835 9.55806 1.49556C9.44085 1.61277 9.375 1.77174 9.375 1.9375V12.9288L6.6925 10.245C6.57514 10.1276 6.41597 10.0617 6.25 10.0617C6.08403 10.0617 5.92486 10.1276 5.8075 10.245C5.69014 10.3624 5.62421 10.5215 5.62421 10.6875C5.62421 10.8535 5.69014 11.0126 5.8075 11.13L9.5575 14.88Z", fill: "#717179" }))))));
   }
 };
 
 const InvoiceTableGenericColumn = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data) {
-    return (index$1.h("sqm-invoice-table-download-cell", { downloadUrl: data.downloadUrl }));
+    return (index.h("sqm-invoice-table-download-cell", { downloadUrl: data.downloadUrl }));
   }
   async renderLabel() {
-    return index$1.h("span", null);
+    return index.h("span", null);
   }
   render() {
-    return (index$1.h(index$1.Host, { style: { display: "none" } }, index$1.h("slot", null)));
+    return (index.h(index.Host, { style: { display: "none" } }, index.h("slot", null)));
   }
 };
 
-const PayPalIcon = () => (index$1.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "20", viewBox: "0 0 17 20", fill: "none" },
-  index$1.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.20649 4.55454H12.7877C15.7842 4.55454 16.9137 6.08577 16.7343 8.34231C16.4486 12.0629 14.2228 14.118 11.2728 14.118H9.78446C9.37916 14.118 9.10675 14.3866 9.00044 15.1254L8.36923 19.39C8.32937 19.6653 8.1832 19.8265 7.97058 19.8467H4.46242C4.13021 19.8467 4.01725 19.5915 4.10363 19.0408L6.23643 5.36045C6.32281 4.81646 6.61515 4.55454 7.20649 4.55454Z", fill: "#009EE3" }),
-  index$1.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.71826 -0.15332H9.30607C10.8808 -0.15332 12.7478 -0.099593 13.9903 1.00853C14.8208 1.754 15.2593 2.936 15.1597 4.21203C14.8142 8.52364 12.2694 10.9347 8.84762 10.9347H6.09026C5.61852 10.9347 5.31288 11.2503 5.18 12.0965L4.40926 17.0461C4.35611 17.3685 4.22323 17.5566 3.97739 17.5767H0.53567C0.156948 17.5767 0.0174187 17.2879 0.117082 16.6432L2.59539 0.786908C2.69505 0.148896 3.04055 -0.15332 3.71826 -0.15332Z", fill: "#113984" }),
-  index$1.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.25973 11.5995L6.23643 5.36045C6.32281 4.81646 6.61515 4.54782 7.20649 4.54782H12.7877C13.7112 4.54782 14.4554 4.69557 15.0401 4.96421C14.4819 8.799 12.0236 10.9347 8.80775 10.9347H6.06368C5.6916 10.9347 5.42583 11.1227 5.25973 11.5995Z", fill: "#172C70" })));
+const PayPalIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "20", viewBox: "0 0 17 20", fill: "none" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.20649 4.55454H12.7877C15.7842 4.55454 16.9137 6.08577 16.7343 8.34231C16.4486 12.0629 14.2228 14.118 11.2728 14.118H9.78446C9.37916 14.118 9.10675 14.3866 9.00044 15.1254L8.36923 19.39C8.32937 19.6653 8.1832 19.8265 7.97058 19.8467H4.46242C4.13021 19.8467 4.01725 19.5915 4.10363 19.0408L6.23643 5.36045C6.32281 4.81646 6.61515 4.55454 7.20649 4.55454Z", fill: "#009EE3" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.71826 -0.15332H9.30607C10.8808 -0.15332 12.7478 -0.099593 13.9903 1.00853C14.8208 1.754 15.2593 2.936 15.1597 4.21203C14.8142 8.52364 12.2694 10.9347 8.84762 10.9347H6.09026C5.61852 10.9347 5.31288 11.2503 5.18 12.0965L4.40926 17.0461C4.35611 17.3685 4.22323 17.5566 3.97739 17.5767H0.53567C0.156948 17.5767 0.0174187 17.2879 0.117082 16.6432L2.59539 0.786908C2.69505 0.148896 3.04055 -0.15332 3.71826 -0.15332Z", fill: "#113984" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.25973 11.5995L6.23643 5.36045C6.32281 4.81646 6.61515 4.54782 7.20649 4.54782H12.7877C13.7112 4.54782 14.4554 4.69557 15.0401 4.96421C14.4819 8.799 12.0236 10.9347 8.80775 10.9347H6.06368C5.6916 10.9347 5.42583 11.1227 5.25973 11.5995Z", fill: "#172C70" })));
 
 const style$4 = {
   CardContainer: {
@@ -3498,12 +3498,12 @@ function PayoutDetailsCardView(props) {
   const { classes } = sheet;
   const { states, text } = props;
   const renderLoadingSkeleton = () => {
-    return (index$1.h("div", { class: classes.CardContainer },
-      index$1.h("div", { class: classes.StatusContainer },
-        index$1.h("sl-skeleton", { class: classes.SkeletonOne }),
-        index$1.h("sl-skeleton", { class: classes.SkeletonTwo })),
-      index$1.h("sl-skeleton", { class: classes.SkeletonThree }),
-      index$1.h("sl-skeleton", { class: classes.SkeletonOne })));
+    return (index.h("div", { class: classes.CardContainer },
+      index.h("div", { class: classes.StatusContainer },
+        index.h("sl-skeleton", { class: classes.SkeletonOne }),
+        index.h("sl-skeleton", { class: classes.SkeletonTwo })),
+      index.h("sl-skeleton", { class: classes.SkeletonThree }),
+      index.h("sl-skeleton", { class: classes.SkeletonOne })));
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";
@@ -3513,7 +3513,7 @@ function PayoutDetailsCardView(props) {
     }, {
       badgeText: status,
     });
-    return (index$1.h("sl-badge", { pill: true, type: badgeType }, statusText));
+    return (index.h("sl-badge", { pill: true, type: badgeType }, statusText));
   };
   const thresholdText = global.intl.formatMessage({
     id: "thresholdText",
@@ -3521,16 +3521,16 @@ function PayoutDetailsCardView(props) {
   }, {
     thresholdBalance: states.thresholdBalance,
   });
-  return (index$1.h("div", { class: classes.Container },
-    index$1.h("style", { type: "text/css" }, styleString),
-    states.error && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", class: classes.Alert, type: "warning", open: true },
-      index$1.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-      index$1.h("div", { class: classes.AlertContent },
-        index$1.h("b", null, text.error.errorTitleText),
+  return (index.h("div", { class: classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    states.error && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", class: classes.Alert, type: "warning", open: true },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
+      index.h("div", { class: classes.AlertContent },
+        index.h("b", null, text.error.errorTitleText),
         text.error.errorDescriptionText))),
-    states.loading ? (renderLoadingSkeleton()) : (index$1.h("div", { class: classes.CardContainer },
-      index$1.h("div", { class: classes.StatusContainer },
-        index$1.h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"
+    states.loading ? (renderLoadingSkeleton()) : (index.h("div", { class: classes.CardContainer },
+      index.h("div", { class: classes.StatusContainer },
+        index.h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"
           ? states.thresholdBalance
             ? thresholdText
             : ""
@@ -3538,18 +3538,18 @@ function PayoutDetailsCardView(props) {
         states.badgeStatus === "thresholdPayout"
           ? null
           : renderStatusBadge(states.badgeStatus, text.statusBadgeText)),
-      index$1.h("h1", { class: classes.MainCurrency }, states.balance),
-      states.payoutType === "PAYPAL" ? (index$1.h("div", { class: classes.PaypalDetailsContainer },
-        index$1.h("span", { class: classes.PaypalEmail }, states.paypalEmailAddress),
-        index$1.h(PayPalIcon, null))) : (index$1.h("div", { class: classes.AccountDetailsContainer },
-        index$1.h("span", null, states.cardNumberPreview
+      index.h("h1", { class: classes.MainCurrency }, states.balance),
+      states.payoutType === "PAYPAL" ? (index.h("div", { class: classes.PaypalDetailsContainer },
+        index.h("span", { class: classes.PaypalEmail }, states.paypalEmailAddress),
+        index.h(PayPalIcon, null))) : (index.h("div", { class: classes.AccountDetailsContainer },
+        index.h("span", null, states.cardNumberPreview
           ? `${text.accountText} ${states.cardNumberPreview}`
           : text.payoutMissingInformationText)))))));
 }
 
 function usePayoutDetailsCard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const { data, loading } = index_module.qn(USER_QUERY_NAMESPACE);
+  const { data, loading } = index_module.Mn(USER_QUERY_NAMESPACE);
   const publisher = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher;
   function getPayoutDetailedStatusText(paymentDay) {
     var _a;
@@ -3607,7 +3607,7 @@ function usePayoutDetailsCard(props) {
 
 const PayoutDetailsCard = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * Badge text indicating payout status
      * @uiName Payout badge status text
@@ -3638,7 +3638,7 @@ const PayoutDetailsCard = class {
      * @uiName Payout missing information subtext
      */
     this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -3655,7 +3655,7 @@ const PayoutDetailsCard = class {
     const props = index_module.isDemo()
       ? useDemoPayoutDetailsCard(this)
       : usePayoutDetailsCard(this);
-    return (index$1.h(index$1.Host, null, index$1.h(PayoutDetailsCardView, { text: props.text, states: props.states })));
+    return (index.h(index.Host, null, index.h(PayoutDetailsCardView, { text: props.text, states: props.states })));
   }
 };
 function useDemoPayoutDetailsCard(props) {
@@ -3681,27 +3681,27 @@ function useDemoPayoutDetailsCard(props) {
 
 const TableCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /** @uiName Column span  */
     this.colspan = 1;
     /** @uiName Padding */
     this.padding = "15px 10px";
   }
   render() {
-    return (index$1.h(index$1.Host, { style: { display: "contents" } }, index$1.h("td", { colSpan: this.colspan, style: { padding: this.padding } }, index$1.h("slot", null))));
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h("td", { colSpan: this.colspan, style: { padding: this.padding } }, index.h("slot", null))));
   }
 };
 
 const TableRow = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * @uiName Border
      */
     this.border = "1px solid #EAEAEA";
   }
   render() {
-    return (index$1.h(index$1.Host, { style: { display: "contents" } }, index$1.h("tr", { style: { border: this.border } }, index$1.h("slot", null))));
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h("tr", { style: { border: this.border } }, index.h("slot", null))));
   }
 };
 
@@ -3738,21 +3738,21 @@ function getCurrentStep(user) {
 }
 function useTaxAndCash() {
   var _a, _b, _c, _d, _e;
-  const host = index_module.T();
-  const user = index_module.K();
-  const locale = index_module.Q();
+  const host = index_module._();
+  const user = index_module.Q();
+  const locale = index_module.L();
   // State for current step of form
-  const [step, setStep] = index_module.Fn({
+  const [step, setStep] = index_module.Cn({
     namespace: TAX_CONTEXT_NAMESPACE,
     initialValue: "/loading",
   });
   // State for when to hide steps, or override certain actions
-  const [context, _setContext] = index_module.Fn({
+  const [context, _setContext] = index_module.Cn({
     namespace: TAX_FORM_CONTEXT_NAMESPACE,
     initialValue: {},
   });
   // State to carry user form information into step 2
-  const [userFormContext, _setUserFormContext] = index_module.Fn({
+  const [userFormContext, _setUserFormContext] = index_module.Cn({
     namespace: USER_FORM_CONTEXT_NAMESPACE,
     initialValue: {
       firstName: undefined,
@@ -3762,19 +3762,19 @@ function useTaxAndCash() {
       currency: undefined,
     },
   });
-  const [_currenciesContext, setCurrenciesContext] = index_module.Fn({
+  const [_currenciesContext, setCurrenciesContext] = index_module.Cn({
     namespace: CURRENCIES_NAMESPACE,
     initialValue: [],
   });
-  const [_countriesContext, _setCountriesContext] = index_module.Fn({
+  const [_countriesContext, _setCountriesContext] = index_module.Cn({
     namespace: COUNTRIES_NAMESPACE,
     initialValue: [],
   });
-  const [_sortedCountriesContext, setSortedCountriesContext] = index_module.Fn({
+  const [_sortedCountriesContext, setSortedCountriesContext] = index_module.Cn({
     namespace: SORTED_COUNTRIES_NAMESPACE,
     initialValue: [],
   });
-  const { data, errors } = index_module.An({
+  const { data, errors } = index_module.Fn({
     namespace: USER_QUERY_NAMESPACE,
     query: GET_USER,
     skip: !user,
@@ -3784,12 +3784,12 @@ function useTaxAndCash() {
   });
   const countryCode = ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.countryCode) ||
     userFormContext.countryCode;
-  index_module.An({
+  index_module.Fn({
     namespace: COUNTRIES_QUERY_NAMESPACE,
     query: GET_COUNTRIES,
     skip: !user,
   });
-  const { data: financeNetworkData, refetch } = index_module.An({
+  const { data: financeNetworkData, refetch } = index_module.Fn({
     namespace: FINANCE_NETWORK_SETTINGS_NAMESPACE,
     query: GET_FINANCE_NETWORK_SETTINGS,
     skip: !user,
@@ -3797,7 +3797,7 @@ function useTaxAndCash() {
       filter: getFinanceNetworkFilter(),
     },
   });
-  const { data: currenciesData } = index_module.An({
+  const { data: currenciesData } = index_module.Fn({
     namespace: CURRENCIES_QUERY_NAMESPACE,
     query: GET_CURRENCIES,
     skip: !user,
@@ -3878,14 +3878,14 @@ function useTaxAndCash() {
     step,
     setStep,
     context,
-    namespace: index_module.$n(TAX_CONTEXT_NAMESPACE),
+    namespace: index_module.Pn(TAX_CONTEXT_NAMESPACE),
     loading: step === "/loading",
   };
 }
 
 const TaxAndCashMonolith = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /*---------------------------------------------------------------------------------
       !IMPORTANT!: Make sure to also change the prop names in the respective component
     -----------------------------------------------------------------------------------*/
@@ -4168,6 +4168,11 @@ const TaxAndCashMonolith = class {
      * @uiGroup Step 3 Properties
      */
     this.step3_refreshButton = "Refresh Page";
+    /**
+     * @uiName Exit button text
+     * @uiGroup Step 3 Properties
+     */
+    this.step3_exitButton = "Exit";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                       STEP 4 PROPS:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -4764,7 +4769,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup General Form Properties
      */
     this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   // this field is required prop
@@ -4795,31 +4800,31 @@ const TaxAndCashMonolith = class {
     // @ts-ignore
     if ((_a = this.demoData) === null || _a === void 0 ? void 0 : _a.showTextProps) {
       const textProps = utils.getProps(this);
-      return (index$1.h("div", null, (_b = Object.keys(textProps)) === null || _b === void 0 ? void 0 : _b.map((prop) => {
+      return (index.h("div", null, (_b = Object.keys(textProps)) === null || _b === void 0 ? void 0 : _b.map((prop) => {
         if (prop === "demoData")
           return;
-        return (index$1.h("div", null, index$1.h("b", null, prop, ":"), " ", this[prop], index$1.h("hr", null)));
+        return (index.h("div", null, index.h("b", null, prop, ":"), " ", this[prop], index.h("hr", null)));
       })));
     }
     switch (props.step) {
       case "/1":
-        return (index$1.h("sqm-user-info-form", Object.assign({}, this.getGeneralStepTextProps("step1_"))));
+        return (index.h("sqm-user-info-form", Object.assign({}, this.getGeneralStepTextProps("step1_"))));
       case "/2":
-        return (index$1.h("sqm-indirect-tax-form", Object.assign({}, this.getGeneralStepTextProps("step2_"))));
+        return (index.h("sqm-indirect-tax-form", Object.assign({}, this.getGeneralStepTextProps("step2_"))));
       case "/3":
-        return (index$1.h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"))));
+        return (index.h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"))));
       case "/4":
-        return (index$1.h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
+        return (index.h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (index$1.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
+        return (index.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
       case "/error":
-        return (index$1.h(sqmInvoiceTableView.ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: this.loadingErrorAlertDescription }));
+        return (index.h(sqmInvoiceTableView.ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: this.loadingErrorAlertDescription }));
     }
-    return index$1.h(sqmInvoiceTableView.LoadingView, null);
+    return index.h(sqmInvoiceTableView.LoadingView, null);
   }
 };
 function useDemoTaxAndCash(props) {
-  const [step, setStep] = index_module.Fn({
+  const [step, setStep] = index_module.Cn({
     namespace: TAX_CONTEXT_NAMESPACE,
     initialValue: "/1",
   });
@@ -4990,17 +4995,17 @@ const TaxAndCashDashboardView = (props) => {
   var _a;
   const { states, text, callbacks, slots } = props;
   const statusMap = {
-    NOT_VERIFIED: (index$1.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index$1.h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
-      index$1.h("p", null, global.intl.formatMessage({
+    NOT_VERIFIED: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
+      index.h("p", null, global.intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
-    ACTIVE: (index$1.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index$1.h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
-      index$1.h("p", null, global.intl.formatMessage({
+    ACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
+      index.h("p", null, global.intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
           ? text.badgeTextSubmittedOn
@@ -5008,14 +5013,14 @@ const TaxAndCashDashboardView = (props) => {
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
-    INACTIVE: (index$1.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index$1.h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
-      index$1.h("p", null, text.invalidForm))),
+    INACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
+      index.h("p", null, text.invalidForm))),
   };
   const alertMap = {
-    INACTIVE: (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
-      index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      index$1.h("strong", null, global.intl.formatMessage({
+    INACTIVE: (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, global.intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
         defaultMessage: states.documentType === "W9"
           ? text.taxAlertHeaderNotActiveW9
@@ -5023,7 +5028,7 @@ const TaxAndCashDashboardView = (props) => {
       }, {
         documentType: states.documentTypeString,
       })),
-      index$1.h("br", null),
+      index.h("br", null),
       global.intl.formatMessage({
         id: `taxAlertMessage`,
         defaultMessage: states.documentType === "W9"
@@ -5061,66 +5066,66 @@ const TaxAndCashDashboardView = (props) => {
       });
     }
   };
-  return (index$1.h("div", null,
-    index$1.h("div", null,
-      index$1.h("style", { type: "text/css" }, styleString$4),
-      states.loadingError && (index$1.h("div", null,
-        index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
-          index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-          index$1.h("strong", null, text.error.loadingErrorAlertHeader),
-          index$1.h("br", null),
+  return (index.h("div", null,
+    index.h("div", null,
+      index.h("style", { type: "text/css" }, styleString$4),
+      states.loadingError && (index.h("div", null,
+        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
+          index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          index.h("strong", null, text.error.loadingErrorAlertHeader),
+          index.h("br", null),
           text.error.loadingErrorAlertDescription))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
-        index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index$1.h("strong", null, text.error.generalTitle),
-        index$1.h("br", null),
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.generalTitle),
+        index.h("br", null),
         text.error.generalDescription)),
-      index$1.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
-        index$1.h("p", null, text.replaceTaxFormModalBodyText),
-        index$1.h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
-        index$1.h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+      index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
+        index.h("p", null, text.replaceTaxFormModalBodyText),
+        index.h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        index.h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
-      index$1.h("div", null,
-        index$1.h("h3", null, text.bankingInformationSectionHeader),
-        index$1.h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
-        index$1.h("div", { class: sheet$4.classes.BankingInformationContainer },
+      index.h("div", null,
+        index.h("h3", null, text.bankingInformationSectionHeader),
+        index.h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
+        index.h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
-          !states.loading && (index$1.h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (index$1.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
-      index$1.h("div", { class: sheet$4.classes.TaxDocumentsContainer },
-        index$1.h("div", null, states.loading ? (index$1.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-          index$1.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
-          index$1.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index$1.h("div", null, states.noFormNeeded ? (index$1.h("div", null,
-          index$1.h("h3", { class: sheet$4.classes.TaxDocumentsSectionHeaderContainer }, text.taxDocumentSectionHeader),
-          index$1.h("p", { class: sheet$4.classes.TaxDocSubtext }, text.noFormNeededSubtext))) : (index$1.h("div", null,
-          index$1.h("span", { class: sheet$4.classes.TaxFormDetailsContainer },
-            index$1.h("div", { class: sheet$4.classes.StatusContainer },
-              index$1.h("h3", null, global.intl.formatMessage({
+          !states.loading && (index.h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
+          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+      index.h("div", { class: sheet$4.classes.TaxDocumentsContainer },
+        index.h("div", null, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
+          index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+          index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null, states.noFormNeeded ? (index.h("div", null,
+          index.h("h3", { class: sheet$4.classes.TaxDocumentsSectionHeaderContainer }, text.taxDocumentSectionHeader),
+          index.h("p", { class: sheet$4.classes.TaxDocSubtext }, text.noFormNeededSubtext))) : (index.h("div", null,
+          index.h("span", { class: sheet$4.classes.TaxFormDetailsContainer },
+            index.h("div", { class: sheet$4.classes.StatusContainer },
+              index.h("h3", null, global.intl.formatMessage({
                 id: "section-subheader",
                 defaultMessage: text.taxDocumentSectionSubHeader,
               }, {
                 documentType: states.documentTypeString,
               })),
-              index$1.h("span", { class: sheet$4.classes.StatusAlert }, statusMap[states.status]))),
-          index$1.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$4.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton))))))),
-      index$1.h("div", { class: sheet$4.classes.IndirectTaxPreviewContainer }, states.loading ? (index$1.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-        index$1.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
-        index$1.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index$1.h("div", null,
-        index$1.h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
+              index.h("span", { class: sheet$4.classes.StatusAlert }, statusMap[states.status]))),
+          states.status !== "NOT_VERIFIED" && (index.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$4.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+      index.h("div", { class: sheet$4.classes.IndirectTaxPreviewContainer }, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
+        index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+        index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
+        index.h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          index$1.h("sl-tooltip", { trigger: "hover", placement: "top", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            index$1.h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
-        index$1.h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
-          index$1.h("span", null, states.notRegistered ? (index$1.h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, text.notRegisteredForTax)) : (getIndirectTaxRegisteredIn())),
-          !states.notRegistered && (index$1.h("div", { class: sheet$4.classes.TaxNumberContainer },
-            index$1.h("span", null, global.intl.formatMessage({
+          index.h("sl-tooltip", { trigger: "hover", placement: "top", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
+            index.h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+        index.h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
+          index.h("span", null, states.notRegistered ? (index.h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, text.notRegisteredForTax)) : (getIndirectTaxRegisteredIn())),
+          !states.notRegistered && (index.h("div", { class: sheet$4.classes.TaxNumberContainer },
+            index.h("span", null, global.intl.formatMessage({
               id: `indirectTaxDetails`,
               defaultMessage: text.indirectTaxDetails,
             }, {
               indirectTaxType: states.indirectTaxType,
               indirectTaxNumber: states.indirectTaxNumber,
             })),
-            index$1.h("span", null,
+            index.h("span", null,
               states.qstNumber &&
                 global.intl.formatMessage({
                   id: `qstNumber`,
@@ -5135,14 +5140,14 @@ const TaxAndCashDashboardView = (props) => {
                 }, {
                   subRegionTaxNumber: states.subRegionTaxNumber,
                 })))),
-          !states.notRegistered && (index$1.h("div", { class: sheet$4.classes.InvoiceTableContainer },
-            index$1.h("sqm-invoice-table", { description: text.invoiceDescription, "prev-label": text.invoicePrevLabel, "more-label": text.invoiceMoreLabel, header: text.invoiceHeader, "empty-state-header": text.invoiceEmptyStateHeader, "empty-state-text": text.invoiceEmptyStateText },
-              index$1.h("sqm-invoice-table-download-column", null),
-              index$1.h("sqm-invoice-table-date-column", { "column-title": text.dateColumnTitle }),
-              index$1.h("sqm-invoice-table-data-column", { "column-title": text.invoiceColumnTitle, property: "invoiceId" }),
-              index$1.h("sqm-invoice-table-data-column", { "column-title": text.earningsColumnTitle, property: "earnings" }),
-              index$1.h("sqm-invoice-table-data-column", { "column-title": text.indirectTaxColumnTitle, property: "indirectTax" }),
-              index$1.h("sqm-invoice-table-data-column", { "column-title": text.earningsAfterTaxColumnTitle, property: "netEarnings" })))))))))));
+          !states.notRegistered && (index.h("div", { class: sheet$4.classes.InvoiceTableContainer },
+            index.h("sqm-invoice-table", { description: text.invoiceDescription, "prev-label": text.invoicePrevLabel, "more-label": text.invoiceMoreLabel, header: text.invoiceHeader, "empty-state-header": text.invoiceEmptyStateHeader, "empty-state-text": text.invoiceEmptyStateText },
+              index.h("sqm-invoice-table-download-column", null),
+              index.h("sqm-invoice-table-date-column", { "column-title": text.dateColumnTitle }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.invoiceColumnTitle, property: "invoiceId" }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.earningsColumnTitle, property: "earnings" }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.indirectTaxColumnTitle, property: "indirectTax" }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.earningsAfterTaxColumnTitle, property: "netEarnings" })))))))))));
 };
 
 function getCountryName(countryCode, locale) {
@@ -5181,15 +5186,15 @@ function getIndirectTaxType(taxInformation) {
 }
 const useTaxAndCashDashboard = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
-  const setContext = index_module.Sn(TAX_FORM_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
+  const setContext = index_module.wn(TAX_FORM_CONTEXT_NAMESPACE);
   const [showDialog, setShowDialog] = stencilHooks_module.useState(false);
-  const locale = index_module.Q();
+  const locale = index_module.L();
   stencilHooks_module.useEffect(() => {
     // Clear override context once on submitted
     setContext({});
   }, []);
-  const { data, loading, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
+  const { data, loading, errors: userError, } = index_module.Mn(USER_QUERY_NAMESPACE);
   const publisher = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher;
   const documentType = publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType;
   const submissionDate = (_c = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _c === void 0 ? void 0 : _c.dateCreated;
@@ -5248,7 +5253,7 @@ const useTaxAndCashDashboard = (props) => {
 
 const TaxAndCashDashboard = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * @uiName Active tax form badge label
      */
@@ -5508,7 +5513,7 @@ const TaxAndCashDashboard = class {
      * @uiName Cancel button label
      */
     this.cancelButton = "Cancel";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -5527,8 +5532,8 @@ const TaxAndCashDashboard = class {
     const props = index_module.isDemo()
       ? useDemoTaxAndCashDashboard(this)
       : useTaxAndCashDashboard(this);
-    return (index$1.h(index$1.Host, null, index$1.h(TaxAndCashDashboardView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {
-        payoutDetailsCardSlot: (index$1.h("sqm-payout-details-card", Object.assign({}, this.getTextProps()))),
+    return (index.h(index.Host, null, index.h(TaxAndCashDashboardView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {
+        payoutDetailsCardSlot: (index.h("sqm-payout-details-card", Object.assign({}, this.getTextProps()))),
       } })));
   }
 };
@@ -6606,6 +6611,27 @@ const style$6 = {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
+  PhoneInputsSection: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    gap: "4px",
+    "& p": {
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-input-label-color)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+  },
+  PhoneInputsContainer: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "4px",
+    width: "100%",
+    "& #phoneNumber": {
+      width: "100%",
+      minWidth: "0px",
+    },
+  },
 };
 const sheet$5 = JSS.createStyleSheet(style$6);
 const styleString$5 = sheet$5.toString();
@@ -6631,7 +6657,7 @@ const vanillaStyle$3 = `
     }
 
     sl-select#phoneNumberCountryCode::part(menu) {
-      width: 450px;
+      min-width: 250px;
     }
   `;
 const UserInfoFormView = (props) => {
@@ -6642,7 +6668,7 @@ const UserInfoFormView = (props) => {
     id: "bankingCollectionText",
     defaultMessage: text.allowBankingCollection,
   }, {
-    termsAndConditionsLink: (index$1.h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
+    termsAndConditionsLink: (index.h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
   });
   let regionLabel = undefined;
   switch (data.regionLabelEnum) {
@@ -6658,94 +6684,96 @@ const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
-  return (index$1.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-    index$1.h("style", { type: "text/css" },
+  return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    index.h("style", { type: "text/css" },
       styleString$5,
       vanillaStyle$3),
-    states.loadingError && (index$1.h("div", null,
-      index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.AlertContainer },
-        index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index$1.h("strong", null, text.error.loadingErrorAlertHeader),
-        index$1.h("br", null),
+    states.loadingError && (index.h("div", null,
+      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.AlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.loadingErrorAlertHeader),
+        index.h("br", null),
         text.error.loadingErrorAlertDescription),
-      index$1.h("br", null))),
-    states.loading ? (index$1.h(sqmInvoiceTableView.GeneralLoadingView, null)) : (index$1.h("div", null,
-      index$1.h("div", { class: classes.TextContainer },
-        index$1.h("div", null,
-          !states.hideSteps && (index$1.h("p", null, global.intl.formatMessage({
+      index.h("br", null))),
+    states.loading ? (index.h(sqmInvoiceTableView.GeneralLoadingView, null)) : (index.h("div", null,
+      index.h("div", { class: classes.TextContainer },
+        index.h("div", null,
+          !states.hideSteps && (index.h("p", null, global.intl.formatMessage({
             id: "formStep",
             defaultMessage: text.formStep,
           }, { step: states.step, count: FORM_STEPS }))),
-          index$1.h("h3", null, text.personalInformation),
-          index$1.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$5.classes.AlertContainer },
-        index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index$1.h("strong", null, text.error.generalTitle),
-        index$1.h("br", null),
+          index.h("h3", null, text.personalInformation),
+          index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$5.classes.AlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.generalTitle),
+        index.h("br", null),
         text.error.generalDescription)),
-      (states.isPartner || states.isUser) && (index$1.h("sl-alert", { type: "primary", open: true, class: sheet$5.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
-        index$1.h("sl-icon", { slot: "icon", name: "info-circle" }),
-        index$1.h("strong", null, text.isPartnerAlertHeader),
-        index$1.h("br", null),
+      (states.isPartner || states.isUser) && (index.h("sl-alert", { type: "primary", open: true, class: sheet$5.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+        index.h("sl-icon", { slot: "icon", name: "info-circle" }),
+        index.h("strong", null, text.isPartnerAlertHeader),
+        index.h("br", null),
         text.isPartnerAlertDescription)),
-      index$1.h("div", null,
-        index$1.h("div", { class: classes.InputContainer },
-          index$1.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) ? {
+      index.h("div", null,
+        index.h("div", { class: classes.InputContainer },
+          index.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: sqmInvoiceTableView.formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
-          index$1.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) ? {
+          index.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: sqmInvoiceTableView.formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
-          index$1.h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
-          index$1.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) ? {
+          index.h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
+          index.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: sqmInvoiceTableView.formatErrorMessage(text.country, formState.errors.countryCode),
           }
             : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("countryCode", e) }),
-            index$1.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+            index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
                 // Stop shoelace intercepting key presses
                 e.stopPropagation();
               }, "onSl-input": (e) => {
                 callbacks.setCountrySearch(e.target.value);
               } }), (_e = data === null || data === void 0 ? void 0 : data.countries) === null || _e === void 0 ? void 0 :
-            _e.map((c) => (index$1.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) => (index$1.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
-          index$1.h("div", { style: { display: "flex", gap: "4px", alignItems: "flex-end" } },
-            index$1.h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", label: text.phoneNumber, style: { minWidth: "120px" }, 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) }),
-              index$1.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
-                  // Stop shoelace intercepting key presses
-                  e.stopPropagation();
-                }, "onSl-input": (e) => {
-                  callbacks.setPhoneCountrySearch(e.target.value);
-                } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
-              _h.map((c) => {
-                var _a, _b;
-                return (index$1.h("sl-menu-item", { style: { width: "500px" }, value: c.countryCode },
-                  index$1.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));
-              }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
-              _j.map((c) => {
-                var _a, _b;
-                return (index$1.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
-                  index$1.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));
-              })),
-            index$1.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
-              sqmInvoiceTableView.validateBillingField(/[a-zA-Z]+/, value) &&
-                sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
-              class: classes.ErrorInput,
-              helpText: sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
-            }
-              : {}), { required: true }))),
-          index$1.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
+            _e.map((c) => (index.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) => (index.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
+          index.h("div", { class: classes.PhoneInputsSection },
+            index.h("p", null, text.phoneNumber),
+            index.h("div", { class: classes.PhoneInputsContainer },
+              index.h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", 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) }),
+                index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+                    // Stop shoelace intercepting key presses
+                    e.stopPropagation();
+                  }, "onSl-input": (e) => {
+                    callbacks.setPhoneCountrySearch(e.target.value);
+                  } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
+                _h.map((c) => {
+                  var _a, _b;
+                  return (index.h("sl-menu-item", { value: c.countryCode },
+                    index.h("div", { slot: "prefix" }, `${(_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));
+                }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
+                _j.map((c) => {
+                  var _a, _b;
+                  return (index.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
+                    index.h("div", { slot: "prefix" }, `${(_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));
+                })),
+              index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => 
+                // Naive phone number validation
+                sqmInvoiceTableView.validateBillingField(/[a-zA-Z]+/, value) &&
+                  sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+                class: classes.ErrorInput,
+                helpText: sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
+              }
+                : {}), { required: true })))),
+          index.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
             !sqmInvoiceTableView.validateBillingField(/^[\x20-\xFF]+$/, value) &&
               sqmInvoiceTableView.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
@@ -6753,7 +6781,7 @@ const UserInfoFormView = (props) => {
             helpText: sqmInvoiceTableView.formatErrorMessage(text.address, formState.errors.address),
           }
             : {}), { required: true })),
-          index$1.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
+          index.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
             !sqmInvoiceTableView.validateBillingField(/^[\x20-\xFF]+$/, value) &&
               sqmInvoiceTableView.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
@@ -6761,41 +6789,41 @@ const UserInfoFormView = (props) => {
             helpText: sqmInvoiceTableView.formatErrorMessage(text.city, formState.errors.city),
           }
             : {}), { required: true })),
-          !states.hideState && (index$1.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 && (index.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: sqmInvoiceTableView.formatErrorMessage(text.state, formState.errors.state),
           }
-            : {}), { required: true }), (_p = data.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (index$1.h("sl-menu-item", { value: r.value }, r.label))))),
-          index$1.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) ? {
+            : {}), { required: true }), (_p = data.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (index.h("sl-menu-item", { value: r.value }, r.label))))),
+          index.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: sqmInvoiceTableView.formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          index$1.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) ? {
+          index.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: sqmInvoiceTableView.formatErrorMessage(text.currency, formState.errors.currency),
           }
             : {}), { required: true, ref: (el) => (refs.currencyRef.current = el) }),
-            index$1.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCurrencyText, onKeyDown: (e) => {
+            index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCurrencyText, onKeyDown: (e) => {
                 // Stop shoelace intercepting key presses
                 e.stopPropagation();
               }, "onSl-input": (e) => {
                 callbacks.setCurrencySearch(e.target.value);
               } }), (_s = data === null || data === void 0 ? void 0 : data.currencies) === null || _s === void 0 ? void 0 :
-            _s.map((c) => (index$1.h("sl-menu-item", { value: c.currencyCode },
+            _s.map((c) => (index.h("sl-menu-item", { value: c.currencyCode },
               c.currencyCode,
               " - ",
               c.displayName))), (_t = data === null || data === void 0 ? void 0 : data.allCurrencies) === null || _t === void 0 ? void 0 :
-            _t.map((c) => (index$1.h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
+            _t.map((c) => (index.h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
               c.currencyCode,
               " - ",
               c.displayName)))),
-          index$1.h("div", { class: classes.CheckboxWrapper },
-            index$1.h("sl-checkbox", { exportparts: "label: input-label, base: input-base", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+          index.h("div", { class: classes.CheckboxWrapper },
+            index.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) && (index$1.h("p", { class: classes.ErrorText }, sqmInvoiceTableView.formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),
-        index$1.h("sl-button", { type: "primary", disabled: states.isPartner ? false : states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
+            ((_u = formState.errors) === null || _u === void 0 ? void 0 : _u.allowBankingCollection) && (index.h("p", { class: classes.ErrorText }, sqmInvoiceTableView.formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),
+        index.h("sl-button", { type: "primary", disabled: states.isPartner ? false : states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
 };
 
 function useUserInfoForm(props) {
@@ -6803,12 +6831,12 @@ function useUserInfoForm(props) {
   const currencyRef = stencilHooks_module.useRef(undefined);
   const phoneCountryRef = stencilHooks_module.useRef(undefined);
   const formRef = stencilHooks_module.useRef(null);
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const countries = index_module.Dn(SORTED_COUNTRIES_NAMESPACE);
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const [userFormContext, setUserFormContext] = index_module.Mn(USER_FORM_CONTEXT_NAMESPACE);
-  const { data, loading, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
-  const _currencies = index_module.Dn(CURRENCIES_NAMESPACE);
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const countries = index_module.In(SORTED_COUNTRIES_NAMESPACE);
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const [userFormContext, setUserFormContext] = index_module.bn(USER_FORM_CONTEXT_NAMESPACE);
+  const { data, loading, errors: userError, } = index_module.Mn(USER_QUERY_NAMESPACE);
+  const _currencies = index_module.In(CURRENCIES_NAMESPACE);
   const currencies = stencilHooks_module.useMemo(() => [...(_currencies || [])].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
   const [countrySearch, setCountrySearch] = stencilHooks_module.useState("");
   const [phoneCountrySearch, setPhoneCountrySearch] = stencilHooks_module.useState("");
@@ -6992,7 +7020,7 @@ function useUserInfoForm(props) {
 
 const TaxForm = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
      * @uiName First name field label
@@ -7140,7 +7168,7 @@ const TaxForm = class {
      * @uiName Page description
      */
     this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -7160,7 +7188,7 @@ const TaxForm = class {
   }
   render() {
     const props = index_module.isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (index$1.h(index$1.Host, null, index$1.h(UserInfoFormView, { data: props.data,
+    return (index.h(index.Host, null, index.h(UserInfoFormView, { data: props.data,
       // @ts-ignore
       states: props.states, callbacks: {
         ...props.callbacks,
@@ -7169,7 +7197,7 @@ const TaxForm = class {
   }
 };
 function useDemoUserInfoForm(props) {
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   return cjs.cjs({
     setStep,
     onSubmit: () => {