@saasquatch/mint-components 1.12.1-7 → 1.12.1-8

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

@@ -1,36 +1,35 @@
-import { h, r as registerInstance, c as Host } from './index-60f16d0a.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-e20edc0b.js';
-import './global-3611a2b7.js';
-import { c as xn, j as jn, b as setUserIdentity, d as dist, q as an, r as setProgramId } from './index.module-f3d96fbb.js';
+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-62554cef.js';
+import { $ as $n, S as Sn, b as setUserIdentity, d as dist, X as Xe, o as setProgramId } from './index.module-48f73e70.js';
 import './cjs-bdfb4486.js';
+import './mixins-f60a614c.js';
+import './jss-preset-default.esm-f910d30d.js';
+import { c as createStyleSheet } from './JSS-1c144d47.js';
+import { G as GenericTableView } from './GenericTableView-07d98ad0.js';
+import './useChildElements-a6b895dd.js';
+import { l as luxon } from './luxon-7600be8d.js';
 import './utils-334c1e34.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { C as CopyTextView } from './copy-text-view-61eebf5d.js';
-import './mixins-83f90fa1.js';
-import { G as GenericTableView } from './GenericTableView-6aa9fac9.js';
-import './useChildElements-d1d3fedd.js';
-import { l as luxon } from './luxon-9b1f9912.js';
-import './sqm-text-span-view-d1b54710.js';
-import { A as AssetCardView } from './sqm-asset-card-view-2157b61f.js';
-import { C as CloseButtonView } from './sqm-close-button-view-0c0bfff8.js';
+import './sqm-text-span-view-02ce93d8.js';
+import { A as AssetCardView } from './sqm-asset-card-view-1ce99353.js';
+import { C as CloseButtonView } from './sqm-close-button-view-e00f01fa.js';
 import './index-ffa26b43.js';
-import { E as EmailRegistrationView } from './email-registration-view-6870d230.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-7cd0de83.js';
-import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-02e9f508.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-ce55d74d.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-a4e4edb6.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-d500dd01.js';
-import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-4f6c89a7.js';
-import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-dd481f19.js';
-import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-22ea3db3.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-2997f902.js';
-import './utilities-33996ce7.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-e29f1842.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-d5dcf5c5.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, 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, N as autoColorScaleCss, O as ShadowViewAddon } from './ShadowViewAddon-f91cd444.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-c3be4b88.js';
-import { N as NameFieldsView } from './sqm-name-fields-view-ec19e9e8.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-b8240dc6.js';
+import { E as EmailRegistrationView } from './email-registration-view-799eb599.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-4f05c768.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0312e073.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-02ad070b.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-f255ec8a.js';
+import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-1fb6c140.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-5a60747a.js';
+import './utilities-e8022681.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-f967552a.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-17d19b2d.js';
+import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-d9f26e51.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, 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-0d8b1430.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-05f4bbe1.js';
+import { C as CheckboxFieldView } from './sqm-checkbox-field-view-308a6a1f.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-3ee84dc1.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1628,19 +1627,6 @@ 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 = {
@@ -1649,7 +1635,7 @@ const ShareLink_stories = {
     scenario: scenario$2,
   },
 };
-const Default$1 = () => {
+const Default = () => {
   const props = {
     copyString: "https://noah.example.com",
     open: false,
@@ -1713,7 +1699,7 @@ const FullStack = () => {
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ShareLink_stories,
-  Default: Default$1,
+  Default: Default,
   Tooltip: Tooltip,
   Disabled: Disabled,
   Error: Error$1,
@@ -1732,7 +1718,7 @@ const BigStat_stories = {
     scenario: scenario$3,
   },
 };
-const Default$2 = () => {
+const Default$1 = () => {
   const props = { value: 990000, statvalue: "9.900,00", loading: false };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -1815,7 +1801,7 @@ const MultipleStats = () => {
 const BigStat = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': BigStat_stories,
-  Default: Default$2,
+  Default: Default$1,
   LeftAlign: LeftAlign,
   RightAlign: RightAlign,
   FlexReverse: FlexReverse,
@@ -2552,36 +2538,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="/">
@@ -2595,7 +2581,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 },
@@ -2759,8 +2745,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;
@@ -2784,8 +2770,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({
@@ -3512,7 +3498,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,
@@ -4083,8 +4069,6 @@ 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";
@@ -4115,16 +4099,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 })));
 }
@@ -7141,10 +7125,6 @@ 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 });
@@ -7176,7 +7156,6 @@ const Widget = /*#__PURE__*/Object.freeze({
   ReferralWidget: ReferralWidget,
   MonoWidget: MonoWidget,
   Loyalty: Loyalty,
-  PromoCodeReferralWidget: PromoCodeReferralWidget,
   InstantAccessReferrerShareWidget: InstantAccessReferrerShareWidget,
   PaypalMonoWidget: PaypalMonoWidget,
   PaypalReferralWidget: PaypalReferralWidget,
@@ -7270,9 +7249,7 @@ const defaultProps$2 = {
   callbacks: {
     submit: async (e) => await e,
   },
-  content: {
-    pageLabel: "Sign in to your account",
-  },
+  content: { pageLabel: "Sign in to your account" },
 };
 const errorProps = {
   states: {
@@ -7284,9 +7261,7 @@ const errorProps = {
   callbacks: {
     submit: async (e) => await e,
   },
-  content: {
-    pageLabel: "Sign in to your account",
-  },
+  content: { pageLabel: "Sign in to your account" },
 };
 const loadingProps = {
   states: {
@@ -7298,37 +7273,16 @@ const loadingProps = {
   callbacks: {
     submit: async (e) => await e,
   },
-  content: {
-    pageLabel: "Sign in to your account",
-  },
-};
-const Default$3 = () => (h("sqm-portal-login", { showGoogleLogin: false, demoData: { ...defaultProps$2 } }));
-const IsGoogle = () => (
-// <sqm-portal-login
-//   showGoogleLogin
-//   demoData={{
-//     ...defaultProps,
-//     content: {
-//       googleButton: <sl-button>Sign in with Google</sl-button>,
-//     },
-//     states: { ...defaultProps.states },
-//   }}
-// ></sqm-portal-login>
-h(PortalLoginView, Object.assign({}, defaultProps$2, { content: {
-    secondaryButton: (h("span", null,
-      "Don't have an account?",
-      " ",
-      h("sl-button", { style: { width: "60px" }, size: "large", type: "text" }, "Register"))),
-    googleButton: h("sl-button", null, "Sign in with Google"),
-  } })));
+  content: { pageLabel: "Sign in to your account" },
+};
+const Default$2 = () => 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$3,
-  IsGoogle: IsGoogle,
+  Default: Default$2,
   LoginWithError: LoginWithError,
   LoginLoading: LoginLoading
 });
@@ -7431,7 +7385,7 @@ const slottedProps = {
       h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$4 = () => h(PortalRegisterView, Object.assign({}, defaultProps$3));
+const Default$3 = () => h(PortalRegisterView, Object.assign({}, defaultProps$3));
 const RegisterWithError = () => h(PortalRegisterView, Object.assign({}, errorProps$1));
 const RegisterLoading = () => h(PortalRegisterView, Object.assign({}, loadingProps$1));
 const FieldsHidden = () => {
@@ -7458,7 +7412,7 @@ const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaul
 const PortalRegister = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalRegister_stories,
-  Default: Default$4,
+  Default: Default$3,
   RegisterWithError: RegisterWithError,
   RegisterLoading: RegisterLoading,
   FieldsHidden: FieldsHidden,
@@ -7466,6 +7420,126 @@ const PortalRegister = /*#__PURE__*/Object.freeze({
   TermsAndConditions: TermsAndConditions
 });
 
+const PortalRegistrationForm_stories = {
+  title: "Components/Microsite Register Form New",
+};
+const defaultProps$4 = {
+  states: {
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+};
+const errorProps$2 = {
+  states: {
+    error: "Something went wrong. Please try again.",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+  },
+};
+const loadingProps$2 = {
+  states: {
+    error: "",
+    loading: true,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+};
+const slottedProps$1 = {
+  states: {
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+    formData: (h("div", null,
+      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
+      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+  },
+};
+const Default$4 = () => h(PortalRegistrationFormView, Object.assign({}, defaultProps$4));
+const RegisterWithError$1 = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps$2)));
+const RegisterLoading$1 = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps$2)));
+const FieldsHidden$1 = () => {
+  return (h("sqm-portal-register", { demoData: {
+      states: {
+        error: "",
+        loading: true,
+        registrationFormState: {},
+        confirmPassword: true,
+        hideInputs: true,
+        loginPath: "/login",
+      },
+    } }));
+};
+const SlottedInputs$1 = () => (h(PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
+const RegisterWithMarketingEmailsCheckbox = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$4, { content: {
+    ...defaultProps$4.content,
+    emailOptIn: (h("sqm-checkbox-field", { checkboxLabel: "I would like to receive marketing and promotional emails for this referral program" })),
+  } })));
+const TermsAndConditions$1 = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$4, { content: {
+    ...defaultProps$4.content,
+    terms: (h("p", null,
+      "By signing up you agree to the",
+      " ",
+      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
+  } })));
+
+const NewPortalRegistrationForm = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': PortalRegistrationForm_stories,
+  Default: Default$4,
+  RegisterWithError: RegisterWithError$1,
+  RegisterLoading: RegisterLoading$1,
+  FieldsHidden: FieldsHidden$1,
+  SlottedInputs: SlottedInputs$1,
+  RegisterWithMarketingEmailsCheckbox: RegisterWithMarketingEmailsCheckbox,
+  TermsAndConditions: TermsAndConditions$1
+});
+
 const scenario$6 = "@author:derek\n@owner:ian\nFeature: Forgot Password\n\n  @motivating\n  Scenario: Users can request to reset their password\n    Given a user enters their email address\n    And that email address is linked to a previously created account\n    When they click \"Reset Password\"\n    Then the button enters a loading state\n    When the password reset email is sent\n    Then a confirmation banner is shown stating a password reset email was sent\n\n  @motivating\n  Scenario: Users are notified if sending their password reset email fails\n    Given a user enters their email address\n    And that email address is linked to a previously created account\n    When they click \"Reset Password\"\n    Then the button enters a loading state\n    When the password reset email fails to send\n    Then the user does not receive a password reset email\n    And an error banner is shown stating that they should try again\n\n  @motivating\n  @landmine\n  Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\n    Given the user entered an email address that is not associated to an accoun\n    When they click \"Reset Password\"\n    Then the button enters a loading state\n    But no email is sent\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\n\n  @motivating\n  Scenario: Users can resend password reset email\n    Given a user had previously requested to reset their password\n    When they enter their email address\n    And that email address is linked to a previously created account\n    And they click \"Reset Password\"\n    Then the user receives a second password reset email\n    And a success banner is shown stating that their email was sent\n\n  @motivating\n  Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\n    Given a user viewing the password reset component\n    And the component <mayHave> \"redirect-path\" with <value>\n    When they request a password reset email\n    And they click the link in the email\n    Then they are redirected to <redirectPath>\n    Examples:\n      | mayHave      | value            | redirectPath     |\n      | doesn't have | N/A              | /resetPassword   |\n      | has          | /resetMyPassword | /resetMyPassword |\n\n  @minutia\n  Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\n    Given a user viewing the password reset component\n    And the component <mayHave> \"login-path\" with <value>\n    Then they see a \"Sign In\" text button\n    When they click \"Sign In\"\n    Then they are redirected to <redirectPath>\n    Examples:\n      | mayHave      | value   | redirectPath |\n      | doesn't have | N/A     | /login       |\n      | has          | /signin | /signin      |";
 
 const PortalForgotPassword_stories = {
@@ -7474,7 +7548,7 @@ const PortalForgotPassword_stories = {
     scenario: scenario$6,
   },
 };
-const defaultProps$4 = {
+const defaultProps$5 = {
   states: {
     error: "",
     loading: false,
@@ -7489,7 +7563,7 @@ const defaultProps$4 = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const errorProps$2 = {
+const errorProps$3 = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -7504,7 +7578,7 @@ const errorProps$2 = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const loadingProps$2 = {
+const loadingProps$3 = {
   states: {
     error: "",
     loading: true,
@@ -7534,9 +7608,9 @@ const successProps = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-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 Default$5 = () => h(PortalForgotPasswordView, Object.assign({}, defaultProps$5));
+const ForgotPasswordWithError = () => (h(PortalForgotPasswordView, Object.assign({}, errorProps$3)));
+const ForgotPasswordLoading = () => (h(PortalForgotPasswordView, Object.assign({}, loadingProps$3)));
 const ForgotPasswordSuccess = () => (h(PortalForgotPasswordView, Object.assign({}, successProps)));
 
 const PortalForgotPassword = /*#__PURE__*/Object.freeze({
@@ -7575,12 +7649,12 @@ const defaultStates = {
   loadingVerification: false,
   countdown: 10,
 };
-const defaultProps$5 = {
+const defaultProps$6 = {
   states: defaultStates,
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-const errorProps$3 = {
+const errorProps$4 = {
   states: {
     ...defaultStates,
     error: "Something went wrong. Please try again.",
@@ -7588,7 +7662,7 @@ const errorProps$3 = {
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-const loadingProps$3 = {
+const loadingProps$4 = {
   states: {
     ...defaultStates,
     loading: true,
@@ -7613,9 +7687,9 @@ const loadingVerificationProps = {
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-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 Default$6 = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps$6));
+const EmailVerificationWithError = () => (h(PortalEmailVerificationView, Object.assign({}, errorProps$4)));
+const EmailVerificationLoading = () => (h(PortalEmailVerificationView, Object.assign({}, loadingProps$4)));
 const EmailVerificationCheckingVerification = () => (h(PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
 const EmailVerificationSuccess = () => (h(PortalEmailVerificationView, Object.assign({}, successProps$1)));
 
@@ -7637,7 +7711,7 @@ const PortalResetPassword_stories = {
     scenario: scenario$8,
   },
 };
-const defaultProps$6 = {
+const defaultProps$7 = {
   states: {
     error: "",
     loading: false,
@@ -7683,7 +7757,7 @@ const defaultPropsNoConfirm = {
     failed: () => console.log("failed"),
   },
 };
-const errorProps$4 = {
+const errorProps$5 = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -7706,7 +7780,7 @@ const errorProps$4 = {
     failed: () => console.log("failed"),
   },
 };
-const loadingProps$4 = {
+const loadingProps$5 = {
   states: {
     error: "",
     loading: true,
@@ -7775,10 +7849,10 @@ const validatingCodeProps = {
     failed: () => console.log("failed"),
   },
 };
-const Default$7 = () => h(PortalResetPasswordView, Object.assign({}, defaultProps$6));
+const Default$7 = () => h(PortalResetPasswordView, Object.assign({}, defaultProps$7));
 const DefaultWithoutConfirmField = () => (h(PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
-const ResetPasswordWithError = () => (h(PortalResetPasswordView, Object.assign({}, errorProps$4)));
-const ResetPasswordLoading = () => (h(PortalResetPasswordView, Object.assign({}, loadingProps$4)));
+const ResetPasswordWithError = () => (h(PortalResetPasswordView, Object.assign({}, errorProps$5)));
+const ResetPasswordLoading = () => (h(PortalResetPasswordView, Object.assign({}, loadingProps$5)));
 const ResetPasswordSuccess = () => (h(PortalResetPasswordView, Object.assign({}, successProps$2)));
 const CodeValidating = () => (h(PortalResetPasswordView, Object.assign({}, validatingCodeProps)));
 
@@ -7801,7 +7875,7 @@ const PortalVerifyEmail_stories = {
     scenario: scenario$9,
   },
 };
-const errorProps$5 = {
+const errorProps$6 = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -7835,7 +7909,7 @@ const verifiedProps = {
   },
   content: {},
 };
-const EmailVerificationWithError$1 = () => (h(PortalVerifyEmailView, Object.assign({}, errorProps$5)));
+const EmailVerificationWithError$1 = () => (h(PortalVerifyEmailView, Object.assign({}, errorProps$6)));
 const EmailVerificationSuccess$1 = () => (h(PortalVerifyEmailView, Object.assign({}, verifiedProps)));
 
 const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
@@ -7965,7 +8039,7 @@ const ChangePassword_stories = {
     scenario: scenario$a,
   },
 };
-const defaultProps$7 = {
+const defaultProps$8 = {
   states: {
     open: false,
     loading: false,
@@ -8009,7 +8083,7 @@ const openProps = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const errorProps$6 = {
+const errorProps$7 = {
   states: {
     open: true,
     loading: false,
@@ -8053,7 +8127,7 @@ const passwordErrorProps = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const loadingProps$5 = {
+const loadingProps$6 = {
   states: {
     open: true,
     loading: true,
@@ -8097,11 +8171,11 @@ const successProps$3 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const Default$9 = () => h(PortalChangePasswordView, Object.assign({}, defaultProps$7));
+const Default$9 = () => h(PortalChangePasswordView, Object.assign({}, defaultProps$8));
 const Open = () => h(PortalChangePasswordView, Object.assign({}, openProps));
-const Error$2 = () => h(PortalChangePasswordView, Object.assign({}, errorProps$6));
+const Error$2 = () => h(PortalChangePasswordView, Object.assign({}, errorProps$7));
 const PaswordError = () => (h(PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
-const Loading$1 = () => h(PortalChangePasswordView, Object.assign({}, loadingProps$5));
+const Loading$1 = () => h(PortalChangePasswordView, Object.assign({}, loadingProps$6));
 const Success = () => h(PortalChangePasswordView, Object.assign({}, successProps$3));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
@@ -8118,7 +8192,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
 const PortalProfile_stories = {
   title: "Components/Microsite Profile",
 };
-const defaultProps$8 = {
+const defaultProps$9 = {
   states: {
     success: false,
     loading: false,
@@ -8190,7 +8264,7 @@ const noCountry = {
     onChange: (e) => console.log(e),
   },
 };
-const loadingProps$6 = {
+const loadingProps$7 = {
   states: {
     success: false,
     loading: true,
@@ -8262,7 +8336,7 @@ const disabledProps = {
     onChange: (e) => console.log(e),
   },
 };
-const errorProps$7 = {
+const errorProps$8 = {
   states: {
     success: false,
     loading: false,
@@ -8334,11 +8408,11 @@ const successProps$4 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$a = () => h(PortalProfileView, Object.assign({}, defaultProps$8));
+const Default$a = () => h(PortalProfileView, Object.assign({}, defaultProps$9));
 const DefaultNoCountry = () => h(PortalProfileView, Object.assign({}, noCountry));
-const Loading$2 = () => h(PortalProfileView, Object.assign({}, loadingProps$6));
+const Loading$2 = () => h(PortalProfileView, Object.assign({}, loadingProps$7));
 const Disabled$1 = () => h(PortalProfileView, Object.assign({}, disabledProps));
-const Error$3 = () => h(PortalProfileView, Object.assign({}, errorProps$7));
+const Error$3 = () => h(PortalProfileView, Object.assign({}, errorProps$8));
 const Success$1 = () => h(PortalProfileView, Object.assign({}, successProps$4));
 
 const PortalProfile = /*#__PURE__*/Object.freeze({
@@ -8646,6 +8720,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 = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [
       {
@@ -10092,7 +10167,7 @@ const portalTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n
 
 const portalLeadSubmitTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"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  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
-const taxAndCashTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-login></sqm-portal-login>\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/taxAndCash\"\n              icon=\"file-earmark-text\"\n              label=\"Tax & Payout Settings\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\" content-area-width=\"1200px\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text>\n                    <h1>Activity</h1>\n                  </sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text>\n                        <p>Referrals</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text>\n                        <p>Rewards Earned</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text>\n                        <p>Reward Balance</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n              <template path=\"/taxAndCash\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-tax-and-cash\n                  step-1_first-name=\"First name\"\n                  step-1_last-name=\"Last name\"\n                  step-1_email=\"Email\"\n                  step-1_country=\"Country\"\n                  step-1_phone-number=\"Phone number\"\n                  step-1_address=\"Address\"\n                  step-1_city=\"City\"\n                  step-1_state=\"State\"\n                  step-1_province=\"Province\"\n                  step-1_region=\"Region\"\n                  step-1_postal-code=\"Postal code\"\n                  step-1_currency=\"Currency\"\n                  step-1_currency-help-text=\"Choose your preferred payout currency\"\n                  step-1_allow-banking-collection=\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\"\n                  step-1_personal-information=\"Personal Information\"\n                  step-1_terms-and-conditions-label=\"terms and conditions\"\n                  step-1_terms-and-conditions-link=\"/payout-terms-and-conditions\"\n                  step-1_search-for-currency-text=\"Search for currency..\"\n                  step-2_indirect-tax=\"Indirect Tax\"\n                  step-2_indirect-tax-description=\"Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments.\"\n                  step-2_indirect-tax-details=\"Indirect tax details\"\n                  step-2_other-region=\"Registered for indirect tax\"\n                  step-2_other-region-subtext=\"If you’ve registered with your tax authority, add your information to stay tax compliant.\"\n                  step-2_not-registered=\"Not registered for indirect tax\"\n                  step-2_not-registered-subtext=\"If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered.\"\n                  step-2_selected-region=\"Country / region of indirect tax\"\n                  step-2_indirect-tax-number=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}\"\n                  step-2_province=\"Province\"\n                  step-2_indirect-tax-number-error=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required\"\n                  step-2_qst-number=\"QST number\"\n                  step-2_is-registered-q-s-t=\"I am registered for QST Tax\"\n                  step-2_is-registered-sub-region-income-tax=\"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.\"\n                  step-2_sub-region=\"Sub-region\"\n                  step-2_sub-region-tax-number-label=\"Income Tax Number\"\n                  step-2_cannot-change-info-alert=\"Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.\"\n                  step-3_tax-form=\"Tax form\"\n                  step-3_tax-form-label=\"{documentType} Tax Form\"\n                  step-3_participant-type=\"Participant type\"\n                  step-3_business-entity=\"I represent a business\"\n                  step-3_individual-participant=\"I am an individual participant\"\n                  step-3_tax-form-description=\"Participants based in the US need to submit a {documentType} form.\"\n                  step-3_tax-form-description-individual-participant=\"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.\"\n                  step-3_tax-form-description-business-entity=\"Participants residing outside of the US who represent a business entity need to submit a {documentType} form.\"\n                  step-3_docusign-expired=\"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.\"\n                  step-3_docusign-session-warning=\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\"\n                  step-3_docusign-error=\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.\"\n                  step-3_refresh-button=\"Refresh Page\"\n                  step-3_exit-button=\"Exit\"\n                  step-4_tax-and-payouts=\"Payouts\"\n                  step-4_directly-to-bank-account=\"Directly to my bank account\"\n                  step-4_to-pay-pal-account=\"PayPal (2% processing fee capped to {feeCap})\"\n                  step-4_payment-schedule-balance-threshold=\"Pay me when my balance reaches a threshold\"\n                  step-4_payment-schedule-fixed-day=\"Pay me on a fixed day of the month\"\n                  step-4_payment-day-select-label=\"Payment Day\"\n                  step-4_payment-threshold-select-label=\"Payment threshold\"\n                  step-4_payment-day-first-of-month-label-text=\"1st of the month\"\n                  step-4_payment-day-fifteenth-of-month-label-text=\"15th of the month\"\n                  step-4_payment-method=\"Payment method\"\n                  step-4_payment-schedule=\"Payment schedule\"\n                  step-4_payment-method-subtext=\"Payouts will be sent from our referral program provider, impact.com.\"\n                  step-4_pay-pal-input-label=\"PayPal email\"\n                  step-4_bank-location-label=\"Bank country location\"\n                  step-4_beneficiary-account-name-label=\"Beneficiary account name\"\n                  step-4_bank-account-type-label=\"Bank account type\"\n                  step-4_checking-select-item-label=\"Checking\"\n                  step-4_savings-select-item-label=\"Savings\"\n                  step-4_bank-account-number-label=\"Bank account number\"\n                  step-4_iban-label=\"IBAN\"\n                  step-4_swift-code-label=\"SWIFT code\"\n                  step-4_routing-code-label=\"{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }\"\n                  step-4_bank-name-label=\"Bank name\"\n                  step-4_classification-entity-label=\"Classification entity\"\n                  step-4_business-select-item-label=\"Business\"\n                  step-4_individual-select-item-label=\"Individual\"\n                  step-4_foreign-select-item-label=\"Foreign\"\n                  step-4_classification-c-p-f-label=\"Classification CPF\"\n                  step-4_patronymic-name-label=\"Patronymic name\"\n                  step-4_vo-code-label=\"VO code\"\n                  step-4_agency-code-label=\"Agency code\"\n                  step-4_branch-code-label=\"Branch code\"\n                  step-4_classification-label=\"Classification\"\n                  step-4_tax-payer-id-label=\"Beneficiary INN\"\n                  step-4-bank-address-label=\"Bank address\"\n                  step-4_bank-city-label=\"Bank city\"\n                  step-4_bank-state-label=\"Bank Province / State\"\n                  step-4_bank-postal-code-label=\"Bank postal code\"\n                  step-4_eft-withdrawal-label=\"EFT Withdrawal (free)\"\n                  step-4_fx-wire-processing-fee-label=\"FX Wire (Processing Fee {currency}{defaultFxFee}.00)\"\n                  dashboard_status-text-active=\"Active\"\n                  dashboard_status-text-not-active=\"Invalid Tax Form\"\n                  dashboard_status-text-not-verified=\"Not Verified\"\n                  dashboard_badge-text-submitted-on=\"Submitted on {dateSubmitted}.\"\n                  dashboard_badge-text-submitted-on-w-8=\"Submitted on {dateSubmitted}. Valid for three years after submission.\"\n                  dashboard_badge-text-awaiting-review=\"Awaiting review. Submitted on {dateSubmitted}.\"\n                  dashboard_tax-alert-header-not-active-w-9=\"Your W9 tax form has personal information that doesn’t match your profile\"\n                  dashboard_tax-alert-header-not-active-w-8=\"{documentType} tax form is invalid\"\n                  dashboard_tax-alert-not-active-message-w-9=\"Please resubmit a new {documentType} form.\"\n                  dashboard_tax-alert-not-active-message-w-8=\"Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.\"\n                  dashboard_invalid-form=\"Make sure your information is correct and submit new form.\"\n                  dashboard_banking-information-section-header=\"Payout Information\"\n                  dashboard_tax-document-section-header=\"Tax documents\"\n                  dashboard_tax-document-section-sub-header=\"{documentType} tax form\"\n                  dashboard_no-form-needed-subtext=\"Tax documents are only required if you are based in the US or joining the referral program of a US based brand.\"\n                  dashboard_indirect-tax-info-section-header=\"Indirect tax\"\n                  dashboard_indirect-tax-info-spain=\"Registered in {country}, {subRegion}\"\n                  dashboard_indirect-tax-info-other-country=\"Registered in {country}\"\n                  dashboard_indirect-tax-info-canada=\"Registered in {province}, {country}\"\n                  dashboard_indirect-tax-tooltip-support=\"To make changes to your indirect tax information, please contact Support.\"\n                  dashboard_indirect-tax-details=\"{indirectTaxType} number: {indirectTaxNumber}\"\n                  dashboard_new-form-button=\"Submit new form\"\n                  dashboard_edit-payment-information-button=\"Edit Payout Information\"\n                  dashboard_not-registered-for-tax=\"Not registered for indirect tax. If you’ve previously registered with your tax authority, contact Support to add your information to stay tax compliant.\"\n                  dashboard_qst-number=\"QST number: {qstNumber}\"\n                  dashboard_sub-region-tax-number=\"Income tax number: {subRegionTaxNumber}\"\n                  dashboard_status-badge-text=\"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }\"\n                  dashboard_threshold-payout-text=\"Next payout occurs when balance is {thresholdBalance}\"\n                  dashboard_account-text=\"Account\"\n                  dashboard_invoice-column-title=\"Invoice\"\n                  dashboard_date-column-title=\"Date\"\n                  dashboard_earnings-column-title=\"Earnings\"\n                  dashboard_indirect-tax-column-title=\"Indirect tax\"\n                  dashboard_payout-from-impact=\"Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com.\"\n                  dashboard_earnings-after-tax-column-title=\"Earnings after tax\"\n                  dashboard_error-title-text=\"Your payout is on hold \"\n                  dashboard_error-description-text=\"If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.\"\n                  dashboard_payout-missing-information-text=\"Missing banking information, go to Impact.com to resolve.\"\n                  dashboard_invoice-description=\"View and download your invoices to report your earnings and stay tax compliant.\"\n                  dashboard_invoice-prev-label=\"Prev\"\n                  dashboard_invoice-more-label=\"Next\"\n                  dashboard_invoice-header=\"Invoices\"\n                  dashboard_invoice-empty-state-header=\"View your invoice details\"\n                  dashboard_invoice-empty-state-text=\"Refer a friend to view the status of your invoices and rewards earned\"\n                  dashboard_replace-tax-form-modal-header=\"Replace existing tax form\"\n                  dashboard_replace-tax-form-modal-body-text=\"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.\"\n                  form-step=\"Step {step} of {count}\"\n                  general-error-title=\"There was a problem submitting your information\"\n                  general-error-description=\"Please review your information and try again. If this problem continues, contact Support.\"\n                  field-required-error=\"{fieldName} is required\"\n                  invalid-character-error=\"{fieldName} includes characters that aren't supported.\"\n                  field-invalid-error=\"{fieldName} is invalid\"\n                  continue-button=\"Continue\"\n                  back-button=\"Back\"\n                  cancel-button=\"Cancel\"\n                  is-partner-alert-header=\"An account with this email already exists with our referral program provider, impact.com\"\n                  is-partner-alert-description=\"If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.\"\n                  search-for-country-text=\"Search for country..\"\n                  loading-error-alert-header=\"There was a problem loading your form\"\n                  loading-error-alert-description=\"Please refresh the page and try again. If this problem continues, contact Support.\"\n                  tax-and-payouts-description=\"Submit your tax documents and add your banking information to receive your rewards.\"\n                ></sqm-tax-and-cash>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"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  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const taxAndCashTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/taxAndCash\"\n              icon=\"file-earmark-text\"\n              label=\"Tax & Payout Settings\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\" content-area-width=\"1200px\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text>\n                    <h1>Activity</h1>\n                  </sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text>\n                        <p>Referrals</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text>\n                        <p>Rewards Earned</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text>\n                        <p>Reward Balance</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n              <template path=\"/taxAndCash\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-tax-and-cash\n                  step-1_first-name=\"First name\"\n                  step-1_last-name=\"Last name\"\n                  step-1_email=\"Email\"\n                  step-1_country=\"Country\"\n                  step-1_phone-number=\"Phone number\"\n                  step-1_address=\"Address\"\n                  step-1_city=\"City\"\n                  step-1_state=\"State\"\n                  step-1_province=\"Province\"\n                  step-1_region=\"Region\"\n                  step-1_postal-code=\"Postal code\"\n                  step-1_currency=\"Currency\"\n                  step-1_currency-help-text=\"Choose your preferred payout currency\"\n                  step-1_allow-banking-collection=\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\"\n                  step-1_personal-information=\"Personal Information\"\n                  step-1_terms-and-conditions-label=\"terms and conditions\"\n                  step-1_terms-and-conditions-link=\"/payout-terms-and-conditions\"\n                  step-1_search-for-currency-text=\"Search for currency..\"\n                  step-2_indirect-tax=\"Indirect Tax\"\n                  step-2_indirect-tax-description=\"Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments.\"\n                  step-2_indirect-tax-details=\"Indirect tax details\"\n                  step-2_other-region=\"Registered for indirect tax\"\n                  step-2_other-region-subtext=\"If you’ve registered with your tax authority, add your information to stay tax compliant.\"\n                  step-2_not-registered=\"Not registered for indirect tax\"\n                  step-2_not-registered-subtext=\"If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered.\"\n                  step-2_selected-region=\"Country / region of indirect tax\"\n                  step-2_indirect-tax-number=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}\"\n                  step-2_province=\"Province\"\n                  step-2_indirect-tax-number-error=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required\"\n                  step-2_qst-number=\"QST number\"\n                  step-2_is-registered-q-s-t=\"I am registered for QST Tax\"\n                  step-2_is-registered-sub-region-income-tax=\"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.\"\n                  step-2_sub-region=\"Sub-region\"\n                  step-2_sub-region-tax-number-label=\"Income Tax Number\"\n                  step-2_cannot-change-info-alert=\"Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.\"\n                  step-3_tax-form=\"Tax form\"\n                  step-3_tax-form-label=\"{documentType} Tax Form\"\n                  step-3_participant-type=\"Participant type\"\n                  step-3_business-entity=\"I represent a business\"\n                  step-3_individual-participant=\"I am an individual participant\"\n                  step-3_tax-form-description=\"Participants based in the US need to submit a {documentType} form.\"\n                  step-3_tax-form-description-individual-participant=\"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.\"\n                  step-3_tax-form-description-business-entity=\"Participants residing outside of the US who represent a business entity need to submit a {documentType} form.\"\n                  step-3_docusign-expired=\"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.\"\n                  step-3_docusign-session-warning=\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\"\n                  step-3_docusign-error=\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.\"\n                  step-3_refresh-button=\"Refresh Page\"\n                  step-3_exit-button=\"Exit\"\n                  step-4_tax-and-payouts=\"Payouts\"\n                  step-4_directly-to-bank-account=\"Directly to my bank account\"\n                  step-4_to-pay-pal-account=\"PayPal (2% processing fee capped to {feeCap})\"\n                  step-4_payment-schedule-balance-threshold=\"Pay me when my balance reaches a threshold\"\n                  step-4_payment-schedule-fixed-day=\"Pay me on a fixed day of the month\"\n                  step-4_payment-day-select-label=\"Payment Day\"\n                  step-4_payment-threshold-select-label=\"Payment threshold\"\n                  step-4_payment-day-first-of-month-label-text=\"1st of the month\"\n                  step-4_payment-day-fifteenth-of-month-label-text=\"15th of the month\"\n                  step-4_payment-method=\"Payment method\"\n                  step-4_payment-schedule=\"Payment schedule\"\n                  step-4_payment-method-subtext=\"Payouts will be sent from our referral program provider, impact.com.\"\n                  step-4_pay-pal-input-label=\"PayPal email\"\n                  step-4_bank-location-label=\"Bank country location\"\n                  step-4_beneficiary-account-name-label=\"Beneficiary account name\"\n                  step-4_bank-account-type-label=\"Bank account type\"\n                  step-4_checking-select-item-label=\"Checking\"\n                  step-4_savings-select-item-label=\"Savings\"\n                  step-4_bank-account-number-label=\"Bank account number\"\n                  step-4_iban-label=\"IBAN\"\n                  step-4_swift-code-label=\"SWIFT code\"\n                  step-4_routing-code-label=\"{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }\"\n                  step-4_bank-name-label=\"Bank name\"\n                  step-4_classification-entity-label=\"Classification entity\"\n                  step-4_business-select-item-label=\"Business\"\n                  step-4_individual-select-item-label=\"Individual\"\n                  step-4_foreign-select-item-label=\"Foreign\"\n                  step-4_classification-c-p-f-label=\"Classification CPF\"\n                  step-4_patronymic-name-label=\"Patronymic name\"\n                  step-4_vo-code-label=\"VO code\"\n                  step-4_agency-code-label=\"Agency code\"\n                  step-4_branch-code-label=\"Branch code\"\n                  step-4_classification-label=\"Classification\"\n                  step-4_tax-payer-id-label=\"Beneficiary INN\"\n                  step-4-bank-address-label=\"Bank address\"\n                  step-4_bank-city-label=\"Bank city\"\n                  step-4_bank-state-label=\"Bank Province / State\"\n                  step-4_bank-postal-code-label=\"Bank postal code\"\n                  step-4_eft-withdrawal-label=\"EFT Withdrawal (free)\"\n                  step-4_fx-wire-processing-fee-label=\"FX Wire (Processing Fee {currency}{defaultFxFee}.00)\"\n                  dashboard_status-text-active=\"Active\"\n                  dashboard_status-text-not-active=\"Invalid Tax Form\"\n                  dashboard_status-text-not-verified=\"Not Verified\"\n                  dashboard_badge-text-submitted-on=\"Submitted on {dateSubmitted}.\"\n                  dashboard_badge-text-submitted-on-w-8=\"Submitted on {dateSubmitted}. Valid for three years after submission.\"\n                  dashboard_badge-text-awaiting-review=\"Awaiting review. Submitted on {dateSubmitted}.\"\n                  dashboard_tax-alert-header-not-active-w-9=\"Your W9 tax form has personal information that doesn’t match your profile\"\n                  dashboard_tax-alert-header-not-active-w-8=\"{documentType} tax form is invalid\"\n                  dashboard_tax-alert-not-active-message-w-9=\"Please resubmit a new {documentType} form.\"\n                  dashboard_tax-alert-not-active-message-w-8=\"Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.\"\n                  dashboard_invalid-form=\"Make sure your information is correct and submit new form.\"\n                  dashboard_banking-information-section-header=\"Payout Information\"\n                  dashboard_tax-document-section-header=\"Tax documents\"\n                  dashboard_tax-document-section-sub-header=\"{documentType} tax form\"\n                  dashboard_no-form-needed-subtext=\"Tax documents are only required if you are based in the US or joining the referral program of a US based brand.\"\n                  dashboard_indirect-tax-info-section-header=\"Indirect tax\"\n                  dashboard_indirect-tax-info-spain=\"Registered in {country}, {subRegion}\"\n                  dashboard_indirect-tax-info-other-country=\"Registered in {country}\"\n                  dashboard_indirect-tax-info-canada=\"Registered in {province}, {country}\"\n                  dashboard_indirect-tax-tooltip-support=\"To make changes to your indirect tax information, please contact Support.\"\n                  dashboard_indirect-tax-details=\"{indirectTaxType} number: {indirectTaxNumber}\"\n                  dashboard_new-form-button=\"Submit new form\"\n                  dashboard_edit-payment-information-button=\"Edit Payout Information\"\n                  dashboard_not-registered-for-tax=\"Not registered for indirect tax. If you’ve previously registered with your tax authority, contact Support to add your information to stay tax compliant.\"\n                  dashboard_qst-number=\"QST number: {qstNumber}\"\n                  dashboard_sub-region-tax-number=\"Income tax number: {subRegionTaxNumber}\"\n                  dashboard_status-badge-text=\"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }\"\n                  dashboard_threshold-payout-text=\"Next payout occurs when balance is {thresholdBalance}\"\n                  dashboard_account-text=\"Account\"\n                  dashboard_invoice-column-title=\"Invoice\"\n                  dashboard_date-column-title=\"Date\"\n                  dashboard_earnings-column-title=\"Earnings\"\n                  dashboard_indirect-tax-column-title=\"Indirect tax\"\n                  dashboard_payout-from-impact=\"Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com.\"\n                  dashboard_earnings-after-tax-column-title=\"Earnings after tax\"\n                  dashboard_error-title-text=\"Your payout is on hold \"\n                  dashboard_error-description-text=\"If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.\"\n                  dashboard_payout-missing-information-text=\"Missing banking information, go to Impact.com to resolve.\"\n                  dashboard_invoice-description=\"View and download your invoices to report your earnings and stay tax compliant.\"\n                  dashboard_invoice-prev-label=\"Prev\"\n                  dashboard_invoice-more-label=\"Next\"\n                  dashboard_invoice-header=\"Invoices\"\n                  dashboard_invoice-empty-state-header=\"View your invoice details\"\n                  dashboard_invoice-empty-state-text=\"Refer a friend to view the status of your invoices and rewards earned\"\n                  dashboard_replace-tax-form-modal-header=\"Replace existing tax form\"\n                  dashboard_replace-tax-form-modal-body-text=\"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.\"\n                  form-step=\"Step {step} of {count}\"\n                  general-error-title=\"There was a problem submitting your information\"\n                  general-error-description=\"Please review your information and try again. If this problem continues, contact Support.\"\n                  field-required-error=\"{fieldName} is required\"\n                  invalid-character-error=\"{fieldName} includes characters that aren't supported.\"\n                  field-invalid-error=\"{fieldName} is invalid\"\n                  continue-button=\"Continue\"\n                  back-button=\"Back\"\n                  cancel-button=\"Cancel\"\n                  is-partner-alert-header=\"An account with this email already exists with our referral program provider, impact.com\"\n                  is-partner-alert-description=\"If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.\"\n                  search-for-country-text=\"Search for country..\"\n                  loading-error-alert-header=\"There was a problem loading your form\"\n                  loading-error-alert-description=\"Please refresh the page and try again. If this problem continues, contact Support.\"\n                  tax-and-payouts-description=\"Submit your tax documents and add your banking information to receive your rewards.\"\n                ></sqm-tax-and-cash>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"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  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
 const portalLeadSubmitTemplateWithDashboard = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Post about us on X</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"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  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
@@ -10106,7 +10181,7 @@ const dashboardTemplate = "<sqm-portal-container direction=\"column\" padding=\"
 
 const leadSubmitTemplate = "<sqm-referral-iframe></sqm-referral-iframe>\n";
 
-const editProfileTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-change-password></sqm-portal-change-password>\n</sqm-portal-container>\n";
+const editProfileTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-change-password></sqm-portal-change-password>\n</sqm-portal-container>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-change-marketing></sqm-portal-change-marketing>\n</sqm-portal-container>\n";
 
 const activityTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n  <sqm-text> <h1>Activity</h1></sqm-text>\n  <sqm-stat-container space=\"xxxx-large\"\n    ><sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/referralsCount\"\n      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n    >\n  </sqm-stat-container>\n  <sqm-referral-table>\n    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n    <sqm-referral-table-date-column\n      column-title=\"Referred\"\n      date-shown=\"dateReferralStarted\"\n    ></sqm-referral-table-date-column> </sqm-referral-table\n></sqm-portal-container>\n";
 
@@ -10128,7 +10203,7 @@ const emailVerifiedTemplate = "<sqm-portal-verify-email></sqm-portal-verify-emai
 
 const emailVerificationTemplate = "<sqm-portal-protected-route redirect-to=\"/login\"></sqm-portal-protected-route>\n<sqm-portal-email-verification></sqm-portal-email-verification>\n";
 
-const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                                                       | Type                                                                                                                                                                                                                                                                                  | Default                                                                            |\n| --------------------- | ----------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| `demoData`            | --                      |                                                                   | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { googleButton?: VNode; forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                                                                        |\n| `emailLabel`          | `email-label`           |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Email\"`                                                                          |\n| `forgotPasswordLabel` | `forgot-password-label` |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Forgot Password?\"`                                                               |\n| `forgotPasswordPath`  | `forgot-password-path`  | Redirect participants to this page to reset their password        | `string`                                                                                                                                                                                                                                                                              | `\"/forgotPassword\"`                                                                |\n| `networkErrorMessage` | `network-error-message` |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"An error occurred while logging you in. Please refresh the page and try again.\"` |\n| `nextPage`            | `next-page`             | Redirect participants to this page after they successfully login. | `string`                                                                                                                                                                                                                                                                              | `\"/\"`                                                                              |\n| `pageLabel`           | `page-label`            |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Sign in to your account\"`                                                        |\n| `passwordLabel`       | `password-label`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Password\"`                                                                       |\n| `registerCTA`         | `register-c-t-a`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Don't have an account?\"`                                                         |\n| `registerLabel`       | `register-label`        |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Register\"`                                                                       |\n| `registerPath`        | `register-path`         | Redirect participants to this page to start registration.         | `string`                                                                                                                                                                                                                                                                              | `\"/register\"`                                                                      |\n| `showGoogleLogin`     | `show-google-login`     |                                                                   | `boolean`                                                                                                                                                                                                                                                                             | `false`                                                                            |\n| `submitLabel`         | `submit-label`          |                                                                   | `string`                                                                                                                                                                                                                                                                              | `\"Sign In\"`                                                                        |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-google-sign-in](../sqm-google-sign-in)\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-login --> sqm-google-sign-in\n  sqm-portal-login --> sqm-form-message\n  sqm-stencilbook --> sqm-portal-login\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                                                       | Type                                                                                                                                                                                                                                                            | Default                                                                            |\n| --------------------- | ----------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| `demoData`            | --                      |                                                                   | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                                                                        |\n| `emailLabel`          | `email-label`           |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Email\"`                                                                          |\n| `forgotPasswordLabel` | `forgot-password-label` |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Forgot Password?\"`                                                               |\n| `forgotPasswordPath`  | `forgot-password-path`  | Redirect participants to this page to reset their password        | `string`                                                                                                                                                                                                                                                        | `\"/forgotPassword\"`                                                                |\n| `networkErrorMessage` | `network-error-message` |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"An error occurred while logging you in. Please refresh the page and try again.\"` |\n| `nextPage`            | `next-page`             | Redirect participants to this page after they successfully login. | `string`                                                                                                                                                                                                                                                        | `\"/\"`                                                                              |\n| `pageLabel`           | `page-label`            |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Sign in to your account\"`                                                        |\n| `passwordLabel`       | `password-label`        |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Password\"`                                                                       |\n| `registerLabel`       | `register-label`        |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Register\"`                                                                       |\n| `registerPath`        | `register-path`         | Redirect participants to this page to start registration.         | `string`                                                                                                                                                                                                                                                        | `\"/register\"`                                                                      |\n| `submitLabel`         | `submit-label`          |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Sign In\"`                                                                        |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-login --> sqm-form-message\n  sqm-stencilbook --> sqm-portal-login\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const ReferralIframeReadme = "# sqm-referral-iframe\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property       | Attribute       | Description                                                                                     | Type                                                                                                                           | Default     |\n| -------------- | --------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `demoData`     | --              |                                                                                                 | `{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\n| `iframeHeight` | `iframe-height` | Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto. | `string`                                                                                                                       | `\"100%\"`    |\n| `iframeSrc`    | `iframe-src`    | URL of iframe to display                                                                        | `string`                                                                                                                       | `undefined` |\n| `iframeWidth`  | `iframe-width`  | Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto.   | `string`                                                                                                                       | `\"100%\"`    |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-stencilbook --> sqm-referral-iframe\n  style sqm-referral-iframe fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
@@ -10329,7 +10404,7 @@ const PortalFooter_stories = {
     scenario: scenario$f,
   },
 };
-const defaultProps$9 = {
+const defaultProps$a = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
   hidePoweredBy: false,
@@ -10339,12 +10414,12 @@ const defaultProps$9 = {
   paddingBottom: "large",
   paddingLeft: "large",
 };
-const DefaultFooter = () => h(PortalFooterView, Object.assign({}, defaultProps$9));
-const FooterWithTerms = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
-const FooterWithFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterWithTermsAndFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterNoPoweredBy = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
-const FooterNoSupportText = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
+const DefaultFooter = () => h(PortalFooterView, Object.assign({}, defaultProps$a));
+const FooterWithTerms = () => (h(PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
+const FooterWithFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$a, { faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterWithTermsAndFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterNoPoweredBy = () => (h(PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
+const FooterNoSupportText = () => (h(PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10626,7 +10701,7 @@ const props$1 = {
     },
   },
 };
-const errorProps$8 = {
+const errorProps$9 = {
   states: {
     registrationFormState: {
       validationErrors: {
@@ -10644,7 +10719,7 @@ const NameFields = () => {
   return h(NameFieldsView, Object.assign({}, props$1));
 };
 const NameFieldsWithErrors = () => {
-  return h(NameFieldsView, Object.assign({}, errorProps$8));
+  return h(NameFieldsView, Object.assign({}, errorProps$9));
 };
 
 const NameFields$1 = /*#__PURE__*/Object.freeze({
@@ -10662,7 +10737,7 @@ const CheckboxField_stories = {
     scenario: scenario$j,
   },
 };
-const defaultProps$a = {
+const defaultProps$b = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -10670,7 +10745,7 @@ const defaultProps$a = {
     checked: false,
   },
   content: {
-    checkboxName: "agree",
+    checkboxName: "terms",
     checkboxLabel: "By signing up you agree to the {labelLink}",
     checkboxLabelLink: "https://example.com",
     checkboxLabelLinkText: "Terms and Conditions",
@@ -10703,35 +10778,35 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$c = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a))));
-const DefaultChecked = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
-    ...defaultProps$a.states,
+const Default$c = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$b))));
+const DefaultChecked = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
+    ...defaultProps$b.states,
     checked: true,
   } }))));
-const CustomLabel = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { content: {
-    ...defaultProps$a.content,
+const CustomLabel = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$b, { content: {
+    ...defaultProps$b.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$4 = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
-    ...defaultProps$a.states,
+const Error$4 = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
+    ...defaultProps$b.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   } }))));
-const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
-    ...defaultProps$a.states,
+const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
+    ...defaultProps$b.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   }, content: {
-    ...defaultProps$a.content,
+    ...defaultProps$b.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
-const TermsAndConditions$1 = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditions$2 = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -10763,11 +10838,29 @@ const CheckboxField = /*#__PURE__*/Object.freeze({
   CustomLabel: CustomLabel,
   Error: Error$4,
   CustomError: CustomError,
-  TermsAndConditions: TermsAndConditions$1,
+  TermsAndConditions: TermsAndConditions$2,
   TermsAndConditionsCustomLabel: TermsAndConditionsCustomLabel,
   TermsAndConditionsLongCustomLabel: TermsAndConditionsLongCustomLabel
 });
 
+const scenario$k = "@owner:zach\n@author:zach\nFeature: Marketing Emails Checkbox\n\n    A checkbox that is used to opt in for referral program marketing emails.\n\n    Background: A user is on the portal registration page\n        Given a user is viewing the \"/register\"\n        And \"/register\" contains the registration form\n        And the registration form has the following fields\n            | fields                    |\n            | first name                |\n            | last name                 |\n            | email                     |\n            | password                  |\n            | Marketing Emails Checkbox |\n\n    @motivating\n    Scenario: Checkbox is optional by default\n        Given the user is filling out the registration form\n        And the name fields have valid input\n        And the email field has valid input\n        And the password field has valid input\n        And the checkbox is not checked\n        When they try to register\n        Then the form is submitted\n        And there is no error for the checkbox\n\n    Scenario: The form field name is provided by default\n        Given the customer has added a marketing emails checkbox to their registration form\n        Then the field name is automatically set to \"marketingEmailOptIn\"\n        And the name is not configurable";
+
+const MarketingEmailsCheckbox_stories = {
+  title: "Components/Marketing Emails Checkbox",
+  parameters: {
+    scenario: scenario$k,
+  },
+};
+const Default$d = () => {
+  return h("sqm-marketing-emails-checkbox", null);
+};
+
+const MarketingEmailsCheckbox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': MarketingEmailsCheckbox_stories,
+  Default: Default$d
+});
+
 const UseCheckboxField_stories = {
   title: "Hooks / useCheckboxField",
   parameters: {
@@ -10797,7 +10890,7 @@ function setupGraphQL$9() {
   }, []);
   return { id, accountId };
 }
-const TermsAndConditions$2 = createHookStory(() => {
+const TermsAndConditions$3 = createHookStory(() => {
   setupGraphQL$9();
   return (h("sqm-portal-register", null,
     h("div", { slot: "terms" },
@@ -10835,7 +10928,7 @@ const MissingName = createHookStory(() => {
 const UseCheckboxField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseCheckboxField_stories,
-  TermsAndConditions: TermsAndConditions$2,
+  TermsAndConditions: TermsAndConditions$3,
   TermsAndConditionsWithLabel: TermsAndConditionsWithLabel,
   MultipleCheckboxes: MultipleCheckboxes,
   OptionalCheckboxes: OptionalCheckboxes,
@@ -10845,7 +10938,7 @@ const UseCheckboxField = /*#__PURE__*/Object.freeze({
 const DropdownField_stories = {
   title: "Components/Dropdown Field",
 };
-const defaultProps$b = {
+const defaultProps$c = {
   states: {
     registrationFormState: {},
   },
@@ -10860,24 +10953,24 @@ const 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,
+const Default$e = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$c))));
+const CustomLabel$1 = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$c, { content: {
+    ...defaultProps$c.content,
     dropdownLabel: "Pick your favorite",
   } }))));
-const Error$5 = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b, { states: {
-    ...defaultProps$b.states,
+const Error$5 = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$c, { states: {
+    ...defaultProps$c.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
       },
     },
   } }))));
-const CustomError$1 = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b, { content: {
-    ...defaultProps$b.content,
+const CustomError$1 = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$c, { content: {
+    ...defaultProps$c.content,
     errorMessage: "An option must be selected to continue",
   }, states: {
-    ...defaultProps$b.states,
+    ...defaultProps$c.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
@@ -10888,7 +10981,7 @@ const CustomError$1 = createHookStory(() => (h(DropdownFieldView, Object.assign(
 const DropdownField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': DropdownField_stories,
-  Default: Default$d,
+  Default: Default$e,
   CustomLabel: CustomLabel$1,
   Error: Error$5,
   CustomError: CustomError$1
@@ -10953,15 +11046,15 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
   MissingName: MissingName$1
 });
 
-const scenario$k = "@author:derek\n@owner:derek\nFeature: Form Input Field\n\n    This component is used as a custom registration field during registration. The field can be text,\n    a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\n    through the Managed Identity Service and upserted on the user after registration.\n\n    Background: A user exists and is viewing the hosted portal registration\n        Given a user is viewing \"/register\"\n        And \"/register\" contains the registration form\n        And the registration form has a custom input field\n\n    @motivating\n    Scenario Outline: Input fields are required by default but can be optional\n        Given the input has prop \"field-optional\" with <value>\n        And the input is empty\n        When the user tries to register\n        Then the input <mayBe> highlighted in red\n        And an error message <mayAppear> in red below\n        And form submission <mayBe> blocked\n        Examples:\n            | value | mayBe | mayAppear      |\n            | false | is    | appears        |\n            |       | is    | appears        |\n            | true  | isn't | doesn't appear |\n\n    @motivating\n    Scenario: Input field labels are configurable\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\n        When the user views the registration form\n        Then they see the input field\n        And it has label \"My Custom Input\" above the input\n\n    @minutia\n    Scenario Outline: The validation error message is configurable\n        The error message string is evaluated as an ICU string, but currently is provided no context\n        Given the input is required\n        And it has prop \"error-message\" with <value>\n        When the user tries to register\n        But they haven't filled in the input\n        Then they see <errorMessage> below\n        Examples:\n            | value             | errorMessage      |\n            |                   | Cannot be empty   |\n            | My Custom Message | My Custom Message |\n\n    @motivating\n    Scenario: Form data attribute name is configurable\n        Given the input has prop \"field-name\" with value \"myCustomField\"\n        When the user types \"testing testing\" into the input\n        And they register\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\n\n    @motivating\n    Scenario Outline: The input field is a text input by default\n        Given the input <mayHave> prop \"field-type\" with <value>\n        When the user views the input field\n        Then it is a text input\n        Examples:\n            | mayHave      | value |\n            | has          | text  |\n            | doesn't have |       |\n\n    @motivating\n    Scenario: Date type inputs are supported\n        Given the input has prop \"field-type\" \"date\"\n        When the user views the input field\n        Then they see \"mm/dd/yyyy\" as a placeholder\n        And they see a calendar icon on the right\n        When they start typing a date\n        Then it maintains the \"mm/dd/yyyy\" format\n        When they click the calendar icon\n        Then a dropdown appears\n        And they see a calendar\n        When they select a date\n        Then it is applied to the input\n\n    @landmine\n    Scenario: The clear text button in the date picker does not clear the date\n        Due to an incompatibility between our shoelace version and the browser, the clear funtionality is not supported currently\n        Given the input has prop \"field-type\" \"date\"\n        And the user has entered a date\n        When they click the calendar icon\n        And click the 'clear' text button\n        Then their selected date is not cleared\n\n    @motivating\n    Scenario: Phone number type inputs are supported\n        Given the input has prop \"field-type\" with value \"tel\"\n        When the user starts typing a phone number in the input\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\n        When they pre-fix their phone number with a \"1\"\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\n\n    @landmine\n    Scenario: Telephone formatting is removed after 10 numbers\n        Given a user using a phone number input field\n        And they entered their 10 character phone number\n        And it was not prefixed with a 1\n        When they add another character\n        Then the formatting is removed\n\n    @landmine\n    Scenario Outline: Input values are always recorded as strings in the form data\n        Given the input has prop \"field-type\" with <value>\n        And it has a \"field-name\"\n        When the user inputs <formInput>\n        And they register\n        Then <formData> is recorded in the form data as a string\n        Examples:\n            | value | formInput      | formData       |\n            | text  | Hello there    | Hello there    |\n            | date  | 05/07/2021     | 2021-05-07     |\n            | tel   | (250) 234-9877 | (250) 234-9877 |\n\n    @minutia\n    Scenario Outline: The input field component fails fast if a field name isn't provided\n        Given the input <mayHave> prop \"field-name\"\n        And it <mayHavePropValue>\n        When a user views the input\n        Then an alert with an error message is displayed in place of the input\n        And it has a details section\n        When \"More details\" is clicked\n        Then the following information is displayed\n            | information          |\n            | component being used |\n            | missing attribute(s) |\n        Examples:\n            | mayBeAnAttribute | mayHavePropValue |\n            | doesn't have     | N/A              |\n            | has              | \"\"               |\n            | has              |                  |";
+const scenario$l = "@author:derek\n@owner:derek\nFeature: Form Input Field\n\n    This component is used as a custom registration field during registration. The field can be text,\n    a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\n    through the Managed Identity Service and upserted on the user after registration.\n\n    Background: A user exists and is viewing the hosted portal registration\n        Given a user is viewing \"/register\"\n        And \"/register\" contains the registration form\n        And the registration form has a custom input field\n\n    @motivating\n    Scenario Outline: Input fields are required by default but can be optional\n        Given the input has prop \"field-optional\" with <value>\n        And the input is empty\n        When the user tries to register\n        Then the input <mayBe> highlighted in red\n        And an error message <mayAppear> in red below\n        And form submission <mayBe> blocked\n        Examples:\n            | value | mayBe | mayAppear      |\n            | false | is    | appears        |\n            |       | is    | appears        |\n            | true  | isn't | doesn't appear |\n\n    @motivating\n    Scenario: Input field labels are configurable\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\n        When the user views the registration form\n        Then they see the input field\n        And it has label \"My Custom Input\" above the input\n\n    @minutia\n    Scenario Outline: The validation error message is configurable\n        The error message string is evaluated as an ICU string, but currently is provided no context\n        Given the input is required\n        And it has prop \"error-message\" with <value>\n        When the user tries to register\n        But they haven't filled in the input\n        Then they see <errorMessage> below\n        Examples:\n            | value             | errorMessage      |\n            |                   | Cannot be empty   |\n            | My Custom Message | My Custom Message |\n\n    @motivating\n    Scenario: Form data attribute name is configurable\n        Given the input has prop \"field-name\" with value \"myCustomField\"\n        When the user types \"testing testing\" into the input\n        And they register\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\n\n    @motivating\n    Scenario Outline: The input field is a text input by default\n        Given the input <mayHave> prop \"field-type\" with <value>\n        When the user views the input field\n        Then it is a text input\n        Examples:\n            | mayHave      | value |\n            | has          | text  |\n            | doesn't have |       |\n\n    @motivating\n    Scenario: Date type inputs are supported\n        Given the input has prop \"field-type\" \"date\"\n        When the user views the input field\n        Then they see \"mm/dd/yyyy\" as a placeholder\n        And they see a calendar icon on the right\n        When they start typing a date\n        Then it maintains the \"mm/dd/yyyy\" format\n        When they click the calendar icon\n        Then a dropdown appears\n        And they see a calendar\n        When they select a date\n        Then it is applied to the input\n\n    @landmine\n    Scenario: The clear text button in the date picker does not clear the date\n        Due to an incompatibility between our shoelace version and the browser, the clear funtionality is not supported currently\n        Given the input has prop \"field-type\" \"date\"\n        And the user has entered a date\n        When they click the calendar icon\n        And click the 'clear' text button\n        Then their selected date is not cleared\n\n    @motivating\n    Scenario: Phone number type inputs are supported\n        Given the input has prop \"field-type\" with value \"tel\"\n        When the user starts typing a phone number in the input\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\n        When they pre-fix their phone number with a \"1\"\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\n\n    @landmine\n    Scenario: Telephone formatting is removed after 10 numbers\n        Given a user using a phone number input field\n        And they entered their 10 character phone number\n        And it was not prefixed with a 1\n        When they add another character\n        Then the formatting is removed\n\n    @landmine\n    Scenario Outline: Input values are always recorded as strings in the form data\n        Given the input has prop \"field-type\" with <value>\n        And it has a \"field-name\"\n        When the user inputs <formInput>\n        And they register\n        Then <formData> is recorded in the form data as a string\n        Examples:\n            | value | formInput      | formData       |\n            | text  | Hello there    | Hello there    |\n            | date  | 05/07/2021     | 2021-05-07     |\n            | tel   | (250) 234-9877 | (250) 234-9877 |\n\n    @minutia\n    Scenario Outline: The input field component fails fast if a field name isn't provided\n        Given the input <mayHave> prop \"field-name\"\n        And it <mayHavePropValue>\n        When a user views the input\n        Then an alert with an error message is displayed in place of the input\n        And it has a details section\n        When \"More details\" is clicked\n        Then the following information is displayed\n            | information          |\n            | component being used |\n            | missing attribute(s) |\n        Examples:\n            | mayBeAnAttribute | mayHavePropValue |\n            | doesn't have     | N/A              |\n            | has              | \"\"               |\n            | has              |                  |";
 
 const InputField_stories = {
   title: "Components/Input Field",
   parameters: {
-    scenario: scenario$k,
+    scenario: scenario$l,
   },
 };
-const defaultProps$c = {
+const defaultProps$d = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -10998,21 +11091,21 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-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,
+const Default$f = () => h(InputFieldView, Object.assign({}, defaultProps$d));
+const CustomLabel$2 = () => (h(InputFieldView, Object.assign({}, defaultProps$d, { content: { ...defaultProps$d.content, fieldLabel: "My Label" } })));
+const Error$6 = () => (h(InputFieldView, Object.assign({}, defaultProps$d, { states: {
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
       },
     },
   } })));
-const CustomError$2 = () => (h(InputFieldView, Object.assign({}, defaultProps$c, { content: {
-    ...defaultProps$c.content,
+const CustomError$2 = () => (h(InputFieldView, Object.assign({}, defaultProps$d, { content: {
+    ...defaultProps$d.content,
     errorMessage: "A value must be entered to continue",
   }, states: {
-    ...defaultProps$c.states,
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
@@ -11020,27 +11113,27 @@ const CustomError$2 = () => (h(InputFieldView, Object.assign({}, defaultProps$c,
     },
   } })));
 const DateType = () => {
-  return (h(InputFieldView, Object.assign({}, defaultProps$c, { content: {
-      ...defaultProps$c.content,
+  return (h(InputFieldView, Object.assign({}, defaultProps$d, { content: {
+      ...defaultProps$d.content,
       fieldLabel: "Date",
       fieldType: "date",
     } })));
 };
 const TelType = () => {
-  return (h(InputFieldView, Object.assign({}, defaultProps$c, { content: {
-      ...defaultProps$c.content,
+  return (h(InputFieldView, Object.assign({}, defaultProps$d, { content: {
+      ...defaultProps$d.content,
       fieldLabel: "Phone Number",
       fieldType: "tel",
     } })));
 };
 const RegistrationField = () => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: h(InputFieldView, Object.assign({}, defaultProps$c)),
+    formData: h(InputFieldView, Object.assign({}, defaultProps$d)),
   } })));
 const RegistrationFieldCustomLabel = () => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: (h(InputFieldView, Object.assign({}, defaultProps$c, { content: {
-        ...defaultProps$c.content,
+    formData: (h(InputFieldView, Object.assign({}, defaultProps$d, { content: {
+        ...defaultProps$d.content,
         fieldLabel: "Data",
       } }))),
   } })));
@@ -11048,7 +11141,7 @@ const RegistrationFieldCustomLabel = () => (h(PortalRegisterView, Object.assign(
 const InputField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': InputField_stories,
-  Default: Default$e,
+  Default: Default$f,
   CustomLabel: CustomLabel$2,
   Error: Error$6,
   CustomError: CustomError$2,
@@ -11061,7 +11154,7 @@ const InputField = /*#__PURE__*/Object.freeze({
 const UseInputField_stories = {
   title: "Hooks / useInputField",
   parameters: {
-    scenario: scenario$k,
+    scenario: scenario$l,
   },
 };
 function setupGraphQL$b() {
@@ -11143,12 +11236,12 @@ const UseInputField = /*#__PURE__*/Object.freeze({
   MissingName: MissingName$2
 });
 
-const scenario$l = "@author:derek\n@owner:derek\nFeature: Reward Exchange List\n\n    The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\n    It populates a list from the reward exchange rules set up on a given tenant.\n\n    Background:\n        Given a tenant with reward exchange rules\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no visible exchanges\n        Given a user with no visible exchanges\n        When they view the reward exchange\n        Then no exchange options are displayed\n        And they see an image of a present\n        And \"Redeem Rewards\" in bold\n        And \"Use your points to redeem rewards once they become available\" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutia\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no visible exchanges\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the reward exchange\n        Then they see the custom empty state\n\n    @motivating\n    @ui\n    Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\n        Given a user\n        When they load the reward exchange list\n        Then they see a loading Skeleton\n        And it has 8 skeleton cards\n        When the reward exchange rules have loaded\n        Then the skeleton is replaced with reward exchange options\n\n    @motivating\n    Scenario: An error banner appears when the reward exchange list fails to load\n        Given a user trying to view the reward exchange list\n        But it fails to load\n        Then an error banner is displayed\n        And it displays \"Unable to load reward exchange list. Please try again\"\n\n    @motivating\n    @ui\n    Scenario: The exchange progress bar progresses through the exchange process\n        Given a user who is eligible for the tenants reward exchange rules\n        When they view the reward exchange list\n        Then the process bar displays the following elements\n            | elements                                                           |\n            | Step 1 `Rewards` title in black                                    |\n            | Step 1 circle with green outline, white fill and number 1 in green |\n            | Step 2 `Select` title in grey                                      |\n            | Step 2 circle with grey fill and number 2 in white                 |\n            | Step 3 `Confirm` title in grey                                     |\n            | Step 3 circle with grey fill and number 3 in white                 |\n            | lines between all steps are greyed out                             |\n        When they continue to the selection page\n        Then the progress bar displays the following elements\n            | elements                                                           |\n            | Step 1 `Rewards` title in black                                    |\n            | Step 1 circle with white checkmark and green fill                  |\n            | Step 2 `Select` title in black                                     |\n            | Step 2 circle with green outline, white fill and number 2 in green |\n            | Step 3 `Confirm` title in grey                                     |\n            | Step 3 circle with grey fill and number 3 in white                 |\n            | Green line between step 1 and 2                                    |\n            | Grey line between step 2 and 3                                     |\n        When they continue to the confirmation page\n        Then the progress bar displays the following elements\n            | elements                                                           |\n            | Step 1 `Rewards` title in black                                    |\n            | Step 1 circle with white checkmark and green fill                  |\n            | Step 2 `Select` title in black                                     |\n            | Step 2 circle with white checkmark and green fill                  |\n            | Step 3 `Confirm` title in black                                    |\n            | Step 3 circle with green outline, white fill and number 3 in green |\n            | Green line between all steps                                       |\n        When they continue to the redemption page\n        Then the progress bar displays the following elements\n            | elements                                          |\n            | Step 1 `Rewards` title in black                   |\n            | Step 1 circle with white checkmark and green fill |\n            | Step 2 `Select` title in black                    |\n            | Step 2 circle with white checkmark and green fill |\n            | Step 3 `Confirm` title in black                   |\n            | Step 3 circle with white checkmark and green fill |\n            | Green line between all steps                      |\n\n    @motivating\n    Scenario: Users must choose a reward exchange option to continue to the selection page\n        Given a user who is eligible for the tenants reward exchange rules\n        When they view the reward exchange list\n        Then the 'Continue' button is disabled\n        When they select a reward exchange card\n        Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\n        And the continue button is no longer disabled\n        When they click \"Continue\"\n        Then they are brought to the selection page\n\n    @motivating\n    @ui\n    Scenario: Reward exchange rule names and images are used in the reward exchange cards\n        Given a tenant reward exchange rule\n        And it has name \"My Visa Exchange Rule\"\n        And it has an image\n        When a user views the reward exchange list\n        Then they see a exchange card with title \"My Visa Exchange Rule\"\n        And the exchange image on the left hand side of the card\n\n    @motivating\n    Scenario Outline: Reward exchange source values are displayed on reward exchange cards\n        Given a <type> reward exchange rule\n        When a user views the reward exchange list\n        Then they see <text> under the name on the exchange option cards\n        And the pretty values are localized to a user locale\n        Examples:\n            | type                        | text                                                                |\n            | FIXED_GLOBAL_REWARD         | the exchange source pretty value                                    |\n            | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\n            | VARIABLE_GLOBAL_REWARD      | the exchange source min pretty value to the source max pretty value |\n            | VARIABLE_CREDIT_REWARD      | the exchange source min pretty value to the source max pretty value |\n\n    @motivating\n    Scenario Outline: Reward exchange cards can display customized error messages\n        Given a reward exchange rule\n        And it has <availabilityPredicate>\n        And the reward exchange list has prop \"not-available-error\" with <value>\n        When the user views the reward exchange list\n        Then the card for the reward exchange rule is disabled\n        And <message> is displayed\n        Examples:\n            | availabilityPredicate                                         | value                                                                                                           | message                         |\n            | 'champion' in user.segments ? \"NOT_CHAMPION\" : true           | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} }        | Sorry must be a champion!       |\n            | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\n\n    @motivating\n    Scenario: Exchange options are disabled if they put a user over the W9 limit\n        Given a user who is approaching their W9 limit\n        And a reward exchange rule\n        And its destination reward has a US taxable value that would put the user over their limit\n        When they view the reward exchange list\n        Then the reward exchange card is disabled\n        And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\n        And the text is orange\n        And the icon is orange\n\n    @motivating\n    Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\n        Given a <type> reward exchange rule\n        But the user lacks enough credit to exchange for it\n        When they view the reward exchange list\n        Then the reward exchange card is disabled\n        And a <text> error message is displayed on to the right of a exclamation triangle icon\n        And the text is orange\n        And the icon is orange\n        Examples:\n            | type                        | text                            |\n            | FIXED_GLOBAL_REWARD         | {prettySourceValue} required    |\n            | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\n            | VARIABLE_GLOBAL_REWARD      | {prettySourceMinValue} required |\n            | VARIABLE_CREDIT_REWARD      | {prettySourceMinValue} required |\n\n    @motivating\n    Scenario: Users can go back to the Rewards page from the Select page\n        Given a user viewing the Select page\n        Then they see a \"Cancel\" text button\n        And a \"Continue to confirmation\" brand colour button in the bottom right corner\n        When they click \"Cancel\"\n        Then they return to the Rewards page\n\n    @motivating\n    Scenario: Users can go back to the Select Page from the Confirm page\n        Given a user viewing the Confirm page\n        Then they see a \"Back\" text button\n        And a \"Redeem\" brand colour button in the bottom right corner\n        When they click \"Back\"\n        Then they return to the Select Page\n\n    @motivating\n    Scenario: Reward rules with visibility predicates that evaluates to false are not shown\n        Given a tenant reward exchange rule with visibility predicates that evaluates to false\n        When a user views the reward exchange list\n        Then they do not see the card for that reward exchange rule\n\n    @motivating\n    Scenario Outline: Users can choose their reward option for variable rewards on the Select page\n        Given a <type> exchange rule\n        And it has the following fields\n            | fields      |\n            | name        |\n            | description |\n            | image       |\n        When a user views the reward exchange list\n        And they progress to the Select page for this exchange\n        Then they see the exchange rule image on the left hand side\n        And on the right hand side they see the following in this order from top to bottom\n            | elements                                                                                          |\n            | exchange name                                                                                     |\n            | exchange description                                                                              |\n            | select list with all exchange options using pretty values, destination reward above source reward |\n        Examples:\n            | type                        |\n            | STEPPED_FIXED_GLOBAL_REWARD |\n            | VARIABLE_GLOBAL_REWARD      |\n            | VARIABLE_CREDIT_REWARD      |\n\n    @motivating\n    Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\n        Given a \"FIXED_GLOBAL_REWARD\" exchange rule\n        And it has the following fields\n            | fields      |\n            | name        |\n            | description |\n            | image       |\n        When a user views the reward exchange list\n        And they progress to the Select page for this exchange\n        Then they see the exchange rule image on the left hand side\n        And on the right hand side they see the following in this order from top to bottom\n            | elements                                               |\n            | exchange name                                          |\n            | exchange source pretty value displayed in brand colour |\n            | exchange description                                   |\n\n    @motivating\n    Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\n        Given a <type> exchange rule\n        When a user views the reward exchange list\n        And they progress to the Select page for this exchange\n        Then they see a drop down with all the reward exchange selections\n        When they click on the drop down\n        But they are not eligible for all of the exchanges options <dueToReason>\n        Then the ineligble options are disabled\n        And under the source value is <text>\n        Examples:\n            | type                        | dueToReason                     | text                         |\n            | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\n            | VARIABLE_GLOBAL_REWARD      | due to insufficent source value | {prettySourceValue} required |\n            | VARIABLE_CREDIT_REWARD      | due to insufficent source value | {prettySourceValue} required |\n            | STEPPED_FIXED_GLOBAL_REWARD | W9                              | US Tax Limit                 |\n            | VARIABLE_GLOBAL_REWARD      | W9                              | US Tax Limit                 |\n            | VARIABLE_CREDIT_REWARD      | W9                              | US Tax Limit                 |\n\n    @motivating\n    Scenario Outline: The Confirm page allows users to view their exchange before committing\n        Given a <type> exchange rule\n        When a user views the reward exchange list\n        And they select the exchange\n        And they progress to Confirm page\n        Then they see a row with title \"Reward\"\n        And it contains the exchange name\n        And it contains the exchange image\n        And they <maySee> a row with title \"Reward Amount\"\n        And it <mayContain> <amountTitle>\n        And they see a row with title \"Cost to Redeem\"\n        And it contains the source reward pretty value in bolded text\n        Examples:\n            | type                        | maySee | mayContain      | amountTitle                  |\n            | FIXED_GLOBAL_REWARD         | don't  | doesn't contain | N/A                          |\n            | VARIABLE_GLOBAL_REWARD      | see    | contains        | the pretty destination value |\n            | STEPPED_FIXED_GLOBAL_REWARD | see    | contains        | the pretty destination value |\n            | VARIABLE_CREDIT_REWARD      | see    | contains        | the pretty destination value |\n\n    @motivating\n    Scenario: An error banner is displayed if an error occurs during redemeption\n        Given a user has selected a reward to exchange\n        And is on the confirmation page\n        When they click \"Redeem\"\n        But an error occurs\n        Then an error banner appears\n        And it contains details about the error\n        And the reward exchange is not completed\n\n    @motivating\n    Scenario: Confetti is displayed when a reward exchange succeeds\n        Given a user has selected a reward to exchange\n        And they are on the confirmation page\n        When they click \"Redeem\"\n        And the exchange is successful\n        Then they see confetti centered on the success page\n        And they see text describing what they exchanged for their new reward\n        And they see a \"Done\" brand colour button\n        When they click \"Done\"\n        Then they see the Rewards page\n\n    @motivating\n    Scenario: Fuel tank codes are shown when a reward exchange succeeds\n        Given a user has selected to exchange for a fuel tank reward\n        When they complete the reward exchange\n        And are on the success page\n        Then they see a textbox with their fuel tank code\n        And a clipboard icon\n        When they click the clipboard icon\n        Then their fuel tank code is copied to their clipboard\n\n    @motivating\n    Scenario Outline: Users can exchange for any type of reward\n        Given a <type> reward exchange rule for a <reward>\n        And a user who has enough source credit to exchange for the reward\n        When they go through the exchange flow\n        And exchange for their reward\n        Then their credit is exchanged for the <reward>\n        Examples:\n            | type                        | reward         |\n            | FIXED_GLOBAL_REWARD         | gift card      |\n            | FIXED_GLOBAL_REWARD         | fuel tank code |\n            | FIXED_GLOBAL_REWARD         | discount       |\n            | FIXED_GLOBAL_REWARD         | credit reward  |\n            | STEPPED_FIXED_GLOBAL_REWARD | gift card      |\n            | STEPPED_FIXED_GLOBAL_REWARD | discount       |\n            | STEPPED_FIXED_GLOBAL_REWARD | credit reward  |\n            | VARIABLE_GLOBAL_REWARD      | gift card      |\n            | VARIABLE_GLOBAL_REWARD      | discount       |\n            | VARIABLE_GLOBAL_REWARD      | credit reward  |\n            | VARIABLE_CREDIT_REWARD      | credit reward  |";
+const scenario$m = "@author:derek\n@owner:derek\nFeature: Reward Exchange List\n\n    The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\n    It populates a list from the reward exchange rules set up on a given tenant.\n\n    Background:\n        Given a tenant with reward exchange rules\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no visible exchanges\n        Given a user with no visible exchanges\n        When they view the reward exchange\n        Then no exchange options are displayed\n        And they see an image of a present\n        And \"Redeem Rewards\" in bold\n        And \"Use your points to redeem rewards once they become available\" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutia\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no visible exchanges\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the reward exchange\n        Then they see the custom empty state\n\n    @motivating\n    @ui\n    Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\n        Given a user\n        When they load the reward exchange list\n        Then they see a loading Skeleton\n        And it has 8 skeleton cards\n        When the reward exchange rules have loaded\n        Then the skeleton is replaced with reward exchange options\n\n    @motivating\n    Scenario: An error banner appears when the reward exchange list fails to load\n        Given a user trying to view the reward exchange list\n        But it fails to load\n        Then an error banner is displayed\n        And it displays \"Unable to load reward exchange list. Please try again\"\n\n    @motivating\n    @ui\n    Scenario: The exchange progress bar progresses through the exchange process\n        Given a user who is eligible for the tenants reward exchange rules\n        When they view the reward exchange list\n        Then the process bar displays the following elements\n            | elements                                                           |\n            | Step 1 `Rewards` title in black                                    |\n            | Step 1 circle with green outline, white fill and number 1 in green |\n            | Step 2 `Select` title in grey                                      |\n            | Step 2 circle with grey fill and number 2 in white                 |\n            | Step 3 `Confirm` title in grey                                     |\n            | Step 3 circle with grey fill and number 3 in white                 |\n            | lines between all steps are greyed out                             |\n        When they continue to the selection page\n        Then the progress bar displays the following elements\n            | elements                                                           |\n            | Step 1 `Rewards` title in black                                    |\n            | Step 1 circle with white checkmark and green fill                  |\n            | Step 2 `Select` title in black                                     |\n            | Step 2 circle with green outline, white fill and number 2 in green |\n            | Step 3 `Confirm` title in grey                                     |\n            | Step 3 circle with grey fill and number 3 in white                 |\n            | Green line between step 1 and 2                                    |\n            | Grey line between step 2 and 3                                     |\n        When they continue to the confirmation page\n        Then the progress bar displays the following elements\n            | elements                                                           |\n            | Step 1 `Rewards` title in black                                    |\n            | Step 1 circle with white checkmark and green fill                  |\n            | Step 2 `Select` title in black                                     |\n            | Step 2 circle with white checkmark and green fill                  |\n            | Step 3 `Confirm` title in black                                    |\n            | Step 3 circle with green outline, white fill and number 3 in green |\n            | Green line between all steps                                       |\n        When they continue to the redemption page\n        Then the progress bar displays the following elements\n            | elements                                          |\n            | Step 1 `Rewards` title in black                   |\n            | Step 1 circle with white checkmark and green fill |\n            | Step 2 `Select` title in black                    |\n            | Step 2 circle with white checkmark and green fill |\n            | Step 3 `Confirm` title in black                   |\n            | Step 3 circle with white checkmark and green fill |\n            | Green line between all steps                      |\n\n    @motivating\n    Scenario: Users must choose a reward exchange option to continue to the selection page\n        Given a user who is eligible for the tenants reward exchange rules\n        When they view the reward exchange list\n        Then the 'Continue' button is disabled\n        When they select a reward exchange card\n        Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\n        And the continue button is no longer disabled\n        When they click \"Continue\"\n        Then they are brought to the selection page\n\n    @motivating\n    @ui\n    Scenario: Reward exchange rule names and images are used in the reward exchange cards\n        Given a tenant reward exchange rule\n        And it has name \"My Visa Exchange Rule\"\n        And it has an image\n        When a user views the reward exchange list\n        Then they see a exchange card with title \"My Visa Exchange Rule\"\n        And the exchange image on the left hand side of the card\n\n    @motivating\n    Scenario Outline: Reward exchange source values are displayed on reward exchange cards\n        Given a <type> reward exchange rule\n        When a user views the reward exchange list\n        Then they see <text> under the name on the exchange option cards\n        And the pretty values are localized to a user locale\n        Examples:\n            | type                        | text                                                                |\n            | FIXED_GLOBAL_REWARD         | the exchange source pretty value                                    |\n            | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\n            | VARIABLE_GLOBAL_REWARD      | the exchange source min pretty value to the source max pretty value |\n            | VARIABLE_CREDIT_REWARD      | the exchange source min pretty value to the source max pretty value |\n\n    @motivating\n    Scenario Outline: Reward exchange cards can display customized error messages\n        Given a reward exchange rule\n        And it has <availabilityPredicate>\n        And the reward exchange list has prop \"not-available-error\" with <value>\n        When the user views the reward exchange list\n        Then the card for the reward exchange rule is disabled\n        And <message> is displayed\n        Examples:\n            | availabilityPredicate                                         | value                                                                                                           | message                         |\n            | 'champion' in user.segments ? \"NOT_CHAMPION\" : true           | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} }        | Sorry must be a champion!       |\n            | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\n\n    @motivating\n    Scenario: Exchange options are disabled if they put a user over the W9 limit\n        Given a user who is approaching their W9 limit\n        And a reward exchange rule\n        And its destination reward has a US taxable value that would put the user over their limit\n        When they view the reward exchange list\n        Then the reward exchange card is disabled\n        And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\n        And the text is orange\n        And the icon is orange\n\n    @motivating\n    Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\n        Given a <type> reward exchange rule\n        But the user lacks enough credit to exchange for it\n        When they view the reward exchange list\n        Then the reward exchange card is disabled\n        And a <text> error message is displayed on to the right of a exclamation triangle icon\n        And the text is orange\n        And the icon is orange\n        Examples:\n            | type                        | text                            |\n            | FIXED_GLOBAL_REWARD         | {prettySourceValue} required    |\n            | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\n            | VARIABLE_GLOBAL_REWARD      | {prettySourceMinValue} required |\n            | VARIABLE_CREDIT_REWARD      | {prettySourceMinValue} required |\n\n    @motivating\n    Scenario: Users can go back to the Rewards page from the Select page\n        Given a user viewing the Select page\n        Then they see a \"Cancel\" text button\n        And a \"Continue to confirmation\" brand colour button in the bottom right corner\n        When they click \"Cancel\"\n        Then they return to the Rewards page\n\n    @motivating\n    Scenario: Users can go back to the Select Page from the Confirm page\n        Given a user viewing the Confirm page\n        Then they see a \"Back\" text button\n        And a \"Redeem\" brand colour button in the bottom right corner\n        When they click \"Back\"\n        Then they return to the Select Page\n\n    @motivating\n    Scenario: Reward rules with visibility predicates that evaluates to false are not shown\n        Given a tenant reward exchange rule with visibility predicates that evaluates to false\n        When a user views the reward exchange list\n        Then they do not see the card for that reward exchange rule\n\n    @motivating\n    Scenario Outline: Users can choose their reward option for variable rewards on the Select page\n        Given a <type> exchange rule\n        And it has the following fields\n            | fields      |\n            | name        |\n            | description |\n            | image       |\n        When a user views the reward exchange list\n        And they progress to the Select page for this exchange\n        Then they see the exchange rule image on the left hand side\n        And on the right hand side they see the following in this order from top to bottom\n            | elements                                                                                          |\n            | exchange name                                                                                     |\n            | exchange description                                                                              |\n            | select list with all exchange options using pretty values, destination reward above source reward |\n        Examples:\n            | type                        |\n            | STEPPED_FIXED_GLOBAL_REWARD |\n            | VARIABLE_GLOBAL_REWARD      |\n            | VARIABLE_CREDIT_REWARD      |\n\n    @motivating\n    Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\n        Given a \"FIXED_GLOBAL_REWARD\" exchange rule\n        And it has the following fields\n            | fields      |\n            | name        |\n            | description |\n            | image       |\n        When a user views the reward exchange list\n        And they progress to the Select page for this exchange\n        Then they see the exchange rule image on the left hand side\n        And on the right hand side they see the following in this order from top to bottom\n            | elements                                               |\n            | exchange name                                          |\n            | exchange source pretty value displayed in brand colour |\n            | exchange description                                   |\n\n    @motivating\n    Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\n        Given a <type> exchange rule\n        When a user views the reward exchange list\n        And they progress to the Select page for this exchange\n        Then they see a drop down with all the reward exchange selections\n        When they click on the drop down\n        But they are not eligible for all of the exchanges options <dueToReason>\n        Then the ineligble options are disabled\n        And under the source value is <text>\n        Examples:\n            | type                        | dueToReason                     | text                         |\n            | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\n            | VARIABLE_GLOBAL_REWARD      | due to insufficent source value | {prettySourceValue} required |\n            | VARIABLE_CREDIT_REWARD      | due to insufficent source value | {prettySourceValue} required |\n            | STEPPED_FIXED_GLOBAL_REWARD | W9                              | US Tax Limit                 |\n            | VARIABLE_GLOBAL_REWARD      | W9                              | US Tax Limit                 |\n            | VARIABLE_CREDIT_REWARD      | W9                              | US Tax Limit                 |\n\n    @motivating\n    Scenario Outline: The Confirm page allows users to view their exchange before committing\n        Given a <type> exchange rule\n        When a user views the reward exchange list\n        And they select the exchange\n        And they progress to Confirm page\n        Then they see a row with title \"Reward\"\n        And it contains the exchange name\n        And it contains the exchange image\n        And they <maySee> a row with title \"Reward Amount\"\n        And it <mayContain> <amountTitle>\n        And they see a row with title \"Cost to Redeem\"\n        And it contains the source reward pretty value in bolded text\n        Examples:\n            | type                        | maySee | mayContain      | amountTitle                  |\n            | FIXED_GLOBAL_REWARD         | don't  | doesn't contain | N/A                          |\n            | VARIABLE_GLOBAL_REWARD      | see    | contains        | the pretty destination value |\n            | STEPPED_FIXED_GLOBAL_REWARD | see    | contains        | the pretty destination value |\n            | VARIABLE_CREDIT_REWARD      | see    | contains        | the pretty destination value |\n\n    @motivating\n    Scenario: An error banner is displayed if an error occurs during redemeption\n        Given a user has selected a reward to exchange\n        And is on the confirmation page\n        When they click \"Redeem\"\n        But an error occurs\n        Then an error banner appears\n        And it contains details about the error\n        And the reward exchange is not completed\n\n    @motivating\n    Scenario: Confetti is displayed when a reward exchange succeeds\n        Given a user has selected a reward to exchange\n        And they are on the confirmation page\n        When they click \"Redeem\"\n        And the exchange is successful\n        Then they see confetti centered on the success page\n        And they see text describing what they exchanged for their new reward\n        And they see a \"Done\" brand colour button\n        When they click \"Done\"\n        Then they see the Rewards page\n\n    @motivating\n    Scenario: Fuel tank codes are shown when a reward exchange succeeds\n        Given a user has selected to exchange for a fuel tank reward\n        When they complete the reward exchange\n        And are on the success page\n        Then they see a textbox with their fuel tank code\n        And a clipboard icon\n        When they click the clipboard icon\n        Then their fuel tank code is copied to their clipboard\n\n    @motivating\n    Scenario Outline: Users can exchange for any type of reward\n        Given a <type> reward exchange rule for a <reward>\n        And a user who has enough source credit to exchange for the reward\n        When they go through the exchange flow\n        And exchange for their reward\n        Then their credit is exchanged for the <reward>\n        Examples:\n            | type                        | reward         |\n            | FIXED_GLOBAL_REWARD         | gift card      |\n            | FIXED_GLOBAL_REWARD         | fuel tank code |\n            | FIXED_GLOBAL_REWARD         | discount       |\n            | FIXED_GLOBAL_REWARD         | credit reward  |\n            | STEPPED_FIXED_GLOBAL_REWARD | gift card      |\n            | STEPPED_FIXED_GLOBAL_REWARD | discount       |\n            | STEPPED_FIXED_GLOBAL_REWARD | credit reward  |\n            | VARIABLE_GLOBAL_REWARD      | gift card      |\n            | VARIABLE_GLOBAL_REWARD      | discount       |\n            | VARIABLE_GLOBAL_REWARD      | credit reward  |\n            | VARIABLE_CREDIT_REWARD      | credit reward  |";
 
 const RewardExchangeList_stories = {
   title: "Components/Reward Exchange List",
   parameters: {
-    scenario: scenario$l,
+    scenario: scenario$m,
   },
 };
 const StoryBase = (props) => () => {
@@ -11196,12 +11289,12 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   Empty: Empty$2
 });
 
-const scenario$m = "@author:derek\n@owner:derek\nFeature: Program Explainer\n\n    @motivating\n    @ui\n    Scenario Outline: The program explainer wraps program explainer steps and aligns them\n        Given a program explainer component\n        And it has <number> program explainer steps as components\n        When a user views the program explainer\n        Then they see <number> steps aligned horizontally\n        And they have equal height/width\n        And equal padding in between\n        When they are viewed on a screen smaller than 500px\n        Then the steps stack vertically with equal padding in between\n        And they have equal width\n        But height may vary\n        Examples:\n            | number |\n            | 2      |\n            | 3      |\n            | 4      |\n\n    @motivating\n    @ui\n    Scenario: The program explainer displays a section header\n        Given a program explainer step with props\n            | prop   | value     |\n            | header | My Header |\n        And it has program explainer steps as children\n        When a user views the program explainer\n        Then they see \"My Header\" centered above the explainer steps\n\n    @motivating\n    @ui\n    Scenario: Colours are customizable\n        Given a program explainer with props\n            | prop             | value  |\n            | text-color       | purple |\n            | background-color | grey   |\n        When a user views the program explainer\n        Then the header is purple\n        And the background between steos is grey\n";
+const scenario$n = "@author:derek\n@owner:derek\nFeature: Program Explainer\n\n    @motivating\n    @ui\n    Scenario Outline: The program explainer wraps program explainer steps and aligns them\n        Given a program explainer component\n        And it has <number> program explainer steps as components\n        When a user views the program explainer\n        Then they see <number> steps aligned horizontally\n        And they have equal height/width\n        And equal padding in between\n        When they are viewed on a screen smaller than 500px\n        Then the steps stack vertically with equal padding in between\n        And they have equal width\n        But height may vary\n        Examples:\n            | number |\n            | 2      |\n            | 3      |\n            | 4      |\n\n    @motivating\n    @ui\n    Scenario: The program explainer displays a section header\n        Given a program explainer step with props\n            | prop   | value     |\n            | header | My Header |\n        And it has program explainer steps as children\n        When a user views the program explainer\n        Then they see \"My Header\" centered above the explainer steps\n\n    @motivating\n    @ui\n    Scenario: Colours are customizable\n        Given a program explainer with props\n            | prop             | value  |\n            | text-color       | purple |\n            | background-color | grey   |\n        When a user views the program explainer\n        Then the header is purple\n        And the background between steos is grey\n";
 
 const ProgramExplainer_stories = {
   title: "Components/Program Explainer",
   parameters: {
-    scenario: scenario$m,
+    scenario: scenario$n,
   },
 };
 const OneStep = () => {
@@ -11257,12 +11350,12 @@ const ProgramExplainer = /*#__PURE__*/Object.freeze({
   ProgramExplainerGeneric: ProgramExplainerGeneric
 });
 
-const scenario$n = "@author:derek\n@owner:derek\nFeature: Program Explainer Step\n\n    @motivating\n    @ui\n    Scenario: The program explainer step displays a icon, header and description\n        Given a program explainer step with props\n            | prop        | value                            |\n            | header      | My Header                        |\n            | description | My program explainer description |\n            | icon        | person-plus-fill                 |\n        When a user views the explainer step\n        Then they see an person icon with a + in the top left hand corner\n        And the icon is weight 300 brand colour\n        And below they see \"My Header\" in large bold font\n        And below they see \"My program explainer description\" in medium font\n        And the step background colour is weight 50 brand colour\n\n    @motivating\n    @ui\n    Scenario: The program explainer can display an image in place of an icon\n        Given a program explainer\n        And it has an \"image-url\" prop with a value of a valid url to an image\n        When a user views the explainer step\n        Then the image is displayed in place of an incon in the top left hand corner\n\n    @motivating\n    @ui\n    Scenario: Colours are customizable\n        Given a program explainer step with props\n            | prop             | value            |\n            | text-color       | purple           |\n            | background-color | grey             |\n        When a user views the explainer step\n        Then they see the step background is grey\n        And the header text is purple\n        And the description text is purple\n";
+const scenario$o = "@author:derek\n@owner:derek\nFeature: Program Explainer Step\n\n    @motivating\n    @ui\n    Scenario: The program explainer step displays a icon, header and description\n        Given a program explainer step with props\n            | prop        | value                            |\n            | header      | My Header                        |\n            | description | My program explainer description |\n            | icon        | person-plus-fill                 |\n        When a user views the explainer step\n        Then they see an person icon with a + in the top left hand corner\n        And the icon is weight 300 brand colour\n        And below they see \"My Header\" in large bold font\n        And below they see \"My program explainer description\" in medium font\n        And the step background colour is weight 50 brand colour\n\n    @motivating\n    @ui\n    Scenario: The program explainer can display an image in place of an icon\n        Given a program explainer\n        And it has an \"image-url\" prop with a value of a valid url to an image\n        When a user views the explainer step\n        Then the image is displayed in place of an incon in the top left hand corner\n\n    @motivating\n    @ui\n    Scenario: Colours are customizable\n        Given a program explainer step with props\n            | prop             | value            |\n            | text-color       | purple           |\n            | background-color | grey             |\n        When a user views the explainer step\n        Then they see the step background is grey\n        And the header text is purple\n        And the description text is purple\n";
 
 const ProgramExplainerStep_stories = {
   title: "Components/Program Explainer Step",
   parameters: {
-    scenario: scenario$n,
+    scenario: scenario$o,
   },
 };
 const ProgramExplainerStep = () => {
@@ -11279,12 +11372,12 @@ const ProgramExplainerStep$1 = /*#__PURE__*/Object.freeze({
   ProgramExplainerStepCustom: ProgramExplainerStepCustom
 });
 
-const scenario$o = "@author:derek\n@owner:logan\nFeature: Brand Configuration\n\n\t@motivating\n\tScenario: The brand components creates a colour pallet from a brand colour and applies it to children\n\t\tGiven a brand component with \"brand-color\" \"#4225c4\"\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the following css variables are set\n\t\t\t| variable                      | value                       |\n\t\t\t| --sl-color-primary-50         | hsla(251, 68%, 95%, 1)      |\n\t\t\t| --sl-color-primary-100        | hsla(251, 68%, 86%, 1)      |\n\t\t\t| --sl-color-primary-200        | hsla(251, 68%, 76%, 1)      |\n\t\t\t| --sl-color-primary-300        | hsla(251, 68%, 66%, 1)      |\n\t\t\t| --sl-color-primary-400        | hsla(251, 68%, 56%, 1)      |\n\t\t\t| --sl-color-primary-500        | hsla(251, 68%, 46%, 1)      |\n\t\t\t| --sl-color-primary-600        | hsla(251, 68%, 39%, 1)      |\n\t\t\t| --sl-color-primary-700        | hsla(251, 68%, 32%, 1)      |\n\t\t\t| --sl-color-primary-800        | hsla(251, 68%, 25%, 1)      |\n\t\t\t| --sl-color-primary-900        | hsla(251, 68%, 18%, 1)      |\n\t\t\t| --sl-color-primary-950        | hsla(251, 68%, 15%, 1)      |\n\t\t\t| --sl-focus-ring-color-primary | var(--sl-color-primary-100) |\n\t\t\t| --sl-input-border-color-focus | var(--sl-color-primary-500) |\n\t\t\t| --sl-color-primary-hue        | var(--sl-color-primary-500) |\n\t\tAnd they are applied to the children components\n\t\tBut they are not applied to any components outside of the brand component\n\t\tAnd they are not applied to any vanilla components\n\n\t@minutia\n\tScenario Outline: The brand colour can be hex, HSL or rgb\n\t\tGiven a brand component with \"brand-color\" <colour>\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the colour is used to create a brand palete\n\t\tAnd it is applied to the children components\n\t\tExamples:\n\t\t\t| colour                 |\n\t\t\t| #4225c4                |\n\t\t\t| rgb(66, 37, 196)       |\n\t\t\t| hsl(251, 68%, 46%)     |\n\t\t\t| hsla(251, 68%, 46%, 1) |\n\n\t@motivating\n\tScenario: The brand component can apply a brand font to children components\n\t\tGiven a brand component with \"brand-font\" \"Nunito Sans\"\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the following css variables are set\n\t\t\t| variable                 | value                |\n\t\t\t| --sl-font-sans           | \"Nunito Sans\", arial |\n\t\t\t| --sl-input-font-family   | \"Nunito Sans\", arial |\n\t\t\t| --sl-tooltip-font-family | \"Nunito Sans\", arial |\n\t\t\t| font-family              | \"Nunito Sans\", arial |\n\t\tAnd they are applied to the children components\n\t\tAnd the children component's text is \"Nunito Sans\"";
+const scenario$p = "@author:derek\n@owner:logan\nFeature: Brand Configuration\n\n\t@motivating\n\tScenario: The brand components creates a colour pallet from a brand colour and applies it to children\n\t\tGiven a brand component with \"brand-color\" \"#4225c4\"\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the following css variables are set\n\t\t\t| variable                      | value                       |\n\t\t\t| --sl-color-primary-50         | hsla(251, 68%, 95%, 1)      |\n\t\t\t| --sl-color-primary-100        | hsla(251, 68%, 86%, 1)      |\n\t\t\t| --sl-color-primary-200        | hsla(251, 68%, 76%, 1)      |\n\t\t\t| --sl-color-primary-300        | hsla(251, 68%, 66%, 1)      |\n\t\t\t| --sl-color-primary-400        | hsla(251, 68%, 56%, 1)      |\n\t\t\t| --sl-color-primary-500        | hsla(251, 68%, 46%, 1)      |\n\t\t\t| --sl-color-primary-600        | hsla(251, 68%, 39%, 1)      |\n\t\t\t| --sl-color-primary-700        | hsla(251, 68%, 32%, 1)      |\n\t\t\t| --sl-color-primary-800        | hsla(251, 68%, 25%, 1)      |\n\t\t\t| --sl-color-primary-900        | hsla(251, 68%, 18%, 1)      |\n\t\t\t| --sl-color-primary-950        | hsla(251, 68%, 15%, 1)      |\n\t\t\t| --sl-focus-ring-color-primary | var(--sl-color-primary-100) |\n\t\t\t| --sl-input-border-color-focus | var(--sl-color-primary-500) |\n\t\t\t| --sl-color-primary-hue        | var(--sl-color-primary-500) |\n\t\tAnd they are applied to the children components\n\t\tBut they are not applied to any components outside of the brand component\n\t\tAnd they are not applied to any vanilla components\n\n\t@minutia\n\tScenario Outline: The brand colour can be hex, HSL or rgb\n\t\tGiven a brand component with \"brand-color\" <colour>\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the colour is used to create a brand palete\n\t\tAnd it is applied to the children components\n\t\tExamples:\n\t\t\t| colour                 |\n\t\t\t| #4225c4                |\n\t\t\t| rgb(66, 37, 196)       |\n\t\t\t| hsl(251, 68%, 46%)     |\n\t\t\t| hsla(251, 68%, 46%, 1) |\n\n\t@motivating\n\tScenario: The brand component can apply a brand font to children components\n\t\tGiven a brand component with \"brand-font\" \"Nunito Sans\"\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the following css variables are set\n\t\t\t| variable                 | value                |\n\t\t\t| --sl-font-sans           | \"Nunito Sans\", arial |\n\t\t\t| --sl-input-font-family   | \"Nunito Sans\", arial |\n\t\t\t| --sl-tooltip-font-family | \"Nunito Sans\", arial |\n\t\t\t| font-family              | \"Nunito Sans\", arial |\n\t\tAnd they are applied to the children components\n\t\tAnd the children component's text is \"Nunito Sans\"";
 
 const SqmBrand_stories = {
   title: "Components/Brand",
   parameters: {
-    scenario: scenario$o,
+    scenario: scenario$p,
   },
 };
 const SampleComponents = () => (h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
@@ -11385,12 +11478,12 @@ const BrandStories = /*#__PURE__*/Object.freeze({
   Fonts: Fonts
 });
 
-const scenario$p = "@author:kutay\n@owner:kutay\nFeature: Card Feed\n\n\tThe Card Feed component displays Task Card components in a grid layout.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Card Feed component\n\n\t@motivating\n\tScenario: The Card Feed component displays Task Cards given as children slots\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tWhen the user views the Card Feed\n\t\tThen the task cards are displayed in a masonry layout\n\t\tWhen the card feed with grows or shrinks in width\n\t\tThen the number of columns adjust to the given width\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Card Feed component can have a maximum width\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tAnd has prop \"width\" has a provided <value>\n\t\tThen the task cards are displayed in a masonry layout\n\t\tWhen the card feed with grows or shrinks in width\n\t\tThen the number of columns adjust to the given width\n\t\tAnd the task cards do not exceed <width>\n\t\tExamples:\n\t\t\t| value | width |\n\t\t\t|       | 347px |\n\t\t\t| 200   | 200px |\n\t\t\t| 400   | 400px |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Card Feed component gap between task cards can be customized\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tAnd has prop \"gap\" has a provided <value>\n\t\tThen the task cards are displayed in a masonry layout\n\t\tAnd the gap between the columns is the <gap>\n\t\tExamples:\n\t\t\t| value | gap  |\n\t\t\t|       | 24px |\n\t\t\t| 20    | 20px |\n\t\t\t| 50    | 50px |";
+const scenario$q = "@author:kutay\n@owner:kutay\nFeature: Card Feed\n\n\tThe Card Feed component displays Task Card components in a grid layout.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Card Feed component\n\n\t@motivating\n\tScenario: The Card Feed component displays Task Cards given as children slots\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tWhen the user views the Card Feed\n\t\tThen the task cards are displayed in a masonry layout\n\t\tWhen the card feed with grows or shrinks in width\n\t\tThen the number of columns adjust to the given width\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Card Feed component can have a maximum width\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tAnd has prop \"width\" has a provided <value>\n\t\tThen the task cards are displayed in a masonry layout\n\t\tWhen the card feed with grows or shrinks in width\n\t\tThen the number of columns adjust to the given width\n\t\tAnd the task cards do not exceed <width>\n\t\tExamples:\n\t\t\t| value | width |\n\t\t\t|       | 347px |\n\t\t\t| 200   | 200px |\n\t\t\t| 400   | 400px |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Card Feed component gap between task cards can be customized\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tAnd has prop \"gap\" has a provided <value>\n\t\tThen the task cards are displayed in a masonry layout\n\t\tAnd the gap between the columns is the <gap>\n\t\tExamples:\n\t\t\t| value | gap  |\n\t\t\t|       | 24px |\n\t\t\t| 20    | 20px |\n\t\t\t| 50    | 50px |";
 
 const CardFeed_stories = {
   title: "Components/Card Feed",
   parameters: {
-    scenario: scenario$p,
+    scenario: scenario$q,
   },
 };
 const oneAction$1 = {
@@ -11627,12 +11720,12 @@ const CardFeed = /*#__PURE__*/Object.freeze({
   CardFeedGeneric: CardFeedGeneric
 });
 
-const scenario$q = "@author:kutay\n@owner:noah\nFeature: Portal Container\n\n\t@motivating\n\t@ui\n\tScenario: Horizontal content overflows, but does not stretch\n\t\tGiven there are two element in the container\n\t\tAnd the first is small\n\t\tAnd the second would stretch the container wider than it's parent\n\t\tThen the second one is clipped\n\t\tAnd the first one doesn't stretch\n\n\t@landmine\n\t@ui\n\tScenario: `max-width` is required for displaying as a row\n\t\tGiven I have `direction` to \"row\"\n\t\tAnd I have not set a `max-width`\n\t\tThen it displays as a column\n\n\t@motivating\n\t@ui\n\tScenario Outline: Content padding can be customized\n\t\tGiven prop \"padding\" has <value>\n\t\tThen <padding> is applied to content\n\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\n\t@motivating\n\t@ui\n\tScenario Outline: Gap between content elements can be customized\n\t\tGiven prop \"gap\" has <value>\n\t\tThen <gap> is applied to elements between content\n\n\t\tExamples:\n\t\t\t| value      | gap        |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@minutia\n\t@ui\n\tScenario: Content can be center aligned in horizontal view\n\t\tGiven I have supplied the prop \"center\"\n\t\tThen the content is center aligned\n\n\t@minutia\n\t@ui\n\tScenario: Content in the last row can span full width with display in horizontal view\n\t\tGiven I have `display` to \"flex\"\n\t\tThen the content is full width on the last row\n\n\t@motivating\n\t@ui\n\tScenario Outline: Content can be aligned along the x-axis\n\t\tGiven prop \"justify-content\" has <value>\n\t\tThen content within the container is aligned <alignment>\n\n\t\tExamples:\n\t\t\t| value         | alignment          |\n\t\t\t| none          | no alignment       |\n\t\t\t| start         | to the start       |\n\t\t\t| center        | to the center      |\n\t\t\t| end           | to the end         |\n\t\t\t| space-between | with space between |\n\t\t\t| space-around  | with space around  |\n\t\t\t| space-evenly  | with space evenly  |\n\n\n\t@motivating\n\t@ui\n\tScenario Outline: Component background color can be customized\n\t\tGiven a user is viewing the Portal Container component\n\t\tThen the default value is \"#ffffff00\"\n\t\tWhen the prop \"background-color\" has <value>\n\t\tThen the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| value                 | backgroundColor                     |\n\t\t\t| empty (default value) | var(--sl-color-neutral-0) (#ffffff) |\n\t\t\t| aquamarine            | #7fffd4                             |\n";
+const scenario$r = "@author:kutay\n@owner:noah\nFeature: Portal Container\n\n\t@motivating\n\t@ui\n\tScenario: Horizontal content overflows, but does not stretch\n\t\tGiven there are two element in the container\n\t\tAnd the first is small\n\t\tAnd the second would stretch the container wider than it's parent\n\t\tThen the second one is clipped\n\t\tAnd the first one doesn't stretch\n\n\t@landmine\n\t@ui\n\tScenario: `max-width` is required for displaying as a row\n\t\tGiven I have `direction` to \"row\"\n\t\tAnd I have not set a `max-width`\n\t\tThen it displays as a column\n\n\t@motivating\n\t@ui\n\tScenario Outline: Content padding can be customized\n\t\tGiven prop \"padding\" has <value>\n\t\tThen <padding> is applied to content\n\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\n\t@motivating\n\t@ui\n\tScenario Outline: Gap between content elements can be customized\n\t\tGiven prop \"gap\" has <value>\n\t\tThen <gap> is applied to elements between content\n\n\t\tExamples:\n\t\t\t| value      | gap        |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@minutia\n\t@ui\n\tScenario: Content can be center aligned in horizontal view\n\t\tGiven I have supplied the prop \"center\"\n\t\tThen the content is center aligned\n\n\t@minutia\n\t@ui\n\tScenario: Content in the last row can span full width with display in horizontal view\n\t\tGiven I have `display` to \"flex\"\n\t\tThen the content is full width on the last row\n\n\t@motivating\n\t@ui\n\tScenario Outline: Content can be aligned along the x-axis\n\t\tGiven prop \"justify-content\" has <value>\n\t\tThen content within the container is aligned <alignment>\n\n\t\tExamples:\n\t\t\t| value         | alignment          |\n\t\t\t| none          | no alignment       |\n\t\t\t| start         | to the start       |\n\t\t\t| center        | to the center      |\n\t\t\t| end           | to the end         |\n\t\t\t| space-between | with space between |\n\t\t\t| space-around  | with space around  |\n\t\t\t| space-evenly  | with space evenly  |\n\n\n\t@motivating\n\t@ui\n\tScenario Outline: Component background color can be customized\n\t\tGiven a user is viewing the Portal Container component\n\t\tThen the default value is \"#ffffff00\"\n\t\tWhen the prop \"background-color\" has <value>\n\t\tThen the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| value                 | backgroundColor                     |\n\t\t\t| empty (default value) | var(--sl-color-neutral-0) (#ffffff) |\n\t\t\t| aquamarine            | #7fffd4                             |\n";
 
 const PortalContainer_stories = {
   title: "Components/Microsite Container",
   parameters: {
-    scenario: scenario$q,
+    scenario: scenario$r,
   },
 };
 const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
@@ -11798,13 +11891,13 @@ 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\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#  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 scenario$r = scenario1 + scenario2 + scenario3 + scenario4;
+const scenario$s = scenario1 + scenario2 + scenario3 + scenario4;
 const RewardsTableCell_stories = {
   title: "Components/Rewards Table Cell",
   parameters: {
-    scenario: scenario$r,
+    scenario: scenario$s,
   },
 };
 const rewardsData$1 = {
@@ -12021,7 +12114,9 @@ const SourceCellDeletedUser = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
 };
 const SourceCellDeletedReferral = () => {
-  return (h("sqm-rewards-table-source-cell", { 
+  return (
+  // AL: TODO
+  h("sqm-rewards-table-source-cell", { 
     //@ts-ignore
     reward: { ...rewardsData$1, ...deletedReferral() }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
 };
@@ -12251,12 +12346,12 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   EmptyCell: EmptyCell$2
 });
 
-const scenario$s = "@owner:sam\n@author:sam\nFeature: Rewards Table\n\n    Shows a list of rewards as a table\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no rewards\n        Given a user with rewards\n        When they view the reward table\n        Then no rewards are displayed\n        And they see an image with a user icon\n        And \"View your rewards\" in bold\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutia\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no rewards\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the reward table\n        Then they see the custom empty state\n\n    @minutia\n    @ui\n    Scenario: The loading state is shown while rewards are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the \"loading\" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n        Given the user has <number of rewards>\n        And the table is configured to show <page limit> rewards per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of rewards\n        And the pagination button to go to the previous page is disabled on the first page of rewards\n        Examples:\n            | number of rewards | page limit | number of pages |\n            | 0                 | 4          | 1               |\n            | 1                 | 4          | 1               |\n            | 3                 | 4          | 1               |\n            | 5                 | 4          | 2               |\n            | 42                | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the reward table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile\n        Given a reward table with 4 columns\n        And prop \"hidden-columns\" with <hideColumnValue>\n        And a user with rewards\n        When they view the reward table\n        And their window size is below the tablet breakpoint\n        Then reward cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\n        Given the table is configured with \"program-id\"\n        Then only rewards from the program with \"program-id\" are shown\n\n    @landmine\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\n        There is no easy way for the backend to filter for \"classic\" programs,\n        thus we are filtering for rewards without programId's.\n\n        Given the \"program-id\" of the table is set to \"classic\"\n        Then rewards from classic programs are shown\n        And manual rewards are shown\n\n    @minutia\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with \"hide-labels\" set to \"true\"\n        Then the table is displayed without column headings";
+const scenario$t = "@owner:sam\n@author:sam\nFeature: Rewards Table\n\n    Shows a list of rewards as a table\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no rewards\n        Given a user with rewards\n        When they view the reward table\n        Then no rewards are displayed\n        And they see an image with a user icon\n        And \"View your rewards\" in bold\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutia\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no rewards\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the reward table\n        Then they see the custom empty state\n\n    @minutia\n    @ui\n    Scenario: The loading state is shown while rewards are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the \"loading\" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n        Given the user has <number of rewards>\n        And the table is configured to show <page limit> rewards per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of rewards\n        And the pagination button to go to the previous page is disabled on the first page of rewards\n        Examples:\n            | number of rewards | page limit | number of pages |\n            | 0                 | 4          | 1               |\n            | 1                 | 4          | 1               |\n            | 3                 | 4          | 1               |\n            | 5                 | 4          | 2               |\n            | 42                | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the reward table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile\n        Given a reward table with 4 columns\n        And prop \"hidden-columns\" with <hideColumnValue>\n        And a user with rewards\n        When they view the reward table\n        And their window size is below the tablet breakpoint\n        Then reward cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\n        Given the table is configured with \"program-id\"\n        Then only rewards from the program with \"program-id\" are shown\n\n    @landmine\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\n        There is no easy way for the backend to filter for \"classic\" programs,\n        thus we are filtering for rewards without programId's.\n\n        Given the \"program-id\" of the table is set to \"classic\"\n        Then rewards from classic programs are shown\n        And manual rewards are shown\n\n    @minutia\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with \"hide-labels\" set to \"true\"\n        Then the table is displayed without column headings";
 
 const RewardsTable_stories = {
   title: "Components/Rewards Table",
   parameters: {
-    scenario: scenario$s,
+    scenario: scenario$t,
   },
 };
 const loadingElement$1 = (h("div", { slot: "loading", style: { display: "contents" } },
@@ -12568,12 +12663,12 @@ const UseReferralTable = /*#__PURE__*/Object.freeze({
   ReferralTableFr: ReferralTableFr
 });
 
-const scenario$t = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\t\t| image-pos   | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value  | alignment     |\n\t\t\t| left   | left aligned  |\n\t\t\t| center | centered      |\n\t\t\t| right  | right aligned |\n\t\t\t| N/A    | centered      |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop         | value                                                              |\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header       | \"Klip Rewards\"                                                     |\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text  | \"Start earning\"                                                    |\n\t\t\t| layout       | \"overlay\"                                                          |\n\t\t\t| padding-text | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop            | value                                                              |\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header          | \"Klip Rewards\"                                                     |\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text     | \"Start earning\"                                                    |\n\t\t\t| layout          | \"overlay\"                                                          |\n\t\t\t| text-color      | <textColor>                                                        |\n\t\t\t| overlay-color   | <overlayColor>                                                     |\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\n\t\t\t| #1d0314   | #4baa1a      | 0              |\n\t\t\t| #211a27   | #aa481a      | 1              |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"columns\"                                                          |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements    |\n\t\t\t| header      |\n\t\t\t| description |\n\t\t\t| button      |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-pos        | <imagePos>                                                         |\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left     | top            |\n\t\t\t| right    | bottom         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop          | value                                                              |\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header        | \"Klip Rewards\"                                                     |\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text   | \"Start earning\"                                                    |\n\t\t\t| layout        | \"columns\"                                                          |\n\t\t\t| padding-text  | <paddingText>                                                      |\n\t\t\t| padding-image | <paddingImage>                                                     |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small   | xxx-small    |\n\t\t\t| xx-small    | xx-small     |\n\t\t\t| x-small     | x-small      |\n\t\t\t| small       | small        |\n\t\t\t| medium      | medium       |\n\t\t\t| large       | large        |\n\t\t\t| x-large     | x-large      |\n\t\t\t| xx-large    | xx-large     |\n\t\t\t| xxx-large   | xxx-large    |\n\t\t\t| xxxx-large  | xxxx-large   |\n\t\t\t| none        | none         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-percentage | <percent>                                                          |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25%     |\n\t\t\t| 42%     |\n\t\t\t| 66%     |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| text-color       | <textColor>                                                        |\n\t\t\t| background-color | <backgroundColor>                                                  |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b   | #ff7f7f         |\n\t\t\t| #1d0314   | #4baa1a         |\n\t\t\t| #211a27   | #aa481a         |";
+const scenario$u = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\t\t| image-pos   | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value  | alignment     |\n\t\t\t| left   | left aligned  |\n\t\t\t| center | centered      |\n\t\t\t| right  | right aligned |\n\t\t\t| N/A    | centered      |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop         | value                                                              |\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header       | \"Klip Rewards\"                                                     |\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text  | \"Start earning\"                                                    |\n\t\t\t| layout       | \"overlay\"                                                          |\n\t\t\t| padding-text | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop            | value                                                              |\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header          | \"Klip Rewards\"                                                     |\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text     | \"Start earning\"                                                    |\n\t\t\t| layout          | \"overlay\"                                                          |\n\t\t\t| text-color      | <textColor>                                                        |\n\t\t\t| overlay-color   | <overlayColor>                                                     |\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\n\t\t\t| #1d0314   | #4baa1a      | 0              |\n\t\t\t| #211a27   | #aa481a      | 1              |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"columns\"                                                          |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements    |\n\t\t\t| header      |\n\t\t\t| description |\n\t\t\t| button      |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-pos        | <imagePos>                                                         |\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left     | top            |\n\t\t\t| right    | bottom         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop          | value                                                              |\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header        | \"Klip Rewards\"                                                     |\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text   | \"Start earning\"                                                    |\n\t\t\t| layout        | \"columns\"                                                          |\n\t\t\t| padding-text  | <paddingText>                                                      |\n\t\t\t| padding-image | <paddingImage>                                                     |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small   | xxx-small    |\n\t\t\t| xx-small    | xx-small     |\n\t\t\t| x-small     | x-small      |\n\t\t\t| small       | small        |\n\t\t\t| medium      | medium       |\n\t\t\t| large       | large        |\n\t\t\t| x-large     | x-large      |\n\t\t\t| xx-large    | xx-large     |\n\t\t\t| xxx-large   | xxx-large    |\n\t\t\t| xxxx-large  | xxxx-large   |\n\t\t\t| none        | none         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-percentage | <percent>                                                          |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25%     |\n\t\t\t| 42%     |\n\t\t\t| 66%     |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| text-color       | <textColor>                                                        |\n\t\t\t| background-color | <backgroundColor>                                                  |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b   | #ff7f7f         |\n\t\t\t| #1d0314   | #4baa1a         |\n\t\t\t| #211a27   | #aa481a         |";
 
 const HeroImage_stories = {
   title: "Components/Hero Image",
   parameters: {
-    scenario: scenario$t,
+    scenario: scenario$u,
   },
 };
 const OverlayHeader = () => {
@@ -12646,12 +12741,12 @@ const HeroImage = /*#__PURE__*/Object.freeze({
   ColumnsCustomColors: ColumnsCustomColors
 });
 
-const scenario$u = "@author:kutay\n@owner:kutay\nFeature: Referral Card\n\n\tThe Referral Card component takes in two slots and displays them side by side.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Referral Card component\n\n\t@motivating\n\t@ui\n\tScenario: Referral Card component displays provided content in left and right slots side by side\n\t\tGiven a Referral Card component\n\t\tAnd a slot with the name \"left\"\n\t\tAnd a slot with the name \"right\"\n\t\tWhen the user views the referral card\n\t\tThen the slot contents are displayed the card with equal width\n\t\tWhen the component is scaled down to 499px\n\t\tThen the column layout switches to row layout\n\t\tAnd the \"left\" slot content is displayed above the \"right\" slot content\n\n\t@minutia\n\t@ui\n\tScenario: Left or right column content spans the whole card if there is no content in the other column\n\t\tGiven a Referral Card component\n\t\tAnd there content in one column\n\t\tAnd there is no content in the other column\n\t\tThen the column with content spans 100% of the card width\n\t\tAnd the column with content respects the container's padding\n\t\tAnd the column without content has zero width\n\n\t@motivating\n\t@ui\n\tScenario Outline: Referral Card component content can be vertically aligned start, center, end\n\t\tGiven a Referral Card component\n\t\tAnd a slot with the name \"left\"\n\t\tAnd a slot with the name \"right\"\n\t\tAnd the prop \"vertical-alignment\" has <value>\n\t\tThen slots contents are displayed inside the card\n\t\tAnd slots are vertically aligned to <alignment> of the card\n\t\tExamples:\n\t\t\t| value  | alignment  |\n\t\t\t| start  | the top    |\n\t\t\t| center | the center |\n\t\t\t| end    | the bottom |\n\t\t\t| N/A    | the top    |\n\n\t@ui\n\tScenario Outline: Container border can be toggled\n\t\tGiven a user is viewing the referral card component\n\t\tThen the default value for the prop \"include-border\" is \"true\"\n\t\tWhen \"include-border\" has <value>\n\t\tThen the referral card component's border <maybe> included\n\t\tExamples:\n\t\t\t| value            | maybe |\n\t\t\t| true             | is    |\n\t\t\t| false            | isn't |\n\t\t\t| empty (no value) | is    |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Component background color can be customized\n\t\tGiven a user is viewing the Referral Card component\n\t\tThen the default value is \"#ffffff\"\n\t\tWhen the prop \"background-color\" has <value>\n\t\tThen the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| value                 | backgroundColor                     |\n\t\t\t| empty (default value) | var(--sl-color-neutral-0) (#ffffff) |\n\t\t\t| aquamarine            | #7fffd4                             |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Container padding can be customized\n\t\tGiven a user is looking at the component\n\t\tThen the default values for \"padding-top\", \"padding-bottom\", \"padding-left\", \"padding-right\" is \"large\"\n\t\tWhen prop \"padding-top\" has <value>\n\t\tThen <padding> is applied to content\n\t\tAnd the same applies to \"padding-bottom\", \"padding-left\", \"padding-right\"\n\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |";
+const scenario$v = "@author:kutay\n@owner:kutay\nFeature: Referral Card\n\n\tThe Referral Card component takes in two slots and displays them side by side.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Referral Card component\n\n\t@motivating\n\t@ui\n\tScenario: Referral Card component displays provided content in left and right slots side by side\n\t\tGiven a Referral Card component\n\t\tAnd a slot with the name \"left\"\n\t\tAnd a slot with the name \"right\"\n\t\tWhen the user views the referral card\n\t\tThen the slot contents are displayed the card with equal width\n\t\tWhen the component is scaled down to 499px\n\t\tThen the column layout switches to row layout\n\t\tAnd the \"left\" slot content is displayed above the \"right\" slot content\n\n\t@minutia\n\t@ui\n\tScenario: Left or right column content spans the whole card if there is no content in the other column\n\t\tGiven a Referral Card component\n\t\tAnd there content in one column\n\t\tAnd there is no content in the other column\n\t\tThen the column with content spans 100% of the card width\n\t\tAnd the column with content respects the container's padding\n\t\tAnd the column without content has zero width\n\n\t@motivating\n\t@ui\n\tScenario Outline: Referral Card component content can be vertically aligned start, center, end\n\t\tGiven a Referral Card component\n\t\tAnd a slot with the name \"left\"\n\t\tAnd a slot with the name \"right\"\n\t\tAnd the prop \"vertical-alignment\" has <value>\n\t\tThen slots contents are displayed inside the card\n\t\tAnd slots are vertically aligned to <alignment> of the card\n\t\tExamples:\n\t\t\t| value  | alignment  |\n\t\t\t| start  | the top    |\n\t\t\t| center | the center |\n\t\t\t| end    | the bottom |\n\t\t\t| N/A    | the top    |\n\n\t@ui\n\tScenario Outline: Container border can be toggled\n\t\tGiven a user is viewing the referral card component\n\t\tThen the default value for the prop \"include-border\" is \"true\"\n\t\tWhen \"include-border\" has <value>\n\t\tThen the referral card component's border <maybe> included\n\t\tExamples:\n\t\t\t| value            | maybe |\n\t\t\t| true             | is    |\n\t\t\t| false            | isn't |\n\t\t\t| empty (no value) | is    |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Component background color can be customized\n\t\tGiven a user is viewing the Referral Card component\n\t\tThen the default value is \"#ffffff\"\n\t\tWhen the prop \"background-color\" has <value>\n\t\tThen the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| value                 | backgroundColor                     |\n\t\t\t| empty (default value) | var(--sl-color-neutral-0) (#ffffff) |\n\t\t\t| aquamarine            | #7fffd4                             |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Container padding can be customized\n\t\tGiven a user is looking at the component\n\t\tThen the default values for \"padding-top\", \"padding-bottom\", \"padding-left\", \"padding-right\" is \"large\"\n\t\tWhen prop \"padding-top\" has <value>\n\t\tThen <padding> is applied to content\n\t\tAnd the same applies to \"padding-bottom\", \"padding-left\", \"padding-right\"\n\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |";
 
 const ReferralCard_stories = {
   title: "Components/Referral Card",
   parameters: {
-    scenario: scenario$u,
+    scenario: scenario$v,
   },
 };
 const media = (slot) => {
@@ -12669,21 +12764,6 @@ 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" })),
@@ -12706,11 +12786,6 @@ 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),
@@ -12787,7 +12862,6 @@ const ReferralCard = /*#__PURE__*/Object.freeze({
   ImageAndShareButtons: ImageAndShareButtons,
   LimitWidth: LimitWidth,
   TimelineAndShareButtons: TimelineAndShareButtons,
-  OneTimeUsePromoCodes: OneTimeUsePromoCodes,
   StartAlignment: StartAlignment,
   CenterAlignment: CenterAlignment,
   EndAlignment: EndAlignment,
@@ -12805,11 +12879,11 @@ const scenarioTimeline = "@author:derek\n@owner:kutay\nFeature: Timeline\n\n
 
 const scenarioTimelineEntry = "@author:derek\n@owner:kutay\nFeature: Timeline Entry\n\n    @motivating\n    @ui\n    Scenario: Timeline entries have an icon, a reward and an entry desciption\n        Given an timeline entry with the following props\n            | prop   | value                                               |\n            | unit   | Visa Giftcard                                       |\n            | reward | 50$                                                 |\n            | desc   | Earn a 50$ Visa Giftcard for each referral you make |\n        When a user views the entry\n        Then they see a gift icon\n        And see \"$50 VISA GIFTCARRD\" to the right\n        And \"$50\" is bolded with x-large font size\n        And below they see \"Earn a 50$ Visa Giftcard for each referral you make\"\n\n    @motivating\n    @ui\n    Scenario Outline: Icon can either be a gift or a brand colour cirle\n        Given a timeline entry with \"icon\" <iconPropValue>\n        When a user views the entry\n        Then they see an <icon>\n        Examples:\n            | iconPropValue 1 | icon                |\n            | gift            | gift                |\n            | circle          | brand colour circle |\n            |                 | gift                |\n\n    @motivating\n    @ui\n    Scenario: A timeline entry can display a line to connect it to another entry\n        Given a timeline entry with \"line\" \"true\"\n        When a user views the entry\n        Then they see the entry\n        But it has a brand colour line connecting it to the next timeline entry\n";
 
-const scenario$v = scenarioTimeline + scenarioTimelineEntry;
+const scenario$w = scenarioTimeline + scenarioTimelineEntry;
 const Timeline_stories = {
   title: "Components/Timeline",
   parameters: {
-    scenario: scenario$v,
+    scenario: scenario$w,
   },
 };
 const TimelineWith1Reward = () => {
@@ -12882,12 +12956,12 @@ const Timeline = /*#__PURE__*/Object.freeze({
   TimelineWith4Rewards: TimelineWith4Rewards
 });
 
-const scenario$w = "@author:kutay\n@owner:kutay\nFeature: Image\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the image component\n\n\t@motivating\n\t@ui\n\tScenario: Image is displayed from URL\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tThen the image is displayed\n\t\tAnd it is centered\n\n\t@motivating\n\t@ui\n\tScenario Outline: Images can be aligned left, center or right\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"align\" has <value>\n\t\tThen the image is displayed\n\t\tAnd it is aligned to the <value>\n\t\tExamples:\n\t\t\t| value  |\n\t\t\t| left   |\n\t\t\t| center |\n\t\t\t| right  |\n\n\t@motivating\n\t@ui\n\tScenario: Image background can be assigned a color\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"background-color\" is provided a color\n\t\tThen the image is displayed\n\t\tAnd the background is the provided color\n\n\t@motivating\n\t@ui\n\tScenario: Image minimum height can be constrained\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided\n\t\tAnd prop \"min-height\" is given a minimum value\n\t\tThen the image is displayed\n\t\tAnd the container size changes\n\t\tThen the image does not shrink below its minimum height";
+const scenario$x = "@author:kutay\n@owner:kutay\nFeature: Image\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the image component\n\n\t@motivating\n\t@ui\n\tScenario: Image is displayed from URL\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tThen the image is displayed\n\t\tAnd it is centered\n\n\t@motivating\n\t@ui\n\tScenario Outline: Images can be aligned left, center or right\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"align\" has <value>\n\t\tThen the image is displayed\n\t\tAnd it is aligned to the <value>\n\t\tExamples:\n\t\t\t| value  |\n\t\t\t| left   |\n\t\t\t| center |\n\t\t\t| right  |\n\n\t@motivating\n\t@ui\n\tScenario: Image background can be assigned a color\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"background-color\" is provided a color\n\t\tThen the image is displayed\n\t\tAnd the background is the provided color\n\n\t@motivating\n\t@ui\n\tScenario: Image minimum height can be constrained\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided\n\t\tAnd prop \"min-height\" is given a minimum value\n\t\tThen the image is displayed\n\t\tAnd the container size changes\n\t\tThen the image does not shrink below its minimum height";
 
 const Image_stories = {
   title: "Components/Image",
   parameters: {
-    scenario: scenario$w,
+    scenario: scenario$x,
   },
 };
 const Image = () => {
@@ -12920,12 +12994,12 @@ const Image$1 = /*#__PURE__*/Object.freeze({
   MinimumHeight: MinimumHeight
 });
 
-const scenario$x = "@author:derek\n@owner:noah\nFeature: Titled Section\n\n    Background: The titled section has a label and content\n        Given a titled section\n        And it has a label\n        And it has content in the content slot\n\n    @motivating\n    @ui\n    Scenario: Text alignment defaults to left align but can be configured\n        Given the titled section has \"text-align\" <textAlignPropValue>\n        When a user views the titled section\n        Then the text in the label is <aligned>\n        And the text in the content is <aligned>\n        Examples:\n            | textAlignPropValue | aligned |\n            | center             | center  |\n            | left               | left    |\n            | right              | right   |\n            |                    | left    |\n\n    @minutia\n    @ui\n    Scenario: Label margin is configurable\n        Given the titled section has \"label-margin\" <marginPropValue>\n        When a user views the titled section\n        Then <marginPropValue> margin is between the label and content\n        Examples:\n            | marginPropValue | margin     |\n            | none            | no         |\n            | xxx-small       | xxx-small  |\n            | xx-small        | xx-small   |\n            | x-small         | x-small    |\n            | small           | small      |\n            | medium          | medium     |\n            | large           | large      |\n            | x-large         | x-large    |\n            | xx-large        | xx-large   |\n            | xxx-large       | xxx-large  |\n            | xxxx-large      | xxxx-large |\n            |                 | no         |\n\n    @minutia\n    @ui\n    Scenario Outline: Titled section padding is configurable\n        Given the titled section has \"padding\" <paddingPropValue>\n        When a user views the titled section\n        Then <paddingPropValue> padding is applied around the titled section\n        Examples:\n            | paddingPropValue | padding    |\n            | none             | no         |\n            | xxx-small        | xxx-small  |\n            | xx-small         | xx-small   |\n            | x-small          | x-small    |\n            | small            | small      |\n            | medium           | medium     |\n            | large            | large      |\n            | x-large          | x-large    |\n            | xx-large         | xx-large   |\n            | xxx-large        | xxx-large  |\n            | xxxx-large       | xxxx-large |\n            |                  | no         |";
+const scenario$y = "@author:derek\n@owner:noah\nFeature: Titled Section\n\n    Background: The titled section has a label and content\n        Given a titled section\n        And it has a label\n        And it has content in the content slot\n\n    @motivating\n    @ui\n    Scenario: Text alignment defaults to left align but can be configured\n        Given the titled section has \"text-align\" <textAlignPropValue>\n        When a user views the titled section\n        Then the text in the label is <aligned>\n        And the text in the content is <aligned>\n        Examples:\n            | textAlignPropValue | aligned |\n            | center             | center  |\n            | left               | left    |\n            | right              | right   |\n            |                    | left    |\n\n    @minutia\n    @ui\n    Scenario: Label margin is configurable\n        Given the titled section has \"label-margin\" <marginPropValue>\n        When a user views the titled section\n        Then <marginPropValue> margin is between the label and content\n        Examples:\n            | marginPropValue | margin     |\n            | none            | no         |\n            | xxx-small       | xxx-small  |\n            | xx-small        | xx-small   |\n            | x-small         | x-small    |\n            | small           | small      |\n            | medium          | medium     |\n            | large           | large      |\n            | x-large         | x-large    |\n            | xx-large        | xx-large   |\n            | xxx-large       | xxx-large  |\n            | xxxx-large      | xxxx-large |\n            |                 | no         |\n\n    @minutia\n    @ui\n    Scenario Outline: Titled section padding is configurable\n        Given the titled section has \"padding\" <paddingPropValue>\n        When a user views the titled section\n        Then <paddingPropValue> padding is applied around the titled section\n        Examples:\n            | paddingPropValue | padding    |\n            | none             | no         |\n            | xxx-small        | xxx-small  |\n            | xx-small         | xx-small   |\n            | x-small          | x-small    |\n            | small            | small      |\n            | medium           | medium     |\n            | large            | large      |\n            | x-large          | x-large    |\n            | xx-large         | xx-large   |\n            | xxx-large        | xxx-large  |\n            | xxxx-large       | xxxx-large |\n            |                  | no         |";
 
 const TitledSection_stories = {
   title: "Components/Titled Section",
   parameters: {
-    scenario: scenario$x,
+    scenario: scenario$y,
   },
 };
 const AlignLeft = () => {
@@ -13321,12 +13395,12 @@ const Scroll = /*#__PURE__*/Object.freeze({
   ShoelaceProps: ShoelaceProps
 });
 
-const scenario$y = "@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id \"test123\"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the \"sq:program-id\" event listener for the program section is removed\n    And the component does not use program-id \"test123\" to source its data\n    And falls back to the global program id";
+const scenario$z = "@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id \"test123\"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the \"sq:program-id\" event listener for the program section is removed\n    And the component does not use program-id \"test123\" to source its data\n    And falls back to the global program id";
 
 const Tabs_stories = {
   title: "Components/Tabs",
   parameters: {
-    scenario: scenario$y,
+    scenario: scenario$z,
   },
 };
 const SimpleTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
@@ -13826,12 +13900,12 @@ const Tabs = /*#__PURE__*/Object.freeze({
   RightTabs: RightTabs
 });
 
-const scenario$z = "@author:johan\n@owner:johan\nFeature: Share Code\n\n  The share code component is a box that allows users to see and copy their referral 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 share 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 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 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 share 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\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the share 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 share 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 scenario$A = "@author:johan\n@owner:johan\nFeature: Share Code\n\n  The share code component is a box that allows users to see and copy their referral 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 share 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 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 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 share 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\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the share 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 share 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 ShareCode_stories = {
   title: "Components/Share Code",
   parameters: {
-    scenario: scenario$z,
+    scenario: scenario$A,
   },
 };
 const ShareCode = () => {
@@ -13889,82 +13963,6 @@ 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",
@@ -13972,7 +13970,7 @@ const EmailRegistration_stories = {
   // scenario,
   },
 };
-const defaultProps$d = {
+const defaultProps$e = {
   states: {
     error: "",
     loading: false,
@@ -13991,59 +13989,59 @@ const defaultProps$d = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$f = () => h(EmailRegistrationView, Object.assign({}, defaultProps$d));
+const Default$g = () => h(EmailRegistrationView, Object.assign({}, defaultProps$e));
 const HasFirstNameLastName = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+  ...defaultProps$e,
   content: {
-    ...defaultProps$d.content,
+    ...defaultProps$e.content,
     includeName: true,
   },
 })));
 const WithSlots = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+  ...defaultProps$e,
   content: {
-    ...defaultProps$d.content,
+    ...defaultProps$e.content,
     topSlot: h("div", null, "Hello this is the top slot"),
     bottomSlot: h("div", null, "Hello this is the bottom slot"),
   },
 })));
 const NoBorder$1 = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+  ...defaultProps$e,
   content: {
-    ...defaultProps$d.content,
+    ...defaultProps$e.content,
     hideBorder: true,
   },
 })));
 const BackgroundColor$2 = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+  ...defaultProps$e,
   content: {
-    ...defaultProps$d.content,
+    ...defaultProps$e.content,
     backgroundColor: "aquamarine",
   },
 })));
 const Loading$4 = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+  ...defaultProps$e,
   states: {
     error: "",
     loading: true,
   },
 })));
-const Error$9 = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+const Error$8 = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps$e,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
   },
 })));
 const FraudError = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+  ...defaultProps$e,
   states: {
     error: "FRAUD",
     loading: false,
   },
 })));
 const EmptyEmailError = () => (h(EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$d,
+  ...defaultProps$e,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -14056,13 +14054,13 @@ const EmptyEmailError = () => (h(EmailRegistrationView, Object.assign({}, {
 const EmailRegistration = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': EmailRegistration_stories,
-  Default: Default$f,
+  Default: Default$g,
   HasFirstNameLastName: HasFirstNameLastName,
   WithSlots: WithSlots,
   NoBorder: NoBorder$1,
   BackgroundColor: BackgroundColor$2,
   Loading: Loading$4,
-  Error: Error$9,
+  Error: Error$8,
   FraudError: FraudError,
   EmptyEmailError: EmptyEmailError
 });
@@ -14075,7 +14073,7 @@ const CouponCode_stories = {
     scenario: scenario$B,
   },
 };
-const defaultProps$e = {
+const defaultProps$f = {
   tooltiptext: "Copied to Clipboard",
   copyString: "THANKSJANE125uv125",
   open: false,
@@ -14087,69 +14085,69 @@ const defaultProps$e = {
 const CouponCode = () => {
   return h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
 };
-const CustomTooltipText$2 = () => {
+const CustomTooltipText$1 = () => {
   return h("sqm-coupon-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
 };
-const CustomTooltipDuration$2 = () => {
+const CustomTooltipDuration$1 = () => {
   return (h("sqm-coupon-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
 };
-const TextAlignCenter$3 = () => {
+const TextAlignCenter$2 = () => {
   return h("sqm-coupon-code", { textAlign: "center" });
 };
-const TextAlignRight$3 = () => {
+const TextAlignRight$2 = () => {
   return h("sqm-coupon-code", { textAlign: "right" });
 };
-const CopyButton$3 = () => {
-  return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-outside" })));
+const CopyButton$2 = () => {
+  return (h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-outside" })));
 };
 const CopyButtonCustomLabel = () => {
-  return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
+  return (h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
 };
-const CopyButtonBelow$3 = () => {
-  return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-below" })));
+const CopyButtonBelow$2 = () => {
+  return (h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-below" })));
 };
 const CopyButtonBelowCustomLabel = () => {
-  return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
+  return (h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
 };
 const Loading$5 = () => {
-  return h(CouponCodeView, Object.assign({}, defaultProps$e, { loading: true }));
+  return h(CouponCodeView, Object.assign({}, defaultProps$f, { loading: true }));
 };
 const CopyButtonLoading = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { buttonStyle: "button-outside", loading: true })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { buttonStyle: "button-outside", loading: true })));
 };
 const CopyButtonBelowLoading = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { buttonStyle: "button-below", loading: true })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { buttonStyle: "button-below", loading: true })));
 };
 const ErrorGeneric = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
 };
 const ErrorPending = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { errorType: "info", error: true, errorText: "Your code will be available on April 24, 2023. Mark your calendar and come back then to redeem your reward!" })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "info", error: true, errorText: "Your code will be available on April 24, 2023. Mark your calendar and come back then to redeem your reward!" })));
 };
 const ErrorFullfillment = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
 };
 const ErrorCancelled = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { errorType: "warning", error: true, errorText: "This code has been cancelled. Please reach out to the Support team for help resolving this issue." })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "This code has been cancelled. Please reach out to the Support team for help resolving this issue." })));
 };
 const ErrorExpired = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { errorType: "warning", error: true, errorText: "Looks like this code has expired. Please reach out to the Support team for help resolving this issue." })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "Looks like this code has expired. Please reach out to the Support team for help resolving this issue." })));
 };
 const ErrorRedeemed = () => {
-  return (h(CouponCodeView, Object.assign({}, defaultProps$e, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
+  return (h(CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
 };
 
 const CouponCode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CouponCode_stories,
   CouponCode: CouponCode,
-  CustomTooltipText: CustomTooltipText$2,
-  CustomTooltipDuration: CustomTooltipDuration$2,
-  TextAlignCenter: TextAlignCenter$3,
-  TextAlignRight: TextAlignRight$3,
-  CopyButton: CopyButton$3,
+  CustomTooltipText: CustomTooltipText$1,
+  CustomTooltipDuration: CustomTooltipDuration$1,
+  TextAlignCenter: TextAlignCenter$2,
+  TextAlignRight: TextAlignRight$2,
+  CopyButton: CopyButton$2,
   CopyButtonCustomLabel: CopyButtonCustomLabel,
-  CopyButtonBelow: CopyButtonBelow$3,
+  CopyButtonBelow: CopyButtonBelow$2,
   CopyButtonBelowCustomLabel: CopyButtonBelowCustomLabel,
   Loading: Loading$5,
   CopyButtonLoading: CopyButtonLoading,
@@ -14170,21 +14168,21 @@ const LogoutCurrentUser_stories = {
     scenario: scenario$C,
   },
 };
-const defaultProps$f = {
+const defaultProps$g = {
   filledInEmailText: "Currently showing referral data for noah.clarke@saasquatch.com",
   onSwitchClick: () => console.log("clicked"),
   switchUserText: "not you?",
   loading: false,
   emailErrorText: "Error fetching email",
 };
-const Default$g = () => {
-  return h(LogoutCurrentUserView, Object.assign({}, defaultProps$f));
+const Default$h = () => {
+  return h(LogoutCurrentUserView, Object.assign({}, defaultProps$g));
 };
 
 const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LogoutCurrentUser_stories,
-  Default: Default$g
+  Default: Default$h
 });
 
 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     |";
@@ -14195,22 +14193,22 @@ const LinkButton_stories = {
     scenario: scenario$D,
   },
 };
-const defaultProps$g = {
+const defaultProps$h = {
   link: "https://example.com",
   openInNewTab: false,
   buttonText: "Button Text",
 };
-const Default$h = () => {
-  return h("sqm-link-button", Object.assign({}, defaultProps$g));
+const Default$i = () => {
+  return h("sqm-link-button", Object.assign({}, defaultProps$h));
 };
 const OpenInNewTab = () => {
-  return (h("sqm-link-button", Object.assign({}, { ...defaultProps$g, openInNewTab: true })));
+  return (h("sqm-link-button", Object.assign({}, { ...defaultProps$h, openInNewTab: true })));
 };
 
 const LinkButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LinkButton_stories,
-  Default: Default$h,
+  Default: Default$i,
   OpenInNewTab: OpenInNewTab
 });
 
@@ -14220,7 +14218,7 @@ const CloseButton_stories = {
   // scenario,
   },
 };
-const defaultProps$h = {};
+const defaultProps$i = {};
 const containerStyles = {
   position: "relative",
   width: "500px",
@@ -14228,22 +14226,22 @@ const containerStyles = {
   border: "1px solid black",
   padding: "25px",
 };
-const Default$i = () => {
-  return h(CloseButtonView, Object.assign({}, defaultProps$h));
+const Default$j = () => {
+  return h(CloseButtonView, Object.assign({}, defaultProps$i));
 };
 const InAContainer = () => {
   return (h("div", { style: containerStyles },
-    h(CloseButtonView, Object.assign({}, defaultProps$h))));
+    h(CloseButtonView, Object.assign({}, defaultProps$i))));
 };
 const CustomColor$1 = () => {
   return (h("div", { style: containerStyles },
-    h(CloseButtonView, Object.assign({}, { ...defaultProps$h, color: "blue" }))));
+    h(CloseButtonView, Object.assign({}, { ...defaultProps$i, color: "blue" }))));
 };
 
 const CloseButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CloseButton_stories,
-  Default: Default$i,
+  Default: Default$j,
   InAContainer: InAContainer,
   CustomColor: CustomColor$1
 });
@@ -14433,17 +14431,17 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
 const RadioCard_stories = {
   title: "Components/Radio Card",
 };
-const defaultProps$i = {
+const defaultProps$j = {
   selected: false,
   title: "Card Title",
   description: "Description text goes here",
   icon: "apple",
 };
 const DefaultView$1 = () => {
-  return h(RadioCardView, Object.assign({}, defaultProps$i));
+  return h(RadioCardView, Object.assign({}, defaultProps$j));
 };
 const Selected = () => {
-  return h(RadioCardView, Object.assign({}, defaultProps$i, { selected: true }));
+  return h(RadioCardView, Object.assign({}, defaultProps$j, { selected: true }));
 };
 
 const RadioCard = /*#__PURE__*/Object.freeze({
@@ -14456,13 +14454,13 @@ const RadioCard = /*#__PURE__*/Object.freeze({
 const ProgressBar_stories = {
   title: "Components/Progress Bar",
 };
-const defaultProps$j = {
+const defaultProps$k = {
   progress: 2,
   goal: 4,
   steps: true,
 };
 const TaxAndPayoutsProgressBar = () => {
-  return h(ProgressBar$2, Object.assign({}, defaultProps$j, { stageCount: 4, currentStage: 2 }));
+  return h(ProgressBar$2, Object.assign({}, defaultProps$k, { stageCount: 4, currentStage: 2 }));
 };
 
 const ProgressBar$1 = /*#__PURE__*/Object.freeze({
@@ -14481,7 +14479,7 @@ const Loading$6 = () => {
       },
     } }));
 };
-const Error$a = () => {
+const Error$9 = () => {
   return (h("sqm-payout-details-card", { demoData: {
       states: {
         error: true,
@@ -14522,7 +14520,7 @@ const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutDetailsCard_stories,
   Loading: Loading$6,
-  Error: Error$a,
+  Error: Error$9,
   NextPayout: NextPayout,
   PayoutToday: PayoutToday,
   ThresholdPayout: ThresholdPayout,
@@ -15132,325 +15130,6 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
   InvoiceTableDemoHook: InvoiceTableDemoHook
 });
 
-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$7 = () => {
-  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$7
-});
-
-const BaseRegistrationForm_stories = {
-  title: "Components/Microsite Base Registration",
-};
-const defaultProps$k = {
-  states: {
-    error: "",
-  },
-  callbacks: {
-    handleEmailSubmit: () => console.log("Submit!"),
-  },
-  content: {
-    pageLabel: "Register",
-    requiredFieldErrorMessage: "Cannot be empty",
-    invalidEmailErrorMessage: "Must be a valid email address",
-    googleButton: h("sl-button", null, "Register with Google"),
-    secondaryButton: (h("span", null,
-      "Already have an account?",
-      " ",
-      h("sl-button", { padding: "0", style: { width: "60px" }, size: "large", type: "text" }, "Sign in"),
-      " ")),
-  },
-};
-const errorProps$9 = {
-  ...defaultProps$k,
-  states: {
-    error: "Something went wrong. Please try again.",
-  },
-};
-const Default$j = () => {
-  return h(BaseRegistrationFormView, Object.assign({}, defaultProps$k));
-};
-const EmailError = () => {
-  return h(BaseRegistrationFormView, Object.assign({}, errorProps$9));
-};
-
-const BaseRegistrationForm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BaseRegistrationForm_stories,
-  Default: Default$j,
-  EmailError: EmailError
-});
-
-const PortalRegistrationForm_stories = {
-  title: "Components/Microsite Portal Register",
-};
-const defaultProps$l = {
-  states: {
-    error: "",
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
-};
-const errorProps$a = {
-  states: {
-    error: "Something went wrong. Please try again.",
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
-  },
-};
-const loadingProps$7 = {
-  states: {
-    error: "",
-    loading: true,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
-};
-const slottedProps$1 = {
-  states: {
-    error: "",
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
-    formData: (h("div", null,
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
-  },
-};
-const Default$k = () => h(PortalRegistrationFormView, Object.assign({}, defaultProps$l));
-const RegisterWithError$1 = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps$a)));
-const RegisterLoading$1 = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps$7)));
-const FieldsHidden$1 = () => {
-  return (h("sqm-portal-register", { demoData: {
-      states: {
-        error: "",
-        loading: true,
-        registrationFormState: {},
-        confirmPassword: true,
-        hideInputs: true,
-        loginPath: "/login",
-      },
-    } }));
-};
-const SlottedInputs$1 = () => (h(PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
-const TermsAndConditions$3 = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$l, { content: {
-    ...defaultProps$l.content,
-    terms: (h("p", null,
-      "By signing up you agree to the",
-      " ",
-      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
-  } })));
-
-const PortalRegistrationForm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': PortalRegistrationForm_stories,
-  Default: Default$k,
-  RegisterWithError: RegisterWithError$1,
-  RegisterLoading: RegisterLoading$1,
-  FieldsHidden: FieldsHidden$1,
-  SlottedInputs: SlottedInputs$1,
-  TermsAndConditions: TermsAndConditions$3
-});
-
-const PortalGoogleRegistrationForm_stories = {
-  title: "Components/Microsite Google Register",
-};
-const defaultProps$m = {
-  states: {
-    error: "",
-    loading: false,
-    confirmPassword: false,
-    hideInputs: false,
-    showNameFields: true,
-    loginPath: "/login",
-    hidePasswords: true,
-    registrationFormState: {
-      initialData: {
-        email: "testuser@example.com",
-      },
-    },
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    passwordField: null,
-    formData: (h("div", null,
-      " ",
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
-  },
-};
-const errorProps$b = {
-  ...defaultProps$m,
-  states: {
-    error: "Something went wrong. Please try again.",
-    loading: false,
-    confirmPassword: false,
-    hideInputs: false,
-    loginPath: "/login",
-    hidePasswords: true,
-    registrationFormState: {
-      initialData: {
-        email: "testuser@example.com",
-      },
-    },
-  },
-};
-const loadingProps$8 = {
-  ...defaultProps$m,
-  states: {
-    error: "",
-    loading: true,
-    hideInputs: false,
-    loginPath: "/login",
-    confirmPassword: false,
-    hidePasswords: true,
-    registrationFormState: {
-      initialData: {
-        email: "testuser@example.com",
-      },
-    },
-  },
-};
-const Default$l = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$m)));
-const RegisterWithError$2 = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps$b)));
-const RegisterLoading$2 = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps$8)));
-const TermsAndConditions$4 = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps$m, { content: {
-    ...defaultProps$m.content,
-    terms: (h("p", null,
-      "By signing up you agree to the",
-      " ",
-      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
-  } })));
-
-const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': PortalGoogleRegistrationForm_stories,
-  Default: Default$l,
-  RegisterWithError: RegisterWithError$2,
-  RegisterLoading: RegisterLoading$2,
-  TermsAndConditions: TermsAndConditions$4
-});
-
 /**
  *
  * Themes
@@ -15463,7 +15142,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$m = `
+const Default$k = `
  // No CSS
 `;
 const Orangey = `
@@ -15497,7 +15176,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$m,
+  Default: Default$k,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18096,7 +17775,6 @@ const stories = [
   InvoiceTableCells,
   UseInvoiceTableCells,
   ShareButton,
-  Pagination,
   ShareLink,
   BigStat,
   Leaderboard,
@@ -18142,6 +17820,7 @@ const stories = [
   ReferralIframe$1,
   NameFields$1,
   CheckboxField,
+  MarketingEmailsCheckbox,
   DropdownField,
   InputField,
   RewardExchangeList,
@@ -18165,8 +17844,6 @@ const stories = [
   Tabs,
   ShareCode$1,
   CouponCode$1,
-  ReferralCode$1,
-  ReferralCodes$1,
   LogoutCurrentUser,
   LinkButton,
   EmailRegistration,
@@ -18177,9 +17854,7 @@ const stories = [
   TaxFormSlots,
   PayoutDetailsCard,
   BankingInfoForm,
-  BaseRegistrationForm,
-  PortalRegistrationForm,
-  PortalGoogleRegistrationFormStories,
+  NewPortalRegistrationForm,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {