@saasquatch/mint-components 1.13.0-8 → 1.13.0

package/dist/esm/sqm-stencilbook.entry.js

@@ -1,14 +1,14 @@
 import { h, r as registerInstance, c as Host } from './index-91e7729f.js';
 import { a as commonjsGlobal, u as useMemo, k as useState, f as useEffect, c as createCommonjsModule, n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import './global-bedc4329.js';
-import { j as jn, k as kn, b as setUserIdentity, d as dist, X as Xe, h as setProgramId } from './index.module-a2989d3c.js';
+import './global-be1f9992.js';
+import { j as jn, k as kn, b as setUserIdentity, d as dist, X as Xe, p as setProgramId } from './index.module-89a79f66.js';
 import './cjs-bdfb4486.js';
 import './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { C as CopyTextView } from './copy-text-view-b060162f.js';
+import { C as CopyTextView } from './copy-text-view-459a2e35.js';
 import './mixins-83f90fa1.js';
 import { G as GenericTableView } from './GenericTableView-7b9087af.js';
-import './useChildElements-38c11321.js';
+import './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
 import './sqm-text-span-view-ca32495e.js';
 import { A as AssetCardView } from './sqm-asset-card-view-fe5db3c0.js';
@@ -18,18 +18,19 @@ import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.j
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9d802b78.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-56da6bca.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-44c8970f.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-8f1c72bc.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-35b4353b.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-3d3182f1.js';
-import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-98c4db70.js';
-import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-90e2bfd5.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-39039274.js';
-import './utilities-863d06d1.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
+import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-593d4ac3.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-32c4b488.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-93003974.js';
+import './utilities-5b0ca040.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-54a8651f.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-b12cb894.js';
-import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-eba44767.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, J as CouponCodeView, K as ProgressBar$2, M as autoColorScaleCss, O as ShadowViewAddon } from './ShadowViewAddon-ddfbe8e2.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-8e2bb54a.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-af69cd33.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -7304,19 +7305,8 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-const Default$3 = () => (h("sqm-portal-login", { showGoogleLogin: false, demoData: { ...defaultProps$2 } }));
-const IsGoogle = () => (
-// <sqm-portal-login
-//   showGoogleLogin
-//   demoData={{
-//     ...defaultProps,
-//     content: {
-//       googleButton: <sl-button>Sign in with Google</sl-button>,
-//     },
-//     states: { ...defaultProps.states },
-//   }}
-// ></sqm-portal-login>
-h(PortalLoginView, Object.assign({}, defaultProps$2, { content: {
+const Default$3 = () => (h("sqm-portal-login", { demoData: { ...defaultProps$2 } }));
+const IsGoogle = () => (h(PortalLoginView, Object.assign({}, defaultProps$2, { content: {
     secondaryButton: (h("span", null,
       "Don't have an account?",
       " ",
@@ -8485,6 +8475,9 @@ const deniedReward = {
 const payoutFailedReward = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelledReward = {
+  statuses: ["PAYOUT_CANCELLED"],
+};
 const pendingReviewReward = {
   statuses: ["PENDING_REVIEW"],
 };
@@ -8564,8 +8557,8 @@ function getMonths() {
 function getYears() {
   return luxon.DateTime.now().toMillis() + 200000000000;
 }
-const statusText = "{status, select, AVAILABLE {Available} PAYOUT_SENT {Payout Sent} CANCELLED {Cancelled} PAYOUT_FAILED {Payout Failed} PENDING {Pending} PENDING_REVIEW {Pending} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
-const statusLongText = "{status, select, AVAILABLE {Reward expiring on} PAYOUT_SENT {Reward approved for payout and was scheduled for payment based on your settings.} DENIED {Denied on} EXPIRED {Reward expired on} REDEEMED {Redeemed}  other {Not available} }";
+const statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+const statusLongText = "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }";
 const PendingNoUnpend = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
@@ -8648,7 +8641,7 @@ const PayoutFailed = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
-const PayoutCancelled = () => {
+const PayoutDenied = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [
       {
         ...cashPayoutSentReward,
@@ -8658,6 +8651,16 @@ const PayoutCancelled = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
+const PayoutCancelled = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [
+      {
+        ...cashPayoutSentReward,
+        ...payoutCancelledReward,
+        datePayoutRetried: getDays(),
+        dateGiven: null,
+      },
+    ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
+};
 const PendingReview = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReviewReward }], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
@@ -8715,6 +8718,7 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
   Expired: Expired,
   Denied: Denied,
   PayoutFailed: PayoutFailed,
+  PayoutDenied: PayoutDenied,
   PayoutCancelled: PayoutCancelled,
   PendingReview: PendingReview,
   PendingTaxReview: PendingTaxReview,
@@ -8945,6 +8949,12 @@ const simpleUserTableProps = {
         h(DateCell, null),
         h(PayoutFailed, null),
       ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        h(Converted, null),
+        h(DateCell, null),
+        h(PayoutCancelled, null),
+      ],
       [
         h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
         h(Converted, null),
@@ -10130,7 +10140,7 @@ const emailVerifiedTemplate = "<sqm-portal-verify-email></sqm-portal-verify-emai
 
 const emailVerificationTemplate = "<sqm-portal-protected-route redirect-to=\"/login\"></sqm-portal-protected-route>\n<sqm-portal-email-verification></sqm-portal-email-verification>\n";
 
-const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                                                       | Type                                                                                                                                                                                                                                                                                  | Default                                                                            |\n| --------------------- | ----------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| `demoData`            | --                      |                                                                   | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { googleButton?: VNode; forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                                                                        |\n| `emailLabel`          | `email-label`           |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Email\"`                                                                          |\n| `forgotPasswordLabel` | `forgot-password-label` |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Forgot Password?\"`                                                               |\n| `forgotPasswordPath`  | `forgot-password-path`  | Redirect participants to this page to reset their password        | `string`                                                                                                                                                                                                                                                                              | `\"/forgotPassword\"`                                                                |\n| `networkErrorMessage` | `network-error-message` |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"An error occurred while logging you in. Please refresh the page and try again.\"` |\n| `nextPage`            | `next-page`             | Redirect participants to this page after they successfully login. | `string`                                                                                                                                                                                                                                                                              | `\"/\"`                                                                              |\n| `pageLabel`           | `page-label`            |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Sign in to your account\"`                                                        |\n| `passwordLabel`       | `password-label`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Password\"`                                                                       |\n| `registerCTA`         | `register-c-t-a`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Don't have an account?\"`                                                         |\n| `registerLabel`       | `register-label`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Register\"`                                                                       |\n| `registerPath`        | `register-path`         | Redirect participants to this page to start registration.         | `string`                                                                                                                                                                                                                                                                              | `\"/register\"`                                                                      |\n| `showGoogleLogin`     | `show-google-login`     |                                                                   | `boolean`                                                                                                                                                                                                                                                                             | `false`                                                                            |\n| `submitLabel`         | `submit-label`          |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Sign In\"`                                                                        |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-google-sign-in](../sqm-google-sign-in)\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-login --> sqm-google-sign-in\n  sqm-portal-login --> sqm-form-message\n  sqm-stencilbook --> sqm-portal-login\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                                                       | Type                                                                                                                                                                                                                                                                                  | Default                                                                            |\n| --------------------- | ----------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| `demoData`            | --                      |                                                                   | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { googleButton?: VNode; forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                                                                        |\n| `emailLabel`          | `email-label`           |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Email\"`                                                                          |\n| `forgotPasswordLabel` | `forgot-password-label` |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Forgot Password?\"`                                                               |\n| `forgotPasswordPath`  | `forgot-password-path`  | Redirect participants to this page to reset their password        | `string`                                                                                                                                                                                                                                                                              | `\"/forgotPassword\"`                                                                |\n| `networkErrorMessage` | `network-error-message` |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"An error occurred while logging you in. Please refresh the page and try again.\"` |\n| `nextPage`            | `next-page`             | Redirect participants to this page after they successfully login. | `string`                                                                                                                                                                                                                                                                              | `\"/\"`                                                                              |\n| `pageLabel`           | `page-label`            |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Sign in to your account\"`                                                        |\n| `passwordLabel`       | `password-label`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Password\"`                                                                       |\n| `registerCTA`         | `register-c-t-a`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Don't have an account?\"`                                                         |\n| `registerLabel`       | `register-label`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Register\"`                                                                       |\n| `registerPath`        | `register-path`         | Redirect participants to this page to start registration.         | `string`                                                                                                                                                                                                                                                                              | `\"/register\"`                                                                      |\n| `submitLabel`         | `submit-label`          |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Sign In\"`                                                                        |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-login --> sqm-form-message\n  sqm-stencilbook --> sqm-portal-login\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const ReferralIframeReadme = "# sqm-referral-iframe\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property       | Attribute       | Description                                                                                     | Type                                                                                                                           | Default     |\n| -------------- | --------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `demoData`     | --              |                                                                                                 | `{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\n| `iframeHeight` | `iframe-height` | Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto. | `string`                                                                                                                       | `\"100%\"`    |\n| `iframeSrc`    | `iframe-src`    | URL of iframe to display                                                                        | `string`                                                                                                                       | `undefined` |\n| `iframeWidth`  | `iframe-width`  | Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto.   | `string`                                                                                                                       | `\"100%\"`    |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-stencilbook --> sqm-referral-iframe\n  style sqm-referral-iframe fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
@@ -12060,24 +12070,16 @@ const StatusCellExpired = () => {
 const pending = {
   statuses: ["PENDING"],
 };
-// const pendingTaxReview = {
-//   statuses: ["PENDING_TAX_REVIEW"],
-// };
-// const pendingNewTaxForm = {
-//   statuses: ["PENDING_NEW_TAX_FORM"],
-// };
-// const pendingTaxSubmission = {
-//   statuses: ["PENDING_TAX_SUBMISSION"],
-// };
-// const pendingPartnerCreation = {
-//   statuses: ["PENDING_PARTNER_CREATION"],
-// };
 const payoutSent = {
   statuses: ["PAYOUT_SENT"],
 };
 const payoutFailed = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelled = {
+  statuses: ["PAYOUT_CANCELLED"],
+  dateCancelled: 1355612521321,
+};
 const us_tax = {
   pendingReasons: ["US_TAX"],
 };
@@ -12139,6 +12141,9 @@ const StatusCellPayoutSent = () => {
 const StatusCellPayoutFailed = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: { ...rewardsData$1, ...payoutFailed } }));
 };
+const StatusCellPayoutCancelled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: { ...rewardsData$1, ...payoutCancelled } }));
+};
 const StatusCellPendingWithLongText = () => {
   return (h("div", { style: { width: "200px" } },
     h("sqm-rewards-table-status-cell", { statusText: "Pending for 300,000,000 months and some change", reward: { ...rewardsData$1, ...pending } })));
@@ -12242,6 +12247,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   StatusCellPendingPartnerCreation: StatusCellPendingPartnerCreation,
   StatusCellPayoutSent: StatusCellPayoutSent,
   StatusCellPayoutFailed: StatusCellPayoutFailed,
+  StatusCellPayoutCancelled: StatusCellPayoutCancelled,
   StatusCellPendingWithLongText: StatusCellPendingWithLongText,
   StatusCellPendingUsTax: StatusCellPendingUsTax,
   StatusCellPendingScheduled: StatusCellPendingScheduled,
@@ -14483,13 +14489,6 @@ const Loading$6 = () => {
       },
     } }));
 };
-const Error$a = () => {
-  return (h("sqm-payout-details-card", { demoData: {
-      states: {
-        error: true,
-      },
-    } }));
-};
 const NextPayout = () => {
   return (h("sqm-payout-details-card", { demoData: {
       states: {
@@ -14524,7 +14523,6 @@ const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutDetailsCard_stories,
   Loading: Loading$6,
-  Error: Error$a,
   NextPayout: NextPayout,
   PayoutToday: PayoutToday,
   ThresholdPayout: ThresholdPayout,
@@ -14536,6 +14534,7 @@ const BankingForm_stories = {
 };
 const bankingFormProps = {
   states: {
+    showVerification: false,
     hideSteps: false,
     disabled: false,
     loading: false,
@@ -14550,8 +14549,11 @@ const bankingFormProps = {
     thresholds: [],
     currency: "USD",
     loadingError: false,
+    email: "test@example.com",
   },
   callbacks: {
+    onVerificationHide: () => { },
+    onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },
@@ -14861,6 +14863,22 @@ const BankingInfoFormWithFixedDayPaymentScheduleLoading = () => {
       },
     } }));
 };
+const BankingInfoFormVerififyIdentityModal = () => {
+  return (h("sqm-banking-info-form", { demoData: {
+      ...bankingFormProps,
+      states: {
+        ...bankingFormProps.states,
+        isPartner: true,
+        showVerification: true,
+        formState: {
+          ...bankingFormProps.states.formState,
+          bankCountry: "US",
+          paymentScheduleChecked: "FIXED_DAY",
+        },
+        currency: "USD",
+      },
+    } }));
+};
 
 const BankingInfoForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14886,7 +14904,8 @@ const BankingInfoForm = /*#__PURE__*/Object.freeze({
   BankingInfoFormWithBalanceThresholdPaymentScheduleLoading: BankingInfoFormWithBalanceThresholdPaymentScheduleLoading,
   BankingInfoFormWithFixedDayPaymentSchedule: BankingInfoFormWithFixedDayPaymentSchedule,
   BankingInfoFormWithFixedDayPaymentScheduleWithError: BankingInfoFormWithFixedDayPaymentScheduleWithError,
-  BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading
+  BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading,
+  BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal
 });
 
 const InvoiceTableCell_stories = {
@@ -15134,6 +15153,175 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
   InvoiceTableDemoHook: InvoiceTableDemoHook
 });
 
+const WidgetEmailVerification_stories = {
+  title: "Components/Widget Email Verification",
+};
+const defaultProps$k = {
+  email: "",
+  error: false,
+  loading: false,
+  initialLoading: false,
+  sendCodeError: false,
+};
+const Default$j = () => (h("sqm-email-verification", { demoData: {} }));
+const EmailIsPrefilled = () => (h("div", null,
+  h("sqm-text", null,
+    h("h4", null, "Verify your email")),
+  h("sqm-text", null,
+    h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
+  h("sqm-email-verification", { demoData: {
+      states: {
+        ...defaultProps$k,
+        email: "test@example.com",
+      },
+    } })));
+const Loading$7 = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps$k,
+      initialLoading: true,
+    },
+  } }));
+const SaveLoading = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps$k,
+      loading: true,
+    },
+  } }));
+const WithHeader$1 = () => (h("div", null,
+  h("sqm-text", null,
+    h("h4", null, "Verify your email")),
+  h("sqm-text", null,
+    h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
+  h("sqm-email-verification", { demoData: {
+      states: {
+        ...defaultProps$k,
+        email: "test@example.com",
+      },
+    } })));
+const InvalidEmail = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps$k,
+      error: true,
+    },
+  } }));
+const SendCodeError = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps$k,
+      sendCodeError: true,
+    },
+  } }));
+
+const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': WidgetEmailVerification_stories,
+  Default: Default$j,
+  EmailIsPrefilled: EmailIsPrefilled,
+  Loading: Loading$7,
+  SaveLoading: SaveLoading,
+  WithHeader: WithHeader$1,
+  InvalidEmail: InvalidEmail,
+  SendCodeError: SendCodeError
+});
+
+const WidgetCodeVerification_stories = {
+  title: "Components/Widget Code Verification",
+};
+const defaultProps$l = {
+  initialiseLoading: false,
+  email: "testemail@example.com",
+  loading: false,
+  verifyFailed: false,
+  emailResent: false,
+};
+const Default$k = () => (h("sqm-code-verification", { demoData: { states: defaultProps$l } }));
+const InitialLoading = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps$l,
+      initialiseLoading: true,
+    },
+  } }));
+const Loading$8 = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps$l,
+      loading: true,
+    },
+  } }));
+const CodeResent = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps$l,
+      emailResent: true,
+    },
+  } }));
+const VerificationFailed = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps$l,
+      verifyFailed: true,
+    },
+  } }));
+
+const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': WidgetCodeVerification_stories,
+  Default: Default$k,
+  InitialLoading: InitialLoading,
+  Loading: Loading$8,
+  CodeResent: CodeResent,
+  VerificationFailed: VerificationFailed
+});
+
+const PayoutButtonScroll_stories = {
+  title: "Components/Payout Scroll Button",
+};
+const defaultProps$m = {
+  payoutSettingsComplete: true,
+};
+const CompletedTaxForm = () => (h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$m, payoutSettingsComplete: true } } }));
+const CompletedTaxFormWithStatsContainer = () => (h("sqm-portal-container", { display: "flex", maxWidth: "100%", minWidth: "100%", "justify-content": "space-between", flexWrap: "nowrap" },
+  h("sqm-portal-container", { display: "flex", "max-width": "fit-content" },
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
+      h("p", null, "Referrals")),
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/payoutBalance" },
+      h("p", null, "Cash Balance"))),
+  h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$m, payoutSettingsComplete: true } } })));
+
+const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': PayoutButtonScroll_stories,
+  CompletedTaxForm: CompletedTaxForm,
+  CompletedTaxFormWithStatsContainer: CompletedTaxFormWithStatsContainer
+});
+
+const PayoutStatusAlert_stories = {
+  title: "Components/Payout Status Alert",
+};
+const defaultProps$n = {
+  error: false,
+  status: "INFORMATION_REQUIRED",
+  loading: false,
+  veriffLoading: false,
+};
+const InformationRequired = () => (h("sqm-payout-status-alert", { demoData: { states: defaultProps$n } }));
+const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "VERIFICATION:REQUIRED" } } }));
+const VerifyIdentityRequiredInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "VERIFICATION:INTERNAL" } } }));
+const VerifyIdentityReviewInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "VERIFICATION:REVIEW" } } }));
+const VerifyIdentityFailedInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "VERIFICATION:FAILED" } } }));
+const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "HOLD" } } }));
+const Loading$9 = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, loading: true } } }));
+const Error$a = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, error: true } } }));
+
+const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': PayoutStatusAlert_stories,
+  InformationRequired: InformationRequired,
+  VerifyIdentity: VerifyIdentity,
+  VerifyIdentityRequiredInternal: VerifyIdentityRequiredInternal,
+  VerifyIdentityReviewInternal: VerifyIdentityReviewInternal,
+  VerifyIdentityFailedInternal: VerifyIdentityFailedInternal,
+  Hold: Hold,
+  Loading: Loading$9,
+  Error: Error$a
+});
+
 const scenario$E = "@author:sam\n@owner:sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: Clicking any of the share mediums sets the code as copied\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        When clicking <shareMedium> button\n        Then the code is marked as copied\n        And the copied notification text is shown\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario Outline: User is notified if the currently viewed promo code has been copied already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been copied already\n        Then no notification text is displayed\n        When the code is changed to one that has been copied\n        Then the <notificationText> is displayed\n        Examples:\n            | notificationText               |\n            | You've copied this code before |\n            | Previously Copied              |\n            | foo                            |\n\n    @minutia\n    Scenario Outline: Share buttons slots use the link from referral codes instead of the default query\n        Given an authenticated user\n        And the program has promo codes configured\n        And a <shareMedium> button is a child of `<sqm-referral-codes>`\n        Then the <shareMedium> button is shown\n        And the link uses <promoCode>\n        Examples:\n            | propName        | shareMedium | promoCode  |\n            | hideSharelink   | DIRECT      | PROMOCODE1 |\n            | hideEmail       | EMAIL       | PROMOCODE1 |\n            | hideFbMessenger | FBMESSENGER | PROMOCODE1 |\n            | hideWhatsApp    | WHATSAPP    | PROMOCODE1 |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n    @minutia\n    Scenario: Loading state is shown when changing code page\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has more than 1 available\n        When the next button is clicked\n        Then a loading state is shown\n\n\n";
 
 const ReferralCodes_stories = {
@@ -15193,7 +15381,7 @@ const EmptyWithCustomTextAndImage = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
-const Loading$7 = () => {
+const Loading$a = () => {
   return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
     pagination("pagination"),
     shareCodes("shareCodes"),
@@ -15207,13 +15395,13 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   WithPreviouslyCopiedCode: WithPreviouslyCopiedCode,
   Empty: Empty$3,
   EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
-  Loading: Loading$7
+  Loading: Loading$a
 });
 
 const BaseRegistrationForm_stories = {
   title: "Components/Microsite Base Registration",
 };
-const defaultProps$k = {
+const defaultProps$o = {
   states: {
     error: "",
   },
@@ -15233,13 +15421,13 @@ const defaultProps$k = {
   },
 };
 const errorProps$9 = {
-  ...defaultProps$k,
+  ...defaultProps$o,
   states: {
     error: "Something went wrong. Please try again.",
   },
 };
-const Default$j = () => {
-  return h(BaseRegistrationFormView, Object.assign({}, defaultProps$k));
+const Default$l = () => {
+  return h(BaseRegistrationFormView, Object.assign({}, defaultProps$o));
 };
 const EmailError = () => {
   return h(BaseRegistrationFormView, Object.assign({}, errorProps$9));
@@ -15248,14 +15436,14 @@ const EmailError = () => {
 const BaseRegistrationForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': BaseRegistrationForm_stories,
-  Default: Default$j,
+  Default: Default$l,
   EmailError: EmailError
 });
 
 const PortalRegistrationForm_stories = {
   title: "Components/Microsite Portal Register",
 };
-const defaultProps$l = {
+const defaultProps$p = {
   states: {
     error: "",
     loading: false,
@@ -15332,7 +15520,7 @@ const slottedProps$1 = {
       h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$k = () => h(PortalRegistrationFormView, Object.assign({}, defaultProps$l));
+const Default$m = () => h(PortalRegistrationFormView, Object.assign({}, defaultProps$p));
 const RegisterWithError$1 = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps$a)));
 const RegisterLoading$1 = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps$7)));
 const FieldsHidden$1 = () => {
@@ -15348,8 +15536,8 @@ const FieldsHidden$1 = () => {
     } }));
 };
 const SlottedInputs$1 = () => (h(PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
-const TermsAndConditions$3 = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$l, { content: {
-    ...defaultProps$l.content,
+const TermsAndConditions$3 = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$p, { content: {
+    ...defaultProps$p.content,
     terms: (h("p", null,
       "By signing up you agree to the",
       " ",
@@ -15359,7 +15547,7 @@ const TermsAndConditions$3 = () => (h(PortalRegistrationFormView, Object.assign(
 const PortalRegistrationForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalRegistrationForm_stories,
-  Default: Default$k,
+  Default: Default$m,
   RegisterWithError: RegisterWithError$1,
   RegisterLoading: RegisterLoading$1,
   FieldsHidden: FieldsHidden$1,
@@ -15370,7 +15558,7 @@ const PortalRegistrationForm = /*#__PURE__*/Object.freeze({
 const PortalGoogleRegistrationForm_stories = {
   title: "Components/Microsite Google Register",
 };
-const defaultProps$m = {
+const defaultProps$q = {
   states: {
     error: "",
     loading: false,
@@ -15415,7 +15603,7 @@ const defaultProps$m = {
   },
 };
 const errorProps$b = {
-  ...defaultProps$m,
+  ...defaultProps$q,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -15431,7 +15619,7 @@ const errorProps$b = {
   },
 };
 const loadingProps$8 = {
-  ...defaultProps$m,
+  ...defaultProps$q,
   states: {
     error: "",
     loading: true,
@@ -15446,11 +15634,11 @@ const loadingProps$8 = {
     },
   },
 };
-const Default$l = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$m)));
+const Default$n = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$q)));
 const RegisterWithError$2 = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps$b)));
 const RegisterLoading$2 = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps$8)));
-const TermsAndConditions$4 = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$m, { content: {
-    ...defaultProps$m.content,
+const TermsAndConditions$4 = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$q, { content: {
+    ...defaultProps$q.content,
     terms: (h("p", null,
       "By signing up you agree to the",
       " ",
@@ -15460,7 +15648,7 @@ const TermsAndConditions$4 = () => (h(PortalRegistrationFormView, Object.assign(
 const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalGoogleRegistrationForm_stories,
-  Default: Default$l,
+  Default: Default$n,
   RegisterWithError: RegisterWithError$2,
   RegisterLoading: RegisterLoading$2,
   TermsAndConditions: TermsAndConditions$4
@@ -15478,7 +15666,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$m = `
+const Default$o = `
  // No CSS
 `;
 const Orangey = `
@@ -15512,7 +15700,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$m,
+  Default: Default$o,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18195,6 +18383,10 @@ const stories = [
   BaseRegistrationForm,
   PortalRegistrationForm,
   PortalGoogleRegistrationFormStories,
+  WidgetEmailVerification,
+  WidgetCodeVerification,
+  PayoutButtonScroll,
+  PayoutStatusAlert,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/esm/sqm-tab.entry.js

@@ -1,7 +1,7 @@
 import { h, c as Host, r as registerInstance } from './index-91e7729f.js';
 import { n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import './index.module-a2989d3c.js';
-import { a as useRequestRerender } from './re-render-268bb9c8.js';
+import './index.module-89a79f66.js';
+import { a as useRequestRerender } from './re-render-cc945f38.js';
 
 const TabView = ({}, children) => {
   return h(Host, null, children);