@saasquatch/mint-components 2.2.0 → 2.3.0-10

package/dist/cjs/sqm-user-info-form-view-374a3f01.js

@@ -0,0 +1,1427 @@
+'use strict';
+
+const index = require('./index-8277cbb3.js');
+const global = require('./global-b7b1b8fe.js');
+const JSS = require('./JSS-8503a151.js');
+const subregions = require('./subregions-984e30d7.js');
+const data = require('./data-89ac73dd.js');
+
+const style = {
+  Description: {
+    fontSize: "var(--sl-font-size-small)",
+    marginTop: "var(--sl-spacing-small)",
+    margin: "0 0 var(--sl-spacing-large)",
+    color: "var(--sqm-text-subdued)",
+  },
+  Header: {
+    fontSize: "var(--sl-font-size-large)",
+    fontWeight: "var(-sl-font-weight-semibold)",
+    margin: "0 0 var(--sl-spacing-xxx-small)",
+  },
+  Container: {},
+  InvoiceTableContaier: {
+    "& sl-details::part(base)": {
+      border: "none",
+    },
+    "& sl-details::part(content)": {
+      padding: 0,
+    },
+    "& sl-details::part(header)": {
+      fontSize: "var(--sl-font-size-medium)",
+      padding: "0px",
+    },
+    "& sl-details::part(summary)": {
+      fontWeight: "var(-sl-font-weight-semibold)",
+    },
+    "& sl-details::part(summary-icon)": {
+      marginRight: "100%",
+      marginLeft: "var(--sl-spacing-x-small)",
+      transform: "rotate(90deg)",
+    },
+    "& sl-details[open]::part(summary-icon)": {
+      transform: "rotate(270deg)",
+    },
+  },
+};
+function InvoiceTableView(props, children) {
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+    :host{
+      display: block;
+    }`;
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    index.h("div", { class: sheet.classes.InvoiceTableContaier },
+      index.h("sl-details", { summary: props.header },
+        index.h("p", { class: sheet.classes.Description }, props.description),
+        children))));
+}
+
+const style$1 = {
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+  },
+  WarningAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+      maxWidth: "600px",
+    },
+  },
+  WarningHoldAlertContainer: {
+    marginLeft: "-20px",
+    "&::part(base)": {
+      maxWidth: "850px",
+      border: "none",
+      backgroundColor: "transparent",
+      color: "var(--sqm-text)",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sqm-warning-color-icon)",
+    },
+  },
+  ErrorHoldAlertContainer: {
+    marginLeft: "-20px",
+    "&::part(base)": {
+      maxWidth: "850px",
+      border: "none",
+      backgroundColor: "transparent",
+      color: "var(--sqm-text)",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sqm-danger-color-icon)",
+    },
+  },
+  ExpiringSoonAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+    },
+  },
+  BankingInformationContainer: {
+    maxWidth: "700px",
+  },
+  IndirectTaxPreviewContainer: {
+    marginTop: "var(--sl-spacing-x-large)",
+    borderTop: "1px solid var(--sl-color-neutral-200)",
+  },
+  IndirectTaxPreviewHeaderContainer: {
+    marginTop: "var(--sl-spacing-large)",
+    marginBottom: "var(--sl-spacing-xx-small)",
+    margin: "0",
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--sl-spacing-x-small)",
+    "&::part(base)": {
+      color: "var(--sqm-text)",
+    },
+  },
+  IndirectTaxPreviewDetails: {
+    gap: "var(--sl-spacing-x-small)",
+    display: "flex",
+    flexDirection: "column",
+    lineHeight: "var(--sl-spacing-medium)",
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sqm-text-subdued)",
+  },
+  InvoiceTableContainer: {
+    marginTop: "var(--sl-spacing-medium)",
+  },
+  NotRegisteredIndirectTaxText: {
+    color: "var(--sqm-text-subdued)",
+  },
+  TaxDocumentsContainer: {
+    marginTop: "var(--sl-spacing-xx-large)",
+    borderTop: "1px solid var(--sl-color-neutral-200)",
+  },
+  TaxDocumentsSectionHeaderContainer: {
+    marginTop: "var(--sl-spacing-x-large)",
+    marginBottom: "var(--sl-spacing-xx-small)",
+  },
+  StatusContainer: {
+    marginTop: "var(--sl-spacing-x-large)",
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-x-small)",
+    "& h3": {
+      margin: "0",
+    },
+    "& p": {
+      margin: "0",
+      paddingTop: "2px",
+    },
+  },
+  StatusAlert: {
+    fontSize: "var(--sl-font-size-small)",
+  },
+  TaxFormDetailsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
+  NewFormButton: {
+    marginTop: "var(--sl-spacing-large)",
+    maxWidth: "300px",
+  },
+  EditBankDetailsButton: {
+    marginTop: "var(--sl-spacing-large)",
+  },
+  TaxSectionSkeletonContainer: {
+    display: "flex",
+    flexDirection: "column",
+    marginTop: "var(--sl-spacing-x-large)",
+  },
+  TaxDocSubtext: {
+    margin: "0",
+    color: "var(--sqm-text-subdued)",
+    lineHeight: "var(--sl-spacing-medium)",
+    fontSize: "var(--sl-font-size-small)",
+    marginLeft: "1px",
+  },
+  TooltipContainer: {
+    display: "flex",
+    textAlign: "center",
+    width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
+  },
+  ToolTip: {
+    top: "6px",
+    width: "16px",
+    height: "16px",
+  },
+  TaxNumberContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+  },
+  DescriptionText: {
+    color: "var(--sqm-text-subdued)",
+    fontSize: "var(--sl-font-size-x-small)",
+    marginBottom: "none",
+    maxWidth: "492px",
+  },
+  PageDescriptionText: {
+    color: "var(--sqm-text-subdued)",
+    fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
+  },
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "420px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "600",
+      marginTop: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+    },
+    "&::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%" },
+  SuccessBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+    },
+  },
+  ErrorBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+    },
+  },
+  SubduedText: {
+    color: "var(--sqm-text-subdued)",
+  },
+  ButtonContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    flexWrap: "wrap",
+  },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
+};
+const sheet = JSS.createStyleSheet(style$1);
+const styleString = sheet.toString();
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+
+    sl-button[type="secondary"]::part(base) {
+    font-family: var(--sqm-primary-font);
+      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);
+      color: var(--sqm-secondary-button-color-hover);
+      border-color: var(--sqm-secondary-button-border-color-hover);
+    }
+    
+  `;
+const TaxAndCashDashboardView = (props) => {
+  var _a;
+  const { states, text, callbacks, slots } = props;
+  function getAlert(status) {
+    switch (status) {
+      case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY_DEFER_W9") {
+          return {
+            header: text.w9RequiredHeader,
+            description: global.intl.formatMessage({
+              id: "w9RequiredDescription",
+              defaultMessage: text.w9RequiredDescription,
+            }, {
+              termsAndConditions: (index.h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
+            }),
+            button: (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", onClick: callbacks.onNewFormClick }, text.w9RequiredButtonText)),
+            alertType: "warning",
+            icon: "info-circle",
+            class: sheet.classes.WarningHoldAlertContainer,
+          };
+        }
+        else {
+          return {
+            header: text.payoutHoldAlertHeader,
+            description: global.intl.formatMessage({
+              id: "payoutHoldAlertDescription",
+              defaultMessage: text.payoutHoldAlertDescription,
+            }, {
+              supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+            }),
+            buttonText: null,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+            class: sheet.classes.WarningHoldAlertContainer,
+          };
+        }
+      case "VERIFICATION:REQUIRED":
+        return {
+          header: text.verificationRequiredHeader,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "error",
+          icon: "exclamation-octagon",
+          class: sheet.classes.ErrorHoldAlertContainer,
+        };
+      case "NEW_PAYEE_REVIEW":
+        return {
+          header: text.accountReviewHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.accountReviewDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "PAYMENT_HOLD_ON_CHANGE":
+        return {
+          header: text.paymentHoldOnChangeHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentHoldOnChangeDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "BENEFICIARY_NAME_INVALID":
+        return {
+          header: text.beneficiaryNameInvalidHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameInvalidDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (index.h("div", { class: sheet.classes.ButtonContainer },
+            index.h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "BENEFICIARY_NAME_MISMATCH":
+        return {
+          header: text.beneficiaryNameMismatchHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameMismatchDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (index.h("div", { class: sheet.classes.ButtonContainer },
+            index.h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "BANK_TAX_NAME_MISMATCH":
+        return {
+          header: text.bankTaxNameMismatchHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.bankTaxNameMismatchDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (index.h("div", { class: sheet.classes.ButtonContainer },
+            index.h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "WITHDRAWAL_SETTINGS_INVALID":
+        return {
+          header: text.withdrawalSettingsInvalidHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.withdrawalSettingsInvalidDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "PAYMENT_RETURNED":
+        return {
+          header: text.paymentReturnedHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentReturnedDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (index.h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)),
+          alertType: "error",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "HOLD":
+        return {
+          header: text.payoutHoldAlertHeader,
+          description: global.intl.formatMessage({
+            id: "payoutHoldAlertDescription",
+            defaultMessage: text.payoutHoldAlertDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      default:
+        return;
+    }
+  }
+  const statusMap = {
+    NOT_VERIFIED: (index.h("div", { class: sheet.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { class: sheet.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
+      index.h("p", { class: sheet.classes.SubduedText }, global.intl.formatMessage({
+        id: `badgeTextAwaitingReview`,
+        defaultMessage: text.badgeTextAwaitingReview,
+      }, {
+        dateSubmitted: states.dateSubmitted,
+      })))),
+    ACTIVE: (index.h("div", { class: sheet.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { class: sheet.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
+      index.h("p", { class: sheet.classes.SubduedText }, global.intl.formatMessage({
+        id: `badgeTextSubmittedOn`,
+        defaultMessage: states.documentType === "W9" || !states.documentType
+          ? text.badgeTextSubmittedOn
+          : text.badgeTextSubmittedOnW8,
+      }, {
+        dateSubmitted: states.dateSubmitted,
+      })))),
+    INACTIVE: (index.h("div", { class: sheet.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { class: sheet.classes.ErrorBadge, type: "danger", pill: true }, text.statusTextNotActive),
+      index.h("p", { class: sheet.classes.SubduedText }, text.invalidForm))),
+    undefined: (index.h("div", { class: sheet.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "danger", pill: true }, text.statusTextRequired),
+      index.h("p", null, global.intl.formatMessage({
+        id: `requiredTaxForm`,
+        defaultMessage: text.requiredTaxForm,
+      }, {
+        taxFormType: states.documentType,
+      })))),
+  };
+  const alertMap = {
+    INACTIVE: (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", class: sheet.classes.ErrorHoldAlertContainer, type: "danger", open: true },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, global.intl.formatMessage({
+        id: `taxAlertHeaderNotActive`,
+        defaultMessage: states.documentType === "W9"
+          ? text.taxAlertHeaderNotActiveW9
+          : text.taxAlertHeaderNotActiveW8,
+      }, {
+        documentType: states.documentType || "Your",
+      })),
+      index.h("br", null),
+      global.intl.formatMessage({
+        id: `taxAlertMessage`,
+        defaultMessage: states.documentType === "W9"
+          ? text.taxAlertNotActiveMessageW9
+          : text.taxAlertNotActiveMessageW8,
+      }, {
+        documentType: states.documentTypeString || "tax",
+      }))),
+  };
+  const getIndirectTaxRegisteredIn = () => {
+    if (states.province) {
+      return global.intl.formatMessage({
+        id: `indirectTaxInfoCanada`,
+        defaultMessage: text.indirectTaxInfoCanada,
+      }, {
+        country: "Canada",
+        province: states.province,
+      });
+    }
+    else if (states.subRegion) {
+      return global.intl.formatMessage({
+        id: `indirectTaxInfoSpain`,
+        defaultMessage: text.indirectTaxInfoSpain,
+      }, {
+        country: states.country,
+        subRegion: states.subRegion,
+      });
+    }
+    else {
+      return global.intl.formatMessage({
+        id: `indirectTaxInfoOtherCountry`,
+        defaultMessage: text.indirectTaxInfoOtherCountry,
+      }, {
+        country: states.country,
+      });
+    }
+  };
+  const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+    return () => {
+      trigger.removeEventListener("mouseenter", show);
+      trigger.removeEventListener("mouseleave", scheduleHide);
+      panel.removeEventListener("mouseenter", show);
+      panel.removeEventListener("mouseleave", scheduleHide);
+      clearTimeout(hideTimeout);
+    };
+  };
+  return (index.h("div", null,
+    index.h("div", null,
+      index.h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      states.loadingError && (index.h("div", null,
+        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
+          index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          index.h("strong", null, text.error.loadingErrorAlertHeader),
+          index.h("br", null),
+          global.intl.formatMessage({
+            id: "loadingErrorAlertDescription",
+            defaultMessage: text.error.loadingErrorAlertDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          })))),
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.generalTitle),
+        index.h("br", null),
+        global.intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
+      alertInfo && (index.h("sqm-form-message", { loading: states.loading, exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
+        index.h("strong", null, alertInfo.header),
+        index.h("p", { style: { margin: "0" } }, alertInfo.description),
+        alertInfo.buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
+        alertInfo.button ? (alertInfo.button) : (index.h("div", { style: { display: "none" } })))),
+      index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
+        index.h("p", null, text.replaceTaxFormModalBodyText),
+        index.h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        index.h("sl-button", { slot: "footer", type: "default", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+      states.status === "INACTIVE" && alertMap[states.status],
+      index.h("div", null,
+        index.h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
+        index.h("div", { class: sheet.classes.BankingInformationContainer },
+          slots.payoutDetailsCardSlot,
+          !states.loading && (index.h("p", { class: sheet.classes.DescriptionText }, text.payoutFromImpact)),
+          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, exportparts: "base: secondarybutton-base", type: "secondary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+      (!states.noFormNeeded || !!states.status) && (index.h("div", { class: sheet.classes.TaxDocumentsContainer },
+        index.h("div", null, states.loading ? (index.h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
+          index.h("sqm-skeleton", { width: "15%", height: "10px" }),
+          index.h("sqm-skeleton", { width: "25%", height: "24px" }))) : (index.h("div", null,
+          index.h("div", null,
+            index.h("span", { class: sheet.classes.TaxFormDetailsContainer },
+              index.h("div", { class: sheet.classes.StatusContainer },
+                index.h("h3", null, states.documentType
+                  ? global.intl.formatMessage({
+                    id: "section-subheader",
+                    defaultMessage: text.taxDocumentSectionSubHeader,
+                  }, {
+                    documentType: states.documentTypeString,
+                  })
+                  : text.taxDocumentSectionSubHeaderNoDocument),
+                index.h("span", { class: sheet.classes.StatusAlert }, statusMap[states.status]))),
+            (!states.noFormNeeded || !!states.status) &&
+              states.status !== "NOT_VERIFIED" && (index.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+      index.h("div", { class: sheet.classes.IndirectTaxPreviewContainer }, states.loading ? (index.h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
+        index.h("sqm-skeleton", { width: "15%", height: "10px" }),
+        index.h("sqm-skeleton", { width: "25%", height: "24px" }))) : (index.h("div", null,
+        index.h("h3", { class: sheet.classes.IndirectTaxPreviewHeaderContainer },
+          text.indirectTaxInfoSectionHeader,
+          index.h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet.classes.DropdownTooltipContainer },
+            index.h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet.classes.ToolTip, style: { cursor: "pointer" } }),
+            index.h("div", { class: sheet.classes.DropdownContent },
+              index.h("div", { class: sheet.classes.DropdownArrow }),
+              global.intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet.classes.DropdownLink }, text.supportLink)),
+              })))),
+        index.h("div", { class: sheet.classes.IndirectTaxPreviewDetails },
+          index.h("span", null, states.notRegistered ? (index.h("span", { class: sheet.classes.NotRegisteredIndirectTaxText }, global.intl.formatMessage({
+            id: "notRegisteredForTax",
+            defaultMessage: text.notRegisteredForTax,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }))) : (getIndirectTaxRegisteredIn())),
+          !states.notRegistered && (index.h("div", { class: sheet.classes.TaxNumberContainer },
+            index.h("span", null, global.intl.formatMessage({
+              id: `indirectTaxDetails`,
+              defaultMessage: text.indirectTaxDetails,
+            }, {
+              indirectTaxType: states.indirectTaxType,
+              indirectTaxNumber: states.indirectTaxNumber,
+            })),
+            index.h("span", null,
+              states.qstNumber &&
+                global.intl.formatMessage({
+                  id: `qstNumber`,
+                  defaultMessage: text.qstNumber,
+                }, {
+                  qstNumber: states.qstNumber,
+                }),
+              states.subRegionTaxNumber &&
+                global.intl.formatMessage({
+                  id: `subRegionTaxNumber`,
+                  defaultMessage: text.subRegionTaxNumber,
+                }, {
+                  subRegionTaxNumber: states.subRegionTaxNumber,
+                })))),
+          !states.notRegistered && (index.h("div", { class: sheet.classes.InvoiceTableContainer },
+            index.h("sqm-invoice-table", { description: text.invoiceDescription, "prev-label": text.invoicePrevLabel, "more-label": text.invoiceMoreLabel, header: text.invoiceHeader, "empty-state-header": text.invoiceEmptyStateHeader, "empty-state-text": text.invoiceEmptyStateText },
+              index.h("sqm-invoice-table-download-column", null),
+              index.h("sqm-invoice-table-date-column", { "column-title": text.dateColumnTitle }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.invoiceColumnTitle, property: "invoiceId" }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.earningsColumnTitle, property: "earnings" }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.indirectTaxColumnTitle, property: "indirectTax" }),
+              index.h("sqm-invoice-table-data-column", { "column-title": text.earningsAfterTaxColumnTitle, property: "netEarnings" })))))))))));
+};
+
+const vatLabels = {
+  GB: "VAT",
+  AU: "GST",
+  NZ: "GST",
+  CA: "HST",
+  AT: "VAT",
+  BE: "VAT",
+  BG: "VAT",
+  HR: "VAT",
+  CY: "VAT",
+  CZ: "VAT",
+  DK: "VAT",
+  EE: "VAT",
+  FI: "VAT",
+  FR: "VAT",
+  DE: "VAT",
+  GR: "VAT",
+  HU: "VAT",
+  IE: "VAT",
+  IT: "VAT",
+  LV: "VAT",
+  LT: "VAT",
+  LU: "VAT",
+  MT: "VAT",
+  NL: "VAT",
+  PL: "VAT",
+  PT: "VAT",
+  RO: "VAT",
+  SK: "VAT",
+  SI: "VAT",
+  ES: "VAT",
+  SE: "VAT",
+  IS: "VAT",
+  IN: "GST",
+  IL: "VAT",
+  JP: "CT",
+  MX: "VAT",
+  NO: "VAT",
+  SG: "GST",
+  ZA: "VAT",
+  KR: "VAT",
+  CH: "VAT",
+  TW: "VAT",
+  TH: "VAT",
+  PH: "VAT",
+  MY: "SST",
+  AE: "VAT",
+  TR: "VAT",
+  RU: "VAT",
+};
+
+const style$2 = {
+  Container: {
+    width: "100%",
+  },
+  InputContainer: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+    maxWidth: "450px",
+  },
+  ConditionalInputsContainer: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "16px",
+  },
+  HR: {
+    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    margin: "10px 0",
+  },
+  Input: { maxWidth: "500px" },
+  Checkbox: {
+    "&::part(control)": {
+      borderRadius: "0 !important",
+    },
+  },
+  SearchInput: {
+    padding: "var(--sl-spacing-x-small)",
+  },
+  ErrorInput: {
+    maxWidth: "500px",
+    "&::part(base)": {
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sqm-danger-color-text)",
+    },
+  },
+};
+const sheet$1 = JSS.createStyleSheet(style$2);
+const styleString$1 = sheet$1.toString();
+const vanillaStyle$1 = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+    sl-menu-item::part(base) {
+      color: var(--sqm-input-color);
+    }
+
+    sl-menu-item::part(base):hover {
+      background-color: var(--sqm-input-border-color-hover);
+    }
+    sl-checkbox[checked]::part(control){
+      background-color: var(--sqm-input-border-color-focus);
+    }
+
+    sl-checkbox[checked]::part(checked-icon){
+      color: var(--sqm-input-background);
+    }
+  `;
+const OtherRegionSlotView = (props) => {
+  var _a, _b, _c;
+  const { states, states: { formState }, callbacks, text, } = props;
+  const { classes } = sheet$1;
+  const getTaxFieldLabel = (taxType) => {
+    return global.intl.formatMessage({
+      id: `tax-field-label${taxType}`,
+      defaultMessage: text.indirectTaxNumber,
+    }, { taxType });
+  };
+  const getTaxFieldError = (taxType) => {
+    return global.intl.formatMessage({
+      id: `tax-field-label${taxType}`,
+      defaultMessage: text.error.indirectTaxNumber,
+    }, { taxType });
+  };
+  const IndirectTaxNumberInput = ({ label, error, name, }) => {
+    var _a;
+    return (index.h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: label, disabled: states.loading || states.disabled, value: formState[name] }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a[name]) && {
+      class: classes.ErrorInput,
+      helpText: error,
+    }), { id: name, name: `/${name}` })));
+  };
+  const SpainFields = () => {
+    var _a, _b;
+    return (index.h("div", { class: classes.ConditionalInputsContainer },
+      index.h("sl-select", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.subRegion, label: text.subRegion, disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
+        class: classes.ErrorInput,
+        helpText: subregions.formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
+      }), { id: "subRegion", name: "/subRegion" }), props.data.esRegions.map((r) => (index.h("sl-menu-item", { value: r.regionCode }, r.displayName)))),
+      index.h(IndirectTaxNumberInput, { name: "indirectTaxNumber", label: getTaxFieldLabel("VAT"), error: getTaxFieldError("VAT") }),
+      index.h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
+      formState.hasSubRegionTaxNumber && (index.h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.subRegionTaxNumberLabel, disabled: states.loading || states.disabled, value: formState.subRegionTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.subRegionTaxNumber) && {
+        class: classes.ErrorInput,
+        helpText: subregions.formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
+      }), { id: "subRegionTaxNumber", name: "/subRegionTaxNumber" })))));
+  };
+  const CanadaFields = () => {
+    var _a, _b;
+    const { classes } = sheet$1;
+    const currentTaxType = (_a = subregions.INDIRECT_TAX_PROVINCES === null || subregions.INDIRECT_TAX_PROVINCES === void 0 ? void 0 : subregions.INDIRECT_TAX_PROVINCES.find((p) => p.regionCode === formState.province)) === null || _a === void 0 ? void 0 : _a.taxType;
+    return (index.h("div", { class: classes.ConditionalInputsContainer },
+      index.h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.province, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("province", e) }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.province) && {
+        class: classes.ErrorInput,
+        helpText: subregions.formatErrorMessage(text.province, text.error.fieldRequiredError),
+      }), { id: "province", name: "/province" }), props.data.provinces.map((p) => (index.h("sl-menu-item", { value: p.regionCode }, p.displayName)))),
+      currentTaxType === "GST" && (index.h(IndirectTaxNumberInput, { label: getTaxFieldLabel("GST"), error: getTaxFieldError("GST"), name: "indirectTaxNumber" })),
+      currentTaxType === "HST" && (index.h(IndirectTaxNumberInput, { label: getTaxFieldLabel("HST"), error: getTaxFieldError("HST"), name: "indirectTaxNumber" })),
+      formState.province === "QUEBEC" && (index.h("div", { class: classes.ConditionalInputsContainer },
+        index.h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
+        formState.hasQst && (index.h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: subregions.formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
+  };
+  const getActiveForm = (selectedRegion) => {
+    var _a;
+    switch (selectedRegion) {
+      case "CA":
+        return index.h(CanadaFields, null);
+      case "ES":
+        return index.h(SpainFields, null);
+      default:
+        return (index.h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.indirectTaxNumber, label: getTaxFieldLabel(vatLabels[selectedRegion] || "GENERAL"), disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
+          class: classes.ErrorInput,
+          helpText: getTaxFieldError(vatLabels[selectedRegion] || "GENERAL"),
+        }), { id: "indirectTaxNumber", name: "/indirectTaxNumber" })));
+    }
+  };
+  const activeForm = getActiveForm(formState.selectedRegion);
+  return (index.h("div", { style: states.hide ? { display: "none" } : {} },
+    index.h("form", { class: classes.Container },
+      index.h("style", { type: "text/css" },
+        styleString$1,
+        vanillaStyle$1),
+      index.h("hr", { class: classes.HR }),
+      index.h("div", { class: classes.InputContainer },
+        index.h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.selectedRegion, exportparts: "label: input-label, base: input-base", label: text.selectedRegion, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("selectedRegion", e) }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
+          class: classes.ErrorInput,
+          helpText: subregions.formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
+        }), { id: "selectedRegion", name: "/selectedRegion" }),
+          index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+              // Stop shoelace intercepting key presses
+              e.stopPropagation();
+            }, "onSl-input": (e) => {
+              callbacks.setCountrySearch(e.target.value);
+            } }), (_b = props.data.countries) === null || _b === void 0 ? void 0 :
+          _b.map((c) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_c = props.data.allCountries) === null || _c === void 0 ? void 0 :
+          _c.map((c) => (index.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
+        activeForm),
+      index.h("hr", { class: classes.HR }))));
+};
+
+const style$3 = {
+  FormWrapper: {},
+  ErrorInput: {
+    "&::part(base)": {
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sqm-danger-color-text)",
+    },
+  },
+  ErrorText: {
+    color: "var(--sqm-danger-color-text)",
+    marginTop: "10px",
+  },
+  TextContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "24px",
+    paddingBottom: "16px",
+  },
+  InputContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "24px",
+    paddingBottom: "36px",
+    maxWidth: "450px",
+  },
+  SearchInput: {
+    padding: "var(--sl-spacing-x-small)",
+  },
+  BtnContainer: {
+    paddingTop: "36px",
+    display: "flex",
+    gap: "8px",
+  },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  BoldText: {
+    fontWeight: "bold",
+  },
+  RoundedCheckbox: {
+    "&::part(control)": {
+      borderRadius: "50%",
+    },
+  },
+  PageDescriptionText: {
+    color: "var(--sqm-text-subdued)",
+    fontSize: "var(--sl-font-size-medium)",
+  },
+  PhoneInputsSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    "& p": {
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sqm-input-label-color)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+  },
+  PhoneInputsContainer: {
+    display: "flex",
+    gap: "4px",
+    width: "100%",
+    "& #phoneNumber": {
+      width: "100%",
+      minWidth: "0px",
+    },
+  },
+};
+const sheet$2 = JSS.createStyleSheet(style$3);
+const styleString$2 = sheet$2.toString();
+const vanillaStyle$2 = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+    a {
+      color: var(--sqm-text);
+      color: inherit !important;
+      text-decoration: underline;
+    }
+
+    p {
+      line-height: 18px;
+      font-size: var(--sl-font-size-small);
+    }
+
+    sl-radio-group::part(base) {
+      display: flex;
+      flex-direction: column;
+    }
+
+    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-menu-item::part(base) {
+      color: var(--sqm-input-color);
+    }
+
+     sl-menu-item::part(base):hover {
+      background-color: var(--sqm-input-border-color-hover);
+    }
+
+    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(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;
+    }
+
+    sl-checkbox::part(label){
+      color: var(--sqm-text);
+    }
+
+    sl-checkbox[checked]::part(control){
+      background-color: var(--sqm-input-border-color-focus);
+    }
+
+    sl-checkbox[checked]::part(checked-icon){
+      color: var(--sqm-input-background);
+    }
+`;
+const UserInfoFormView = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+  const { states, states: { formState }, callbacks, text, refs, data: data$1, } = props;
+  const { classes } = sheet$2;
+  const bankingCollectionText = global.intl.formatMessage({
+    id: "bankingCollectionText",
+    defaultMessage: text.allowBankingCollection,
+  }, {
+    termsAndConditionsLink: (index.h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
+  });
+  let regionLabel = undefined;
+  switch (data$1.regionLabelEnum) {
+    case "STATE":
+      regionLabel = text.state;
+      break;
+    case "PROVINCE":
+      regionLabel = text.province;
+      break;
+    case "REGION":
+      regionLabel = text.region;
+      break;
+    default:
+      regionLabel = text.state;
+  }
+  // when creating an impact connection without sending phoneNumber data, the impactAPI defaults the value to "0000000" and the phoneNumberCountryCode to "DZ"
+  function isDisabledPartnerInput(field) {
+    var _a, _b, _c, _d;
+    if (((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a.phoneNumber) === "0000000" &&
+      (field === "phoneNumber" || field === "phoneNumberCountryCode")) {
+      return false;
+    }
+    // if bad phone number was previously saved, unlock the field so user can correct it
+    if ((field === "phoneNumber" || field === "phoneNumberCountryCode") &&
+      states.isPartner &&
+      !subregions.isValidI18nPhoneNumber((_b = data$1.partnerData) === null || _b === void 0 ? void 0 : _b.phoneNumberCountryCode, (_c = data$1.partnerData) === null || _c === void 0 ? void 0 : _c.phoneNumber)) {
+      return false;
+    }
+    return states.isPartner && !!((_d = data$1.partnerData) === null || _d === void 0 ? void 0 : _d[field]);
+  }
+  function isDisabledUserInput(field) {
+    var _a;
+    return states.isUser && !!((_a = data$1.userData) === null || _a === void 0 ? void 0 : _a[field]);
+  }
+  return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    index.h("style", { type: "text/css" },
+      styleString$2,
+      vanillaStyle$2),
+    states.loadingError && (index.h("div", null,
+      index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+        index.h("p", { part: "alert-description" }, global.intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))))),
+    states.loading ? (index.h(subregions.LoadingView, null)) : (index.h("div", null,
+      index.h("div", { class: classes.TextContainer },
+        index.h("div", null,
+          !states.hideSteps && (index.h("p", null, global.intl.formatMessage({
+            id: "formStep",
+            defaultMessage: text.formStep,
+          }, { step: states.step, count: data.FORM_STEPS }))),
+          index.h("h3", null, text.personalInformation),
+          index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.generalTitle),
+        index.h("p", { part: "alert-description" }, global.intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })))),
+      index.h("div", null,
+        index.h("div", { class: classes.InputContainer },
+          index.h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.firstName, formState.errors.firstName),
+          }
+            : {}), { id: "firstName", name: "/firstName", required: true })),
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled || isDisabledUserInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.lastName, formState.errors.lastName),
+          }
+            : {}), { id: "lastName", name: "/lastName", required: true })),
+          index.h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
+          index.h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledPartnerInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.country, formState.errors.countryCode),
+          }
+            : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("countryCode", e) }),
+            index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+                // Stop shoelace intercepting key presses
+                e.stopPropagation();
+              }, "onSl-input": (e) => {
+                callbacks.setCountrySearch(e.target.value);
+              } }), (_e = data$1 === null || data$1 === void 0 ? void 0 : data$1.countries) === null || _e === void 0 ? void 0 :
+            _e.map((c) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_f = data$1 === null || data$1 === void 0 ? void 0 : data$1.allCountries) === null || _f === void 0 ? void 0 :
+            _f.map((c) => (index.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
+          index.h("div", { class: classes.PhoneInputsSection },
+            index.h("p", null, text.phoneNumber),
+            index.h("div", { class: classes.PhoneInputsContainer },
+              index.h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled ||
+                  isDisabledPartnerInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+                class: classes.ErrorInput,
+              }
+                : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
+                index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+                    // Stop shoelace intercepting key presses
+                    e.stopPropagation();
+                  }, "onSl-input": (e) => {
+                    callbacks.setPhoneCountrySearch(e.target.value);
+                  } }), (_h = data$1 === null || data$1 === void 0 ? void 0 : data$1.phoneCountries) === null || _h === void 0 ? void 0 :
+                _h.map((c) => {
+                  var _a, _b;
+                  return (index.h("sl-menu-item", { value: c.countryCode },
+                    index.h("div", { slot: "prefix" }, `${(_a = subregions.PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = subregions.PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
+                    _b.dial_code));
+                }), (_j = data$1 === null || data$1 === void 0 ? void 0 : data$1.allCountries) === null || _j === void 0 ? void 0 :
+                _j.map((c) => {
+                  var _a, _b;
+                  return (index.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
+                    index.h("div", { slot: "prefix" }, `${(_a = subregions.PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = subregions.PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
+                    _b.dial_code));
+                })),
+              index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ control, value, formData }) => {
+                  // skip validation for values the user can't edit
+                  if (control === null || control === void 0 ? void 0 : control.disabled)
+                    return undefined;
+                  if (!(value === null || value === void 0 ? void 0 : value.trim()))
+                    return undefined;
+                  return subregions.isValidI18nPhoneNumber(formData.phoneNumberCountryCode, value)
+                    ? undefined
+                    : subregions.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
+                }, disabled: states.disabled || isDisabledPartnerInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+                class: classes.ErrorInput,
+                helpText: subregions.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
+              }
+                : {}), { required: true })))),
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
+            // Checks for non-ASCII characters
+            !subregions.validateBillingField(/^[\x20-\xFF]+$/, value) &&
+              subregions.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.address, formState.errors.address),
+          }
+            : {}), { required: true })),
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
+            // Checks for non-ASCII characters
+            !subregions.validateBillingField(/^[\x20-\xFF]+$/, value) &&
+              subregions.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.city, formState.errors.city),
+          }
+            : {}), { required: true })),
+          !states.hideState && (index.h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledPartnerInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.state, formState.errors.state),
+          }
+            : {}), { required: true }), (_p = data$1.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (index.h("sl-menu-item", { value: r.value }, r.label))))),
+          index.h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledPartnerInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.postalCode, formState.errors.postalCode),
+          }
+            : {}), { required: true })),
+          index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency") }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
+            class: classes.ErrorInput,
+            helpText: subregions.formatErrorMessage(text.currency, formState.errors.currency),
+          }
+            : {}), { required: true, ref: (el) => (refs.currencyRef.current = el) }),
+            index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCurrencyText, onKeyDown: (e) => {
+                // Stop shoelace intercepting key presses
+                e.stopPropagation();
+              }, "onSl-input": (e) => {
+                callbacks.setCurrencySearch(e.target.value);
+              } }), (_s = data$1 === null || data$1 === void 0 ? void 0 : data$1.currencies) === null || _s === void 0 ? void 0 :
+            _s.map((c) => (index.h("sl-menu-item", { value: c.currencyCode },
+              c.currencyCode,
+              " - ",
+              c.displayName))), (_t = data$1 === null || data$1 === void 0 ? void 0 : data$1.allCurrencies) === null || _t === void 0 ? void 0 :
+            _t.map((c) => (index.h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
+              c.currencyCode,
+              " - ",
+              c.displayName))))),
+        index.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
+};
+
+exports.InvoiceTableView = InvoiceTableView;
+exports.OtherRegionSlotView = OtherRegionSlotView;
+exports.TaxAndCashDashboardView = TaxAndCashDashboardView;
+exports.UserInfoFormView = UserInfoFormView;
+exports.vatLabels = vatLabels;