@saasquatch/mint-components 1.12.0-8 → 1.12.0

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

@@ -1,32 +1,33 @@
-import { h, r as registerInstance, c as Host } from './index-17b4da69.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-ac12ca1c.js';
-import './global-6306a9b8.js';
-import { x as xn, j as jn, a as setUserIdentity, d as dist, o as an, p as setProgramId } from './index.module-6c840c4e.js';
+import { h, r as registerInstance, c as Host } from './index-014ddfa3.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-576d7f01.js';
+import './global-9832e13a.js';
+import { f as $n, S as Sn, c as setUserIdentity, d as dist, X as Xe, p as setProgramId } from './index.module-32d2bf62.js';
 import './cjs-bdfb4486.js';
-import './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { G as GenericTableView } from './GenericTableView-d59d8ab4.js';
-import './useChildElements-fc84e640.js';
-import { l as luxon } from './luxon-7600be8d.js';
 import './utils-334c1e34.js';
-import './sqm-text-span-view-8d140661.js';
-import { A as AssetCardView } from './sqm-asset-card-view-9d93fbdd.js';
-import { C as CloseButtonView } from './sqm-close-button-view-dc65b4e3.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { C as CopyTextView } from './copy-text-view-200d6958.js';
+import './mixins-f60a614c.js';
+import { G as GenericTableView } from './GenericTableView-706f5b56.js';
+import './useChildElements-dd86d4a4.js';
+import { l as luxon } from './luxon-12195d94.js';
+import './sqm-text-span-view-d6e03f93.js';
+import { A as AssetCardView } from './sqm-asset-card-view-da88351a.js';
+import { C as CloseButtonView } from './sqm-close-button-view-8058642b.js';
 import './index-ffa26b43.js';
-import { E as EmailRegistrationView } from './email-registration-view-a89a88bf.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
-import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-2c6122cd.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0312e073.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-f8e78810.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-c6ac5430.js';
-import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-c2ed8fed.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-15ddbec8.js';
-import './utilities-443732be.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-79a85e02.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-d7ea2c56.js';
-import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, 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, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-69b61037.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-6c582684.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-e9075c0b.js';
+import { E as EmailRegistrationView } from './email-registration-view-5ecee6f8.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-773a586f.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-dfcd508a.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-5f332ea1.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-721b0060.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-d90f5490.js';
+import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-8629f753.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-9ac8ea4d.js';
+import './utilities-34fdb9e3.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-865655da.js';
+import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6c60df25.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-a0cff36f.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-83df005d.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-e3a1287a.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1624,6 +1625,19 @@ const EmptyState = /*#__PURE__*/Object.freeze({
   SlottedIntoComponent: SlottedIntoComponent
 });
 
+const Pagination_stories = {
+  title: "Components/Link Button",
+};
+const Default = () => {
+  return h("sqm-pagination", null);
+};
+
+const Pagination = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Pagination_stories,
+  Default: Default
+});
+
 const scenario$2 = "@author:johan\n@owner:johan\nFeature: Share Link\n\n  The share link component is a box that allows users to see and copy their share link for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users sharelink can be copied to their clipboard\n    Given tooltipText is \"hello tooltip\"\n    When the component renders\n    Then there is a textbox with the user's share link\n    When the clipboard icon is clicked\n    Then the link is copied to clipboard\n    And a tooltip appears for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share link is \"https://www.example.com/sharelink/abc\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share link is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share link is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their sharelink\n    Given a user viewing the share link component\n    And the component is rendered for \"program-a\"\n    When they click to copy their link\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share link text\n    Given a user is editing the share link component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the share link component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
 
 const ShareLink_stories = {
@@ -1632,7 +1646,7 @@ const ShareLink_stories = {
     scenario: scenario$2,
   },
 };
-const Default = () => {
+const Default$1 = () => {
   const props = {
     copyString: "https://noah.example.com",
     open: false,
@@ -1696,7 +1710,7 @@ const FullStack = () => {
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ShareLink_stories,
-  Default: Default,
+  Default: Default$1,
   Tooltip: Tooltip,
   Disabled: Disabled,
   Error: Error$1,
@@ -1715,7 +1729,7 @@ const BigStat_stories = {
     scenario: scenario$3,
   },
 };
-const Default$1 = () => {
+const Default$2 = () => {
   const props = { value: 990000, statvalue: "9.900,00", loading: false };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -1798,7 +1812,7 @@ const MultipleStats = () => {
 const BigStat = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': BigStat_stories,
-  Default: Default$1,
+  Default: Default$2,
   LeftAlign: LeftAlign,
   RightAlign: RightAlign,
   FlexReverse: FlexReverse,
@@ -2535,36 +2549,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => xn.push("/") }, "/"),
-    h("button", { onClick: () => xn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => xn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => xn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => xn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => xn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => xn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => xn.back() }, "Back"),
-    h("button", { onClick: () => xn.forward() }, "Forward"),
+    h("button", { onClick: () => $n.push("/") }, "/"),
+    h("button", { onClick: () => $n.push("/foo") }, "/foo"),
+    h("button", { onClick: () => $n.push("/bar") }, "/bar"),
+    h("button", { onClick: () => $n.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => $n.push("/refer") }, "/refer"),
+    h("button", { onClick: () => $n.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => $n.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => $n.back() }, "Back"),
+    h("button", { onClick: () => $n.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => xn.push("/") }, "/"),
-    h("button", { onClick: () => xn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => xn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => xn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => xn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => xn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => xn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => xn.back() }, "Back"),
-    h("button", { onClick: () => xn.forward() }, "Forward"),
+    h("button", { onClick: () => $n.push("/") }, "/"),
+    h("button", { onClick: () => $n.push("/foo") }, "/foo"),
+    h("button", { onClick: () => $n.push("/bar") }, "/bar"),
+    h("button", { onClick: () => $n.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => $n.push("/refer") }, "/refer"),
+    h("button", { onClick: () => $n.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => $n.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => $n.back() }, "Back"),
+    h("button", { onClick: () => $n.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => xn.push("/") }, "/"),
-    h("button", { onClick: () => xn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => $n.push("/") }, "/"),
+    h("button", { onClick: () => $n.push("/foo") }, "/foo"),
     h("hr", null),
     h("div", { style: { display: "flex", justifyContent: "space-around" } },
       h("sqm-router", { innerHTML: `<template path="/">
@@ -2578,7 +2592,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    xn.push(e.target.value);
+    $n.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2742,8 +2756,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = jn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: xn.back }, "Go Back")));
+        h("strong", null, (_a = Sn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: $n.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2767,8 +2781,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = jn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: xn.back }, "Go Back")));
+        h("strong", null, (_a = Sn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: $n.back }, "Go Back")));
 };
 
 const PortalFrame = /*#__PURE__*/Object.freeze({
@@ -3495,7 +3509,7 @@ function useExchangeButton() {
   const { id, accountId } = setupGraphQL$6();
   const [points, setPoints] = useState(10);
   const [rate, setRate] = useState(100);
-  const [exchange, { data, errors }] = an(EXCHANGE);
+  const [exchange, { data, errors }] = Xe(EXCHANGE);
   return {
     states: {
       points,
@@ -4066,6 +4080,8 @@ const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito S
 
 const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards Earned</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n        >\n          <p>Points Balance</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Share $50 with friends</h3>\n          <p slot=\"content\">\n            They’ll get a $50 credit towards a new account and you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <p>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </p>\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <p>Choose how you want to share:</p>\n            <p><sub>Your unique referral link:</sub></p>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Post about us on X\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 250 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on X\"\n              description=\"Earn 50 points when you Follow Us on X!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n        </sqm-portal-container>\n        <sqm-tabs>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-tab>\n        </sqm-tabs>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https:\\/\\/example.com\"\n        faq-link=\"https:\\/\\/example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
+const promoCodeReferralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <p>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </p>\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-referral-codes slot=\"right\">\n            <sqm-pagination slot=\"pagination\"></sqm-pagination>\n            <sqm-referral-code\n              slot=\"shareCodes\"\n              show-notification-text=\"true\"\n            ></sqm-referral-code>\n            <sqm-portal-container gap=\"small\" slot=\"shareButtons\">\n              <sqm-share-button medium=\"email\"\n                >Share via email</sqm-share-button\n              >\n              <sqm-share-button medium=\"fbmessenger\"\n                >Share on Facebook</sqm-share-button\n              >\n              <sqm-share-button medium=\"whatsapp\"\n                >Share on WhatsApp</sqm-share-button\n              >\n            </sqm-portal-container>\n          </sqm-referral-codes>\n        </sqm-referral-card>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          padding=\"none\"\n          text-align=\"center\"\n          label-margin=\"xx-small\"\n        >\n          <h3 slot=\"label\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https:\\/\\/example.com\"\n        faq-link=\"https:\\/\\/example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+
 const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <p>Points Redeemed</p>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <p>Points Balance</p>\n            </sqm-big-stat>\n          </sqm-stat-container>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"center\"\n          >\n            <h3 slot=\"label\">Earn points</h3>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 250 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on X\"\n              description=\"Earn 50 points when you Follow Us on X!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-titled-section\n              padding=\"none\"\n              text-align=\"center\"\n              label-margin=\"xx-small\"\n            >\n              <h3 slot=\"label\">Reward History</h3>\n            </sqm-titled-section>\n            <sqm-rewards-table\n              per-page=\"4\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-portal-container>\n        </sqm-portal-container>\n        <sqm-portal-footer\n          support-email=\"support@example.com\"\n          terms-link=\"https:\\/\\/example.com\"\n          faq-link=\"https:\\/\\/example.com\"\n          terms-text=\"Terms And Conditions\"\n          faq-text=\"FAQ\"\n          show-powered-by=\"true\"\n          padding-bottom=\"none\"\n          padding-left=\"none\"\n          padding-right=\"none\"\n          padding-top=\"none\"\n        ></sqm-portal-footer>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
 const instantAccessReferrerShareWidget = "<sqm-hero\n  background=\"https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png\"\n  columns=\"2\"\n  padding-size=\"medium\"\n  wrap-direction=\"wrap\"\n  secondary-background=\"#FFFFFF\"\n  min-height=\"200\"\n  ><sqm-referral-card\n    vertical-alignment=\"start\"\n    slot=\"secondary-column\"\n    padding-bottom=\"small\"\n    padding-left=\"x-large\"\n    padding-right=\"x-large\"\n    padding-top=\"small\"\n  >\n    <sqm-titled-section\n      text-align=\"center\"\n      label-margin=\"none\"\n      padding=\"none\"\n      slot=\"header\"\n      ><h1 slot=\"label\">Invite your friends to unlock rewards!</h1>\n      <p slot=\"content\">\n        They&#x2019;ll get a &#x24;50 credit towards a new account and\n        you&#x2019;ll get a &#x24;50 in credit for each friend you refer.\n      </p></sqm-titled-section\n    >\n    <sqm-portal-container\n      gap=\"small\"\n      direction=\"column\"\n      display=\"grid\"\n      max-width=\"100%\"\n      padding=\"none\"\n      slot=\"left\"\n    >\n      <p style=\"margin: 0\">Choose how you want to share:</p>\n      <sqm-share-link\n        tooltip-text=\"Copied to Clipboard\"\n        tooltip-lifespan=\"1000\"\n      >\n      </sqm-share-link>\n      <sqm-share-button\n        medium=\"email\"\n        icon-slot=\"prefix\"\n        size=\"medium\"\n        type=\"default\"\n      >\n        Share via email\n      </sqm-share-button>\n      <sqm-share-button\n        medium=\"linkedin\"\n        icon-slot=\"prefix\"\n        size=\"medium\"\n        type=\"default\"\n      >\n        Share on LinkedIn\n      </sqm-share-button>\n      <sqm-share-button\n        medium=\"twitter\"\n        icon-slot=\"prefix\"\n        size=\"medium\"\n        type=\"default\"\n      >\n        Post about us on X\n      </sqm-share-button> </sqm-portal-container\n    ><sqm-portal-container\n      display=\"flex\"\n      slot=\"footer\"\n      gap=\"small\"\n      justify-content=\"center\"\n    >\n      <sqm-logout-current-user\n        user-identification-text=\"{email}\"\n        switch-user-link=\"#\"\n        switch-user-text=\"not you?\"\n      ></sqm-logout-current-user>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        show-powered-by=\"true\"\n        padding-bottom=\"x-small\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n        hide-support-text\n        terms-text=\"Terms And Conditions\"\n        terms-link=\"https://example.com\"\n      ></sqm-portal-footer></sqm-portal-container\n  ></sqm-referral-card>\n</sqm-hero>\n";
@@ -4096,16 +4112,16 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      h("button", { onClick: () => xn.push("/") }, "Dashboard"),
-      props.leadSubmit && (h("button", { onClick: () => xn.push("/refer") }, "Submit a Referral")),
-      h("button", { onClick: () => xn.push("/activity") }, "Activity"),
-      h("button", { onClick: () => xn.push("/editProfile") }, "Edit Profile"),
-      h("button", { onClick: () => xn.push("/login") }, "Login"),
-      h("button", { onClick: () => xn.push("/register") }, "Register"),
-      h("button", { onClick: () => xn.push("/emailVerification") }, "Email Verification"),
-      h("button", { onClick: () => xn.push("/verifyEmail") }, "Verify Email"),
-      h("button", { onClick: () => xn.push("/forgotPassword") }, "Forgot Password"),
-      h("button", { onClick: () => xn.push("/resetPassword") }, "Reset Password")),
+      h("button", { onClick: () => $n.push("/") }, "Dashboard"),
+      props.leadSubmit && (h("button", { onClick: () => $n.push("/refer") }, "Submit a Referral")),
+      h("button", { onClick: () => $n.push("/activity") }, "Activity"),
+      h("button", { onClick: () => $n.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => $n.push("/login") }, "Login"),
+      h("button", { onClick: () => $n.push("/register") }, "Register"),
+      h("button", { onClick: () => $n.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => $n.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => $n.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => $n.push("/resetPassword") }, "Reset Password")),
     h("br", null),
     h("div", { innerHTML: states.previewTemplate })));
 }
@@ -7122,6 +7138,10 @@ const Loyalty = createHookStory(() => {
   const { states, callbacks } = useTemplate$1(loyaltyWidget);
   return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: loyaltyWidget }));
 });
+const PromoCodeReferralWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(promoCodeReferralWidget);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: referralWidget }));
+});
 const InstantAccessReferrerShareWidget = createHookStory(() => {
   const { states, callbacks } = useTemplate$1(instantAccessReferrerShareWidget);
   return h(TemplateView$1, { states: states, callbacks: callbacks });
@@ -7153,6 +7173,7 @@ const Widget = /*#__PURE__*/Object.freeze({
   ReferralWidget: ReferralWidget,
   MonoWidget: MonoWidget,
   Loyalty: Loyalty,
+  PromoCodeReferralWidget: PromoCodeReferralWidget,
   InstantAccessReferrerShareWidget: InstantAccessReferrerShareWidget,
   PaypalMonoWidget: PaypalMonoWidget,
   PaypalReferralWidget: PaypalReferralWidget,
@@ -7272,14 +7293,14 @@ const loadingProps = {
   },
   content: { pageLabel: "Sign in to your account" },
 };
-const Default$2 = () => h(PortalLoginView, Object.assign({}, defaultProps$2));
+const Default$3 = () => h(PortalLoginView, Object.assign({}, defaultProps$2));
 const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
 const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));
 
 const PortalLogin = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalLogin_stories,
-  Default: Default$2,
+  Default: Default$3,
   LoginWithError: LoginWithError,
   LoginLoading: LoginLoading
 });
@@ -7382,7 +7403,7 @@ const slottedProps = {
       h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$3 = () => h(PortalRegisterView, Object.assign({}, defaultProps$3));
+const Default$4 = () => h(PortalRegisterView, Object.assign({}, defaultProps$3));
 const RegisterWithError = () => h(PortalRegisterView, Object.assign({}, errorProps$1));
 const RegisterLoading = () => h(PortalRegisterView, Object.assign({}, loadingProps$1));
 const FieldsHidden = () => {
@@ -7409,7 +7430,7 @@ const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaul
 const PortalRegister = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalRegister_stories,
-  Default: Default$3,
+  Default: Default$4,
   RegisterWithError: RegisterWithError,
   RegisterLoading: RegisterLoading,
   FieldsHidden: FieldsHidden,
@@ -7485,7 +7506,7 @@ const successProps = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const Default$4 = () => h(PortalForgotPasswordView, Object.assign({}, defaultProps$4));
+const Default$5 = () => h(PortalForgotPasswordView, Object.assign({}, defaultProps$4));
 const ForgotPasswordWithError = () => (h(PortalForgotPasswordView, Object.assign({}, errorProps$2)));
 const ForgotPasswordLoading = () => (h(PortalForgotPasswordView, Object.assign({}, loadingProps$2)));
 const ForgotPasswordSuccess = () => (h(PortalForgotPasswordView, Object.assign({}, successProps)));
@@ -7493,7 +7514,7 @@ const ForgotPasswordSuccess = () => (h(PortalForgotPasswordView, Object.assign({
 const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalForgotPassword_stories,
-  Default: Default$4,
+  Default: Default$5,
   ForgotPasswordWithError: ForgotPasswordWithError,
   ForgotPasswordLoading: ForgotPasswordLoading,
   ForgotPasswordSuccess: ForgotPasswordSuccess
@@ -7564,7 +7585,7 @@ const loadingVerificationProps = {
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-const Default$5 = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps$5));
+const Default$6 = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps$5));
 const EmailVerificationWithError = () => (h(PortalEmailVerificationView, Object.assign({}, errorProps$3)));
 const EmailVerificationLoading = () => (h(PortalEmailVerificationView, Object.assign({}, loadingProps$3)));
 const EmailVerificationCheckingVerification = () => (h(PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
@@ -7573,7 +7594,7 @@ const EmailVerificationSuccess = () => (h(PortalEmailVerificationView, Object.as
 const PortalEmailVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalEmailVerification_stories,
-  Default: Default$5,
+  Default: Default$6,
   EmailVerificationWithError: EmailVerificationWithError,
   EmailVerificationLoading: EmailVerificationLoading,
   EmailVerificationCheckingVerification: EmailVerificationCheckingVerification,
@@ -7726,7 +7747,7 @@ const validatingCodeProps = {
     failed: () => console.log("failed"),
   },
 };
-const Default$6 = () => h(PortalResetPasswordView, Object.assign({}, defaultProps$6));
+const Default$7 = () => h(PortalResetPasswordView, Object.assign({}, defaultProps$6));
 const DefaultWithoutConfirmField = () => (h(PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
 const ResetPasswordWithError = () => (h(PortalResetPasswordView, Object.assign({}, errorProps$4)));
 const ResetPasswordLoading = () => (h(PortalResetPasswordView, Object.assign({}, loadingProps$4)));
@@ -7736,7 +7757,7 @@ const CodeValidating = () => (h(PortalResetPasswordView, Object.assign({}, valid
 const PortalResetPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalResetPassword_stories,
-  Default: Default$6,
+  Default: Default$7,
   DefaultWithoutConfirmField: DefaultWithoutConfirmField,
   ResetPasswordWithError: ResetPasswordWithError,
   ResetPasswordLoading: ResetPasswordLoading,
@@ -7799,7 +7820,7 @@ const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
 const AssetCard_stories = {
   title: "Components/Asset Card",
 };
-const Default$7 = () => {
+const Default$8 = () => {
   const props = {
     text: { titleText: "Marketing Banner" },
     imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
@@ -7827,7 +7848,7 @@ const CardWithNoImg = () => {
 const AssetCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': AssetCard_stories,
-  Default: Default$7,
+  Default: Default$8,
   CardWithLongText: CardWithLongText,
   CardWithNoImg: CardWithNoImg
 });
@@ -8048,7 +8069,7 @@ const successProps$3 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const Default$8 = () => h(PortalChangePasswordView, Object.assign({}, defaultProps$7));
+const Default$9 = () => h(PortalChangePasswordView, Object.assign({}, defaultProps$7));
 const Open = () => h(PortalChangePasswordView, Object.assign({}, openProps));
 const Error$2 = () => h(PortalChangePasswordView, Object.assign({}, errorProps$6));
 const PaswordError = () => (h(PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
@@ -8058,7 +8079,7 @@ const Success = () => h(PortalChangePasswordView, Object.assign({}, successProps
 const ChangePassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ChangePassword_stories,
-  Default: Default$8,
+  Default: Default$9,
   Open: Open,
   Error: Error$2,
   PaswordError: PaswordError,
@@ -8285,7 +8306,7 @@ const successProps$4 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$9 = () => h(PortalProfileView, Object.assign({}, defaultProps$8));
+const Default$a = () => h(PortalProfileView, Object.assign({}, defaultProps$8));
 const DefaultNoCountry = () => h(PortalProfileView, Object.assign({}, noCountry));
 const Loading$2 = () => h(PortalProfileView, Object.assign({}, loadingProps$6));
 const Disabled$1 = () => h(PortalProfileView, Object.assign({}, disabledProps));
@@ -8295,7 +8316,7 @@ const Success$1 = () => h(PortalProfileView, Object.assign({}, successProps$4));
 const PortalProfile = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalProfile_stories,
-  Default: Default$9,
+  Default: Default$a,
   DefaultNoCountry: DefaultNoCountry,
   Loading: Loading$2,
   Disabled: Disabled$1,
@@ -8434,6 +8455,9 @@ const deniedReward = {
 const payoutFailedReward = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelledReward = {
+  statuses: ["PAYOUT_CANCELLED"],
+};
 const pendingReviewReward = {
   statuses: ["PENDING_REVIEW"],
 };
@@ -8513,8 +8537,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." }));
 };
@@ -8597,8 +8621,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." }));
 };
-// AL: TODO payout cancelled
-const PayoutCancelled = () => {
+const PayoutDenied = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [
       {
         ...cashPayoutSentReward,
@@ -8608,6 +8631,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." }));
 };
@@ -8665,6 +8698,7 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
   Expired: Expired,
   Denied: Denied,
   PayoutFailed: PayoutFailed,
+  PayoutDenied: PayoutDenied,
   PayoutCancelled: PayoutCancelled,
   PendingReview: PendingReview,
   PendingTaxReview: PendingTaxReview,
@@ -8895,6 +8929,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),
@@ -10255,7 +10295,7 @@ const ProgramMenu = /*#__PURE__*/Object.freeze({
 const PoweredByImg_stories = {
   title: "Powered By",
 };
-const Default$a = () => {
+const Default$b = () => {
   return h(PoweredByImg$1, null);
 };
 const CustomColor = () => {
@@ -10268,7 +10308,7 @@ const CustomWidthAndHeight = () => {
 const PoweredByImg = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PoweredByImg_stories,
-  Default: Default$a,
+  Default: Default$b,
   CustomColor: CustomColor,
   CustomWidthAndHeight: CustomWidthAndHeight
 });
@@ -10655,7 +10695,7 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$b = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a))));
+const Default$c = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a))));
 const DefaultChecked = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
     ...defaultProps$a.states,
     checked: true,
@@ -10710,7 +10750,7 @@ const TermsAndConditionsLongCustomLabel = createHookStory(() => (h(PortalRegiste
 const CheckboxField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CheckboxField_stories,
-  Default: Default$b,
+  Default: Default$c,
   DefaultChecked: DefaultChecked,
   CustomLabel: CustomLabel,
   Error: Error$4,
@@ -10812,7 +10852,7 @@ const defaultProps$b = {
     ],
   },
 };
-const Default$c = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b))));
+const Default$d = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b))));
 const CustomLabel$1 = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b, { content: {
     ...defaultProps$b.content,
     dropdownLabel: "Pick your favorite",
@@ -10840,7 +10880,7 @@ const CustomError$1 = createHookStory(() => (h(DropdownFieldView, Object.assign(
 const DropdownField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': DropdownField_stories,
-  Default: Default$c,
+  Default: Default$d,
   CustomLabel: CustomLabel$1,
   Error: Error$5,
   CustomError: CustomError$1
@@ -10950,7 +10990,7 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$d = () => h(InputFieldView, Object.assign({}, defaultProps$c));
+const Default$e = () => h(InputFieldView, Object.assign({}, defaultProps$c));
 const CustomLabel$2 = () => (h(InputFieldView, Object.assign({}, defaultProps$c, { content: { ...defaultProps$c.content, fieldLabel: "My Label" } })));
 const Error$6 = () => (h(InputFieldView, Object.assign({}, defaultProps$c, { states: {
     ...defaultProps$c.states,
@@ -11000,7 +11040,7 @@ const RegistrationFieldCustomLabel = () => (h(PortalRegisterView, Object.assign(
 const InputField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': InputField_stories,
-  Default: Default$d,
+  Default: Default$e,
   CustomLabel: CustomLabel$2,
   Error: Error$6,
   CustomError: CustomError$2,
@@ -11750,7 +11790,7 @@ const scenario2 = "@author:derek\n@owner:derek\nFeature: Reward Table reward Col
 
 const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background: \n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples: \n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples: \n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format \"Month-Day-Year\"                                 |\n      | redeemed reward                                              | localized redemption date in format \"Month-Day-Year\"                             |\n      | expired reward                                               | localized expired date in format \"Month-Day-Year\"                                |\n      | cancelled reward                                             | localized cancelled date in format \"Month-Day-Year\"                              |\n      | pending reward with a end date                               | localized pending for date in format \"Month-Day-Year\"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"PAYOUT_CONFIGURATION_MISSING\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples: \n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n";
 
-const scenario4 = "@author:derek @owner:derek\nFeature: Reward Table Source Column\n    Shows the source of each reward\n\n  @motivating @ui\n  Scenario Outline: The title of the source column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the source column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Source          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario: The source column displays manual if the reward is caused by a manual action\n    Given a user with a \"MANUAL\" reward\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Manual\"\n\n  @motivating @ui\n  Scenario: The source column displays the program name if the reward is caused automatically by a program\n    Given a user with a \"AUTOMATED\" program reward\n    And the program has name \"Loyalty Program\"\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Loyalty Program\"\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n    Given the \"reward-exchange-text\" prop is <propValue>\n    And a user with a \"MANUAL\" reward\n    But it was created by a reward exchange\n    Then they view the rewards table\n    Then the source displays <exchangeText>\n    And under it displays the following\n      | prettyRedeemedCredit → prettyValue |\n\n    Examples:\n      | propValue | exchangeText    |\n      |           | Reward Exchange |\n      | Exchanged | Exchanged       |\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n    Given the \"reward-source-text\" prop is <propValue>\n    And a user with a referral reward\n    And that reward has <rewardSource>\n    When they view the rewards table\n    Then then source displays <referralText>\n    And under it displays the full name of the <referralUser>\n\n    Examples:\n      | propValue                                                                             | rewardSource  | referralText | referralUser  |\n      |                                                                                       | REFERRED      | Referred by  | referrer user |\n      |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n  @motivating @ui\n  Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n    Given a user with a referral reward\n    And referral user exists\n    And referral user has <name>\n    But referral user has no <otherName>\n    When they view the rewards table\n    Then referral user's name is displayed as <name>\n\n    Examples:\n      | name       | otherName  |\n      | first.name | last.name  |\n      | last.name  | first.name |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    And the <referralUser> has no first name\n    And the <referralUser> has no last name\n    When they view the rewards table\n    Then then source displays <sourceText>\n    And under it displays \"Anonymous User\"\n\n    Examples:\n      | rewardSource  | referralUser  | sourceText  |\n      | FRIEND_SIGNUP | referrer      | Referral to |\n      | REFERRED      | referred user | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted User\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n#  AL: TODO DELETED REFERRAL SPEC\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted referral\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted referral\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @minutia @ui\n  Scenario Outline: Name fallbacks for referral users without names are customizable\n    Given <prop> with <value>\n    And a user with a referral reward\n    But the referral user <hadAction>\n    When they view the rewards table\n    Then the source displays <value> as the referral user\n\n    Examples:\n      | prop           | value           | hadAction                       |\n      | deleted-user   | Former Customer | was deleted                     |\n      | anonymous-user | Nameless User   | had first and last name deleted |\n\n  @motivating\n  Scenario Outline: Source text can be customized\n    Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n    And a user with a <rewardSource> reward\n    When they view the rewards table\n    Then the source is <sourceText>\n\n    Examples:\n      | rewardSource | sourceText      |\n      | MANUAL       | Support         |\n      | AUTOMATED    | Loyalty Program |\n";
+const scenario4 = "@author:derek @owner:derek\nFeature: Reward Table Source Column\n    Shows the source of each reward\n\n  @motivating @ui\n  Scenario Outline: The title of the source column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the source column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Source          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario: The source column displays manual if the reward is caused by a manual action\n    Given a user with a \"MANUAL\" reward\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Manual\"\n\n  @motivating @ui\n  Scenario: The source column displays the program name if the reward is caused automatically by a program\n    Given a user with a \"AUTOMATED\" program reward\n    And the program has name \"Loyalty Program\"\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Loyalty Program\"\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n    Given the \"reward-exchange-text\" prop is <propValue>\n    And a user with a \"MANUAL\" reward\n    But it was created by a reward exchange\n    Then they view the rewards table\n    Then the source displays <exchangeText>\n    And under it displays the following\n      | prettyRedeemedCredit → prettyValue |\n\n    Examples:\n      | propValue | exchangeText    |\n      |           | Reward Exchange |\n      | Exchanged | Exchanged       |\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n    Given the \"reward-source-text\" prop is <propValue>\n    And a user with a referral reward\n    And that reward has <rewardSource>\n    When they view the rewards table\n    Then then source displays <referralText>\n    And under it displays the full name of the <referralUser>\n\n    Examples:\n      | propValue                                                                             | rewardSource  | referralText | referralUser  |\n      |                                                                                       | REFERRED      | Referred by  | referrer user |\n      |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n  @motivating @ui\n  Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n    Given a user with a referral reward\n    And referral user exists\n    And referral user has <name>\n    But referral user has no <otherName>\n    When they view the rewards table\n    Then referral user's name is displayed as <name>\n\n    Examples:\n      | name       | otherName  |\n      | first.name | last.name  |\n      | last.name  | first.name |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    And the <referralUser> has no first name\n    And the <referralUser> has no last name\n    When they view the rewards table\n    Then then source displays <sourceText>\n    And under it displays \"Anonymous User\"\n\n    Examples:\n      | rewardSource  | referralUser  | sourceText  |\n      | FRIEND_SIGNUP | referrer      | Referral to |\n      | REFERRED      | referred user | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted User\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted referral\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted referral\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @minutia @ui\n  Scenario Outline: Name fallbacks for referral users without names are customizable\n    Given <prop> with <value>\n    And a user with a referral reward\n    But the referral user <hadAction>\n    When they view the rewards table\n    Then the source displays <value> as the referral user\n\n    Examples:\n      | prop           | value           | hadAction                       |\n      | deleted-user   | Former Customer | was deleted                     |\n      | anonymous-user | Nameless User   | had first and last name deleted |\n\n  @motivating\n  Scenario Outline: Source text can be customized\n    Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n    And a user with a <rewardSource> reward\n    When they view the rewards table\n    Then the source is <sourceText>\n\n    Examples:\n      | rewardSource | sourceText      |\n      | MANUAL       | Support         |\n      | AUTOMATED    | Loyalty Program |\n";
 
 const scenario$r = scenario1 + scenario2 + scenario3 + scenario4;
 const RewardsTableCell_stories = {
@@ -11973,9 +12013,7 @@ const SourceCellDeletedUser = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
 };
 const SourceCellDeletedReferral = () => {
-  return (
-  // AL: TODO
-  h("sqm-rewards-table-source-cell", { 
+  return (h("sqm-rewards-table-source-cell", { 
     //@ts-ignore
     reward: { ...rewardsData$1, ...deletedReferral() }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
 };
@@ -12012,24 +12050,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"],
 };
@@ -12091,6 +12121,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 } })));
@@ -12194,6 +12227,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   StatusCellPendingPartnerCreation: StatusCellPendingPartnerCreation,
   StatusCellPayoutSent: StatusCellPayoutSent,
   StatusCellPayoutFailed: StatusCellPayoutFailed,
+  StatusCellPayoutCancelled: StatusCellPayoutCancelled,
   StatusCellPendingWithLongText: StatusCellPendingWithLongText,
   StatusCellPendingUsTax: StatusCellPendingUsTax,
   StatusCellPendingScheduled: StatusCellPendingScheduled,
@@ -12623,6 +12657,21 @@ const sharebutton = (slot) => {
       h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
       h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
 };
+const shareButtonsWithPromoCodes = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-text", null, "Choose how you want to share:"),
+    h("sqm-text", null,
+      h("sub", null, "Share with your friends:"),
+      h("sqm-share-code", null),
+      h("sqm-share-link", null)),
+    h("sqm-portal-container", { gap: "x-small" },
+      h("sqm-share-button", { medium: "email" }, "Share via email"),
+      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"),
+      h("sqm-portal-container", { gap: "x-small" },
+        h("span", { style: { textAlign: "center", color: "var(--sl-color-gray-500)" } }, "You have copied this code before"),
+        h("sqm-pagination", null)))));
+};
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },
     count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
@@ -12645,6 +12694,11 @@ const TimelineAndShareButtons = () => {
     timeline("left", 3),
     sharebutton("right")));
 };
+const OneTimeUsePromoCodes = () => {
+  return (h("sqm-referral-card", null,
+    timeline("left", 4),
+    shareButtonsWithPromoCodes("right")));
+};
 const StartAlignment = () => {
   return (h("sqm-referral-card", { "vertical-alignment": "start" },
     timeline("left", 4),
@@ -12721,6 +12775,7 @@ const ReferralCard = /*#__PURE__*/Object.freeze({
   ImageAndShareButtons: ImageAndShareButtons,
   LimitWidth: LimitWidth,
   TimelineAndShareButtons: TimelineAndShareButtons,
+  OneTimeUsePromoCodes: OneTimeUsePromoCodes,
   StartAlignment: StartAlignment,
   CenterAlignment: CenterAlignment,
   EndAlignment: EndAlignment,
@@ -13822,6 +13877,82 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
   Error: Error$7
 });
 
+const scenario$A = "@author:sam\n@owner:sam\nFeature: Referral Code\n\n  The referral code component is a box that allows users to see and copy their referral promo code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code can be copied to their clipboard\n    Given tooltiptext is \"hello tooltip\"\n    When the component renders\n    Then there is a textbox with the user's referral code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan can be customized\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is \"SHARECODE001\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the referral code component\n    And the component is rendered for \"program-a\"\n    When they click to copy their code\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the referral code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the referral code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
+
+const ReferralCode_stories = {
+  title: "Components/Referral Code",
+  parameters: {
+    scenario: scenario$A,
+  },
+};
+const ReferralCode = () => {
+  return (h("sqm-referral-code", { tooltiptext: "Copied to Clipboard" }));
+};
+const ShowNotificationText = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
+};
+const ShowNotificationTextWithButton = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
+};
+const ShowNotificationTextWithButtonBelow = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-below" }));
+};
+const CustomTooltipText$1 = () => {
+  return (h("sqm-referral-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+const TextAlignCenter$2 = () => {
+  return h("sqm-referral-code", { textAlign: "center" });
+};
+const TextAlignRight$2 = () => {
+  return h("sqm-referral-code", { textAlign: "right" });
+};
+const CustomTooltipDuration$1 = () => {
+  return (h("sqm-referral-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+const CopyButton$2 = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    isCopyIcon: false,
+    buttonStyle: "button-outside",
+  })));
+};
+const CopyButtonBelow$2 = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    buttonStyle: "button-below",
+  })));
+};
+const Error$8 = () => {
+  const props = {
+    copyString: "https://noah.example.com",
+    disabled: true,
+    open: true,
+    tooltiptext: "Copied!",
+    error: true,
+  };
+  return h(CopyTextView, Object.assign({}, props));
+};
+
+const ReferralCode$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ReferralCode_stories,
+  ReferralCode: ReferralCode,
+  ShowNotificationText: ShowNotificationText,
+  ShowNotificationTextWithButton: ShowNotificationTextWithButton,
+  ShowNotificationTextWithButtonBelow: ShowNotificationTextWithButtonBelow,
+  CustomTooltipText: CustomTooltipText$1,
+  TextAlignCenter: TextAlignCenter$2,
+  TextAlignRight: TextAlignRight$2,
+  CustomTooltipDuration: CustomTooltipDuration$1,
+  CopyButton: CopyButton$2,
+  CopyButtonBelow: CopyButtonBelow$2,
+  Error: Error$8
+});
+
 // import scenario from "./ShareCode.feature";
 const EmailRegistration_stories = {
   title: "Components/Email Registration",
@@ -13848,7 +13979,7 @@ const defaultProps$d = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$e = () => h(EmailRegistrationView, Object.assign({}, defaultProps$d));
+const Default$f = () => h(EmailRegistrationView, Object.assign({}, defaultProps$d));
 const HasFirstNameLastName = () => (h(EmailRegistrationView, Object.assign({}, {
   ...defaultProps$d,
   content: {
@@ -13885,7 +14016,7 @@ const Loading$4 = () => (h(EmailRegistrationView, Object.assign({}, {
     loading: true,
   },
 })));
-const Error$8 = () => (h(EmailRegistrationView, Object.assign({}, {
+const Error$9 = () => (h(EmailRegistrationView, Object.assign({}, {
   ...defaultProps$d,
   states: {
     error: "Something went wrong. Please try again.",
@@ -13913,23 +14044,23 @@ const EmptyEmailError = () => (h(EmailRegistrationView, Object.assign({}, {
 const EmailRegistration = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': EmailRegistration_stories,
-  Default: Default$e,
+  Default: Default$f,
   HasFirstNameLastName: HasFirstNameLastName,
   WithSlots: WithSlots,
   NoBorder: NoBorder$1,
   BackgroundColor: BackgroundColor$2,
   Loading: Loading$4,
-  Error: Error$8,
+  Error: Error$9,
   FraudError: FraudError,
   EmptyEmailError: EmptyEmailError
 });
 
-const scenario$A = "@author:truman\n@owner:truman\nFeature: Coupon Code\n\n  The coupon code component is a box that allows users to see and copy their coupon code for a given program\n\n  @motivating\n  Scenario: Component only fetches codes from current program\n    Given a user has multiple rewards from various programs\n    When the component is loaded\n    Then it fetches the user's rewards from only the program associated with the widget\n\n  @motivating\n  Scenario: Component only looks at fueltank rewards\n    Given a user has multiple rewards of different types\n    When the component is loaded\n    Then it filters the user's reward to only return FUELTANK rewards\n\n\n  @motivating\n  Scenario: The first (i.e. most recently received) reward is the reward that is displayed\n    Given a user has at least one fueltank reward\n    And the fueltank reward is available\n    Then the coupon code component shows the first reward returned\n    And this reward is the most recently received reward by the user\n\n  @motivating\n  Scenario Outline: Coupon code has multiple states depending on reward status\n    Given a user has at least one fueltank reward\n    And the reward has most recent status <status>\n    And the dateScheduledFor field is <dateScheduledFor>\n    Then the component's status is set to <componentStatus>\n    And the <errorMessageTextProp> is displayed under the input field\n\n    Examples:\n      | status    | dateScheduledFor | componentStatus | errorMessageTextProp     |\n      | AVAILABLE | null             | AVAILABLE       | N/A                      |\n      | EXPIRED   | null             | EXPIRED         | expiredErrorMessage      |\n      | REDEEMED  | null             | REDEEMED        | redeemedMessage          |\n      | CANCELLED | null             | CANCELLED       | cancelledErrorMessage    |\n      | PENDING   | null             | EMPTY_TANK      | fullfillmentErrorMessage |\n      | PENDING   | 123412341234     | PENDING         | pendingErrorMessage      |\n      | null      | null             | ERROR           | genericErrorMessage      |\n\n  Scenario Outline: Coupon code's error message text props are grouped\n    Given an end user is viewing the coupon code component in the widget editor\n    And they are looking at the component's properties\n    Then they see <prop>\n    And <prop> is grouped under \"Coupon code error\"\n    Examples:\n      | prop                     |\n      | N/A                      |\n      | expiredErrorMessage      |\n      | redeemedMessage          |\n      | cancelledErrorMessage    |\n      | fullfillmentErrorMessage |\n      | pendingErrorMessage      |\n      | genericErrorMessage      |\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @ui\n  Scenario: Component shows an error state when there is an error\n    Given a user is viewing the coupon code component\n    When there is an error in the coupon code\n    Then in place of the coupon code is an alert banner\n    And the alert banner gives information about the error to the user\n\n  @ui\n  Scenario: Component shows an loading state\n    Given a user is viewing the coupon code component\n    When the coupon code is loading in\n    Then the text inside the input is \"Loading...\"\n    And the coupon code input box has a gray background\n    And the cursor is set to \"default\"\n    And the user cannot copy the text\n\n  @ui\n  Scenario Outline: User can edit the alignment of the coupon code text\n    Given a user is editing the coupon code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the coupon code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n\n  @minutia\n  Scenario: ICU string converts to a date\n    Given a user is viewing a live coupon code code component\n    And the \"pendingErrorText\" has the \"{unpendDate}\" ICU string\n    And the program is configured for rewards to be pending\n    Then the user will see an info alert banner\n    And the ICU string is converted to the unpend date\n";
+const scenario$B = "@author:truman\n@owner:truman\nFeature: Coupon Code\n\n  The coupon code component is a box that allows users to see and copy their coupon code for a given program\n\n  @motivating\n  Scenario: Component only fetches codes from current program\n    Given a user has multiple rewards from various programs\n    When the component is loaded\n    Then it fetches the user's rewards from only the program associated with the widget\n\n  @motivating\n  Scenario: Component only looks at fueltank rewards\n    Given a user has multiple rewards of different types\n    When the component is loaded\n    Then it filters the user's reward to only return FUELTANK rewards\n\n\n  @motivating\n  Scenario: The first (i.e. most recently received) reward is the reward that is displayed\n    Given a user has at least one fueltank reward\n    And the fueltank reward is available\n    Then the coupon code component shows the first reward returned\n    And this reward is the most recently received reward by the user\n\n  @motivating\n  Scenario Outline: Coupon code has multiple states depending on reward status\n    Given a user has at least one fueltank reward\n    And the reward has most recent status <status>\n    And the dateScheduledFor field is <dateScheduledFor>\n    Then the component's status is set to <componentStatus>\n    And the <errorMessageTextProp> is displayed under the input field\n\n    Examples:\n      | status    | dateScheduledFor | componentStatus | errorMessageTextProp     |\n      | AVAILABLE | null             | AVAILABLE       | N/A                      |\n      | EXPIRED   | null             | EXPIRED         | expiredErrorMessage      |\n      | REDEEMED  | null             | REDEEMED        | redeemedMessage          |\n      | CANCELLED | null             | CANCELLED       | cancelledErrorMessage    |\n      | PENDING   | null             | EMPTY_TANK      | fullfillmentErrorMessage |\n      | PENDING   | 123412341234     | PENDING         | pendingErrorMessage      |\n      | null      | null             | ERROR           | genericErrorMessage      |\n\n  Scenario Outline: Coupon code's error message text props are grouped\n    Given an end user is viewing the coupon code component in the widget editor\n    And they are looking at the component's properties\n    Then they see <prop>\n    And <prop> is grouped under \"Coupon code error\"\n    Examples:\n      | prop                     |\n      | N/A                      |\n      | expiredErrorMessage      |\n      | redeemedMessage          |\n      | cancelledErrorMessage    |\n      | fullfillmentErrorMessage |\n      | pendingErrorMessage      |\n      | genericErrorMessage      |\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @ui\n  Scenario: Component shows an error state when there is an error\n    Given a user is viewing the coupon code component\n    When there is an error in the coupon code\n    Then in place of the coupon code is an alert banner\n    And the alert banner gives information about the error to the user\n\n  @ui\n  Scenario: Component shows an loading state\n    Given a user is viewing the coupon code component\n    When the coupon code is loading in\n    Then the text inside the input is \"Loading...\"\n    And the coupon code input box has a gray background\n    And the cursor is set to \"default\"\n    And the user cannot copy the text\n\n  @ui\n  Scenario Outline: User can edit the alignment of the coupon code text\n    Given a user is editing the coupon code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the coupon code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n\n  @minutia\n  Scenario: ICU string converts to a date\n    Given a user is viewing a live coupon code code component\n    And the \"pendingErrorText\" has the \"{unpendDate}\" ICU string\n    And the program is configured for rewards to be pending\n    Then the user will see an info alert banner\n    And the ICU string is converted to the unpend date\n";
 
 const CouponCode_stories = {
   title: "Components/Coupon Code",
   parameters: {
-    scenario: scenario$A,
+    scenario: scenario$B,
   },
 };
 const defaultProps$e = {
@@ -13944,25 +14075,25 @@ const defaultProps$e = {
 const CouponCode = () => {
   return h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
 };
-const CustomTooltipText$1 = () => {
+const CustomTooltipText$2 = () => {
   return h("sqm-coupon-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
 };
-const CustomTooltipDuration$1 = () => {
+const CustomTooltipDuration$2 = () => {
   return (h("sqm-coupon-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
 };
-const TextAlignCenter$2 = () => {
+const TextAlignCenter$3 = () => {
   return h("sqm-coupon-code", { textAlign: "center" });
 };
-const TextAlignRight$2 = () => {
+const TextAlignRight$3 = () => {
   return h("sqm-coupon-code", { textAlign: "right" });
 };
-const CopyButton$2 = () => {
+const CopyButton$3 = () => {
   return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-outside" })));
 };
 const CopyButtonCustomLabel = () => {
   return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
 };
-const CopyButtonBelow$2 = () => {
+const CopyButtonBelow$3 = () => {
   return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-below" })));
 };
 const CopyButtonBelowCustomLabel = () => {
@@ -14000,13 +14131,13 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CouponCode_stories,
   CouponCode: CouponCode,
-  CustomTooltipText: CustomTooltipText$1,
-  CustomTooltipDuration: CustomTooltipDuration$1,
-  TextAlignCenter: TextAlignCenter$2,
-  TextAlignRight: TextAlignRight$2,
-  CopyButton: CopyButton$2,
+  CustomTooltipText: CustomTooltipText$2,
+  CustomTooltipDuration: CustomTooltipDuration$2,
+  TextAlignCenter: TextAlignCenter$3,
+  TextAlignRight: TextAlignRight$3,
+  CopyButton: CopyButton$3,
   CopyButtonCustomLabel: CopyButtonCustomLabel,
-  CopyButtonBelow: CopyButtonBelow$2,
+  CopyButtonBelow: CopyButtonBelow$3,
   CopyButtonBelowCustomLabel: CopyButtonBelowCustomLabel,
   Loading: Loading$5,
   CopyButtonLoading: CopyButtonLoading,
@@ -14019,12 +14150,12 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
   ErrorRedeemed: ErrorRedeemed
 });
 
-const scenario$B = "@author:noah\n@owner:noah\n\nFeature: Logout Current User\n\n  Background:\n    Given a user viewing an instant access widget\n\n  @motivating\n  @ui\n  Scenario: A user on an instant access widget\n    Given the user is identified\n    And the user is logged in\n    Then the component identifies the user by displaying their email in an ICU string\n    And the users email displayed in the ICU string using hte \"{email}\" variable\n\n  @motivating\n  @ui\n  Scenario: Users can switch who they are identified as through a link\n    Given the user is identified\n    And the user is logged in\n    When the user clicks the link in the component\n    Then the saved user identity is emptied\n    And they are sent back to the registration form to re-identify themselves\n\n  @minutia\n  Scenario: Logout link empties the saved User Identity\n    Given a valid user identity\n    And the user is viewing the \"logged-in\" template\n    When they click the logout link\n    Then the user identity is set to \"undefined\"\n    And the user is returned to the \"logged-out\" template";
+const scenario$C = "@author:noah\n@owner:noah\n\nFeature: Logout Current User\n\n  Background:\n    Given a user viewing an instant access widget\n\n  @motivating\n  @ui\n  Scenario: A user on an instant access widget\n    Given the user is identified\n    And the user is logged in\n    Then the component identifies the user by displaying their email in an ICU string\n    And the users email displayed in the ICU string using hte \"{email}\" variable\n\n  @motivating\n  @ui\n  Scenario: Users can switch who they are identified as through a link\n    Given the user is identified\n    And the user is logged in\n    When the user clicks the link in the component\n    Then the saved user identity is emptied\n    And they are sent back to the registration form to re-identify themselves\n\n  @minutia\n  Scenario: Logout link empties the saved User Identity\n    Given a valid user identity\n    And the user is viewing the \"logged-in\" template\n    When they click the logout link\n    Then the user identity is set to \"undefined\"\n    And the user is returned to the \"logged-out\" template";
 
 const LogoutCurrentUser_stories = {
   title: "Components/Logout Current User",
   parameters: {
-    scenario: scenario$B,
+    scenario: scenario$C,
   },
 };
 const defaultProps$f = {
@@ -14034,22 +14165,22 @@ const defaultProps$f = {
   loading: false,
   emailErrorText: "Error fetching email",
 };
-const Default$f = () => {
+const Default$g = () => {
   return h(LogoutCurrentUserView, Object.assign({}, defaultProps$f));
 };
 
 const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LogoutCurrentUser_stories,
-  Default: Default$f
+  Default: Default$g
 });
 
-const scenario$C = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\t@ui\n\tScenario: Links can be opened in the same tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in the same tab\n\t\tAnd if the component is in an iFrame then the link is opened in the parent window not the iFrame\n\n\t@ui\n\tScenario: Links can be opened in a new tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in a new tab\n\t\tAnd if the component is in an iFrame then the link is still opened in a new tab\n\n\n\t@ui\n\tScenario: Props control the link and button text\n\t\tGiven the \"link\" prop is set to \"https://www.example.com\"\n\t\tAnd the \"buttonText\" prop is set to \"Click me!\"\n\t\tThen a button is shown with the text \"Click me!\"\n\t\tAnd when clicked the button opens https://www.example.com\n\n\t@ui\n\tScenario Outline: The button type can be set\n\t\tGiven the button type is set to <value>\n\t\tThen a <buttonType> is shown\n\t\tExamples:\n\t\t\t| value   | buttonType |\n\t\t\t| <null>  | primary    |\n\t\t\t| default | default    |\n\t\t\t| primary | primary    |\n\t\t\t| success | success    |\n\t\t\t| neutral | neutral    |\n\t\t\t| warning | warning    |\n\t\t\t| danger  | danger     |";
+const scenario$D = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\t@ui\n\tScenario: Links can be opened in the same tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in the same tab\n\t\tAnd if the component is in an iFrame then the link is opened in the parent window not the iFrame\n\n\t@ui\n\tScenario: Links can be opened in a new tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in a new tab\n\t\tAnd if the component is in an iFrame then the link is still opened in a new tab\n\n\n\t@ui\n\tScenario: Props control the link and button text\n\t\tGiven the \"link\" prop is set to \"https://www.example.com\"\n\t\tAnd the \"buttonText\" prop is set to \"Click me!\"\n\t\tThen a button is shown with the text \"Click me!\"\n\t\tAnd when clicked the button opens https://www.example.com\n\n\t@ui\n\tScenario Outline: The button type can be set\n\t\tGiven the button type is set to <value>\n\t\tThen a <buttonType> is shown\n\t\tExamples:\n\t\t\t| value   | buttonType |\n\t\t\t| <null>  | primary    |\n\t\t\t| default | default    |\n\t\t\t| primary | primary    |\n\t\t\t| success | success    |\n\t\t\t| neutral | neutral    |\n\t\t\t| warning | warning    |\n\t\t\t| danger  | danger     |";
 
 const LinkButton_stories = {
   title: "Components/Link Button",
   parameters: {
-    scenario: scenario$C,
+    scenario: scenario$D,
   },
 };
 const defaultProps$g = {
@@ -14057,7 +14188,7 @@ const defaultProps$g = {
   openInNewTab: false,
   buttonText: "Button Text",
 };
-const Default$g = () => {
+const Default$h = () => {
   return h("sqm-link-button", Object.assign({}, defaultProps$g));
 };
 const OpenInNewTab = () => {
@@ -14067,7 +14198,7 @@ const OpenInNewTab = () => {
 const LinkButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LinkButton_stories,
-  Default: Default$g,
+  Default: Default$h,
   OpenInNewTab: OpenInNewTab
 });
 
@@ -14085,7 +14216,7 @@ const containerStyles = {
   border: "1px solid black",
   padding: "25px",
 };
-const Default$h = () => {
+const Default$i = () => {
   return h(CloseButtonView, Object.assign({}, defaultProps$h));
 };
 const InAContainer = () => {
@@ -14100,7 +14231,7 @@ const CustomColor$1 = () => {
 const CloseButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CloseButton_stories,
-  Default: Default$h,
+  Default: Default$i,
   InAContainer: InAContainer,
   CustomColor: CustomColor$1
 });
@@ -14338,13 +14469,6 @@ const Loading$6 = () => {
       },
     } }));
 };
-const Error$9 = () => {
-  return (h("sqm-payout-details-card", { demoData: {
-      states: {
-        error: true,
-      },
-    } }));
-};
 const NextPayout = () => {
   return (h("sqm-payout-details-card", { demoData: {
       states: {
@@ -14379,7 +14503,6 @@ const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutDetailsCard_stories,
   Loading: Loading$6,
-  Error: Error$9,
   NextPayout: NextPayout,
   PayoutToday: PayoutToday,
   ThresholdPayout: ThresholdPayout,
@@ -14406,8 +14529,10 @@ const bankingFormProps = {
     thresholds: [],
     currency: "USD",
     loadingError: false,
+    email: "test@example.com",
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
@@ -14718,6 +14843,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,
@@ -14743,7 +14884,8 @@ const BankingInfoForm = /*#__PURE__*/Object.freeze({
   BankingInfoFormWithBalanceThresholdPaymentScheduleLoading: BankingInfoFormWithBalanceThresholdPaymentScheduleLoading,
   BankingInfoFormWithFixedDayPaymentSchedule: BankingInfoFormWithFixedDayPaymentSchedule,
   BankingInfoFormWithFixedDayPaymentScheduleWithError: BankingInfoFormWithFixedDayPaymentScheduleWithError,
-  BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading
+  BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading,
+  BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal
 });
 
 const InvoiceTableCell_stories = {
@@ -15001,13 +15143,18 @@ const defaultProps$k = {
   initialLoading: false,
   sendCodeError: false,
 };
-const Default$i = () => (h("sqm-email-verification", { demoData: {} }));
-const EmailIsPrefilled = () => (h("sqm-email-verification", { demoData: {
-    states: {
-      ...defaultProps$k,
-      email: "test@example.com",
-    },
-  } }));
+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,
@@ -15020,6 +15167,17 @@ const SaveLoading = () => (h("sqm-email-verification", { demoData: {
       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,
@@ -15036,10 +15194,11 @@ const SendCodeError = () => (h("sqm-email-verification", { demoData: {
 const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': WidgetEmailVerification_stories,
-  Default: Default$i,
+  Default: Default$j,
   EmailIsPrefilled: EmailIsPrefilled,
   Loading: Loading$7,
   SaveLoading: SaveLoading,
+  WithHeader: WithHeader$1,
   InvalidEmail: InvalidEmail,
   SendCodeError: SendCodeError
 });
@@ -15054,7 +15213,7 @@ const defaultProps$l = {
   verifyFailed: false,
   emailResent: false,
 };
-const Default$j = () => (h("sqm-code-verification", { demoData: { states: defaultProps$l } }));
+const Default$k = () => (h("sqm-code-verification", { demoData: { states: defaultProps$l } }));
 const InitialLoading = () => (h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps$l,
@@ -15083,7 +15242,7 @@ const VerificationFailed = () => (h("sqm-code-verification", { demoData: {
 const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': WidgetCodeVerification_stories,
-  Default: Default$j,
+  Default: Default$k,
   InitialLoading: InitialLoading,
   Loading: Loading$8,
   CodeResent: CodeResent,
@@ -15097,11 +15256,19 @@ 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
+  CompletedTaxForm: CompletedTaxForm,
+  CompletedTaxFormWithStatsContainer: CompletedTaxFormWithStatsContainer
 });
 
 const PayoutStatusAlert_stories = {
@@ -15111,17 +15278,13 @@ const defaultProps$n = {
   error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
-  showVerifyIdentity: 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_NEEDED" } } }));
-const VerifyIdentityOpen = () => (h("sqm-payout-status-alert", { demoData: {
-    states: {
-      ...defaultProps$n,
-      status: "VERIFICATION_NEEDED",
-      showVerifyIdentity: true,
-    },
-  } }));
+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 } } }));
@@ -15131,12 +15294,90 @@ const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   'default': PayoutStatusAlert_stories,
   InformationRequired: InformationRequired,
   VerifyIdentity: VerifyIdentity,
-  VerifyIdentityOpen: VerifyIdentityOpen,
+  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 = {
+  title: "Components/Referral Codes",
+  parameters: {
+    scenario: scenario$E,
+  },
+};
+const demoData = {
+  titleText: "Start sharing",
+  emptyStateHeaderText: "Your new codes and links aren’t ready yet",
+  emptyStateDescriptionText: "Please contact our program support team to let them know you’re out of codes.",
+  emptyStateImageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png",
+  states: {
+    noCodes: false,
+    loading: false,
+  },
+};
+const pagination = (slot) => {
+  return h("sqm-pagination", { slot: slot });
+};
+const shareButtons = (slot) => {
+  return (h("sqm-portal-container", { gap: "small", slot: slot },
+    h("sqm-share-button", { medium: "email" }, "Share via email"),
+    h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+    h("sqm-share-button", { medium: "whatsapp" }, "Share on WhatsApp")));
+};
+const shareCodes = (slot) => {
+  return h("sqm-referral-code", { slot: slot });
+};
+const shareCodeWithPreviouslyCopied = (slot) => {
+  return (h("sqm-referral-code", { slot: slot, showNotificationText: true, notificationText: "You\u2019ve copied this before." }));
+};
+const ReferralCodes = () => {
+  return (h("sqm-referral-codes", null,
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const WithPreviouslyCopiedCode = () => {
+  return (h("sqm-referral-codes", null,
+    pagination("pagination"),
+    shareCodeWithPreviouslyCopied("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const Empty$3 = () => {
+  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const EmptyWithCustomTextAndImage = () => {
+  return (h("sqm-referral-codes", { emptyStateHeaderText: "Tus nuevos c\u00F3digos y enlaces a\u00FAn no est\u00E1n listos", emptyStateDescriptionText: "Comun\u00EDquese con nuestro equipo de soporte del programa para informarles que no tiene c\u00F3digos.", emptyStateImageUrl: "https://img.freepik.com/free-vector/hand-drawn-no-data-concept_52683-127829.jpg?t=st=1738890457~exp=1738894057~hmac=2f0f32c1f0fc051f47d772a4517e2e4c4f38af5069fb855edc96d8331d9d1329&w=826", demoData: {
+      states: { ...demoData.states, noCodes: true },
+    } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const Loading$a = () => {
+  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+
+const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ReferralCodes_stories,
+  ReferralCodes: ReferralCodes,
+  WithPreviouslyCopiedCode: WithPreviouslyCopiedCode,
+  Empty: Empty$3,
+  EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
+  Loading: Loading$a
+});
+
 /**
  *
  * Themes
@@ -15149,7 +15390,7 @@ const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$k = `
+const Default$l = `
  // No CSS
 `;
 const Orangey = `
@@ -15183,7 +15424,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$k,
+  Default: Default$l,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -17782,6 +18023,7 @@ const stories = [
   InvoiceTableCells,
   UseInvoiceTableCells,
   ShareButton,
+  Pagination,
   ShareLink,
   BigStat,
   Leaderboard,
@@ -17850,6 +18092,8 @@ const stories = [
   Tabs,
   ShareCode$1,
   CouponCode$1,
+  ReferralCode$1,
+  ReferralCodes$1,
   LogoutCurrentUser,
   LinkButton,
   EmailRegistration,