npm - @saasquatch/mint-components - Versions diffs - 1.7.3-0 → 1.7.3-2 - Mend

@saasquatch/mint-components 1.7.3-0 → 1.7.3-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

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

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { a as commonjsGlobal, u as useMemo, j as useState, f as useEffect, c as createCommonjsModule, m as h$1 } from './stencil-hooks.module-14b87f98.js';
-import './global-f52ccc56.js';
+import './global-91edfca0.js';
 import { h as hn, v as vn, e as setUserIdentity, d as dist, z as ze, k as setProgramId } from './index.module-99d8522e.js';
 import './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
@@ -17,12 +17,12 @@ import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.j
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-2d740794.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-414bcb19.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-eb765b9c.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-5a91d65e.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-97097335.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-41afcace.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-8ba6a73e.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-0df781f6.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-1db4fae6.js';
-import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-e72b97e8.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-efa44888.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-cdbf99dc.js';
+import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-723687ca.js';
+import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-6dc295a1.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-ab89c6cc.js';
 /**
@@ -1441,7 +1441,7 @@ var _createEmotion = createEmotion({
 function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function a$1(n,t){return t||(t=n.slice(0)),n.raw=t,n}var l,s,u,c$1=css(l||(l=a$1(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function d$1(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i$1({},n,((o={})[e]=[].concat(n[e]||[],[{story:i$1({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function p$1(n){return {story:n.default,subs:function(n,t){if(null==n)return {};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(n,t){var o,r;if(n){var e=decodeURIComponent(n).split("-"),i=e[1],a=e[2],l=null==t||null==(o=t[e[0]])?void 0:o.find(function(n){return n.story.title===i}),s=null==l||null==(r=l.subs)?void 0:r[a],u={key:n,story:s,parent:null==l?void 0:l.story,label:null==s?void 0:s.name};return u.key&&u.story&&u.parent&&u.label?u:void 0}}function y$1(l,y){var m=y.h,g=void 0===m?h:m,b=y.title,x=void 0===b?"Stencilbook":b,h$1=y.homepage,v=void 0===h$1?g("h3",null,"Select a story!"):h$1,w=y.addons,k=void 0===w?[]:w,S=useMemo(function(){return l.map(p$1).reduce(d$1,{_:[]})},l),C=decodeURIComponent(window.location.hash).replace("#",""),z=useState(f(C,S)),O=z[0],j=z[1],I=null==O?void 0:O.key,R=useState(!0),U=R[0],_=R[1],B=useState(!1),L=B[0],T=B[1],q=function(){return g("div",{class:"dynamic-display-wrapper"},g("button",{class:L?"active":"",onClick:function(){return T(function(n){return !n})}},"Toggle Dark Background"),g("button",{class:U?"active":"",onClick:function(){return _(function(n){return !n})}},"Toggle Sidebar"))},A=css(s||(s=a$1(["\n    max-width: ",";\n    margin-left: ",";\n  "])),"1124px",U?"250px":"0px"),D=css(u||(u=a$1(["\n    display: none;\n  "])));document.body.style.backgroundColor=L?"#232323":"#fafafa";var N=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return g(o,{story:i$1({},t)},g(n,null))}},null==t?void 0:t.story);return g(o,null)},P=function(){return g("div",{class:"story-book-outer-div"},g("div",{class:"story-div "+(U?"":D)},g("div",{class:"header",onClick:function(){j(void 0);}},g("h2",null,x)),g("ul",{class:"parentStoryList"},Object.keys(S).sort().map(function(n){return g("div",{class:"group-wrapper"},"_"!==n&&g("h4",{class:"group-header"},n),S[n].map(function(t){return g("li",{class:"parentStory"},g("details",{style:{marginBottom:"10px"}},g("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"-"+t.story.title+"-"+o,i=t.subs[o].storyName||lodash_startcase(o);return g("div",{class:"subStory "+(I===e?"selected":"")},g("a",{onClick:function(){return function(n){window.location.hash=encodeURIComponent(n),j(f(n,S));}(e)}},i))})))}))}))),g(q,null),g("div",{class:"component "+A},!I&&v,I&&g("div",null,g("h3",null,O.label),g(N,{selected:O}))))};return {class:c$1,children:g(P,null),View:P,selected:O}}
-const scenario = "@author:noah\n@owner:noah\nFeature: Share Button\n\n  The share button redirects users to a platform where they can share their referral link\n\n  @motivating\n  @ui\n  Scenario Outline: Share button displays for various platforms\n    Given the share button's medium prop is \"<medium>\"\n    And the button's child is text saying \"BUTTON_TEXT\"\n    When the share button is rendered\n    Then the button has text \"BUTTON_TEXT\"\n    And the button is <colour>\n    And it displays an <icon> beside the text\n    And clicking the button redirects to an appropriate link\n    Examples:\n      | medium        | colour       | icon               |\n      | facebook      | #1877f2      | facebook logo      |\n      | twitter       | #000000      | twitter x logo     |\n      | email         | #666666      | envelope           |\n      | direct        | brand colour | paper plane        |\n      | linkedin      | #0077b5      | linkedIn logo      |\n      | sms           | #34DA50      | chat bubble        |\n      | fbmessenger   | #0084ff      | messenger logo     |\n      | whatsapp      | #25d366      | whatsapp logo      |\n      | linemessenger | #00B300      | linemessenger logo |\n      | pinterest     | #e60023      | pinterest logo     |\n\n  @minutia\n  @ui\n  Scenario Outline: Default icons can be overwritten\n    Given a share button for any medium with <iconPropValue>\n    When the share button is rendered\n    Then it displays a <iconPropValue> instead of the share mediums default icon\n    Examples:\n      | iconPropValue |\n      | basket        |\n      | bluetooth     |\n      | bandaid       |\n\n  @motivating\n  @ui\n  Scenario Outline: Default share medium colours can be overwritten\n    Given a share button for any medium with <backgroundColourPropValue>\n    When the share button is rendered\n    Then the share button is <backgroundColourPropValue>\n    Examples:\n      | backgroundColourPropValue |\n      | blue                      |\n      | black                     |\n      | green                     |\n\n  @minutia\n  @ui\n  Scenario Outline: Share medium icons and text can be hidden\n    Given a share button with <prop> <value>\n    When the share button is rendered\n    Then <element> is hidden\n    Examples:\n      | prop     | value | element |\n      | hideicon | true  | icon    |\n      | hidetext | true  | text    |\n\n  @minutia\n  @ui\n  Scenario Outline: Icons can be on either side of the text\n    Given a share button with <iconslotPropValue>\n    When the share button is rendered\n    Then the icon is displayed to the <direction> of the text\n    Examples:\n      | iconslotPropValue | direction |\n      | suffix            | right     |\n      | prefix            | left      |\n      | prefix            | left      |\n\n  @minutia\n  Scenario: Unsupported browsers hide native share buttons\n    Given the share button's medium prop is \"direct\"\n    And your browser does not support the Web Share API\n    Then the share button is hidden\n\n  @minutia\n  Scenario: SMS share buttons are hidden on non Android and iOS devices\n    Given the share button's medium is \"sms\"\n    And the share button is being viewed on a device which is not an Android or iOS device\n    Then the share button is hidden\n\n  @motivating\n  Scenario: Facebook share buttons uses SquatchAndroid sharing features\n    Given the share button's medium is \"facebook\"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is available\n    Then tapping the share button opens the phone's Facebook app\n    And a share activity is opened with the share link prefilled\n\n  @motivating\n  Scenario: SquatchAndroid falls back to the Facebook website if no app is available\n    Given the share button's medium is \"facebook\"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is not available\n    Then tapping the share button opens the the Facebook mobile site in the device's browser\n    And a share activity is opened with the share link prefilled\n\n  @minutia\n  Scenario: A supplied program ID is used if available\n    Given the program id is supplied to the component in the \"programId\" prop\n    Then the program ID in the \"programId\" prop is used to retrieve share links\n\n  @minutia\n  Scenario: The program ID is automatically fetched from context\n    Given the program id is not supplied to the component in the \"programId\" prop\n    Then the program ID is retrieved from context";
+const scenario = "@author:noah\n@owner:noah\nFeature: Share Button\n\n  The share button redirects users to a platform where they can share their referral link\n\n  @motivating\n  @ui\n  Scenario Outline: Share button displays for various platforms\n    Given the share button's medium prop is \"<medium>\"\n    And the button's child is text saying \"BUTTON_TEXT\"\n    When the share button is rendered\n    Then the button has text \"BUTTON_TEXT\"\n    And the button is <colour>\n    And it displays an <icon> beside the text\n    And clicking the button redirects to an appropriate link\n    Examples:\n      | medium        | colour       | icon               |\n      | facebook      | #1877f2      | facebook logo      |\n      | twitter       | #1da1f2      | twitter logo       |\n      | email         | #666666      | envelope           |\n      | direct        | brand colour | paper plane        |\n      | linkedin      | #0077b5      | linkedIn logo      |\n      | sms           | #34DA50      | chat bubble        |\n      | fbmessenger   | #0084ff      | messenger logo     |\n      | whatsapp      | #25d366      | whatsapp logo      |\n      | linemessenger | #00B300      | linemessenger logo |\n      | pinterest     | #e60023      | pinterest logo     |\n\n  @minutia\n  @ui\n  Scenario Outline: Default icons can be overwritten\n    Given a share button for any medium with <iconPropValue>\n    When the share button is rendered\n    Then it displays a <iconPropValue> instead of the share mediums default icon\n    Examples:\n      | iconPropValue |\n      | basket        |\n      | bluetooth     |\n      | bandaid       |\n\n  @motivating\n  @ui\n  Scenario Outline: Default share medium colours can be overwritten\n    Given a share button for any medium with <backgroundColourPropValue>\n    When the share button is rendered\n    Then the share button is <backgroundColourPropValue>\n    Examples:\n      | backgroundColourPropValue |\n      | blue                      |\n      | black                     |\n      | green                     |\n\n  @minutia\n  @ui\n  Scenario Outline: Share medium icons and text can be hidden\n    Given a share button with <prop> <value>\n    When the share button is rendered\n    Then <element> is hidden\n    Examples:\n      | prop     | value | element |\n      | hideicon | true  | icon    |\n      | hidetext | true  | text    |\n\n  @minutia\n  @ui\n  Scenario Outline: Icons can be on either side of the text\n    Given a share button with <iconslotPropValue>\n    When the share button is rendered\n    Then the icon is displayed to the <direction> of the text\n    Examples:\n      | iconslotPropValue | direction |\n      | suffix            | right     |\n      | prefix            | left      |\n      | prefix            | left      |\n\n  @minutia\n  Scenario: Unsupported browsers hide native share buttons\n    Given the share button's medium prop is \"direct\"\n    And your browser does not support the Web Share API\n    Then the share button is hidden\n\n  @minutia\n  Scenario: SMS share buttons are hidden on non Android and iOS devices\n    Given the share button's medium is \"sms\"\n    And the share button is being viewed on a device which is not an Android or iOS device\n    Then the share button is hidden\n\n  @motivating\n  Scenario: Facebook share buttons uses SquatchAndroid sharing features\n    Given the share button's medium is \"facebook\"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is available\n    Then tapping the share button opens the phone's Facebook app\n    And a share activity is opened with the share link prefilled\n\n  @motivating\n  Scenario: SquatchAndroid falls back to the Facebook website if no app is available\n    Given the share button's medium is \"facebook\"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is not available\n    Then tapping the share button opens the the Facebook mobile site in the device's browser\n    And a share activity is opened with the share link prefilled\n\n  @minutia\n  Scenario: A supplied program ID is used if available\n    Given the program id is supplied to the component in the \"programId\" prop\n    Then the program ID in the \"programId\" prop is used to retrieve share links\n\n  @minutia\n  Scenario: The program ID is automatically fetched from context\n    Given the program id is not supplied to the component in the \"programId\" prop\n    Then the program ID is retrieved from context";
 const ShareButton_stories = {
   title: "Components/Share Button",
@@ -1524,7 +1524,8 @@ const AllMediums = () => {
     h("sqm-share-button", { medium: "linkedin" },
       h("span", null, "Linkedin")),
     h("br", null),
-    h("sqm-share-button", { medium: "twitter" }),
+    h("sqm-share-button", { medium: "twitter" },
+      h("span", null, "Twitter")),
     h("br", null),
     h("sqm-share-button", { medium: "pinterest" },
       h("span", null, "Pinterest")),
@@ -3768,7 +3769,7 @@ const Dashboard = () => {
             gap: "xxx-large",
             minWidth: "150px",
           }),
-            h(ShareButtonView, Object.assign({}, twitterButtonProps), "Post about us on X"),
+            h(ShareButtonView, Object.assign({}, twitterButtonProps), "Tweet about us"),
             h(ShareButtonView, Object.assign({}, facebookButtonProps), "Share on Facebook"),
             h(ShareButtonView, Object.assign({}, linkedinButtonProps), "Post on Linkedin"))),
         }))))));
@@ -3913,13 +3914,13 @@ const NewPortal = /*#__PURE__*/Object.freeze({
   Activity: Activity
 });
-const referralWidget = "<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-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      <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 referralWidget = "<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-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                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\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 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 Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\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 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                Tweet about us\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 Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\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 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 Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\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";
+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        Tweet about us\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";
 const instantAccessFriendCouponWidget = "<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>\n  <sqm-referral-card\n    vertical-alignment=\"start\"\n    padding-bottom=\"small\"\n    padding-left=\"x-large\"\n    padding-right=\"x-large\"\n    padding-top=\"small\"\n    slot=\"secondary-column\"\n  >\n    <sqm-portal-container\n      gap=\"large\"\n      direction=\"column\"\n      display=\"flex\"\n      justify-content=\"center\"\n      max-width=\"100%\"\n      padding=\"none\"\n      slot=\"header\"\n    >\n      <sqm-titled-section\n        text-align=\"center\"\n        label-margin=\"xxx-small\"\n        padding=\"none\"\n      >\n        <h1 slot=\"label\">You got &#x24;50 off thanks to a friend!</h1>\n        <p slot=\"content\">\n          <span> Use this reward to get &#x24;50 off your next purchase. </span>\n        </p>\n      </sqm-titled-section>\n\n      <sqm-coupon-code copy-button-style=\"button-outside\"></sqm-coupon-code>\n    </sqm-portal-container>\n\n    <sqm-portal-footer\n      slot=\"footer\"\n      show-powered-by=\"true\"\n      padding-bottom=\"none\"\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>\n  </sqm-referral-card>\n</sqm-hero>\n";
@@ -3927,9 +3928,9 @@ const instantAccessReferrerRegistrationWidget = "<sqm-hero\n  background=\"https
 const instantAccessFriendRegistrationWidget = "<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  ><sqm-referred-registration\n    slot=\"secondary-column\"\n    register-label=\"Get $50 off\"\n    padding-bottom=\"small\"\n    padding-left=\"x-large\"\n    padding-right=\"x-large\"\n    padding-top=\"small\"\n    ><sqm-titled-section\n      text-align=\"center\"\n      label-margin=\"small\"\n      padding=\"none\"\n      slot=\"top\"\n      ><h1 slot=\"label\">You got &#x24;50 off thanks to a friend!</h1>\n      <p slot=\"content\">\n        <span>Use this reward to get &#x24;50 off your next purchase.</span>\n      </p>\n    </sqm-titled-section>\n    <div slot=\"bottom\">\n      <p style=\"text-align: center\">*Valid on purchases of &#x24;75 or more</p>\n      <sqm-portal-footer\n        slot=\"footer\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\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>\n    </div> </sqm-referred-registration\n></sqm-hero>\n";
-const paypalReferralWidget = "<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      <sqp-account-details\n        schedule-header-text=\"Schedule\"\n        integration-alert-text=\"Looks like this feature is turned off at the moment. Come back later to see if it’s enabled. \"\n        integration-alert-header=\"PayPal payouts are currently disabled\"\n        details-header-text=\"Payout details\"\n        pay-pal-account-header-text=\"PayPal account\"\n        connect-pay-pal-description-text=\"Connect your PayPal account to automatically receive payments/cash rewards.\"\n        connect-pay-pal-account-button-text=\"Connect account\"\n        w-9-tax-label=\"Awaiting W-9 tax form\"\n        upcoming-payment-label=\"Upcoming\"\n        recent-payment-label=\"Recent payment\"\n        other-currencies-label=\"other currencies\"\n        next-payout-label=\"Next payout\"\n        next-payment-label=\"Next payment\"\n        header-text=\"PayPal account\"\n        edit-text=\"Edit\"\n        account-label=\"Account\"\n        success-message=\"Success!\"\n        submit-pay-pal-account-button-text=\"Connect account\"\n        pay-pal-email-label-help-text=\"Enter the email used for your PayPal account.\"\n        pay-pal-email-label=\"PayPal email\"\n        modal-connect-pay-pal-account-header=\"Connect PayPal account\"\n        disconnect-account-header-text=\"Disconnect account\"\n        disconnect-account-description-text=\"You will not be able to receive payments if you disconnect your PayPal account.\"\n      ></sqp-account-details>\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-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      <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          <sqp-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-blocked-text=\"Payout blocked on {date}.\"\n            reward-on-hold-text=\"Payout on hold and in review since {date}.\"\n            reward-paid-out-text=\"Paid out on {date}.\"\n            reward-payout-failed-text=\"This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on {date}.\"\n            reward-payout-in-progress-text=\"Payout processing started on {date}.\"\n            reward-received-text=\"Reward received on\"\n            reward-refunded-text=\"Payout refunded on {date}.\"\n            reward-returned-text=\"The email you provided does not link to an existing PayPal account. Payout expired on {date}.\"\n            reward-reversed-text=\"Payout reversed on {date}.\"\n            reward-unclaimed-text=\"The email you provided does not link to an existing PayPal account. Payout expires on {date}.\"\n            status-long-text=\"{status, select, INPROGRESS {In Progress} TRANSFERRED {Transferred} AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} REDEEMED {Redeemed on} PENDING {Available on} EXPIRED {Reward expired on} SUCCESS {Paid out on} FAILED {This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on} PAYPAL_PENDING {Payout process started on} UNCLAIMED {The email you provided does not link to an existing PayPal account. Payout expires on} ONHOLD {Payout on hold and in review since} REFUNDED {Payout refunded on} RETURNED {Payout returned on} REVERSED {Payout reversed on} BLOCKED {Payout blocked on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} EXPIRED {Expired} REDEEMED {Redeemed} PENDING {Pending} SUCCESS {Paid Out} FAILED {Failed} PAYPAL_PENDING {In progress} UNCLAIMED {Unclaimed} ONHOLD {In progress} REFUNDED {Refunded} RETURNED {Returned} REVERSED {Reversed} BLOCKED {Blocked} other {Not available}  }\"\n          ></sqp-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 paypalReferralWidget = "<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      <sqp-account-details\n        schedule-header-text=\"Schedule\"\n        integration-alert-text=\"Looks like this feature is turned off at the moment. Come back later to see if it’s enabled. \"\n        integration-alert-header=\"PayPal payouts are currently disabled\"\n        details-header-text=\"Payout details\"\n        pay-pal-account-header-text=\"PayPal account\"\n        connect-pay-pal-description-text=\"Connect your PayPal account to automatically receive payments/cash rewards.\"\n        connect-pay-pal-account-button-text=\"Connect account\"\n        w-9-tax-label=\"Awaiting W-9 tax form\"\n        upcoming-payment-label=\"Upcoming\"\n        recent-payment-label=\"Recent payment\"\n        other-currencies-label=\"other currencies\"\n        next-payout-label=\"Next payout\"\n        next-payment-label=\"Next payment\"\n        header-text=\"PayPal account\"\n        edit-text=\"Edit\"\n        account-label=\"Account\"\n        success-message=\"Success!\"\n        submit-pay-pal-account-button-text=\"Connect account\"\n        pay-pal-email-label-help-text=\"Enter the email used for your PayPal account.\"\n        pay-pal-email-label=\"PayPal email\"\n        modal-connect-pay-pal-account-header=\"Connect PayPal account\"\n        disconnect-account-header-text=\"Disconnect account\"\n        disconnect-account-description-text=\"You will not be able to receive payments if you disconnect your PayPal account.\"\n      ></sqp-account-details>\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-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                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\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          <sqp-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-blocked-text=\"Payout blocked on {date}.\"\n            reward-on-hold-text=\"Payout on hold and in review since {date}.\"\n            reward-paid-out-text=\"Paid out on {date}.\"\n            reward-payout-failed-text=\"This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on {date}.\"\n            reward-payout-in-progress-text=\"Payout processing started on {date}.\"\n            reward-received-text=\"Reward received on\"\n            reward-refunded-text=\"Payout refunded on {date}.\"\n            reward-returned-text=\"The email you provided does not link to an existing PayPal account. Payout expired on {date}.\"\n            reward-reversed-text=\"Payout reversed on {date}.\"\n            reward-unclaimed-text=\"The email you provided does not link to an existing PayPal account. Payout expires on {date}.\"\n            status-long-text=\"{status, select, INPROGRESS {In Progress} TRANSFERRED {Transferred} AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} REDEEMED {Redeemed on} PENDING {Available on} EXPIRED {Reward expired on} SUCCESS {Paid out on} FAILED {This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on} PAYPAL_PENDING {Payout process started on} UNCLAIMED {The email you provided does not link to an existing PayPal account. Payout expires on} ONHOLD {Payout on hold and in review since} REFUNDED {Payout refunded on} RETURNED {Payout returned on} REVERSED {Payout reversed on} BLOCKED {Payout blocked on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} EXPIRED {Expired} REDEEMED {Redeemed} PENDING {Pending} SUCCESS {Paid Out} FAILED {Failed} PAYPAL_PENDING {In progress} UNCLAIMED {Unclaimed} ONHOLD {In progress} REFUNDED {Refunded} RETURNED {Returned} REVERSED {Reversed} BLOCKED {Blocked} other {Not available}  }\"\n          ></sqp-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 paypalMonoWidget = "<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      <sqp-account-details\n        schedule-header-text=\"Schedule\"\n        integration-alert-text=\"Looks like this feature is turned off at the moment. Come back later to see if it’s enabled. \"\n        integration-alert-header=\"PayPal payouts are currently disabled\"\n        details-header-text=\"Payout details\"\n        pay-pal-account-header-text=\"PayPal account\"\n        connect-pay-pal-description-text=\"Connect your PayPal account to automatically receive payments/cash rewards.\"\n        connect-pay-pal-account-button-text=\"Connect account\"\n        w-9-tax-label=\"Awaiting W-9 tax form\"\n        upcoming-payment-label=\"Upcoming\"\n        recent-payment-label=\"Recent payment\"\n        other-currencies-label=\"other currencies\"\n        next-payout-label=\"Next payout\"\n        next-payment-label=\"Next payment\"\n        header-text=\"PayPal account\"\n        edit-text=\"Edit\"\n        account-label=\"Account\"\n        success-message=\"Success!\"\n        submit-pay-pal-account-button-text=\"Connect account\"\n        pay-pal-email-label-help-text=\"Enter the email used for your PayPal account.\"\n        pay-pal-email-label=\"PayPal email\"\n        modal-connect-pay-pal-account-header=\"Connect PayPal account\"\n        disconnect-account-header-text=\"Disconnect account\"\n        disconnect-account-description-text=\"You will not be able to receive payments if you disconnect your PayPal account.\"\n      ></sqp-account-details>\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 Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\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              <sqp-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-blocked-text=\"Payout blocked on {date}.\"\n                reward-on-hold-text=\"Payout on hold and in review since {date}.\"\n                reward-paid-out-text=\"Paid out on {date}.\"\n                reward-payout-failed-text=\"This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on {date}.\"\n                reward-payout-in-progress-text=\"Payout processing started on {date}.\"\n                reward-received-text=\"Reward received on\"\n                reward-refunded-text=\"Payout refunded on {date}.\"\n                reward-returned-text=\"The email you provided does not link to an existing PayPal account. Payout expired on {date}.\"\n                reward-reversed-text=\"Payout reversed on {date}.\"\n                reward-unclaimed-text=\"The email you provided does not link to an existing PayPal account. Payout expires on {date}.\"\n                status-long-text=\"{status, select, INPROGRESS {In Progress} TRANSFERRED {Transferred} AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} REDEEMED {Redeemed on} PENDING {Available on} EXPIRED {Reward expired on} SUCCESS {Paid out on} FAILED {This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on} PAYPAL_PENDING {Payout process started on} UNCLAIMED {The email you provided does not link to an existing PayPal account. Payout expires on} ONHOLD {Payout on hold and in review since} REFUNDED {Payout refunded on} RETURNED {Payout returned on} REVERSED {Payout reversed on} BLOCKED {Payout blocked on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} EXPIRED {Expired} REDEEMED {Redeemed} PENDING {Pending} SUCCESS {Paid Out} FAILED {Failed} PAYPAL_PENDING {In progress} UNCLAIMED {Unclaimed} ONHOLD {In progress} REFUNDED {Refunded} RETURNED {Returned} REVERSED {Reversed} BLOCKED {Blocked} other {Not available}  }\"\n              ></sqp-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              <sqp-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                pending-scheduled=\"Until\"\n                pending-unhandled=\"Fulfillment error\"\n                pending-us-tax=\"W-9 required\"\n                reward-blocked-text=\"Payout blocked on\"\n                reward-on-hold-text=\"Payout on hold and in review since\"\n                reward-paid-out-text=\"Paid out on\"\n                reward-payout-failed-text=\"This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on\"\n                reward-payout-in-progress-text=\"Payout processing started on\"\n                reward-refunded-text=\"Payout refunded on\"\n                reward-returned-text=\"The email you provided does not link to an existing PayPal account. Payout expired on\"\n                reward-reversed-text=\"Payout reversed on\"\n                reward-unclaimed-text=\"The email you provided does not link to an existing PayPal account. Payout expires on\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} EXPIRED {Expired} REDEEMED {Redeemed} PENDING {Pending} SUCCESS {Paid Out} FAILED {Failed} PAYPAL_PENDING {In progress} UNCLAIMED {Unclaimed} ONHOLD {In progress} REFUNDED {Refunded} RETURNED {Returned} REVERSED {Reversed} BLOCKED {Blocked} other {Not available}  }\"\n              ></sqp-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 paypalMonoWidget = "<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      <sqp-account-details\n        schedule-header-text=\"Schedule\"\n        integration-alert-text=\"Looks like this feature is turned off at the moment. Come back later to see if it’s enabled. \"\n        integration-alert-header=\"PayPal payouts are currently disabled\"\n        details-header-text=\"Payout details\"\n        pay-pal-account-header-text=\"PayPal account\"\n        connect-pay-pal-description-text=\"Connect your PayPal account to automatically receive payments/cash rewards.\"\n        connect-pay-pal-account-button-text=\"Connect account\"\n        w-9-tax-label=\"Awaiting W-9 tax form\"\n        upcoming-payment-label=\"Upcoming\"\n        recent-payment-label=\"Recent payment\"\n        other-currencies-label=\"other currencies\"\n        next-payout-label=\"Next payout\"\n        next-payment-label=\"Next payment\"\n        header-text=\"PayPal account\"\n        edit-text=\"Edit\"\n        account-label=\"Account\"\n        success-message=\"Success!\"\n        submit-pay-pal-account-button-text=\"Connect account\"\n        pay-pal-email-label-help-text=\"Enter the email used for your PayPal account.\"\n        pay-pal-email-label=\"PayPal email\"\n        modal-connect-pay-pal-account-header=\"Connect PayPal account\"\n        disconnect-account-header-text=\"Disconnect account\"\n        disconnect-account-description-text=\"You will not be able to receive payments if you disconnect your PayPal account.\"\n      ></sqp-account-details>\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                Tweet about us\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 Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\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              <sqp-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-blocked-text=\"Payout blocked on {date}.\"\n                reward-on-hold-text=\"Payout on hold and in review since {date}.\"\n                reward-paid-out-text=\"Paid out on {date}.\"\n                reward-payout-failed-text=\"This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on {date}.\"\n                reward-payout-in-progress-text=\"Payout processing started on {date}.\"\n                reward-received-text=\"Reward received on\"\n                reward-refunded-text=\"Payout refunded on {date}.\"\n                reward-returned-text=\"The email you provided does not link to an existing PayPal account. Payout expired on {date}.\"\n                reward-reversed-text=\"Payout reversed on {date}.\"\n                reward-unclaimed-text=\"The email you provided does not link to an existing PayPal account. Payout expires on {date}.\"\n                status-long-text=\"{status, select, INPROGRESS {In Progress} TRANSFERRED {Transferred} AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} REDEEMED {Redeemed on} PENDING {Available on} EXPIRED {Reward expired on} SUCCESS {Paid out on} FAILED {This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on} PAYPAL_PENDING {Payout process started on} UNCLAIMED {The email you provided does not link to an existing PayPal account. Payout expires on} ONHOLD {Payout on hold and in review since} REFUNDED {Payout refunded on} RETURNED {Payout returned on} REVERSED {Payout reversed on} BLOCKED {Payout blocked on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} EXPIRED {Expired} REDEEMED {Redeemed} PENDING {Pending} SUCCESS {Paid Out} FAILED {Failed} PAYPAL_PENDING {In progress} UNCLAIMED {Unclaimed} ONHOLD {In progress} REFUNDED {Refunded} RETURNED {Returned} REVERSED {Reversed} BLOCKED {Blocked} other {Not available}  }\"\n              ></sqp-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              <sqp-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                pending-scheduled=\"Until\"\n                pending-unhandled=\"Fulfillment error\"\n                pending-us-tax=\"W-9 required\"\n                reward-blocked-text=\"Payout blocked on\"\n                reward-on-hold-text=\"Payout on hold and in review since\"\n                reward-paid-out-text=\"Paid out on\"\n                reward-payout-failed-text=\"This payout will be retried up to 3 times. If it still fails it will be retried in the next payout cycle. Last attempted on\"\n                reward-payout-in-progress-text=\"Payout processing started on\"\n                reward-refunded-text=\"Payout refunded on\"\n                reward-returned-text=\"The email you provided does not link to an existing PayPal account. Payout expired on\"\n                reward-reversed-text=\"Payout reversed on\"\n                reward-unclaimed-text=\"The email you provided does not link to an existing PayPal account. Payout expires on\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} EXPIRED {Expired} REDEEMED {Redeemed} PENDING {Pending} SUCCESS {Paid Out} FAILED {Failed} PAYPAL_PENDING {In progress} UNCLAIMED {Unclaimed} ONHOLD {In progress} REFUNDED {Refunded} RETURNED {Returned} REVERSED {Reversed} BLOCKED {Blocked} other {Not available}  }\"\n              ></sqp-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";
 function Buttons({ callbacks, states, template }) {
   return (h("div", null,
@@ -7616,6 +7617,11 @@ const errorProps$5 = {
     gotoNextPage: () => console.log("next page"),
     failed: () => console.log("failed"),
   },
+  content: {
+    verifyEmailText: "Verify your email",
+    verifySuccessText: "Your email has been verified and you are being redirected. If you are not redirected, please click Continue.",
+    verifyInvalidText: "The email verification code is invalid or has expired, please try again.",
+  },
 };
 const verifiedProps = {
   states: {
@@ -7630,6 +7636,7 @@ const verifiedProps = {
     gotoNextPage: () => console.log("next page"),
     failed: () => console.log("failed"),
   },
+  content: {},
 };
 const EmailVerificationWithError$1 = () => (h(PortalVerifyEmailView, Object.assign({}, errorProps$5)));
 const EmailVerificationSuccess$1 = () => (h(PortalVerifyEmailView, Object.assign({}, verifiedProps)));
@@ -9750,15 +9757,15 @@ 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 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";
+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                        >Tweet about us</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";
-const portalTemplateWithDashboard = "<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://res.cloudinary.com/saasquatch/image/upload/v1683589787/Portal%20Assets/photo-1599676821464-3555954838dc.jpg\"\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)?\">\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=\"/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                    ><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\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 portalTemplateWithDashboard = "<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://res.cloudinary.com/saasquatch/image/upload/v1683589787/Portal%20Assets/photo-1599676821464-3555954838dc.jpg\"\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)?\">\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=\"/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                    ><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                        >Tweet about us</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\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 multiProgramTemplate = "<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-1\">\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)?\">\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-program-menu>\n              <sl-menu-item value=\"referral-program-1\"\n                >Referral Program 1</sl-menu-item\n              >\n              <sl-menu-item value=\"referral-program-2\"\n                >Referral Program 2</sl-menu-item\n              >\n            </sqm-program-menu>\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=\"/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-program-switch>\n                  <template program-id=\"referral-program-1\">\n                    <sqb-widget\n                      widget-type=\"p/referral-program-1/w/referrerWidget\"\n                      track-loads=\"true\"\n                    ></sqb-widget>\n                  </template>\n                  <template program-id=\"referral-program-2\">\n                    <sqb-widget\n                      widget-type=\"p/referral-program-2/w/referrerWidget\"\n                      track-loads=\"true\"\n                    ></sqb-widget>\n                  </template>\n                </sqb-program-switch>\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=\"/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 multiProgramTemplateWithDashboard = "<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-1\">\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    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\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-program-menu>\n              <sl-menu-item value=\"referral-program-1\"\n                >Referral Program 1</sl-menu-item\n              >\n              <sl-menu-item value=\"referral-program-2\"\n                >Referral Program 2</sl-menu-item\n              >\n            </sqm-program-menu>\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=\"/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=\"/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 multiProgramTemplateWithDashboard = "<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-1\">\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    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\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-program-menu>\n              <sl-menu-item value=\"referral-program-1\"\n                >Referral Program 1</sl-menu-item\n              >\n              <sl-menu-item value=\"referral-program-2\"\n                >Referral Program 2</sl-menu-item\n              >\n            </sqm-program-menu>\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=\"/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                        >Tweet about us</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=\"/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 dashboardTemplate = "<sqm-portal-container direction=\"column\" padding=\"xxx-large\" 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 fallback=\"Anonymous User\"></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 direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n    ><sqm-text slot=\"label\"> <h2>Partner and Profit</h2> </sqm-text\n    ><sqm-text slot=\"content\">\n      <p>\n        Get rewarded for referring potential customers to SaaSquatch. Earn\n        commission for each successful lead you 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\"> <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\"> <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\"> <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 medium=\"twitter\" size=\"medium\" pill=\"true\"\n        >Post about us on X</sqm-share-button\n      ><sqm-share-button medium=\"facebook\" size=\"medium\" pill=\"true\"\n        >Share on Facebook</sqm-share-button\n      ></sqm-portal-container\n    ></sqm-titled-section\n  ></sqm-portal-container\n>\n";
+const dashboardTemplate = "<sqm-portal-container direction=\"column\" padding=\"xxx-large\" 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 fallback=\"Anonymous User\"></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 direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n    ><sqm-text slot=\"label\"> <h2>Partner and Profit</h2> </sqm-text\n    ><sqm-text slot=\"content\">\n      <p>\n        Get rewarded for referring potential customers to SaaSquatch. Earn\n        commission for each successful lead you 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\"> <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\"> <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\"> <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 medium=\"twitter\" size=\"medium\" pill=\"true\"\n        >Tweet about us</sqm-share-button\n      ><sqm-share-button medium=\"facebook\" size=\"medium\" pill=\"true\"\n        >Share on Facebook</sqm-share-button\n      ></sqm-portal-container\n    ></sqm-titled-section\n  ></sqm-portal-container\n>\n";
 const leadSubmitTemplate = "<sqm-referral-iframe></sqm-referral-iframe>\n";
@@ -9788,15 +9795,15 @@ const ReferralIframeReadme = "# sqm-referral-iframe\n\n\n\n<!-- Auto Generated B
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\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; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                                                  |\n| `emailLabel`   | `email-label`   |                                                                   | `string`                                                                                                                                                                                    | `\"Email\"`                                                    |\n| `headerText`   | `header-text`   |                                                                   | `string`                                                                                                                                                                                    | `\"Enter your email below to receive a password reset link.\"` |\n| `loginPath`    | `login-path`    |                                                                   | `string`                                                                                                                                                                                    | `\"/login\"`                                                   |\n| `loginText`    | `login-text`    | Sign in link text                                                 | `string`                                                                                                                                                                                    | `\"Sign In\"`                                                  |\n| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`                                           |\n| `submitLabel`  | `submit-label`  |                                                                   | `string`                                                                                                                                                                                    | `\"Request Password Reset\"`                                   |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-forgot-password --> sqm-form-message\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
-const RegisterReadme = "# sqm-portal-register\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                       | Attribute                         | Description                                                                                                                                                                                            | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                           |\n| ------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |\n| `confirmPassword`              | `confirm-password`                |                                                                                                                                                                                                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                           |\n| `confirmPasswordLabel`         | `confirm-password-label`          |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Confirm Password\"`              |\n| `demoData`                     | --                                |                                                                                                                                                                                                        | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState: RegistrationFormState; disablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; }; }` | `undefined`                       |\n| `disablePasswordValidation`    | `disable-password-validation`     |                                                                                                                                                                                                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                           |\n| `emailLabel`                   | `email-label`                     |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Email\"`                         |\n| `hideInputs`                   | `hide-inputs`                     | Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes \"email\" and \"password\" for this form to succeed. | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                           |\n| `invalidEmailErrorMessage`     | `invalid-email-error-message`     | The message to be displayed when the email used is invalid or blocked.                                                                                                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Must be a valid email address\"` |\n| `loginLabel`                   | `login-label`                     |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Sign in\"`                       |\n| `loginPath`                    | `login-path`                      | Redirect participants to this page after clicking the login button.                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"/login\"`                        |\n| `networkErrorMessage`          | `network-error-message`           | The message to be displayed when a the form submission fails unexpectedly.                                                                                                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Network request failed.\"`       |\n| `nextPage`                     | `next-page`                       | Redirect participants to this page from their verification email                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"/\"`                             |\n| `pageLabel`                    | `page-label`                      |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Register\"`                      |\n| `passwordLabel`                | `password-label`                  |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Password\"`                      |\n| `passwordMismatchErrorMessage` | `password-mismatch-error-message` | The message to be displayed when password inputs do not match.                                                                                                                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Passwords do not match.\"`       |\n| `redirectPath`                 | `redirect-path`                   | The page that participants are redirected to from the verification email.                                                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"/verifyEmail\"`                  |\n| `requiredFieldErrorMessage`    | `required-field-error-message`    | The message to be displayed when a required field is not filled.                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Cannot be empty\"`               |\n| `submitLabel`                  | `submit-label`                    |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `\"Register\"`                      |\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- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const RegisterReadme = "# sqm-portal-register\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                       | Attribute                         | Description                                                                                                                                                                                            | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Default                                            |\n| ------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |\n| `confirmPassword`              | `confirm-password`                |                                                                                                                                                                                                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `false`                                            |\n| `confirmPasswordLabel`         | `confirm-password-label`          |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Confirm Password\"`                               |\n| `demoData`                     | --                                |                                                                                                                                                                                                        | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState: RegistrationFormState; disablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }` | `undefined`                                        |\n| `disablePasswordValidation`    | `disable-password-validation`     |                                                                                                                                                                                                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `false`                                            |\n| `doesNotMeetRequirementsText`  | `does-not-meet-requirements-text` |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Password must meet the following requirements:\"` |\n| `emailLabel`                   | `email-label`                     |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Email\"`                                          |\n| `hasErrorText`                 | `has-error-text`                  |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"contain at least 1 number or symbol\"`            |\n| `hideInputs`                   | `hide-inputs`                     | Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes \"email\" and \"password\" for this form to succeed. | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `false`                                            |\n| `invalidEmailErrorMessage`     | `invalid-email-error-message`     | The message to be displayed when the email used is invalid or blocked.                                                                                                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Must be a valid email address\"`                  |\n| `loginLabel`                   | `login-label`                     |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Sign in\"`                                        |\n| `loginPath`                    | `login-path`                      | Redirect participants to this page after clicking the login button.                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"/login\"`                                         |\n| `lowercaseErrorText`           | `lowercase-error-text`            |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"contain at least 1 lowercase character\"`         |\n| `meetsRequirementsText`        | `meets-requirements-text`         |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Password has met all requirements\"`              |\n| `minErrorText`                 | `min-error-text`                  |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"be a minimum of 8 characters\"`                   |\n| `networkErrorMessage`          | `network-error-message`           | The message to be displayed when a the form submission fails unexpectedly.                                                                                                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Network request failed.\"`                        |\n| `nextPage`                     | `next-page`                       | Redirect participants to this page from their verification email                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"/\"`                                              |\n| `pageLabel`                    | `page-label`                      |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Register\"`                                       |\n| `passwordLabel`                | `password-label`                  |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Password\"`                                       |\n| `passwordMismatchErrorMessage` | `password-mismatch-error-message` | The message to be displayed when password inputs do not match.                                                                                                                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Passwords do not match.\"`                        |\n| `redirectPath`                 | `redirect-path`                   | The page that participants are redirected to from the verification email.                                                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"/verifyEmail\"`                                   |\n| `requiredFieldErrorMessage`    | `required-field-error-message`    | The message to be displayed when a required field is not filled.                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Cannot be empty\"`                                |\n| `submitLabel`                  | `submit-label`                    |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"Register\"`                                       |\n| `uppercaseErrorText`           | `uppercase-error-text`            |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `\"contain at least 1 uppercase character\"`         |\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- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 const EditProfileReadme = "# sqm-portal-profile\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\n| `hideCountry`            | `hide-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                  |\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-profile --> sqm-form-message\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
-const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute                      | Description                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                 | Default                 |\n| --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\n| `confirmPassword`           | `confirm-password`             |                                                                                              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                            | `false`                 |\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Confirm Password\"`    |\n| `continueButtonText`        | `continue-button-text`         | Button text displayed after a successful password reset.                                     | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Continue\"`            |\n| `demoData`                  | --                             |                                                                                              | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined`             |\n| `failedPage`                | `failed-page`                  | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\n| `nextPage`                  | `next-page`                    | Redirect participants to this page when they successfully reset their password.              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\n| `passwordFieldLabel`        | `password-field-label`         |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"New Password\"`        |\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset.                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Password reset\"`      |\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset Password\"`      |\n| `resetPasswordHeader`       | `reset-password-header`        |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset your password\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-reset-password --> sqm-form-message\n  sqm-portal-reset-password --> sqm-password-field\n  style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                      | Attribute                         | Description                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default                                            |\n| ----------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |\n| `confirmPassword`             | `confirm-password`                |                                                                                              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `false`                                            |\n| `confirmPasswordFieldLabel`   | `confirm-password-field-label`    |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"Confirm Password\"`                               |\n| `continueButtonText`          | `continue-button-text`            | Button text displayed after a successful password reset.                                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"Continue\"`                                       |\n| `demoData`                    | --                                |                                                                                              | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; }` | `undefined`                                        |\n| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"Password must meet the following requirements:\"` |\n| `failedPage`                  | `failed-page`                     | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"/\"`                                              |\n| `hasErrorText`                | `has-error-text`                  |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"contain at least 1 number or symbol\"`            |\n| `lowercaseErrorText`          | `lowercase-error-text`            |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"contain at least 1 lowercase character\"`         |\n| `meetsRequirementsText`       | `meets-requirements-text`         |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"Password has met all requirements\"`              |\n| `minErrorText`                | `min-error-text`                  |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"be a minimum of 8 characters\"`                   |\n| `nextPage`                    | `next-page`                       | Redirect participants to this page when they successfully reset their password.              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"/\"`                                              |\n| `passwordFieldLabel`          | `password-field-label`            |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"New Password\"`                                   |\n| `passwordResetHeader`         | `password-reset-header`           | Displayed after a successful password reset.                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"Password reset\"`                                 |\n| `resetPasswordButtonText`     | `reset-password-button-text`      |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"Reset Password\"`                                 |\n| `resetPasswordHeader`         | `reset-password-header`           |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"Reset your password\"`                            |\n| `uppercaseErrorText`          | `uppercase-error-text`            |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `\"contain at least 1 uppercase character\"`         |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-reset-password --> sqm-form-message\n  sqm-portal-reset-password --> sqm-password-field\n  style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
-const EmailVerificationReadme = "# sqm-portal-email-verification\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; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; }; }` | `undefined`                                                                                                                                              |\n| `emailVerificationHeader`    | `email-verification-header`    |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                      | `\"Verify your email\"`                                                                                                                                    |\n| `redirectPath`               | `redirect-path`                | Redirect participants to this page from their verification email. | `string`                                                                                                                                                                                                                                                                                                                                      | `\"/verifyEmail\"`                                                                                                                                         |\n| `resendEmailButtonText`      | `resend-email-button-text`     |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                      | `\"Re-send Email\"`                                                                                                                                        |\n| `verificationLoadingMessage` | `verification-loading-message` |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                      | `\"Checking verification status\"`                                                                                                                         |\n| `verificationStatusMessage`  | `verification-status-message`  |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                      | `\"Checking verification status in {countdown}\"`                                                                                                          |\n| `verifyMessage`              | `verify-message`               |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                      | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-email-verification --> sqm-form-message\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EmailVerificationReadme = "# sqm-portal-email-verification\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; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; verificationResentMessage?: string; }; }` | `undefined`                                                                                                                                              |\n| `emailVerificationHeader`    | `email-verification-header`    |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Verify your email\"`                                                                                                                                    |\n| `redirectPath`               | `redirect-path`                | Redirect participants to this page from their verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"/verifyEmail\"`                                                                                                                                         |\n| `resendEmailButtonText`      | `resend-email-button-text`     |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Re-send Email\"`                                                                                                                                        |\n| `verificationLoadingMessage` | `verification-loading-message` |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Checking verification status\"`                                                                                                                         |\n| `verificationResentMessage`  | `verification-resent-message`  |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Your verification email has been resent successfully\"`                                                                                                 |\n| `verificationStatusMessage`  | `verification-status-message`  |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"Checking verification status in {countdown}\"`                                                                                                          |\n| `verifyMessage`              | `verify-message`               |                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                          | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-email-verification --> sqm-form-message\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
-const EmailVerifiedReadme = "# sqm-portal-verify-email\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; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string`                                                                                             | `\"/\"`       |\n| `nextPage`   | `next-page`   | Redirect participants to this page when they successfully verify their email.                     | `string`                                                                                             | `\"/\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EmailVerifiedReadme = "# sqm-portal-verify-email\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; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; }; }` | `undefined`                                                                                                      |\n| `failedPage`        | `failed-page`         | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string`                                                                                                                                                                                              | `\"/\"`                                                                                                            |\n| `nextPage`          | `next-page`           | Redirect participants to this page when they successfully verify their email.                     | `string`                                                                                                                                                                                              | `\"/\"`                                                                                                            |\n| `verifyEmailText`   | `verify-email-text`   |                                                                                                   | `string`                                                                                                                                                                                              | `\"Verify your email\"`                                                                                            |\n| `verifyInvalidText` | `verify-invalid-text` |                                                                                                   | `string`                                                                                                                                                                                              | `\"The email verification code is invalid or has expired, please try again.\"`                                     |\n| `verifySuccessText` | `verify-success-text` |                                                                                                   | `string`                                                                                                                                                                                              | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 const PortalTemplates_stories = {
   title: "Templates / Portal",
@@ -11286,37 +11293,37 @@ const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px da
 const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const SpaceBetween = () => {
   return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
@@ -12149,7 +12156,7 @@ const sharebutton = (slot) => {
     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-share-button", { medium: "twitter" }, "Tweet about us"))));
 };
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },