@saasquatch/mint-components 1.5.0 → 1.5.1-2

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

@@ -9,27 +9,26 @@ require('./use-callback-e754042f.js');
 const index_module = require('./index.module-fb61a163.js');
 require('./extends-08099afd.js');
 require('./cjs-1066ec21.js');
-require('./mixins-7b7c59fe.js');
-const JSS = require('./JSS-c65a40f1.js');
-const GenericTableView = require('./GenericTableView-ed381b89.js');
+require('./mixins-338ca5f1.js');
+const JSS = require('./JSS-a75f3a9a.js');
+const GenericTableView = require('./GenericTableView-c2a781ea.js');
 const luxon = require('./luxon-59ca7d19.js');
 require('./utils-01dbfd4a.js');
-require('./sqm-text-span-view-c54af22c.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-d9ac6a95.js');
-const sqmHeroView = require('./sqm-hero-view-3b0d45d0.js');
+require('./sqm-text-span-view-ab4ad6ef.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-07420209.js');
+const sqmHeroView = require('./sqm-hero-view-d5d46a36.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
-const sqmNameFieldsView = require('./sqm-name-fields-view-c95e4768.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-36632c96.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-673169c5.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-767085b1.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-918b4817.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-02b046e1.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-5ea913a8.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-c7b037cf.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-20df8d45.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1b07a1ba.js');
-const ShadowViewAddon = require('./ShadowViewAddon-a039bd16.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-f3c8475a.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-0ee28f65.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-bd8b4dfd.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-423191eb.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-8442fd90.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-97932f7a.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-b77382f6.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
+const ShadowViewAddon = require('./ShadowViewAddon-2c6a65ed.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -3658,9 +3657,9 @@ const NewPortal = /*#__PURE__*/Object.freeze({
 
 const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer a friend and earn up to $1200 in rewards\"\r\n        layout=\"columns\"\r\n        image-pos=\"right\"\r\n        background-color=\"#F9F9F9\"\r\n      >\r\n      </sqm-hero-image>\r\n    </sqm-portal-container>\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      max-width=\"770px\"\r\n      center\r\n      display=\"grid\"\r\n    >\r\n      <sqm-portal-container\r\n        justify-content=\"start\"\r\n        direction=\"row\"\r\n        center\r\n        display=\"flex\"\r\n        gap=\"xx-large\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/referralsCount\"\r\n          >\r\n            <sqm-text>\r\n              <p>Referrals</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\r\n          >\r\n            <sqm-text>\r\n              <p>Giftcards</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n        </sqm-stat-container>\r\n      </sqm-portal-container>\r\n      <sqm-portal-container\r\n        gap=\"large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          text-align=\"center\"\r\n          label-margin=\"xxx-small\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-text slot=\"label\">\r\n            <h3>Get rewarded when your friend uses our product</h3>\r\n          </sqm-text>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card vertical-alignment=\"start\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"left\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-text\r\n              >They’ll get a $50 credit towards a new account and you’ll get:\r\n            </sqm-text>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases a Business plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$1000\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases an Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"right\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-text>Choose how you want to share: </sqm-text>\r\n            <sqm-text>\r\n              <sub>Your unique referral link:</sub>\r\n              <sqm-share-link\r\n                tooltip-text=\"Copied to Clipboard\"\r\n                tooltip-lifespan=\"1000\"\r\n              >\r\n              </sqm-share-link>\r\n            </sqm-text>\r\n            <sqm-portal-container\r\n              gap=\"x-small\"\r\n              direction=\"column\"\r\n              display=\"grid\"\r\n              max-width=\"100%\"\r\n              padding=\"none\"\r\n            >\r\n              <sqm-share-button\r\n                medium=\"email\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"linkedin\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"twitter\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Tweet about us\r\n              </sqm-share-button>\r\n            </sqm-portal-container>\r\n          </sqm-portal-container>\r\n        </sqm-referral-card>\r\n      </sqm-portal-container>\r\n      <sqm-tabs placement=\"top\">\r\n        <sqm-tab header=\"Leaderboard\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-hero-image\r\n              image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"\r\n              description=\"Be one of the top 3 referrers at the end of the year and receive our product free for 1 year!\"\r\n              layout=\"columns\"\r\n              image-percentage=\"30\"\r\n              padding-image=\"large\"\r\n              padding-text=\"large\"\r\n              background-color=\"#EFF8FE\"\r\n              image-mobile-pos=\"top\"\r\n              image-pos=\"right\"\r\n              overlay-opacity=\"0.75\"\r\n            >\r\n            </sqm-hero-image>\r\n            <sqm-leaderboard\r\n              usersheading=\"Referrer\"\r\n              statsheading=\"Referrals\"\r\n              rankheading=\"Rank\"\r\n              rank-type=\"rowNumber\"\r\n              leaderboard-type=\"topStartedReferrers\"\r\n              show-rank\r\n              anonymous-user=\"Anonymous User\"\r\n            >\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png\"\r\n                empty-state-header=\"View your rank in the leaderboard\"\r\n                empty-state-text=\"Be the first to refer a friend and reach the top of the leaderboard\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-leaderboard>\r\n          </sqm-portal-container>\r\n        </sqm-tab>\r\n        <sqm-tab header=\"Referral history\">\r\n          <sqm-referral-table\r\n            per-page=\"4\"\r\n            hidden-columns=\"2\"\r\n            more-label=\"Next\"\r\n            prev-label=\"Prev\"\r\n            show-labels\r\n\t\t\tsm-breakpoint=\"599\"\r\n\t\t\tmd-breakpoint=\"799\"\r\n          >\r\n            <sqm-referral-table-user-column\r\n              column-title=\"User\"\r\n              anonymous-user=\"Anonymous User\"\r\n              deleted-user=\"Deleted User\"\r\n            >\r\n            </sqm-referral-table-user-column>\r\n            <sqm-referral-table-status-column\r\n              column-title=\"Referral status\"\r\n              converted-status-text=\"Converted\"\r\n              in-progress-status-text=\"In Progress\"\r\n            >\r\n            </sqm-referral-table-status-column>\r\n            <sqm-referral-table-rewards-column\r\n              column-title=\"Rewards\"\r\n              expiring-text=\"Expiring in\"\r\n              fuel-tank-text=\"Your code is\"\r\n              pending-for-text=\"{status} for {date}\"\r\n              reward-received-text=\"Reward received on\"\r\n              status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\r\n              status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n            >\r\n            </sqm-referral-table-rewards-column>\r\n            <sqm-referral-table-date-column\r\n              column-title=\"Date referred\"\r\n              date-shown=\"dateReferralStarted\"\r\n            >\r\n            </sqm-referral-table-date-column>\r\n            <sqm-empty\r\n              empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\r\n              empty-state-header=\"View your referral details\"\r\n              empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\r\n            ></sqm-empty>\r\n          </sqm-referral-table>\r\n        </sqm-tab>\r\n      </sqm-tabs>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
 
-const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer friends and complete tasks to earn rewards\"\r\n        layout=\"columns\"\r\n        image-pos=\"right\"\r\n        background-color=\"#F9F9F9\"\r\n        image-mobile-pos=\"top\"\r\n        image-percentage=\"50\"\r\n        padding-image=\"none\"\r\n        padding-text=\"xxxx-large\"\r\n      >\r\n      </sqm-hero-image>\r\n    </sqm-portal-container>\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      max-width=\"770px\"\r\n      center\r\n      display=\"grid\"\r\n    >\r\n      <sqm-portal-container\r\n        direction=\"row\"\r\n        center\r\n        display=\"flex\"\r\n        justify-content=\"space-between\"\r\n        gap=\"xxx-large\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/referralsCount\"\r\n          >\r\n            <sqm-text>\r\n              <p>Referrals</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\r\n          >\r\n            <sqm-text>\r\n              <p>Giftcards Earned</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n          >\r\n            <sqm-text>\r\n              <p>Points Balance</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n        </sqm-stat-container>\r\n        <sqm-scroll\r\n          scroll-id=\"tab-3\"\r\n          outline\r\n          button-type=\"primary\"\r\n          button-text=\"Redeem your rewards\"\r\n          mobile\r\n        >\r\n        </sqm-scroll>\r\n      </sqm-portal-container>\r\n      <sqm-portal-container\r\n        gap=\"xx-large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          text-align=\"center\"\r\n          label-margin=\"xxx-small\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-text slot=\"label\">\r\n            <h3>Share $50 with friends</h3>\r\n          </sqm-text>\r\n          <sqm-text slot=\"content\">\r\n            <p>\r\n              They’ll get a $50 credit towards a new account and you’ll get up\r\n              to $1200\r\n            </p>\r\n          </sqm-text>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card vertical-alignment=\"start\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"left\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-text\r\n              >They’ll get a $50 credit towards a new account and you’ll get:\r\n            </sqm-text>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases a Business plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$1000\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases an Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"right\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-text>Choose how you want to share: </sqm-text>\r\n            <sqm-text>\r\n              <sub>Your unique referral link:</sub>\r\n              <sqm-share-link\r\n                tooltip-text=\"Copied to Clipboard\"\r\n                tooltip-lifespan=\"1000\"\r\n              >\r\n              </sqm-share-link>\r\n            </sqm-text>\r\n            <sqm-portal-container\r\n              gap=\"x-small\"\r\n              direction=\"column\"\r\n              display=\"grid\"\r\n              max-width=\"100%\"\r\n              padding=\"none\"\r\n            >\r\n              <sqm-share-button\r\n                medium=\"email\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"linkedin\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"twitter\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Tweet about us\r\n              </sqm-share-button>\r\n            </sqm-portal-container>\r\n          </sqm-portal-container>\r\n        </sqm-referral-card>\r\n        <sqm-portal-container\r\n          gap=\"xx-large\"\r\n          direction=\"column\"\r\n          display=\"grid\"\r\n          justify-content=\"\"\r\n          max-width=\"100%\"\r\n          min-width=\"\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\r\n            <sqm-text slot=\"label\">\r\n              <h3>Earn more rewards</h3>\r\n            </sqm-text>\r\n            <sqm-text slot=\"content\">\r\n              <p>\r\n                Get points while using our product. Use those points to redeem\r\n                rewards like one free month of Enterprise or two plane\r\n                tickets to anywhere in North America\r\n              </p>\r\n            </sqm-text>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 150 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n        </sqm-portal-container>\r\n        <sqm-tabs>\r\n          <sqm-tab header=\"Leaderboard\">\r\n            <sqm-portal-container gap=\"large\">\r\n              <sqm-hero-image\r\n                image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"\r\n                description=\"Be one of the top 3 referrers at the end of the year and receive our product free for 1 year!\"\r\n                layout=\"columns\"\r\n                image-percentage=\"33%\"\r\n                padding-image=\"large\"\r\n                padding-text=\"large\"\r\n                background-color=\"#EFF8FE\"\r\n              >\r\n              </sqm-hero-image>\r\n              <sqm-leaderboard\r\n                usersheading=\"Referrer\"\r\n                statsheading=\"Referrals\"\r\n                rankheading=\"Rank\"\r\n                rank-type=\"rowNumber\"\r\n                leaderboard-type=\"topStartedReferrers\"\r\n                show-rank\r\n                anonymous-user=\"Anonymous User\"\r\n              >\r\n                <sqm-empty\r\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png\"\r\n                  empty-state-header=\"View your rank in the leaderboard\"\r\n                  empty-state-text=\"Be the first to refer a friend and reach the top of the leaderboard\"\r\n                >\r\n                </sqm-empty>\r\n              </sqm-leaderboard>\r\n            </sqm-portal-container>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Referral history\">\r\n            <sqm-referral-table\r\n              per-page=\"4\"\r\n              hidden-columns=\"2\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              show-labels=\"\"\r\n\t\t\t  sm-breakpoint=\"599\"\r\n\t\t\t  md-breakpoint=\"799\"\r\n            >\r\n              <sqm-referral-table-user-column\r\n                column-title=\"User\"\r\n                anonymous-user=\"Anonymous User\"\r\n                deleted-user=\"Deleted User\"\r\n              >\r\n              </sqm-referral-table-user-column>\r\n              <sqm-referral-table-status-column\r\n                column-title=\"Referral status\"\r\n                converted-status-text=\"Converted\"\r\n                in-progress-status-text=\"In Progress\"\r\n              >\r\n              </sqm-referral-table-status-column>\r\n              <sqm-referral-table-rewards-column\r\n                column-title=\"Rewards\"\r\n                expiring-text=\"Expiring in\"\r\n                fuel-tank-text=\"Your code is\"\r\n                pending-for-text=\"{status} for {date}\"\r\n                reward-received-text=\"Reward received on\"\r\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-referral-table-rewards-column>\r\n              <sqm-referral-table-date-column\r\n                column-title=\"Date referred\"\r\n                date-shown=\"dateReferralStarted\"\r\n              >\r\n              </sqm-referral-table-date-column>\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\r\n                empty-state-header=\"View your referral details\"\r\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-referral-table>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Reward history\">\r\n            <sqm-rewards-table\r\n              per-page=\"4\"\r\n              program-id=\"\"\r\n              hidden-columns=\"0\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              show-labels=\"\"\r\n\t\t\t  sm-breakpoint=\"599\"\r\n\t\t\t  md-breakpoint=\"799\"\r\n            >\r\n              <sqm-rewards-table-reward-column\r\n                available-text=\"{availableAmount} remaining\"\r\n                column-title=\"Reward\"\r\n                copy-text=\"Copied!\"\r\n                redeemed-text=\"{redeemedAmount} redeemed\"\r\n              >\r\n              </sqm-rewards-table-reward-column>\r\n              <sqm-rewards-table-source-column\r\n                anonymous-user=\"Anonymous User\"\r\n                column-title=\"Source\"\r\n                deleted-user=\"Deleted User\"\r\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                reward-exchange-text=\"Reward Exchange\"\r\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n              >\r\n              </sqm-rewards-table-source-column>\r\n              <sqm-rewards-table-status-column\r\n                column-title=\"Status\"\r\n                expiry-text=\"Expires on \"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-rewards-table-status-column>\r\n              <sqm-rewards-table-date-column\r\n                column-title=\"Date received\"\r\n                date-shown=\"dateGiven\"\r\n              >\r\n              </sqm-rewards-table-date-column>\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                empty-state-header=\"View your rewards\"\r\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-rewards-table>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Redeem\">\r\n            <sqm-reward-exchange-list\r\n              back-text=\"Back\"\r\n              button-text=\"Exchange Rewards\"\r\n              cancel-text=\"Cancel\"\r\n              choose-amount-title=\"Select\"\r\n              choose-reward-title=\"Rewards\"\r\n              confirmation-title=\"Confirm\"\r\n              continue-text=\"Continue\"\r\n              continue-to-confirmation-text=\"Continue to confirmation\"\r\n              done-text=\"Done\"\r\n              reward-title=\"Choose a reward\"\r\n              not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\r\n              not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\r\n              query-error=\"Unable to load reward exchange list. Please try again\"\r\n              redeem-text=\"Redeem\"\r\n              redeem-title=\"Confirm and redeem\"\r\n              redemption-error=\"An error occured trying to redeem this reward. Please try again\"\r\n              redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\r\n              select-text=\"Select amount to receive\"\r\n              source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\r\n              tooltiptext=\"Copied\"\r\n              reward-name-title=\"Reward\"\r\n              reward-amount-title=\"Reward Amount\"\r\n              cost-title=\"Cost to Redeem\"\r\n              reward-redeemed-text=\"Reward redeemed\"\r\n              skeleton-card-num=\"8\"\r\n              promo-code=\"Promo Code\"\r\n              tooltip-text=\"Copied!\"\r\n            >\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\r\n                empty-state-header=\"Redeem rewards\"\r\n                empty-state-text=\"Use your points to redeem rewards once they become available\"\r\n              ></sqm-empty>\r\n            </sqm-reward-exchange-list>\r\n          </sqm-tab>\r\n        </sqm-tabs>\r\n      </sqm-portal-container>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
+const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer friends and complete tasks to earn rewards\"\r\n        layout=\"columns\"\r\n        image-pos=\"right\"\r\n        background-color=\"#F9F9F9\"\r\n        image-mobile-pos=\"top\"\r\n        image-percentage=\"50\"\r\n        padding-image=\"none\"\r\n        padding-text=\"xxxx-large\"\r\n      >\r\n      </sqm-hero-image>\r\n    </sqm-portal-container>\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      max-width=\"770px\"\r\n      center\r\n      display=\"grid\"\r\n    >\r\n      <sqm-portal-container\r\n        direction=\"row\"\r\n        center\r\n        display=\"flex\"\r\n        justify-content=\"space-between\"\r\n        gap=\"xxx-large\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/referralsCount\"\r\n          >\r\n            <sqm-text>\r\n              <p>Referrals</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\r\n          >\r\n            <sqm-text>\r\n              <p>Giftcards Earned</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n          <sqm-big-stat\r\n            flex-reverse=\"true\"\r\n            alignment=\"left\"\r\n            stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n          >\r\n            <sqm-text>\r\n              <p>Points Balance</p>\r\n            </sqm-text>\r\n          </sqm-big-stat>\r\n        </sqm-stat-container>\r\n        <sqm-scroll\r\n          scroll-id=\"tab-3\"\r\n          outline\r\n          button-type=\"primary\"\r\n          button-text=\"Redeem your rewards\"\r\n          mobile\r\n        >\r\n        </sqm-scroll>\r\n      </sqm-portal-container>\r\n      <sqm-portal-container\r\n        gap=\"xx-large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          text-align=\"center\"\r\n          label-margin=\"xxx-small\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-text slot=\"label\">\r\n            <h3>Share $50 with friends</h3>\r\n          </sqm-text>\r\n          <sqm-text slot=\"content\">\r\n            <p>\r\n              They’ll get a $50 credit towards a new account and you’ll get up\r\n              to $1200\r\n            </p>\r\n          </sqm-text>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card vertical-alignment=\"start\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"left\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-text\r\n              >They’ll get a $50 credit towards a new account and you’ll get:\r\n            </sqm-text>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases a Business plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$1000\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases an Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"right\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-text>Choose how you want to share: </sqm-text>\r\n            <sqm-text>\r\n              <sub>Your unique referral link:</sub>\r\n              <sqm-share-link\r\n                tooltip-text=\"Copied to Clipboard\"\r\n                tooltip-lifespan=\"1000\"\r\n              >\r\n              </sqm-share-link>\r\n            </sqm-text>\r\n            <sqm-portal-container\r\n              gap=\"x-small\"\r\n              direction=\"column\"\r\n              display=\"grid\"\r\n              max-width=\"100%\"\r\n              padding=\"none\"\r\n            >\r\n              <sqm-share-button\r\n                medium=\"email\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"linkedin\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"twitter\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Tweet about us\r\n              </sqm-share-button>\r\n            </sqm-portal-container>\r\n          </sqm-portal-container>\r\n        </sqm-referral-card>\r\n        <sqm-portal-container\r\n          gap=\"xx-large\"\r\n          direction=\"column\"\r\n          display=\"grid\"\r\n          justify-content=\"\"\r\n          max-width=\"100%\"\r\n          min-width=\"\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\r\n            <sqm-text slot=\"label\">\r\n              <h3>Earn more rewards</h3>\r\n            </sqm-text>\r\n            <sqm-text slot=\"content\">\r\n              <p>\r\n                Get points while using our product. Use those points to redeem\r\n                rewards like one free month of Enterprise or two plane tickets\r\n                to anywhere in North America\r\n              </p>\r\n            </sqm-text>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 150 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n        </sqm-portal-container>\r\n        <sqm-tabs>\r\n          <sqm-tab header=\"Leaderboard\">\r\n            <sqm-portal-container gap=\"large\">\r\n              <sqm-hero-image\r\n                image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"\r\n                description=\"Be one of the top 3 referrers at the end of the year and receive our product free for 1 year!\"\r\n                layout=\"columns\"\r\n                image-percentage=\"33%\"\r\n                padding-image=\"large\"\r\n                padding-text=\"large\"\r\n                background-color=\"#EFF8FE\"\r\n              >\r\n              </sqm-hero-image>\r\n              <sqm-leaderboard\r\n                usersheading=\"Referrer\"\r\n                statsheading=\"Referrals\"\r\n                rankheading=\"Rank\"\r\n                rank-type=\"rowNumber\"\r\n                leaderboard-type=\"topStartedReferrers\"\r\n                show-rank\r\n                anonymous-user=\"Anonymous User\"\r\n              >\r\n                <sqm-empty\r\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png\"\r\n                  empty-state-header=\"View your rank in the leaderboard\"\r\n                  empty-state-text=\"Be the first to refer a friend and reach the top of the leaderboard\"\r\n                >\r\n                </sqm-empty>\r\n              </sqm-leaderboard>\r\n            </sqm-portal-container>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Referral history\">\r\n            <sqm-referral-table\r\n              per-page=\"4\"\r\n              hidden-columns=\"2\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              show-labels=\"\"\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-referral-table-user-column\r\n                column-title=\"User\"\r\n                anonymous-user=\"Anonymous User\"\r\n                deleted-user=\"Deleted User\"\r\n              >\r\n              </sqm-referral-table-user-column>\r\n              <sqm-referral-table-status-column\r\n                column-title=\"Referral status\"\r\n                converted-status-text=\"Converted\"\r\n                in-progress-status-text=\"In Progress\"\r\n              >\r\n              </sqm-referral-table-status-column>\r\n              <sqm-referral-table-rewards-column\r\n                column-title=\"Rewards\"\r\n                expiring-text=\"Expiring in\"\r\n                fuel-tank-text=\"Your code is\"\r\n                pending-for-text=\"{status} for {date}\"\r\n                reward-received-text=\"Reward received on\"\r\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-referral-table-rewards-column>\r\n              <sqm-referral-table-date-column\r\n                column-title=\"Date referred\"\r\n                date-shown=\"dateReferralStarted\"\r\n              >\r\n              </sqm-referral-table-date-column>\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\r\n                empty-state-header=\"View your referral details\"\r\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-referral-table>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Reward history\">\r\n            <sqm-rewards-table\r\n              per-page=\"4\"\r\n              program-id=\"\"\r\n              hidden-columns=\"0\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              show-labels=\"\"\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-rewards-table-reward-column\r\n                available-text=\"{availableAmount} remaining\"\r\n                column-title=\"Reward\"\r\n                copy-text=\"Copied!\"\r\n                redeemed-text=\"{redeemedAmount} redeemed\"\r\n              >\r\n              </sqm-rewards-table-reward-column>\r\n              <sqm-rewards-table-source-column\r\n                anonymous-user=\"Anonymous User\"\r\n                column-title=\"Source\"\r\n                deleted-user=\"Deleted User\"\r\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                reward-exchange-text=\"Reward Exchange\"\r\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n              >\r\n              </sqm-rewards-table-source-column>\r\n              <sqm-rewards-table-status-column\r\n                column-title=\"Status\"\r\n                expiry-text=\"Expires on \"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-rewards-table-status-column>\r\n              <sqm-rewards-table-date-column\r\n                column-title=\"Date received\"\r\n                date-shown=\"dateGiven\"\r\n              >\r\n              </sqm-rewards-table-date-column>\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                empty-state-header=\"View your rewards\"\r\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-rewards-table>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Redeem\">\r\n            <sqm-reward-exchange-list\r\n              back-text=\"Back\"\r\n              button-text=\"Exchange Rewards\"\r\n              cancel-text=\"Cancel\"\r\n              choose-amount-title=\"Select\"\r\n              choose-reward-title=\"Rewards\"\r\n              confirmation-title=\"Confirm\"\r\n              continue-text=\"Continue\"\r\n              continue-to-confirmation-text=\"Continue to confirmation\"\r\n              done-text=\"Done\"\r\n              reward-title=\"Choose a reward\"\r\n              not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\r\n              not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\r\n              query-error=\"Unable to load reward exchange list. Please try again\"\r\n              redeem-text=\"Redeem\"\r\n              redeem-title=\"Confirm and redeem\"\r\n              redemption-error=\"An error occured trying to redeem this reward. Please try again\"\r\n              redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\r\n              select-text=\"Select amount to receive\"\r\n              source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\r\n              tooltiptext=\"Copied\"\r\n              reward-name-title=\"Reward\"\r\n              reward-amount-title=\"Reward Amount\"\r\n              cost-title=\"Cost to Redeem\"\r\n              reward-redeemed-text=\"Reward redeemed\"\r\n              skeleton-card-num=\"8\"\r\n              promo-code=\"Promo Code\"\r\n              tooltip-text=\"Copied!\"\r\n            >\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\r\n                empty-state-header=\"Redeem rewards\"\r\n                empty-state-text=\"Use your points to redeem rewards once they become available\"\r\n              ></sqm-empty>\r\n            </sqm-reward-exchange-list>\r\n          </sqm-tab>\r\n        </sqm-tabs>\r\n      </sqm-portal-container>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
 
-const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://i.imgur.com/bTwu1Um.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer friends and complete tasks to earn rewards\"\r\n        layout=\"overlay\"\r\n        padding-image=\"xxxx-large\"\r\n        padding-text=\"xxx-large\"\r\n        image-pos=\"center\"\r\n        overlay-color=\"#5e5669\"\r\n        overlay-opacity=\"0.9\"\r\n      >\r\n      </sqm-hero-image>\r\n      <sqm-portal-container\r\n        direction=\"column\"\r\n        padding=\"none\"\r\n        gap=\"xxx-large\"\r\n        max-width=\"770px\"\r\n        center\r\n        display=\"grid\"\r\n      >\r\n        <sqm-program-explainer header=\"How it works\">\r\n          <sqm-program-explainer-step\r\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\r\n            header=\"Earn points for using our product\"\r\n            icon=\"cash-stack\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n          <sqm-program-explainer-step\r\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\r\n            header=\"Redeem rewards with your points\"\r\n            icon=\"people\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n        </sqm-program-explainer>\r\n        <sqm-portal-container\r\n          center\r\n          direction=\"row\"\r\n          display=\"flex\"\r\n          justify-content=\"space-between\"\r\n          gap=\"xxx-large\"\r\n          max-width=\"100%\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\r\n            >\r\n              <sqm-text>\r\n                <p>Points Redeemed</p>\r\n              </sqm-text>\r\n            </sqm-big-stat>\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n            >\r\n              <sqm-text>\r\n                <p>Points Balance</p>\r\n              </sqm-text>\r\n            </sqm-big-stat>\r\n          </sqm-stat-container>\r\n          <sqm-scroll\r\n            scroll-id=\"tab-2\"\r\n            outline\r\n            button-type=\"primary\"\r\n            button-text=\"Redeem your rewards\"\r\n            mobile\r\n            size=\"medium\"\r\n          >\r\n          </sqm-scroll>\r\n        </sqm-portal-container>\r\n        <sqm-portal-container\r\n          direction=\"column\"\r\n          padding=\"none\"\r\n          gap=\"xx-large\"\r\n          display=\"grid\"\r\n          max-width=\"100%\"\r\n        >\r\n          <sqm-titled-section\r\n            label-margin=\"small\"\r\n            padding=\"none\"\r\n            text-align=\"left\"\r\n          >\r\n            <sqm-text>Earn points </sqm-text>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 150 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n          <sqm-tabs placement=\"top\">\r\n            <sqm-tab header=\"Reward history\">\r\n              <sqm-rewards-table\r\n                per-page=\"4\"\r\n                hidden-columns=\"0\"\r\n                more-label=\"Next\"\r\n                prev-label=\"Prev\"\r\n                show-labels\r\n                sm-breakpoint=\"599\"\r\n                md-breakpoint=\"799\"\r\n              >\r\n                <sqm-rewards-table-reward-column\r\n                  available-text=\"{availableAmount} remaining\"\r\n                  column-title=\"Reward\"\r\n                  copy-text=\"Copied!\"\r\n                  redeemed-text=\"{redeemedAmount} redeemed\"\r\n                >\r\n                </sqm-rewards-table-reward-column>\r\n                <sqm-rewards-table-source-column\r\n                  anonymous-user=\"Anonymous User\"\r\n                  column-title=\"Source\"\r\n                  deleted-user=\"Deleted User\"\r\n                  referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                  reward-exchange-text=\"Reward Exchange\"\r\n                  reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n                >\r\n                </sqm-rewards-table-source-column>\r\n                <sqm-rewards-table-status-column\r\n                  column-title=\"Status\"\r\n                  expiry-text=\"Expires on \"\r\n                  status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n                >\r\n                </sqm-rewards-table-status-column>\r\n                <sqm-rewards-table-date-column\r\n                  column-title=\"Date received\"\r\n                  date-shown=\"dateGiven\"\r\n                >\r\n                </sqm-rewards-table-date-column>\r\n                <sqm-empty\r\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                  empty-state-header=\"View your rewards\"\r\n                  empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n                >\r\n                </sqm-empty>\r\n              </sqm-rewards-table>\r\n            </sqm-tab>\r\n            <sqm-tab header=\"Redeem\">\r\n              <sqm-reward-exchange-list\r\n                back-text=\"Back\"\r\n                button-text=\"Exchange Rewards\"\r\n                cancel-text=\"Cancel\"\r\n                choose-amount-title=\"Select\"\r\n                choose-reward-title=\"Rewards\"\r\n                confirmation-title=\"Confirm\"\r\n                continue-text=\"Continue\"\r\n                continue-to-confirmation-text=\"Continue to confirmation\"\r\n                done-text=\"Done\"\r\n                reward-title=\"Choose a reward\"\r\n                not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\r\n                not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\r\n                query-error=\"Unable to load reward exchange list. Please try again\"\r\n                redeem-text=\"Redeem\"\r\n                redeem-title=\"Confirm and redeem\"\r\n                redemption-error=\"An error occured trying to redeem this reward. Please try again\"\r\n                redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\r\n                select-text=\"Select amount to receive\"\r\n                source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\r\n                tooltiptext=\"Copied\"\r\n                reward-name-title=\"Reward\"\r\n                reward-amount-title=\"Reward Amount\"\r\n                cost-title=\"Cost to Redeem\"\r\n                reward-redeemed-text=\"Reward redeemed\"\r\n                skeleton-card-num=\"8\"\r\n                promo-code=\"Promo Code\"\r\n                tooltip-text=\"Copied!\"\r\n              >\r\n                <sqm-empty\r\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\r\n                  empty-state-header=\"Redeem rewards\"\r\n                  empty-state-text=\"Use your points to redeem rewards once they become available\"\r\n                ></sqm-empty>\r\n              </sqm-reward-exchange-list>\r\n            </sqm-tab>\r\n          </sqm-tabs>\r\n        </sqm-portal-container>\r\n      </sqm-portal-container>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
+const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://i.imgur.com/bTwu1Um.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Complete tasks to earn rewards\"\r\n        layout=\"overlay\"\r\n        padding-image=\"xxxx-large\"\r\n        padding-text=\"xxx-large\"\r\n        image-pos=\"center\"\r\n        overlay-color=\"#5e5669\"\r\n        overlay-opacity=\"0.9\"\r\n      >\r\n      </sqm-hero-image>\r\n      <sqm-portal-container\r\n        direction=\"column\"\r\n        padding=\"none\"\r\n        gap=\"xxx-large\"\r\n        max-width=\"770px\"\r\n        center\r\n        display=\"grid\"\r\n      >\r\n        <sqm-program-explainer header=\"How it works\">\r\n          <sqm-program-explainer-step\r\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\r\n            header=\"Earn points for using our product\"\r\n            icon=\"cash-stack\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n          <sqm-program-explainer-step\r\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\r\n            header=\"Redeem rewards with your points\"\r\n            icon=\"people\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n        </sqm-program-explainer>\r\n        <sqm-portal-container\r\n          center\r\n          direction=\"row\"\r\n          display=\"flex\"\r\n          justify-content=\"space-between\"\r\n          gap=\"xxx-large\"\r\n          max-width=\"100%\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\r\n            >\r\n              <sqm-text>\r\n                <p>Points Redeemed</p>\r\n              </sqm-text>\r\n            </sqm-big-stat>\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n            >\r\n              <sqm-text>\r\n                <p>Points Balance</p>\r\n              </sqm-text>\r\n            </sqm-big-stat>\r\n          </sqm-stat-container>\r\n          <sqm-scroll\r\n            scroll-id=\"tab-2\"\r\n            outline\r\n            button-type=\"primary\"\r\n            button-text=\"Redeem your rewards\"\r\n            mobile\r\n            size=\"medium\"\r\n          >\r\n          </sqm-scroll>\r\n        </sqm-portal-container>\r\n        <sqm-portal-container\r\n          direction=\"column\"\r\n          padding=\"none\"\r\n          gap=\"xx-large\"\r\n          display=\"grid\"\r\n          max-width=\"100%\"\r\n        >\r\n          <sqm-titled-section\r\n            label-margin=\"small\"\r\n            padding=\"none\"\r\n            text-align=\"left\"\r\n          >\r\n            <sqm-text>Earn points </sqm-text>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 150 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n          <sqm-tabs placement=\"top\">\r\n            <sqm-tab header=\"Reward history\">\r\n              <sqm-rewards-table\r\n                per-page=\"4\"\r\n                hidden-columns=\"0\"\r\n                more-label=\"Next\"\r\n                prev-label=\"Prev\"\r\n                show-labels\r\n                sm-breakpoint=\"599\"\r\n                md-breakpoint=\"799\"\r\n              >\r\n                <sqm-rewards-table-reward-column\r\n                  available-text=\"{availableAmount} remaining\"\r\n                  column-title=\"Reward\"\r\n                  copy-text=\"Copied!\"\r\n                  redeemed-text=\"{redeemedAmount} redeemed\"\r\n                >\r\n                </sqm-rewards-table-reward-column>\r\n                <sqm-rewards-table-source-column\r\n                  anonymous-user=\"Anonymous User\"\r\n                  column-title=\"Source\"\r\n                  deleted-user=\"Deleted User\"\r\n                  referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                  reward-exchange-text=\"Reward Exchange\"\r\n                  reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n                >\r\n                </sqm-rewards-table-source-column>\r\n                <sqm-rewards-table-status-column\r\n                  column-title=\"Status\"\r\n                  expiry-text=\"Expires on \"\r\n                  status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n                >\r\n                </sqm-rewards-table-status-column>\r\n                <sqm-rewards-table-date-column\r\n                  column-title=\"Date received\"\r\n                  date-shown=\"dateGiven\"\r\n                >\r\n                </sqm-rewards-table-date-column>\r\n                <sqm-empty\r\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                  empty-state-header=\"View your rewards\"\r\n                  empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n                >\r\n                </sqm-empty>\r\n              </sqm-rewards-table>\r\n            </sqm-tab>\r\n            <sqm-tab header=\"Redeem\">\r\n              <sqm-reward-exchange-list\r\n                back-text=\"Back\"\r\n                button-text=\"Exchange Rewards\"\r\n                cancel-text=\"Cancel\"\r\n                choose-amount-title=\"Select\"\r\n                choose-reward-title=\"Rewards\"\r\n                confirmation-title=\"Confirm\"\r\n                continue-text=\"Continue\"\r\n                continue-to-confirmation-text=\"Continue to confirmation\"\r\n                done-text=\"Done\"\r\n                reward-title=\"Choose a reward\"\r\n                not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\r\n                not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\r\n                query-error=\"Unable to load reward exchange list. Please try again\"\r\n                redeem-text=\"Redeem\"\r\n                redeem-title=\"Confirm and redeem\"\r\n                redemption-error=\"An error occured trying to redeem this reward. Please try again\"\r\n                redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\r\n                select-text=\"Select amount to receive\"\r\n                source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\r\n                tooltiptext=\"Copied\"\r\n                reward-name-title=\"Reward\"\r\n                reward-amount-title=\"Reward Amount\"\r\n                cost-title=\"Cost to Redeem\"\r\n                reward-redeemed-text=\"Reward redeemed\"\r\n                skeleton-card-num=\"8\"\r\n                promo-code=\"Promo Code\"\r\n                tooltip-text=\"Copied!\"\r\n              >\r\n                <sqm-empty\r\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\r\n                  empty-state-header=\"Redeem rewards\"\r\n                  empty-state-text=\"Use your points to redeem rewards once they become available\"\r\n                ></sqm-empty>\r\n              </sqm-reward-exchange-list>\r\n            </sqm-tab>\r\n          </sqm-tabs>\r\n        </sqm-portal-container>\r\n      </sqm-portal-container>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
 
 const Widget_stories = {
   title: "Templates / Widgets",
@@ -9382,7 +9381,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
 
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                                                          | Type                                                                                                                                                                                        | Default                    |\r\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\r\n| `demoData`     | --              |                                                                      | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`   | `email-label`   |                                                                      | `string`                                                                                                                                                                                    | `\"Email\"`                  |\r\n| `loginPath`    | `login-path`    |                                                                      | `string`                                                                                                                                                                                    | `\"/login\"`                 |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`         |\r\n| `submitLabel`  | `submit-label`  |                                                                      | `string`                                                                                                                                                                                    | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: 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; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\r\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\r\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\r\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\r\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\r\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\r\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\r\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\r\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
 const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\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`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
@@ -9881,10 +9880,10 @@ const errorProps$8 = {
   },
 };
 const NameFields = () => {
-  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, props$1));
+  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, props$1));
 };
 const NameFieldsWithErrors = () => {
-  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, errorProps$8));
+  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, errorProps$8));
 };
 
 const NameFields$1 = /*#__PURE__*/Object.freeze({
@@ -9894,6 +9893,259 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
+const CheckboxField_stories = {
+  title: "Components/Checkbox Field",
+};
+const defaultProps$a = {
+  states: {
+    validationErrors: {},
+    checked: false,
+  },
+  content: {
+    checkboxName: "agree",
+    checkboxLabel: "By signing up you agree to the {labelLink}",
+    checkboxLabelLink: "https://example.com",
+    checkboxLabelLinkText: "Terms and Conditions",
+    errorMessage: "Must be checked",
+  },
+  callbacks: {
+    setChecked: () => { },
+  },
+};
+const defaultRegisterProps = {
+  states: {
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+};
+const Default$b = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a))));
+const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
+    ...defaultProps$a.states,
+    checked: true,
+  } }))));
+const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { content: {
+    ...defaultProps$a.content,
+    checkboxLabel: "I Agree",
+  } }))));
+const Error$3 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
+    ...defaultProps$a.states,
+    validationErrors: {
+      agree: "Must be checked",
+    },
+  } }))));
+const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
+    ...defaultProps$a.states,
+    validationErrors: {
+      agree: "This checkbox must be checked to continue",
+    },
+  } }))));
+const TermsAndConditions$1 = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (index.h("p", null,
+      index.h("sqm-checkbox-field", null))),
+  } }))));
+const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (index.h("p", null,
+      "By signing up you agree to the",
+      " ",
+      index.h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
+      index.h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
+  } }))));
+const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (index.h("sqm-checkbox-field", { "checkbox-label": "Participants must be at least 18 years of age and a legal resident of the U.S. or Canada. By signing up to participate in the rewards program, you agree to the {labelLink}.", "checkbox-label-link": "https://www.example.com", "checkbox-label-link-text": "terms", "checkbox-name": "termsAndConditions" })),
+  } }))));
+
+const CheckboxField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': CheckboxField_stories,
+  Default: Default$b,
+  DefaultChecked: DefaultChecked,
+  CustomLabel: CustomLabel,
+  Error: Error$3,
+  CustomError: CustomError,
+  TermsAndConditions: TermsAndConditions$1,
+  TermsAndConditionsCustomLabel: TermsAndConditionsCustomLabel,
+  TermsAndConditionsLongCustomLabel: TermsAndConditionsLongCustomLabel
+});
+
+const UseCheckboxField_stories = {
+  title: "Hooks / useCheckboxField",
+};
+function setupGraphQL$9() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  stencilHooks_module.useEffect(() => {
+    index_module.ae({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      index_module.ae(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+const TermsAndConditions$2 = createHookStory(() => {
+  setupGraphQL$9();
+  return (index.h("sqm-portal-register", null,
+    index.h("div", { slot: "terms" },
+      index.h("sqm-checkbox-field", { "checkbox-name": "terms" }))));
+});
+const TermsAndConditionsWithLabel = createHookStory(() => {
+  setupGraphQL$9();
+  return (index.h("sqm-portal-register", null,
+    index.h("div", { slot: "terms" },
+      index.h("sqm-checkbox-field", { "checkbox-label": "I agree", "checkbox-name": "terms" }))));
+});
+const MultipleCheckboxes = createHookStory(() => {
+  setupGraphQL$9();
+  return (index.h("sqm-portal-register", null,
+    index.h("sqm-name-fields", { slot: "formData" }),
+    index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
+    index.h("div", { slot: "terms" },
+      index.h("sqm-checkbox-field", null))));
+});
+const OptionalCheckboxes = createHookStory(() => {
+  setupGraphQL$9();
+  return (index.h("sqm-portal-register", null,
+    index.h("sqm-name-fields", { slot: "formData" }),
+    index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-required": "false", "checkbox-name": "isHuman" }),
+    index.h("div", { slot: "terms" },
+      index.h("sqm-checkbox-field", null))));
+});
+
+const UseCheckboxField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UseCheckboxField_stories,
+  TermsAndConditions: TermsAndConditions$2,
+  TermsAndConditionsWithLabel: TermsAndConditionsWithLabel,
+  MultipleCheckboxes: MultipleCheckboxes,
+  OptionalCheckboxes: OptionalCheckboxes
+});
+
+const DropdownField_stories = {
+  title: "Components/Dropdown Field",
+};
+const defaultProps$b = {
+  states: {
+    validationErrors: {},
+  },
+  content: {
+    dropdownName: "options",
+    dropdownLabel: "Select an option",
+    errorMessage: "Must select an option",
+    selectOptions: [
+      index.h("sl-menu-item", { value: "option-1" }, "Option 1"),
+      index.h("sl-menu-item", { value: "option-2" }, "Option 2"),
+      index.h("sl-menu-item", { value: "option-3" }, "Option 3"),
+    ],
+  },
+};
+const Default$c = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b))));
+const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { content: {
+    ...defaultProps$b.content,
+    dropdownLabel: "Pick your favorite",
+  } }))));
+const Error$4 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { states: {
+    ...defaultProps$b.states,
+    validationErrors: {
+      options: "Must select an option",
+    },
+  } }))));
+const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { content: { ...defaultProps$b.content, errorMessage: "An option must be selected to continue", }, states: {
+    ...defaultProps$b.states,
+    validationErrors: {
+      options: "Must select an option",
+    },
+  } }))));
+
+const DropdownField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': DropdownField_stories,
+  Default: Default$c,
+  CustomLabel: CustomLabel$1,
+  Error: Error$4,
+  CustomError: CustomError$1
+});
+
+const UseDropdownField_stories = {
+  title: "Hooks / useDropdownField",
+};
+function setupGraphQL$a() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  stencilHooks_module.useEffect(() => {
+    index_module.ae({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      index_module.ae(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+const SelectOptions = createHookStory(() => {
+  setupGraphQL$a();
+  return (index.h("sqm-portal-register", null,
+    index.h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Select an option", "dropdown-name": "options" },
+      index.h("sl-menu-item", { value: "option-1" }, "Option 1"),
+      index.h("sl-menu-item", { value: "option-2" }, "Option 2"),
+      index.h("sl-menu-item", { value: "option-3" }, "Option 3"))));
+});
+const Countries = createHookStory(() => {
+  setupGraphQL$a();
+  return (index.h("sqm-portal-register", null,
+    index.h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country", "dropdown-name": "countryCode" },
+      index.h("sl-menu-item", { value: "CA" }, "Canada"),
+      index.h("sl-menu-item", { value: "US" }, "United States"),
+      index.h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
+});
+
+const UseDropdownField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UseDropdownField_stories,
+  SelectOptions: SelectOptions,
+  Countries: Countries
+});
+
 const scenario$i = "@author:derek\r\n@owner:derek\r\nFeature: Reward Exchange List\r\n\r\n    The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\r\n    It populates a list from the reward exchange rules set up on a given tenant.\r\n\r\n    Background:\r\n        Given a tenant with reward exchange rules\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no visible exchanges\r\n        Given a user with no visible exchanges\r\n        When they view the reward exchange\r\n        Then no exchange options are displayed\r\n        And they see an image of a present\r\n        And \"Redeem Rewards\" in bold\r\n        And \"Use your points to redeem rewards once they become available\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no visible exchanges\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward exchange\r\n        Then they see the custom empty state\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\r\n        Given a user\r\n        When they load the reward exchange list\r\n        Then they see a loading Skeleton\r\n        And it has 8 skeleton cards\r\n        When the reward exchange rules have loaded\r\n        Then the skeleton is replaced with reward exchange options\r\n\r\n    @motivating\r\n    Scenario: An error banner appears when the reward exchange list fails to load\r\n        Given a user trying to view the reward exchange list\r\n        But it fails to load\r\n        Then an error banner is displayed\r\n        And it displays \"Unable to load reward exchange list. Please try again\"\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The exchange progress bar progresses through the exchange process\r\n        Given a user who is eligible for the tenants reward exchange rules\r\n        When they view the reward exchange list\r\n        Then the process bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with green outline, white fill and number 1 in green |\r\n            | Step 2 `Select` title in grey                                      |\r\n            | Step 2 circle with grey fill and number 2 in white                 |\r\n            | Step 3 `Confirm` title in grey                                     |\r\n            | Step 3 circle with grey fill and number 3 in white                 |\r\n            | lines between all steps are greyed out                             |\r\n        When they continue to the selection page\r\n        Then the progress bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with white checkmark and green fill                  |\r\n            | Step 2 `Select` title in black                                     |\r\n            | Step 2 circle with green outline, white fill and number 2 in green |\r\n            | Step 3 `Confirm` title in grey                                     |\r\n            | Step 3 circle with grey fill and number 3 in white                 |\r\n            | Green line between step 1 and 2                                    |\r\n            | Grey line between step 2 and 3                                     |\r\n        When they continue to the confirmation page\r\n        Then the progress bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with white checkmark and green fill                  |\r\n            | Step 2 `Select` title in black                                     |\r\n            | Step 2 circle with white checkmark and green fill                  |\r\n            | Step 3 `Confirm` title in black                                    |\r\n            | Step 3 circle with green outline, white fill and number 3 in green |\r\n            | Green line between all steps                                       |\r\n        When they continue to the redemption page\r\n        Then the progress bar displays the following elements\r\n            | elements                                          |\r\n            | Step 1 `Rewards` title in black                   |\r\n            | Step 1 circle with white checkmark and green fill |\r\n            | Step 2 `Select` title in black                    |\r\n            | Step 2 circle with white checkmark and green fill |\r\n            | Step 3 `Confirm` title in black                   |\r\n            | Step 3 circle with white checkmark and green fill |\r\n            | Green line between all steps                      |\r\n\r\n    @motivating\r\n    Scenario: Users must choose a reward exchange option to continue to the selection page\r\n        Given a user who is eligible for the tenants reward exchange rules\r\n        When they view the reward exchange list\r\n        Then the 'Continue' button is disabled\r\n        When they select a reward exchange card\r\n        Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\r\n        And the continue button is no longer disabled\r\n        When they click \"Continue\"\r\n        Then they are brought to the selection page\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Reward exchange rule names and images are used in the reward exchange cards\r\n        Given a tenant reward exchange rule\r\n        And it has name \"My Visa Exchange Rule\"\r\n        And it has an image\r\n        When a user views the reward exchange list\r\n        Then they see a exchange card with title \"My Visa Exchange Rule\"\r\n        And the exchange image on the left hand side of the card\r\n\r\n    @motivating\r\n    Scenario Outline: Reward exchange source values are displayed on reward exchange cards\r\n        Given a <type> reward exchange rule\r\n        When a user views the reward exchange list\r\n        Then they see <text> under the name on the exchange option cards\r\n        And the pretty values are localized to a user locale\r\n        Examples:\r\n            | type                        | text                                                                |\r\n            | FIXED_GLOBAL_REWARD         | the exchange source pretty value                                    |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n            | VARIABLE_GLOBAL_REWARD      | the exchange source min pretty value to the source max pretty value |\r\n            | VARIABLE_CREDIT_REWARD      | the exchange source min pretty value to the source max pretty value |\r\n\r\n    @motivating\r\n    Scenario Outline: Reward exchange cards can display customized error messages\r\n        Given a reward exchange rule\r\n        And it has <availabilityPredicate>\r\n        And the reward exchange list has prop \"not-available-error\" with <value>\r\n        When the user views the reward exchange list\r\n        Then the card for the reward exchange rule is disabled\r\n        And <message> is displayed\r\n        Examples:\r\n            | availabilityPredicate                                         | value                                                                                                           | message                         |\r\n            | 'champion' in user.segments ? \"NOT_CHAMPION\" : true           | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} }        | Sorry must be a champion!       |\r\n            | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\r\n\r\n    @motivating\r\n    Scenario: Exchange options are disabled if they put a user over the W9 limit\r\n        Given a user who is approaching their W9 limit\r\n        And a reward exchange rule\r\n        And its destination reward has a US taxable value that would put the user over their limit\r\n        When they view the reward exchange list\r\n        Then the reward exchange card is disabled\r\n        And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\r\n        And the text is orange\r\n        And the icon is orange\r\n\r\n    @motivating\r\n    Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\r\n        Given a <type> reward exchange rule\r\n        But the user lacks enough credit to exchange for it\r\n        When they view the reward exchange list\r\n        Then the reward exchange card is disabled\r\n        And a <text> error message is displayed on to the right of a exclamation triangle icon\r\n        And the text is orange\r\n        And the icon is orange\r\n        Examples:\r\n            | type                        | text                            |\r\n            | FIXED_GLOBAL_REWARD         | {prettySourceValue} required    |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n            | VARIABLE_GLOBAL_REWARD      | {prettySourceMinValue} required |\r\n            | VARIABLE_CREDIT_REWARD      | {prettySourceMinValue} required |\r\n\r\n    @motivating\r\n    Scenario: Users can go back to the Rewards page from the Select page\r\n        Given a user viewing the Select page\r\n        Then they see a \"Cancel\" text button\r\n        And a \"Continue to confirmation\" brand colour button in the bottom right corner\r\n        When they click \"Cancel\"\r\n        Then they return to the Rewards page\r\n\r\n    @motivating\r\n    Scenario: Users can go back to the Select Page from the Confirm page\r\n        Given a user viewing the Confirm page\r\n        Then they see a \"Back\" text button\r\n        And a \"Redeem\" brand colour button in the bottom right corner\r\n        When they click \"Back\"\r\n        Then they return to the Select Page\r\n\r\n    @motivating\r\n    Scenario: Reward rules with visibility predicates that evaluates to false are not shown\r\n        Given a tenant reward exchange rule with visibility predicates that evaluates to false\r\n        When a user views the reward exchange list\r\n        Then they do not see the card for that reward exchange rule\r\n\r\n    @motivating\r\n    Scenario Outline: Users can choose their reward option for variable rewards on the Select page\r\n        Given a <type> exchange rule\r\n        And it has the following fields\r\n            | fields      |\r\n            | name        |\r\n            | description |\r\n            | image       |\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see the exchange rule image on the left hand side\r\n        And on the right hand side they see the following in this order from top to bottom\r\n            | elements                                                                                          |\r\n            | exchange name                                                                                     |\r\n            | exchange description                                                                              |\r\n            | select list with all exchange options using pretty values, destination reward above source reward |\r\n        Examples:\r\n            | type                        |\r\n            | STEPPED_FIXED_GLOBAL_REWARD |\r\n            | VARIABLE_GLOBAL_REWARD      |\r\n            | VARIABLE_CREDIT_REWARD      |\r\n\r\n    @motivating\r\n    Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\r\n        Given a \"FIXED_GLOBAL_REWARD\" exchange rule\r\n        And it has the following fields\r\n            | fields      |\r\n            | name        |\r\n            | description |\r\n            | image       |\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see the exchange rule image on the left hand side\r\n        And on the right hand side they see the following in this order from top to bottom\r\n            | elements                                               |\r\n            | exchange name                                          |\r\n            | exchange source pretty value displayed in brand colour |\r\n            | exchange description                                   |\r\n\r\n    @motivating\r\n    Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\r\n        Given a <type> exchange rule\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see a drop down with all the reward exchange selections\r\n        When they click on the drop down\r\n        But they are not eligible for all of the exchanges options <dueToReason>\r\n        Then the ineligble options are disabled\r\n        And under the source value is <text>\r\n        Examples:\r\n            | type                        | dueToReason                     | text                         |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n            | VARIABLE_GLOBAL_REWARD      | due to insufficent source value | {prettySourceValue} required |\r\n            | VARIABLE_CREDIT_REWARD      | due to insufficent source value | {prettySourceValue} required |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | W9                              | US Tax Limit                 |\r\n            | VARIABLE_GLOBAL_REWARD      | W9                              | US Tax Limit                 |\r\n            | VARIABLE_CREDIT_REWARD      | W9                              | US Tax Limit                 |\r\n\r\n    @motivating\r\n    Scenario Outline: The Confirm page allows users to view their exchange before committing\r\n        Given a <type> exchange rule\r\n        When a user views the reward exchange list\r\n        And they select the exchange\r\n        And they progress to Confirm page\r\n        Then they see a row with title \"Reward\"\r\n        And it contains the exchange name\r\n        And it contains the exchange image\r\n        And they <maySee> a row with title \"Reward Amount\"\r\n        And it <mayContain> <amountTitle>\r\n        And they see a row with title \"Cost to Redeem\"\r\n        And it contains the source reward pretty value in bolded text\r\n        Examples:\r\n            | type                        | maySee | mayContain      | amountTitle                  |\r\n            | FIXED_GLOBAL_REWARD         | don't  | doesn't contain | N/A                          |\r\n            | VARIABLE_GLOBAL_REWARD      | see    | contains        | the pretty destination value |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | see    | contains        | the pretty destination value |\r\n            | VARIABLE_CREDIT_REWARD      | see    | contains        | the pretty destination value |\r\n\r\n    @motivating\r\n    Scenario: An error banner is displayed if an error occurs during redemeption\r\n        Given a user has selected a reward to exchange\r\n        And is on the confirmation page\r\n        When they click \"Redeem\"\r\n        But an error occurs\r\n        Then an error banner appears\r\n        And it contains details about the error\r\n        And the reward exchange is not completed\r\n\r\n    @motivating\r\n    Scenario: Confetti is displayed when a reward exchange succeeds\r\n        Given a user has selected a reward to exchange\r\n        And they are on the confirmation page\r\n        When they click \"Redeem\"\r\n        And the exchange is successful\r\n        Then they see confetti centered on the success page\r\n        And they see text describing what they exchanged for their new reward\r\n        And they see a \"Done\" brand colour button\r\n        When they click \"Done\"\r\n        Then they see the Rewards page\r\n\r\n    @motivating\r\n    Scenario: Fuel tank codes are shown when a reward exchange succeeds\r\n        Given a user has selected to exchange for a fuel tank reward\r\n        When they complete the reward exchange\r\n        And are on the success page\r\n        Then they see a textbox with their fuel tank code\r\n        And a clipboard icon\r\n        When they click the clipboard icon\r\n        Then their fuel tank code is copied to their clipboard\r\n\r\n    @motivating\r\n    Scenario Outline: Users can exchange for any type of reward\r\n        Given a <type> reward exchange rule for a <reward>\r\n        And a user who has enough source credit to exchange for the reward\r\n        When they go through the exchange flow\r\n        And exchange for their reward\r\n        Then their credit is exchanged for the <reward>\r\n        Examples:\r\n            | type                        | reward         |\r\n            | FIXED_GLOBAL_REWARD         | gift card      |\r\n            | FIXED_GLOBAL_REWARD         | fuel tank code |\r\n            | FIXED_GLOBAL_REWARD         | discount       |\r\n            | FIXED_GLOBAL_REWARD         | credit reward  |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | gift card      |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | discount       |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | credit reward  |\r\n            | VARIABLE_GLOBAL_REWARD      | gift card      |\r\n            | VARIABLE_GLOBAL_REWARD      | discount       |\r\n            | VARIABLE_GLOBAL_REWARD      | credit reward  |\r\n            | VARIABLE_CREDIT_REWARD      | credit reward  |";
 
 const RewardExchangeList_stories = {
@@ -10963,7 +11215,7 @@ const RewardsTable$1 = /*#__PURE__*/Object.freeze({
 const UseReferralTable_stories = {
   title: "Hooks / useReferralTable",
 };
-function setupGraphQL$9() {
+function setupGraphQL$b() {
   const id = "testestest";
   const accountId = id;
   //@ts-ignore
@@ -11006,7 +11258,7 @@ function setupGraphQLKlip$1({ token, id }) {
   return { id, accountId };
 }
 const ReferralTable$1 = createHookStory(() => {
-  setupGraphQL$9();
+  setupGraphQL$b();
   index_module.A("sam-partner-test-2");
   return (index.h("sqm-referral-table", null,
     index.h("sqm-referral-table-user-column", null),
@@ -11766,7 +12018,7 @@ const Scroll = /*#__PURE__*/Object.freeze({
   ShoelaceProps: ShoelaceProps
 });
 
-const scenario$v = "@author:Zach\r\n@owner:Zach\r\nFeature: Tabs\r\n\r\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\r\n\r\n  Background: A user on the portal is viewing the widget\r\n    Given a user viewing the Tabs component\r\n\r\n  @motivating\r\n  Scenario: Content inside the active tab is shown\r\n    Given the header is set to <tabHeader>\r\n    And the content inside is <tabContent>\r\n    And the user has clicked <tabHeader>\r\n    Then the <tabContent> is shown\r\n    Examples:\r\n      | tabHeader | tabContent               |\r\n      | Settings  | This is the settings tab |\r\n      | General   | This is the general tab  |\r\n      | History   | This is the history tab  |\r\n\r\n  @motivating\r\n  @ui\r\n  Scenario: The placement of the tabs is configurable\r\n    Given The placement prop has been passed a valid <placement>\r\n    Then tabs are placed on the <placementResult>\r\n    Examples:\r\n      | placement | placementResult                |\r\n      |           | top of the content             |\r\n      | left      | left hand side of the content  |\r\n      | right     | right hand side of the content |\r\n      | bottom    | bottom of the content          |\r\n\r\n\r\n  @minutae\r\n  @ui\r\n  Scenario Outline: Tabs are setup to use the brand color\r\n    Given the brand color is set to darkblue\r\n    Then the text inside the active tab is darkblue\r\n    And the underline of the active tab is darkblue\r\n\r\n  @ui\r\n  Scenario: Tabs are responsive\r\n    Given the user is on a mobile device\r\n    When there are more tabs than the horizontal space allows for\r\n    Then clickable arrows appear on the left and right of the tabs\r\n    And the tabs are scrollable";
+const scenario$v = "@author:Zach\r\n@owner:Zach\r\nFeature: Tabs\r\n\r\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\r\n\r\n  Background: A user on the portal is viewing the widget\r\n    Given a user viewing the Tabs component\r\n\r\n  @motivating\r\n  Scenario: Content inside the active tab is shown\r\n    Given the header is set to <tabHeader>\r\n    And the content inside is <tabContent>\r\n    And the user has clicked <tabHeader>\r\n    Then the <tabContent> is shown\r\n    Examples:\r\n      | tabHeader | tabContent               |\r\n      | Settings  | This is the settings tab |\r\n      | General   | This is the general tab  |\r\n      | History   | This is the history tab  |\r\n\r\n  @motivating\r\n  @ui\r\n  Scenario: The placement of the tabs is configurable\r\n    Given The placement prop has been passed a valid <placement>\r\n    Then tabs are placed on the <placementResult>\r\n    Examples:\r\n      | placement | placementResult                |\r\n      |           | top of the content             |\r\n      | left      | left hand side of the content  |\r\n      | right     | right hand side of the content |\r\n      | bottom    | bottom of the content          |\r\n\r\n\r\n  @minutae\r\n  @ui\r\n  Scenario Outline: Tabs are setup to use the brand color\r\n    Given the brand color is set to darkblue\r\n    Then the text inside the active tab is darkblue\r\n    And the underline of the active tab is darkblue\r\n\r\n  @ui\r\n  Scenario: Tabs are responsive\r\n    Given the user is on a mobile device\r\n    When there are more tabs than the horizontal space allows for\r\n    Then clickable arrows appear on the left and right of the tabs\r\n    And the tabs are scrollable\r\n\r\n  @landmine\r\n  Scenario: Program section cannot be used inside of tabs\r\n    Given a tabs component\r\n    And tab containing a program section with program-id \"test123\"\r\n    And the program section wraps a component using program context\r\n    When the tabs component is rendered\r\n    Then the \"sq:program-id\" event listener for the program section is removed\r\n    And the component does not use program-id \"test123\" to source its data\r\n    And falls back to the global program id";
 
 const Tabs_stories = {
   title: "Components/Tabs",
@@ -11804,117 +12056,457 @@ const SingleTab = () => (index.h("div", { style: { maxWidth: "700px", margin: "a
       </sqm-tabs>
     ` }));
 const ReferralProgram = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs>
-        <sqm-tab header="Leaderboard">
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs>
+    <sqm-tab header="Leaderboard">
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table>
+        <sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"
+          empty-state-header="View your rewards"
+          empty-state-text="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 const LoyaltyProgram = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="top">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="top">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table>
+        <sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"
+          empty-state-header="View your rewards"
+          empty-state-text="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 const BottomTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="bottom">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="bottom">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table
+        ><sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"
+          empty-state-header="View your rewards"
+          empty-state-text="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 const LeftTabs = () => (index.h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="left">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="left">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table
+        ><sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"
+          empty-state-header="View your rewards"
+          empty-state-text="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 const RightTabs = () => (index.h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="right">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="right">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table
+        ><sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"
+          empty-state-header="View your rewards"
+          empty-state-text="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 
 const Tabs = /*#__PURE__*/Object.freeze({
@@ -11939,7 +12531,7 @@ const ShareCode_stories = {
   },
 };
 const ShareCode = () => {
-  return index.h("sqm-share-code", null);
+  return index.h("sqm-share-code", { tooltiptext: "Copied to Clipboard" });
 };
 const CustomTooltipText = () => {
   return index.h("sqm-share-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
@@ -11968,7 +12560,7 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$b = `
+const Default$d = `
  // No CSS
 `;
 const Orangey = `
@@ -12002,7 +12594,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$b,
+  Default: Default$d,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -14608,6 +15200,8 @@ const stories = [
   UseBigStat,
   UseEditProfile,
   UseLeaderboard,
+  UseCheckboxField,
+  UseDropdownField,
   Router,
   PortalFrame,
   EditProfile,
@@ -14639,6 +15233,8 @@ const stories = [
   Hero,
   ReferralIframe$1,
   NameFields$1,
+  CheckboxField,
+  DropdownField,
   RewardExchangeList,
   UseRewardExchangeList,
   UseTaskCard,