@saasquatch/mint-components 1.8.0-21 → 1.8.0-23

package/dist/esm/{sqm-big-stat_42.entry.js → sqm-big-stat_37.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h as h$1, c as Host, g as getElement } from './index-17b4da69.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { m as h, f as useEffect, j as useState, n as d, k as useRef, b as browser, i as useReducer } from './stencil-hooks.module-2b1ac06e.js';
 import { i as intl } from './global-0141a923.js';
 import { i as isDemo, V, d as dist, H, W, F as Fe, b as mn, T, O, a as dn, h as hn, l as xe, S as Se, n as ke, f as useCallback, p as Ue, v as vn } from './index.module-4d07653e.js';
@@ -8,16 +8,14 @@ import './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { a as useRequestRerender } from './re-render-2a199c62.js';
 import { u as useChildElements } from './useChildElements-d4fb1098.js';
-import { l as luxon } from './luxon-2c624667.js';
+import './luxon-2c624667.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
 import './sqm-text-span-view-8d140661.js';
-import { u as useParent, T as TAX_CONTEXT_NAMESPACE, b as USER_QUERY_NAMESPACE, C as COUNTRIES_NAMESPACE, f as useSetParent, U as USER_INFO_NAMESPACE, d as CURRENCIES_NAMESPACE } from './data-e76577b2.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-ee6b79b3.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, Z as useBigStat, B as BigStatView, X as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, Q as IndirectDetailsSlotView, O as OtherRegionSlotView, I as InputFieldView, _ as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, $ as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView, W as PayoutDetailsCardView, U as UserInfoFormView } from './ShadowViewAddon-3b0296b9.js';
+import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-6b52e587.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import './sqm-portal-container-view-ab89c6cc.js';
-import { a as useParentQueryValue } from './useParentQuery-90a33801.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -584,694 +582,6 @@ const DividedLayout = class {
   }
 };
 
-const style$1 = {
-  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",
-  },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
-  },
-  RadioContainer: {
-    width: "100%",
-    display: "flex",
-    justifyContent: "flex-start",
-    flexDirection: "column",
-    gap: "16px",
-    padding: "16px",
-  },
-  DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-    lineHeight: "22px",
-  },
-  LabelText: {
-    fontWeight: "bold",
-  },
-  AlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-      padding: "0 16px",
-      marginBottom: "16px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-};
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
-const vanillaStyle = `
-    :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-checkbox::part(control) {
-        border-radius: 50%;
-    }
-  `;
-const DocumentTypeFormView = (props) => {
-  var _a;
-  const { states, states: { formState }, callbacks, text, } = props;
-  const { classes } = sheet$1;
-  console.log({ formState });
-  return (h$1("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit },
-    h$1("style", { type: "text/css" },
-      styleString$1,
-      vanillaStyle),
-    h$1("div", { class: classes.TextContainer },
-      h$1("div", null,
-        h$1("p", null, text.formStep),
-        h$1("h3", null, text.taxForm))),
-    states.loading ? (h$1("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h$1("div", null,
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h$1("sl-alert", { type: "warning", open: true, class: sheet$1.classes.AlertContainer },
-        h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h$1("strong", null, text.error.generalTitle),
-        h$1("br", null),
-        text.error.generalDescription)),
-      h$1("p", { class: classes.LabelText }, text.formLabel),
-      h$1("div", { class: classes.RadioContainer },
-        h$1("sl-radio", { disabled: states.disabled, value: "w9", name: "/documentType" },
-          h$1("p", { class: classes.LabelText }, text.w9Label),
-          h$1("p", { class: classes.DescriptionText }, text.w9Description)),
-        h$1("sl-radio", { disabled: states.disabled, value: "w8-ben", name: "/documentType" },
-          h$1("p", { class: classes.LabelText }, text.w8Label),
-          h$1("p", { class: classes.DescriptionText }, text.w8Description)),
-        h$1("sl-radio", { disabled: states.disabled, value: "w8-ben-e", name: "/documentType" },
-          h$1("p", { class: classes.LabelText }, text.w8ELabel),
-          h$1("p", { class: classes.DescriptionText }, text.w8EDescription))),
-      h$1("div", { class: classes.BtnContainer },
-        h$1("sl-button", { type: "primary", loading: states.loading, disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.submitButton),
-        h$1("sl-button", { class: classes.SecondaryBtn, type: "text", loading: states.loading, onClick: () => {
-            callbacks.onBack();
-          }, exportparts: "base: secondarybutton-base" }, text.backButton))))));
-};
-
-const UPSERT_USER = dist.gql `
-  mutation ($userInput: UserInput!) {
-    upsertUser(userInput: $userInput) {
-      firstName
-      lastName
-    }
-  }
-`;
-function useDocumentTypeForm(props) {
-  const [path, setPath] = useParent(TAX_CONTEXT_NAMESPACE);
-  const [loading, setLoading] = useState(false);
-  const [upsertUser] = Fe(UPSERT_USER);
-  const [errors, setErrors] = useState({});
-  const user = H();
-  const { refetch } = useParentQueryValue(USER_QUERY_NAMESPACE);
-  const onSubmit = async (e) => {
-    const controls = e.target.getFormControls();
-    let selectedDocumentType = null;
-    controls.forEach((control) => {
-      if (!control.name)
-        return;
-      const value = control.value;
-      const checked = control.checked;
-      if (checked)
-        selectedDocumentType = value;
-    });
-    if (selectedDocumentType === null) {
-      setErrors({ documentType: true });
-      return;
-    }
-    setLoading(true);
-    try {
-      await upsertUser({
-        userInput: {
-          id: user.id,
-          accountId: user.accountId,
-          customFields: {
-            __taxDocumentType: selectedDocumentType.toUpperCase(),
-          },
-        },
-      });
-      await refetch();
-      setPath(`/3/${selectedDocumentType}`);
-    }
-    catch (e) {
-      setErrors({ general: true });
-    }
-    finally {
-      setLoading(false);
-    }
-  };
-  return {
-    text: props.getTextProps(),
-    callbacks: {
-      onSubmit,
-      onBack: () => setPath("/2"),
-    },
-    states: {
-      loading,
-      disabled: loading,
-      formState: {
-        formSubmission: false,
-        selectedTaxForm: "w9",
-        errors,
-      },
-    },
-  };
-}
-
-const DocumentTypeForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Sub text shown at the top of the page, used to show the current step of the tax form.
-     * @uiName Tax form step text
-     */
-    this.formStep = "Step 3 of 4";
-    /**
-     * Sub text shown above form selection radio buttons
-     * @uiName Tax form selection heading text
-     */
-    this.formLabel = "Select a tax form";
-    /**
-     * Heading text shown at the top of the top of page
-     * @uiName Tax form heading text
-     */
-    this.taxForm = "Tax form";
-    /**
-     * Label text for the W9 radio button
-     * @uiName W9 radio button label
-     */
-    this.w9Label = "W9";
-    /**
-     * Subtext for the W9 radio button
-     * @uiName W9 radio button subtext
-     */
-    this.w9Description = "W9 For participants based in the US, joining the referral program of a US-based company.";
-    /**
-     * Label text for the W8 radio button
-     * @uiName W8 radio button label
-     */
-    this.w8Label = "W8-Ben";
-    /**
-     * Subtext for the W8 radio button
-     * @uiName W8 radio button subtext
-     */
-    this.w8Description = "W8-BEN For individuals residing outside of the US, joining the referral program of a US-based company.";
-    /**
-     * Label text for the W8E radio button
-     * @uiName W8E radio button label
-     */
-    this.w8ELabel = "W8-BEN-E";
-    /**
-     * Subtext for the W8E radio button
-     * @uiName W8E radio button subtext
-     */
-    this.w8EDescription = "W8-BEN-E For participants residing outside of the US who represent a business entity, joining the referral program of a US-based company.";
-    /**
-     * Text shown inside of submit button
-     * @uiName Submit button text
-     */
-    this.submitButton = "Continue";
-    /**
-     * Text shown inside of back button
-     * @uiName Back button text
-     */
-    this.backButton = "Back";
-    /**
-     * The title for error message shown at the top of the page in an error banner
-     *
-     * @uiName General error title
-     */
-    this.generalErrorTitle = "There was a problem submitting your information";
-    /**
-     * The error message shown at the top of the page in an error banner
-     *
-     * @uiName General error text
-     */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
-    h(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    const props = getProps(this);
-    return {
-      ...props,
-      error: {
-        generalTitle: props.generalErrorTitle,
-        generalDescription: props.generalErrorDescription,
-      },
-    };
-  }
-  render() {
-    const props = isDemo()
-      ? useDemoDocumentTypeForm(this)
-      : useDocumentTypeForm(this);
-    return (h$1(DocumentTypeFormView, { callbacks: props.callbacks, states: props.states, text: props.text }));
-  }
-};
-function useDemoDocumentTypeForm(props) {
-  const [_, setPath] = useParent(TAX_CONTEXT_NAMESPACE);
-  return cjs({
-    text: props.getTextProps(),
-    callbacks: {
-      onSubmit: async () => { },
-      onBack: () => setPath("/2"),
-    },
-    states: {
-      loading: false,
-      disabled: false,
-      formState: {
-        formSubmission: false,
-        selectedTaxForm: "w9",
-        errors: {},
-      },
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-const style$2 = {
-  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$2 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
-const vanillaStyle$1 = `
-    :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$2;
-  return (h$1("div", { class: classes.Container },
-    h$1("style", { type: "text/css" },
-      styleString$2,
-      vanillaStyle$1),
-    h$1("div", { class: classes.TextContainer },
-      h$1("div", null,
-        h$1("p", null, text.formStep),
-        h$1("h3", null, text.taxForm))),
-    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h$1("sl-alert", { type: "warning", open: true, class: sheet$2.classes.ErrorAlertContainer },
-      h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h$1("strong", null, text.error.generalTitle),
-      h$1("br", null),
-      text.error.generalDescription)),
-    h$1("h5", { class: classes.BoldText }, intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType })),
-    h$1("p", null,
-      intl.formatMessage({
-        id: "tax-form-description",
-        defaultMessage: text.taxFormDescription,
-      }, { documentType }),
-      " ",
-      h$1("a", { onClick: callbacks.onShowDocumentType, class: classes.Link }, text.notBasedInUS)),
-    states.loading ? (h$1("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h$1("div", null,
-      h$1("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-        h$1("sl-icon", { slot: "icon", name: "info-circle" }),
-        text.banner),
-      h$1("slot", { name: "docusign-iframe" }),
-      h$1("div", null,
-        h$1("p", { class: classes.BoldText }, text.checkboxLabel),
-        h$1("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) && (h$1("p", { class: classes.ErrorText }, text.error.formSubmission))),
-      h$1("div", { class: classes.BtnContainer },
-        h$1("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, submit: true, onClick: callbacks.onSubmit, exportparts: "base: primarybutton-base" }, text.submitButton),
-        h$1("sl-button", { class: classes.SecondaryBtn, type: "text", loading: states.loading, disabled: states.loading, onClick: () => {
-            callbacks.onBack();
-          }, exportparts: "base: secondarybutton-base" }, text.backButton))))));
-};
-
-// TODO: Fill out when API is released
-const GET_TAX_DOCUMENT = dist.gql `
-  query getTaxDocument ($vars: TaxDocumentInput) {}
-`;
-// TODO: Check if document already exists
-const CHECK_DOCUMENT_STATUS = dist.gql `
-  query checkDocumentStatus ($vars: CheckDocumentStatusInput) {}
-`;
-const UPSERT_USER$1 = dist.gql `
-  mutation ($userInput: UserInput!) {
-    upsertUser(userInput: $userInput) {
-      firstName
-      lastName
-    }
-  }
-`;
-function useDocusignForm(props, el) {
-  var _a, _b, _c;
-  const user = H();
-  const [path, setPath] = useParent(TAX_CONTEXT_NAMESPACE);
-  const { data, refetch } = useParentQueryValue(USER_QUERY_NAMESPACE);
-  const [upsertUser] = Fe(UPSERT_USER$1);
-  const [formSubmitted, setFormSubmitted] = useState(false);
-  const [errors, setErrors] = useState({});
-  const [loading, setLoading] = useState(false);
-  const splitPath = path.split("/");
-  const pathedDocumentType = splitPath.length === 3 ? splitPath[2] : undefined;
-  const savedUserTaxType = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.customFields) === null || _b === void 0 ? void 0 : _b.w9Type;
-  // TODO: Replace with real backend data
-  const { data: taxInfo, loading: taxInfoLoading, refetch: refetchDocument, } = {
-    data: {
-      taxForm: pathedDocumentType,
-      documentUrl: "https://example.com",
-    },
-    loading: false,
-    refetch: (_vars) => console.debug("REFETCHING", _vars),
-  };
-  useEffect(() => {
-    if (pathedDocumentType === savedUserTaxType)
-      return;
-    refetchDocument({ documentType: pathedDocumentType });
-  }, [pathedDocumentType, savedUserTaxType]);
-  useEffect(() => {
-    // Load docusign iframe with given url
-    const slotted = el.querySelector("sqm-docusign-embed");
-    if (slotted) {
-      slotted.url = taxInfo.documentUrl;
-    }
-  }, [taxInfo.documentUrl]);
-  const onSubmit = async () => {
-    if (!formSubmitted) {
-      setErrors({ submitCheckbox: true });
-      return;
-    }
-    // TODO: Check document is actually registered in the backend
-    try {
-      setLoading(true);
-      // Backend request
-      await upsertUser({
-        userInput: {
-          id: user.id,
-          accountId: user.accountId,
-          customFields: {
-            __taxDocumentSubmitted: true,
-          },
-        },
-      });
-      await refetch();
-      setPath("/submitted");
-    }
-    catch (e) {
-      setErrors({ formSubission: { status: "document-error" } });
-    }
-    finally {
-      setLoading(false);
-    }
-  };
-  return {
-    states: {
-      disabled: taxInfoLoading || loading,
-      submitDisabled: !formSubmitted,
-      loading: taxInfoLoading || loading,
-      formState: {
-        completedTaxForm: formSubmitted,
-        taxFormExpired: false,
-        errors,
-      },
-      documentType: (_c = taxInfo.taxForm) === null || _c === void 0 ? void 0 : _c.toUpperCase(),
-    },
-    data: {
-      taxForm: taxInfo === null || taxInfo === void 0 ? void 0 : taxInfo.taxForm,
-      documentUrl: taxInfo === null || taxInfo === void 0 ? void 0 : taxInfo.documentUrl,
-    },
-    callbacks: {
-      onShowDocumentType: () => setPath("/3b"),
-      onSubmit,
-      toggleFormSubmitted: () => setFormSubmitted((x) => !x),
-      onBack: () => setPath("/2"),
-    },
-    text: props.getTextProps(),
-  };
-}
-
-const DocusignForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * Sub text shown at the top of the page, used to show the current step of the tax form.
-     * @uiName Tax form step text
-     */
-    this.formStep = "Step 3 of 4";
-    /**
-     * Heading text shown at the top of the page
-     * @uiName Tax form heading text
-     */
-    this.taxForm = "Tax form";
-    /**
-     * Text shown at the top of the page next to the document type text
-     * @uiName Tax form label text
-     */
-    this.taxFormLabel = "{documentType} Tax Form";
-    /**
-     * Subtext shown at the top of the page next to the document type text
-     * @uiName Tax form subtext
-     */
-    this.taxFormDescription = "Participants based in the US and partnering with US-based brands need to submit a {documentType} form.";
-    /**
-     * Text shown in the link to the form for non US residents
-     * @uiName Not based in US link text
-     */
-    this.notBasedInUS = "Not based in the US?";
-    /**
-     * Text shown in the banner above the document
-     * @uiName Banner text
-     */
-    this.banner = "For your security, we automatically end your session when you have not interacted with the form after 20 minutes.";
-    /**
-     * Heading text for the form submission checkbox
-     * @uiName Form submission checkbox heading
-     */
-    this.checkboxLabel = "Form submission";
-    /**
-     * Label text for the form submission checkbox
-     * @uiName Form submission checkbox label
-     */
-    this.checkboxDescription = "I have completed and submitted my tax form";
-    /**
-     * Text shown inside of submit button
-     * @uiName Submit button text
-     */
-    this.submitButton = "Continue";
-    /**
-     * Text shown inside of back button
-     * @uiName Back button text
-     */
-    this.backButton = "Back";
-    /**
-     * The title for error message shown at the top of the page in an error banner
-     *
-     * @uiName General error title
-     */
-    this.generalErrorTitle = "There was a problem submitting your information";
-    /**
-     * The error message shown at the top of the page in an error banner
-     *
-     * @uiName General error text
-     */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
-    /**
-     * The error message shown at the bottom of the page if the user has not checked the form submission checkbox
-     *
-     * @uiName Form submission error text
-     */
-    this.formSubmissionError = "This field is required";
-    h(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    const props = getProps(this);
-    return {
-      ...props,
-      error: {
-        generalTitle: props.generalErrorTitle,
-        generalDescription: props.generalErrorDescription,
-        formSubmission: props.formSubmissionError,
-      },
-    };
-  }
-  render() {
-    const props = isDemo()
-      ? useDocusignFormDemo(this)
-      : useDocusignForm(this, this.el);
-    return (h$1(Host, null, h$1(DocusignFormView, { callbacks: props.callbacks, states: props.states, text: props.text })));
-  }
-  get el() { return getElement(this); }
-};
-function useDocusignFormDemo(props) {
-  return cjs({
-    text: props.getTextProps(),
-    states: {
-      disabled: false,
-      submitDisabled: false,
-      loading: false,
-      formState: {
-        completedTaxForm: true,
-        errors: {},
-      },
-      documentType: "W9",
-    },
-    data: {
-      taxForm: "W9",
-      documentUrl: "https://example.com",
-    },
-    callbacks: {
-      onShowDocumentType: () => { },
-      onSubmit: async () => { },
-      toggleFormSubmitted: () => { },
-      onBack: () => { },
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
 function useDropdownField() {
   const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
   return {
@@ -1343,7 +653,7 @@ const GET_USER = dist.gql `
     }
   }
 `;
-const UPSERT_USER$2 = dist.gql `
+const UPSERT_USER = dist.gql `
   mutation (
     $id: String!
     $accountId: String!
@@ -1378,7 +688,7 @@ function useEditProfile(props) {
   const [userData, setUserData] = useState(undefined);
   const [formState, setFormState] = useState(defaultFormState);
   const userDataResponse = mn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = Fe(UPSERT_USER$2);
+  const [upsertUser, upsertUserResponse] = Fe(UPSERT_USER);
   useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
@@ -1784,530 +1094,38 @@ const HeroImage = class {
     this.buttonNewTab = false;
     /**
      * @uiName Text padding
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.paddingText = "xxxx-large";
-    /**
-     * @uiName Image padding
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.paddingImage = "none";
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (h$1(HeroImageView, Object.assign({}, getProps(this)), h$1("slot", null)));
-  }
-};
-
-const SqmHookStoryContainer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const Story = this.hookStory;
-    return h$1(Story, null);
-  }
-};
-
-const style$3 = {
-  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)",
-  },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
-  },
-  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$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
-const vanillaStyle$2 = `
-    :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-checkbox::part(control) {
-        border-radius: 50%;
-    }
-  `;
-const IndirectTaxFormView = (props) => {
-  var _a;
-  const { states, states: { formState }, callbacks, text, refs, slots, } = props;
-  const { classes } = sheet$3;
-  console.log(states, "states");
-  return (h$1("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-    h$1("style", { type: "text/css" },
-      styleString$3,
-      vanillaStyle$2),
-    h$1("div", { class: classes.TextContainer },
-      h$1("div", null,
-        h$1("p", null, text.formStep),
-        h$1("h3", null, text.indirectTax)),
-      h$1("p", null, text.indirectTaxDescription),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h$1("sl-alert", { type: "warning", open: true, class: sheet$3.classes.AlertContainer },
-        h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h$1("strong", null, text.error.generalTitle),
-        h$1("br", null),
-        text.error.generalDescription)),
-      states.isPartner && (h$1("sl-alert", { type: "primary", open: true, class: sheet$3.classes.PartnerAlertContainer },
-        h$1("sl-icon", { slot: "icon", name: "info-circle" }),
-        h$1("strong", null, text.isPartnerAlertHeader),
-        h$1("br", null),
-        text.isPartnerAlertDescription)),
-      h$1("div", null,
-        h$1("h4", null, text.indirectTaxDetails),
-        h$1("p", { class: classes.DescriptionText }, text.indirectTaxDetailsDescription))),
-    states.loading ? (h$1("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h$1("div", null,
-      h$1("div", { class: classes.CheckboxContainer },
-        h$1("div", { style: { display: "flex", flexDirection: "column" } },
-          h$1("sl-checkbox", { exportparts: "label: input-label", checked: formState.checked === "hstCanada", onInput: () => callbacks.onChange("hstCanada"), disabled: states.disabled, id: "hstCanada", name: "/hstCanada" }, text.hstCanada),
-          slots.registeredInCanadaDetailsSlot,
-          h$1("sl-checkbox", { exportparts: "label: input-label", checked: formState.checked === "otherRegion", onInput: () => callbacks.onChange("otherRegion"), disabled: states.disabled, id: "otherRegion", name: "/otherRegion" }, text.otherRegion),
-          slots.registeredInDifferentCountryDetailsSlot,
-          h$1("sl-checkbox", { exportparts: "label: input-label", checked: formState.checked === "notRegistered", onInput: () => callbacks.onChange("notRegistered"), disabled: states.disabled, id: "notRegistered", name: "/notRegistered" }, text.notRegistered))),
-      h$1("div", { class: classes.BtnContainer },
-        h$1("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.submitButton),
-        h$1("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: () => {
-            callbacks.onBack();
-          }, exportparts: "base: secondarybutton-base" }, text.backButton))))));
-};
-
-function getOption(user) {
-  if (!user)
-    return;
-  const { countryCode, customFields } = user;
-  if ((customFields === null || customFields === void 0 ? void 0 : customFields.__taxProvince) || (customFields === null || customFields === void 0 ? void 0 : customFields.__taxIndirectTaxNumber)) {
-    return "hstCanada";
-  }
-  else if ((customFields === null || customFields === void 0 ? void 0 : customFields.__taxCountry) || (customFields === null || customFields === void 0 ? void 0 : customFields.__taxVatNumber)) {
-    return "otherRegion";
-  }
-  else {
-    if (countryCode === "CA") {
-      return "hstCanada";
-      // TODO: Check against list of countries from backend
-    }
-    else if (countryCode) {
-      return "otherRegion";
-    }
-    else {
-      return "notRegistered";
-    }
-  }
-}
-const UPSERT_USER$3 = dist.gql `
-  mutation ($userInput: UserInput!) {
-    upsertUser(userInput: $userInput) {
-      firstName
-      lastName
-    }
-  }
-`;
-function useIndirectTaxForm(props) {
-  const formRef = useRef(null);
-  const [loading, setLoading] = useState(false);
-  const [formState, setFormState] = useState({});
-  const [upsertUser] = Fe(UPSERT_USER$3);
-  const [_, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
-  const user = H();
-  const { data: userData, refetch } = useParentQueryValue(USER_QUERY_NAMESPACE);
-  const { data: _countries, loading: countriesLoading } = useParentQueryValue(COUNTRIES_NAMESPACE);
-  const [option, setOption] = useState(null);
-  const [errors, setErrors] = useState({});
-  useEffect(() => {
-    var _a, _b, _c, _d;
-    const user = userData === null || userData === void 0 ? void 0 : userData.user;
-    if (!user)
-      return;
-    const _option = getOption(user);
-    setOption(_option);
-    setFormState({
-      province: (_a = user.customFields) === null || _a === void 0 ? void 0 : _a.__taxProvince,
-      vatNumber: (_b = user.customFields) === null || _b === void 0 ? void 0 : _b.__taxVatNumber,
-      countryCode: ((_c = user.customFields) === null || _c === void 0 ? void 0 : _c.__taxCountry) || user.countryCode,
-      indirectTaxNumber: (_d = user.customFields) === null || _d === void 0 ? void 0 : _d.__taxIndirectTaxNumber,
-    });
-  }, [userData]);
-  const countries = _countries === null || _countries === void 0 ? void 0 : _countries.countries.data;
-  const onSubmit = async (event) => {
-    var _a;
-    if (!option) {
-      setErrors({ taxDetails: true });
-      return;
-    }
-    let formData = { taxOption: option };
-    let validationErrors = {};
-    const controls = event.target.getFormControls();
-    const optionMapping = {
-      hstCanada: ["province", "indirectTaxNumber"],
-      otherRegion: ["selectedRegion", "vatNumber"],
-      notRegistered: [],
-    };
-    const relevantFields = optionMapping[option];
-    controls.forEach((control) => {
-      if (!control.name || !control.id)
-        return;
-      if (!relevantFields.includes(control.id))
-        return;
-      const key = control.name;
-      const value = control.value;
-      jsonpointer.set(formData, key, value);
-      if (control.required && !value) {
-        jsonpointer.set(validationErrors, key, true);
-      }
-    });
-    if (Object.keys(validationErrors).length) {
-      setErrors(validationErrors);
-      return;
-    }
-    setLoading(true);
-    try {
-      let defaultDocumentType;
-      if (((_a = userData === null || userData === void 0 ? void 0 : userData.user) === null || _a === void 0 ? void 0 : _a.countryCode) === "US")
-        defaultDocumentType = "W9";
-      if (formData.selectedRegion === "US") {
-        if ((userData === null || userData === void 0 ? void 0 : userData.user.customFields.participantType) ===
-          "individualParticipant")
-          defaultDocumentType = "W8-BEN";
-        else if ((userData === null || userData === void 0 ? void 0 : userData.user.customFields.participantType) === "businessEntity")
-          defaultDocumentType = "W8-BEN-E";
-      }
-      const customFields = {
-        __taxOption: option,
-        __taxDocumentType: defaultDocumentType || null,
-        __taxProvince: formData.province || null,
-        __taxCountry: formData.selectedRegion || null,
-        __taxVatNumber: formData.vatNumber || null,
-        __taxIndirectTaxNumber: formData.indirectTaxNumber || null,
-      };
-      console.log({ formData, customFields });
-      // Backend request
-      await upsertUser({
-        userInput: {
-          id: user.id,
-          accountId: user.accountId,
-          customFields,
-        },
-      });
-      await refetch();
-      if (defaultDocumentType) {
-        setStep(`/3/${defaultDocumentType}`);
-      }
-      else {
-        setStep("/submitted");
-      }
-    }
-    catch (e) {
-      setErrors({ general: true });
-    }
-    finally {
-      setLoading(false);
-    }
-  };
-  const onBack = () => {
-    setStep("/1");
-  };
-  return {
-    states: {
-      disabled: loading || countriesLoading,
-      loading: loading || countriesLoading,
-      //AL: TODO hook up if user is partner
-      isPartner: false,
-      errors,
-      formState: {
-        checked: option,
-      },
-    },
-    callbacks: {
-      onBack,
-      onSubmit,
-      onChange: setOption,
-    },
-    data: {
-      countries,
-    },
-    text: props.getTextProps(),
-    refs: {
-      formRef,
-    },
-    slotProps: {
-      formState: { ...formState, errors },
-    },
-  };
-}
-
-const IndirectTaxForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Sub text shown at the top of the page, used to show the current step of the tax form.
-     * @uiName Indirect tax form step text
-     */
-    this.formStep = "Step 2 of 4";
-    /**
-     * Heading text shown at the top of the page
-     * @uiName Indirect tax heading text
-     */
-    this.indirectTax = "Indirect Tax";
-    /**
-     * Subtext shown at the top of the page
-     * @uiName Indirect tax sub text
-     */
-    this.indirectTaxDescription = "Indirect Taxes (e.g. VAT, HST, GST) are transactional based taxes that are required to be levied by service providers by most tax authorities.";
-    /**
-     * Heading text shown above the tax details radio buttons
-     * @uiName Indirect tax details heading
-     */
-    this.indirectTaxDetails = "Indirect Tax Details";
-    /**
-     * Sub text shown above the tax details radio buttons
-     * @uiName Indirect tax details sub text
-     */
-    this.indirectTaxDetailsDescription = "Not sure if you are registered for indirect tax? Contact our Support team to find out more.";
-    /**
-     * Label text for the HST Canada radio button
-     * @uiName HST Canada radio button label
-     */
-    this.hstCanada = "I am registered for HST in Canada";
-    /**
-     * Label text for the other region radio button
-     * @uiName Other region radio button label
-     */
-    this.otherRegion = "I am registered for Indirect Tax in a different Country / Region";
-    /**
-     * Label text for the not registered radio button
-     * @uiName Not registered radio button label
-     */
-    this.notRegistered = "I am not registered for Indirect Tax";
-    /**
-     * Label text for the Selected Region select input
-     * @uiName Selected region select input label
-     */
-    this.selectedRegion = "Country / Region of Indirect Tax";
-    /**
-     * Label text for the VAT Number input
-     * @uiName VAT Number input label
-     */
-    this.vatNumber = "VAT number";
-    /**
-     * Label text for the Province select input
-     * @uiName Province select input label
-     */
-    this.province = "Province";
-    /**
-     * Label text for the Indirect Tax Number input
-     * @uiName Indirect Tax Number input label
-     */
-    this.indirectTaxNumber = "Indirect Tax";
-    /**
-     * Alert header text shown in alert if user is already a registered partner
-     * @uiName Participant is partner title
-     */
-    this.isPartnerAlertHeader = "An account with this email already exists with our referral program provider, impact.com";
-    /**
-     * Alert description text shown in alert if user is already a registered partner
-     * @uiName Participant is partner description
-     */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
-    /**
-     * Text shown inside of submit button
-     * @uiName Submit button text
-     */
-    this.submitButton = "Continue";
-    /**
-     * Text shown inside of back button
-     * @uiName Back button text
-     */
-    this.backButton = "Back";
-    /**
-     * Error text shown below the tax details radio buttons
-     * @uiName Indirect tax details error text
-     */
-    this.taxDetailsError = "This field is required";
-    /**
-     * The title for error message shown at the top of the page in an error banner
-     *
-     * @uiName General error title
-     */
-    this.generalErrorTitle = "There was a problem submitting your information";
-    /**
-     * The error message shown at the top of the page in an error banner
-     *
-     * @uiName General error text
-     */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
-    /**
-     * Error text shown below the Selected Region select input
-     * @uiName Selected Region error text
-     */
-    this.selectedRegionError = "Country is required";
-    /**
-     * Error text shown below the VAT Number input
-     * @uiName VAT Number error text
-     */
-    this.vatNumberError = "VAT number is required";
-    /**
-     * Error text shown below the Selected Region select input
-     * @uiName Province error text
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
-    this.provinceError = "Province is required";
+    this.paddingText = "xxxx-large";
     /**
-     * Error text shown below the Indirect Tax Number select input
-     * @uiName Indirect Tax Number error text
+     * @uiName Image padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
-    this.indirectTaxNumberError = "Indirect Tax is required";
+    this.paddingImage = "none";
     h(this);
   }
   disconnectedCallback() { }
-  getTextProps() {
-    const props = getProps(this);
-    return {
-      ...props,
-      error: {
-        generalTitle: props.generalErrorTitle,
-        generalDescription: props.generalErrorDescription,
-        taxDetails: props.taxDetailsError,
-      },
-      slotText: {
-        selectedRegion: props.selectedRegion,
-        vatNumber: props.vatNumber,
-        province: props.province,
-        indirectTaxNumber: props.indirectTaxNumber,
-        error: {
-          selectedRegion: props.selectedRegionError,
-          vatNumber: props.vatNumberError,
-          province: props.provinceError,
-          indirectTaxNumber: props.indirectTaxNumberError,
-        },
-      },
-    };
+  render() {
+    return (h$1(HeroImageView, Object.assign({}, getProps(this)), h$1("slot", null)));
   }
+};
+
+const SqmHookStoryContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h(this);
+  }
+  disconnectedCallback() { }
   render() {
-    const props = isDemo()
-      ? useDemoIndirectTaxForm(this)
-      : useIndirectTaxForm(this);
-    const registeredInCanadaDetailsSlot = (h$1(IndirectDetailsSlotView, { states: {
-        formState: props.slotProps.formState,
-        hide: props.states.formState.checked !== "hstCanada",
-        loading: props.states.loading,
-      }, data: { countries: props.data.countries }, text: props.text.slotText }));
-    const registeredInDifferentCountryDetailsSlot = (h$1(OtherRegionSlotView, { states: {
-        hide: props.states.formState.checked !== "otherRegion",
-        formState: props.slotProps.formState,
-        loading: props.states.loading,
-      }, data: { countries: props.data.countries }, text: props.text.slotText }));
-    return (h$1(Host, null, h$1(IndirectTaxFormView, { callbacks: props.callbacks, states: props.states, refs: props.refs, text: props.text, slots: {
-        registeredInCanadaDetailsSlot,
-        registeredInDifferentCountryDetailsSlot,
-      } })));
+    const Story = this.hookStory;
+    return h$1(Story, null);
   }
 };
-function useDemoIndirectTaxForm(props) {
-  const [option, setOption] = useState(null);
-  return cjs({
-    states: {
-      disabled: false,
-      loading: false,
-      //AL: TODO hook up if user is partner
-      isPartner: false,
-      errors: {},
-      formState: {
-        checked: option,
-      },
-    },
-    callbacks: {
-      onBack: () => { },
-      onSubmit: async () => { },
-      onChange: setOption,
-    },
-    data: {
-      countries: [{ displayName: "United Kingdom", countryCode: "UK" }],
-    },
-    text: props.getTextProps(),
-    refs: {
-      formRef: { current: null },
-    },
-    slotProps: {
-      formState: {
-        errors: {},
-      },
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
 
 function useInputField() {
   const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
@@ -2601,28 +1419,28 @@ function useLeaderboardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$4 = {
+const style$1 = {
   Container: { display: "contents" },
   Link: {
     textDecoration: "none",
     color: "inherit",
   },
 };
-const vanillaStyle$3 = `
+const vanillaStyle = `
 :host{
   display: inline;   
 }
 `;
-const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function LinkButtonView(props) {
   const { onClick, buttonText } = props;
-  return (h$1("span", { class: sheet$4.classes.Container, part: "sqm-base" },
+  return (h$1("span", { class: sheet$1.classes.Container, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString$4,
-      vanillaStyle$3),
+      styleString$1,
+      vanillaStyle),
     h$1("sl-button", { type: "primary", exportparts: "base: primarybutton-base" },
-      h$1("a", { onClick: onClick, class: sheet$4.classes.Link, part: "sqm-link" }, buttonText))));
+      h$1("a", { onClick: onClick, class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
 }
 
 const LinkButton = class {
@@ -3571,7 +2389,7 @@ const ProgramMenu = class {
   }
 };
 
-const style$5 = {
+const style$2 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
@@ -3599,15 +2417,15 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
-const vanillaStyle$4 = `
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (h$1("div", { part: "sqm-base", class: sheet$5.classes.Container, style: {
+  return (h$1("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
       border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
@@ -3618,15 +2436,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     h$1("style", { type: "text/css" },
-      styleString$5,
-      vanillaStyle$4),
-    props.hasHeader && (h$1("div", { class: sheet$5.classes.EndContainer }, props.slots.header)),
-    h$1("div", { part: "sqm-column-container", class: sheet$5.classes.ColumnContainer, style: {
+      styleString$2,
+      vanillaStyle$1),
+    props.hasHeader && (h$1("div", { class: sheet$2.classes.EndContainer }, props.slots.header)),
+    h$1("div", { part: "sqm-column-container", class: sheet$2.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (h$1("div", { class: sheet$5.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (h$1("div", { class: sheet$2.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -5249,584 +4067,148 @@ function useTaskCard(props) {
   }
   function onClick() {
     props.eventKey ? sendEvent(props.eventKey) : openLink();
-  }
-  return {
-    states: { loadingEvent, locale },
-    callbacks: { sendEvent, onClick },
-  };
-}
-
-const TaskCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Reward amount
-     * @uiGroup Reward
-     */
-    this.rewardAmount = "0";
-    /**
-     * @uiName Reward unit
-     * @uiGroup Reward
-     */
-    this.rewardUnit = "Points";
-    /**
-     * @uiName Title
-     * @uiGroup Task
-     */
-    this.cardTitle = "Title Text";
-    /**
-     * @uiName Description
-     * @uiGroup Task
-     */
-    this.description = "";
-    /**
-     * @uiName Goal repeatable
-     * @uiGroup Goal
-     * @default
-     */
-    this.repeatable = false;
-    /**
-     * The number of times a task can be completed when repeatable.  Use zero for no limit (the default).
-     *
-     * @uiName Repeat amount
-     * @uiGroup Reward
-     */
-    this.finite = 0;
-    /**
-     * @uiName Show progress bar
-     * @uiGroup Goal
-     * @default
-     */
-    this.showProgressBar = false;
-    /**
-     * Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this.
-     *
-     * @uiName Goal completion number
-     * @uiGroup Goal
-     */
-    this.goal = 1;
-    /**
-     * @uiName Progress bar steps
-     * @uiGroup Goal
-     * @default
-     */
-    this.steps = false;
-    /**
-     * The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars
-     *
-     * @uiName Progress bar unit
-     * @uiGroup Goal
-     */
-    this.progressBarUnit = "";
-    /**
-     * Displayed when a user views a task card after the reward duration interval.
-     *
-     * @uiName Expiry date message
-     * @uiGroup Task
-     */
-    this.expiryMessage = "Ends {endDate}";
-    /**
-     * Shown to users before the start of the task duration.
-     *
-     * @uiName Start date message
-     * @uiGroup Task
-     */
-    this.startsOnMessage = "Starts {startDate}";
-    /**
-     * Shown to users after the end of the task duration.
-     *
-     * @uiName Ended date message
-     * @uiGroup Task
-     */
-    this.endedMessage = "Ended {endDate}";
-    /**
-     * Displays the amount of times that a user has completed a repeatable task.
-     *
-     * @uiName Completed count text
-     * @uiGroup Task
-     * @uiWidget textArea
-     */
-    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
-    /**
-     * @uiName Button text
-     * @uiGroup Button
-     */
-    this.buttonText = "Complete Action";
-    /**
-     * Button link opens in new tab
-     * @uiName Open in new tab
-     * @uiGroup Button
-     * @default
-     */
-    this.openNewTab = false;
-    /**
-     * @uiName Hide CTA button
-     * @uiGroup Button
-     */
-    this.hideButton = false;
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { props } = isDemo()
-      ? useDemoBigStat(this)
-      : useBigStat({ ...getProps(this), programId: this.programId });
-    const { value, loading } = props;
-    const { states, callbacks } = isDemo()
-      ? useTaskCardDemo(this)
-      : useTaskCard(this);
-    return (h$1(TaskCardView, { callbacks: callbacks, states: {
-        loading,
-        loadingEvent: states.loadingEvent,
-        progress: value,
-        locale: states.locale,
-      }, content: { ...getProps(this) } }));
-  }
-};
-function useTaskCardDemo(props) {
-  return cjs({
-    states: { loadingEvent: false, locale: "en" },
-    callbacks: {
-      sendEvent: (event) => console.log(event),
-      onClick: () => console.log("clicked"),
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-const style$6 = {
-  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$6 = createStyleSheet(style$6);
-const styleString$6 = sheet$6.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: (h$1("div", { class: sheet$6.classes.TaxFormDetailsContainer },
-      h$1("sl-badge", { type: "warning", pill: true, class: sheet$6.classes.BadgeContainer }, text.statusTextNotVerified),
-      h$1("p", null, intl.formatMessage({
-        id: `badgeTextAwaitingReview`,
-        defaultMessage: text.badgeTextAwaitingReview,
-      }, {
-        dateSubmitted: states.dateSubmitted,
-      })))),
-    ACTIVE: (h$1("div", { class: sheet$6.classes.TaxFormDetailsContainer },
-      h$1("sl-badge", { type: "success", pill: true, class: sheet$6.classes.BadgeContainer }, text.statusTextActive),
-      h$1("p", null,
-        intl.formatMessage({
-          id: `badgeTextSubmittedOn`,
-          defaultMessage: text.badgeTextSubmittedOn,
-        }, {
-          dateSubmitted: states.dateSubmitted,
-        }),
-        intl.formatMessage({
-          id: `badgeTextExpiringSoon`,
-          defaultMessage: text.badgeTextExpiringSoon,
-        }, {
-          dateExpired: states.dateExpired,
-        })))),
-    NOT_ACTIVE: (h$1("div", { class: sheet$6.classes.TaxFormDetailsContainer },
-      h$1("sl-badge", { type: "danger", pill: true, class: sheet$6.classes.BadgeContainer }, text.statusTextNotActive),
-      h$1("p", null, text.invalidForm))),
-    EXPIRED: (h$1("div", { class: sheet$6.classes.TaxFormDetailsContainer },
-      h$1("sl-badge", { type: "danger", pill: true, class: sheet$6.classes.BadgeContainer }, text.statusTextExpired),
-      h$1("p", null, intl.formatMessage({
-        id: `badgeTextExpiredOn`,
-        defaultMessage: text.badgeTextExpiredOn,
-      }, {
-        dateExpired: states.dateExpired,
-      })))),
-  };
-  const alertMap = {
-    NOT_ACTIVE: (h$1("sl-alert", { type: "danger", open: true, class: sheet$6.classes.WarningAlertContainer },
-      h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h$1("strong", null, intl.formatMessage({
-        id: `taxAlertHeaderNotActive`,
-        defaultMessage: text.taxAlertHeaderNotActive,
-      }, {
-        documentType: states.documentType,
-      })),
-      h$1("br", null),
-      intl.formatMessage({
-        id: `taxAlertMessage`,
-        defaultMessage: text.taxAlertMessage,
-      }, {
-        documentType: states.documentType,
-      }))),
-    EXPIRING_SOON: (h$1("sl-alert", { type: "warning", open: true, class: sheet$6.classes.ExpiringSoonAlertContainer },
-      h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h$1("strong", null, intl.formatMessage({
-        id: `taxAlertHeaderExpiringSoon`,
-        defaultMessage: text.taxAlertHeaderExpiringSoon,
-      }, {
-        documentType: states.documentType,
-        dateExpired: states.dateExpired,
-      })),
-      h$1("br", null),
-      intl.formatMessage({
-        id: `taxAlertMessageExpiringSoon`,
-        defaultMessage: text.taxAlertMessageExpiringSoon,
-      }, {
-        documentType: states.documentType,
-      }))),
-    EXPIRED: (h$1("sl-alert", { type: "danger", open: true, class: sheet$6.classes.WarningAlertContainer },
-      h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h$1("strong", null, intl.formatMessage({
-        id: `taxAlertHeaderExpiredOn`,
-        defaultMessage: text.taxAlertHeaderExpiredOn,
-      }, {
-        documentType: states.documentType,
-      })),
-      h$1("br", null),
-      intl.formatMessage({
-        id: `taxAlertMessage`,
-        defaultMessage: text.taxAlertMessage,
-      }, {
-        documentType: states.documentType,
-      }))),
-  };
-  return (h$1("div", null,
-    h$1("div", null,
-      h$1("style", { type: "text/css" }, styleString$6),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h$1("sl-alert", { type: "danger", open: true, class: sheet$6.classes.WarningAlertContainer },
-        h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h$1("strong", null, text.error.generalTitle),
-        h$1("br", null),
-        text.error.generalDescription)),
-      (states.status === "NOT_ACTIVE" || states.status === "EXPIRED") &&
-        alertMap[states.status],
-      states.status === "ACTIVE" &&
-        states.expiresSoon &&
-        alertMap.EXPIRING_SOON,
-      h$1("div", null,
-        h$1("h3", null, text.bankingInformationSectionHeader),
-        h$1("div", { class: sheet$6.classes.BankingInformationContainer },
-          h$1(PayoutDetailsCardView, Object.assign({}, testDetailsCardProps)),
-          h$1("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$6.classes.EditBankDetailsButton }, "Edit Bank Details"))),
-      h$1("div", { class: sheet$6.classes.TaxDocumentsContainer },
-        h$1("h3", { class: sheet$6.classes.TaxDocumentsHeaderContainer }, text.taxDocumentSectionHeader),
-        h$1("div", null,
-          states.loading ? (h$1("div", { class: sheet$6.classes.TaxSectionSkeletonContainer },
-            h$1("sl-skeleton", { class: sheet$6.classes.SkeletonOne }),
-            h$1("sl-skeleton", { class: sheet$6.classes.SkeletonTwo }))) : (h$1("span", { class: sheet$6.classes.TaxFormDetailsContainer }, states.noFormNeeded ? (h$1("p", { class: sheet$6.classes.TaxDocSubtext }, text.noFormNeededSubtext)) : (h$1("div", { class: sheet$6.classes.StatusContainer },
-            h$1("h4", null, intl.formatMessage({
-              id: "section-subheader",
-              defaultMessage: text.taxDocumentSectionSubHeader,
-            }, {
-              documentType: states.documentType,
-            })),
-            statusMap[states.status])))),
-          states.noFormNeeded ? ("") : (h$1("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$6.classes.NewFormButton }, text.newFormButton)))))));
-};
-
-function getDocumentType(user) {
-  if (!user)
-    return;
-  if (user.countryCode === "US")
-    return "W9";
-  if (user.customFields.__taxCountry === "US") {
-    if (user.customFields.participantType === "individualParticipant")
-      return "W8-BEN";
-    else if (user.customFields.participantType === "businessEntity")
-      return "W8-BEN-E";
-  }
-}
-function getExpiresSoon(submissionDate, expiryDate) {
-  var _a;
-  if (!submissionDate || !expiryDate)
-    return false;
-  return (((_a = luxon.DateTime.fromMillis(expiryDate).diff(luxon.DateTime.fromMillis(submissionDate), "days")) === null || _a === void 0 ? void 0 : _a.days) <= 30);
-}
-const useTaxDocumentSubmitted = (props) => {
-  const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
-  const { data, loading } = useParentQueryValue(USER_QUERY_NAMESPACE);
-  console.log("submitted", { data, loading });
-  // TODO: Fetch document status from backend
-  const submissionDate = luxon.DateTime.now().toMillis();
-  const dateSubmitted = luxon.DateTime.fromMillis(submissionDate).toFormat("LLL dd, yyyy");
-  const expiryDate = luxon.DateTime.now().plus({ days: 30 }).toMillis();
-  const dateExpired = luxon.DateTime.fromMillis(expiryDate).toFormat("LLL dd, yyyy");
-  const expiresSoon = getExpiresSoon(expiryDate, submissionDate);
-  console.log({
-    dateSubmitted,
-    dateExpired,
-    expiresSoon,
-    diff: luxon.DateTime.fromMillis(submissionDate).diff(luxon.DateTime.fromMillis(expiryDate)),
-  });
-  const documentType = getDocumentType(data === null || data === void 0 ? void 0 : data.user);
-  return {
-    states: {
-      dateSubmitted,
-      documentType,
-      // TODO: Hook up to API
-      status: documentType ? "NOT_VERIFIED" : undefined,
-      noFormNeeded: !documentType,
-      dateExpired,
-      expiresSoon,
-      disabled: loading,
-      loading,
-    },
-    callbacks: {
-      onClick: () => setStep(`/3/${documentType}`),
-    },
-    text: props.getTextProps(),
+  }
+  return {
+    states: { loadingEvent, locale },
+    callbacks: { sendEvent, onClick },
   };
-};
+}
 
-const TaxDocumentSubmitted = class {
+const TaskCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.ignored = true;
     /**
-     * Status text displayed in badge when tax document is Active
-     *
-     * @uiName Status text
-     */
-    this.statusTextActive = "Active";
-    /**
-     * Status text displayed in badge when tax document is Not Active
-     *
-     * @uiName Status text
-     */
-    this.statusTextNotActive = "Invalid Tax Form";
-    /**
-     * Status text displayed in badge when tax document is Not Verified
-     *
-     * @uiName Status text
-     */
-    this.statusTextNotVerified = "Not Verified";
-    /**
-     * Status text displayed in badge when tax document is Expired
-     *
-     * @uiName Status text
-     */
-    this.statusTextExpired = "Expired";
-    /**
-     * Description text which appears beside badge showing when the form was submitted
-     *
-     * @uiName Badge description text
+     * @uiName Reward amount
+     * @uiGroup Reward
      */
-    this.badgeTextSubmittedOn = "Submitted on {dateSubmitted}";
+    this.rewardAmount = "0";
     /**
-     * Description text which appears beside badge showing the form is awaiting review
-     *
-     * @uiName Badge description text
+     * @uiName Reward unit
+     * @uiGroup Reward
      */
-    this.badgeTextAwaitingReview = "Awaiting review. Submitted on {dateSubmitted}.";
+    this.rewardUnit = "Points";
     /**
-     * Description text which appears beside badge showing the form has expired
-     *
-     * @uiName Badge description text
+     * @uiName Title
+     * @uiGroup Task
      */
-    this.badgeTextExpiredOn = "Expired on {dateExpired}.";
+    this.cardTitle = "Title Text";
     /**
-     * Description text which appears beside badge showing the form expiring soon
-     *
-     * @uiName Badge description text
+     * @uiName Description
+     * @uiGroup Task
      */
-    this.badgeTextExpiringSoon = ", expiring on {dateExpired}.";
+    this.description = "";
     /**
-     * Header displayed in alert header at the top of the page.
-     *
-     * @uiName Not active alert header
+     * @uiName Goal repeatable
+     * @uiGroup Goal
+     * @default
      */
-    this.taxAlertHeaderNotActive = "Your {documentType} tax form has personal information that doesn't match your profile.";
+    this.repeatable = false;
     /**
-     * Header displayed in alert header at the top of the page.
+     * The number of times a task can be completed when repeatable.  Use zero for no limit (the default).
      *
-     * @uiName Expired alert header
+     * @uiName Repeat amount
+     * @uiGroup Reward
      */
-    this.taxAlertHeaderExpiredOn = "Your {documentType} tax form has expired.";
+    this.finite = 0;
     /**
-     * Header displayed in alert header at the top of the page.
-     *
-     * @uiName Expiring soon alert header
+     * @uiName Show progress bar
+     * @uiGroup Goal
+     * @default
      */
-    this.taxAlertHeaderExpiringSoon = "Your {documentType} tax form expires on {dateExpired}";
+    this.showProgressBar = false;
     /**
-     * Description text displayed in alert body at the top of the page.
+     * Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this.
      *
-     * @uiName Tax alert message
+     * @uiName Goal completion number
+     * @uiGroup Goal
      */
-    this.taxAlertMessage = "Please resubmit a new {documentType} form.";
+    this.goal = 1;
     /**
-     * Description text displayed in alert body at the top of the page.
-     *
-     * @uiName Expiring soon tax alert message
+     * @uiName Progress bar steps
+     * @uiGroup Goal
+     * @default
      */
-    this.taxAlertMessageExpiringSoon = "Please submit a new {documentType} form to continue receiving your rewards";
+    this.steps = false;
     /**
-     * Description text displayed next to the badge in the tax documents status
+     * The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars
      *
-     * @uiName Invalid form description text
+     * @uiName Progress bar unit
+     * @uiGroup Goal
      */
-    this.invalidForm = "Ensure your information matches your profile and resubmit a new document.";
+    this.progressBarUnit = "";
     /**
-     * Header text displayed above the banking information card
+     * Displayed when a user views a task card after the reward duration interval.
      *
-     * @uiName Banking information header
+     * @uiName Expiry date message
+     * @uiGroup Task
      */
-    this.bankingInformationSectionHeader = "Banking Information";
+    this.expiryMessage = "Ends {endDate}";
     /**
-     * Header text displayed above the tax documents status
+     * Shown to users before the start of the task duration.
      *
-     * @uiName Tax document section header
+     * @uiName Start date message
+     * @uiGroup Task
      */
-    this.taxDocumentSectionHeader = "Tax documents";
+    this.startsOnMessage = "Starts {startDate}";
     /**
-     * Sub header text displayed above the tax documents status
+     * Shown to users after the end of the task duration.
      *
-     * @uiName Tax documents sub header
+     * @uiName Ended date message
+     * @uiGroup Task
      */
-    this.taxDocumentSectionSubHeader = "{documentType} Tax Form";
+    this.endedMessage = "Ended {endDate}";
     /**
-     * Subtext displayed at the bottom of the page if there are no tax documents to show
+     * Displays the amount of times that a user has completed a repeatable task.
      *
-     * @uiName No form needed subtext
+     * @uiName Completed count text
+     * @uiGroup Task
+     * @uiWidget textArea
      */
-    this.noFormNeededSubtext = "Tax documents are only required if you are based in the US. If your country of residence has changed, please contact Support.";
+    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
     /**
-     * Text displayed in the submit new document button at the bottom of the page
-     *
-     * @uiName No form needed subtext
+     * @uiName Button text
+     * @uiGroup Button
      */
-    this.newFormButton = "Submit New document";
+    this.buttonText = "Complete Action";
     /**
-     * The title for error message shown at the top of the page in an error banner
-     *
-     * @uiName General error title
+     * Button link opens in new tab
+     * @uiName Open in new tab
+     * @uiGroup Button
+     * @default
      */
-    this.generalErrorTitle = "There was a problem submitting your information";
+    this.openNewTab = false;
     /**
-     * The error message shown at the top of the page in an error banner
-     *
-     * @uiName General error text
+     * @uiName Hide CTA button
+     * @uiGroup Button
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.hideButton = false;
     h(this);
   }
   disconnectedCallback() { }
-  getTextProps() {
-    const props = getProps(this);
-    return {
-      ...props,
-      error: {
-        generalDescription: props.generalErrorDescription,
-        generalTitle: props.generalErrorTitle,
-      },
-    };
-  }
   render() {
-    const props = isDemo()
-      ? useDemoTaxDocumentSubmitted(this)
-      : useTaxDocumentSubmitted(this);
-    return (h$1(Host, null, h$1(TaxDocumentSubmittedView, { callbacks: props.callbacks, states: props.states, text: props.text })));
+    const { props } = isDemo()
+      ? useDemoBigStat(this)
+      : useBigStat({ ...getProps(this), programId: this.programId });
+    const { value, loading } = props;
+    const { states, callbacks } = isDemo()
+      ? useTaskCardDemo(this)
+      : useTaskCard(this);
+    return (h$1(TaskCardView, { callbacks: callbacks, states: {
+        loading,
+        loadingEvent: states.loadingEvent,
+        progress: value,
+        locale: states.locale,
+      }, content: { ...getProps(this) } }));
   }
 };
-function useDemoTaxDocumentSubmitted(props) {
+function useTaskCardDemo(props) {
   return cjs({
-    states: {
-      dateSubmitted: undefined,
-      documentType: undefined,
-      status: undefined,
-      noFormNeeded: true,
-      dateExpired: undefined,
-      expiresSoon: false,
-      disabled: false,
-      loading: false,
-    },
+    states: { loadingEvent: false, locale: "en" },
     callbacks: {
-      onClick: () => console.debug("check step"),
+      sendEvent: (event) => console.log(event),
+      onClick: () => console.log("clicked"),
     },
-    text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
@@ -5875,7 +4257,7 @@ const Gift = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24"
 const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const style$7 = {
+const style$3 = {
   TimelineReward: {
     color: "var(--sl-color-neutral-900)",
     lineHeight: "var(--sl-line-height-dense)",
@@ -5918,9 +4300,9 @@ const style$7 = {
     },
   },
 };
-const sheet$7 = createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
-const vanillaStyle$5 = `
+const sheet$3 = createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+const vanillaStyle$2 = `
 	:host{
 		display: block; 
 	}
@@ -5932,10 +4314,10 @@ const vanillaStyle$5 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h$1("div", { class: sheet$7.classes.TimelineReward, part: "sqm-base" },
+  return (h$1("div", { class: sheet$3.classes.TimelineReward, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString$7,
-      vanillaStyle$5),
+      styleString$3,
+      vanillaStyle$2),
     h$1("div", { class: "container", part: "sqm-entry-container" },
       h$1("div", { class: "line" }, "/"),
       h$1("div", { class: "step" },
@@ -5967,299 +4349,6 @@ const TimelineReward = class {
   }
 };
 
-const UPSERT_USER$4 = dist.gql `
-  mutation ($userInput: UserInput!) {
-    upsertUser(userInput: $userInput) {
-      firstName
-      lastName
-    }
-  }
-`;
-function useUserInfoForm(props) {
-  var _a, _b;
-  const user = H();
-  const formRef = useRef(null);
-  const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
-  const [formState, setFormState] = useParent(USER_INFO_NAMESPACE);
-  const [mutationLoading, setMutationLoading] = useState(false);
-  const [upsertUser] = Fe(UPSERT_USER$4);
-  const { data, loading, refetch } = useParentQueryValue(USER_QUERY_NAMESPACE);
-  const { data: _countries, loading: countriesLoading } = useParentQueryValue(COUNTRIES_NAMESPACE);
-  const { data: currenciesRes, loading: loadingCurrencies } = useParentQueryValue(CURRENCIES_NAMESPACE);
-  useEffect(() => {
-    const user = data === null || data === void 0 ? void 0 : data.user;
-    if (!user || step !== "/1")
-      return;
-  }, [data, step]);
-  function onRadioClick(value) {
-    setFormState({ ...formState, participantType: value });
-  }
-  async function onSubmit(event) {
-    let formControls = event.target.getFormControls();
-    let formData = {};
-    let errors = {};
-    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
-      if (!control.name)
-        return;
-      const key = control.name;
-      const value = control.value;
-      if (control.name === "/participantType") {
-        control.checked && jsonpointer.set(formData, key, value);
-      }
-      else {
-        jsonpointer.set(formData, key, value);
-      }
-      // required validation
-      if (control.required && !value) {
-        jsonpointer.set(errors, key, props.allowBankingCollectionError);
-      }
-      // custom validation
-      if (typeof control.validationError === "function") {
-        const validate = control.validationError;
-        const validationError = validate({ control, key, value });
-        if (validationError)
-          jsonpointer.set(errors, key, validationError);
-      }
-    });
-    // participant type validation
-    if (!formData.participantType) {
-      jsonpointer.set(errors, "/participantType", props.participantTypeError);
-    }
-    if (Object.keys(errors).length) {
-      setFormState({ ...formState, error: "", errors });
-      // early return for validation errors
-      return;
-    }
-    const { allowBankingCollection, ...userData } = formData;
-    try {
-      setMutationLoading(true);
-      await upsertUser({
-        userInput: {
-          id: user.id,
-          accountId: user.accountId,
-          countryCode: userData.countryCode,
-          customFields: {
-            currency: userData.currency,
-            participantType: userData.participantType,
-          },
-        },
-      });
-      await refetch();
-      setStep("/2");
-    }
-    catch (e) {
-      // TODO: Double check
-      setFormState({ ...formState, errors: { general: true } });
-    }
-    finally {
-      setMutationLoading(false);
-    }
-  }
-  return {
-    step: step,
-    setStep: setStep,
-    onSubmit,
-    onRadioClick,
-    text: props.getTextProps(),
-    refs: {
-      formRef,
-    },
-    data: {
-      currencies: (_a = currenciesRes === null || currenciesRes === void 0 ? void 0 : currenciesRes.currencies) === null || _a === void 0 ? void 0 : _a.data,
-      countries: (_b = _countries === null || _countries === void 0 ? void 0 : _countries.countries) === null || _b === void 0 ? void 0 : _b.data,
-    },
-    states: {
-      disabled: loading,
-      loading: loading || mutationLoading,
-      //AL: TODO hook up if user is partner
-      isPartner: false,
-      formState: { ...formState },
-    },
-  };
-}
-
-const TaxForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * Label text for first name input
-     * @uiName First name label
-     */
-    this.firstName = "First name";
-    /**
-     * Label text for last name input
-     * @uiName Last name label
-     */
-    this.lastName = "Last name";
-    /**
-     * Label text for email input
-     * @uiName Email label
-     */
-    this.email = "Email";
-    /**
-     * Label text for country input
-     * @uiName Country label
-     */
-    this.country = "Country";
-    /**
-     * Label text for currency input
-     * @uiName Currency label
-     */
-    this.currency = "Currency";
-    /**
-     * Label text for tax and banking collection checkbox
-     * @uiName Tax and banking label
-     */
-    this.allowBankingCollection = "I agree to the terms";
-    /**
-     * Heading text for the tax and banking collection checkbox
-     * @uiName Tax and banking collection checkbox heading
-     */
-    this.taxAndBankingCollection = "Continue";
-    /**
-     * Sub text shown at the top of the page, used to show the current step of the tax form.
-     * @uiName Tax form step text
-     */
-    this.formStep = "Step 1 of 4";
-    /**
-     * Heading text shown above the forms inputs.
-     * @uiName Form heading text
-     */
-    this.personalInformation = "Personal Information";
-    /**
-     * Label text for the business entity radio button
-     * @uiName Business entity radio button label
-     */
-    this.businessEntity = "I represent a business entity";
-    /**
-     * Label text for the individual participant radio button
-     * @uiName Individual participant radio button label
-     */
-    this.individualParticipant = "I am an individual participant";
-    /**
-     * Heading text for the participant type radio buttons
-     * @uiName Participant type radio buttons heading
-     */
-    this.participantType = "Participant type";
-    /**
-     * Text shown inside of submit button
-     * @uiName Submit button text
-     */
-    this.submitButton = "Continue";
-    /**
-     * Error text shown at the bottom of the first name input
-     * @uiName First name input error text
-     */
-    this.firstNameError = "Enter a first name";
-    /**
-     * Error text shown at the bottom of the last name input
-     * @uiName Last name input error text
-     */
-    this.lastNameError = "Enter a last name";
-    /**
-     * Error text shown at the bottom of the email input
-     * @uiName Email input error text
-     */
-    this.emailError = "Enter a valid email";
-    /**
-     * Error text shown at the bottom of the country input
-     * @uiName Country input error text
-     */
-    this.countryError = "Select a country";
-    /**
-     * Error text shown at the bottom of the currency input
-     * @uiName Currency input error text
-     */
-    this.currencyError = "Select a currency";
-    /**
-     * Error text shown at the bottom of the tax and banking collection checkbox
-     * @uiName Tax and banking collection checkbox error text
-     */
-    this.allowBankingCollectionError = "This field is required";
-    /**
-     * Error text shown at the bottom of the participant type checkbox
-     * @uiName Participant type checkbox error text
-     */
-    this.participantTypeError = "Select a participant type";
-    /**
-     * Alert header text shown in alert if user is already a registered partner
-     * @uiName Participant is partner title
-     */
-    this.isPartnerAlertHeader = "An account with this email already exists with our referral program provider, impact.com";
-    /**
-     * Alert description text shown in alert if user is already a registered partner
-     * @uiName Participant is partner description
-     */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
-    /**
-     * The title for error message shown at the top of the page in an error banner
-     *
-     * @uiName General error title
-     */
-    this.generalErrorTitle = "There was a problem submitting your information";
-    /**
-     * The error message shown at the top of the page in an error banner
-     *
-     * @uiName General error text
-     */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
-    h(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    const props = getProps(this);
-    return {
-      ...props,
-      error: {
-        firstName: props.firstNameError,
-        lastName: props.lastNameError,
-        email: props.emailError,
-        countryCode: props.countryError,
-        currency: props.currencyError,
-        allowBankingCollection: props.allowBankingCollectionError,
-        participantType: props.participantTypeError,
-        generalTitle: props.generalErrorTitle,
-        generalDescription: props.generalErrorDescription,
-      },
-    };
-  }
-  render() {
-    const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (h$1(Host, null, h$1(UserInfoFormView, { data: props.data,
-      // @ts-ignore
-      states: props.states, callbacks: {
-        onSubmit: props.onSubmit,
-        onRadioClick: props.onRadioClick,
-      }, text: props.text, refs: props.refs })));
-  }
-};
-function useDemoUserInfoForm(props) {
-  const [participantType, setParticipantType] = useState(null);
-  return cjs({
-    step: "/1",
-    setStep: () => { },
-    onSubmit: () => { },
-    onRadioClick: (value) => {
-      setParticipantType(value);
-    },
-    text: props.getTextProps(),
-    refs: {
-      formRef: { current: null },
-    },
-    data: {
-      currencies: [{ currencyCode: "CAD", displayName: "CAD" }],
-      countries: [{ countryCode: "CA", displayName: "Canada" }],
-    },
-    states: {
-      disabled: false,
-      formState: { participantType },
-      loading: false,
-      isPartner: false,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
 function UserNameView(props) {
   return h$1(Host, null, props.loading ? props.loadingText : props.username);
 }
@@ -6318,4 +4407,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DocumentTypeForm as sqm_document_type_form, DocusignForm as sqm_docusign_form, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, IndirectTaxForm as sqm_indirect_tax_form, InputField as sqm_input_field, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, Scroll as sqm_scroll, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, TaxDocumentSubmitted as sqm_tax_document_submitted, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, TaxForm as sqm_user_info_form, UserName as sqm_user_name };
+export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, InputField as sqm_input_field, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, Scroll as sqm_scroll, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };