@saasquatch/mint-components 1.6.1-2 → 1.6.1-5

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

@@ -3785,11 +3785,11 @@ const NewPortal = /*#__PURE__*/Object.freeze({
   Activity: Activity
 });
 
-const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-portal-container\n        justify-content=\"start\"\n        direction=\"row\"\n        center\n        display=\"flex\"\n        gap=\"xx-large\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/referralsCount\"\n          >\n            <sqm-text>\n              <p>Referrals</p>\n            </sqm-text>\n          </sqm-big-stat>\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n          >\n            <sqm-text>\n              <p>Giftcards</p>\n            </sqm-text>\n          </sqm-big-stat>\n        </sqm-stat-container>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <sqm-text slot=\"label\">\n            <h3>Get rewarded when your friend uses our product</h3>\n          </sqm-text>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-text\n              >They’ll get a $50 credit towards a new account and you’ll get:\n            </sqm-text>\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-text>Choose how you want to share: </sqm-text>\n            <sqm-text>\n              <sub>Your unique referral link:</sub>\n              <sqm-share-link\n                tooltip-text=\"Copied to Clipboard\"\n                tooltip-lifespan=\"1000\"\n              >\n              </sqm-share-link>\n            </sqm-text>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n      </sqm-portal-container>\n      <sqm-tabs placement=\"top\">\n        <sqm-tab header=\"Leaderboard\">\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-hero-image\n              image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"\n              description=\"Be one of the top 3 referrers at the end of the year and receive our product free for 1 year!\"\n              layout=\"columns\"\n              image-percentage=\"30\"\n              padding-image=\"large\"\n              padding-text=\"large\"\n              background-color=\"#EFF8FE\"\n              image-mobile-pos=\"top\"\n              image-pos=\"right\"\n              overlay-opacity=\"0.75\"\n            >\n            </sqm-hero-image>\n            <sqm-leaderboard\n              usersheading=\"Referrer\"\n              statsheading=\"Referrals\"\n              rankheading=\"Rank\"\n              rank-type=\"rowNumber\"\n              leaderboard-type=\"topStartedReferrers\"\n              show-rank\n              anonymous-user=\"Anonymous User\"\n            >\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png\"\n                empty-state-header=\"View your rank in the leaderboard\"\n                empty-state-text=\"Be the first to refer a friend and reach the top of the leaderboard\"\n              >\n              </sqm-empty>\n            </sqm-leaderboard>\n          </sqm-portal-container>\n        </sqm-tab>\n        <sqm-tab header=\"Referral history\">\n          <sqm-referral-table\n            per-page=\"4\"\n            hidden-columns=\"2\"\n            more-label=\"Next\"\n            prev-label=\"Prev\"\n            show-labels\n\t\t\tsm-breakpoint=\"599\"\n\t\t\tmd-breakpoint=\"799\"\n          >\n            <sqm-referral-table-user-column\n              column-title=\"User\"\n              anonymous-user=\"Anonymous User\"\n              deleted-user=\"Deleted User\"\n            >\n            </sqm-referral-table-user-column>\n            <sqm-referral-table-status-column\n              column-title=\"Referral status\"\n              converted-status-text=\"Converted\"\n              in-progress-status-text=\"In Progress\"\n            >\n            </sqm-referral-table-status-column>\n            <sqm-referral-table-rewards-column\n              column-title=\"Rewards\"\n              expiring-text=\"Expiring in\"\n              fuel-tank-text=\"Your code is\"\n              pending-for-text=\"{status} for {date}\"\n              reward-received-text=\"Reward received on\"\n              status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n              status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n            >\n            </sqm-referral-table-rewards-column>\n            <sqm-referral-table-date-column\n              column-title=\"Date referred\"\n              date-shown=\"dateReferralStarted\"\n            >\n            </sqm-referral-table-date-column>\n            <sqm-empty\n              empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n              empty-state-header=\"View your referral details\"\n              empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n            ></sqm-empty>\n          </sqm-referral-table>\n        </sqm-tab>\n      </sqm-tabs>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-portal-container\n        justify-content=\"start\"\n        direction=\"row\"\n        center\n        display=\"flex\"\n        gap=\"xx-large\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/referralsCount\"\n          >\n            <p>Referrals</p>\n          </sqm-big-stat>\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n          >\n            <p>Giftcards</p>\n          </sqm-big-stat>\n        </sqm-stat-container>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n      </sqm-portal-container>\n      <sqm-tabs placement=\"top\">\n        <sqm-tab header=\"Leaderboard\">\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-hero-image\n              image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"\n              description=\"Be one of the top 3 referrers at the end of the year and receive our product free for 1 year!\"\n              layout=\"columns\"\n              image-percentage=\"30\"\n              padding-image=\"large\"\n              padding-text=\"large\"\n              background-color=\"#EFF8FE\"\n              image-mobile-pos=\"top\"\n              image-pos=\"right\"\n              overlay-opacity=\"0.75\"\n            >\n            </sqm-hero-image>\n            <sqm-leaderboard\n              usersheading=\"Referrer\"\n              statsheading=\"Referrals\"\n              rankheading=\"Rank\"\n              rank-type=\"rowNumber\"\n              leaderboard-type=\"topStartedReferrers\"\n              show-rank\n              anonymous-user=\"Anonymous User\"\n            >\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png\"\n                empty-state-header=\"View your rank in the leaderboard\"\n                empty-state-text=\"Be the first to refer a friend and reach the top of the leaderboard\"\n              >\n              </sqm-empty>\n            </sqm-leaderboard>\n          </sqm-portal-container>\n        </sqm-tab>\n        <sqm-tab header=\"Referral history\">\n          <sqm-referral-table\n            per-page=\"4\"\n            hidden-columns=\"2\"\n            more-label=\"Next\"\n            prev-label=\"Prev\"\n            show-labels\n            sm-breakpoint=\"599\"\n            md-breakpoint=\"799\"\n          >\n            <sqm-referral-table-user-column\n              column-title=\"User\"\n              anonymous-user=\"Anonymous User\"\n              deleted-user=\"Deleted User\"\n            >\n            </sqm-referral-table-user-column>\n            <sqm-referral-table-status-column\n              column-title=\"Referral status\"\n              converted-status-text=\"Converted\"\n              in-progress-status-text=\"In Progress\"\n            >\n            </sqm-referral-table-status-column>\n            <sqm-referral-table-rewards-column\n              column-title=\"Rewards\"\n              expiring-text=\"Expiring in\"\n              fuel-tank-text=\"Your code is\"\n              pending-for-text=\"{status} for {date}\"\n              reward-received-text=\"Reward received on\"\n              status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n              status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n            >\n            </sqm-referral-table-rewards-column>\n            <sqm-referral-table-date-column\n              column-title=\"Date referred\"\n              date-shown=\"dateReferralStarted\"\n            >\n            </sqm-referral-table-date-column>\n            <sqm-empty\n              empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n              empty-state-header=\"View your referral details\"\n              empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n            ></sqm-empty>\n          </sqm-referral-table>\n        </sqm-tab>\n      </sqm-tabs>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-portal-container\n        direction=\"row\"\n        center\n        display=\"flex\"\n        justify-content=\"space-between\"\n        gap=\"xxx-large\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/referralsCount\"\n          >\n            <sqm-text>\n              <p>Referrals</p>\n            </sqm-text>\n          </sqm-big-stat>\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n          >\n            <sqm-text>\n              <p>Giftcards Earned</p>\n            </sqm-text>\n          </sqm-big-stat>\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n          >\n            <sqm-text>\n              <p>Points Balance</p>\n            </sqm-text>\n          </sqm-big-stat>\n        </sqm-stat-container>\n        <sqm-scroll\n          scroll-id=\"tab-3\"\n          outline\n          button-type=\"primary\"\n          button-text=\"Redeem your rewards\"\n          mobile\n        >\n        </sqm-scroll>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <sqm-text slot=\"label\">\n            <h3>Share $50 with friends</h3>\n          </sqm-text>\n          <sqm-text slot=\"content\">\n            <p>\n              They’ll get a $50 credit towards a new account and you’ll get up\n              to $1200\n            </p>\n          </sqm-text>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-text\n              >They’ll get a $50 credit towards a new account and you’ll get:\n            </sqm-text>\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-text>Choose how you want to share: </sqm-text>\n            <sqm-text>\n              <sub>Your unique referral link:</sub>\n              <sqm-share-link\n                tooltip-text=\"Copied to Clipboard\"\n                tooltip-lifespan=\"1000\"\n              >\n              </sqm-share-link>\n            </sqm-text>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          justify-content=\"\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <sqm-text slot=\"label\">\n              <h3>Earn more rewards</h3>\n            </sqm-text>\n            <sqm-text slot=\"content\">\n              <p>\n                Get points while using our product. Use those points to redeem\n                rewards like one free month of Enterprise or two plane tickets\n                to anywhere in North America\n              </p>\n            </sqm-text>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n        </sqm-portal-container>\n        <sqm-tabs>\n          <sqm-tab header=\"Leaderboard\">\n            <sqm-portal-container gap=\"large\">\n              <sqm-hero-image\n                image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"\n                description=\"Be one of the top 3 referrers at the end of the year and receive our product free for 1 year!\"\n                layout=\"columns\"\n                image-percentage=\"33%\"\n                padding-image=\"large\"\n                padding-text=\"large\"\n                background-color=\"#EFF8FE\"\n              >\n              </sqm-hero-image>\n              <sqm-leaderboard\n                usersheading=\"Referrer\"\n                statsheading=\"Referrals\"\n                rankheading=\"Rank\"\n                rank-type=\"rowNumber\"\n                leaderboard-type=\"topStartedReferrers\"\n                show-rank\n                anonymous-user=\"Anonymous User\"\n              >\n                <sqm-empty\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png\"\n                  empty-state-header=\"View your rank in the leaderboard\"\n                  empty-state-text=\"Be the first to refer a friend and reach the top of the leaderboard\"\n                >\n                </sqm-empty>\n              </sqm-leaderboard>\n            </sqm-portal-container>\n          </sqm-tab>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-tab>\n          <sqm-tab header=\"Redeem\">\n            <sqm-reward-exchange-list\n              back-text=\"Back\"\n              button-text=\"Exchange Rewards\"\n              cancel-text=\"Cancel\"\n              choose-amount-title=\"Select\"\n              choose-reward-title=\"Rewards\"\n              confirmation-title=\"Confirm\"\n              continue-text=\"Continue\"\n              continue-to-confirmation-text=\"Continue to confirmation\"\n              done-text=\"Done\"\n              reward-title=\"Choose a reward\"\n              not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\n              not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\n              query-error=\"Unable to load reward exchange list. Please try again\"\n              redeem-text=\"Redeem\"\n              redeem-title=\"Confirm and redeem\"\n              redemption-error=\"An error occured trying to redeem this reward. Please try again\"\n              redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\n              select-text=\"Select amount to receive\"\n              source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\n              tooltiptext=\"Copied\"\n              reward-name-title=\"Reward\"\n              reward-amount-title=\"Reward Amount\"\n              cost-title=\"Cost to Redeem\"\n              reward-redeemed-text=\"Reward redeemed\"\n              skeleton-card-num=\"8\"\n              promo-code=\"Promo Code\"\n              tooltip-text=\"Copied!\"\n            >\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\n                empty-state-header=\"Redeem rewards\"\n                empty-state-text=\"Use your points to redeem rewards once they become available\"\n              ></sqm-empty>\n            </sqm-reward-exchange-list>\n          </sqm-tab>\n        </sqm-tabs>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-portal-container\n        direction=\"row\"\n        center\n        display=\"flex\"\n        justify-content=\"space-between\"\n        gap=\"xxx-large\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/referralsCount\"\n          >\n            <p>Referrals</p>\n          </sqm-big-stat>\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n          >\n            <p>Giftcards Earned</p>\n          </sqm-big-stat>\n          <sqm-big-stat\n            flex-reverse=\"true\"\n            alignment=\"left\"\n            stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n          >\n            <p>Points Balance</p>\n          </sqm-big-stat>\n        </sqm-stat-container>\n        <sqm-scroll\n          scroll-id=\"tab-3\"\n          outline\n          button-type=\"primary\"\n          button-text=\"Redeem your rewards\"\n          mobile\n        >\n        </sqm-scroll>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Share $50 with friends</h3>\n          <p slot=\"content\">\n            They’ll get a $50 credit towards a new account and you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share:\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          justify-content=\"\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n        </sqm-portal-container>\n        <sqm-tabs>\n          <sqm-tab header=\"Leaderboard\">\n            <sqm-portal-container gap=\"large\">\n              <sqm-hero-image\n                image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"\n                description=\"Be one of the top 3 referrers at the end of the year and receive our product free for 1 year!\"\n                layout=\"columns\"\n                image-percentage=\"33%\"\n                padding-image=\"large\"\n                padding-text=\"large\"\n                background-color=\"#EFF8FE\"\n              >\n              </sqm-hero-image>\n              <sqm-leaderboard\n                usersheading=\"Referrer\"\n                statsheading=\"Referrals\"\n                rankheading=\"Rank\"\n                rank-type=\"rowNumber\"\n                leaderboard-type=\"topStartedReferrers\"\n                show-rank\n                anonymous-user=\"Anonymous User\"\n              >\n                <sqm-empty\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png\"\n                  empty-state-header=\"View your rank in the leaderboard\"\n                  empty-state-text=\"Be the first to refer a friend and reach the top of the leaderboard\"\n                >\n                </sqm-empty>\n              </sqm-leaderboard>\n            </sqm-portal-container>\n          </sqm-tab>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-tab>\n          <sqm-tab header=\"Redeem\">\n            <sqm-reward-exchange-list\n              back-text=\"Back\"\n              button-text=\"Exchange Rewards\"\n              cancel-text=\"Cancel\"\n              choose-amount-title=\"Select\"\n              choose-reward-title=\"Rewards\"\n              confirmation-title=\"Confirm\"\n              continue-text=\"Continue\"\n              continue-to-confirmation-text=\"Continue to confirmation\"\n              done-text=\"Done\"\n              reward-title=\"Choose a reward\"\n              not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\n              not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\n              query-error=\"Unable to load reward exchange list. Please try again\"\n              redeem-text=\"Redeem\"\n              redeem-title=\"Confirm and redeem\"\n              redemption-error=\"An error occured trying to redeem this reward. Please try again\"\n              redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\n              select-text=\"Select amount to receive\"\n              source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\n              tooltiptext=\"Copied\"\n              reward-name-title=\"Reward\"\n              reward-amount-title=\"Reward Amount\"\n              cost-title=\"Cost to Redeem\"\n              reward-redeemed-text=\"Reward redeemed\"\n              skeleton-card-num=\"8\"\n              promo-code=\"Promo Code\"\n              tooltip-text=\"Copied!\"\n            >\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\n                empty-state-header=\"Redeem rewards\"\n                empty-state-text=\"Use your points to redeem rewards once they become available\"\n              ></sqm-empty>\n            </sqm-reward-exchange-list>\n          </sqm-tab>\n        </sqm-tabs>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://i.imgur.com/bTwu1Um.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <sqm-text>\n                <p>Points Redeemed</p>\n              </sqm-text>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <sqm-text>\n                <p>Points Balance</p>\n              </sqm-text>\n            </sqm-big-stat>\n          </sqm-stat-container>\n          <sqm-scroll\n            scroll-id=\"tab-2\"\n            outline\n            button-type=\"primary\"\n            button-text=\"Redeem your rewards\"\n            mobile\n            size=\"medium\"\n          >\n          </sqm-scroll>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"left\"\n          >\n            <sqm-text>Earn points </sqm-text>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-tabs placement=\"top\">\n            <sqm-tab header=\"Reward history\">\n              <sqm-rewards-table\n                per-page=\"4\"\n                hidden-columns=\"0\"\n                more-label=\"Next\"\n                prev-label=\"Prev\"\n                show-labels\n                sm-breakpoint=\"599\"\n                md-breakpoint=\"799\"\n              >\n                <sqm-rewards-table-reward-column\n                  available-text=\"{availableAmount} remaining\"\n                  column-title=\"Reward\"\n                  copy-text=\"Copied!\"\n                  redeemed-text=\"{redeemedAmount} redeemed\"\n                >\n                </sqm-rewards-table-reward-column>\n                <sqm-rewards-table-source-column\n                  anonymous-user=\"Anonymous User\"\n                  column-title=\"Source\"\n                  deleted-user=\"Deleted User\"\n                  referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                  reward-exchange-text=\"Reward Exchange\"\n                  reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n                >\n                </sqm-rewards-table-source-column>\n                <sqm-rewards-table-status-column\n                  column-title=\"Status\"\n                  expiry-text=\"Expires on \"\n                  status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n                >\n                </sqm-rewards-table-status-column>\n                <sqm-rewards-table-date-column\n                  column-title=\"Date received\"\n                  date-shown=\"dateGiven\"\n                >\n                </sqm-rewards-table-date-column>\n                <sqm-empty\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                  empty-state-header=\"View your rewards\"\n                  empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n                >\n                </sqm-empty>\n              </sqm-rewards-table>\n            </sqm-tab>\n            <sqm-tab header=\"Redeem\">\n              <sqm-reward-exchange-list\n                back-text=\"Back\"\n                button-text=\"Exchange Rewards\"\n                cancel-text=\"Cancel\"\n                choose-amount-title=\"Select\"\n                choose-reward-title=\"Rewards\"\n                confirmation-title=\"Confirm\"\n                continue-text=\"Continue\"\n                continue-to-confirmation-text=\"Continue to confirmation\"\n                done-text=\"Done\"\n                reward-title=\"Choose a reward\"\n                not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\n                not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\n                query-error=\"Unable to load reward exchange list. Please try again\"\n                redeem-text=\"Redeem\"\n                redeem-title=\"Confirm and redeem\"\n                redemption-error=\"An error occured trying to redeem this reward. Please try again\"\n                redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\n                select-text=\"Select amount to receive\"\n                source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\n                tooltiptext=\"Copied\"\n                reward-name-title=\"Reward\"\n                reward-amount-title=\"Reward Amount\"\n                cost-title=\"Cost to Redeem\"\n                reward-redeemed-text=\"Reward redeemed\"\n                skeleton-card-num=\"8\"\n                promo-code=\"Promo Code\"\n                tooltip-text=\"Copied!\"\n              >\n                <sqm-empty\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\n                  empty-state-header=\"Redeem rewards\"\n                  empty-state-text=\"Use your points to redeem rewards once they become available\"\n                ></sqm-empty>\n              </sqm-reward-exchange-list>\n            </sqm-tab>\n          </sqm-tabs>\n        </sqm-portal-container>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://i.imgur.com/bTwu1Um.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <p>Points Redeemed</p>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <p>Points Balance</p>\n            </sqm-big-stat>\n          </sqm-stat-container>\n          <sqm-scroll\n            scroll-id=\"tab-2\"\n            outline\n            button-type=\"primary\"\n            button-text=\"Redeem your rewards\"\n            mobile\n            size=\"medium\"\n          >\n          </sqm-scroll>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"left\"\n          >\n            Earn points\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-tabs placement=\"top\">\n            <sqm-tab header=\"Reward history\">\n              <sqm-rewards-table\n                per-page=\"4\"\n                hidden-columns=\"0\"\n                more-label=\"Next\"\n                prev-label=\"Prev\"\n                show-labels\n                sm-breakpoint=\"599\"\n                md-breakpoint=\"799\"\n              >\n                <sqm-rewards-table-reward-column\n                  available-text=\"{availableAmount} remaining\"\n                  column-title=\"Reward\"\n                  copy-text=\"Copied!\"\n                  redeemed-text=\"{redeemedAmount} redeemed\"\n                >\n                </sqm-rewards-table-reward-column>\n                <sqm-rewards-table-source-column\n                  anonymous-user=\"Anonymous User\"\n                  column-title=\"Source\"\n                  deleted-user=\"Deleted User\"\n                  referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                  reward-exchange-text=\"Reward Exchange\"\n                  reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n                >\n                </sqm-rewards-table-source-column>\n                <sqm-rewards-table-status-column\n                  column-title=\"Status\"\n                  expiry-text=\"Expires on \"\n                  status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n                >\n                </sqm-rewards-table-status-column>\n                <sqm-rewards-table-date-column\n                  column-title=\"Date received\"\n                  date-shown=\"dateGiven\"\n                >\n                </sqm-rewards-table-date-column>\n                <sqm-empty\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                  empty-state-header=\"View your rewards\"\n                  empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n                >\n                </sqm-empty>\n              </sqm-rewards-table>\n            </sqm-tab>\n            <sqm-tab header=\"Redeem\">\n              <sqm-reward-exchange-list\n                back-text=\"Back\"\n                button-text=\"Exchange Rewards\"\n                cancel-text=\"Cancel\"\n                choose-amount-title=\"Select\"\n                choose-reward-title=\"Rewards\"\n                confirmation-title=\"Confirm\"\n                continue-text=\"Continue\"\n                continue-to-confirmation-text=\"Continue to confirmation\"\n                done-text=\"Done\"\n                reward-title=\"Choose a reward\"\n                not-available-error=\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\"\n                not-enough-error=\"Not enough {sourceUnit} to redeem for this reward\"\n                query-error=\"Unable to load reward exchange list. Please try again\"\n                redeem-text=\"Redeem\"\n                redeem-title=\"Confirm and redeem\"\n                redemption-error=\"An error occured trying to redeem this reward. Please try again\"\n                redemption-success-text=\"Redeemed {sourceValue} for {destinationValue}\"\n                select-text=\"Select amount to receive\"\n                source-amount-message=\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\"\n                tooltiptext=\"Copied\"\n                reward-name-title=\"Reward\"\n                reward-amount-title=\"Reward Amount\"\n                cost-title=\"Cost to Redeem\"\n                reward-redeemed-text=\"Reward redeemed\"\n                skeleton-card-num=\"8\"\n                promo-code=\"Promo Code\"\n                tooltip-text=\"Copied!\"\n              >\n                <sqm-empty\n                  empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png\"\n                  empty-state-header=\"Redeem rewards\"\n                  empty-state-text=\"Use your points to redeem rewards once they become available\"\n                ></sqm-empty>\n              </sqm-reward-exchange-list>\n            </sqm-tab>\n          </sqm-tabs>\n        </sqm-portal-container>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
 const Widget_stories = {
   title: "Templates / Widgets",

package/dist/collection/collection-manifest.json

@@ -42,6 +42,7 @@
     "./components/sqm-program-explainer/sqm-program-explainer.js",
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
+    "./components/sqm-qa/sqm-qa.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",

package/dist/collection/components/sqm-brand/sqm-brand.js

@@ -7,9 +7,8 @@ import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
  * @uiName Brand Container
  * @slots [{"name":"","title":"Branded Content"}]
  * @exampleGroup Common Components
- * @example Brand Container - <sqm-brand color="" brand="Nunito Sans">Add your branded content here!</sqm-brand>
+ * @example Brand Container - <sqm-brand brand="Nunito Sans">Add your branded content here!</sqm-brand>
  */
-//FINISH ME Default stencil blue!
 export class BrandComponent {
   constructor() {
     withHooks(this);
@@ -79,9 +78,6 @@ export class BrandComponent {
           }, {
             "text": "color",
             "name": "format"
-          }, {
-            "text": "#FFF",
-            "name": "default"
           }],
         "text": "Controls the primary brand color used in the Mint Components library."
       },
@@ -106,7 +102,7 @@ export class BrandComponent {
             "text": "\"Nunito Sans\"",
             "name": "default"
           }],
-        "text": "The brand font that you want to use"
+        "text": "A font from the Google Fonts library used throughout the widget. This value is case sensitive."
       },
       "attribute": "brand-font",
       "reflect": false

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -6,8 +6,8 @@ import { CardFeedView } from "./sqm-card-feed-view";
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
  * @exampleGroup Rewards
+ * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 100 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 150 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
  */
-//FINISH ME
 export class CardFeed {
   constructor() {
     this.ignored = true;

package/dist/collection/components/sqm-empty/sqm-empty.js

@@ -72,6 +72,9 @@ export class HeroImage {
         "tags": [{
             "text": "Empty State Text",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
         "text": ""
       },

package/dist/collection/components/sqm-graphql-client-provider/sqm-graphql-client-provider.js

@@ -4,6 +4,7 @@ import { Component, Host, Prop, State, h } from "@stencil/core";
 import { useGraphQLClientProvider } from "./useGraphQLProvider";
 /**
  * @uiName GraphQL Client Provider
+ * @canvasRenderer always-replace
  */
 export class GraphQLClientProvider {
   constructor() {

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -41,9 +41,7 @@ export class HeroImage {
      */
     this.imageMobilePos = "top";
     /**
-     * CTA Button Opens Link in New Tab
-     *
-     * @uiName Button New Tab
+     * @uiName Open Link in New Tab
      */
     this.buttonNewTab = false;
     /**
@@ -88,7 +86,7 @@ export class HeroImage {
             "text": "url",
             "name": "format"
           }, {
-            "text": "Image Link",
+            "text": "Image",
             "name": "uiName"
           }],
         "text": ""
@@ -321,7 +319,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Title Text",
+            "text": "Title",
             "name": "uiName"
           }],
         "text": ""
@@ -341,8 +339,11 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Description Text",
+            "text": "Description",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -361,7 +362,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "CTA Button Text",
+            "text": "Button Text",
             "name": "uiName"
           }],
         "text": ""
@@ -381,7 +382,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "CTA Button Link",
+            "text": "Button Link",
             "name": "uiName"
           }],
         "text": ""
@@ -401,10 +402,10 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Button New Tab",
+            "text": "Open Link in New Tab",
             "name": "uiName"
           }],
-        "text": "CTA Button Opens Link in New Tab"
+        "text": ""
       },
       "attribute": "button-new-tab",
       "reflect": false,

package/dist/collection/components/sqm-leaderboard-rank/sqm-leaderboard-rank.js

@@ -8,9 +8,9 @@ import { intl } from "../../global/global";
 /**
  * @uiName Leaderboard Rank
  * @exampleGroup Leaderboards
- * @example Referral Converted Leaderboard - <sqm-leaderboard-rank leaderboard-type="topConvertedReferrers" rank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, refer a friend!"></sqm-leaderboard-rank>
- * @example Referral Started Leaderboard - <sqm-leaderboard-rank leaderboard-type="topStartedReferrers" rank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, refer a friend!"></sqm-leaderboard-rank>
- * @example Point Earners Leaderboard - <sqm-leaderboard-rank rleaderboard-type="topPointEarners" ank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, earn points!"></sqm-leaderboard-rank>
+ * @example Referral Converted Leaderboard Rank - <sqm-leaderboard-rank leaderboard-type="topConvertedReferrers" rank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, refer a friend!"></sqm-leaderboard-rank>
+ * @example Referral Started Leaderboard Rank - <sqm-leaderboard-rank leaderboard-type="topStartedReferrers" rank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, refer a friend!"></sqm-leaderboard-rank>
+ * @example Point Earners Leaderboard Rank - <sqm-leaderboard-rank rleaderboard-type="topPointEarners" ank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, earn points!"></sqm-leaderboard-rank>
  */
 export class LeaderboardRank {
   constructor() {

package/dist/collection/components/sqm-program-menu/sqm-program-menu.js

@@ -4,6 +4,7 @@ import { useProgramMenu } from "./useProgramMenu";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Portal Menu
+ * @canvasRenderer always-replace
  */
 export class ProgramMenu {
   constructor() {