@saasquatch/mint-components 1.15.0-5 → 1.15.0-50

package/dist/esm/{sqm-banking-info-form_17.entry.js → sqm-banking-info-form_10.entry.js}

@@ -1,149 +1,29 @@
-import { h, r as registerInstance, c as Host, g as getElement } from './index-91e7729f.js';
-import { m as useRef, k as useState, f as useEffect, n as h$1, l, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-7b65dcb8.js';
-import { d as dist, _, L, J, t as Pn, F as Fn, x as $n, $ as $e, i as isDemo, q as En, u as useCallback, R as Rn, M as Mn, I as In, S as Sn } from './index.module-89a79f66.js';
+import { h, r as registerInstance, c as Host, g as getElement } from './index-b3a06de8.js';
+import { m as useRef, k as useState, f as useEffect, n as h$1, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-20ad2b5f.js';
+import { i as intl } from './global-64286824.js';
+import { d as dist, _, L, J, t as Pn, F as Fn, x as $n, $ as $e, i as isDemo, q as En, u as useCallback, R as Rn } from './index.module-d49ae5e7.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps, l as luxonLocale } from './utils-334c1e34.js';
+import { g as getProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { E as ErrorStyles } from './mixins-83f90fa1.js';
-import { G as GenericTableView } from './GenericTableView-e7addb2b.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-cc945f38.js';
-import { u as useChildElements } from './useChildElements-7945ae56.js';
-import { l as luxon } from './luxon-8d51c92b.js';
-import { g as generateUserError } from './useReferralTable-b3876ed6.js';
-import { T as TextSpanView } from './sqm-text-span-view-c577cc60.js';
-import { E as ErrorView } from './ErrorView-48e2b969.js';
-import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-0f0a7386.js';
-import { e as extractProps } from './extractProps-ae1afbb3.js';
-import { b as VERIFICATION_EVENT_KEY, V as VERIFICATION_EMAIL_NAMESPACE, S as SHOW_CODE_NAMESPACE, a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
-import { T as TAX_FORM_UPDATED_EVENT_KEY, a as useVeriffApp, g as getStatus, V as VERIFF_COMPLETE_EVENT_KEY } from './usePayoutStatus-58aa56b4.js';
-import { u as useVerificationEmail } from './useVerificationEmail-edc318cb.js';
-
-const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
-const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
-const USER_QUERY_NAMESPACE = "sq:user-info-query";
-const USER_FORM_CONTEXT_NAMESPACE = "sq:user-form-context";
-const FINANCE_NETWORK_SETTINGS_NAMESPACE = "sq:finance-network-settings";
-const COUNTRIES_NAMESPACE = "sq:countries:list";
-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 = dist.gql `
-  query getUserTaxInfo {
-    user: viewer {
-      ... on User {
-        id
-        firstName
-        lastName
-        email
-        countryCode
-        customFields
-        managedIdentity {
-          uid
-          email
-          emailVerified
-        }
-        impactConnection {
-          connected
-          user {
-            firstName
-            lastName
-          }
-          publisher {
-            id
-            brandedSignup
-            countryCode
-            currency
-            billingAddress
-            billingCity
-            billingState
-            billingCountryCode
-            billingPostalCode
-            phoneNumberCountryCode
-            phoneNumber
-            taxInformation {
-              indirectTaxId
-              indirectTaxCountryCode
-              indirectTaxRegion
-              additionalTaxId
-              withholdingTaxId
-              withholdingTaxCountryCode
-            }
-            requiredTaxDocumentType
-            currentTaxDocument {
-              status
-              type
-              dateCreated
-            }
-            withdrawalSettings {
-              paymentMethod
-              paypalEmailAddress
-              bankCountry
-              bankAccountNumber
-              paymentSchedulingType
-              paymentThreshold
-              paymentDay
-            }
-            payoutsAccount {
-              hold
-              holdReasons
-              balance
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-const GET_COUNTRIES = dist.gql `
-  query getCountries {
-    impactPayoutCountries(limit: 1000) {
-      data {
-        countryCode
-        displayName
-      }
-    }
-  }
-`;
-const GET_CURRENCIES = dist.gql `
-  query currencies($locale: RSLocale) {
-    currencies(limit: 300) {
-      data {
-        displayName(locale: $locale)
-        currencyCode
-      }
-    }
-  }
-`;
-const GET_FINANCE_NETWORK_SETTINGS = dist.gql `
-  query impactFinanceNetworkSettings(
-    $filter: ImpactFinanceNetworkSettingsFilterInput
-  ) {
-    impactFinanceNetworkSettings(filter: $filter, limit: 1000) {
-      data {
-        countryCode
-        currency
-        defaultFinancePaymentMethodId
-        thresholdOptions
-        withdrawalSettingId
-        internationalEftFee
-        foreignFxFee
-        defaultFxFee
-      }
-      totalCount
-    }
-  }
-`;
-const FORM_STEPS = 4;
+import './mixins-f750863a.js';
+import { G as GenericTableView } from './GenericTableView-dd9be3ea.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-789f9123.js';
+import { u as useChildElements } from './useChildElements-0ca9a015.js';
+import { l as luxon } from './luxon-793b7f13.js';
+import { g as generateUserError } from './useReferralTable-c1511d9d.js';
+import { a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, I as InvoiceTableView, v as vatLabels, A as ADDRESS_REGIONS } from './IndirectTaxDetailsView-2eff2cc8.js';
+import { t as taxTypeToName, v as validTaxDocument, g as getCountryObj, L as LoadingView, f as formatErrorMessage, a as validateBillingField, o as objectIsFull } from './utils-517e9b20.js';
+import { i as FORM_STEPS, a as TAX_FORM_CONTEXT_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, T as TAX_CONTEXT_NAMESPACE, F as FINANCE_NETWORK_SETTINGS_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, d as COUNTRIES_QUERY_NAMESPACE, C as CURRENCIES_NAMESPACE } from './data-ce8ed0ae.js';
+import { b as VERIFICATION_EVENT_KEY } from './keys-406491dc.js';
+import { T as TAX_FORM_UPDATED_EVENT_KEY, a as useVeriffApp, g as getStatus, V as VERIFF_COMPLETE_EVENT_KEY } from './usePayoutStatus-e92a6e43.js';
 
 function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32;
   const { errors, ...formState } = props.states.formState;
   return {
     0: {
-      input: (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: (h("sl-input", Object.assign({ required: true, label: props.text.beneficiaryAccountNameLabel, name: "/beneficiaryAccountName", id: "beneficiaryAccountName", key: "beneficiaryAccountName", type: "text", "help-text": props.text.beneficiaryAccountNameDescription }, (((_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,
@@ -645,6 +525,11 @@ const mockPaymentOptions = {
 };
 
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -675,24 +560,26 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   RadioContainer: {
@@ -701,12 +588,15 @@ const style = {
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Checkbox: {
@@ -720,8 +610,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sl-color-gray-300)",
-    borderBottom: "1px solid var(--sl-color-gray-300)",
+    borderTop: "1px solid var(--sqm-border-color)",
+    borderBottom: "1px solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -743,42 +633,47 @@ const style = {
     width: "16px",
     height: "16px",
     borderRadius: "50%",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
   SmallSkeleton: {
     width: "100px",
     height: "16px",
     borderRadius: "50px",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
   LargeSkeleton: {
     width: "100%",
     maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
-  InfoAlert: {
-    "&::part(base)": {
-      backgroundColor: "transparent",
-      borderTop: "none",
-      border: "none",
+  InfoWarningIcon: {
+    height: "26px",
+    width: "26px",
+  },
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "420px",
     },
-    "&::part(message)": {
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+    "&::part(footer)": {
       display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      marginBottom: "var(--sl-spacing-xx-small)",
       alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-yellow-500)",
+      flex: "1",
     },
   },
-  InfoWarningIcon: {
-    height: "26px",
-    width: "26px",
-  },
+  DialogButton: { margin: "auto", width: "100%" },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -799,12 +694,14 @@ const vanillaStyle = `
 
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
-      border: 1px solid var(--sl-color-danger-500);
-      border-radius: var(--sl-input-border-radius-medium);
+      --sqm-input-border-color: var(--sqm-danger-color-border);
+      --sl-input-border-color: var(--sqm-danger-color-border);
+      --sl-input-border-color-hover: var(--sqm-danger-color-border);  
+      --sl-input-border-color-focus: var(--sqm-danger-color-background);
     }
 
     .error-input::part(help-text) {
-      color: var(--sl-color-danger-500) !important;
+      color: var(--sqm-danger-color-text);
     }
     
   `;
@@ -842,6 +739,12 @@ const BankingInfoFormView = (props) => {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
+    h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
+      h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
+      h("p", null, text.modalDescription),
+      h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, submit: true, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     h("div", { class: classes.TextContainer },
       h("div", null,
         !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -901,8 +804,10 @@ const BankingInfoFormView = (props) => {
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentFixedDaySelectSlot))))),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", onClick: callbacks.onBack }, text.backButton))))));
+        h("sl-button", Object.assign({ type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading }, (states.hideSteps
+          ? { onClick: callbacks.onModalOpen }
+          : { submit: "submit" }), { exportparts: "base: primarybutton-base" }), text.continueButton),
+        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "secondary", onClick: callbacks.onBack }, text.backButton))))));
 };
 
 // Hardcoded in Impact backend
@@ -1004,6 +909,7 @@ function useBankingInfoForm(props) {
   const [paymentScheduleChecked, setPaymentScheduleChecked] = useState(undefined);
   const [countrySearch, setCountrySearch] = useState("");
   const [filteredCountries, setFilteredCountries] = useState(countries || []);
+  const [showModal, setShowModal] = useState(false);
   const currency = ((_c = (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.currency) || "";
   const isPartner = !!((_f = (_e = (_d = userData === null || userData === void 0 ? void 0 : userData.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher) === null || _f === void 0 ? void 0 : _f.withdrawalSettings);
   const feeCap = paypalFeeMap[currency] || "";
@@ -1175,10 +1081,12 @@ function useBankingInfoForm(props) {
     });
     setErrors({ inputErrors: validationErrors });
     if (Object.keys(validationErrors).length) {
+      setShowModal(false);
       return;
     }
     let token = undefined;
     if (isPartner) {
+      setShowModal(false);
       setShowVerification(true);
       token = await new Promise((res) => {
         const cb = (e) => {
@@ -1191,6 +1099,7 @@ function useBankingInfoForm(props) {
       setShowVerification(false);
     }
     await runMutation(formData, token);
+    setShowModal(false);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -1224,6 +1133,8 @@ function useBankingInfoForm(props) {
       setCountrySearch,
       onVerification,
       onVerificationHide: () => onVerification(null),
+      onModalClose: () => setShowModal(false),
+      onModalOpen: () => setShowModal(true),
     },
     states: {
       showVerification,
@@ -1257,6 +1168,7 @@ function useBankingInfoForm(props) {
       bankCountry: formState.bankCountry,
       countrySearch,
       email: (_j = userData === null || userData === void 0 ? void 0 : userData.user) === null || _j === void 0 ? void 0 : _j.email,
+      showModal,
     },
     refs: {
       formRef,
@@ -1341,7 +1253,11 @@ const BankingInfoForm = class {
     /**
      * @uiName Beneficiary account field label
      */
-    this.beneficiaryAccountNameLabel = "Beneficiary account name";
+    this.beneficiaryAccountNameLabel = "Account holder name";
+    /**
+     * @uiName Beneficiary account field description
+     */
+    this.beneficiaryAccountNameDescription = "The beneficiary name of your bank account. Ensure this matches the name on your tax form.";
     /**
      * @uiName Bank account type field label
      */
@@ -1520,6 +1436,18 @@ const BankingInfoForm = class {
      * @uiWidget textArea
      */
     this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    /**
+     * @uiName Information modal title
+     */
+    this.modalTitle = "Important Note";
+    /**
+     * @uiName Information modal description text
+     */
+    this.modalDescription = "Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped.";
+    /**
+     * @uiName Information modal button text
+     */
+    this.modalButtonText = "I understand, update my information";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -1733,6 +1661,7 @@ function useDemoBankingInfoForm(props) {
       currency,
       setCurrency,
       hasPayPal: true,
+      showModal: false,
     },
     callbacks: {
       onVerificationHide: () => { },
@@ -1745,6 +1674,8 @@ function useDemoBankingInfoForm(props) {
       setCountrySearch: () => { },
       onBack: async () => setStep("/dashboard"),
       onVerification: () => { },
+      onModalOpen: () => { },
+      onModalClose: () => { },
     },
     text: props.getTextProps(),
     refs: {
@@ -1753,331 +1684,6 @@ function useDemoBankingInfoForm(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
-  Wrapper: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    maxWidth: "550px",
-  },
-  HeaderContainer: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  InputsContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-    position: "relative",
-    flexDirection: "column",
-  },
-  CodeInputContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-  },
-  CodeInput: {
-    maxWidth: "40px",
-    "&::part(input)": {
-      margin: "0",
-      padding: "0 var(--sl-input-spacing-small)",
-      fontSize: "var(--sl-font-size-large)",
-    },
-  },
-  CodeInputError: {
-    ...ErrorStyles,
-    maxWidth: "40px",
-    "&::part(input)": {
-      margin: "0",
-      padding: "0 var(--sl-input-spacing-small)",
-      fontSize: "var(--sl-font-size-large)",
-    },
-  },
-  ErrorText: {
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-font-size-small)",
-    margin: "0",
-  },
-  ContinueButton: {
-    width: "100%",
-    maxWidth: "100px",
-  },
-  FooterContainer: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  SkeletonOne: {
-    width: "50%",
-    height: "16px",
-  },
-  SkeletonTwo: {
-    width: "30%",
-    height: "34px",
-  },
-  SkeletonThree: {
-    width: "15%",
-    height: "24px",
-  },
-};
-const vanillaStyle$1 = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-
-
-`;
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
-function WidgetCodeVerificationView(props) {
-  const { states, refs, callbacks, text } = props;
-  const resendCodeText = intl.formatMessage({
-    id: "resendCodeText",
-    defaultMessage: text.resendCodeText,
-  }, {
-    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
-        e.preventDefault();
-        callbacks.resendEmail();
-      } }, text.resendCodeLabel)),
-  });
-  const codeResentSuccessfully = intl.formatMessage({
-    id: "codeResentSuccessfully",
-    defaultMessage: text.codeResentSuccessfullyText,
-  }, {
-    email: states.email,
-  });
-  const inputClass = states.verifyFailed
-    ? sheet$1.classes.CodeInputError
-    : sheet$1.classes.CodeInput;
-  return (h("div", { part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle$1,
-      styleString$1),
-    h("div", { class: sheet$1.classes.Wrapper },
-      h("div", { class: sheet$1.classes.HeaderContainer },
-        h(TextSpanView, { type: "p" }, intl.formatMessage({
-          id: `emailHeaderText`,
-          defaultMessage: states.verifyFailed
-            ? text.reverifyCodeHeaderText
-            : text.verifyCodeHeaderText,
-        }, { email: states.email }))),
-      states.emailResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-        h("b", null, codeResentSuccessfully))),
-      h("div", { class: sheet$1.classes.InputsContainer },
-        h("div", { ref: refs.codeWrapperRef, class: sheet$1.classes.CodeInputContainer },
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" })),
-        states.verifyFailed && (h("p", { class: sheet$1.classes.ErrorText }, text.invalidCodeText)),
-        h("sl-button", { class: sheet$1.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
-      h("div", { class: sheet$1.classes.FooterContainer },
-        h(TextSpanView, { type: "p" }, resendCodeText)))));
-}
-
-const VerifyEmailWithCodeMutation = dist.gql `
-  mutation submitImpactPublisherEmail2FACode(
-    $user: UserIdInput!
-    $code: String!
-  ) {
-    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
-      verifiedEmail
-      accessKey
-    }
-  }
-`;
-function useWidgetCodeVerification(props) {
-  const host = l();
-  const [_, setShowCode] = Pn(SHOW_CODE_NAMESPACE);
-  const email = Fn(VERIFICATION_EMAIL_NAMESPACE);
-  const [emailSent, setEmailSent] = useState(false);
-  const [emailResent, setEmailResent] = useState(false);
-  const [codeRef, setCodeRef] = useState(null);
-  const [validationError, setValidationError] = useState(false);
-  const [emailError, setEmailError] = useState(false);
-  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
-  useEffect(() => {
-    if (!codeRef)
-      return;
-    const slInputs = codeRef.querySelectorAll("sl-input");
-    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
-    codeElements.forEach((element, idx) => {
-      element.addEventListener("focus", (e) => {
-        e.target.select();
-      });
-      element.addEventListener("keydown", (e) => {
-        if (e.key === "Backspace" && e.target.value === "") {
-          codeElements[Math.max(0, idx - 1)].focus();
-        }
-      });
-      element.addEventListener("input", (e) => {
-        const input = e.data;
-        if (!input)
-          return;
-        if (idx === codeElements.length - 1) {
-          e.target.value = input.slice(0, 1);
-          return;
-        }
-        if (input.length > 1) {
-          const rest = input.slice(1);
-          e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
-            inputType: "insertFromPaste",
-            data: rest,
-          }));
-        }
-        codeElements[idx + 1].focus();
-      });
-    });
-  }, [codeRef]);
-  const reset = () => {
-    setShowCode(false);
-    setValidationError(false);
-  };
-  const resendEmail = async () => {
-    // UI should only allow this to be called if initialized, but checking just in case
-    if (!initialized)
-      return;
-    const result = await sendEmail();
-    if (!result) {
-      setEmailError(true);
-      return;
-    }
-    if (emailSent)
-      setEmailResent(true);
-    setEmailSent(true);
-  };
-  const submitCode = async () => {
-    const slInputs = codeRef.querySelectorAll("sl-input");
-    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
-    if (codeElements.find((el) => !el.value)) {
-      setValidationError(true);
-      return;
-    }
-    let code = "";
-    codeElements.forEach((element) => {
-      code = `${code}${element.value}`;
-    });
-    // UI should only allow this to be called if initialized, but checking just in case
-    if (!initialized)
-      return;
-    setValidationError(false);
-    const res = await verifyEmail(code);
-    if (res === null || res === void 0 ? void 0 : res.success) {
-      props.onVerification(res.accessKey);
-      reset();
-    }
-    else {
-      setValidationError(true);
-    }
-  };
-  useEffect(() => {
-    // Wait for mutations to be determined from user lookup
-    if (!initialized)
-      return;
-    // email should already exist if user has completed email-verification
-    if (!email)
-      resendEmail();
-    else
-      setEmailSent(true);
-  }, [initialized]);
-  return {
-    refs: {
-      codeWrapperRef: setCodeRef,
-    },
-    states: {
-      email: verificationEmail,
-      emailResent,
-      resendError: sendErrors || verifyErrors,
-      initialiseLoading: !initialized,
-      loading: sendLoading || verifyLoading,
-      verifyFailed: !!validationError,
-    },
-    callbacks: {
-      resendEmail,
-      submitCode,
-    },
-    text: props.getTextProps(),
-  };
-}
-
-const WidgetCodeVerification = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * @uiName Verify code widget header text
-     */
-    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
-    /**
-     * @uiName Reverify code widget header text
-     */
-    this.reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
-    /**
-     * Text displayed under verify button
-     * @uiName Resend code text
-     */
-    this.resendCodeText = "Didn't receive your code? {resendCodeLink}";
-    /**
-     * The link that appears in the resend code link
-     * @uiName Resend code label
-     */
-    this.resendCodeLabel = "Resend code";
-    /**
-     * Link text displayed under verify button
-     * @uiName Resend code text
-     */
-    this.codeResentSuccessfullyText = "Another code has been sent to {email}";
-    /**
-     * Error text displayed under verification input
-     * @uiName Invalid code text
-     */
-    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
-    /**
-     * @uiName Verify code button text
-     */
-    this.verifyText = "Verify";
-    /**
-     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
-     * @uiName Network error message
-     */
-    this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    return getProps(this);
-  }
-  render() {
-    const props = isDemo()
-      ? useDemoWidgetCodeVerification(this)
-      : useWidgetCodeVerification(this);
-    return h(WidgetCodeVerificationView, Object.assign({}, props));
-  }
-};
-function useDemoWidgetCodeVerification(props) {
-  const [emailResent, setEmailResent] = useState(false);
-  const setVerifiedContext = En(VERIFICATION_PARENT_NAMESPACE);
-  return cjs({
-    states: {
-      loading: false,
-      email: "test@example.com",
-      emailResent,
-      resendError: false,
-      verifyFailed: false,
-    },
-    refs: {
-      codeWrapperRef: () => { },
-    },
-    callbacks: {
-      resendEmail: async () => setEmailResent(true),
-      submitCode: async () => setVerifiedContext(true),
-    },
-    text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
 const GET_TAX_DOCUMENT = dist.gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!
@@ -2117,6 +1723,7 @@ function useDocusignForm(props) {
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
   const [showExitButton, setShowExitButton] = useState(false);
+  const [showModal, setShowModal] = useState(true);
   // Only look at current document if it's valid (same as required type)
   const existingDocumentType = 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;
@@ -2212,6 +1819,7 @@ function useDocusignForm(props) {
       documentType: actualDocumentType,
       documentTypeString: taxTypeToName(actualDocumentType),
       showExitButton,
+      showModal,
     },
     data: {
       taxForm: actualDocumentType,
@@ -2222,6 +1830,8 @@ function useDocusignForm(props) {
       completeDocument,
       onExit: progressStep,
       setParticipantType,
+      onModalClose: () => setShowModal(false),
+      onModalOpen: () => setShowModal(true),
     },
     text: props.getTextProps(),
   };
@@ -2235,7 +1845,7 @@ function getDocumentType(p) {
     return undefined;
 }
 
-const style$2 = {
+const style$1 = {
   DocusignStatusContainer: {
     width: "100%",
     minHeight: "600px",
@@ -2247,7 +1857,7 @@ const style$2 = {
     gap: "10px",
     margin: "auto",
     textAlign: "center",
-    border: "1px solid var(--sl-color-gray-200)",
+    border: "1px solid var(--sqm-border-color)",
     justifyContent: "center",
   },
   MessageContainer: {
@@ -2262,47 +1872,47 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 const DocusignExpiredView = (props) => {
-  const { classes } = sheet$2;
+  const { classes } = sheet$1;
   const { text } = props;
   return (h("div", null,
-    h("style", { type: "text/css" }, styleString$2),
+    h("style", { type: "text/css" }, styleString$1),
     h("div", { class: classes.DocusignStatusContainer },
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text)",
         }, name: "clock" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignExpired)),
       h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
 };
 const DocusignErrorView = (props) => {
-  const { classes } = sheet$2;
+  const { classes } = sheet$1;
   const { text } = props;
   return (h("div", null,
-    h("style", { type: "text/css" }, styleString$2),
+    h("style", { type: "text/css" }, styleString$1),
     h("div", { class: classes.DocusignStatusContainer },
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-gray-500)",
+          color: "var(--sqm-text)",
         }, name: "exclamation-octagon" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignError)),
       h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
 };
 const DocusignLoadingView = () => {
-  const { classes } = sheet$2;
+  const { classes } = sheet$1;
   return (h("div", null,
-    h("style", { type: "text/css" }, styleString$2),
+    h("style", { type: "text/css" }, styleString$1),
     h("div", { class: classes.DocusignStatusContainer },
       h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
 };
 const DocusignIframe = ({ states, data, callbacks, text, }) => {
-  const { classes } = sheet$2;
+  const { classes } = sheet$1;
   const [iFrameHeight, setiFrameHeight] = useState("100%");
   const allowedDomains = [
     "referralsaasquatch.com",
@@ -2335,12 +1945,17 @@ const DocusignIframe = ({ states, data, callbacks, text, }) => {
     return h(DocusignExpiredView, { text: text });
   // Wrap iFrame with container that shares the same height to push other elements down when absolute positioned
   return (h("div", { style: { height: iFrameHeight } },
-    h("style", { type: "text/css" }, styleString$2),
+    h("style", { type: "text/css" }, styleString$1),
     h("div", { class: classes.IFrameContainer },
       h("iframe", { scrolling: "yes", frameBorder: "0", width: "100%", src: data.documentUrl, height: iFrameHeight }))));
 };
 
-const style$3 = {
+const style$2 = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -2372,7 +1987,7 @@ const style$3 = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -2383,31 +1998,27 @@ const style$3 = {
   },
   ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   InfoAlert: {
     "&::part(base)": {
-      backgroundColor: "transparent",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
-      padding: "0px",
-      marginBottom: "16px",
+      padding: "0 16px",
       border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-sky-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Container: {
@@ -2417,16 +2028,6 @@ const style$3 = {
     flexDirection: "column",
     gap: "16px",
   },
-  Link: {
-    color: "var(--sl-color-sky-500)",
-    textDecoration: "none",
-    "&:visited": {
-      color: "var(--sl-color-sky-500)",
-    },
-    "&:hover": {
-      textDecoration: "underline",
-    },
-  },
   CheckboxWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -2440,13 +2041,35 @@ const style$3 = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "420px",
+    },
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+    "&::part(footer)": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      marginBottom: "var(--sl-spacing-xx-small)",
+      alignItems: "center",
+      flex: "1",
+    },
+  },
+  DialogButton: { margin: "auto", width: "100%" },
 };
-const sheet$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
-const vanillaStyle$2 = `
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+const vanillaStyle$1 = `
     :host{
       display: block;   
     }
@@ -2458,6 +2081,8 @@ const vanillaStyle$2 = `
 
     a {
       cursor: pointer;
+      color: var(--sqm-text);
+      text-decoration: underline;
     }
 
 
@@ -2465,11 +2090,22 @@ const vanillaStyle$2 = `
 const DocusignFormView = (props) => {
   var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
-  const { classes } = sheet$3;
+  const { classes } = sheet$2;
   return (h("div", { class: classes.Container },
     h("style", { type: "text/css" },
-      styleString$3,
-      vanillaStyle$2),
+      styleString$2,
+      vanillaStyle$1),
+    h("sl-dialog", { class: sheet$2.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
+      h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
+      h("p", null, intl.formatMessage({
+        id: "modalText",
+        defaultMessage: text.modalDescription,
+      }, {
+        br: h("br", null),
+      })),
+      h("sl-button", { slot: "footer", type: "primary", class: sheet$2.classes.DialogButton, onClick: callbacks.onModalClose, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     h("div", { class: classes.TextContainer },
       h("div", null,
         !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -2479,7 +2115,7 @@ const DocusignFormView = (props) => {
         h("h3", null, text.taxForm),
         h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
     states.loadingError && (h("div", null,
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$3.classes.ErrorAlertContainer },
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$2.classes.ErrorAlertContainer },
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.loadingErrorAlertHeader),
         h("br", null),
@@ -2489,7 +2125,7 @@ const DocusignFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$3.classes.ErrorAlertContainer },
+    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$2.classes.ErrorAlertContainer },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("strong", null, text.error.generalTitle),
       h("br", null),
@@ -2623,6 +2259,18 @@ const DocusignForm = class {
      * @uiName Exit button text
      */
     this.exitButton = "Exit";
+    /**
+     * @uiName Information modal title
+     */
+    this.modalTitle = "Important Note";
+    /**
+     * @uiName Information modal description text
+     */
+    this.modalDescription = "Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
+    /**
+     * @uiName Information modal button text
+     */
+    this.modalButtonText = "I understand";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -2664,7 +2312,7 @@ function useDocusignFormDemo(props) {
   return cjs({
     text: props.getTextProps(),
     states: {
-      step: "4",
+      step: "3",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -2677,6 +2325,7 @@ function useDocusignFormDemo(props) {
         errors: {},
       },
       documentType: "W9",
+      showModal: false,
     },
     data: {
       taxForm: "W9",
@@ -2687,6 +2336,8 @@ function useDocusignFormDemo(props) {
       demo: {
         onSubmit: () => setStep("/4"),
         onBack: () => setStep("/3"),
+        onModalOpen: () => { },
+        onModalClose: () => { },
       },
       setParticipantType: (p) => console.log({ p }),
       setDocusignStatus: (status) => console.log(status),
@@ -2697,7 +2348,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "#fafafa",
+      background: "inherit",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -2709,7 +2360,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
     } }, h("span", null, "Placeholder for docusign iframe"), h("div", { style: { display: "flex", gap: "8px" } }, h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onBack }, "Back to Step 2"), h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onSubmit }, "Continue to Step 4")))));
 };
 
-const style$4 = {
+const style$3 = {
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -2721,6 +2372,7 @@ const style$4 = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -2761,26 +2413,30 @@ const style$4 = {
     marginTop: "10px",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   InfoAlert: {
@@ -2805,17 +2461,56 @@ const style$4 = {
     width: "26px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginBottom: "var(--sl-spacing-small)",
   },
+  PrimaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-primary-button-background)",
+      color: "var(--sqm-primary-button-color)",
+      borderColor: "var(--sqm-primary-button-color-border)",
+      borderRadius: "var(--sqm-primary-button-radius)",
+    },
+    "&::part(base):hover": {
+      background: "var(--sqm-primary-button-background-hover)",
+    },
+  },
+  SecondaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-secondary-button-background)",
+      color: "var(--sqm-secondary-button-color)",
+      borderColor: "var(--sqm-secondary-button-color-border)",
+      borderRadius: "var(--sqm-secondary-button-radius)",
+      width: "max-content",
+      display: "flex",
+      margin: "auto",
+    },
+    "&::part(base):hover": {
+      color: "var(--sqm-text)",
+      background: "var(--sqm-secondary-button-background-hover)",
+    },
+  },
 };
-const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
-const vanillaStyle$3 = `
+const sheet$3 = createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+const vanillaStyle$2 = `
     :host{
       display: block;   
     }
+
+    hr {
+      border: 1px solid var(--sqm-border-color);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
     * {
        margin: 0;
        padding: 0;
@@ -2826,11 +2521,11 @@ const vanillaStyle$3 = `
 const IndirectTaxFormView = (props) => {
   var _a;
   const { states, states: { formState }, callbacks, text, refs, slots, } = props;
-  const { classes } = sheet$4;
+  const { classes } = sheet$3;
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
-      styleString$4,
-      vanillaStyle$3),
+      styleString$3,
+      vanillaStyle$2),
     h("div", { class: classes.TextContainer },
       h("div", null,
         !states.hideSteps && (h("p", null,
@@ -2843,7 +2538,7 @@ const IndirectTaxFormView = (props) => {
         h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
       states.loadingError && (h("div", null,
-        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.AlertContainer },
+        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$3.classes.AlertContainer },
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           h("strong", null, text.error.loadingErrorAlertHeader),
           h("br", null),
@@ -2853,7 +2548,7 @@ const IndirectTaxFormView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           })))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.AlertContainer },
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$3.classes.AlertContainer },
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.generalTitle),
         h("br", null),
@@ -2863,7 +2558,7 @@ const IndirectTaxFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && (h("sl-alert", { type: "primary", open: true, class: sheet$4.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+      states.isPartner && (h("sl-alert", { type: "primary", open: true, class: sheet$3.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
         h("sl-icon", { slot: "icon", name: "info-circle" }),
         h("strong", null, text.isPartnerAlertHeader),
         h("br", null),
@@ -2887,8 +2582,8 @@ const IndirectTaxFormView = (props) => {
               text.otherRegion,
               h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-        h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
         intl.formatMessage({
           id: "cannotChangeInfoAlert",
           defaultMessage: text.cannotChangeInfoAlert,
@@ -2896,8 +2591,8 @@ const IndirectTaxFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        h("sl-button", { class: classes.SecondaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
 };
 
 const CONNECT_PARTNER = dist.gql `
@@ -3342,7 +3037,7 @@ const IndirectTaxForm = class {
 };
 function useDemoIndirectTaxForm(props) {
   const setStep = En(TAX_CONTEXT_NAMESPACE);
-  const [option, setOption] = useState(null);
+  const [option, setOption] = useState("otherRegion");
   const [demoFormState, setDemoFormState] = useState({});
   return cjs({
     states: {
@@ -3423,6 +3118,26 @@ function useDemoIndirectTaxForm(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const mockInvoiceData = (count = 4) => {
+  const data = [...Array(count)].map(() => getMockData());
+  return { data };
+};
+const getMockData = () => {
+  const today = luxon.DateTime.now();
+  const invoiceId = Math.random().toString(36).slice(2, 12);
+  const earnings = Math.floor(Math.random() * 100) + 1;
+  const indirectTax = Math.round(earnings * 0.2);
+  return {
+    downloadUrl: "https://example.com",
+    dateCreated: today.toMillis(),
+    invoiceId,
+    program: "my-program",
+    earnings: `$${earnings}.00`,
+    indirectTax: `$${indirectTax}.00`,
+    netEarnings: `$${earnings - indirectTax}.00`,
+  };
+};
+
 const debug = browser("sq:useInvoiceTable");
 const CSS_NAMESPACE = "sqm-invoice-table";
 const GET_INVOICES = dist.gql `
@@ -3571,26 +3286,6 @@ async function tryMethod(c, callback) {
   }
 }
 
-const mockInvoiceData = (count = 4) => {
-  const data = [...Array(count)].map(() => getMockData());
-  return { data };
-};
-const getMockData = () => {
-  const today = luxon.DateTime.now();
-  const invoiceId = Math.random().toString(36).slice(2, 12);
-  const earnings = Math.floor(Math.random() * 100) + 1;
-  const indirectTax = Math.round(earnings * 0.2);
-  return {
-    downloadUrl: "https://example.com",
-    dateCreated: today.toMillis(),
-    invoiceId,
-    program: "my-program",
-    earnings: `$${earnings}.00`,
-    indirectTax: `$${indirectTax}.00`,
-    netEarnings: `$${earnings - indirectTax}.00`,
-  };
-};
-
 const InvoiceTable = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -3736,18 +3431,6 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
   return demoProps;
 }
 
-const InvoiceTableDataCell = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return this.data;
-  }
-};
-
 const InvoiceTableDataColumn = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -3766,23 +3449,6 @@ const InvoiceTableDataColumn = class {
   }
 };
 
-const RewardTableDateCell = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    this.locale = "en";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    var _a, _b;
-    const date = !this.date
-      ? "-"
-      : (_b = (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale))) === null || _b === void 0 ? void 0 : _b.toLocaleString(luxon.DateTime.DATE_MED);
-    return date;
-  }
-};
-
 const InvoiceTableDateColumn = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -3801,21 +3467,6 @@ const InvoiceTableDateColumn = class {
   }
 };
 
-const InvoiceTableDownloadCell = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const vanillaStyle = `svg:hover, svg:hover * {
-      cursor: pointer;
-    }`;
-    return (h(Host, null, h("style", null, vanillaStyle), !!this.downloadUrl && (h("a", { href: this.downloadUrl, target: "_blank" }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, 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" }), 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) {
     registerInstance(this, hostRef);
@@ -3838,17 +3489,17 @@ const PayPalIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width:
   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" }),
   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$5 = {
+const style$4 = {
   CardContainer: {
     display: "grid",
     gridTemplateColumns: "1fr",
     gridGap: "var(--sl-spacing-large)",
-    background: "var(--sl-color-neutral-0)",
+    background: "inherit",
     boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)",
-    borderRadius: "4px",
+    borderRadius: "var(--sqm-border-radius-normal)",
     padding: "var(--sl-spacing-large)",
     minHeight: "150px",
-    border: "1px solid var(--sl-color-gray-200)",
+    border: "1px solid var(--sqm-border-color)",
     maxWidth: "450px",
   },
   StatusContainer: {
@@ -3858,7 +3509,7 @@ const style$5 = {
   },
   MainCurrencyLabel: {
     fontWeight: "var(--sl-font-weight-normal)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   MainCurrency: {
     margin: 0,
@@ -3867,12 +3518,12 @@ const style$5 = {
   },
   SubduedRegularText: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     margin: 0,
     width: "auto",
   },
   PaypalEmail: {
-    borderRight: "1px solid var(--sl-color-gray-200)",
+    borderRight: "1px solid var(--sqm-border-color)",
     paddingRight: "var(--sl-spacing-small)",
     "@media (max-width: 499px)": {
       borderRight: "none",
@@ -3880,7 +3531,7 @@ const style$5 = {
     },
   },
   PaypalDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -3901,7 +3552,7 @@ const style$5 = {
     },
   },
   AccountDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -3914,7 +3565,7 @@ const style$5 = {
     gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
     paddingTop: "var(--sq-spacing-xx-small)",
     "& > :not(:last-child)": {
-      borderRight: "1px solid var(--sl-color-gray-200)",
+      borderRight: "1px solid var(--sqm-border-color)",
     },
     "& > :nth-child(3)": {
       border: "none",
@@ -3931,7 +3582,7 @@ const style$5 = {
   },
   W9Container: {
     paddingTop: "var(--sl-spacing-large)",
-    borderTop: "1px solid var(--sl-color-gray-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   SkeletonOne: {
     width: "25%",
@@ -3947,18 +3598,34 @@ const style$5 = {
   },
   Alert: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-warning-100)",
-      border: "1px solid var(--sl-color-warning-200)",
+      backgroundColor: "var(--sqm-warning-color-background)",
+      border: "1px solid var(--sqm-warning-color-border)",
       padding: "0 16px",
     },
     "& sl-icon": {
       margin: 0,
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
       margin: 0,
     },
   },
+  SuccessBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sqm-success-color-text)",
+    },
+  },
+  PrimaryBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sqm-informative-color-text)",
+    },
+  },
   AlertContent: {
     display: "flex",
     alignItems: "flex-start",
@@ -3966,1410 +3633,202 @@ const style$5 = {
     flexDirection: "column",
   },
   Container: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-xx-large)",
-  },
-};
-function PayoutDetailsCardView(props) {
-  const sheet = createStyleSheet(style$5);
-  const styleString = sheet.toString();
-  const { classes } = sheet;
-  const { states, text } = props;
-  const renderLoadingSkeleton = () => {
-    return (h("div", { class: classes.CardContainer },
-      h("div", { class: classes.StatusContainer },
-        h("sl-skeleton", { class: classes.SkeletonOne }),
-        h("sl-skeleton", { class: classes.SkeletonTwo })),
-      h("sl-skeleton", { class: classes.SkeletonThree }),
-      h("sl-skeleton", { class: classes.SkeletonOne })));
-  };
-  const renderStatusBadge = (status, statusBadgeText) => {
-    const badgeType = status === "nextPayout" ? "success" : "primary";
-    const statusText = intl.formatMessage({
-      id: "badgeText",
-      defaultMessage: statusBadgeText,
-    }, {
-      badgeText: status,
-    });
-    return (h("sl-badge", { pill: true, type: badgeType }, statusText));
-  };
-  const thresholdText = intl.formatMessage({
-    id: "thresholdText",
-    defaultMessage: text.thresholdPayoutText,
-  }, {
-    thresholdBalance: states.thresholdBalance,
-  });
-  return (h("div", { class: classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    states.loading ? (renderLoadingSkeleton()) : (h("div", { class: classes.CardContainer },
-      h("div", { class: classes.StatusContainer },
-        h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"
-          ? states.thresholdBalance
-            ? thresholdText
-            : ""
-          : states.nextPayoutDate),
-        states.badgeStatus === "thresholdPayout"
-          ? null
-          : renderStatusBadge(states.badgeStatus, text.statusBadgeText)),
-      h("h1", { class: classes.MainCurrency }, states.balance),
-      states.payoutType === "PAYPAL" ? (h("div", { class: classes.PaypalDetailsContainer },
-        h("span", { class: classes.PaypalEmail }, states.paypalEmailAddress),
-        h(PayPalIcon, null))) : (h("div", { class: classes.AccountDetailsContainer },
-        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 } = $n(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;
-    const currentDay = luxon.DateTime.now().day;
-    if (paymentDay === "1") {
-      return currentDay === 1
-        ? luxon.DateTime.now().toFormat("LLL dd, yyyy")
-        : luxon.DateTime.now()
-          .plus({ month: 1 })
-          .startOf("month")
-          .toFormat("LLL dd, yyyy");
-    }
-    else if (paymentDay === "15") {
-      return currentDay <= 15
-        ? luxon.DateTime.now()
-          .plus({ day: 15 - currentDay })
-          .toFormat("LLL dd, yyyy")
-        : luxon.DateTime.now()
-          .plus({ month: 1 })
-          .startOf("month")
-          .plus({ day: 14 })
-          .toFormat("LLL dd, yyyy");
-    }
-    else {
-      intl.formatMessage({
-        id: `nextPayoutBalance`,
-        defaultMessage: props.thresholdPayoutText,
-      }, {
-        thresholdBalance: (_a = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _a === void 0 ? void 0 : _a.paymentThreshold,
-      });
-    }
-  }
-  const paymentDay = getPayoutDetailedStatusText((_c = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _c === void 0 ? void 0 : _c.paymentDay);
-  const isPayoutToday = luxon.DateTime.now().toFormat("LLL dd, yyyy") === paymentDay;
-  return {
-    states: {
-      loading,
-      thresholdBalance: ((_d = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _d === void 0 ? void 0 : _d.paymentThreshold) ? `${publisher === null || publisher === void 0 ? void 0 : publisher.currency}${(_e = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _e === void 0 ? void 0 : _e.paymentThreshold}`
-        : undefined,
-      balance: (_f = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _f === void 0 ? void 0 : _f.balance,
-      badgeStatus: ((_g = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _g === void 0 ? void 0 : _g.paymentSchedulingType) !== "FIXED_DAY"
-        ? "thresholdPayout"
-        : isPayoutToday
-          ? "payoutToday"
-          : "nextPayout",
-      payoutType: (_h = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _h === void 0 ? void 0 : _h.paymentMethod,
-      error: (_j = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _j === void 0 ? void 0 : _j.hold,
-      paypalEmailAddress: (_k = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _k === void 0 ? void 0 : _k.paypalEmailAddress,
-      cardNumberPreview: (_l = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _l === void 0 ? void 0 : _l.bankAccountNumber,
-      nextPayoutDate: paymentDay,
-    },
-    text: props.getTextProps(),
-  };
-}
-
-const PayoutDetailsCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Badge text indicating payout status
-     * @uiName Payout badge status text
-     */
-    this.statusBadgeText = "{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }";
-    /**
-     * Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid.
-     * @uiName Payout schedule by threshold text
-     */
-    this.thresholdPayoutText = "Next payout occurs when balance is {thresholdBalance}";
-    /**
-     * Shown before the participant’s bank account information.
-     * @uiName Bank account field label
-     */
-    this.accountText = "Account";
-    /**
-     * Text displayed for existing publishers that do not have saved banking information.
-     * @uiName Payout missing information subtext
-     */
-    this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    const props = getProps(this);
-    return {
-      ...props,
-    };
-  }
-  render() {
-    const props = isDemo()
-      ? useDemoPayoutDetailsCard(this)
-      : usePayoutDetailsCard(this);
-    return (h(Host, null, h(PayoutDetailsCardView, { text: props.text, states: props.states })));
-  }
-};
-function useDemoPayoutDetailsCard(props) {
-  return cjs({
-    states: {
-      loading: false,
-      error: false,
-      thresholdBalance: "$50",
-      mainCurrency: { currencyText: "USD", amountText: "100.00" },
-      badgeStatus: "nextPayout",
-      payoutType: "BANK_TRANSFER",
-      nextPayoutDate: "March 14, 2024",
-      paypalEmailAddress: "joesmith@example.com",
-      otherCurrencies: false,
-      hasW9Pending: false,
-      hasDatePending: true,
-      cardNumberPreview: "XX2381",
-      balance: "20.00 USD",
-    },
-    text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-const TableCell = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** @uiName Column span  */
-    this.colspan = 1;
-    /** @uiName Padding */
-    this.padding = "15px 10px";
-  }
-  render() {
-    return (h(Host, { style: { display: "contents" } }, h("td", { colSpan: this.colspan, style: { padding: this.padding } }, h("slot", null))));
-  }
-};
-
-const TableRow = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * @uiName Border
-     */
-    this.border = "1px solid #EAEAEA";
-  }
-  render() {
-    return (h(Host, { style: { display: "contents" } }, h("tr", { style: { border: this.border } }, h("slot", null))));
-  }
-};
-
-function getCurrentStep(user) {
-  var _a, _b;
-  if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected) || !((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher)) {
-    return "/1";
-  }
-  const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, } = user.impactConnection.publisher;
-  // If they do have a required document, look at current document
-  if (requiredTaxDocumentType && !currentTaxDocument)
-    return "/3";
-  if (!withdrawalSettings && brandedSignup)
-    return "/4";
-  return "/dashboard";
-}
-function useTaxAndCash() {
-  var _a, _b, _c, _d, _e;
-  const host = _();
-  const user = J();
-  const locale = L();
-  // State for current step of form
-  const [step, setStep] = In({
-    namespace: TAX_CONTEXT_NAMESPACE,
-    initialValue: "/loading",
-  });
-  // State for when to hide steps, or override certain actions
-  const [context, _setContext] = In({
-    namespace: TAX_FORM_CONTEXT_NAMESPACE,
-    initialValue: {},
-  });
-  // State to carry user form information into step 2
-  const [userFormContext, _setUserFormContext] = In({
-    namespace: USER_FORM_CONTEXT_NAMESPACE,
-    initialValue: {
-      firstName: undefined,
-      lastName: undefined,
-      email: undefined,
-      countryCode: undefined,
-      currency: undefined,
-    },
-  });
-  const [_currenciesContext, setCurrenciesContext] = In({
-    namespace: CURRENCIES_NAMESPACE,
-    initialValue: [],
-  });
-  const [_countriesContext, _setCountriesContext] = In({
-    namespace: COUNTRIES_NAMESPACE,
-    initialValue: [],
-  });
-  const [_sortedCountriesContext, setSortedCountriesContext] = In({
-    namespace: SORTED_COUNTRIES_NAMESPACE,
-    initialValue: [],
-  });
-  const { data, errors } = Sn({
-    namespace: USER_QUERY_NAMESPACE,
-    query: GET_USER,
-    skip: !user,
-    options: {
-      batch: false,
-    },
-  });
-  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;
-  Sn({
-    namespace: COUNTRIES_QUERY_NAMESPACE,
-    query: GET_COUNTRIES,
-    skip: !user,
-  });
-  const { data: financeNetworkData, refetch } = Sn({
-    namespace: FINANCE_NETWORK_SETTINGS_NAMESPACE,
-    query: GET_FINANCE_NETWORK_SETTINGS,
-    skip: !user,
-    variables: {
-      filter: getFinanceNetworkFilter(),
-    },
-  });
-  const { data: currenciesData } = Sn({
-    namespace: CURRENCIES_QUERY_NAMESPACE,
-    query: GET_CURRENCIES,
-    skip: !user,
-    variables: {
-      locale,
-    },
-  });
-  const supportedCurrencies = useMemo(() => {
-    var _a, _b;
-    // Filter out any currencies not supported by finance network settings
-    const allValidCurrencies = (_b = (_a = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.reduce((agg, settings) => {
-      var _a, _b;
-      const currency = (_b = (_a = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.find((currency) => currency.currencyCode === settings.currency);
-      // Currency not in supported list
-      if (!currency)
-        return agg;
-      // Currency already added to list
-      if (agg.find((currency) => currency.currencyCode === settings.currency))
-        return agg;
-      // Currency not supported by selected country
-      if (userFormContext.countryCode &&
-        settings.countryCode !== countryCode)
-        return agg;
-      return [...agg, currency];
-    }, []);
-    return allValidCurrencies;
-  }, [financeNetworkData, countryCode]);
-  const intlLocale = (locale === null || locale === void 0 ? void 0 : locale.replace("_", "-")) || "en";
-  const sortByName = (a, b) => a.displayName < b.displayName ? -1 : 1;
-  const paymentOptions = (_d = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _d === void 0 ? void 0 : _d.data;
-  // filter out any duplicate countries and null countryCode
-  const availableCountries = useMemo(() => new Set(paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.map((option) => option.countryCode).filter((value) => value)), [paymentOptions]);
-  const _topCountries = ["CA", "GB", "US"];
-  const sortedCountries = useMemo(() => Array.from(availableCountries)
-    .map((countryCode) => getCountryObj({ countryCode, locale: intlLocale }))
-    .sort(sortByName)
-    .reduce((prev, countryObj) => {
-    if (_topCountries.includes(countryObj.countryCode))
-      return [countryObj, ...prev];
-    return [...prev, countryObj];
-  }, []), [availableCountries]);
-  useEffect(() => {
-    if (sortedCountries)
-      setSortedCountriesContext(sortedCountries);
-  }, [sortedCountries]);
-  useEffect(() => {
-    if (supportedCurrencies)
-      setCurrenciesContext(supportedCurrencies);
-  }, [supportedCurrencies]);
-  useEffect(() => {
-    if (errors) {
-      setStep("/error");
-      return;
-    }
-    if (!host || !user)
-      return;
-    if (data) {
-      const user = data === null || data === void 0 ? void 0 : data.user;
-      if (!user || step !== "/loading")
-        return;
-      const currentStep = getCurrentStep(user);
-      setStep(currentStep);
-    }
-  }, [host, user, (_e = data === null || data === void 0 ? void 0 : data.user) === null || _e === void 0 ? void 0 : _e.email, errors]);
-  function getFinanceNetworkFilter() {
-    var _a, _b, _c;
-    if (step === "/1")
-      return {};
-    if (step === "/4")
-      return { currency_eq: (_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.currency };
-    if (countryCode)
-      return {
-        countryCode_eq: countryCode,
-      };
-    return {};
-  }
-  return {
-    step,
-    setStep,
-    context,
-    namespace: Mn(TAX_CONTEXT_NAMESPACE),
-    loading: step === "/loading",
-  };
-}
-
-const TaxAndCashMonolith = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /*---------------------------------------------------------------------------------
-      !IMPORTANT!: Make sure to also change the prop names in the respective component
-    -----------------------------------------------------------------------------------*/
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                      STEP 1 PROPS:
-     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName First name field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_firstName = "First name";
-    /**
-     * @uiName Last name field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_lastName = "Last name";
-    /**
-     * @uiName Email field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_email = "Email";
-    /**
-     * @uiName Country field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_country = "Country";
-    /**
-     * @uiName Phone number field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_phoneNumber = "Phone number";
-    /**
-     * @uiName Address field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_address = "Address";
-    /**
-     * @uiName City field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_city = "City";
-    /**
-     * @uiName State field label for states
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_state = "State";
-    /**
-     * @uiName State field label for provinces
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_province = "Province";
-    /**
-     * @uiName State field label for regions
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_region = "Region";
-    /**
-     * @uiName Postal code field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_postalCode = "Postal code";
-    /**
-     * @uiName Currency field label
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_currency = "Currency";
-    /**
-     * @uiName Currency field help text
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_currencyHelpText = "Choose your preferred payout currency";
-    /**
-     * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
-     * @uiName Terms and conditions checkbox
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_allowBankingCollection = "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information";
-    /**
-     * @uiName Step 1 title
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_personalInformation = "Personal Information";
-    /**
-     * The link text that appears in the terms and conditions checkbox
-     * @uiName Terms and conditions text
-     * @uiGroup Step 1 Properties
-     * @uiWidget textArea
-     */
-    this.step1_termsAndConditionsLabel = "terms and conditions";
-    /**
-     * The link that appears in the terms and conditions checkbox
-     * @uiName Terms and conditions link
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_termsAndConditionsLink = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
-    /**
-     * Placeholder text displayed in the currency search dropdown
-     * @uiName Currency field placeholder text
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_searchForCurrencyText = "Search for currency..";
-    /**
-  
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                      STEP 2 PROPS:
-     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName Step 2 title
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_indirectTax = "Indirect Tax";
-    /**
-     * Displayed under the title of this step.
-     * @uiName Step 2 description
-     * @uiGroup Step 2 Properties
-     * @uiWidget textArea
-     */
-    this.step2_indirectTaxDescription = "Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments.";
-    /**
-     * Displayed with indirect tax registration options.
-     * @uiName Indirect tax details section title
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_indirectTaxDetails = "Indirect tax details";
-    /**
-     * @uiName Registered for indirect tax option
-     * @uiGroup Step 2 Properties
-     * @uiWidget textArea
-     *
-     */
-    this.step2_otherRegion = "Registered for indirect tax";
-    /**
-     * Selecting this option will display fields to enter indirect tax details.
-     * @uiName Registered for indirect tax option description
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_otherRegionSubtext = "If you’ve registered with your tax authority, add your information to stay tax compliant.";
-    /**
-     * @uiName Not registered for indirect tax option
-     * @uiGroup Step 2 Properties
-     * @uiWidget textArea
-     */
-    this.step2_notRegistered = "Not registered for indirect tax";
-    /**
-     * Participants based in the US are  considered not registered.
-     * @uiName Not registered for indirect tax option description
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_notRegisteredSubtext = "If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered.";
-    /**
-     * @uiName Region of indirect tax field label
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_selectedRegion = "Country / region of indirect tax";
-    /**
-     * @uiName Indirect tax number field label
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_indirectTaxNumber = "{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}";
-    /**
-     * @uiName Province field label
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_province = "Province";
-    /**
-     * @uiName Missing indirect tax number error message
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_indirectTaxNumberError = "{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required";
-    /**
-     * Displayed to participants registered for QST.
-     * @uiName QST number field label
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_qstNumber = "QST number";
-    /**
-     * Displayed to participants registered for indirect tax in Quebec, Canada.
-     * @uiName QST tax checkbox
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_isRegisteredQST = "I am registered for QST Tax";
-    /**
-     * Displayed to participants registered for indirect tax in Spain.
-     * @uiName Spain income tax checkbox
-     * @uiGroup Step 2 Properties
-     * @uiWidget textArea
-     */
-    this.step2_isRegisteredSubRegionIncomeTax = "I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.";
-    /**
-     * Displayed to participants registered in Spain.
-     * @uiName Sub-region of indirect tax field label
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_subRegion = "Sub-region";
-    /**
-     * @uiName Income tax field label
-     * @uiGroup Step 2 Properties
-     */
-    this.step2_subRegionTaxNumberLabel = "Income Tax Number";
-    /**
-     * Communicate that after this step, only Support can change personal and indirect tax information.
-     * @uiName Submission confirmation alert
-     * @uiGroup Step 2 Properties
-     * @uiWidget textArea
-     */
-    this.step2_cannotChangeInfoAlert = "Changes to your personal and indirect tax information can only be made through our {supportLink} after you complete this step. Make sure these are correct before continuing.";
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                      STEP 3 PROPS:
-     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName Step 3 title
-     * @uiGroup Step 3 Properties
-     */
-    this.step3_taxForm = "Tax form";
-    /**
-     * Display the type of tax form that the participant must submit.
-     * @uiName Tax form name
-     * @uiGroup Step 3 Properties
-     */
-    this.step3_taxFormLabel = "{documentType} Tax Form";
-    /**
-     * @uiName Participant type field label
-     * @uiGroup Step 3 Properties
-     */
-    this.step3_participantType = "Participant type";
-    /**
-     * An option for the participant type field. Used to determine which W-8 form is required.
-     * @uiName Business representative participant type label
-     * @uiGroup Step 3 Properties
-     */
-    this.step3_businessEntity = "I represent a business";
-    /**
-     * An option for the participant type field. Used to determine which W-8 form is required.
-     * @uiName Individual participant type label
-     * @uiGroup Step 3 Properties
-     */
-    this.step3_individualParticipant = "I am an individual participant";
-    /**
-     * Displayed at the top of the page to participants based in the US.
-     * @uiName W-9 tax form description
-     * @uiGroup Step 3 Properties
-     * @uiWidget textArea
-     */
-    this.step3_taxFormDescription = "Participants based in the US need to submit a {documentType} form.";
-    /**
-     * Displayed at the top of the page to individuals joining a US program who reside outside the country.
-     * @uiName W-8 BEN tax form description
-     *  @uiGroup Step 3 Properties
-     * @uiWidget textArea
-     */
-    this.step3_taxFormDescriptionIndividualParticipant = "Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.";
-    /**
-     * Displayed at the top of the page to participants representing a business.
-     * @uiName W-8 BEN-E tax form description
-     *  @uiGroup Step 3 Properties
-     * @uiWidget textArea
-     */
-    this.step3_taxFormDescriptionBusinessEntity = "Participants residing outside of the US who represent a business entity need to submit a {documentType} form.";
-    /**
-     * This appears inside the Docusign frame.
-     * @uiName Docusign session expired message
-     * @uiGroup Step 3 Properties
-     * @uiWidget textArea
-     */
-    this.step3_docusignExpired = "For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.";
-    /**
-     * Remind participants their session will time out after 20 minutes of inactivity.
-     * @uiName Docusign timed session message
-     * @uiGroup Step 3 Properties
-     * @uiWidget textArea
-     */
-    this.step3_docusignSessionWarning = "For your security, we automatically end your session when you have not interacted with the form after 20 minutes.";
-    /**
-     * This appears inside the Docusign frame.
-     * @uiName Docusign form error message
-     * @uiGroup Step 3 Properties
-     * @uiWidget textArea
-     */
-    this.step3_docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.";
-    /**
-     * @uiName Refresh page button label
-     * @uiGroup Step 3 Properties
-     */
-    this.step3_refreshButton = "Refresh Page";
-    /**
-     * @uiName Exit button text
-     * @uiGroup Step 3 Properties
-     */
-    this.step3_exitButton = "Exit";
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                      STEP 4 PROPS:
-     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName Step 4 title
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_taxAndPayouts = "Payouts";
-    /**
-     * @uiName Direct to bank payout option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_directlyToBankAccount = "Directly to my bank account";
-    /**
-     * @uiName PayPal payout option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_toPayPalAccount = "PayPal (2% processing fee capped to {feeCap})";
-    /**
-     * @uiName Threshold balance payment schedule option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentScheduleBalanceThreshold = "Pay me when my balance reaches a threshold";
-    /**
-     * @uiName Fixed day payment schedule option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentScheduleFixedDay = "Pay me on a fixed day of the month";
-    /**
-     * Let the participant choose what day of the month they’ll get paid
-     * @uiName Payment day field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentDaySelectLabel = "Payment Day";
-    /**
-     * Participant use this field to select the balance at which they want to be paid
-     * @uiName Payment threshold field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentThresholdSelectLabel = "Payment threshold";
-    /**
-     * One of two payment day options
-     * @uiName First of month payday option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentDayFirstOfMonthLabelText = "1st of the month";
-    /**
-     * One of two payment day options
-     * @uiName Fifteenth of month payday option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentDayFifteenthOfMonthLabelText = "15th of the month";
-    /**
-     * @uiName Payment method section header
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentMethod = "Payment method";
-    /**
-     * @uiName Payment schedule section header
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentSchedule = "Payment schedule";
-    /**
-     * @uiName Payment method section description
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_paymentMethodSubtext = "Payouts will be sent from our referral program provider, impact.com.";
-    /**
-     * Displayed to participants who choose PayPal as their payout method
-     * @uiName PayPal email field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_payPalInputLabel = "PayPal email";
-    /**
-     * @uiName Bank country field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankLocationLabel = "Bank country location";
-    /**
-     * @uiName Beneficiary account field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_beneficiaryAccountNameLabel = "Beneficiary account name";
-    /**
-     * @uiName Bank account type field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankAccountTypeLabel = "Bank account type";
-    /**
-     * @uiName Checking account option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_checkingSelectItemLabel = "Checking";
-    /**
-     * Label text for the savings account type select item
-     * @uiName Savings account options
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_savingsSelectItemLabel = "Savings";
-    /**
-     * @uiName Bank account number field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankAccountNumberLabel = "Bank account number";
-    /**
-     * @uiName IBAN field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_ibanLabel = "IBAN";
-    /**
-     * @uiName SWIFT code field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_swiftCodeLabel = "SWIFT code";
-    /**
-     * @uiName Routing code field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_routingCodeLabel = "{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }";
-    /**
-     * @uiName Bank name field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankNameLabel = "Bank name";
-    /**
-     * @uiName Classification entity field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_classificationEntityLabel = "Classification entity";
-    /**
-     * One of three options listed for the classification field
-     * @uiName Business classification option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_businessSelectItemLabel = "Business";
-    /**
-     * One of three options listed for the classification field
-     * @uiName Individual classification option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_individualSelectItemLabel = "Individual";
-    /**
-     * One of three options listed for the classification field
-     * @uiName Foreign classification option
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_foreignSelectItemLabel = "Foreign";
-    /**
-     * @uiName Classification CPF field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_classificationCPFLabel = "Classification CPF";
-    /**
-     * @uiName Patronymic name field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_patronymicNameLabel = "Patronymic name";
-    /**
-     * @uiName VO code field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_voCodeLabel = "VO code";
-    /**
-     * @uiName Agency code field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_agencyCodeLabel = "Agency code";
-    /**
-     * @uiName Branch code field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_branchCodeLabel = "Branch code";
-    /**
-     * Label text for the classification input field
-     * @uiName Classification field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_classificationLabel = "Classification";
-    /**
-     * @uiName Taxpayer ID field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_taxPayerIdLabel = "Beneficiary INN";
-    /**
-     * @uiName Bank address field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankAddressLabel = "Bank address";
-    /**
-     * @uiName Bank city field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankCityLabel = "Bank city";
-    /**
-     * @uiName Bank province/state field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankStateLabel = "Bank Province / State";
-    /**
-     * @uiName  Bank postal code field label
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_bankPostalCodeLabel = "Bank postal code";
-    /**
-     * Default payment method to the participants’ bank account.
-     * @uiName EFT withdrawal payment method
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_eftWithdrawalLabel = "EFT Withdrawal (free)";
-    /**
-     * @uiName FX Wire Processing fee text
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_fxWireProcessingFeeLabel = "FX Wire (Processing Fee {currency}{defaultFxFee}.00)";
-    /**
-     * @uiName Text for verify email dialog
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_verifyEmailHeaderText = "Verify your email";
-    /**
-     * @uiName Verify code widget header text
-     * @uiGroup Step 4 Properties
-     */
-    this.step4_verifyEmailDescriptionText = "Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.";
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                      DASHBOARD PROPS:
-     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName Active tax form badge label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_statusTextActive = "Active";
-    /**
-     * @uiName Invalid tax form badge label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_statusTextNotActive = "Invalid Tax Form";
-    /**
-     * Displayed when the participant submitted their form but it is awaiting review.
-     *
-     * @uiName Not verified tax form badge label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_statusTextNotVerified = "Not Verified";
-    /**
-     * Additional text displayed next to the tax form's status badge
-     *
-     * @uiName Active W-9 description
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_badgeTextSubmittedOn = "Submitted on {dateSubmitted}.";
-    /**
-     * Additional text displayed next to the tax form's status badge.
-     *
-     * @uiName Active W-8 description
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_badgeTextSubmittedOnW8 = "Submitted on {dateSubmitted}. Valid for three years after submission.";
-    /**
-     * Additional text displayed next to the tax form's status badge.
-     *
-     * @uiName Tax form in review description
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_badgeTextAwaitingReview = "Awaiting review. Submitted on {dateSubmitted}.";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Inactive W-9 error message title
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_taxAlertHeaderNotActiveW9 = "Your W9 tax form has personal information that doesn’t match your profile";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Inactive W-8 error message title
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_taxAlertHeaderNotActiveW8 = "{documentType} tax form is invalid";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Inactive W-9 error message description
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_taxAlertNotActiveMessageW9 = "Please resubmit a new {documentType} form.";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Inactive W-8 error message description
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_taxAlertNotActiveMessageW8 = "Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.";
-    /**
-     * Additional text displayed next to the tax form's status badge.
-     *
-     * @uiName Invalid tax form description
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_invalidForm = "Make sure your information is correct and submit new form.";
-    /**
-     * @uiName Payout information section header
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_bankingInformationSectionHeader = "Payout Information";
-    /**
-     * @uiName Tax document section header
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_taxDocumentSectionHeader = "Tax documents";
-    /**
-     * Displayed under the tax document section header.
-     *
-     * @uiName Tax documents section description
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_taxDocumentSectionSubHeader = "{documentType} tax form";
-    /**
-     * No other statuses or badges will be displayed in the tax form section in this case.
-     *
-     * @uiName Tax form not required text
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_noFormNeededSubtext = "Tax documents are only required if you are based in the US or joining the referral program of a US based brand.";
-    /**
-     *
-     * @uiName Indirect tax section header
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_indirectTaxInfoSectionHeader = "Indirect tax";
-    /**
-     * If the participant is registered for indirect tax in Canada, display the province they’re registered in.
-     *
-     * @uiName Canadian province of indirect tax
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_indirectTaxInfoCanada = "Registered in {province}, {country}";
-    /**
-     * If the participant is registered for indirect tax, display the country they’re registered in.
-     *
-     * @uiName Indirect tax country
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_indirectTaxInfoOtherCountry = "Registered in {country}";
-    /**
-     * If the participant is registered for indirect tax in Spain, display the region they’re registered in.
-     *
-     * @uiName Spanish region of indirect tax
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_indirectTaxInfoSpain = "Registered in {country}, {subRegion}";
-    /**
-     * @uiName Indirect tax tooltip
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
-    /**
-     * Displayed to participants who have submitted their indirect tax information.
-     *
-     * @uiName  Indirect tax details
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_indirectTaxDetails = "{indirectTaxType} number: {indirectTaxNumber}";
-    /**
-     * @uiName Submit new tax form button label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_newFormButton = "Submit new form";
-    /**
-     * @uiName Edit payment info button label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_editPaymentInformationButton = "Edit Payout Information";
-    /**
-     * @uiName Not registered for indirect tax text
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_notRegisteredForTax = "Not registered for indirect tax. If you’ve previously registered with your tax authority, contact our {supportLink} to add your information to stay tax compliant.";
-    /**
-     * Displayed to participants registered in Quebec, Canada.
-     * @uiName QST indirect tax details
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_qstNumber = "QST number: {qstNumber}";
-    /**
-     * @uiName Spain sub-region indirect tax number
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_subRegionTaxNumber = "Income tax number: {subRegionTaxNumber}";
-    /**
-     * @uiName Payout status badge
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_statusBadgeText = "{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }";
-    /**
-     * Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid.
-     * @uiName Payout schedule by threshold text
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_thresholdPayoutText = "Next payout occurs when balance is {thresholdBalance}";
-    /**
-     * Shown before the participant’s bank account information.
-     * @uiName Bank account field label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_accountText = "Account";
-    /**
-     * Part of the Invoice table displayed at the bottom of the page.
-     * @uiName Invoice number column title
-     *  @uiGroup Dashboard Properties
-     */
-    this.dashboard_invoiceColumnTitle = "Invoice";
-    /**
-     * Part of the Invoice table displayed at the bottom of the page.
-     * @uiName Date column title
-     *  @uiGroup Dashboard Properties
-     */
-    this.dashboard_dateColumnTitle = "Date";
-    /**
-     * Part of the Invoice table displayed at the bottom of the page.
-     * @uiName Earnings column title
-     *  @uiGroup Dashboard Properties
-     */
-    this.dashboard_earningsColumnTitle = "Earnings";
-    /**
-     * Part of the Invoice table displayed at the bottom of the page.
-     * @uiName Indirect tax column title
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_indirectTaxColumnTitle = "Indirect tax";
-    /**
-     * Displayed under the payout details card.
-     * @uiName Payout from impact text
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_payoutFromImpact = "Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com.";
-    /**
-     * Part of the Invoice table displayed at the bottom of the page.
-     * @uiName Earnings after tax column title
-     *  @uiGroup Dashboard Properties
-     */
-    this.dashboard_earningsAfterTaxColumnTitle = "Earnings after tax";
-    /**
-     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
-     * @uiName Payout error message title
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_payoutHoldAlertHeader = "Your payout is on hold";
-    /**
-     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
-     * @uiName Payout error message description
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_payoutHoldAlertDescription = "Please contact our {supportLink} or check your inbox for an email from our referral program provider, impact.com.";
-    /**
-     * Text displayed for existing publishers that do not have saved banking information.
-     * @uiName Payout missing information subtext
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
-    /**
-     * @uiName Invoice table description
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_invoiceDescription = "View and download your invoices to report your earnings and stay tax compliant.";
-    /**
-     * @uiName Invoice table previous page button label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_invoicePrevLabel = "Prev";
-    /**
-     * @uiName Invoice table next page button label
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_invoiceMoreLabel = "Next";
-    /**
-     * @uiName Invoice table title
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_invoiceHeader = "Invoices";
-    /**
-     * @uiName Empty invoice table header
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_invoiceEmptyStateHeader = "View your invoice details";
-    /**
-     * @uiName Empty invoice table description
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_invoiceEmptyStateText = "Refer a friend to view the status of your invoices and rewards earned";
-    /**
-     * @uiName Replace tax form modal header
-     * @uiGroup Dashboard Properties
-     */
-    this.dashboard_replaceTaxFormModalHeader = "Replace existing tax form";
-    /**
-     * @uiName Replace tax form modal body text
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_replaceTaxFormModalBodyText = "Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.";
-    /**
-     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
-     * @uiName Verification required alert message title
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationRequiredHeader = "Verify your identity";
-    /**
-     * Part of the alert displayed at the top of the page when the user needs to verify their identity
-     * @uiName Verification required alert message description
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
-    /**
-     * @uiName Verification required internal alert header
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationRequiredInternalHeader = "Identity Verification in Progress";
-    /**
-     * @uiName Verification required internal alert description
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortly. If you don't hear from us contact our {supportLink}.";
-    /**
-     * @uiName Verification review internal alert header
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationReviewInternalHeader = "Identity Verification Under Review";
-    /**
-     * @uiName Verification review internal alert description
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
-    /**
-     * @uiName Verification failed internal alert header
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationFailedInternalHeader = "Identity Verification Unsuccessful";
-    /**
-     * @uiName Verification failed internal alert description
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
-    /**
-     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
-     * @uiName Verification required alert button text
-     * @uiGroup Dashboard Properties
-     * @uiWidget textArea
-     */
-    this.dashboard_verificationRequiredButtonText = "Start Verification";
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                      GENERAL PROPS:
-     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName Setup progress
-     * @uiGroup General Form Properties
-     */
-    this.formStep = "Step {step} of {count}";
-    /**
-     * Part of the alert displayed at the top of the page.
-     * @uiName Form submission error message title
-     * @uiGroup General Form Properties
-     * @uiWidget textArea
-     */
-    this.generalErrorTitle = "There was a problem submitting your information";
-    /**
-     * Part of the alert displayed at the top of the page.
-     * @uiName Form submission error message description
-     * @uiGroup General Form Properties
-     * @uiWidget textArea
-     */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
-    /**
-     * Displayed under a field that is missing required information.
-     * @uiName Empty form field error message
-     * @uiGroup General Form Properties
-     */
-    this.fieldRequiredError = "{fieldName} is required";
-    /**
-     * Displayed under a field that includes invalid characters (non-ASCII).
-     * @uiName Invalid character error message
-     * @uiGroup General Form Properties
-     */
-    this.invalidCharacterError = "{fieldName} includes characters that aren't supported.";
-    /**
-     * Displayed under a field when it has an invalid entry.
-     * @uiName Form field error message
-     * @uiGroup General Form Properties
-     */
-    this.fieldInvalidError = "{fieldName} is invalid";
-    /**
-     * @uiName Continue button label
-     * @uiGroup General Form Properties
-     */
-    this.continueButton = "Continue";
-    /**
-     * @uiName Back button label
-     * @uiGroup General Form Properties
-     */
-    this.backButton = "Back";
-    /**
-     * @uiName Cancel button label
-     * @uiGroup General Form Properties
-     */
-    this.cancelButton = "Cancel";
-    /**
-     * Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com.
-     * @uiName Participant is a partner alert title
-     * @uiGroup General Form Properties
-     * @uiWidget textArea
-     */
-    this.isPartnerAlertHeader = "An account with this email already exists with our referral program provider, impact.com";
-    /**
-     * Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com.
-     * @uiName Participant is a partner alert description
-     * @uiGroup General Form Properties
-     * @uiWidget textArea
-     */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-xx-large)",
+  },
+};
+function PayoutDetailsCardView(props) {
+  const sheet = createStyleSheet(style$4);
+  const styleString = sheet.toString();
+  const { classes } = sheet;
+  const { states, text } = props;
+  const renderLoadingSkeleton = () => {
+    return (h("div", { class: classes.CardContainer },
+      h("div", { class: classes.StatusContainer },
+        h("sl-skeleton", { class: classes.SkeletonOne }),
+        h("sl-skeleton", { class: classes.SkeletonTwo })),
+      h("sl-skeleton", { class: classes.SkeletonThree }),
+      h("sl-skeleton", { class: classes.SkeletonOne })));
+  };
+  const renderStatusBadge = (status, statusBadgeText) => {
+    const badgeType = status === "nextPayout" ? "success" : "primary";
+    const badgeClass = badgeType === "success" ? classes.SuccessBadge : classes.PrimaryBadge;
+    const statusText = intl.formatMessage({
+      id: "badgeText",
+      defaultMessage: statusBadgeText,
+    }, {
+      badgeText: status,
+    });
+    return (h("sl-badge", { pill: true, class: badgeClass }, statusText));
+  };
+  const thresholdText = intl.formatMessage({
+    id: "thresholdText",
+    defaultMessage: text.thresholdPayoutText,
+  }, {
+    thresholdBalance: states.thresholdBalance,
+  });
+  return (h("div", { class: classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    states.loading ? (renderLoadingSkeleton()) : (h("div", { class: classes.CardContainer },
+      h("div", { class: classes.StatusContainer },
+        h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"
+          ? states.thresholdBalance
+            ? thresholdText
+            : ""
+          : states.nextPayoutDate),
+        states.badgeStatus === "thresholdPayout"
+          ? null
+          : renderStatusBadge(states.badgeStatus, text.statusBadgeText)),
+      h("h1", { class: classes.MainCurrency }, states.balance),
+      states.payoutType === "PAYPAL" ? (h("div", { class: classes.PaypalDetailsContainer },
+        h("span", { class: classes.PaypalEmail }, states.paypalEmailAddress),
+        h(PayPalIcon, null))) : (h("div", { class: classes.AccountDetailsContainer },
+        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 } = $n(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;
+    const currentDay = luxon.DateTime.now().day;
+    if (paymentDay === "1") {
+      return currentDay === 1
+        ? luxon.DateTime.now().toFormat("LLL dd, yyyy")
+        : luxon.DateTime.now()
+          .plus({ month: 1 })
+          .startOf("month")
+          .toFormat("LLL dd, yyyy");
+    }
+    else if (paymentDay === "15") {
+      return currentDay <= 15
+        ? luxon.DateTime.now()
+          .plus({ day: 15 - currentDay })
+          .toFormat("LLL dd, yyyy")
+        : luxon.DateTime.now()
+          .plus({ month: 1 })
+          .startOf("month")
+          .plus({ day: 14 })
+          .toFormat("LLL dd, yyyy");
+    }
+    else {
+      intl.formatMessage({
+        id: `nextPayoutBalance`,
+        defaultMessage: props.thresholdPayoutText,
+      }, {
+        thresholdBalance: (_a = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _a === void 0 ? void 0 : _a.paymentThreshold,
+      });
+    }
+  }
+  const paymentDay = getPayoutDetailedStatusText((_c = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _c === void 0 ? void 0 : _c.paymentDay);
+  const isPayoutToday = luxon.DateTime.now().toFormat("LLL dd, yyyy") === paymentDay;
+  return {
+    states: {
+      loading,
+      thresholdBalance: ((_d = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _d === void 0 ? void 0 : _d.paymentThreshold) ? `${publisher === null || publisher === void 0 ? void 0 : publisher.currency}${(_e = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _e === void 0 ? void 0 : _e.paymentThreshold}`
+        : undefined,
+      balance: (_f = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _f === void 0 ? void 0 : _f.balance,
+      badgeStatus: ((_g = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _g === void 0 ? void 0 : _g.paymentSchedulingType) !== "FIXED_DAY"
+        ? "thresholdPayout"
+        : isPayoutToday
+          ? "payoutToday"
+          : "nextPayout",
+      payoutType: (_h = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _h === void 0 ? void 0 : _h.paymentMethod,
+      error: (_j = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _j === void 0 ? void 0 : _j.hold,
+      paypalEmailAddress: (_k = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _k === void 0 ? void 0 : _k.paypalEmailAddress,
+      cardNumberPreview: (_l = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _l === void 0 ? void 0 : _l.bankAccountNumber,
+      nextPayoutDate: paymentDay,
+    },
+    text: props.getTextProps(),
+  };
+}
+
+const PayoutDetailsCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     /**
-     * Placeholder text displayed in the country search dropdown
-     * @uiName Country field placeholder text
-     * @uiGroup General Form Properties
+     * Badge text indicating payout status
+     * @uiName Payout badge status text
      */
-    this.searchForCountryText = "Search for country..";
+    this.statusBadgeText = "{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }";
     /**
-     * Part of the alert displayed at the top of the page.
-     * @uiName Page load error message title
-     * @uiGroup General Form Properties
-     * @uiWidget textArea
+     * Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid.
+     * @uiName Payout schedule by threshold text
      */
-    this.loadingErrorAlertHeader = "There was a problem loading your form";
+    this.thresholdPayoutText = "Next payout occurs when balance is {thresholdBalance}";
     /**
-     * Part of the alert displayed at the top of the page.
-     * @uiName Page load error message description
-     * @uiGroup General Form Properties
-     * @uiWidget textArea
+     * Shown before the participant’s bank account information.
+     * @uiName Bank account field label
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
+    this.accountText = "Account";
     /**
-     * Displayed at the top of the page on all set up steps.
-     * @uiName Page description
-     * @uiGroup General Form Properties
+     * Text displayed for existing publishers that do not have saved banking information.
+     * @uiName Payout missing information subtext
      */
-    this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
+    this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
     /**
-     * Link text for contacting support team
-     * @uiName Suport link text
-     * @uiGroup General Form Properties
+     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
      */
-    this.supportLink = "support team";
+    this.stateController = "{}";
     h$1(this);
   }
   disconnectedCallback() { }
-  // this field is required prop
-  getGeneralStepTextProps(prefix) {
+  getTextProps() {
     const props = getProps(this);
     return {
-      ...extractProps(props, prefix),
-      generalErrorTitle: props.generalErrorTitle,
-      generalErrorDescription: props.generalErrorDescription,
-      fieldRequiredError: props.fieldRequiredError,
-      invalidCharacterError: props.invalidCharacterError,
-      fieldInvalidError: props.fieldInvalidError,
-      continueButton: props.continueButton,
-      backButton: props.backButton,
-      cancelButton: props.cancelButton,
-      isPartnerAlertHeader: props.isPartnerAlertHeader,
-      isPartnerAlertDescription: props.isPartnerAlertDescription,
-      loadingErrorAlertHeader: props.loadingErrorAlertHeader,
-      loadingErrorAlertDescription: props.loadingErrorAlertDescription,
-      taxAndPayoutsDescription: props.taxAndPayoutsDescription,
-      searchForCountryText: props.searchForCountryText,
-      formStep: props.formStep,
-      supportLink: props.supportLink,
+      ...props,
     };
   }
   render() {
-    var _a, _b;
-    const props = isDemo() ? useDemoTaxAndCash(this) : useTaxAndCash();
-    // @ts-ignore
-    if ((_a = this.demoData) === null || _a === void 0 ? void 0 : _a.showTextProps) {
-      const textProps = getProps(this);
-      return (h("div", null, (_b = Object.keys(textProps)) === null || _b === void 0 ? void 0 : _b.map((prop) => {
-        if (prop === "demoData")
-          return;
-        return (h("div", null, h("b", null, prop, ":"), " ", this[prop], h("hr", null)));
-      })));
-    }
-    switch (props.step) {
-      case "/1":
-        return (h("sqm-user-info-form", Object.assign({}, this.getGeneralStepTextProps("step1_"))));
-      case "/2":
-        return (h("sqm-indirect-tax-form", Object.assign({}, this.getGeneralStepTextProps("step2_"))));
-      case "/3":
-        return (h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"))));
-      case "/4":
-        return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
-      case "/dashboard":
-        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
-      case "/error":
-        return (h(ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: this.loadingErrorAlertDescription }));
-    }
-    return h(LoadingView, null);
+    const props = isDemo()
+      ? useDemoPayoutDetailsCard(this)
+      : usePayoutDetailsCard(this);
+    return (h(Host, null, h(PayoutDetailsCardView, { text: props.text, states: props.states })));
   }
 };
-function useDemoTaxAndCash(props) {
-  const [step, setStep] = In({
-    namespace: TAX_CONTEXT_NAMESPACE,
-    initialValue: "/1",
-  });
+function useDemoPayoutDetailsCard(props) {
   return cjs({
-    step,
-    setStep,
+    states: {
+      loading: false,
+      error: false,
+      thresholdBalance: "$50",
+      mainCurrency: { currencyText: "USD", amountText: "100.00" },
+      badgeStatus: "nextPayout",
+      payoutType: "BANK_TRANSFER",
+      nextPayoutDate: "March 14, 2024",
+      paypalEmailAddress: "joesmith@example.com",
+      otherCurrencies: false,
+      hasW9Pending: false,
+      hasDatePending: true,
+      cardNumberPreview: "XX2381",
+      balance: "20.00 USD",
+    },
+    text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$6 = {
+const style$5 = {
   ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
   WarningAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-warning-color-background)",
+      border: "none",
       maxWidth: "600px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
     },
   },
   WarningHoldAlertContainer: {
@@ -5380,7 +3839,7 @@ const style$6 = {
       backgroundColor: "transparent",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
     },
   },
   ErrorHoldAlertContainer: {
@@ -5391,13 +3850,13 @@ const style$6 = {
       backgroundColor: "transparent",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-warning-color-background)",
+      border: "none",
     },
   },
   BankingInformationContainer: {
@@ -5405,7 +3864,7 @@ const style$6 = {
   },
   IndirectTaxPreviewContainer: {
     marginTop: "var(--sl-spacing-x-large)",
-    borderTop: "1px solid var(--sl-color-neutral-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   IndirectTaxPreviewHeaderContainer: {
     marginTop: "var(--sl-spacing-large)",
@@ -5414,7 +3873,7 @@ const style$6 = {
     display: "flex",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
-      color: "var(--sl-color-green-500)",
+      color: "var(--sqm-success-color-text)",
     },
   },
   IndirectTaxPreviewDetails: {
@@ -5428,11 +3887,11 @@ const style$6 = {
     marginTop: "var(--sl-spacing-medium)",
   },
   NotRegisteredIndirectTaxText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   TaxDocumentsContainer: {
     marginTop: "var(--sl-spacing-xx-large)",
-    borderTop: "1px solid var(--sl-color-neutral-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   TaxDocumentsSectionHeaderContainer: {
     marginTop: "var(--sl-spacing-x-large)",
@@ -5449,7 +3908,7 @@ const style$6 = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   StatusAlert: {
@@ -5484,7 +3943,7 @@ const style$6 = {
   },
   TaxDocSubtext: {
     margin: "0",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     lineHeight: "var(--sl-spacing-medium)",
     fontSize: "var(--sl-font-size-small)",
     marginLeft: "1px",
@@ -5505,13 +3964,13 @@ const style$6 = {
     gap: "6px",
   },
   DescriptionText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-x-small)",
     marginBottom: "none",
     maxWidth: "492px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginTop: "0",
   },
@@ -5543,8 +4002,8 @@ const style$6 = {
   },
   DialogButton: { margin: "auto", width: "100%" },
 };
-const sheet$5 = createStyleSheet(style$6);
-const styleString$5 = sheet$5.toString();
+const sheet$4 = createStyleSheet(style$5);
+const styleString$4 = sheet$4.toString();
 const TaxAndCashDashboardView = (props) => {
   var _a, _b, _c, _d;
   const { states, text, callbacks, slots } = props;
@@ -5562,7 +4021,7 @@ const TaxAndCashDashboardView = (props) => {
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$5.classes.WarningHoldAlertContainer,
+          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -5575,7 +4034,7 @@ const TaxAndCashDashboardView = (props) => {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$5.classes.WarningHoldAlertContainer,
+          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -5588,7 +4047,7 @@ const TaxAndCashDashboardView = (props) => {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$5.classes.WarningHoldAlertContainer,
+          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -5601,7 +4060,7 @@ const TaxAndCashDashboardView = (props) => {
           }),
           alertType: "critical",
           icon: "exclamation-octagon",
-          class: sheet$5.classes.ErrorHoldAlertContainer,
+          class: sheet$4.classes.ErrorHoldAlertContainer,
         };
       case "HOLD":
         return {
@@ -5615,14 +4074,14 @@ const TaxAndCashDashboardView = (props) => {
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$5.classes.WarningHoldAlertContainer,
+          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       default:
         return;
     }
   }
   const statusMap = {
-    NOT_VERIFIED: (h("div", { class: sheet$5.classes.TaxFormDetailsContainer },
+    NOT_VERIFIED: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
       h("p", null, intl.formatMessage({
         id: `badgeTextAwaitingReview`,
@@ -5630,7 +4089,7 @@ const TaxAndCashDashboardView = (props) => {
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
-    ACTIVE: (h("div", { class: sheet$5.classes.TaxFormDetailsContainer },
+    ACTIVE: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
       h("p", null, intl.formatMessage({
         id: `badgeTextSubmittedOn`,
@@ -5640,12 +4099,12 @@ const TaxAndCashDashboardView = (props) => {
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
-    INACTIVE: (h("div", { class: sheet$5.classes.TaxFormDetailsContainer },
+    INACTIVE: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
       h("p", null, text.invalidForm))),
   };
   const alertMap = {
-    INACTIVE: (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.ErrorAlertContainer },
+    INACTIVE: (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("strong", null, intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
@@ -5695,9 +4154,9 @@ const TaxAndCashDashboardView = (props) => {
   };
   return (h("div", null,
     h("div", null,
-      h("style", { type: "text/css" }, styleString$5),
+      h("style", { type: "text/css" }, styleString$4),
       states.loadingError && (h("div", null,
-        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.ErrorAlertContainer },
+        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           h("strong", null, text.error.loadingErrorAlertHeader),
           h("br", null),
@@ -5707,7 +4166,7 @@ const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           })))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.ErrorAlertContainer },
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.generalTitle),
         h("br", null),
@@ -5722,49 +4181,49 @@ const TaxAndCashDashboardView = (props) => {
         h("strong", null, getAlert(states.payoutStatus).header),
         h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
         getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
-      h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$5.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
+      h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
-        h("sl-button", { slot: "footer", type: "primary", class: sheet$5.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
-        h("sl-button", { slot: "footer", type: "default", class: sheet$5.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+        h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
         h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
-        h("p", { class: sheet$5.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
-        h("div", { class: sheet$5.classes.BankingInformationContainer },
+        h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
+        h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
-          !states.loading && (h("p", { class: sheet$5.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$5.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
-      h("div", { class: sheet$5.classes.TaxDocumentsContainer },
-        h("div", null, states.loading ? (h("div", { class: sheet$5.classes.TaxSectionSkeletonContainer },
-          h("sl-skeleton", { class: sheet$5.classes.SkeletonOne }),
-          h("sl-skeleton", { class: sheet$5.classes.SkeletonTwo }))) : (h("div", null, states.noFormNeeded ? (h("div", null,
-          h("h3", { class: sheet$5.classes.TaxDocumentsSectionHeaderContainer }, text.taxDocumentSectionHeader),
-          h("p", { class: sheet$5.classes.TaxDocSubtext }, text.noFormNeededSubtext))) : (h("div", null,
-          h("span", { class: sheet$5.classes.TaxFormDetailsContainer },
-            h("div", { class: sheet$5.classes.StatusContainer },
+          !states.loading && (h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
+          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+      h("div", { class: sheet$4.classes.TaxDocumentsContainer },
+        h("div", null, states.loading ? (h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
+          h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+          h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (h("div", null, states.noFormNeeded ? (h("div", null,
+          h("h3", { class: sheet$4.classes.TaxDocumentsSectionHeaderContainer }, text.taxDocumentSectionHeader),
+          h("p", { class: sheet$4.classes.TaxDocSubtext }, text.noFormNeededSubtext))) : (h("div", null,
+          h("span", { class: sheet$4.classes.TaxFormDetailsContainer },
+            h("div", { class: sheet$4.classes.StatusContainer },
               h("h3", null, intl.formatMessage({
                 id: "section-subheader",
                 defaultMessage: text.taxDocumentSectionSubHeader,
               }, {
                 documentType: states.documentTypeString,
               })),
-              h("span", { class: sheet$5.classes.StatusAlert }, statusMap[states.status]))),
-          states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$5.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
-      h("div", { class: sheet$5.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet$5.classes.TaxSectionSkeletonContainer },
-        h("sl-skeleton", { class: sheet$5.classes.SkeletonOne }),
-        h("sl-skeleton", { class: sheet$5.classes.SkeletonTwo }))) : (h("div", null,
-        h("h3", { class: sheet$5.classes.IndirectTaxPreviewHeaderContainer },
+              h("span", { class: sheet$4.classes.StatusAlert }, statusMap[states.status]))),
+          states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$4.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+      h("div", { class: sheet$4.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
+        h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+        h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (h("div", null,
+        h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$5.classes.TooltipContainer },
-            h("sl-icon", { name: "info-circle", class: sheet$5.classes.ToolTip }))),
-        h("div", { class: sheet$5.classes.IndirectTaxPreviewDetails },
-          h("span", null, states.notRegistered ? (h("span", { class: sheet$5.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
+          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
+            h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+        h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
+          h("span", null, states.notRegistered ? (h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
             id: "notRegisteredForTax",
             defaultMessage: text.notRegisteredForTax,
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }))) : (getIndirectTaxRegisteredIn())),
-          !states.notRegistered && (h("div", { class: sheet$5.classes.TaxNumberContainer },
+          !states.notRegistered && (h("div", { class: sheet$4.classes.TaxNumberContainer },
             h("span", null, intl.formatMessage({
               id: `indirectTaxDetails`,
               defaultMessage: text.indirectTaxDetails,
@@ -5787,7 +4246,7 @@ const TaxAndCashDashboardView = (props) => {
                 }, {
                   subRegionTaxNumber: states.subRegionTaxNumber,
                 })))),
-          !states.notRegistered && (h("div", { class: sheet$5.classes.InvoiceTableContainer },
+          !states.notRegistered && (h("div", { class: sheet$4.classes.InvoiceTableContainer },
             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 },
               h("sqm-invoice-table-download-column", null),
               h("sqm-invoice-table-date-column", { "column-title": text.dateColumnTitle }),
@@ -6243,23 +4702,31 @@ const TaxAndCashDashboard = class {
   }
 };
 function useDemoTaxAndCashDashboard(props) {
+  // const states = parseStates(props.stateController);
   return cjs({
     states: {
       dateSubmitted: "today",
       documentType: "W9",
       documentTypeString: "W9",
-      status: "ACTIVE",
       country: "United States",
-      indirectTaxNumber: 55555555,
+      indirectTaxNumber: "55555555",
       indirectTaxType: "Indirect Tax",
-      noFormNeeded: true,
+      noFormNeeded: false,
       disabled: false,
       loading: false,
       showNewFormDialog: false,
       hasHold: false,
-      showVerifyIdentity: false,
+      subRegion: "CA",
+      subRegionTaxNumber: undefined,
+      qstNumber: undefined,
+      isBusinessEntity: false,
+      province: undefined,
+      notRegistered: true,
+      loadingError: false,
       payoutStatus: "DONE",
       veriffLoading: false,
+      canEditPayoutInfo: true,
+      status: "ACTIVE",
     },
     callbacks: {
       onClick: () => console.debug("check step"),
@@ -6269,6 +4736,13 @@ function useDemoTaxAndCashDashboard(props) {
       onVerifyClick: () => console.log("verify"),
     },
     text: props.getTextProps(),
+    slots: {
+      payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
+          states: {
+            badgeStatus: "nextPayout",
+          },
+        } })),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
@@ -7243,19 +5717,19 @@ const PHONE_EXTENSIONS = {
   },
 };
 
-const style$7 = {
+const style$6 = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "1px solid var(--sqm-danger-color-icon)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   TextContainer: {
@@ -7286,9 +5760,6 @@ const style$7 = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
-  DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -7299,26 +5770,31 @@ const style$7 = {
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   PhoneInputsSection: {
@@ -7341,9 +5817,9 @@ const style$7 = {
     },
   },
 };
-const sheet$6 = createStyleSheet(style$7);
-const styleString$6 = sheet$6.toString();
-const vanillaStyle$4 = `
+const sheet$5 = createStyleSheet(style$6);
+const styleString$5 = sheet$5.toString();
+const vanillaStyle$3 = `
     :host{
       display: block;   
     }
@@ -7352,6 +5828,11 @@ const vanillaStyle$4 = `
        padding: 0;
        box-sizing: border-box;
     }
+    a {
+      color: var(--sqm-text);
+      color: inherit !important;
+      text-decoration: underline;
+    }
 
     p {
       line-height: 18px;
@@ -7366,11 +5847,149 @@ const vanillaStyle$4 = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-  `;
+
+    sl-button[type="primary"]::part(base){
+        background-color: var(--sqm-primary-button-background);
+        color: var(--sqm-primary-button-color);
+        border-color: var(--sqm-primary-button-color-border);
+        border-radius: var(--sqm-primary-button-radius);
+    }
+
+    sl-button[type="primary"]::part(base):hover{
+        background-color: var(--sqm-primary-button-background-hover);
+    }
+
+    sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    }
+
+    sl-button[type="secondary"]::part(base){
+        background-color: var(--sqm-secondary-button-background);
+        color: var(--sqm-secondary-button-color);
+        border-color: var(--sqm-secondary-button-color-border);
+        border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover{
+        background-color: var(--sqm-secondary-button-background-hover);
+    }
+
+
+
+*::part(primarybutton-base){
+  background-color: var(--sqm-primary-button-background);
+  color: var(--sqm-primary-button-color);
+  border-color: var(--sqm-primary-button-color-border);
+  border-radius: var(--sqm-primary-button-radius);
+}
+
+*::part(primarybutton-base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+}
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
+}
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
+}
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(secondarybutton-base):hover{
+  background: var(--sqm-secondary-button-background-hover);
+}
+
+    sl-input::part(label),
+    sl-select::part(label),
+    sl-textarea::part(label){
+      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+      font-weight: var(--sl-font-weight-semibold);
+      color: var(--sqm-input-label-color, var(--sqm-text), black);
+    }
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
+    sl-input::part(base),
+    sl-dropdown::part(base),
+    sl-textarea::part(base){
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-thickness, 1px);
+      border-style: solid; 
+      border-color: var(--sqm-input-border-color, #ccc); 
+    }
+
+
+    sl-select::part(menu) {
+      background: var(--sqm-input-background, inherit);
+      color: var(--sqm-input-color, inherit);
+      border:none;
+    }
+
+    sl-select::part(panel) {
+      border-radius: var(--sqm-border-radius-normal);
+    }
+
+    sl-select::part(help-text) {
+      color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d));
+    }
+
+    sl-input::part(base):focus,
+    sl-select::part(base):focus, /* Corrected part name for sl-select */
+    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
+      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
+    }
+
+    sl-input[disabled]::part(label),
+    sl-select[disabled]::part(label),
+    sl-textarea[disabled]::part(label){
+      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+    }
+
+    sl-input[disabled]::part(base),
+    sl-select[disabled]::part(base),
+    sl-textarea[disabled]::part(base){
+      background: var(--sqm-input-disabled-background, #f5f5f5);
+      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
+    }
+
+
+    sl-input::part(input):-webkit-autofill {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:hover {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:focus {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+`;
 const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;
-  const { classes } = sheet$6;
+  const { classes } = sheet$5;
   const bankingCollectionText = intl.formatMessage({
     id: "bankingCollectionText",
     defaultMessage: text.allowBankingCollection,
@@ -7393,10 +6012,10 @@ const UserInfoFormView = (props) => {
   }
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
-      styleString$6,
-      vanillaStyle$4),
+      styleString$5,
+      vanillaStyle$3),
     states.loadingError && (h("div", null,
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$6.classes.AlertContainer },
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.AlertContainer },
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.loadingErrorAlertHeader),
         h("br", null),
@@ -7407,7 +6026,7 @@ const UserInfoFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("br", null))),
-    states.loading ? (h(GeneralLoadingView, null)) : (h("div", null,
+    states.loading ? (h(LoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
         h("div", null,
           !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -7416,7 +6035,7 @@ const UserInfoFormView = (props) => {
           }, { step: states.step, count: FORM_STEPS }))),
           h("h3", null, text.personalInformation),
           h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$6.classes.AlertContainer },
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$5.classes.AlertContainer },
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.generalTitle),
         h("br", null),
@@ -7426,7 +6045,7 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      (states.isPartner || states.isUser) && (h("sl-alert", { type: "primary", open: true, class: sheet$6.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+      (states.isPartner || states.isUser) && (h("sl-alert", { type: "primary", open: true, class: sheet$5.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
         h("sl-icon", { slot: "icon", name: "info-circle" }),
         h("strong", null, text.isPartnerAlertHeader),
         h("br", null),
@@ -7438,7 +6057,7 @@ const UserInfoFormView = (props) => {
         }))),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }
@@ -7920,19 +6539,20 @@ const TaxForm = class {
   }
   render() {
     const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (h(Host, null, h(UserInfoFormView, { data: props.data,
+    return (h(UserInfoFormView, { data: props.data,
       // @ts-ignore
       states: props.states, callbacks: {
         ...props.callbacks,
         onSubmit: props.onSubmit,
-      }, text: props.text, refs: props.refs })));
+      }, text: props.text, refs: props.refs }));
   }
 };
 function useDemoUserInfoForm(props) {
   const setStep = En(TAX_CONTEXT_NAMESPACE);
+  // @ts-ignore
   return cjs({
     setStep,
-    onSubmit: () => {
+    onSubmit: async () => {
       setStep("/2");
     },
     onRadioClick: () => { },
@@ -7975,4 +6595,4 @@ function useDemoUserInfoForm(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BankingInfoForm as sqm_banking_info_form, WidgetCodeVerification as sqm_code_verification, DocusignForm as sqm_docusign_form, IndirectTaxForm as sqm_indirect_tax_form, InvoiceTable as sqm_invoice_table, InvoiceTableDataCell as sqm_invoice_table_data_cell, InvoiceTableDataColumn as sqm_invoice_table_data_column, RewardTableDateCell as sqm_invoice_table_date_cell, InvoiceTableDateColumn as sqm_invoice_table_date_column, InvoiceTableDownloadCell as sqm_invoice_table_download_cell, InvoiceTableGenericColumn as sqm_invoice_table_download_column, PayoutDetailsCard as sqm_payout_details_card, TableCell as sqm_table_cell, TableRow as sqm_table_row, TaxAndCashMonolith as sqm_tax_and_cash, TaxAndCashDashboard as sqm_tax_and_cash_dashboard, TaxForm as sqm_user_info_form };
+export { BankingInfoForm as sqm_banking_info_form, DocusignForm as sqm_docusign_form, IndirectTaxForm as sqm_indirect_tax_form, InvoiceTable as sqm_invoice_table, InvoiceTableDataColumn as sqm_invoice_table_data_column, InvoiceTableDateColumn as sqm_invoice_table_date_column, InvoiceTableGenericColumn as sqm_invoice_table_download_column, PayoutDetailsCard as sqm_payout_details_card, TaxAndCashDashboard as sqm_tax_and_cash_dashboard, TaxForm as sqm_user_info_form };