@saasquatch/mint-components 1.5.0-113 → 1.5.0-117

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

@@ -4,33 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-633d1fb7.js');
+require('./global-13123238.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-f972f103.js');
 require('./extends-08099afd.js');
 require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
-const GenericTableView = require('./GenericTableView-f947b749.js');
+const GenericTableView = require('./GenericTableView-ed381b89.js');
 const luxon = require('./luxon-59ca7d19.js');
 require('./utils-01dbfd4a.js');
-require('./sqm-text-span-view-f101dedf.js');
+require('./sqm-text-span-view-c54af22c.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-d9ac6a95.js');
-const sqmHeroView = require('./sqm-hero-view-a13795c0.js');
+const sqmHeroView = require('./sqm-hero-view-3b0d45d0.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-2ac54715.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-c32a55d6.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-cac67bc9.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-10c0b54f.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-d101032e.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-72c40619.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1fdc957e.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4c78e231.js');
-const sqmStatContainerView = require('./sqm-stat-container-view-8aaf6cb8.js');
-const ShadowViewAddon = require('./ShadowViewAddon-79dd6c07.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-186a5f7e.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-535ae80c.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-3c62d7a6.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-12c9cd73.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-60ca6e6c.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-f3c8475a.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1457,11 +1456,11 @@ const ShareButton_stories = {
   },
 };
 const WithIconPrefix = () => {
-  const props = { medium: "whatsapp", iconslot: "prefix" };
+  const props = { medium: "whatsapp", iconSlot: "prefix" };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconSuffix = () => {
-  const props = { medium: "whatsapp", iconslot: "suffix" };
+  const props = { medium: "whatsapp", iconSlot: "suffix" };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconOverride = () => {
@@ -1479,15 +1478,15 @@ const TextStyle = () => {
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutIcon = () => {
-  const props = { medium: "facebook", hideicon: true };
+  const props = { medium: "facebook", hideIcon: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutText = () => {
-  const props = { medium: "facebook", hidetext: true };
+  const props = { medium: "facebook", hideText: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const TextStyleWithoutIcon = () => {
-  const props = { medium: "facebook", type: "text", hideicon: true };
+  const props = { medium: "facebook", type: "text", hideIcon: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithCustomColors = () => {
@@ -1496,7 +1495,7 @@ const WithCustomColors = () => {
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
-    iconslot: "prefix",
+    iconSlot: "prefix",
   };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
@@ -1504,8 +1503,8 @@ const WithCustomBorderRadius = () => {
   const props = {
     medium: "facebook",
     type: "text",
-    borderradius: 8,
-    iconslot: "prefix",
+    borderRadius: 8,
+    iconSlot: "prefix",
   };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
@@ -1625,7 +1624,7 @@ const EmptyState = /*#__PURE__*/Object.freeze({
   SlottedIntoComponent: SlottedIntoComponent
 });
 
-const scenario$2 = "@author:johan\r\n@owner:johan\r\nFeature: Share Link\r\n\r\n  The share link component is a box that allows users to see and copy their share link for a given program\r\n\r\n  Background: Environment\r\n    Given there is a valid program ID in the environment\r\n    And there is a valid user ID and account ID in the environment\r\n\r\n  @motivating\r\n  Scenario: A Users sharelink can be copied to their clipboard\r\n    Given tooltiptext is \"hello tooltip\"\r\n    When the component renders\r\n    Then there is a textbox with the user's share link\r\n    When the clipboard icon is clicked\r\n    Then the link is copied to clipboard\r\n    And a tooltip appears for ~1 second\r\n\r\n  @minutae\r\n  Scenario: Tooltip lifespan defaults to 2000\r\n    Given the tooltip's lifespan is set to 2000\r\n    And there is tooltip text\r\n    When the component renders\r\n    And the clipboard icon is clicked\r\n    Then a tooltip appears for ~2 seconds\r\n\r\n  @minutae\r\n  Scenario: Demo\r\n    Given isDemo() returns true\r\n    Then the share link is \"https://www.example.com/sharelink/abc\"\r\n    And the component won't be interactive\r\n    And the tooltip is hidden\r\n\r\n  @minutae\r\n  Scenario: Program ID can be sourced from prop\r\n    Given the programId prop is set to \"program-a\"\r\n    And window.widgetIdent.programId is set to \"program-b\"\r\n    When the component renders\r\n    Then the share link is for \"program-a\"\r\n\r\n  @minutae\r\n  Scenario: Program ID can be sourced from window\r\n    Given the programId prop is unset\r\n    And window.widgetIdent.programId is set to \"program-b\"\r\n    When the component renders\r\n    Then the share link is for \"program-b\"\r\n\r\n  @minutae\r\n  Scenario: An analytic event is fired when a user copies their sharelink\r\n    Given a user viewing the share link component\r\n    And the component is rendered for \"program-a\"\r\n    When they click to copy their link\r\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\r\n    And it is for \"program-a\"\r\n    And it has share medium \"DIRECT\"\r\n";
+const scenario$2 = "@author:johan\r\n@owner:johan\r\nFeature: Share Link\r\n\r\n  The share link component is a box that allows users to see and copy their share link for a given program\r\n\r\n  Background: Environment\r\n    Given there is a valid program ID in the environment\r\n    And there is a valid user ID and account ID in the environment\r\n\r\n  @motivating\r\n  Scenario: A Users sharelink can be copied to their clipboard\r\n    Given tooltipText is \"hello tooltip\"\r\n    When the component renders\r\n    Then there is a textbox with the user's share link\r\n    When the clipboard icon is clicked\r\n    Then the link is copied to clipboard\r\n    And a tooltip appears for ~1 second\r\n\r\n  @minutae\r\n  Scenario: Tooltip lifespan defaults to 2000\r\n    Given the tooltip's lifespan is set to 2000\r\n    And there is tooltip text\r\n    When the component renders\r\n    And the clipboard icon is clicked\r\n    Then a tooltip appears for ~2 seconds\r\n\r\n  @minutae\r\n  Scenario: Demo\r\n    Given isDemo() returns true\r\n    Then the share link is \"https://www.example.com/sharelink/abc\"\r\n    And the component won't be interactive\r\n    And the tooltip is hidden\r\n\r\n  @minutae\r\n  Scenario: Program ID can be sourced from prop\r\n    Given the programId prop is set to \"program-a\"\r\n    And window.widgetIdent.programId is set to \"program-b\"\r\n    When the component renders\r\n    Then the share link is for \"program-a\"\r\n\r\n  @minutae\r\n  Scenario: Program ID can be sourced from window\r\n    Given the programId prop is unset\r\n    And window.widgetIdent.programId is set to \"program-b\"\r\n    When the component renders\r\n    Then the share link is for \"program-b\"\r\n\r\n  @minutae\r\n  Scenario: An analytic event is fired when a user copies their sharelink\r\n    Given a user viewing the share link component\r\n    And the component is rendered for \"program-a\"\r\n    When they click to copy their link\r\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\r\n    And it is for \"program-a\"\r\n    And it has share medium \"DIRECT\"\r\n";
 
 const ShareLink_stories = {
   title: "Components/Share Link",
@@ -1637,14 +1636,14 @@ const Default = () => {
   const props = {
     shareString: "https://noah.example.com",
     open: false,
-    tooltiptext: "Copied!",
+    tooltipText: "Copied!",
   };
   return index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, props));
 };
 const Tooltip = () => {
   const props = {
     shareString: "https://noah.example.com",
-    tooltiptext: "Some text for the tooltip",
+    tooltipText: "Some text for the tooltip",
     open: true,
   };
   return index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, props));
@@ -1654,7 +1653,7 @@ const Disabled = () => {
     shareString: "https://noah.example.com",
     disabled: true,
     open: true,
-    tooltiptext: "Copied!",
+    tooltipText: "Copied!",
   };
   return index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, props));
 };
@@ -1760,7 +1759,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
   InvalidStatValue: InvalidStatValue
 });
 
-const scenario$4 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard\r\n\r\n\tThe leaderboard displays the top referrers along with their scores\r\n\r\n\t@motivating\r\n\tScenario Outline: The leaderboard can be for referrals started or converted\r\n\t\tGiven a leaderboard is configured with \"leaderboard-type\" <value>\r\n\t\tAnd a user with started referrals\r\n\t\tAnd a user with converted referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen then only <referralType> referrals are counted in the leaderboard\r\n\t\tExamples:\r\n\t\t\t| value                 | referralType |\r\n\t\t\t| topStartedReferrers   | started      |\r\n\t\t\t| topConvertedReferrers | converted    |\r\n\t\t\t|                       | started      |\r\n\r\n\t@motivating\r\n\tScenario: If there are any users with referrals the leaderboard is shown\r\n\t\tGiven there is aleast one user\r\n\t\tThen the leaderboard displays up to 10 top referrers\r\n\t\tAnd leaderboard is ordered by the referrers score in descending ordered\r\n\t\tAnd in the case of a tie the rows are ordered alphabetically\r\n\r\n\t@motivating\r\n\tScenario: The leaderboard can filter referrals within an time interval\r\n\t\tGiven a leaderboard is configured with \"interval\" \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tAnd a user with referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen only referrals from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\" are counted in the leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Rank Type can be configured\r\n\t\tGiven a leaderboard is configured with \"rank-type\" <value>\r\n\t\tAnd a user\r\n\t\tWhen they view the leaderboard\r\n\t\tThen their leaderboard rank is their <rank>\r\n\t\tExamples:\r\n\t\t\t| value     | rank       |\r\n\t\t\t| rowNumber | row number |\r\n\t\t\t| denseRank | dense rank |\r\n\t\t\t| rank      | rank       |\r\n\t\t\t|           | row number |\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: An empty state is displayed if no users\r\n\t\tGiven a user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen an empty state is dislayed\r\n\t\tAnd they see an image of a leaderboard\r\n\t\tAnd below they see \"View your rank in the leaderboard\"\r\n\t\tAnd below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\r\n\t\tAnd the text is center aligned\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: A custom empty state can be provided\r\n\t\tGiven a user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen the contents of the \"empty\" slot are displayed\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: Leaderboard headings can be customized\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has the following props\r\n\t\t\t| prop         | value          |\r\n\t\t\t| rankheading  | Place          |\r\n\t\t\t| usersheading | Customer       |\r\n\t\t\t| statsheading | Referral Count |\r\n\t\t\t| show-rank    | true           |\r\n\t\tAnd a user\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the following columns with headings\r\n\t\t\t| column | heading        |\r\n\t\t\t| rank   | Place          |\r\n\t\t\t| user   | Customer       |\r\n\t\t\t| stat   | Referral Count |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Rank can be hidden or shown\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has prop \"show-rank\" with <propValue>\r\n\t\tAnd a user\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they <maySee> the rank column\r\n\t\tExamples:\r\n\t\t\t| propValue | maySee    |\r\n\t\t\t| true      | see       |\r\n\t\t\t| false     | don't see |\r\n\t\t\t|           | don't see |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Users in the top 10 referrers see their leaderboard row highlighted\r\n\t\tGiven a user\r\n\t\tAnd they are in the top 10 referrers\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the row with their name highlighted with brand colour\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Users not in the top 10 referrers can see their progress at the bottom of the leaderboard\r\n\t\tGiven a user\r\n\t\tAnd they <mayHmayHaveReferralave>\r\n\t\tAnd they are not in the top 10 referrers\r\n\t\tAnd the leaderboard has prop \"show-user\" with <value>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they <maySee> \"...\" under the top 10 referrers\r\n\t\tAnd under \"...\" they <maySee> a row highlighted with brand colour\r\n\t\tAnd they <maySee> their name\r\n\t\tAnd they <maySee> their referral count\r\n\t\tAnd they <maySeeRank>\r\n\t\tExamples:\r\n\t\t\t| mayHaveReferral      | value | maySee    | maySeeRank           |\r\n\t\t\t| have referrals       | true  | see       | see their rank       |\r\n\t\t\t| don't have referrals | true  | see       | don't see their rank |\r\n\t\t\t|                      | false | don't see | don't see their rank |\r\n\t\t\t| have referrals       |       | see       | see their rank       |\r\n\r\n\t@minutiae\r\n\tScenario: Users without names are displayed as an \"Anonymous User\"\r\n\t\tGiven a user\r\n\t\tAnd they do not have a first name\r\n\t\tAnd they do not have a last initial\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the user displayed as \"Anonymous User\"";
+const scenario$4 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard\r\n\r\n\tThe leaderboard displays the top referrers along with their scores\r\n\r\n\t@motivating\r\n\tScenario Outline: The leaderboard can be for referrals started or converted\r\n\t\tGiven a leaderboard is configured with \"leaderboard-type\" <value>\r\n\t\tAnd a user with started referrals\r\n\t\tAnd a user with converted referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen then only <referralType> referrals are counted in the leaderboard\r\n\t\tExamples:\r\n\t\t\t| value                 | referralType |\r\n\t\t\t| topStartedReferrers   | started      |\r\n\t\t\t| topConvertedReferrers | converted    |\r\n\t\t\t|                       | started      |\r\n\r\n\t@motivating\r\n\tScenario: If there are any users with referrals the leaderboard is shown\r\n\t\tGiven there is aleast one user\r\n\t\tThen the leaderboard displays up to 10 top referrers\r\n\t\tAnd leaderboard is ordered by the referrers score in descending ordered\r\n\r\n\t@motivating\r\n\tScenario: The leaderboard can filter referrals within an time interval\r\n\t\tGiven a leaderboard is configured with \"interval\" \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tAnd a user with referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen only referrals from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\" are counted in the leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Rank Type can be configured\r\n\t\tGiven a leaderboard is configured with \"rank-type\" <value>\r\n\t\tAnd a user\r\n\t\tWhen they view the leaderboard\r\n\t\tThen their leaderboard rank is their <rank>\r\n\t\tExamples:\r\n\t\t\t| value     | rank       |\r\n\t\t\t| rowNumber | row number |\r\n\t\t\t| denseRank | dense rank |\r\n\t\t\t| rank      | rank       |\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: An empty state is displayed if no users\r\n\t\tGiven a user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen an empty state is dislayed\r\n\t\tAnd they see an image of a leaderboard\r\n\t\tAnd below they see \"View your rank in the leaderboard\"\r\n\t\tAnd below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\r\n\t\tAnd the text is center aligned\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: A custom empty state can be provided\r\n\t\tGiven a user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen the contents of the \"empty\" slot are displayed\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: Leaderboard headings can be customized\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has the following props\r\n\t\t\t| prop         | value          |\r\n\t\t\t| rankheading  | Place          |\r\n\t\t\t| usersheading | Customer       |\r\n\t\t\t| statsheading | Referral Count |\r\n\t\t\t| show-rank    | true           |\r\n\t\tAnd a user\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the following columns with headings\r\n\t\t\t| column | heading        |\r\n\t\t\t| rank   | Place          |\r\n\t\t\t| user   | Customer       |\r\n\t\t\t| stat   | Referral Count |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Rank can be hidden or shown\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has prop \"show-rank\" with <propValue>\r\n\t\tAnd a user\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they <maySee> the rank column\r\n\t\tExamples:\r\n\t\t\t| propValue | maySee    |\r\n\t\t\t| true      | see       |\r\n\t\t\t| false     | don't see |\r\n\t\t\t|           | don't see |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Users in the top 10 referrers see their leaderboard row highlighted\r\n\t\tGiven a user\r\n\t\tAnd they are in the top 10 referrers\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the row with their name highlighted with brand colour\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Users not in the top 10 referrers can see their progress at the bottom of the leaderboard\r\n\t\tGiven a user\r\n\t\tAnd they <mayHmayHaveReferralave>\r\n\t\tAnd they are not in the top 10 referrers\r\n\t\tAnd the leaderboard has prop \"show-user\" with <value>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they <maySee> \"...\" under the top 10 referrers\r\n\t\tAnd under \"...\" they <maySee> a row highlighted with brand colour\r\n\t\tAnd they <maySee> their name\r\n\t\tAnd they <maySee> their referral count\r\n\t\tAnd they <maySeeRank>\r\n\t\tExamples:\r\n\t\t\t| mayHaveReferral      | value | maySee    | maySeeRank           |\r\n\t\t\t| have referrals       | true  | see       | see their rank       |\r\n\t\t\t| don't have referrals | true  | see       | don't see their rank |\r\n\t\t\t|                      | false | don't see | don't see their rank |\r\n\t\t\t| have referrals       |       | see       | see their rank       |\r\n\r\n\t@minutiae\r\n\tScenario: Users without names are displayed as an \"Anonymous User\"\r\n\t\tGiven a user\r\n\t\tAnd they do not have a first name\r\n\t\tAnd they do not have a last initial\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the user displayed as \"Anonymous User\"";
 
 const Leaderboard_stories = {
   title: "Components/Leaderboard",
@@ -2545,7 +2544,7 @@ const BareBonesView = createHookStory(() => {
   const res = ShadowViewAddon.useShareLink({
     programId: "sam-partner-test-2",
     tooltiplifespan: 0,
-    tooltiptext: "",
+    tooltipText: "",
   });
   return (index.h("div", null,
     "Sharelink:",
@@ -2556,7 +2555,7 @@ const RegularView = createHookStory(() => {
   setupGraphQL$1();
   return (index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, ShadowViewAddon.useShareLink({
     programId: "sam-partner-test-2",
-    tooltiptext: "Copied to clipboard",
+    tooltipText: "Copied to clipboard",
     tooltiplifespan: 1000,
   }))));
 });
@@ -2564,7 +2563,7 @@ const FastTooltip = createHookStory(() => {
   setupGraphQL$1();
   return (index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, ShadowViewAddon.useShareLink({
     programId: "sam-partner-test-2",
-    tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
+    tooltipText: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
     tooltiplifespan: 500,
   }))));
 });
@@ -2664,8 +2663,8 @@ function setupGraphQL$3() {
     };
   }, []);
 }
-const View = (statType, format) => {
-  console.log(`View("${statType}") - CALLED`);
+const View = (statType, format, label) => {
+  //   console.log(`View("${statType}") - CALLED`);
   setupGraphQL$3();
   return (index.h("div", null,
     index.h("b", null, "Stat format:"),
@@ -2674,7 +2673,7 @@ const View = (statType, format) => {
     index.h("b", null, "Stat selected:"),
     " ",
     index.h("pre", { style: { color: "green" } }, statType),
-    index.h("sqm-big-stat", { "stat-type": statType })));
+    index.h("sqm-big-stat", { "stat-type": statType }, label)));
 };
 const DemoView = () => {
   const [type, setType] = stencilHooks_module.useState("/someRandomThing/with/someArguments/1234");
@@ -2732,6 +2731,18 @@ const ProgramGoals = createHookStory(() => {
 });
 const CustomField = createHookStory(() => {
   return View(`/customFields/thingCount`, "/(customFields)/:customField");
+});
+const CustomFieldWithLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", index.h("sqm-text", null, "Thing Count"));
+});
+const CustomFieldWithEmptyLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "   ");
+});
+const CustomFieldWithEmptySpaceLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "\n   ");
+});
+const CustomFieldWithTextLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "Thing Count");
 });
 
 const UseBigStat = /*#__PURE__*/Object.freeze({
@@ -2764,7 +2775,11 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   RewardBalance: RewardBalance,
   RewardBalanceCashUSD: RewardBalanceCashUSD,
   ProgramGoals: ProgramGoals,
-  CustomField: CustomField
+  CustomField: CustomField,
+  CustomFieldWithLabel: CustomFieldWithLabel,
+  CustomFieldWithEmptyLabel: CustomFieldWithEmptyLabel,
+  CustomFieldWithEmptySpaceLabel: CustomFieldWithEmptySpaceLabel,
+  CustomFieldWithTextLabel: CustomFieldWithTextLabel
 });
 
 function setupGraphQL$4() {
@@ -2873,7 +2888,7 @@ const View$1 = (overrideProps) => {
     ...overrideProps,
   };
   const { leaderboardType, rankType } = props;
-  console.log(`View("${leaderboardType}") - CALLED`, { ...props });
+  //   console.log(`View("${leaderboardType}") - CALLED`, { ...props });
   return (index.h("div", { style: { marginBottom: "20px" } },
     index.h("sqm-divided-layout", { direction: "row" },
       index.h("div", { style: { padding: "10px" } },
@@ -2955,7 +2970,7 @@ const DemoHookEmpty = createHookStory(() => {
           anonymousUser: "Anonymous User",
           showRank: true,
         },
-      }
+      },
     } },
     index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
 });
@@ -3381,14 +3396,14 @@ const Dashboard = () => {
     shareString: "https://ssqt.co/johnsmithrox",
     open: false,
     disabled: false,
-    tooltiptext: "Share link copied",
+    tooltipText: "Share link copied",
     onClick: () => console.log("Share link copied"),
   };
   const sharecodeProps = {
     shareString: "JOHNSMITH1",
     open: false,
     disabled: false,
-    tooltiptext: "Share code copied",
+    tooltipText: "Share code copied",
     onClick: () => console.log("Share code copied"),
   };
   const twitterButtonProps = {
@@ -3443,7 +3458,7 @@ const Dashboard = () => {
           content: (index.h("sqm-text", null,
             index.h("h1", null, "John Smith"))),
         })),
-        index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
+        index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
@@ -3570,7 +3585,7 @@ const Commissions = () => {
               " ",
               "program"))),
         })),
-        index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
+        index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
@@ -3600,7 +3615,7 @@ const Activity = () => {
           padding: "none",
           label: (index.h("sqm-text", null,
             index.h("h3", null, "Referral Activity"))),
-          content: (index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
+          content: (index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
             index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
             index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
             index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
@@ -3611,7 +3626,7 @@ const Activity = () => {
         padding: "xxx-large",
         label: (index.h("sqm-text", null,
           index.h("h3", null, "Traffic Generated"))),
-        content: (index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
+        content: (index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
@@ -3627,6 +3642,64 @@ const NewPortal = /*#__PURE__*/Object.freeze({
   Activity: Activity
 });
 
+const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container direction=\"column\" padding=\"small\" gap=\"xxx-large\">\r\n    <sqm-portal-container direction=\"column\" padding=\"none\" gap=\"xxx-large\">\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"Klip Rewards\"\r\n        description=\"Refer a friend to Klip 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    >\r\n      <sqm-portal-container\r\n        justify-content=\"center\"\r\n        direction=\"row\"\r\n        center\r\n        display=\"flex\"\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\r\n      <sqm-portal-container gap=\"large\">\r\n        <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\r\n          <sqm-text slot=\"label\">\r\n            <h3>Get rewarded when your friend uses Klip</h3>\r\n          </sqm-text>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card>\r\n          <sqm-portal-container gap=\"large\" slot=\"left\">\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 Klip Business\"\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 Klip Enterprise\"\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 Klip Enterprise\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container gap=\"large\" slot=\"right\">\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> </sqm-share-link>\r\n            </sqm-text>\r\n            <sqm-portal-container gap=\"x-small\">\r\n              <sqm-share-button medium=\"email\">\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button medium=\"linkedin\">\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button medium=\"twitter\">\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>\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 Klip 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=\"true\"\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              ></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 per-page=\"4\" hidden-columns=\"2\">\r\n            <sqm-referral-table-user-column column-title=\"User\">\r\n            </sqm-referral-table-user-column>\r\n            <sqm-referral-table-status-column column-title=\"Referral status\">\r\n            </sqm-referral-table-status-column>\r\n            <sqm-referral-table-rewards-column>\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 direction=\"column\" padding=\"small\" gap=\"xxx-large\">\r\n    <sqm-portal-container direction=\"column\" padding=\"none\" gap=\"xxx-large\">\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"Klip Rewards\"\r\n        description=\"Refer friends and complete tasks while using Klip to earn 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    >\r\n      <sqm-portal-container\r\n        direction=\"row\"\r\n        center\r\n        display=\"flex\"\r\n        justify-content=\"space-between\"\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          outline\r\n          mobile\r\n        ></sqm-scroll>\r\n      </sqm-portal-container>\r\n\r\n      <sqm-portal-container gap=\"xx-large\">\r\n        <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\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>\r\n          <sqm-portal-container gap=\"large\" slot=\"left\">\r\n            <sqm-text>Get rewarded when your friend uses Klip </sqm-text>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"75\"\r\n                unit=\"points\"\r\n                desc=\"Your friends signs up for a free trial\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friends signs up for Klip Business\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend qualifies as a good fit for Klip Enterprise\"\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 Klip Enterprise\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container gap=\"large\" slot=\"right\">\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> </sqm-share-link>\r\n            </sqm-text>\r\n            <sqm-portal-container gap=\"x-small\">\r\n              <sqm-share-button medium=\"email\">\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button medium=\"linkedin\">\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button medium=\"twitter\">\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\r\n      <sqm-portal-container gap=\"xx-large\">\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 Klip. Use those points to redeem rewards\r\n              like one free month of Klip Enterprise or two plane tickets to\r\n              anywhere in North America\r\n            </p>\r\n          </sqm-text>\r\n        </sqm-titled-section>\r\n        <sqm-card-feed>\r\n          <sqm-task-card\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            goal=\"1\"\r\n            stat-type=\"/programGoals/count/Follow-on-Social-Media\"\r\n            open-new-tab=\"true\"\r\n            event-key=\"socialFollow\"\r\n            program-id=\"klip-loyalty\"\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=\"true\"\r\n            card-title=\"Spend $500 on Klip Products\"\r\n            description=\"Earn 250 points when you spend $500 or more on Klip products.\"\r\n            button-text=\"See plans\"\r\n            button-link=\"https://klip-staging.vercel.app/app/plans\"\r\n            stat-type=\"/customFields/purchaseTotal\"\r\n            open-new-tab=\"false\"\r\n          >\r\n          </sqm-task-card>\r\n          <sqm-task-card\r\n            reward-amount=\"25\"\r\n            goal=\"1\"\r\n            card-title=\"Upload Your First Video\"\r\n            description=\"Earn 25 points for exploring the Klip platform when you upload your first video.\"\r\n            button-text=\"Upload\"\r\n            button-link=\"https://klip-staging.vercel.app/app\"\r\n            stat-type=\"/programGoals/count/Record-First-Video\"\r\n            open-new-tab=\"false\"\r\n            program-id=\"klip-loyalty\"\r\n          >\r\n          </sqm-task-card>\r\n          <sqm-task-card\r\n            reward-amount=\"100\"\r\n            goal=\"5\"\r\n            repeatable=\"true\"\r\n            show-progress-bar=\"true\"\r\n            steps=\"true\"\r\n            card-title=\"Share 5 Videos\"\r\n            description=\"Earn 100 points for collaborating each time you share 5 videos.\"\r\n            button-text=\"Share\"\r\n            button-link=\"https://klip-staging.vercel.app/app\"\r\n            stat-type=\"/customFields/videosShared\"\r\n            open-new-tab=\"false\"\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 Klip 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=\"true\"\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              ></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 per-page=\"4\" hidden-columns=\"2\">\r\n            <sqm-referral-table-user-column column-title=\"User\">\r\n            </sqm-referral-table-user-column>\r\n            <sqm-referral-table-status-column column-title=\"Referral status\">\r\n            </sqm-referral-table-status-column>\r\n            <sqm-referral-table-rewards-column>\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-tab header=\"Reward history\">\r\n          <sqm-rewards-table per-page=\"4\" program-id=\"\">\r\n            <sqm-rewards-table-reward-column></sqm-rewards-table-reward-column>\r\n            <sqm-rewards-table-source-column></sqm-rewards-table-source-column>\r\n            <sqm-rewards-table-status-column></sqm-rewards-table-status-column>\r\n            <sqm-rewards-table-date-column></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            ></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            <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-brand>\r\n";
+
+const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container direction=\"column\" padding=\"small\" gap=\"xxxx-large\">\r\n    <sqm-portal-container direction=\"column\" padding=\"none\" gap=\"xxx-large\">\r\n      <sqm-hero-image\r\n        image-url=\"https://i.imgur.com/bTwu1Um.png\"\r\n        header=\"Klip Rewards\"\r\n        description=\"Refer friends and complete tasks while using Klip 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      ></sqm-hero-image>\r\n\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      >\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 Klip\"\r\n            icon=\"cash-stack\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n          <sqm-program-explainer-step\r\n            description=\"Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America\"\r\n            header=\"Redeem rewards with your points\"\r\n            icon=\"people\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n        </sqm-program-explainer>\r\n\r\n        <sqm-portal-container center direction=\"row\" display=\"flex\" justify-content=\"space-between\">\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/global\"\r\n            >\r\n              <sqm-text>\r\n                <p>Rewards 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          ></sqm-scroll>\r\n        </sqm-portal-container>\r\n      <sqm-portal-container direction=\"column\" padding=\"none\" gap=\"xx-large\">\r\n        <sqm-titled-section>\r\n          <sqm-text>Earn points</sqm-text>\r\n        </sqm-titled-section>\r\n        <sqm-card-feed>\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. Be sure to use your Klip account email when completing the survey.\"\r\n          button-text=\"Take survey\"\r\n          button-link=\"https://y5tqgj96plv.typeform.com/to/p6N7lHUk\"\r\n          stat-type=\"/programGoals/count/NPS-Survey\"\r\n          reward-unit=\"Points\"\r\n          open-new-tab=\"true\"\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=\"true\"\r\n            card-title=\"Spend $500 on Klip Products\"\r\n            description=\"Earn 150 points when you spend $500 or more on Klip products.\"\r\n            button-text=\"See plans\"\r\n            button-link=\"https://klip-staging.vercel.app/app/plans\"\r\n            stat-type=\"/customFields/purchaseTotal\"\r\n            open-new-tab=\"false\"\r\n          >\r\n          </sqm-task-card>\r\n          <sqm-task-card\r\n            reward-amount=\"100\"\r\n            goal=\"5\"\r\n            repeatable=\"true\"\r\n            show-progress-bar=\"true\"\r\n            steps=\"true\"\r\n            card-title=\"Share 5 Videos\"\r\n            description=\"Earn 100 points for collaborating each time you share 5 videos.\"\r\n            button-text=\"Share\"\r\n            button-link=\"https://klip-staging.vercel.app/app\"\r\n            stat-type=\"/customFields/videosShared\"\r\n            open-new-tab=\"false\"\r\n          >\r\n          </sqm-task-card>\r\n          <sqm-task-card\r\n          reward-amount=\"25\"\r\n          goal=\"1\"\r\n          card-title=\"Upload Your First Video\"\r\n          description=\"Earn 25 points for exploring the Klip platform when you upload your first video.\"\r\n          button-text=\"Upload\"\r\n          button-link=\"https://klip-staging.vercel.app/app\"\r\n          stat-type=\"/programGoals/count/Record-First-Video\"\r\n          open-new-tab=\"false\"\r\n          program-id=\"klip-loyalty\"\r\n        >\r\n        </sqm-task-card>\r\n\r\n        </sqm-card-feed>\r\n\r\n        <sqm-tabs>\r\n          <sqm-tab header=\"Reward history\">\r\n            <sqm-rewards-table per-page=\"4\" program-id=\"\">\r\n              <sqm-rewards-table-reward-column></sqm-rewards-table-reward-column>\r\n              <sqm-rewards-table-source-column></sqm-rewards-table-source-column>\r\n              <sqm-rewards-table-status-column></sqm-rewards-table-status-column>\r\n              <sqm-rewards-table-date-column></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              ></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\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 Widget_stories = {
+  title: "Templates / Widgets",
+};
+// slot="footer"
+// support-email="john@foodservicerewards.com"
+// terms-link="example.com"
+// faq-link="example.com"
+// padding="large"
+// show-powered-by="false"
+// powered-by-link="https://www.saasquatch.com/"
+function useTemplate$1(templateString) {
+  const [editedTemplate, setEditedTemplate] = stencilHooks_module.useState(templateString);
+  const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
+  return {
+    states: { previewTemplate, editedTemplate },
+    callbacks: { setEditedTemplate, setPreviewTemplate },
+  };
+}
+function Buttons({ callbacks, states, template }) {
+  return (index.h("div", null,
+    index.h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    index.h("button", { style: { marginLeft: "10px" }, onClick: () => callbacks.setPreviewTemplate(template) }, "Preview Dashboard")));
+}
+function DefaultTemplateView(props) {
+  const { states, callbacks } = props;
+  return (index.h("div", { style: { height: "50vh" } },
+    index.h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    index.h(Buttons, { states: states, callbacks: callbacks, template: props.template }),
+    index.h("br", null),
+    index.h("div", { innerHTML: states.previewTemplate })));
+}
+const ReferralWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(referralWidget);
+  return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: referralWidget }));
+});
+const MonoWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(monoWidget);
+  return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: monoWidget }));
+});
+const Loyalty = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(loyaltyWidget);
+  return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: loyaltyWidget }));
+});
+
+const Widget = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Widget_stories,
+  ReferralWidget: ReferralWidget,
+  MonoWidget: MonoWidget,
+  Loyalty: Loyalty
+});
+
 const SidebarItem_stories = {
   title: "Components/Sidebar Item",
 };
@@ -5523,7 +5596,7 @@ const FullRewardsTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        hiddenColumns: "",
+        hiddenColumns: "1",
         mdBreakpoint: 899,
         smBreakpoint: 599,
       },
@@ -5805,7 +5878,7 @@ function cartesian(...args) {
 
 const scenarioTaskCard = "@author:derek\r\n@owner:kutay\r\nFeature: Task Card\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: A header, body title and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value             |\r\n\t\t\t| rewardAmount | \"40\"              |\r\n\t\t\t| rewardUnit   | \"Points\"          |\r\n\t\t\t| cardTitle    | Complete a survey |\r\n\t\t\t| buttonText   | Take Survey       |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: A Task Card description can be included but is not required\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <descriptionPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tThen they <maySee> a chevron icon in the top right\r\n\t\tWhen they attempt to click the chevron\r\n\t\tThen they <maySee> the card description\r\n\t\tExamples:\r\n\t\t\t| descriptionPropValue             | maySee    |\r\n\t\t\t| This is my task card description | see       |\r\n\t\t\t|                                  | don't see |\r\n\r\n\t@motivating\r\n\tScenario Outline: CTA links can open in a new tab or the same tab\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <openNewTabPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tAnd they click on the CTA\r\n\t\tThen they are redirected to the CTA link in <tab>\r\n\t\tExamples:\r\n\t\t\t| openNewTabPropValue | tab          |\r\n\t\t\t| true                | a new tab    |\r\n\t\t\t| false               | the same tab |\r\n\t\t\t| N/A                 | the same tab |\r\n\r\n\t@minutae\r\n\t@ui\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <showProgressBarPropValue>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| showProgressBarPropValue | mayBe |\r\n\t\t\t| true                     | is    |\r\n\t\t\t| false                    | isn't |\r\n\t\t\t| N/A                      | isn't |\r\n\r\n\t@motivating\r\n\tScenario: Clicking the CTA Button can trigger an event to be sent and refresh the widget\r\n\t\tGiven a Task card\r\n\t\tAnd it is configured to send an \"test\" event\r\n\t\tWhen a user views the Task card\r\n\t\tAnd clicks on the CTA\r\n\t\tThen a \"test\" event is sent to SSQT on the users behalf\r\n\t\tAnd the contents of the widget the card is dislayed within are refreshed\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <repeatablePropValue>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they view the Task Card\r\n\t\tThen they see a brand colour checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> brand colour\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| repeatablePropValue | mayBe |\r\n\t\t\t| true                | isn't |\r\n\t\t\t| false               | is    |\r\n\t\t\t| N/A                 | is    |\r\n\r\n\t@motivating\r\n\tScenario Outline: Display duration hides or shows a task\r\n\t\tGiven a Task Card\r\n\t\tAnd it has a \"display-duration\" interval\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen card <mayBeHidden>\r\n\t\tExamples:\r\n\t\t\t| day                       | mayBeHidden   |\r\n\t\t\t| a day before the interval | is hidden     |\r\n\t\t\t| a day during the interval | is not hidden |\r\n\t\t\t| a day after the interval  | is hidden     |\r\n\r\n\t@motivating\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card\r\n\t\tAnd it has an \"reward-duration\" interval\r\n\t\tWhen a user views the card on <day>\r\n\t\tThen the card <mayBeDisabled>\r\n\t\tAnd it <mayHaveAlert>\r\n\t\tAnd it <mayHaveExpiryText> on the bottom left hand side of the card\r\n\t\tExamples:\r\n\t\t\t| day                              | mayBeDisabled  | mayHaveAlert                                                      | mayHaveExpiryText                                   |\r\n\t\t\t| a day before the expiry interval | is disabled    | has alert stating the month, date, year and time the task starts  | doesn't have expiry text                            |\r\n\t\t\t| a day during the expiry interval | isn't disabled | doesn't have an alert                                             | has the month, date, year and time the task expires |\r\n\t\t\t| a day after the expiry interval  | is disabled    | has alert stating the month, date, year and time the task expired | doesn't have expiry text                            |\r\n\r\n\t@motivating\r\n\tScenario Outline: Task Card dates support localization\r\n\t\tGiven a Task Card\r\n\t\tAnd it's configured with a expiry duration interval\r\n\t\tWhen a user with <locale> views the task card <atTime>\r\n\t\tThen they <seeDate> translated for <locale>\r\n\t\tExamples:\r\n\t\t\t| atTime              | locale | seeDate         |\r\n\t\t\t| before the interval | en     | Task Start Date |\r\n\t\t\t| during the interval | en     | Task End Date   |\r\n\t\t\t| after the interval  | en     | Task Ended Date |\r\n\t\t\t| before the interval | fr     | Task Start Date |\r\n\t\t\t| during the interval | fr     | Task End Date   |\r\n\t\t\t| after the interval  | fr     | Task Ended Date |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for a repeatable task\r\n\t\tAnd has it has <goalValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is brand colour\r\n\t\tExamples:\r\n\t\t\t| goalValue | userGoalProgress | text              |\r\n\t\t\t| 2         | 0                | Completed 0 times |\r\n\t\t\t| 2         | 1                | Completed 0 times |\r\n\t\t\t| 2         | 2                | Completed 1 times |\r\n\t\t\t| 2         | 4                | Completed 2 times |\r\n\r\n\t@motivating\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured <progressSourcePath>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the \"Goal Completion Count\"\r\n\t\tExamples:\r\n\t\t\t| progressSourcePath                               |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\t@motivating\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\t@motivating\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goal\" value\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
 
-const scenarioProgressBar = "@author:kutay\r\n@owner:kutay\r\nFeature: Task Card Progress Bar\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\r\n\t\tGiven a Task Card component\r\n\t\tAnd the users progress is <progress>\r\n\t\tAnd the task goal is \"500\"\r\n\t\tAnd the task is not repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"500\" with <unit> below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | unit | color |\r\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"5\" below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | color |\r\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"500\"\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\r\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\r\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the first <icon1> is <color1>\r\n\t\tAnd the second <icon2> is <color2>\r\n\t\tAnd the third <icon3> is <color3>\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\r\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
+const scenarioProgressBar = "@author:kutay\r\n@owner:kutay\r\nFeature: The progress bar can be shown as a continuous line with progress and end goal. \r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\r\n\t\tGiven a Task Card component\r\n\t\tAnd the users progress is <progress>\r\n\t\tAnd the task goal is \"500\"\r\n\t\tAnd the task is not repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"500\" with <unit> below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | unit | color |\r\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"5\" below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | color |\r\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"500\"\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\r\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\r\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the first <icon1> is <color1>\r\n\t\tAnd the second <icon2> is <color2>\r\n\t\tAnd the third <icon3> is <color3>\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\r\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
 
 const ResizerStylesheet = `
 
@@ -9299,14 +9372,7 @@ const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto
 const PortalTemplates_stories = {
   title: "Templates / Portal",
 };
-// slot="footer"
-// support-email="john@foodservicerewards.com"
-// terms-link="example.com"
-// faq-link="example.com"
-// padding="large"
-// show-powered-by="false"
-// powered-by-link="https://www.saasquatch.com/"
-function useTemplate$1(templateString) {
+function useTemplate$2(templateString) {
   const [editedTemplate, setEditedTemplate] = stencilHooks_module.useState(templateString);
   const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
   return {
@@ -9325,16 +9391,16 @@ function TemplateView$1(props) {
     index.h("div", { innerHTML: states.previewTemplate }),
   ];
 }
-function Buttons({ callbacks, states, template }) {
+function Buttons$1({ callbacks, states, template }) {
   return (index.h("div", null,
     index.h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
     index.h("button", { style: { marginLeft: "10px" }, onClick: () => callbacks.setPreviewTemplate(template) }, "Preview Dashboard")));
 }
-function DefaultTemplateView(props) {
+function DefaultTemplateView$1(props) {
   const { states, callbacks } = props;
   return (index.h("div", { style: { height: "50vh" } },
     index.h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
-    index.h(Buttons, { states: states, callbacks: callbacks, template: props.template }),
+    index.h(Buttons$1, { states: states, callbacks: callbacks, template: props.template }),
     index.h("h2", null, "Navigation"),
     index.h("div", { style: {
         display: "grid",
@@ -9355,58 +9421,58 @@ function DefaultTemplateView(props) {
     index.h("div", { innerHTML: states.previewTemplate })));
 }
 const DefaultPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(portalTemplate);
-  return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalTemplateWithDashboard }));
+  const { states, callbacks } = useTemplate$2(portalTemplate);
+  return (index.h(DefaultTemplateView$1, { states: states, callbacks: callbacks, template: portalTemplateWithDashboard }));
 });
 const MultiProgramPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(multiProgramTemplate);
-  return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: multiProgramTemplateWithDashboard }));
+  const { states, callbacks } = useTemplate$2(multiProgramTemplate);
+  return (index.h(DefaultTemplateView$1, { states: states, callbacks: callbacks, template: multiProgramTemplateWithDashboard }));
 });
 const LeadSubmitPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(portalLeadSubmitTemplate);
-  return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalLeadSubmitTemplateWithDashboard, leadSubmit: true }));
+  const { states, callbacks } = useTemplate$2(portalLeadSubmitTemplate);
+  return (index.h(DefaultTemplateView$1, { states: states, callbacks: callbacks, template: portalLeadSubmitTemplateWithDashboard, leadSubmit: true }));
 });
 const Login = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(loginTemplate);
+  const { states, callbacks } = useTemplate$2(loginTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: LoginReadme }));
 });
 const ForgotPassword = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(forgotPasswordTemplate);
+  const { states, callbacks } = useTemplate$2(forgotPasswordTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
 });
 const Register = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(registerTemplate);
+  const { states, callbacks } = useTemplate$2(registerTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: RegisterReadme }));
 });
 const Dashboard$1 = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(dashboardTemplate);
+  const { states, callbacks } = useTemplate$2(dashboardTemplate);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
 const LeadSubmitIframe = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(leadSubmitTemplate);
+  const { states, callbacks } = useTemplate$2(leadSubmitTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: ReferralIframeReadme }));
 });
 const Activity$1 = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(activityTemplate);
+  const { states, callbacks } = useTemplate$2(activityTemplate);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
 const EditProfile$2 = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(editProfileTemplate);
+  const { states, callbacks } = useTemplate$2(editProfileTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
 });
 const ResetPassword = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(resetPasswordTemplate);
+  const { states, callbacks } = useTemplate$2(resetPasswordTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
 });
 const EmailVerification = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(emailVerificationTemplate);
+  const { states, callbacks } = useTemplate$2(emailVerificationTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
 });
 const EmailVerified = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(emailVerifiedTemplate);
+  const { states, callbacks } = useTemplate$2(emailVerifiedTemplate);
   return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
 });
-const Widget = createHookStory(() => {
+const Widget$1 = createHookStory(() => {
   return (index.h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
       data: {
         html: dashboardTemplate,
@@ -9414,11 +9480,11 @@ const Widget = createHookStory(() => {
     } }));
 });
 const ResetPasswordEmail = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(resetPasswordEmailTemplate);
+  const { states, callbacks } = useTemplate$2(resetPasswordEmailTemplate);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
 const VerifyEmail = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(verifyEmailTemplate);
+  const { states, callbacks } = useTemplate$2(verifyEmailTemplate);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
 
@@ -9438,7 +9504,7 @@ const PortalTemplates = /*#__PURE__*/Object.freeze({
   ResetPassword: ResetPassword,
   EmailVerification: EmailVerification,
   EmailVerified: EmailVerified,
-  Widget: Widget,
+  Widget: Widget$1,
   ResetPasswordEmail: ResetPasswordEmail,
   VerifyEmail: VerifyEmail
 });
@@ -9805,7 +9871,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const scenario$i = "@author:derek\r\n@owner:\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 scenario$i = "@author:derek\r\n@owner:\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 = {
   title: "Components/Reward Exchange List",
@@ -9941,7 +10007,7 @@ const ProgramExplainerStep$1 = /*#__PURE__*/Object.freeze({
   ProgramExplainerStepCustom: ProgramExplainerStepCustom
 });
 
-const scenario$l = "@author:derek\r\n@owner:logan\r\nFeature: Brand Configuration\r\n\r\n\t@motivating\r\n\tScenario: The brand components creates a colour pallet from a brand colour and applies it to children\r\n\t\tGiven a brand component with \"brand-color\" \"#4225c4\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable                      | value                       |\r\n\t\t\t| --sl-color-primary-50         | hsla(251, 68%, 95%, 1)      |\r\n\t\t\t| --sl-color-primary-100        | hsla(251, 68%, 86%, 1)      |\r\n\t\t\t| --sl-color-primary-200        | hsla(251, 68%, 76%, 1)      |\r\n\t\t\t| --sl-color-primary-300        | hsla(251, 68%, 66%, 1)      |\r\n\t\t\t| --sl-color-primary-400        | hsla(251, 68%, 56%, 1)      |\r\n\t\t\t| --sl-color-primary-500        | hsla(251, 68%, 46%, 1)      |\r\n\t\t\t| --sl-color-primary-600        | hsla(251, 68%, 39%, 1)      |\r\n\t\t\t| --sl-color-primary-700        | hsla(251, 68%, 32%, 1)      |\r\n\t\t\t| --sl-color-primary-800        | hsla(251, 68%, 25%, 1)      |\r\n\t\t\t| --sl-color-primary-900        | hsla(251, 68%, 18%, 1)      |\r\n\t\t\t| --sl-color-primary-950        | hsla(251, 68%, 15%, 1)      |\r\n\t\t\t| --sl-focus-ring-color-primary | var(--sl-color-primary-100) |\r\n\t\t\t| --sl-input-border-color-focus | var(--sl-color-primary-500) |\r\n\t\t\t| --sl-color-primary-hue        | var(--sl-color-primary-500) |\r\n\t\tAnd they are applied to the children components\r\n\t\tBut they are not applied to any components outside of the brand component\r\n\t\tAnd they are not applied to any vanilla components\r\n\r\n\t@minutae\r\n\tScenario Outline: The brand colour can be hex, HSL or rgb\r\n\t\tGiven a brand component with \"brand-color\" <colour>\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the colour is used to create a brand palete\r\n\t\tAnd it is applied to the children components\r\n\t\tExamples:\r\n\t\t\t| colour                 |\r\n\t\t\t| #4225c4                |\r\n\t\t\t| rgb(66, 37, 196)       |\r\n\t\t\t| hsl(251, 68%, 46%)     |\r\n\t\t\t| hsla(251, 68%, 46%, 1) |\r\n\r\n\t@motivating\r\n\tScenario: The brand component applies a background colour to child\r\n\t\tGiven a brand component with \"background\" \"#ABB8C3\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable                | value   |\r\n\t\t\t| --sqm-portal-background | #ABB8C3 |\r\n\t\tAnd they are applied to the children components\r\n\t\tAnd children components using \"sqm-portal-background\" have \"#ABB8C3\" coloured backgrounds\r\n\r\n\t@motivating\r\n\tScenario: The brand component can apply a brand font to children components\r\n\t\tGiven a brand component with \"brand-font\" \"Nunito Sans\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable                 | value                |\r\n\t\t\t| --sl-font-sans           | \"Nunito Sans\", arial |\r\n\t\t\t| --sl-input-font-family   | \"Nunito Sans\", arial |\r\n\t\t\t| --sl-tooltip-font-family | \"Nunito Sans\", arial |\r\n\t\t\t| font-family              | \"Nunito Sans\", arial |\r\n\t\tAnd they are applied to the children components\r\n\t\tAnd the children component's text is \"Nunito Sans\"";
+const scenario$l = "@author:derek\r\n@owner:logan\r\nFeature: Brand Configuration\r\n\r\n\t@motivating\r\n\tScenario: The brand components creates a colour pallet from a brand colour and applies it to children\r\n\t\tGiven a brand component with \"brand-color\" \"#4225c4\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable                      | value                       |\r\n\t\t\t| --sl-color-primary-50         | hsla(251, 68%, 95%, 1)      |\r\n\t\t\t| --sl-color-primary-100        | hsla(251, 68%, 86%, 1)      |\r\n\t\t\t| --sl-color-primary-200        | hsla(251, 68%, 76%, 1)      |\r\n\t\t\t| --sl-color-primary-300        | hsla(251, 68%, 66%, 1)      |\r\n\t\t\t| --sl-color-primary-400        | hsla(251, 68%, 56%, 1)      |\r\n\t\t\t| --sl-color-primary-500        | hsla(251, 68%, 46%, 1)      |\r\n\t\t\t| --sl-color-primary-600        | hsla(251, 68%, 39%, 1)      |\r\n\t\t\t| --sl-color-primary-700        | hsla(251, 68%, 32%, 1)      |\r\n\t\t\t| --sl-color-primary-800        | hsla(251, 68%, 25%, 1)      |\r\n\t\t\t| --sl-color-primary-900        | hsla(251, 68%, 18%, 1)      |\r\n\t\t\t| --sl-color-primary-950        | hsla(251, 68%, 15%, 1)      |\r\n\t\t\t| --sl-focus-ring-color-primary | var(--sl-color-primary-100) |\r\n\t\t\t| --sl-input-border-color-focus | var(--sl-color-primary-500) |\r\n\t\t\t| --sl-color-primary-hue        | var(--sl-color-primary-500) |\r\n\t\tAnd they are applied to the children components\r\n\t\tBut they are not applied to any components outside of the brand component\r\n\t\tAnd they are not applied to any vanilla components\r\n\r\n\t@minutae\r\n\tScenario Outline: The brand colour can be hex, HSL or rgb\r\n\t\tGiven a brand component with \"brand-color\" <colour>\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the colour is used to create a brand palete\r\n\t\tAnd it is applied to the children components\r\n\t\tExamples:\r\n\t\t\t| colour                 |\r\n\t\t\t| #4225c4                |\r\n\t\t\t| rgb(66, 37, 196)       |\r\n\t\t\t| hsl(251, 68%, 46%)     |\r\n\t\t\t| hsla(251, 68%, 46%, 1) |\r\n\r\n\t@motivating\r\n\tScenario: The brand component can apply a brand font to children components\r\n\t\tGiven a brand component with \"brand-font\" \"Nunito Sans\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable                 | value                |\r\n\t\t\t| --sl-font-sans           | \"Nunito Sans\", arial |\r\n\t\t\t| --sl-input-font-family   | \"Nunito Sans\", arial |\r\n\t\t\t| --sl-tooltip-font-family | \"Nunito Sans\", arial |\r\n\t\t\t| font-family              | \"Nunito Sans\", arial |\r\n\t\tAnd they are applied to the children components\r\n\t\tAnd the children component's text is \"Nunito Sans\"";
 
 const SqmBrand_stories = {
   title: "Components/Brand",
@@ -10335,7 +10401,79 @@ const FullWidth = () => (index.h("div", { style: { width: "1000px", border: "1px
   index.h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
     index.h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
     index.h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    index.h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+    index.h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+const SpaceBetween = () => {
+  return (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    index.h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between" },
+      index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Rewards Redeemed"))),
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Points Balance")))),
+      index.h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+const SpaceAround = () => {
+  return (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    index.h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-around" },
+      index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Rewards Redeemed"))),
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Points Balance")))),
+      index.h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+const SpaceEvenly = () => {
+  return (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    index.h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-evenly" },
+      index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Rewards Redeemed"))),
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Points Balance")))),
+      index.h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+const Start$1 = () => {
+  return (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    index.h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },
+      index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Rewards Redeemed"))),
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Points Balance")))),
+      index.h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+const Center = () => {
+  return (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    index.h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "center" },
+      index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Rewards Redeemed"))),
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Points Balance")))),
+      index.h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+const End = () => {
+  return (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    index.h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "end" },
+      index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Rewards Redeemed"))),
+        index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          index.h("sqm-text", null,
+            index.h("p", null, "Points Balance")))),
+      index.h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
 
 const PortalContainer = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10347,7 +10485,13 @@ const PortalContainer = /*#__PURE__*/Object.freeze({
   TooWideDisplayFlex: TooWideDisplayFlex,
   HalfWidth: HalfWidth,
   HalfWidthCenter: HalfWidthCenter,
-  FullWidth: FullWidth
+  FullWidth: FullWidth,
+  SpaceBetween: SpaceBetween,
+  SpaceAround: SpaceAround,
+  SpaceEvenly: SpaceEvenly,
+  Start: Start$1,
+  Center: Center,
+  End: End
 });
 
 const scenario1 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Date Column\r\n\r\n    Shows the date of each reward\r\n\r\n    Background:\r\n        Given the date column is included in the reward table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The title of the date column is configurable\r\n        Given the \"column-title\" prop is set to <value>\r\n        Then the date column is shown with <columnTitle>\r\n        Examples:\r\n            | value           | columnTitle     |\r\n            | Date received   |                 |\r\n            | My column title | My column title |\r\n\r\n    @motivating\r\n    Scenario Outline: A configurable date associated with the reward is shown for each reward\r\n        Given the \"date-shown\" prop is set to <dateType>\r\n        And a user with rewards\r\n        When they view the date column\r\n        Then for each reward the <rewardDate> is shown in the table\r\n        And the date is localized to the users locale\r\n        Examples:\r\n            | dateType         | rewardDate         |\r\n            | dateGiven        | date given         |\r\n            | dateExpires      | date expires       |\r\n            | dateCancelled    | date cancelled     |\r\n            | dateRedeemed     | date redeemed      |\r\n            | dateScheduledFor | date scheduled for |\r\n            |                  | date given         |";
@@ -10369,7 +10513,7 @@ const rewardsData$1 = {
   id: "61c100117a82a376d8804166",
   type: "CREDIT",
   value: 19,
-  unit: "TESTUNIT",
+  unit: "Points",
   name: null,
   dateGiven: 1640038417468,
   meta: { message: "***CUSTOMER NOTE MESSAGE***" },
@@ -10401,7 +10545,7 @@ const RewardsCellCreditSingle = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
 };
 const RewardsCellCreditFull = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "{availableAmount} remaining" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -10410,16 +10554,16 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditPartial = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "{availableAmount} remaining" }));
 };
 const RewardsCellCreditCancelled = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...cancelled }, redeemedText: "0 Points redeemed" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...cancelled }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 const RewardsCellCreditExpired = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...expired }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 const RewardsCellCreditPending = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...pending }, availableText: "9 Points redeemed" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...pending }, availableText: "{availableAmount} remaining" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -10429,7 +10573,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditRedeemed = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "{availableAmount} remaining" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Point",
@@ -10441,7 +10585,7 @@ const longName = {
 };
 const RewardsCellCreditLong = () => {
   return (index.h("div", { style: { maxWidth: "222px" } },
-    index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web remaining" })));
+    index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...longName }, availableText: "{availableAmount} remaining" })));
 };
 const RewardsCellNonCredit = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: {
@@ -10456,7 +10600,7 @@ const RewardsCellFueltank = () => {
       type: "FUELTANK",
       prettyValue: "Fueltank Reward",
       fuelTankCode: "AFUELTANKCODE",
-    }, fueltankText: "Your code:", copyText: "Copied" }));
+    }, copyText: "Copied" }));
 };
 const RewardsCellFueltankLong = () => {
   return (index.h("div", { style: { maxWidth: "222px" } },
@@ -10465,7 +10609,7 @@ const RewardsCellFueltankLong = () => {
         type: "FUELTANK",
         prettyValue: "Long Fueltank Reward",
         fuelTankCode: "AFUELTANKCODE123456789123456789123456789123456789",
-      }, fueltankText: "Your code:", copyText: "Copied" })));
+      }, copyText: "Copied" })));
 };
 const SourceCellManual = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData$1, rewardSourceText: "Manual" }));
@@ -10660,7 +10804,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   EmptyCell: EmptyCell$2
 });
 
-const scenario$p = "@owner:sam\r\n@author:sam\r\nFeature: Rewards Table\r\n\r\n    Shows a list of rewards as a table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no rewards\r\n        Given a user with rewards\r\n        When they view the reward table\r\n        Then no rewards are displayed\r\n        And they see an image with a user icon\r\n        And \"View your rewards\" in bold\r\n        And \"See all the rewards you have earned from referring friends and completing tasks\" 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 rewards\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward table\r\n        Then they see the custom empty state\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: The loading state is shown while rewards are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\r\n        Given the user has <number of rewards>\r\n        And the table is configured to show <page limit> rewards per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of rewards\r\n        And the pagination button to go to the previous page is disabled on the first page of rewards\r\n        Examples:\r\n            | number of rewards | page limit | number of pages |\r\n            | 0                 | 4          | 1               |\r\n            | 1                 | 4          | 1               |\r\n            | 3                 | 4          | 1               |\r\n            | 5                 | 4          | 2               |\r\n            | 42                | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"899px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"634px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the reward table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile\r\n        Given a reward table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with rewards\r\n        When they view the reward table\r\n        And their window size is below the tablet breakpoint\r\n        Then reward cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only rewards from the program with \"program-id\" are shown\r\n\r\n    @landmine\r\n    Scenario: Classic program rewards can't be filtered for\r\n        There is no easy way for the backend to filter for \"classic\" programs,\r\n        since it only allows filtering my \"programId: null\"\r\n        and that returns manual rewards and reward exchanges\r\n\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then there is an error shown\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"show-labels\" set to false\r\n        Then the table is displayed without column headings";
+const scenario$p = "@owner:sam\r\n@author:sam\r\nFeature: Rewards Table\r\n\r\n    Shows a list of rewards as a table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no rewards\r\n        Given a user with rewards\r\n        When they view the reward table\r\n        Then no rewards are displayed\r\n        And they see an image with a user icon\r\n        And \"View your rewards\" in bold\r\n        And \"See all the rewards you have earned from referring friends and completing tasks\" 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 rewards\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward table\r\n        Then they see the custom empty state\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: The loading state is shown while rewards are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\r\n        Given the user has <number of rewards>\r\n        And the table is configured to show <page limit> rewards per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of rewards\r\n        And the pagination button to go to the previous page is disabled on the first page of rewards\r\n        Examples:\r\n            | number of rewards | page limit | number of pages |\r\n            | 0                 | 4          | 1               |\r\n            | 1                 | 4          | 1               |\r\n            | 3                 | 4          | 1               |\r\n            | 5                 | 4          | 2               |\r\n            | 42                | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"899px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"634px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the reward table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile\r\n        Given a reward table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with rewards\r\n        When they view the reward table\r\n        And their window size is below the tablet breakpoint\r\n        Then reward cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only rewards from the program with \"program-id\" are shown\r\n\r\n    @landmine\r\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\r\n        There is no easy way for the backend to filter for \"classic\" programs,\r\n        thus we are filtering for rewards without programId's.\r\n\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then rewards from classic programs are shown\r\n        And manual rewards are shown\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"show-labels\" set to false\r\n        Then the table is displayed without column headings";
 
 const RewardsTable_stories = {
   title: "Components/Rewards Table",
@@ -11438,7 +11582,7 @@ const Scroll_stories = {
 };
 const ScrollTag = () => {
   return (index.h("div", { style: { position: "relative", height: "2000px" } },
-    index.h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll" }),
+    index.h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll", "scroll-animation": "smooth" }),
     index.h("div", { style: { position: "absolute", bottom: "0" } },
       index.h("sqm-text", { slot: "label" },
         index.h("h3", null, "Earn more rewards"),
@@ -11446,7 +11590,15 @@ const ScrollTag = () => {
 };
 const ScrollId = () => {
   return (index.h("div", { style: { position: "relative", height: "2000px" } },
-    index.h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id" }),
+    index.h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "smooth" }),
+    index.h("div", { style: { position: "absolute", bottom: "0" } },
+      index.h("sqm-text", { slot: "label", id: "my-id" },
+        index.h("h3", null, "Earn more rewards"),
+        index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+const ScrollAutoAnimation = () => {
+  return (index.h("div", { style: { position: "relative", height: "2000px" } },
+    index.h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "auto" }),
     index.h("div", { style: { position: "absolute", bottom: "0" } },
       index.h("sqm-text", { slot: "label", id: "my-id" },
         index.h("h3", null, "Earn more rewards"),
@@ -11454,7 +11606,7 @@ const ScrollId = () => {
 };
 const ScrollTabGroup = () => {
   return (index.h("div", { style: { position: "relative", height: "2000px" } },
-    index.h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3" }),
+    index.h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3", "scroll-animation": "smooth" }),
     index.h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
               <sqm-tabs>
               <sqm-tab header="Leaderboard">
@@ -11543,12 +11695,9 @@ const ShoelaceProps = () => {
     index.h("br", null),
     " ",
     index.h("hr", null),
-    index.h("h3", null, "Caret:"),
-    index.h("sqm-scroll", { caret: true }, "Button"),
-    index.h("br", null),
-    " ",
-    index.h("hr", null),
     index.h("h3", null, "Icon:"),
+    index.h("sqm-scroll", { "button-type": "primary", iconName: "facebook" }, "Icon Name"),
+    index.h("br", null),
     index.h("sqm-scroll", { iconName: "gear", iconSlot: "prefix" }, "Icon Slot Prefix"),
     index.h("br", null),
     index.h("sqm-scroll", { iconName: "gear", iconSlot: "suffix" }, "Icon Slot Suffix"),
@@ -11565,22 +11714,8 @@ const ShoelaceProps = () => {
     index.h("br", null),
     " ",
     index.h("hr", null),
-    index.h("h3", null, "Disabled:"),
-    index.h("sqm-scroll", { disabled: true }, "Button"),
-    index.h("br", null),
-    " ",
-    index.h("hr", null),
-    index.h("h3", null, "Link:"),
-    index.h("sqm-scroll", { href: "https://example.com/" }, "Link"),
-    index.h("br", null),
-    index.h("sqm-scroll", { href: "https://example.com/", target: "_self" }, "Same Window"),
-    index.h("br", null),
-    index.h("sqm-scroll", { href: "/assets/images/wordmark.svg", download: "shoelace.svg" }, "Download"),
-    index.h("br", null),
-    " ",
-    index.h("hr", null),
     index.h("h3", null, "Mobile Friendly:"),
-    index.h("sqm-scroll", { "mobile-friendly": true }, "Button"),
+    index.h("sqm-scroll", { mobile: true }, "Button"),
     index.h("br", null),
     " ",
     index.h("hr", null)));
@@ -11591,6 +11726,7 @@ const Scroll = /*#__PURE__*/Object.freeze({
   'default': Scroll_stories,
   ScrollTag: ScrollTag,
   ScrollId: ScrollId,
+  ScrollAutoAnimation: ScrollAutoAnimation,
   ScrollTabGroup: ScrollTabGroup,
   ScrollTabGroupInner: ScrollTabGroupInner,
   ShoelaceProps: ShoelaceProps
@@ -11772,10 +11908,10 @@ const ShareCode = () => {
   return index.h("sqm-share-code", null);
 };
 const CustomTooltipText = () => {
-  return index.h("sqm-share-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
+  return index.h("sqm-share-code", { tooltipText: "CUSTOM TOOLTIP TEXT" });
 };
 const CustomTooltipDuration = () => {
-  return index.h("sqm-share-code", { tooltiplifespan: 5000 });
+  return index.h("sqm-share-code", { tooltipLifespan: 5000 });
 };
 
 const ShareCode$1 = /*#__PURE__*/Object.freeze({
@@ -14462,6 +14598,7 @@ const stories = [
   PasswordField,
   TaskCard$2,
   PortalTemplates,
+  Widget,
   ProgramMenu,
   PoweredByImg,
   PortalFooter,