@saasquatch/mint-components 1.8.0-19 → 1.8.0-20

package/dist/cjs/{ShadowViewAddon-a9ce6b87.js → ShadowViewAddon-ba90f112.js}

@@ -4019,6 +4019,774 @@ function CouponCodeView(props) {
       index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(CopyTextView, Object.assign({}, props)))));
 }
 
+const style$f = {
+  FormWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  CheckboxContainer: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-xx-small)",
+  },
+  TitleContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: "var(--sl-spacing-small)",
+  },
+  TextContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "24px",
+    paddingBottom: "16px",
+  },
+  BtnContainer: {
+    paddingTop: "36px",
+    display: "flex",
+    gap: "8px",
+  },
+  ErrorText: {
+    color: "var(--sl-color-danger-500)",
+    marginTop: "10px",
+  },
+  DescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+  },
+  BoldText: {
+    fontWeight: "bold",
+  },
+  SecondaryBtn: {
+    "&::part(base)": {
+      color: "var(--sl-color-gray-800) !important",
+    },
+  },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  InfoAlert: {
+    "&::part(base)": {
+      backgroundColor: "transparent",
+      borderTop: "none",
+      padding: "0px",
+      marginBottom: "16px",
+      border: "none",
+    },
+    "&::part(message)": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      padding: "10px",
+      height: "max-content",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-sky-500)",
+    },
+  },
+  Container: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "16px",
+  },
+  Link: {
+    color: "var(--sl-color-sky-500)",
+    textDecoration: "none",
+    "&:visited": {
+      color: "var(--sl-color-sky-500)",
+    },
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+};
+const sheet$f = JSS.createStyleSheet(style$f);
+const styleString$f = sheet$f.toString();
+const vanillaStyle$a = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+
+    p {
+      line-height: 18px;
+      color: var(--sl-color-gray-800);
+       font-size: var(--sl-font-size-small);
+    }
+
+    a {
+      cursor: pointer;
+    }
+
+
+  `;
+const DocusignFormView = (props) => {
+  var _a, _b;
+  const { states, states: { formState, documentType }, callbacks, text, } = props;
+  const { classes } = sheet$f;
+  return (index.h("div", { class: classes.Container },
+    index.h("style", { type: "text/css" },
+      styleString$f,
+      vanillaStyle$a),
+    index.h("div", { class: classes.TextContainer },
+      index.h("div", null,
+        index.h("p", null, text.formStep),
+        index.h("h3", null, text.taxForm))),
+    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { type: "warning", open: true, class: sheet$f.classes.ErrorAlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, text.error.generalTitle),
+      index.h("br", null),
+      text.error.generalDescription)),
+    index.h("h5", { class: classes.BoldText }, global.intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType })),
+    index.h("p", null,
+      global.intl.formatMessage({
+        id: "tax-form-description",
+        defaultMessage: text.taxFormDescription,
+      }, { documentType }),
+      " ",
+      index.h("a", { onClick: callbacks.onShowDocumentType, class: classes.Link }, text.notBasedInUS)),
+    states.loading ? (index.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (index.h("div", null,
+      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
+        index.h("sl-icon", { slot: "icon", name: "info-circle" }),
+        text.banner),
+      index.h("slot", { name: "docusign-iframe" }),
+      index.h("div", null,
+        index.h("p", { class: classes.BoldText }, text.checkboxLabel),
+        index.h("sl-checkbox", { disabled: states.disabled, checked: formState.completedTaxForm, "onSl-change": callbacks.toggleFormSubmitted }, text.checkboxDescription),
+        ((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.formSubmission) && (index.h("p", { class: classes.ErrorText }, text.error.formSubmission))),
+      index.h("div", { class: classes.BtnContainer },
+        index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, submit: true, onClick: callbacks.onSubmit, exportparts: "base: primarybutton-base" }, text.submitButton),
+        index.h("sl-button", { class: classes.SecondaryBtn, type: "text", loading: states.loading, disabled: states.loading, onClick: () => {
+            callbacks.onBack();
+          }, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+};
+
+const statusMap = {
+  pending: "warning",
+  upcoming: "success",
+  "next payout": "success",
+};
+const style$g = {
+  Container: {
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    gridGap: "var(--sl-spacing-large)",
+    background: "var(--sl-color-neutral-0)",
+    boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)",
+    borderRadius: "4px",
+    padding: "var(--sl-spacing-large)",
+    minHeight: "150px",
+    border: "1px solid var(--sl-color-gray-200)",
+  },
+  StatusContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  MainCurrencyLabel: {
+    fontWeight: "var(--sl-font-weight-normal)",
+    color: "var(--sl-color-gray-500)",
+  },
+  MainCurrency: {
+    margin: 0,
+    fontSize: "32px",
+    width: "auto",
+  },
+  SubduedRegularText: {
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sl-color-gray-500)",
+    margin: 0,
+    width: "auto",
+  },
+  CurrenciesContainer: {
+    display: "grid",
+    width: "auto",
+    gridTemplateColumns: "1fr 1fr 1fr",
+    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)",
+    },
+    "& > :nth-child(3)": {
+      border: "none",
+    },
+  },
+  CurrencyContainer: {
+    paddingRight: "var(--sl-spacing-small)",
+    gap: "var(--sl-spacing-small)",
+  },
+  SubCurrencyText: {
+    fontWeight: "var(--sl-font-weight-bold)",
+    fontSize: "var(--sl-font-size-large)",
+    margin: "0",
+  },
+  W9Container: {
+    paddingTop: "var(--sl-spacing-large)",
+    borderTop: "1px solid var(--sl-color-gray-200)",
+  },
+  SkeletonOne: {
+    width: "25%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "25%",
+    height: "24px",
+  },
+  SkeletonThree: {
+    width: "50%",
+    height: "34px",
+  },
+};
+function PayoutDetailsCardView(props) {
+  var _a;
+  const sheet = JSS.createStyleSheet(style$g);
+  const styleString = sheet.toString();
+  const { classes } = sheet;
+  const currencyList = (currencies) => {
+    return (index.h("div", { class: classes.CurrenciesContainer },
+      " ", currencies === null || currencies === void 0 ? void 0 :
+      currencies.map((currency) => {
+        return (index.h("div", { class: classes.CurrencyContainer },
+          index.h("p", { class: classes.SubCurrencyText }, currency === null || currency === void 0 ? void 0 :
+            currency.amountText, currency === null || currency === void 0 ? void 0 :
+            currency.currencyText)));
+      }),
+      " "));
+  };
+  const { loading, mainCurrency, status, otherCurrencies, otherCurrenciesText, pendingStatusBadgeText, upcomingStatusBadgeText, nextPayoutStatusBadgeText, pendingDetailedStatusText, upcomingDetailedStatusText, nextPayoutDetailedStatusText, w9Pending, w9PendingText, empty, hasDatePending, hasW9Pending, } = props;
+  const badgeText = {
+    pending: pendingStatusBadgeText,
+    upcoming: upcomingStatusBadgeText,
+    "next payout": nextPayoutStatusBadgeText,
+  };
+  const statusText = {
+    pending: pendingDetailedStatusText,
+    upcoming: upcomingDetailedStatusText,
+    "next payout": nextPayoutDetailedStatusText,
+  };
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: classes.Container },
+      loading ? (index.h("div", { class: classes.StatusContainer },
+        index.h("sl-skeleton", { class: classes.SkeletonOne }),
+        " ",
+        index.h("sl-skeleton", { class: classes.SkeletonTwo }))) : (index.h("div", { class: classes.StatusContainer },
+        index.h("p", { class: classes.SubduedRegularText }, empty && status === "pending"
+          ? ""
+          : status !== "pending"
+            ? statusText[status]
+            : hasDatePending
+              ? statusText["pending"]
+              : w9PendingText),
+        index.h("sl-badge", { pill: true, type: statusMap[status] }, badgeText[status]))),
+      loading ? (index.h("sl-skeleton", { class: classes.SkeletonThree })) : empty ? (index.h("h1", { class: classes.MainCurrency }, "No rewards")) : (index.h("h1", { class: classes.MainCurrency },
+        hasDatePending || status !== "pending"
+          ? mainCurrency === null || mainCurrency === void 0 ? void 0 : mainCurrency.amountText : (_a = w9Pending === null || w9Pending === void 0 ? void 0 : w9Pending[0]) === null || _a === void 0 ? void 0 : _a.amountText,
+        " ",
+        mainCurrency.currencyText)),
+      otherCurrencies !== undefined &&
+        otherCurrencies !== false &&
+        !loading && (index.h("div", null,
+        index.h("p", { class: classes.SubduedRegularText, style: { fontSize: "var(--sl-font-size-x-small)" } },
+          "+ ",
+          otherCurrenciesText),
+        currencyList(otherCurrencies))),
+      hasW9Pending && status === "pending" && hasDatePending && !loading && (index.h("div", { class: classes.W9Container },
+        index.h("p", { class: classes.SubduedRegularText }, w9PendingText),
+        currencyList(w9Pending))),
+      loading ? (index.h("sl-skeleton", { class: classes.SkeletonOne })) : (index.h("div", { style: { display: "flex", gap: "var(--sl-spacing-small)" } },
+        index.h("span", null, "Card ***2381"),
+        index.h("span", null, "Toronto Dominion Bank"))))));
+}
+
+const style$h = {
+  WarningAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+  },
+  ExpiringSoonAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+    },
+  },
+  BankingInformationContainer: {
+    maxWidth: "700px",
+  },
+  TaxDocumentsContainer: {
+    marginTop: "var(--sl-spacing-xx-large)",
+    borderTop: "1px solid var(--sl-color-neutral-200)",
+  },
+  TaxDocumentsHeaderContainer: {
+    marginTop: "var(--sl-spacing-x-large)",
+  },
+  StatusContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-x-small)",
+    "& h4": {
+      margin: "0",
+    },
+    "& p": {
+      margin: "0",
+    },
+  },
+  TaxFormDetailsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "baseline",
+    flexFlow: "row wrap",
+  },
+  BadgeContainer: {
+    "&::part(base)": {
+      padding: "var(--sl-spacing-x-small)",
+    },
+  },
+  NewFormButton: {
+    marginTop: "var(--sl-spacing-medium)",
+    maxWidth: "179px",
+  },
+  EditBankDetailsButton: {
+    marginTop: "var(--sl-spacing-x-large)",
+  },
+  SkeletonOne: {
+    width: "15%",
+    height: "10px",
+  },
+  SkeletonTwo: {
+    width: "25%",
+    height: "24px",
+    top: "var(--sl-spacing-small)",
+    marginBottom: "var(--sl-spacing-x-small)",
+  },
+  TaxSectionSkeletonContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  TaxDocSubtext: {
+    margin: "0",
+    color: "var(--sl-color-neutral-500)",
+    lineHeight: "var(--sl-spacing-medium)",
+  },
+};
+const sheet$g = JSS.createStyleSheet(style$h);
+const styleString$g = sheet$g.toString();
+const TaxDocumentSubmittedView = (props) => {
+  var _a;
+  const { states, text, callbacks } = props;
+  // AL: Not sure what states will be yet, placeholder for now
+  const testDetailsCardProps = {
+    loading: states.loading,
+    empty: false,
+    otherCurrencies: false,
+    mainCurrency: { currencyText: "USD", amountText: "100.00" },
+    status: "upcoming",
+    pendingStatusBadgeText: "Pending",
+    upcomingStatusBadgeText: "Upcoming",
+    nextPayoutStatusBadgeText: "Next payout",
+    pendingDetailedStatusText: "Check rewards table for available date",
+    upcomingDetailedStatusText: "November 1, 2022",
+    nextPayoutDetailedStatusText: "November 1, 2022",
+    otherCurrenciesText: "other currencies",
+    w9PendingText: "Awaiting W-9 tax form",
+    w9Pending: undefined,
+    hasDatePending: true,
+    hasW9Pending: false,
+  };
+  const statusMap = {
+    NOT_VERIFIED: (index.h("div", { class: sheet$g.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "warning", pill: true, class: sheet$g.classes.BadgeContainer }, text.statusTextNotVerified),
+      index.h("p", null, global.intl.formatMessage({
+        id: `badgeTextAwaitingReview`,
+        defaultMessage: text.badgeTextAwaitingReview,
+      }, {
+        dateSubmitted: states.dateSubmitted,
+      })))),
+    ACTIVE: (index.h("div", { class: sheet$g.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "success", pill: true, class: sheet$g.classes.BadgeContainer }, text.statusTextActive),
+      index.h("p", null,
+        global.intl.formatMessage({
+          id: `badgeTextSubmittedOn`,
+          defaultMessage: text.badgeTextSubmittedOn,
+        }, {
+          dateSubmitted: states.dateSubmitted,
+        }),
+        global.intl.formatMessage({
+          id: `badgeTextExpiringSoon`,
+          defaultMessage: text.badgeTextExpiringSoon,
+        }, {
+          dateExpired: states.dateExpired,
+        })))),
+    NOT_ACTIVE: (index.h("div", { class: sheet$g.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "danger", pill: true, class: sheet$g.classes.BadgeContainer }, text.statusTextNotActive),
+      index.h("p", null, text.invalidForm))),
+    EXPIRED: (index.h("div", { class: sheet$g.classes.TaxFormDetailsContainer },
+      index.h("sl-badge", { type: "danger", pill: true, class: sheet$g.classes.BadgeContainer }, text.statusTextExpired),
+      index.h("p", null, global.intl.formatMessage({
+        id: `badgeTextExpiredOn`,
+        defaultMessage: text.badgeTextExpiredOn,
+      }, {
+        dateExpired: states.dateExpired,
+      })))),
+  };
+  const alertMap = {
+    NOT_ACTIVE: (index.h("sl-alert", { type: "danger", open: true, class: sheet$g.classes.WarningAlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, global.intl.formatMessage({
+        id: `taxAlertHeaderNotActive`,
+        defaultMessage: text.taxAlertHeaderNotActive,
+      }, {
+        documentType: states.documentType,
+      })),
+      index.h("br", null),
+      global.intl.formatMessage({
+        id: `taxAlertMessage`,
+        defaultMessage: text.taxAlertMessage,
+      }, {
+        documentType: states.documentType,
+      }))),
+    EXPIRING_SOON: (index.h("sl-alert", { type: "warning", open: true, class: sheet$g.classes.ExpiringSoonAlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, global.intl.formatMessage({
+        id: `taxAlertHeaderExpiringSoon`,
+        defaultMessage: text.taxAlertHeaderExpiringSoon,
+      }, {
+        documentType: states.documentType,
+        dateExpired: states.dateExpired,
+      })),
+      index.h("br", null),
+      global.intl.formatMessage({
+        id: `taxAlertMessageExpiringSoon`,
+        defaultMessage: text.taxAlertMessageExpiringSoon,
+      }, {
+        documentType: states.documentType,
+      }))),
+    EXPIRED: (index.h("sl-alert", { type: "danger", open: true, class: sheet$g.classes.WarningAlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, global.intl.formatMessage({
+        id: `taxAlertHeaderExpiredOn`,
+        defaultMessage: text.taxAlertHeaderExpiredOn,
+      }, {
+        documentType: states.documentType,
+      })),
+      index.h("br", null),
+      global.intl.formatMessage({
+        id: `taxAlertMessage`,
+        defaultMessage: text.taxAlertMessage,
+      }, {
+        documentType: states.documentType,
+      }))),
+  };
+  return (index.h("div", null,
+    index.h("div", null,
+      index.h("style", { type: "text/css" }, styleString$g),
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { type: "danger", open: true, class: sheet$g.classes.WarningAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        index.h("strong", null, text.error.generalTitle),
+        index.h("br", null),
+        text.error.generalDescription)),
+      (states.status === "NOT_ACTIVE" || states.status === "EXPIRED") &&
+        alertMap[states.status],
+      states.status === "ACTIVE" &&
+        states.expiresSoon &&
+        alertMap.EXPIRING_SOON,
+      index.h("div", null,
+        index.h("h3", null, text.bankingInformationSectionHeader),
+        index.h("div", { class: sheet$g.classes.BankingInformationContainer },
+          index.h(PayoutDetailsCardView, Object.assign({}, testDetailsCardProps)),
+          index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$g.classes.EditBankDetailsButton }, "Edit Bank Details"))),
+      index.h("div", { class: sheet$g.classes.TaxDocumentsContainer },
+        index.h("h3", { class: sheet$g.classes.TaxDocumentsHeaderContainer }, text.taxDocumentSectionHeader),
+        index.h("div", null,
+          states.loading ? (index.h("div", { class: sheet$g.classes.TaxSectionSkeletonContainer },
+            index.h("sl-skeleton", { class: sheet$g.classes.SkeletonOne }),
+            index.h("sl-skeleton", { class: sheet$g.classes.SkeletonTwo }))) : (index.h("span", { class: sheet$g.classes.TaxFormDetailsContainer }, states.noFormNeeded ? (index.h("p", { class: sheet$g.classes.TaxDocSubtext }, text.noFormNeededSubtext)) : (index.h("div", { class: sheet$g.classes.StatusContainer },
+            index.h("h4", null, global.intl.formatMessage({
+              id: "section-subheader",
+              defaultMessage: text.taxDocumentSectionSubHeader,
+            }, {
+              documentType: states.documentType,
+            })),
+            statusMap[states.status])))),
+          states.noFormNeeded ? ("") : (index.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$g.classes.NewFormButton }, text.newFormButton)))))));
+};
+
+const style$i = {
+  FormWrapper: {},
+  ErrorInput: {
+    "&::part(base)": {
+      border: "1px solid var(--sl-color-danger-500)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  ErrorText: {
+    color: "var(--sl-color-danger-500)",
+    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",
+  },
+  BtnContainer: {
+    paddingTop: "36px",
+    display: "flex",
+    gap: "8px",
+  },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  DescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+  },
+  BoldText: {
+    fontWeight: "bold",
+  },
+  RoundedCheckbox: {
+    "&::part(control)": {
+      borderRadius: "50%",
+    },
+  },
+  AlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  PartnerAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
+};
+const sheet$h = JSS.createStyleSheet(style$i);
+const styleString$h = sheet$h.toString();
+const vanillaStyle$b = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+
+    p {
+      line-height: 18px;
+      color: var(--sl-color-gray-800);
+       font-size: var(--sl-font-size-small);
+    }
+
+    sl-radio-group::part(base) {
+      display: flex;
+      flex-direction: column;
+    }
+
+  `;
+const UserInfoFormView = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const { states, states: { formState }, callbacks, text, refs, data, } = props;
+  const { classes } = sheet$h;
+  console.log({ formState, data });
+  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$h,
+      vanillaStyle$b),
+    index.h("div", { class: classes.TextContainer },
+      index.h("div", null,
+        index.h("p", null, text.formStep),
+        index.h("h3", null, text.personalInformation))),
+    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { type: "warning", open: true, class: sheet$h.classes.AlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("strong", null, text.error.generalTitle),
+      index.h("br", null),
+      text.error.generalDescription)),
+    states.isPartner && (index.h("sl-alert", { type: "primary", open: true, class: sheet$h.classes.PartnerAlertContainer },
+      index.h("sl-icon", { slot: "icon", name: "info-circle" }),
+      index.h("strong", null, text.isPartnerAlertHeader),
+      index.h("br", null),
+      text.isPartnerAlertDescription)),
+    states.loading ? (index.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (index.h("div", null,
+      index.h("div", { class: classes.InputContainer },
+        index.h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.firstName, label: text.firstName, disabled: states.disabled }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.firstName,
+        }
+          : {}), { id: "firstName", name: "/firstName", required: true })),
+        index.h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.lastName, label: text.lastName, disabled: states.disabled }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.lastName,
+        }
+          : {}), { id: "lastName", name: "/lastName", required: true })),
+        index.h("sl-input", { exportparts: "label: input-label", 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", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.countryCode,
+        }
+          : {}), { required: true }), (_e = data === null || data === void 0 ? void 0 : data.countries) === null || _e === void 0 ? void 0 : _e.map((c) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
+        index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label", name: "/currency", label: text.currency, value: formState.currency, disabled: states.disabled }, (((_f = formState.errors) === null || _f === void 0 ? void 0 : _f.currency) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.currency,
+        }
+          : {}), { required: true }), (_g = data === null || data === void 0 ? void 0 : data.currencies) === null || _g === void 0 ? void 0 : _g.map((c) => (index.h("sl-menu-item", { value: c.currencyCode }, c.currencyCode)))),
+        index.h("div", { class: classes.CheckboxWrapper },
+          index.h("p", { class: classes.BoldText }, text.participantType),
+          index.h("div", { style: { display: "flex", flexDirection: "column" } },
+            index.h("sl-radio", { exportparts: "base: radio-base", value: "individualParticipant", name: "/participantType", checked: formState.participantType === "individualParticipant", disabled: states.disabled }, text.individualParticipant),
+            index.h("sl-radio", { exportparts: "base: radio-base", value: "businessEntity", name: "/participantType", checked: formState.participantType === "businessEntity", disabled: states.disabled }, text.businessEntity)),
+          ((_h = formState.errors) === null || _h === void 0 ? void 0 : _h.participantType) && (index.h("p", { class: classes.ErrorText }, text.error.participantType))),
+        index.h("div", { class: classes.CheckboxWrapper },
+          index.h("p", { class: classes.BoldText },
+            " ",
+            text.taxAndBankingCollection),
+          index.h("sl-checkbox", { exportparts: "label: input-label", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+              e.target.value = e.target.checked;
+            }, disabled: states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, text.allowBankingCollection),
+          ((_j = formState.errors) === null || _j === void 0 ? void 0 : _j.allowBankingCollection) && (index.h("p", { class: classes.ErrorText }, text.error.allowBankingCollection)))),
+      index.h("sl-button", { type: "primary", disabled: states.disabled, loading: states.loading, submit: true, exportparts: "base: primarybutton-base" }, text.submitButton)))));
+};
+
+const style$j = {
+  Container: {
+    width: "100%",
+  },
+  InputContainer: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+  },
+  HR: {
+    border: "1px solid #E0E0E0",
+    margin: "10px 0",
+  },
+  Input: {
+    maxWidth: "500px",
+  },
+  ErrorInput: {
+    "&::part(base)": {
+      border: "1px solid var(--sl-color-danger-500)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+};
+const sheet$i = JSS.createStyleSheet(style$j);
+const styleString$i = sheet$i.toString();
+const vanillaStyle$c = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+  `;
+const OtherRegionSlotView = (props) => {
+  var _a, _b, _c;
+  const { states, states: { formState }, text, } = props;
+  const { classes } = sheet$i;
+  console.log("regions", { formState });
+  return (index.h("div", { style: states.hide ? { display: "none" } : {} },
+    index.h("form", { class: classes.Container },
+      index.h("style", { type: "text/css" },
+        styleString$i,
+        vanillaStyle$c),
+      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.countryCode, exportparts: "label: input-label", label: text.selectedRegion, disabled: states.loading }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
+          class: classes.ErrorInput,
+          helpText: text.error.selectedRegion,
+        }), { id: "selectedRegion", name: "/selectedRegion" }), (_b = props.data.countries) === null || _b === void 0 ? void 0 : _b.map((c) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
+        index.h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, value: formState.vatNumber, label: text.vatNumber, disabled: states.loading }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.vatNumber) && {
+          class: classes.ErrorInput,
+          helpText: text.error.vatNumber,
+        }), { id: "vatNumber", name: "/vatNumber" }))),
+      index.h("hr", { class: classes.HR }))));
+};
+const IndirectDetailsSlotView = (props) => {
+  var _a, _b;
+  const { states, states: { formState }, text, } = props;
+  const { classes } = sheet$i;
+  console.log("regions", { formState });
+  return (index.h("div", { style: states.hide ? { display: "none" } : {} },
+    index.h("form", { class: classes.Container },
+      index.h("style", { type: "text/css" },
+        styleString$i,
+        vanillaStyle$c),
+      index.h("hr", { class: classes.HR }),
+      index.h("div", { class: classes.InputContainer },
+        index.h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label", class: classes.Input, label: text.province, disabled: states.loading }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.province) && {
+          class: classes.ErrorInput,
+          helpText: text.error.province,
+        }), { id: "province", name: "/province" }),
+          index.h("sl-menu-item", { value: "ON" }, "Ontario"),
+          index.h("sl-menu-item", { value: "QC" }, "Quebec"),
+          index.h("sl-menu-item", { value: "NS" }, "Nova Scotia"),
+          index.h("sl-menu-item", { value: "NB" }, "New Brunswick"),
+          index.h("sl-menu-item", { value: "MB" }, "Manitoba"),
+          index.h("sl-menu-item", { value: "BC" }, "British Columbia"),
+          index.h("sl-menu-item", { value: "PE" }, "Prince Edward Island"),
+          index.h("sl-menu-item", { value: "SK" }, "Saskatchewan"),
+          index.h("sl-menu-item", { value: "AB" }, "Alberta"),
+          index.h("sl-menu-item", { value: "NL" }, "Newfoundland"),
+          index.h("sl-menu-item", { value: "NT" }, "Northwest Territories"),
+          index.h("sl-menu-item", { value: "YT" }, "Yukon"),
+          index.h("sl-menu-item", { value: "NU" }, "Nunavut")),
+        index.h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, label: text.indirectTaxNumber, disabled: states.loading, value: formState.indirectTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.indirectTaxNumber) && {
+          class: classes.ErrorInput,
+          helpText: text.error.indirectTaxNumber,
+        }), { id: "indirectTaxNumber", name: "/indirectTaxNumber" }))),
+      index.h("hr", { class: classes.HR }))));
+};
+
 function t(t,n,r){return Math.min(Math.max(t,r),n)}class n extends Error{constructor(t){super(`Failed to parse color: "${t}"`);}}function r(r){if("string"!=typeof r)throw new n(r);if("transparent"===r.trim().toLowerCase())return [0,0,0,0];let e=r.trim();e=u.test(r)?function(t){const r=t.toLowerCase().trim(),e=o[function(t){let n=5381,r=t.length;for(;r;)n=33*n^t.charCodeAt(--r);return (n>>>0)%2341}(r)];if(!e)throw new n(t);return `#${e}`}(r):r;const f=s.exec(e);if(f){const t=Array.from(f).slice(1);return [...t.slice(0,3).map(t=>parseInt(_(t,2),16)),parseInt(_(t[3]||"f",2),16)/255]}const p=i.exec(e);if(p){const t=Array.from(p).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,16)),parseInt(t[3]||"ff",16)/255]}const z=a.exec(e);if(z){const t=Array.from(z).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,10)),parseFloat(t[3]||"1")]}const h=c.exec(e);if(h){const[e,o,_,s]=Array.from(h).slice(1).map(parseFloat);if(t(0,100,o)!==o)throw new n(r);if(t(0,100,_)!==_)throw new n(r);return [...l(e,o,_),s||1]}throw new n(r)}const e=t=>parseInt(t.replace(/_/g,""),36),o="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((t,n)=>{const r=e(n.substring(0,3)),o=e(n.substring(3)).toString(16);let _="";for(let t=0;t<6-o.length;t++)_+="0";return t[r]=`${_}${o}`,t},{}),_=(t,n)=>Array.from(Array(n)).map(()=>t).join(""),s=new RegExp(`^#${_("([a-f0-9])",3)}([a-f0-9])?$`,"i"),i=new RegExp(`^#${_("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),a=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${_(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),c=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,u=/^[a-z]+$/i,f=t=>Math.round(255*t),l=(t,n,r)=>{let e=r/100;if(0===n)return [e,e,e].map(f);const o=(t%360+360)%360/60,_=(1-Math.abs(2*e-1))*(n/100),s=_*(1-Math.abs(o%2-1));let i=0,a=0,c=0;o>=0&&o<1?(i=_,a=s):o>=1&&o<2?(i=s,a=_):o>=2&&o<3?(a=_,c=s):o>=3&&o<4?(a=s,c=_):o>=4&&o<5?(i=s,c=_):o>=5&&o<6&&(i=_,c=s);const u=e-_/2;return [i+u,a+u,c+u].map(f)};function p(t){const[n,e,o,_]=r(t).map((t,n)=>3===n?t:t/255),s=Math.max(n,e,o),i=Math.min(n,e,o),a=(s+i)/2;if(s===i)return [0,0,a,_];const c=s-i;return [60*(n===s?(e-o)/c+(e<o?6:0):e===s?(o-n)/c+2:(n-e)/c+4),a>.5?c/(2-s-i):c/(s+i),a,_]}function z(n,r,e,o){return `hsla(${(n%360).toFixed()}, ${t(0,100,100*r).toFixed()}%, ${t(0,100,100*e).toFixed()}%, ${parseFloat(t(0,1,o).toFixed(3))})`}
 
 const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -4109,12 +4877,16 @@ exports.CardFeedView = CardFeedView;
 exports.CheckboxFieldView = CheckboxFieldView;
 exports.CopyTextView = CopyTextView;
 exports.CouponCodeView = CouponCodeView;
+exports.DocusignFormView = DocusignFormView;
 exports.DropdownFieldView = DropdownFieldView;
 exports.EditProfileView = EditProfileView;
 exports.HeroView = HeroView;
+exports.IndirectDetailsSlotView = IndirectDetailsSlotView;
 exports.InputFieldView = InputFieldView;
 exports.LeaderboardView = LeaderboardView;
 exports.NameFieldsView = NameFieldsView;
+exports.OtherRegionSlotView = OtherRegionSlotView;
+exports.PayoutDetailsCardView = PayoutDetailsCardView;
 exports.PortalChangePasswordView = PortalChangePasswordView;
 exports.PortalFooterView = PortalFooterView;
 exports.PortalFrameView = PortalFrameView;
@@ -4129,6 +4901,8 @@ exports.ShadowViewAddon = ShadowViewAddon;
 exports.ShareButtonView = ShareButtonView;
 exports.StatContainerView = StatContainerView;
 exports.TaskCardView = TaskCardView;
+exports.TaxDocumentSubmittedView = TaxDocumentSubmittedView;
+exports.UserInfoFormView = UserInfoFormView;
 exports.autoColorScaleCss = autoColorScaleCss;
 exports.chooseAmountFixed = chooseAmountFixed;
 exports.chooseAmountFixedNoDescription = chooseAmountFixedNoDescription;