@saasquatch/mint-components 1.5.3 → 1.5.4-0

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

@@ -1601,6 +1601,7 @@ const SlottedIntoComponent = () => {
       rankType: "rowNumber",
       leaderboard: [],
       showUser: true,
+      rowNumber: 10,
       userRank: {
         firstName: "Kutay",
         lastInitial: "C",
@@ -1771,7 +1772,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
   MultipleStats: MultipleStats
 });
 
-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\"\r\n\r\n\t@minutiae\r\n\tScenario Outline: If a user only has a first or last name, then only that is displayed\r\n\t\tGiven a user\r\n\t\tAnd they only have a <name>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they only see their <name>\r\n\t\tExamples:\r\n\t\t\t| name      |\r\n\t\t\t| firstName |\r\n\t\t\t| lastName  |";
+const scenario$4 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard\r\n\r\n\tThe leaderboard supports three main cases\r\n\t- Top Started Referrers\r\n\t- Top Converted Referrers\r\n\t- Top Point Earners\r\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\r\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\r\n\r\n\tBackground: A user exists\r\n\t\tGiven a user\r\n\t\tAnd they are viewing the leaderboard\r\n\r\n\t@motivating\r\n\tScenario: The top started referrers leaderboard is displayed by default\r\n\t\tGiven a leaderboard doesn't have prop \"leaderboard-type\"\r\n\t\tAnd there are started referrals on the tenant\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the top started referrers leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Two types of referrals leaderboards can be displayed\r\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with <value>\r\n\t\tAnd there are started referrals on the tenant\r\n\t\tAnd there are started converted on the tenant\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the <referralType> 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\r\n\t@motivating\r\n\tScenario: The top point earners leaderboard can be displayed\r\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\r\n\t\tAnd there are users with points\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the top point earners leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Program Context is used by default to filter leaderboard results\r\n\t\tGiven a <leaderboardType> leaderboard loaded with program context for \"my-program\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from \"my-program\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Program Id context can be overwritten with a prop\r\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from \"my-test-program\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Global leaderboard can be displayed by clearing program context\r\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\r\n\t\t#This can also be done with a program section in a similar manner\r\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see global <results>\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario: Leaderboard results are shown in descending order\r\n\t\tGiven there are leaderboard results\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see up to the 10 top leaderboard results\r\n\t\tAnd leaderboard is in descending order\r\n\r\n\t@motivating\r\n\tScenario Outline: Leaderboard results can be filtered with a time interval\r\n\t\tGiven a <leaderboardType> leaderboard\r\n\t\tAnd it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Leaderboard rank type can be configured\r\n\t\tGiven a leaderboard has prop \"rank-type\" with <value>\r\n\t\tWhen the user views 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@minutia\r\n\tScenario Outline: The max number of leaderboard rows displayed can be configured\r\n\t\tGiven a leaderboard has prop \"row-number\" with <value>\r\n\t\tAnd the leaderboard has <resultCount>\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see <number> rows\r\n\t\tExamples:\r\n\t\t\t| value | resultCount | number |\r\n\t\t\t|       | 10          | 10     |\r\n\t\t\t| 5     | 10          | 5      |\r\n\t\t\t| 3     | 1           | 1      |\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: Leaderboards with no results show an empty state\r\n\t\tGiven a leaderboard has no results\r\n\t\tWhen the user views 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 leaderboard has no results\r\n\t\tWhen the user views 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\tWhen the user views 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: Leaderboard 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\tWhen the user views 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 of the leaderboard results see their leaderboard row highlighted\r\n\t\tGiven a user in the top 10 of the leaderboard results\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 leaderboard results can see their progress at the bottom of the leaderboard\r\n\t\tGiven a user <mayHave> completed actions counted by the leaderboard\r\n\t\tAnd they are not in the top 10 leaderboard results\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 leaderboard results\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 leaderboard value\r\n\t\tAnd they <maySeeRank>\r\n\t\tExamples:\r\n\t\t\t| mayHave | value | maySee    | maySeeRank           |\r\n\t\t\t| has     | true  | see       | see their rank       |\r\n\t\t\t| hasn't  | true  | see       | don't see their rank |\r\n\t\t\t| N/A     | false | don't see | don't see their rank |\r\n\t\t\t| hasn't  |       | 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\"\r\n\r\n\t@minutiae\r\n\tScenario Outline: If a user only has a first or last name, then only that is displayed\r\n\t\tGiven a user\r\n\t\tAnd they only have a <name>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they only see their <name>\r\n\t\tExamples:\r\n\t\t\t| name      |\r\n\t\t\t| firstName |\r\n\t\t\t| lastName  |";
 
 const Leaderboard_stories = {
   title: "Components/Leaderboard",
@@ -1855,7 +1856,7 @@ const defaultStyles$1 = {
   usersheading: "User",
   statsheading: "Referrals",
   rankheading: "Rank",
-  anonymousUser: "Anonymous User"
+  anonymousUser: "Anonymous User",
 };
 const defaultElements$1 = {
   empty: (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" })),
@@ -1878,6 +1879,7 @@ const Empty$1 = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [],
+      rowNumber: 10,
       viewerRank: {
         firstName: "Kutay",
         lastInitial: "C",
@@ -1903,6 +1905,7 @@ const Loading = () => {
     },
     data: {
       rankType: "rowNumber",
+      rowNumber: 10,
       leaderboard: [],
     },
     elements: {
@@ -1922,6 +1925,7 @@ const One = () => {
     },
     data: {
       rankType: "rowNumber",
+      rowNumber: 1,
       leaderboard: [
         {
           firstName: "Viktor",
@@ -1956,6 +1960,7 @@ const Five = () => {
     },
     data: {
       rankType: "rowNumber",
+      rowNumber: 5,
       leaderboard: [
         {
           firstName: "Viktor",
@@ -2001,7 +2006,7 @@ const Five = () => {
   };
   return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
 };
-const Ten = () => {
+const ReferralLeaderboard = () => {
   const props = {
     states: {
       loading: false,
@@ -2016,6 +2021,37 @@ const Ten = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        value: 82,
+        rank: 1,
+        rowNumber: 1,
+      },
+    },
+    elements: {
+      ...defaultElements$1,
+    },
+  };
+  return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
+};
+const PointsLeaderboard = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Points",
+        showRank: false,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: users,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
@@ -2043,6 +2079,7 @@ const TenWithRank = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
@@ -2070,6 +2107,7 @@ const ViewerOutside = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Kutay",
         lastInitial: "C",
@@ -2097,6 +2135,7 @@ const ViewerAnonymous = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: null,
     },
     elements: {
@@ -2110,6 +2149,7 @@ const HideViewer = () => {
     states: {
       loading: false,
       hasLeaders: true,
+      rowNumber: 10,
       styles: {
         ...defaultStyles$1,
         showRank: true,
@@ -2119,6 +2159,7 @@ const HideViewer = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
@@ -2141,7 +2182,8 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   Loading: Loading,
   One: One,
   Five: Five,
-  Ten: Ten,
+  ReferralLeaderboard: ReferralLeaderboard,
+  PointsLeaderboard: PointsLeaderboard,
   TenWithRank: TenWithRank,
   ViewerOutside: ViewerOutside,
   ViewerAnonymous: ViewerAnonymous,
@@ -2317,8 +2359,13 @@ const Router = /*#__PURE__*/Object.freeze({
   RouterPlayground: RouterPlayground
 });
 
+const scenario$5 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard Rank\r\n\r\n    The leaderboard rank components displays the current users rank on the leaderboard.\r\n\r\n    @minutiae\r\n    Scenario: Users without a rank are shown a generic message\r\n        Given a user has no rank\r\n        Then the component displays a generic message\r\n        And the message is the string from the prop \"unrankedText\"\r\n\r\n    @motivating\r\n    Scenario: Users with a rank are shown a message containing their rank\r\n        Given a user has a valid rank\r\n        And the prop \"rankText\" is an ICU message\r\n        Then the ICU message is parsed to include the user's rank\r\n        And the parsed message is displayed to the users\r\n\r\n    @motivating\r\n    Scenario Outline: Ranks from any of the three standard leaderboards can be displayed\r\n        Given a leaderboard rank component with <leaderboardType>\r\n        And a user has a valid rank\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType>\r\n        Examples:\r\n            | leaderboardType       |\r\n            | topStartedReferrers   |\r\n            | topConvertedReferrers |\r\n            | topPointEarners       |\r\n\r\n    @motivating\r\n    Scenario Outline: Program Context is used by default to filter leaderboard rank\r\n        Given a <leaderboardType> leaderboard rank component loaded with program context for \"my-program\"\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType> from \"my-program\"\r\n        Examples:\r\n            | leaderboardType       |\r\n            | topStartedReferrers   |\r\n            | topConvertedReferrers |\r\n            | topPointEarners       |\r\n\r\n    @motivating\r\n    Scenario Outline: Program Id context can be overwritten with a prop\r\n        Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType> from \"my-test-program\"\r\n        Examples:\r\n            | leaderboardType       | results             |\r\n            | topStartedReferrers   | started referrals   |\r\n            | topConvertedReferrers | converted referrals |\r\n            | topPointEarners       | points earned       |\r\n\r\n    @motivating\r\n    Scenario: Rank calculation is controlled by the \"rankType\" prop\r\n        Given the current user is User C\r\n        And User C has <points>\r\n        And User A has <points>\r\n        And User B has <points>\r\n        And the value of the \"rankType\" prop is <rankType>\r\n        Then the rank of the current user is <rank>\r\n        Examples:\r\n            | user   | points | rankType  | rank |\r\n            | User A | 5      | rowNumber | 3    |\r\n            | User B | 10     | rowNumber | 1    |\r\n            | User C | 10     | rowNumber | 2    |\r\n\r\n            | user   | points | rankType | rank |\r\n            | User A | 10     | rank     | 1    |\r\n            | User B | 10     | rank     | 1    |\r\n            | User C | 5      | rank     | 3    |\r\n\r\n            | user   | points | rankType  | rank |\r\n            | User A | 10     | denseRank | 1    |\r\n            | User B | 10     | denseRank | 1    |\r\n            | User C | 5      | denseRank | 2    |";
+
 const LeaderboardRank_stories = {
   title: "Components/Leaderboard Rank",
+  parameters: {
+    scenario: scenario$5,
+  },
 };
 const First = () => {
   const props = { data: { rank: "1st" } };
@@ -2326,12 +2373,28 @@ const First = () => {
     "Your rank is ",
     index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props)),
     " on the leaderboard"));
+};
+const Second = () => {
+  const props = { data: { rank: "2nd" } };
+  return (index.h("p", null,
+    "Your rank is ",
+    index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props)),
+    " on the leaderboard"));
+};
+const Unranked = () => {
+  const props = { data: { rank: "unranked" } };
+  return (index.h("p", null,
+    "You are currently ",
+    index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props)),
+    ", refer a friend!"));
 };
 
 const LeaderboardRank = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LeaderboardRank_stories,
-  First: First
+  First: First,
+  Second: Second,
+  Unranked: Unranked
 });
 
 function setupGraphQL() {
@@ -2941,6 +3004,62 @@ const TopStartedReferrers = createHookStory(() => {
     }),
   ];
 });
+const topPointEarners = createHookStory(() => {
+  setupGraphQL$5();
+  return [
+    View$1({
+      leaderboardType: "topPointEarners",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+    View$1({
+      leaderboardType: "topPointEarners",
+      rankType: "rank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+    View$1({
+      leaderboardType: "topPointEarners",
+      rankType: "denseRank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+  ];
+});
+const globalLeaderboards = createHookStory(() => {
+  setupGraphQL$5();
+  return [
+    View$1({
+      leaderboardType: "topPointEarners",
+      rankType: "rank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+      programId: "",
+    }),
+    View$1({
+      leaderboardType: "topStartedReferrers",
+      rankType: "rank",
+      statsheading: "Referrals",
+      programId: "",
+    }),
+    View$1({
+      leaderboardType: "topConvertedReferrers",
+      rankType: "rank",
+      statsheading: "Referrals",
+      programId: "",
+    }),
+  ];
+});
+const FiveResults = createHookStory(() => {
+  setupGraphQL$5();
+  return [
+    View$1({
+      leaderboardType: "topStartedReferrers",
+      rowNumber: 5,
+      statsheading: "Referrals",
+    }),
+  ];
+});
 const EmptyLeaderboard = createHookStory(() => {
   setupOtherGraphQL();
   return [
@@ -2993,6 +3112,9 @@ const UseLeaderboard = /*#__PURE__*/Object.freeze({
   'default': UseLeaderboard_stories,
   TopConvertedReferrers: TopConvertedReferrers,
   TopStartedReferrers: TopStartedReferrers,
+  topPointEarners: topPointEarners,
+  globalLeaderboards: globalLeaderboards,
+  FiveResults: FiveResults,
   EmptyLeaderboard: EmptyLeaderboard,
   DemoHook: DemoHook,
   DemoHookEmpty: DemoHookEmpty
@@ -3964,12 +4086,12 @@ const PortalRegister = /*#__PURE__*/Object.freeze({
   TermsAndConditions: TermsAndConditions
 });
 
-const scenario$5 = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n  @motivating\r\n  Scenario: Users can request to reset their password\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email is sent\r\n    Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n  @motivating\r\n  Scenario: Users are notified if sending their password reset email fails\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email fails to send\r\n    Then the user does not receive a password reset email\r\n    And an error banner is shown stating that they should try again\r\n\r\n  @motivating\r\n  @landmine\r\n  Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n    Given the user entered an email address that is not associated to an accoun\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    But no email is sent\r\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n  @motivating\r\n  Scenario: Users can resend password reset email\r\n    Given a user had previously requested to reset their password\r\n    When they enter their email address\r\n    And that email address is linked to a previously created account\r\n    And they click \"Reset Password\"\r\n    Then the user receives a second password reset email\r\n    And a success banner is shown stating that their email was sent\r\n\r\n  @motivating\r\n  Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"redirect-path\" with <value>\r\n    When they request a password reset email\r\n    And they click the link in the email\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value            | redirectPath     |\r\n      | doesn't have | N/A              | /resetPassword   |\r\n      | has          | /resetMyPassword | /resetMyPassword |\r\n\r\n  @minutae\r\n  Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"login-path\" with <value>\r\n    Then they see a \"Sign In\" text button\r\n    When they click \"Sign In\"\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value   | redirectPath |\r\n      | doesn't have | N/A     | /login       |\r\n      | has          | /signin | /signin      |";
+const scenario$6 = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n  @motivating\r\n  Scenario: Users can request to reset their password\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email is sent\r\n    Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n  @motivating\r\n  Scenario: Users are notified if sending their password reset email fails\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email fails to send\r\n    Then the user does not receive a password reset email\r\n    And an error banner is shown stating that they should try again\r\n\r\n  @motivating\r\n  @landmine\r\n  Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n    Given the user entered an email address that is not associated to an accoun\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    But no email is sent\r\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n  @motivating\r\n  Scenario: Users can resend password reset email\r\n    Given a user had previously requested to reset their password\r\n    When they enter their email address\r\n    And that email address is linked to a previously created account\r\n    And they click \"Reset Password\"\r\n    Then the user receives a second password reset email\r\n    And a success banner is shown stating that their email was sent\r\n\r\n  @motivating\r\n  Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"redirect-path\" with <value>\r\n    When they request a password reset email\r\n    And they click the link in the email\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value            | redirectPath     |\r\n      | doesn't have | N/A              | /resetPassword   |\r\n      | has          | /resetMyPassword | /resetMyPassword |\r\n\r\n  @minutae\r\n  Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"login-path\" with <value>\r\n    Then they see a \"Sign In\" text button\r\n    When they click \"Sign In\"\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value   | redirectPath |\r\n      | doesn't have | N/A     | /login       |\r\n      | has          | /signin | /signin      |";
 
 const PortalForgotPassword_stories = {
   title: "Components/Portal Forgot Password",
   parameters: {
-    scenario: scenario$5,
+    scenario: scenario$6,
   },
 };
 const defaultProps$4 = {
@@ -4046,12 +4168,12 @@ const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   ForgotPasswordSuccess: ForgotPasswordSuccess
 });
 
-const scenario$6 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutae\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |";
+const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutae\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |";
 
 const PortalEmailVerification_stories = {
   title: "Components/Portal Email Verification",
   parameters: {
-    scenario: scenario$6,
+    scenario: scenario$7,
   },
 };
 const defaultProps$5 = {
@@ -4132,12 +4254,12 @@ const PortalEmailVerification = /*#__PURE__*/Object.freeze({
   EmailVerificationSuccess: EmailVerificationSuccess
 });
 
-const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message is displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their password reset code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password is not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\r\n        Given the component is loaded at <currentUrl>\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                                                 | url                                           |\r\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\r\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\r\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\r\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\r\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\r\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\r\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\r\n\r\n    @landmine\r\n    Scenario Outline: Username and password are not persisted on redirects\r\n        Given the component is loaded at <currentUrl>\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                              | url                                  |\r\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
+const scenario$8 = "@author:derek\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message is displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their password reset code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password is not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\r\n        Given the component is loaded at <currentUrl>\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                                                 | url                                           |\r\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\r\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\r\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\r\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\r\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\r\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\r\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\r\n\r\n    @landmine\r\n    Scenario Outline: Username and password are not persisted on redirects\r\n        Given the component is loaded at <currentUrl>\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                              | url                                  |\r\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
 
 const PortalResetPassword_stories = {
   title: "Components/Portal Reset Password",
   parameters: {
-    scenario: scenario$7,
+    scenario: scenario$8,
   },
 };
 const defaultProps$6 = {
@@ -4296,12 +4418,12 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
   CodeValidating: CodeValidating
 });
 
-const scenario$8 = "@author:derek\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email takes you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they click \"Continue\"\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they wait 5 seconds\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their verification code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\r\n        Given the component is loaded at <currentUrl>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                                                 | url                                           |\r\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\r\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\r\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\r\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\r\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\r\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\r\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\r\n\r\n    @landmine\r\n    Scenario Outline: Username and password are not persisted on redirects\r\n        Given the component is loaded at <currentUrl>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                              | url                                  |\r\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
+const scenario$9 = "@author:derek\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email takes you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they click \"Continue\"\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they wait 5 seconds\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their verification code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\r\n        Given the component is loaded at <currentUrl>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                                                 | url                                           |\r\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\r\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\r\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\r\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\r\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\r\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\r\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\r\n\r\n    @landmine\r\n    Scenario Outline: Username and password are not persisted on redirects\r\n        Given the component is loaded at <currentUrl>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                              | url                                  |\r\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
 
 const PortalVerifyEmail_stories = {
   title: "Components/Portal Verify Email",
   parameters: {
-    scenario: scenario$8,
+    scenario: scenario$9,
   },
 };
 const errorProps$5 = {
@@ -4468,12 +4590,12 @@ const DividedLayout = /*#__PURE__*/Object.freeze({
   ColumnCustomDivider: ColumnCustomDivider
 });
 
-const scenario$9 = "Feature: Change Password\r\n\r\n    @motivating\r\n    Scenario: Users can change their password\r\n        Given a user has registered for the portal\r\n        And they have a password\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        Then they will see a success banner stating that the change was successful\r\n        When they logout\r\n        And try to login\r\n        Then they will not be able to login with their old password\r\n        But they will be able to login with their new password\r\n\r\n    @motivating\r\n    Scenario: Users must confirm their password change\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        But they enter a different password to confirm\r\n        And click \"Change Password\"\r\n        Then they will see an error banner stating that the passwords didnt match\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password\r\n\r\n    @motivating\r\n    Scenario: Users must enter a new password and confirm it to change their password\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they click \"Change password\"\r\n        Then a validation error will appear for the new password field\r\n        And their password will not be changed\r\n        When they enter a new password\r\n        And they click \"Change password\"\r\n        Then a validation error will appear for the confirm new password field\r\n        And their password will not be changed\r\n\r\n    @motivating\r\n    Scenario: An error banner will be displayed if the password change fails\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        But the change fails\r\n        Then they will see an error banner stating that the change failed\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password";
+const scenario$a = "Feature: Change Password\r\n\r\n    @motivating\r\n    Scenario: Users can change their password\r\n        Given a user has registered for the portal\r\n        And they have a password\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        Then they will see a success banner stating that the change was successful\r\n        When they logout\r\n        And try to login\r\n        Then they will not be able to login with their old password\r\n        But they will be able to login with their new password\r\n\r\n    @motivating\r\n    Scenario: Users must confirm their password change\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        But they enter a different password to confirm\r\n        And click \"Change Password\"\r\n        Then they will see an error banner stating that the passwords didnt match\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password\r\n\r\n    @motivating\r\n    Scenario: Users must enter a new password and confirm it to change their password\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they click \"Change password\"\r\n        Then a validation error will appear for the new password field\r\n        And their password will not be changed\r\n        When they enter a new password\r\n        And they click \"Change password\"\r\n        Then a validation error will appear for the confirm new password field\r\n        And their password will not be changed\r\n\r\n    @motivating\r\n    Scenario: An error banner will be displayed if the password change fails\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        But the change fails\r\n        Then they will see an error banner stating that the change failed\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password";
 
 const ChangePassword_stories = {
   title: "Components/Change Password",
   parameters: {
-    scenario: scenario$9,
+    scenario: scenario$a,
   },
 };
 const defaultProps$7 = {
@@ -4873,11 +4995,11 @@ const status = "@author:noah\r\n@owner:noah\r\nFeature: Referral Table Status Co
 
 const user = "@author:noah\r\n@owner:noah\r\nFeature: Referral Table User Column\r\n\r\n    Shows the user of each referral\r\n\r\n    Background:\r\n        Given the user column is included in the referral table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The title of the date column is configurable\r\n        Given the \"column-title\" prop is set to \"My column title\"\r\n        Then the date column is shown with \"My column title\"\r\n\r\n    @motivating\r\n    Scenario: The first and last name of the other user in the referral is displayed for each referral\r\n        Given at least one referral exists\r\n        Then for each referral where the other user's name is available their first and last name is displayed\r\n\r\n    @motivating\r\n    Scenario: Deleted users are displayed with a fallback name\r\n        Given a referral exists where the other user was deleted\r\n        Then in place of the name the text from the prop \"deleted-user\" is used\r\n\r\n    @motivating\r\n    Scenario: Anonymous users are displayed with a fallback name\r\n        Given a referral exists where the other user was anonymous\r\n        Then in place of the name the text from the prop \"anonymous-user\" is used";
 
-const scenario$a = column + date + reward + status + user;
+const scenario$b = column + date + reward + status + user;
 const ReferralTableRewardsCell_stories = {
   title: "Components/Referral Table Rewards Cell",
   parameters: {
-    scenario: scenario$a,
+    scenario: scenario$b,
   },
 };
 const baseReward = {
@@ -5121,12 +5243,12 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
   tenRewardsCell: tenRewardsCell
 });
 
-const scenario$b = "@owner:sam\r\n@author:sam\r\nFeature: Referral Table\r\n\r\n    The Referral table component shows users a list of their referrals. The referral table it's self can be customized\r\n    with a collection of columns.\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no referrals\r\n        Given a user with no referrals\r\n        When they view the referral table\r\n        Then no referrals are displayed\r\n        And they see an image with a user icon\r\n        And \"View your referral details\" in bold\r\n        And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state image and text are customizable\r\n        Given the referral table has 'sqm-empty' as a child with the following props\r\n            | prop               | value                                                                                                                           |\r\n            | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\r\n            | empty-state-header | View your referral history                                                                                                      |\r\n            | empty-state-text   | See your previous referrals and what you earned!                                                                                |\r\n        And a user with no referrals\r\n        When they view the referral table\r\n        Then they see no referrals\r\n        And they see the SaaSquatch logo\r\n        And \"View your referral history\" in bold\r\n        And \"See your previous referrals and what you earned!\" below the bolded text\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 referrals\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the referral table\r\n        Then they see the custom empty state\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The loading state is shown while referrals 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 referrals exceeds the per page limit\r\n        Given the user has <number of referrals>\r\n        And the table is configured to show <page limit> referrals 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 referrals\r\n        And the pagination button to go to the previous page is disabled on the first page of referrals\r\n        Examples:\r\n            | number of referrals | 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 referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals 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 referrals 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 referral 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 referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals 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 referrals 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, but others can be hidden\r\n        Given a referral table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with referrals\r\n        When they view the referral table\r\n        And their window size is below the tablet breakpoint\r\n        Then referral 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: The use who referred the current user can be shown in the table\r\n        Given the table is configured with <showReferrer> set to true\r\n        And the current user was referrered by <referrer>\r\n        Then the first table row on the first page of the table is for <referrer>\r\n\r\n    @motivating\r\n    Scenario: Only referrals 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 referrals from the program with \"program-id\" are shown\r\n\r\n    @motivating\r\n    Scenario: Classic program shows only classic referrals\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then only classic referrals are shown in the table\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$c = "@owner:sam\r\n@author:sam\r\nFeature: Referral Table\r\n\r\n    The Referral table component shows users a list of their referrals. The referral table it's self can be customized\r\n    with a collection of columns.\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no referrals\r\n        Given a user with no referrals\r\n        When they view the referral table\r\n        Then no referrals are displayed\r\n        And they see an image with a user icon\r\n        And \"View your referral details\" in bold\r\n        And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state image and text are customizable\r\n        Given the referral table has 'sqm-empty' as a child with the following props\r\n            | prop               | value                                                                                                                           |\r\n            | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\r\n            | empty-state-header | View your referral history                                                                                                      |\r\n            | empty-state-text   | See your previous referrals and what you earned!                                                                                |\r\n        And a user with no referrals\r\n        When they view the referral table\r\n        Then they see no referrals\r\n        And they see the SaaSquatch logo\r\n        And \"View your referral history\" in bold\r\n        And \"See your previous referrals and what you earned!\" below the bolded text\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 referrals\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the referral table\r\n        Then they see the custom empty state\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The loading state is shown while referrals 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 referrals exceeds the per page limit\r\n        Given the user has <number of referrals>\r\n        And the table is configured to show <page limit> referrals 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 referrals\r\n        And the pagination button to go to the previous page is disabled on the first page of referrals\r\n        Examples:\r\n            | number of referrals | 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 referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals 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 referrals 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 referral 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 referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals 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 referrals 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, but others can be hidden\r\n        Given a referral table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with referrals\r\n        When they view the referral table\r\n        And their window size is below the tablet breakpoint\r\n        Then referral 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: The use who referred the current user can be shown in the table\r\n        Given the table is configured with <showReferrer> set to true\r\n        And the current user was referrered by <referrer>\r\n        Then the first table row on the first page of the table is for <referrer>\r\n\r\n    @motivating\r\n    Scenario: Only referrals 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 referrals from the program with \"program-id\" are shown\r\n\r\n    @motivating\r\n    Scenario: Classic program shows only classic referrals\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then only classic referrals are shown in the table\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 ReferralTable_stories = {
   title: "Components/Referral Table",
   parameters: {
-    scenario: scenario$b,
+    scenario: scenario$c,
   },
 };
 const loadingElement = (index.h("div", { slot: "loading", style: { display: "contents" } },
@@ -5676,11 +5798,11 @@ const ReferralTable = /*#__PURE__*/Object.freeze({
   ColumnsMobileHidden: ColumnsMobileHidden
 });
 
-const scenario$c = column + date + reward + status + user;
+const scenario$d = column + date + reward + status + user;
 const ReferralTableCell_stories = {
   title: "Components/Referral Table Cell",
   parameters: {
-    scenario: scenario$c,
+    scenario: scenario$d,
   },
 };
 const TableCell = () => {
@@ -5920,11 +6042,11 @@ const ResizerStylesheet = `
 `;
 const Resizer = (_, children) => (index.h("div", { class: "resizer" }, children));
 
-const scenario$d = scenarioTaskCard + scenarioProgressBar;
+const scenario$e = scenarioTaskCard + scenarioProgressBar;
 const TaskCard_stories = {
   title: "Components/Task Card/",
   parameters: {
-    scenario: scenario$d,
+    scenario: scenario$e,
   },
 };
 const storyFrame = {
@@ -9598,12 +9720,12 @@ const PoweredByImg = /*#__PURE__*/Object.freeze({
   CustomWidthAndHeight: CustomWidthAndHeight
 });
 
-const scenario$e = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
+const scenario$f = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
 
 const PortalFooter_stories = {
   title: "Components/Portal Footer",
   parameters: {
-    scenario: scenario$e,
+    scenario: scenario$f,
   },
 };
 const defaultProps$9 = {
@@ -9632,12 +9754,12 @@ const PortalFooter = /*#__PURE__*/Object.freeze({
   FooterNoPoweredBy: FooterNoPoweredBy
 });
 
-const scenario$f = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
+const scenario$g = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
 
 const Hero_stories = {
   title: "Components/Hero Layout",
   parameters: {
-    scenario: scenario$f,
+    scenario: scenario$g,
   },
 };
 const LoginOneColumn = () => {
@@ -9814,12 +9936,12 @@ const Hero = /*#__PURE__*/Object.freeze({
   TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement
 });
 
-const scenario$g = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
+const scenario$h = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
 
 const ReferralIframe_stories = {
   title: "Components/Referral Iframe",
   parameters: {
-    scenario: scenario$g,
+    scenario: scenario$h,
   },
 };
 const props = {
@@ -9850,12 +9972,12 @@ const ReferralIframe$1 = /*#__PURE__*/Object.freeze({
   ReferralIframeError: ReferralIframeError
 });
 
-const scenario$h = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
+const scenario$i = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
 
 const NameFields_stories = {
   title: "Components/Name Fields",
   parameters: {
-    scenario: scenario$h,
+    scenario: scenario$i,
   },
 };
 const props$1 = {
@@ -9893,12 +10015,12 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const scenario$i = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background: A user is on the portal registration page\r\n    Given a user is viewing the \"/register\"\r\n    And \"/register\" contains the registration form\r\n    And the registration form has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given the user is filling out the registration form\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When they try to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-optional=\"true\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    The error message string is evaluated as an ICU string, but currently is provided no context\r\n    Given the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the boolean value of the checkbox is submitted under \"myCheckBox\" field\r\n\r\n  @minutae\r\n  Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n    Given the checkbox <mayHave> prop \"checkbox-name\"\r\n    And it <mayHavePropValue>\r\n    When a user views the checkbox\r\n    Then an alert with an error message is displayed in place of the checkbox\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information is displayed\r\n      | information          |\r\n      | component being used |\r\n      | missing attribute(s) |\r\n    Examples:\r\n      | mayBeAnAttribute | mayHavePropValue |\r\n      | doesn't have     | N/A              |\r\n      | has              | \"\"               |\r\n      | has              |                  |";
+const scenario$j = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background: A user is on the portal registration page\r\n    Given a user is viewing the \"/register\"\r\n    And \"/register\" contains the registration form\r\n    And the registration form has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given the user is filling out the registration form\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When they try to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-optional=\"true\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    The error message string is evaluated as an ICU string, but currently is provided no context\r\n    Given the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the boolean value of the checkbox is submitted under \"myCheckBox\" field\r\n\r\n  @minutae\r\n  Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n    Given the checkbox <mayHave> prop \"checkbox-name\"\r\n    And it <mayHavePropValue>\r\n    When a user views the checkbox\r\n    Then an alert with an error message is displayed in place of the checkbox\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information is displayed\r\n      | information          |\r\n      | component being used |\r\n      | missing attribute(s) |\r\n    Examples:\r\n      | mayBeAnAttribute | mayHavePropValue |\r\n      | doesn't have     | N/A              |\r\n      | has              | \"\"               |\r\n      | has              |                  |";
 
 const CheckboxField_stories = {
   title: "Components/Checkbox Field",
   parameters: {
-    scenario: scenario$i,
+    scenario: scenario$j,
   },
 };
 const defaultProps$a = {
@@ -9998,7 +10120,7 @@ const CheckboxField = /*#__PURE__*/Object.freeze({
 const UseCheckboxField_stories = {
   title: "Hooks / useCheckboxField",
   parameters: {
-    scenario: scenario$i,
+    scenario: scenario$j,
   },
 };
 function setupGraphQL$9() {
@@ -10173,12 +10295,12 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
   MissingName: MissingName$1
 });
 
-const scenario$j = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text,\r\n    a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field\r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-optional\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | false | is    | appears        |\r\n            |       | is    | appears        |\r\n            | true  | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: The validation error message is configurable\r\n        The error message string is evaluated as an ICU string, but currently is provided no context\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @landmine\r\n    Scenario: The clear text button in the date picker does not clear the date\r\n        Due to an incompatibility between our shoelace version and the browser, the clear funtionality is not supported currently\r\n        Given the input has prop \"field-type\" \"date\"\r\n        And the user has entered a date\r\n        When they click the calendar icon\r\n        And click the 'clear' text button\r\n        Then their selected date is not cleared\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        And it has a \"field-name\"\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formData> is recorded in the form data as a string\r\n        Examples:\r\n            | value | formInput      | formData       |\r\n            | text  | Hello there    | Hello there    |\r\n            | date  | 05/07/2021     | 2021-05-07     |\r\n            | tel   | (250) 234-9877 | (250) 234-9877 |\r\n\r\n    @minutae\r\n    Scenario Outline: The input field component fails fast if a field name isn't provided\r\n        Given the input <mayHave> prop \"field-name\"\r\n        And it <mayHavePropValue>\r\n        When a user views the input\r\n        Then an alert with an error message is displayed in place of the input\r\n        And it has a details section\r\n        When \"More details\" is clicked\r\n        Then the following information is displayed\r\n            | information          |\r\n            | component being used |\r\n            | missing attribute(s) |\r\n        Examples:\r\n            | mayBeAnAttribute | mayHavePropValue |\r\n            | doesn't have     | N/A              |\r\n            | has              | \"\"               |\r\n            | has              |                  |";
+const scenario$k = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text,\r\n    a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field\r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-optional\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | false | is    | appears        |\r\n            |       | is    | appears        |\r\n            | true  | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: The validation error message is configurable\r\n        The error message string is evaluated as an ICU string, but currently is provided no context\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @landmine\r\n    Scenario: The clear text button in the date picker does not clear the date\r\n        Due to an incompatibility between our shoelace version and the browser, the clear funtionality is not supported currently\r\n        Given the input has prop \"field-type\" \"date\"\r\n        And the user has entered a date\r\n        When they click the calendar icon\r\n        And click the 'clear' text button\r\n        Then their selected date is not cleared\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        And it has a \"field-name\"\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formData> is recorded in the form data as a string\r\n        Examples:\r\n            | value | formInput      | formData       |\r\n            | text  | Hello there    | Hello there    |\r\n            | date  | 05/07/2021     | 2021-05-07     |\r\n            | tel   | (250) 234-9877 | (250) 234-9877 |\r\n\r\n    @minutae\r\n    Scenario Outline: The input field component fails fast if a field name isn't provided\r\n        Given the input <mayHave> prop \"field-name\"\r\n        And it <mayHavePropValue>\r\n        When a user views the input\r\n        Then an alert with an error message is displayed in place of the input\r\n        And it has a details section\r\n        When \"More details\" is clicked\r\n        Then the following information is displayed\r\n            | information          |\r\n            | component being used |\r\n            | missing attribute(s) |\r\n        Examples:\r\n            | mayBeAnAttribute | mayHavePropValue |\r\n            | doesn't have     | N/A              |\r\n            | has              | \"\"               |\r\n            | has              |                  |";
 
 const InputField_stories = {
   title: "Components/Input Field",
   parameters: {
-    scenario: scenario$j,
+    scenario: scenario$k,
   },
 };
 const defaultProps$c = {
@@ -10269,7 +10391,7 @@ const InputField = /*#__PURE__*/Object.freeze({
 const UseInputField_stories = {
   title: "Hooks / useInputField",
   parameters: {
-    scenario: scenario$j,
+    scenario: scenario$k,
   },
 };
 function setupGraphQL$b() {
@@ -10351,12 +10473,12 @@ const UseInputField = /*#__PURE__*/Object.freeze({
   MissingName: MissingName$2
 });
 
-const scenario$k = "@author:derek\r\n@owner:derek\r\nFeature: Reward Exchange List\r\n\r\n    The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\r\n    It populates a list from the reward exchange rules set up on a given tenant.\r\n\r\n    Background:\r\n        Given a tenant with reward exchange rules\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no visible exchanges\r\n        Given a user with no visible exchanges\r\n        When they view the reward exchange\r\n        Then no exchange options are displayed\r\n        And they see an image of a present\r\n        And \"Redeem Rewards\" in bold\r\n        And \"Use your points to redeem rewards once they become available\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no visible exchanges\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward exchange\r\n        Then they see the custom empty state\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\r\n        Given a user\r\n        When they load the reward exchange list\r\n        Then they see a loading Skeleton\r\n        And it has 8 skeleton cards\r\n        When the reward exchange rules have loaded\r\n        Then the skeleton is replaced with reward exchange options\r\n\r\n    @motivating\r\n    Scenario: An error banner appears when the reward exchange list fails to load\r\n        Given a user trying to view the reward exchange list\r\n        But it fails to load\r\n        Then an error banner is displayed\r\n        And it displays \"Unable to load reward exchange list. Please try again\"\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The exchange progress bar progresses through the exchange process\r\n        Given a user who is eligible for the tenants reward exchange rules\r\n        When they view the reward exchange list\r\n        Then the process bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with green outline, white fill and number 1 in green |\r\n            | Step 2 `Select` title in grey                                      |\r\n            | Step 2 circle with grey fill and number 2 in white                 |\r\n            | Step 3 `Confirm` title in grey                                     |\r\n            | Step 3 circle with grey fill and number 3 in white                 |\r\n            | lines between all steps are greyed out                             |\r\n        When they continue to the selection page\r\n        Then the progress bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with white checkmark and green fill                  |\r\n            | Step 2 `Select` title in black                                     |\r\n            | Step 2 circle with green outline, white fill and number 2 in green |\r\n            | Step 3 `Confirm` title in grey                                     |\r\n            | Step 3 circle with grey fill and number 3 in white                 |\r\n            | Green line between step 1 and 2                                    |\r\n            | Grey line between step 2 and 3                                     |\r\n        When they continue to the confirmation page\r\n        Then the progress bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with white checkmark and green fill                  |\r\n            | Step 2 `Select` title in black                                     |\r\n            | Step 2 circle with white checkmark and green fill                  |\r\n            | Step 3 `Confirm` title in black                                    |\r\n            | Step 3 circle with green outline, white fill and number 3 in green |\r\n            | Green line between all steps                                       |\r\n        When they continue to the redemption page\r\n        Then the progress bar displays the following elements\r\n            | elements                                          |\r\n            | Step 1 `Rewards` title in black                   |\r\n            | Step 1 circle with white checkmark and green fill |\r\n            | Step 2 `Select` title in black                    |\r\n            | Step 2 circle with white checkmark and green fill |\r\n            | Step 3 `Confirm` title in black                   |\r\n            | Step 3 circle with white checkmark and green fill |\r\n            | Green line between all steps                      |\r\n\r\n    @motivating\r\n    Scenario: Users must choose a reward exchange option to continue to the selection page\r\n        Given a user who is eligible for the tenants reward exchange rules\r\n        When they view the reward exchange list\r\n        Then the 'Continue' button is disabled\r\n        When they select a reward exchange card\r\n        Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\r\n        And the continue button is no longer disabled\r\n        When they click \"Continue\"\r\n        Then they are brought to the selection page\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Reward exchange rule names and images are used in the reward exchange cards\r\n        Given a tenant reward exchange rule\r\n        And it has name \"My Visa Exchange Rule\"\r\n        And it has an image\r\n        When a user views the reward exchange list\r\n        Then they see a exchange card with title \"My Visa Exchange Rule\"\r\n        And the exchange image on the left hand side of the card\r\n\r\n    @motivating\r\n    Scenario Outline: Reward exchange source values are displayed on reward exchange cards\r\n        Given a <type> reward exchange rule\r\n        When a user views the reward exchange list\r\n        Then they see <text> under the name on the exchange option cards\r\n        And the pretty values are localized to a user locale\r\n        Examples:\r\n            | type                        | text                                                                |\r\n            | FIXED_GLOBAL_REWARD         | the exchange source pretty value                                    |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n            | VARIABLE_GLOBAL_REWARD      | the exchange source min pretty value to the source max pretty value |\r\n            | VARIABLE_CREDIT_REWARD      | the exchange source min pretty value to the source max pretty value |\r\n\r\n    @motivating\r\n    Scenario Outline: Reward exchange cards can display customized error messages\r\n        Given a reward exchange rule\r\n        And it has <availabilityPredicate>\r\n        And the reward exchange list has prop \"not-available-error\" with <value>\r\n        When the user views the reward exchange list\r\n        Then the card for the reward exchange rule is disabled\r\n        And <message> is displayed\r\n        Examples:\r\n            | availabilityPredicate                                         | value                                                                                                           | message                         |\r\n            | 'champion' in user.segments ? \"NOT_CHAMPION\" : true           | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} }        | Sorry must be a champion!       |\r\n            | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\r\n\r\n    @motivating\r\n    Scenario: Exchange options are disabled if they put a user over the W9 limit\r\n        Given a user who is approaching their W9 limit\r\n        And a reward exchange rule\r\n        And its destination reward has a US taxable value that would put the user over their limit\r\n        When they view the reward exchange list\r\n        Then the reward exchange card is disabled\r\n        And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\r\n        And the text is orange\r\n        And the icon is orange\r\n\r\n    @motivating\r\n    Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\r\n        Given a <type> reward exchange rule\r\n        But the user lacks enough credit to exchange for it\r\n        When they view the reward exchange list\r\n        Then the reward exchange card is disabled\r\n        And a <text> error message is displayed on to the right of a exclamation triangle icon\r\n        And the text is orange\r\n        And the icon is orange\r\n        Examples:\r\n            | type                        | text                            |\r\n            | FIXED_GLOBAL_REWARD         | {prettySourceValue} required    |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n            | VARIABLE_GLOBAL_REWARD      | {prettySourceMinValue} required |\r\n            | VARIABLE_CREDIT_REWARD      | {prettySourceMinValue} required |\r\n\r\n    @motivating\r\n    Scenario: Users can go back to the Rewards page from the Select page\r\n        Given a user viewing the Select page\r\n        Then they see a \"Cancel\" text button\r\n        And a \"Continue to confirmation\" brand colour button in the bottom right corner\r\n        When they click \"Cancel\"\r\n        Then they return to the Rewards page\r\n\r\n    @motivating\r\n    Scenario: Users can go back to the Select Page from the Confirm page\r\n        Given a user viewing the Confirm page\r\n        Then they see a \"Back\" text button\r\n        And a \"Redeem\" brand colour button in the bottom right corner\r\n        When they click \"Back\"\r\n        Then they return to the Select Page\r\n\r\n    @motivating\r\n    Scenario: Reward rules with visibility predicates that evaluates to false are not shown\r\n        Given a tenant reward exchange rule with visibility predicates that evaluates to false\r\n        When a user views the reward exchange list\r\n        Then they do not see the card for that reward exchange rule\r\n\r\n    @motivating\r\n    Scenario Outline: Users can choose their reward option for variable rewards on the Select page\r\n        Given a <type> exchange rule\r\n        And it has the following fields\r\n            | fields      |\r\n            | name        |\r\n            | description |\r\n            | image       |\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see the exchange rule image on the left hand side\r\n        And on the right hand side they see the following in this order from top to bottom\r\n            | elements                                                                                          |\r\n            | exchange name                                                                                     |\r\n            | exchange description                                                                              |\r\n            | select list with all exchange options using pretty values, destination reward above source reward |\r\n        Examples:\r\n            | type                        |\r\n            | STEPPED_FIXED_GLOBAL_REWARD |\r\n            | VARIABLE_GLOBAL_REWARD      |\r\n            | VARIABLE_CREDIT_REWARD      |\r\n\r\n    @motivating\r\n    Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\r\n        Given a \"FIXED_GLOBAL_REWARD\" exchange rule\r\n        And it has the following fields\r\n            | fields      |\r\n            | name        |\r\n            | description |\r\n            | image       |\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see the exchange rule image on the left hand side\r\n        And on the right hand side they see the following in this order from top to bottom\r\n            | elements                                               |\r\n            | exchange name                                          |\r\n            | exchange source pretty value displayed in brand colour |\r\n            | exchange description                                   |\r\n\r\n    @motivating\r\n    Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\r\n        Given a <type> exchange rule\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see a drop down with all the reward exchange selections\r\n        When they click on the drop down\r\n        But they are not eligible for all of the exchanges options <dueToReason>\r\n        Then the ineligble options are disabled\r\n        And under the source value is <text>\r\n        Examples:\r\n            | type                        | dueToReason                     | text                         |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n            | VARIABLE_GLOBAL_REWARD      | due to insufficent source value | {prettySourceValue} required |\r\n            | VARIABLE_CREDIT_REWARD      | due to insufficent source value | {prettySourceValue} required |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | W9                              | US Tax Limit                 |\r\n            | VARIABLE_GLOBAL_REWARD      | W9                              | US Tax Limit                 |\r\n            | VARIABLE_CREDIT_REWARD      | W9                              | US Tax Limit                 |\r\n\r\n    @motivating\r\n    Scenario Outline: The Confirm page allows users to view their exchange before committing\r\n        Given a <type> exchange rule\r\n        When a user views the reward exchange list\r\n        And they select the exchange\r\n        And they progress to Confirm page\r\n        Then they see a row with title \"Reward\"\r\n        And it contains the exchange name\r\n        And it contains the exchange image\r\n        And they <maySee> a row with title \"Reward Amount\"\r\n        And it <mayContain> <amountTitle>\r\n        And they see a row with title \"Cost to Redeem\"\r\n        And it contains the source reward pretty value in bolded text\r\n        Examples:\r\n            | type                        | maySee | mayContain      | amountTitle                  |\r\n            | FIXED_GLOBAL_REWARD         | don't  | doesn't contain | N/A                          |\r\n            | VARIABLE_GLOBAL_REWARD      | see    | contains        | the pretty destination value |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | see    | contains        | the pretty destination value |\r\n            | VARIABLE_CREDIT_REWARD      | see    | contains        | the pretty destination value |\r\n\r\n    @motivating\r\n    Scenario: An error banner is displayed if an error occurs during redemeption\r\n        Given a user has selected a reward to exchange\r\n        And is on the confirmation page\r\n        When they click \"Redeem\"\r\n        But an error occurs\r\n        Then an error banner appears\r\n        And it contains details about the error\r\n        And the reward exchange is not completed\r\n\r\n    @motivating\r\n    Scenario: Confetti is displayed when a reward exchange succeeds\r\n        Given a user has selected a reward to exchange\r\n        And they are on the confirmation page\r\n        When they click \"Redeem\"\r\n        And the exchange is successful\r\n        Then they see confetti centered on the success page\r\n        And they see text describing what they exchanged for their new reward\r\n        And they see a \"Done\" brand colour button\r\n        When they click \"Done\"\r\n        Then they see the Rewards page\r\n\r\n    @motivating\r\n    Scenario: Fuel tank codes are shown when a reward exchange succeeds\r\n        Given a user has selected to exchange for a fuel tank reward\r\n        When they complete the reward exchange\r\n        And are on the success page\r\n        Then they see a textbox with their fuel tank code\r\n        And a clipboard icon\r\n        When they click the clipboard icon\r\n        Then their fuel tank code is copied to their clipboard\r\n\r\n    @motivating\r\n    Scenario Outline: Users can exchange for any type of reward\r\n        Given a <type> reward exchange rule for a <reward>\r\n        And a user who has enough source credit to exchange for the reward\r\n        When they go through the exchange flow\r\n        And exchange for their reward\r\n        Then their credit is exchanged for the <reward>\r\n        Examples:\r\n            | type                        | reward         |\r\n            | FIXED_GLOBAL_REWARD         | gift card      |\r\n            | FIXED_GLOBAL_REWARD         | fuel tank code |\r\n            | FIXED_GLOBAL_REWARD         | discount       |\r\n            | FIXED_GLOBAL_REWARD         | credit reward  |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | gift card      |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | discount       |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | credit reward  |\r\n            | VARIABLE_GLOBAL_REWARD      | gift card      |\r\n            | VARIABLE_GLOBAL_REWARD      | discount       |\r\n            | VARIABLE_GLOBAL_REWARD      | credit reward  |\r\n            | VARIABLE_CREDIT_REWARD      | credit reward  |";
+const scenario$l = "@author:derek\r\n@owner:derek\r\nFeature: Reward Exchange List\r\n\r\n    The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\r\n    It populates a list from the reward exchange rules set up on a given tenant.\r\n\r\n    Background:\r\n        Given a tenant with reward exchange rules\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no visible exchanges\r\n        Given a user with no visible exchanges\r\n        When they view the reward exchange\r\n        Then no exchange options are displayed\r\n        And they see an image of a present\r\n        And \"Redeem Rewards\" in bold\r\n        And \"Use your points to redeem rewards once they become available\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no visible exchanges\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward exchange\r\n        Then they see the custom empty state\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\r\n        Given a user\r\n        When they load the reward exchange list\r\n        Then they see a loading Skeleton\r\n        And it has 8 skeleton cards\r\n        When the reward exchange rules have loaded\r\n        Then the skeleton is replaced with reward exchange options\r\n\r\n    @motivating\r\n    Scenario: An error banner appears when the reward exchange list fails to load\r\n        Given a user trying to view the reward exchange list\r\n        But it fails to load\r\n        Then an error banner is displayed\r\n        And it displays \"Unable to load reward exchange list. Please try again\"\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The exchange progress bar progresses through the exchange process\r\n        Given a user who is eligible for the tenants reward exchange rules\r\n        When they view the reward exchange list\r\n        Then the process bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with green outline, white fill and number 1 in green |\r\n            | Step 2 `Select` title in grey                                      |\r\n            | Step 2 circle with grey fill and number 2 in white                 |\r\n            | Step 3 `Confirm` title in grey                                     |\r\n            | Step 3 circle with grey fill and number 3 in white                 |\r\n            | lines between all steps are greyed out                             |\r\n        When they continue to the selection page\r\n        Then the progress bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with white checkmark and green fill                  |\r\n            | Step 2 `Select` title in black                                     |\r\n            | Step 2 circle with green outline, white fill and number 2 in green |\r\n            | Step 3 `Confirm` title in grey                                     |\r\n            | Step 3 circle with grey fill and number 3 in white                 |\r\n            | Green line between step 1 and 2                                    |\r\n            | Grey line between step 2 and 3                                     |\r\n        When they continue to the confirmation page\r\n        Then the progress bar displays the following elements\r\n            | elements                                                           |\r\n            | Step 1 `Rewards` title in black                                    |\r\n            | Step 1 circle with white checkmark and green fill                  |\r\n            | Step 2 `Select` title in black                                     |\r\n            | Step 2 circle with white checkmark and green fill                  |\r\n            | Step 3 `Confirm` title in black                                    |\r\n            | Step 3 circle with green outline, white fill and number 3 in green |\r\n            | Green line between all steps                                       |\r\n        When they continue to the redemption page\r\n        Then the progress bar displays the following elements\r\n            | elements                                          |\r\n            | Step 1 `Rewards` title in black                   |\r\n            | Step 1 circle with white checkmark and green fill |\r\n            | Step 2 `Select` title in black                    |\r\n            | Step 2 circle with white checkmark and green fill |\r\n            | Step 3 `Confirm` title in black                   |\r\n            | Step 3 circle with white checkmark and green fill |\r\n            | Green line between all steps                      |\r\n\r\n    @motivating\r\n    Scenario: Users must choose a reward exchange option to continue to the selection page\r\n        Given a user who is eligible for the tenants reward exchange rules\r\n        When they view the reward exchange list\r\n        Then the 'Continue' button is disabled\r\n        When they select a reward exchange card\r\n        Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\r\n        And the continue button is no longer disabled\r\n        When they click \"Continue\"\r\n        Then they are brought to the selection page\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Reward exchange rule names and images are used in the reward exchange cards\r\n        Given a tenant reward exchange rule\r\n        And it has name \"My Visa Exchange Rule\"\r\n        And it has an image\r\n        When a user views the reward exchange list\r\n        Then they see a exchange card with title \"My Visa Exchange Rule\"\r\n        And the exchange image on the left hand side of the card\r\n\r\n    @motivating\r\n    Scenario Outline: Reward exchange source values are displayed on reward exchange cards\r\n        Given a <type> reward exchange rule\r\n        When a user views the reward exchange list\r\n        Then they see <text> under the name on the exchange option cards\r\n        And the pretty values are localized to a user locale\r\n        Examples:\r\n            | type                        | text                                                                |\r\n            | FIXED_GLOBAL_REWARD         | the exchange source pretty value                                    |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n            | VARIABLE_GLOBAL_REWARD      | the exchange source min pretty value to the source max pretty value |\r\n            | VARIABLE_CREDIT_REWARD      | the exchange source min pretty value to the source max pretty value |\r\n\r\n    @motivating\r\n    Scenario Outline: Reward exchange cards can display customized error messages\r\n        Given a reward exchange rule\r\n        And it has <availabilityPredicate>\r\n        And the reward exchange list has prop \"not-available-error\" with <value>\r\n        When the user views the reward exchange list\r\n        Then the card for the reward exchange rule is disabled\r\n        And <message> is displayed\r\n        Examples:\r\n            | availabilityPredicate                                         | value                                                                                                           | message                         |\r\n            | 'champion' in user.segments ? \"NOT_CHAMPION\" : true           | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} }        | Sorry must be a champion!       |\r\n            | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\r\n\r\n    @motivating\r\n    Scenario: Exchange options are disabled if they put a user over the W9 limit\r\n        Given a user who is approaching their W9 limit\r\n        And a reward exchange rule\r\n        And its destination reward has a US taxable value that would put the user over their limit\r\n        When they view the reward exchange list\r\n        Then the reward exchange card is disabled\r\n        And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\r\n        And the text is orange\r\n        And the icon is orange\r\n\r\n    @motivating\r\n    Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\r\n        Given a <type> reward exchange rule\r\n        But the user lacks enough credit to exchange for it\r\n        When they view the reward exchange list\r\n        Then the reward exchange card is disabled\r\n        And a <text> error message is displayed on to the right of a exclamation triangle icon\r\n        And the text is orange\r\n        And the icon is orange\r\n        Examples:\r\n            | type                        | text                            |\r\n            | FIXED_GLOBAL_REWARD         | {prettySourceValue} required    |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n            | VARIABLE_GLOBAL_REWARD      | {prettySourceMinValue} required |\r\n            | VARIABLE_CREDIT_REWARD      | {prettySourceMinValue} required |\r\n\r\n    @motivating\r\n    Scenario: Users can go back to the Rewards page from the Select page\r\n        Given a user viewing the Select page\r\n        Then they see a \"Cancel\" text button\r\n        And a \"Continue to confirmation\" brand colour button in the bottom right corner\r\n        When they click \"Cancel\"\r\n        Then they return to the Rewards page\r\n\r\n    @motivating\r\n    Scenario: Users can go back to the Select Page from the Confirm page\r\n        Given a user viewing the Confirm page\r\n        Then they see a \"Back\" text button\r\n        And a \"Redeem\" brand colour button in the bottom right corner\r\n        When they click \"Back\"\r\n        Then they return to the Select Page\r\n\r\n    @motivating\r\n    Scenario: Reward rules with visibility predicates that evaluates to false are not shown\r\n        Given a tenant reward exchange rule with visibility predicates that evaluates to false\r\n        When a user views the reward exchange list\r\n        Then they do not see the card for that reward exchange rule\r\n\r\n    @motivating\r\n    Scenario Outline: Users can choose their reward option for variable rewards on the Select page\r\n        Given a <type> exchange rule\r\n        And it has the following fields\r\n            | fields      |\r\n            | name        |\r\n            | description |\r\n            | image       |\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see the exchange rule image on the left hand side\r\n        And on the right hand side they see the following in this order from top to bottom\r\n            | elements                                                                                          |\r\n            | exchange name                                                                                     |\r\n            | exchange description                                                                              |\r\n            | select list with all exchange options using pretty values, destination reward above source reward |\r\n        Examples:\r\n            | type                        |\r\n            | STEPPED_FIXED_GLOBAL_REWARD |\r\n            | VARIABLE_GLOBAL_REWARD      |\r\n            | VARIABLE_CREDIT_REWARD      |\r\n\r\n    @motivating\r\n    Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\r\n        Given a \"FIXED_GLOBAL_REWARD\" exchange rule\r\n        And it has the following fields\r\n            | fields      |\r\n            | name        |\r\n            | description |\r\n            | image       |\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see the exchange rule image on the left hand side\r\n        And on the right hand side they see the following in this order from top to bottom\r\n            | elements                                               |\r\n            | exchange name                                          |\r\n            | exchange source pretty value displayed in brand colour |\r\n            | exchange description                                   |\r\n\r\n    @motivating\r\n    Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\r\n        Given a <type> exchange rule\r\n        When a user views the reward exchange list\r\n        And they progress to the Select page for this exchange\r\n        Then they see a drop down with all the reward exchange selections\r\n        When they click on the drop down\r\n        But they are not eligible for all of the exchanges options <dueToReason>\r\n        Then the ineligble options are disabled\r\n        And under the source value is <text>\r\n        Examples:\r\n            | type                        | dueToReason                     | text                         |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n            | VARIABLE_GLOBAL_REWARD      | due to insufficent source value | {prettySourceValue} required |\r\n            | VARIABLE_CREDIT_REWARD      | due to insufficent source value | {prettySourceValue} required |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | W9                              | US Tax Limit                 |\r\n            | VARIABLE_GLOBAL_REWARD      | W9                              | US Tax Limit                 |\r\n            | VARIABLE_CREDIT_REWARD      | W9                              | US Tax Limit                 |\r\n\r\n    @motivating\r\n    Scenario Outline: The Confirm page allows users to view their exchange before committing\r\n        Given a <type> exchange rule\r\n        When a user views the reward exchange list\r\n        And they select the exchange\r\n        And they progress to Confirm page\r\n        Then they see a row with title \"Reward\"\r\n        And it contains the exchange name\r\n        And it contains the exchange image\r\n        And they <maySee> a row with title \"Reward Amount\"\r\n        And it <mayContain> <amountTitle>\r\n        And they see a row with title \"Cost to Redeem\"\r\n        And it contains the source reward pretty value in bolded text\r\n        Examples:\r\n            | type                        | maySee | mayContain      | amountTitle                  |\r\n            | FIXED_GLOBAL_REWARD         | don't  | doesn't contain | N/A                          |\r\n            | VARIABLE_GLOBAL_REWARD      | see    | contains        | the pretty destination value |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | see    | contains        | the pretty destination value |\r\n            | VARIABLE_CREDIT_REWARD      | see    | contains        | the pretty destination value |\r\n\r\n    @motivating\r\n    Scenario: An error banner is displayed if an error occurs during redemeption\r\n        Given a user has selected a reward to exchange\r\n        And is on the confirmation page\r\n        When they click \"Redeem\"\r\n        But an error occurs\r\n        Then an error banner appears\r\n        And it contains details about the error\r\n        And the reward exchange is not completed\r\n\r\n    @motivating\r\n    Scenario: Confetti is displayed when a reward exchange succeeds\r\n        Given a user has selected a reward to exchange\r\n        And they are on the confirmation page\r\n        When they click \"Redeem\"\r\n        And the exchange is successful\r\n        Then they see confetti centered on the success page\r\n        And they see text describing what they exchanged for their new reward\r\n        And they see a \"Done\" brand colour button\r\n        When they click \"Done\"\r\n        Then they see the Rewards page\r\n\r\n    @motivating\r\n    Scenario: Fuel tank codes are shown when a reward exchange succeeds\r\n        Given a user has selected to exchange for a fuel tank reward\r\n        When they complete the reward exchange\r\n        And are on the success page\r\n        Then they see a textbox with their fuel tank code\r\n        And a clipboard icon\r\n        When they click the clipboard icon\r\n        Then their fuel tank code is copied to their clipboard\r\n\r\n    @motivating\r\n    Scenario Outline: Users can exchange for any type of reward\r\n        Given a <type> reward exchange rule for a <reward>\r\n        And a user who has enough source credit to exchange for the reward\r\n        When they go through the exchange flow\r\n        And exchange for their reward\r\n        Then their credit is exchanged for the <reward>\r\n        Examples:\r\n            | type                        | reward         |\r\n            | FIXED_GLOBAL_REWARD         | gift card      |\r\n            | FIXED_GLOBAL_REWARD         | fuel tank code |\r\n            | FIXED_GLOBAL_REWARD         | discount       |\r\n            | FIXED_GLOBAL_REWARD         | credit reward  |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | gift card      |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | discount       |\r\n            | STEPPED_FIXED_GLOBAL_REWARD | credit reward  |\r\n            | VARIABLE_GLOBAL_REWARD      | gift card      |\r\n            | VARIABLE_GLOBAL_REWARD      | discount       |\r\n            | VARIABLE_GLOBAL_REWARD      | credit reward  |\r\n            | VARIABLE_CREDIT_REWARD      | credit reward  |";
 
 const RewardExchangeList_stories = {
   title: "Components/Reward Exchange List",
   parameters: {
-    scenario: scenario$k,
+    scenario: scenario$l,
   },
 };
 const StoryBase = (props) => () => {
@@ -10404,12 +10526,12 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   Empty: Empty$2
 });
 
-const scenario$l = "@author:derek\r\n@owner:derek\r\nFeature: Program Explainer\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The program explainer wraps program explainer steps and aligns them\r\n        Given a program explainer component\r\n        And it has <number> program explainer steps as components\r\n        When a user views the program explainer\r\n        Then they see <number> steps aligned horizontally\r\n        And they have equal height/width\r\n        And equal padding in between\r\n        When they are viewed on a screen smaller than 500px\r\n        Then the steps stack vertically with equal padding in between\r\n        And they have equal width\r\n        But height may vary\r\n        Examples:\r\n            | number |\r\n            | 2      |\r\n            | 3      |\r\n            | 4      |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The program explainer displays a section header\r\n        Given a program explainer step with props\r\n            | prop   | value     |\r\n            | header | My Header |\r\n        And it has program explainer steps as children\r\n        When a user views the program explainer\r\n        Then they see \"My Header\" centered above the explainer steps\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Colours are customizable\r\n        Given a program explainer with props\r\n            | prop             | value  |\r\n            | text-color       | purple |\r\n            | background-color | grey   |\r\n        When a user views the program explainer\r\n        Then the header is purple\r\n        And the background between steos is grey\r\n";
+const scenario$m = "@author:derek\r\n@owner:derek\r\nFeature: Program Explainer\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The program explainer wraps program explainer steps and aligns them\r\n        Given a program explainer component\r\n        And it has <number> program explainer steps as components\r\n        When a user views the program explainer\r\n        Then they see <number> steps aligned horizontally\r\n        And they have equal height/width\r\n        And equal padding in between\r\n        When they are viewed on a screen smaller than 500px\r\n        Then the steps stack vertically with equal padding in between\r\n        And they have equal width\r\n        But height may vary\r\n        Examples:\r\n            | number |\r\n            | 2      |\r\n            | 3      |\r\n            | 4      |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The program explainer displays a section header\r\n        Given a program explainer step with props\r\n            | prop   | value     |\r\n            | header | My Header |\r\n        And it has program explainer steps as children\r\n        When a user views the program explainer\r\n        Then they see \"My Header\" centered above the explainer steps\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Colours are customizable\r\n        Given a program explainer with props\r\n            | prop             | value  |\r\n            | text-color       | purple |\r\n            | background-color | grey   |\r\n        When a user views the program explainer\r\n        Then the header is purple\r\n        And the background between steos is grey\r\n";
 
 const ProgramExplainer_stories = {
   title: "Components/Program Explainer",
   parameters: {
-    scenario: scenario$l,
+    scenario: scenario$m,
   },
 };
 const OneStep = () => {
@@ -10465,12 +10587,12 @@ const ProgramExplainer = /*#__PURE__*/Object.freeze({
   ProgramExplainerGeneric: ProgramExplainerGeneric
 });
 
-const scenario$m = "@author:derek\r\n@owner:derek\r\nFeature: Program Explainer Step\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The program explainer step displays a icon, header and description\r\n        Given a program explainer step with props\r\n            | prop        | value                            |\r\n            | header      | My Header                        |\r\n            | description | My program explainer description |\r\n            | icon        | person-plus-fill                 |\r\n        When a user views the explainer step\r\n        Then they see an person icon with a + in the top left hand corner\r\n        And the icon is weight 300 brand colour\r\n        And below they see \"My Header\" in large bold font\r\n        And below they see \"My program explainer description\" in medium font\r\n        And the step background colour is weight 50 brand colour\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The program explainer can display an image in place of an icon\r\n        Given a program explainer\r\n        And it has an \"image-url\" prop with a value of a valid url to an image\r\n        When a user views the explainer step\r\n        Then the image is displayed in place of an incon in the top left hand corner\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Colours are customizable\r\n        Given a program explainer step with props\r\n            | prop             | value            |\r\n            | text-color       | purple           |\r\n            | background-color | grey             |\r\n        When a user views the explainer step\r\n        Then they see the step background is grey\r\n        And the header text is purple\r\n        And the description text is purple\r\n";
+const scenario$n = "@author:derek\r\n@owner:derek\r\nFeature: Program Explainer Step\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The program explainer step displays a icon, header and description\r\n        Given a program explainer step with props\r\n            | prop        | value                            |\r\n            | header      | My Header                        |\r\n            | description | My program explainer description |\r\n            | icon        | person-plus-fill                 |\r\n        When a user views the explainer step\r\n        Then they see an person icon with a + in the top left hand corner\r\n        And the icon is weight 300 brand colour\r\n        And below they see \"My Header\" in large bold font\r\n        And below they see \"My program explainer description\" in medium font\r\n        And the step background colour is weight 50 brand colour\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The program explainer can display an image in place of an icon\r\n        Given a program explainer\r\n        And it has an \"image-url\" prop with a value of a valid url to an image\r\n        When a user views the explainer step\r\n        Then the image is displayed in place of an incon in the top left hand corner\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Colours are customizable\r\n        Given a program explainer step with props\r\n            | prop             | value            |\r\n            | text-color       | purple           |\r\n            | background-color | grey             |\r\n        When a user views the explainer step\r\n        Then they see the step background is grey\r\n        And the header text is purple\r\n        And the description text is purple\r\n";
 
 const ProgramExplainerStep_stories = {
   title: "Components/Program Explainer Step",
   parameters: {
-    scenario: scenario$m,
+    scenario: scenario$n,
   },
 };
 const ProgramExplainerStep = () => {
@@ -10487,12 +10609,12 @@ const ProgramExplainerStep$1 = /*#__PURE__*/Object.freeze({
   ProgramExplainerStepCustom: ProgramExplainerStepCustom
 });
 
-const scenario$n = "@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 scenario$o = "@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",
   parameters: {
-    scenario: scenario$n,
+    scenario: scenario$o,
   },
 };
 const SampleComponents = () => (index.h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
@@ -10593,12 +10715,12 @@ const BrandStories = /*#__PURE__*/Object.freeze({
   Fonts: Fonts
 });
 
-const scenario$o = "@author:kutay\r\n@owner:kutay\r\nFeature: Card Feed\r\n\r\n\tThe Card Feed component displays Task Card components in a grid layout.\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the Card Feed component\r\n\r\n\t@motivating\r\n\tScenario: The Card Feed component displays Task Cards given as children slots\r\n\t\tGiven a Card Feed component\r\n\t\tAnd it is wrapping a number of task cards as children\r\n\t\tWhen the user views the Card Feed\r\n\t\tThen the task cards are displayed in a masonry layout\r\n\t\tWhen the card feed with grows or shrinks in width\r\n\t\tThen the number of columns adjust to the given width\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The Card Feed component can have a maximum width\r\n\t\tGiven a Card Feed component\r\n\t\tAnd it is wrapping a number of task cards as children\r\n\t\tAnd has prop \"width\" has a provided <value>\r\n\t\tThen the task cards are displayed in a masonry layout\r\n\t\tWhen the card feed with grows or shrinks in width\r\n\t\tThen the number of columns adjust to the given width\r\n\t\tAnd the task cards do not exceed <width>\r\n\t\tExamples:\r\n\t\t\t| value | width |\r\n\t\t\t|       | 347px |\r\n\t\t\t| 200   | 200px |\r\n\t\t\t| 400   | 400px |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The Card Feed component gap between task cards can be customized\r\n\t\tGiven a Card Feed component\r\n\t\tAnd it is wrapping a number of task cards as children\r\n\t\tAnd has prop \"gap\" has a provided <value>\r\n\t\tThen the task cards are displayed in a masonry layout\r\n\t\tAnd the gap between the columns is the <gap>\r\n\t\tExamples:\r\n\t\t\t| value | gap  |\r\n\t\t\t|       | 24px |\r\n\t\t\t| 20    | 20px |\r\n\t\t\t| 50    | 50px |";
+const scenario$p = "@author:kutay\r\n@owner:kutay\r\nFeature: Card Feed\r\n\r\n\tThe Card Feed component displays Task Card components in a grid layout.\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the Card Feed component\r\n\r\n\t@motivating\r\n\tScenario: The Card Feed component displays Task Cards given as children slots\r\n\t\tGiven a Card Feed component\r\n\t\tAnd it is wrapping a number of task cards as children\r\n\t\tWhen the user views the Card Feed\r\n\t\tThen the task cards are displayed in a masonry layout\r\n\t\tWhen the card feed with grows or shrinks in width\r\n\t\tThen the number of columns adjust to the given width\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The Card Feed component can have a maximum width\r\n\t\tGiven a Card Feed component\r\n\t\tAnd it is wrapping a number of task cards as children\r\n\t\tAnd has prop \"width\" has a provided <value>\r\n\t\tThen the task cards are displayed in a masonry layout\r\n\t\tWhen the card feed with grows or shrinks in width\r\n\t\tThen the number of columns adjust to the given width\r\n\t\tAnd the task cards do not exceed <width>\r\n\t\tExamples:\r\n\t\t\t| value | width |\r\n\t\t\t|       | 347px |\r\n\t\t\t| 200   | 200px |\r\n\t\t\t| 400   | 400px |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The Card Feed component gap between task cards can be customized\r\n\t\tGiven a Card Feed component\r\n\t\tAnd it is wrapping a number of task cards as children\r\n\t\tAnd has prop \"gap\" has a provided <value>\r\n\t\tThen the task cards are displayed in a masonry layout\r\n\t\tAnd the gap between the columns is the <gap>\r\n\t\tExamples:\r\n\t\t\t| value | gap  |\r\n\t\t\t|       | 24px |\r\n\t\t\t| 20    | 20px |\r\n\t\t\t| 50    | 50px |";
 
 const CardFeed_stories = {
   title: "Components/Card Feed",
   parameters: {
-    scenario: scenario$o,
+    scenario: scenario$p,
   },
 };
 const oneAction$1 = {
@@ -10835,12 +10957,12 @@ const CardFeed = /*#__PURE__*/Object.freeze({
   CardFeedGeneric: CardFeedGeneric
 });
 
-const scenario$p = "@author:kutay\r\n@owner:noah\r\nFeature: Portal Container\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Horizontal content overflows, but does not stretch\r\n\t\tGiven there are two element in the container\r\n\t\tAnd the first is small\r\n\t\tAnd the second would stretch the container wider than it's parent\r\n\t\tThen the second one is clipped\r\n\t\tAnd the first one doesn't stretch\r\n\r\n\t@landmine\r\n\t@ui\r\n\tScenario: `max-width` is required for displaying as a row\r\n\t\tGiven I have `direction` to \"row\"\r\n\t\tAnd I have not set a `max-width`\r\n\t\tThen it displays as a column\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Content padding can be customized\r\n\t\tGiven prop \"padding\" has <value>\r\n\t\tThen <padding> is applied to content\r\n\r\n\t\tExamples:\r\n\t\t\t| value      | padding    |\r\n\t\t\t| none       | no padding |\r\n\t\t\t| xxx-small  | xxx-small  |\r\n\t\t\t| xx-small   | xx-small   |\r\n\t\t\t| x-small    | x-small    |\r\n\t\t\t| small      | small      |\r\n\t\t\t| medium     | medium     |\r\n\t\t\t| large      | large      |\r\n\t\t\t| x-large    | x-large    |\r\n\t\t\t| xx-large   | xx-large   |\r\n\t\t\t| xxx-large  | xxx-large  |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A        | no padding |\r\n\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Gap between content elements can be customized\r\n\t\tGiven prop \"gap\" has <value>\r\n\t\tThen <gap> is applied to elements between content\r\n\r\n\t\tExamples:\r\n\t\t\t| value      | gap        |\r\n\t\t\t| none       | no padding |\r\n\t\t\t| xxx-small  | xxx-small  |\r\n\t\t\t| xx-small   | xx-small   |\r\n\t\t\t| x-small    | x-small    |\r\n\t\t\t| small      | small      |\r\n\t\t\t| medium     | medium     |\r\n\t\t\t| large      | large      |\r\n\t\t\t| x-large    | x-large    |\r\n\t\t\t| xx-large   | xx-large   |\r\n\t\t\t| xxx-large  | xxx-large  |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A        | no padding |\r\n\r\n\t@minutae\r\n\t@ui\r\n\tScenario: Content can be center aligned in horizontal view\r\n\t\tGiven I have supplied the prop \"center\"\r\n\t\tThen the content is center aligned\r\n\r\n\t@minutae\r\n\t@ui\r\n\tScenario: Content in the last row can span full width with display in horizontal view\r\n\t\tGiven I have `display` to \"flex\"\r\n\t\tThen the content is full width on the last row\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Content can be aligned along the x-axis \r\n\t\tGiven prop \"justify-content\" has <value>\r\n\t\tThen content within the container is aligned <alignment>\r\n\r\n\t\tExamples:\r\n\t\t\t| value         | alignment          |\r\n\t\t\t| none          | no alignment       |\r\n\t\t\t| start         | to the start       |\r\n\t\t\t| center        | to the center      |\r\n\t\t\t| end           | to the end         |\r\n\t\t\t| space-between | with space between |\r\n\t\t\t| space-around  | with space around  |\r\n\t\t\t| space-evenly  | with space evenly  |";
+const scenario$q = "@author:kutay\r\n@owner:noah\r\nFeature: Portal Container\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Horizontal content overflows, but does not stretch\r\n\t\tGiven there are two element in the container\r\n\t\tAnd the first is small\r\n\t\tAnd the second would stretch the container wider than it's parent\r\n\t\tThen the second one is clipped\r\n\t\tAnd the first one doesn't stretch\r\n\r\n\t@landmine\r\n\t@ui\r\n\tScenario: `max-width` is required for displaying as a row\r\n\t\tGiven I have `direction` to \"row\"\r\n\t\tAnd I have not set a `max-width`\r\n\t\tThen it displays as a column\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Content padding can be customized\r\n\t\tGiven prop \"padding\" has <value>\r\n\t\tThen <padding> is applied to content\r\n\r\n\t\tExamples:\r\n\t\t\t| value      | padding    |\r\n\t\t\t| none       | no padding |\r\n\t\t\t| xxx-small  | xxx-small  |\r\n\t\t\t| xx-small   | xx-small   |\r\n\t\t\t| x-small    | x-small    |\r\n\t\t\t| small      | small      |\r\n\t\t\t| medium     | medium     |\r\n\t\t\t| large      | large      |\r\n\t\t\t| x-large    | x-large    |\r\n\t\t\t| xx-large   | xx-large   |\r\n\t\t\t| xxx-large  | xxx-large  |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A        | no padding |\r\n\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Gap between content elements can be customized\r\n\t\tGiven prop \"gap\" has <value>\r\n\t\tThen <gap> is applied to elements between content\r\n\r\n\t\tExamples:\r\n\t\t\t| value      | gap        |\r\n\t\t\t| none       | no padding |\r\n\t\t\t| xxx-small  | xxx-small  |\r\n\t\t\t| xx-small   | xx-small   |\r\n\t\t\t| x-small    | x-small    |\r\n\t\t\t| small      | small      |\r\n\t\t\t| medium     | medium     |\r\n\t\t\t| large      | large      |\r\n\t\t\t| x-large    | x-large    |\r\n\t\t\t| xx-large   | xx-large   |\r\n\t\t\t| xxx-large  | xxx-large  |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A        | no padding |\r\n\r\n\t@minutae\r\n\t@ui\r\n\tScenario: Content can be center aligned in horizontal view\r\n\t\tGiven I have supplied the prop \"center\"\r\n\t\tThen the content is center aligned\r\n\r\n\t@minutae\r\n\t@ui\r\n\tScenario: Content in the last row can span full width with display in horizontal view\r\n\t\tGiven I have `display` to \"flex\"\r\n\t\tThen the content is full width on the last row\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Content can be aligned along the x-axis \r\n\t\tGiven prop \"justify-content\" has <value>\r\n\t\tThen content within the container is aligned <alignment>\r\n\r\n\t\tExamples:\r\n\t\t\t| value         | alignment          |\r\n\t\t\t| none          | no alignment       |\r\n\t\t\t| start         | to the start       |\r\n\t\t\t| center        | to the center      |\r\n\t\t\t| end           | to the end         |\r\n\t\t\t| space-between | with space between |\r\n\t\t\t| space-around  | with space around  |\r\n\t\t\t| space-evenly  | with space evenly  |";
 
 const PortalContainer_stories = {
   title: "Components/Portal Container",
   parameters: {
-    scenario: scenario$p,
+    scenario: scenario$q,
   },
 };
 const TooWideColumn = () => (index.h("div", { style: { width: "200px", border: "1px dashed grey" } },
@@ -10982,11 +11104,11 @@ const scenario3 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Status
 
 const scenario4 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Source Column\r\n\r\n    Shows the source of each reward\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The title of the source column is configurable\r\n        Given the \"column-title\" prop is set to <value>\r\n        Then the source column is shown with <columnTitle>\r\n        Examples:\r\n            | value           | columnTitle     |\r\n            | Source          |                 |\r\n            | My column title | My column title |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The source column displays manual if the reward is caused by a manual action\r\n        Given a user with a \"MANUAL\" reward\r\n        When they view the rewards table\r\n        Then the source of their reward is displayed as \"Manual\"\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The source column displays the program name if the reward is caused automatically by a program\r\n        Given a user with a \"AUTOMATED\" program reward\r\n        And the program has name \"Loyalty Program\"\r\n        When they view the rewards table\r\n        Then the source of their reward is displayed as \"Loyalty Program\"\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\r\n        Given the \"reward-exchange-text\" prop is <propValue>\r\n        And a user with a \"MANUAL\" reward\r\n        But it was created by a reward exchange\r\n        Then they view the rewards table\r\n        Then the source displays <exchangeText>\r\n        And under it displays the following\r\n            | prettyRedeemedCredit → prettyValue |\r\n        Examples:\r\n            | propValue | exchangeText    |\r\n            |           | Reward Exchange |\r\n            | Exchanged | Exchanged       |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The source column displays customizable referral information if the reward is from a referral\r\n        Given the \"reward-source-text\" prop is <propValue>\r\n        And a user with a referral reward\r\n        And that reward has <rewardSource>\r\n        When they view the rewards table\r\n        Then then source displays <referralText>\r\n        And under it displays the full name of the <referralUser>\r\n        Examples:\r\n            | propValue                                                                             | rewardSource  | referralText | referralUser  |\r\n            |                                                                                       | REFERRED      | Referred by  | referrer user |\r\n            |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\r\n            | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\r\n            | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\r\n        Given a user with a referral reward\r\n        And referral user exists\r\n        And referral user has <name>\r\n        But referral user has no <otherName>\r\n        When they view the rewards table\r\n        Then referral user's name is displayed as <name>\r\n        Examples:\r\n            | name       | otherName  |\r\n            | first.name | last.name  |\r\n            | last.name  | first.name |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\r\n        Given a user with a referral reward\r\n        And that reward has <rewardSource>\r\n        And the <referralUser> has no first name\r\n        And the <referralUser> has no last name\r\n        When they view the rewards table\r\n        Then then source displays <sourceText>\r\n        And under it displays \"Anonymous User\"\r\n        Examples:\r\n            | rewardSource  | referralUser  | sourceText  |\r\n            | FRIEND_SIGNUP | referrer      | Referral to |\r\n            | REFERRED      | referred user | Referred by |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\r\n        Given a user with a referral reward\r\n        And that reward has <rewardSource>\r\n        But <referral> user was deleted\r\n        When they view the rewards table\r\n        Then the source displays <sourceText>\r\n        And under it displays \"Deleted User\"\r\n        Examples:\r\n            | rewardSource    | referral | sourceText  |\r\n            | \"FRIEND_SIGNUP\" | referrer | Referral to |\r\n            | \"REFERRED\"      | referred | Referred by |\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario Outline: Name fallbacks for referral users without names are customizable\r\n        Given <prop> with <value>\r\n        And a user with a referral reward\r\n        But the referral user <hadAction>\r\n        When they view the rewards table\r\n        Then the source displays <value> as the referral user\r\n        Examples:\r\n            | prop           | value           | hadAction                       |\r\n            | deleted-user   | Former Customer | was deleted                     |\r\n            | anonymous-user | Nameless User   | had first and last name deleted |\r\n\r\n    @motivating\r\n    Scenario Outline: Source text can be customized\r\n        Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\r\n        And a user with a <rewardSource> reward\r\n        When they view the rewards table\r\n        Then the source is <sourceText>\r\n        Examples:\r\n            | rewardSource | sourceText      |\r\n            | MANUAL       | Support         |\r\n            | AUTOMATED    | Loyalty Program |";
 
-const scenario$q = scenario1 + scenario2 + scenario3 + scenario4;
+const scenario$r = scenario1 + scenario2 + scenario3 + scenario4;
 const RewardsTableCell_stories = {
   title: "Components/Rewards Table Cell",
   parameters: {
-    scenario: scenario$q,
+    scenario: scenario$r,
   },
 };
 const rewardsData$1 = {
@@ -11284,12 +11406,12 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   EmptyCell: EmptyCell$2
 });
 
-const scenario$r = "@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 \"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: 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 scenario$s = "@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 \"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: 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",
   parameters: {
-    scenario: scenario$r,
+    scenario: scenario$s,
   },
 };
 const loadingElement$1 = (index.h("div", { slot: "loading", style: { display: "contents" } },
@@ -11533,12 +11655,12 @@ const UseReferralTable = /*#__PURE__*/Object.freeze({
   ReferralTableFr: ReferralTableFr
 });
 
-const scenario$s = "@author:kutay\r\n@owner:kutay\r\nFeature: Hero Image\r\n\r\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the Hero Image component\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Overlay image displays header, description, and button with brand color\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop        | value                                                              |\r\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header      | \"Klip Rewards\"                                                     |\r\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text | \"Start earning\"                                                    |\r\n\t\t\t| layout      | \"overlay\"                                                          |\r\n\t\tThen they see their image\r\n\t\tAnd the image has no padding\r\n\t\tAnd it has a brand colour overlay\r\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\r\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\r\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\r\n\t\tAnd the text section has xxx-large padding\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen the image is scaled to fit content\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Overlay image crop can be aligned left, center or right\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop        | value                                                              |\r\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header      | \"Klip Rewards\"                                                     |\r\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text | \"Start earning\"                                                    |\r\n\t\t\t| layout      | \"overlay\"                                                          |\r\n\t\t\t| image-pos   | <value>                                                            |\r\n\t\tThen the image with overlay is displayed\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen the image is <alignment> to fit content\r\n\t\tExamples:\r\n\t\t\t| value  | alignment     |\r\n\t\t\t| left   | left aligned  |\r\n\t\t\t| center | centered      |\r\n\t\t\t| right  | right aligned |\r\n\t\t\t| N/A    | centered      |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Overlay padding is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop         | value                                                              |\r\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header       | \"Klip Rewards\"                                                     |\r\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text  | \"Start earning\"                                                    |\r\n\t\t\t| layout       | \"overlay\"                                                          |\r\n\t\t\t| padding-text | <value>                                                            |\r\n\t\tThen the image with overlay is displayed\r\n\t\tAnd <padding> is applied around header, description and button\r\n\t\tExamples:\r\n\t\t\t| value      | padding    |\r\n\t\t\t| none       | no padding |\r\n\t\t\t| xxx-small  | xxx-small  |\r\n\t\t\t| xx-small   | xx-small   |\r\n\t\t\t| x-small    | x-small    |\r\n\t\t\t| small      | small      |\r\n\t\t\t| medium     | medium     |\r\n\t\t\t| large      | large      |\r\n\t\t\t| x-large    | x-large    |\r\n\t\t\t| xx-large   | xx-large   |\r\n\t\t\t| xxx-large  | xxx-large  |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A        | no padding |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Overlay color and background is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop            | value                                                              |\r\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header          | \"Klip Rewards\"                                                     |\r\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text     | \"Start earning\"                                                    |\r\n\t\t\t| layout          | \"overlay\"                                                          |\r\n\t\t\t| text-color      | <textColor>                                                        |\r\n\t\t\t| overlay-color   | <overlayColor>                                                     |\r\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\r\n\t\tThen the image with overlay is displayed\r\n\t\tAnd the overlay is <overlayColor>\r\n\t\tAnd the overlay has <overlayOpacity>\r\n\t\tAnd the text is <textColor>\r\n\t\tExamples:\r\n\t\t\t| textColor | overlayColor | overlayOpacity |\r\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\r\n\t\t\t| #1d0314   | #4baa1a      | 0              |\r\n\t\t\t| #211a27   | #aa481a      | 1              |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop        | value                                                              |\r\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header      | \"Klip Rewards\"                                                     |\r\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text | \"Start earning\"                                                    |\r\n\t\t\t| layout      | \"columns\"                                                          |\r\n\t\tThen the image is displayed on the left\r\n\t\tAnd the following elements are displayed on the right\r\n\t\t\t| elements    |\r\n\t\t\t| header      |\r\n\t\t\t| description |\r\n\t\t\t| button      |\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen the two-column layout switches to a row layout\r\n\t\tAnd the image is displayed on top\r\n\t\tAnd the content is displayed below\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Image position is configurable for desktop and mobile\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop             | value                                                              |\r\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header           | \"Klip Rewards\"                                                     |\r\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text      | \"Start earning\"                                                    |\r\n\t\t\t| layout           | \"columns\"                                                          |\r\n\t\t\t| image-pos        | <imagePos>                                                         |\r\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\r\n\t\tThen the image is displayed on the <imagePos>\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen two-column layout switches to a row layout\r\n\t\tAnd image is displayed on the <imageMobilePos>\r\n\t\tExamples:\r\n\t\t\t| imagePos | imageMobilePos |\r\n\t\t\t| left     | top            |\r\n\t\t\t| right    | bottom         |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop          | value                                                              |\r\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header        | \"Klip Rewards\"                                                     |\r\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text   | \"Start earning\"                                                    |\r\n\t\t\t| layout        | \"columns\"                                                          |\r\n\t\t\t| padding-text  | <paddingText>                                                      |\r\n\t\t\t| padding-image | <paddingImage>                                                     |\r\n\t\tThen the two column layout is displayed\r\n\t\tAnd the image has padding <paddingImage>\r\n\t\tAnd the text has padding <paddingText>\r\n\t\tExamples:\r\n\t\t\t| paddingText | paddingImage |\r\n\t\t\t| xxx-small   | xxx-small    |\r\n\t\t\t| xx-small    | xx-small     |\r\n\t\t\t| x-small     | x-small      |\r\n\t\t\t| small       | small        |\r\n\t\t\t| medium      | medium       |\r\n\t\t\t| large       | large        |\r\n\t\t\t| x-large     | x-large      |\r\n\t\t\t| xx-large    | xx-large     |\r\n\t\t\t| xxx-large   | xxx-large    |\r\n\t\t\t| xxxx-large  | xxxx-large   |\r\n\t\t\t| none        | none         |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Two-column layout image division percentage is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop             | value                                                              |\r\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\r\n\t\t\t| header           | \"Klip Rewards\"                                                     |\r\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text      | \"Start earning\"                                                    |\r\n\t\t\t| layout           | \"columns\"                                                          |\r\n\t\t\t| image-percentage | <percent>                                                          |\r\n\t\tThen the two column layout is displayed\r\n\t\tAnd the image takes up <percent> of the two-column layout\r\n\t\tAnd the text elements take up the remainder of the space\r\n\t\tExamples:\r\n\t\t\t| percent |\r\n\t\t\t| 25%     |\r\n\t\t\t| 42%     |\r\n\t\t\t| 66%     |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Two-column layout text and background color is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop             | value                                                              |\r\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header           | \"Klip Rewards\"                                                     |\r\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text      | \"Start earning\"                                                    |\r\n\t\t\t| layout           | \"columns\"                                                          |\r\n\t\t\t| text-color       | <textColor>                                                        |\r\n\t\t\t| background-color | <backgroundColor>                                                  |\r\n\t\tThen the two column layout is displayed\r\n\t\tAnd the text has color <textColor>\r\n\t\tAnd the background has color <backgroundColor>\r\n\t\tExamples:\r\n\t\t\t| textColor | backgroundColor |\r\n\t\t\t| #fffc4b   | #ff7f7f         |\r\n\t\t\t| #1d0314   | #4baa1a         |\r\n\t\t\t| #211a27   | #aa481a         |";
+const scenario$t = "@author:kutay\r\n@owner:kutay\r\nFeature: Hero Image\r\n\r\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the Hero Image component\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Overlay image displays header, description, and button with brand color\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop        | value                                                              |\r\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header      | \"Klip Rewards\"                                                     |\r\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text | \"Start earning\"                                                    |\r\n\t\t\t| layout      | \"overlay\"                                                          |\r\n\t\tThen they see their image\r\n\t\tAnd the image has no padding\r\n\t\tAnd it has a brand colour overlay\r\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\r\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\r\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\r\n\t\tAnd the text section has xxx-large padding\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen the image is scaled to fit content\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Overlay image crop can be aligned left, center or right\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop        | value                                                              |\r\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header      | \"Klip Rewards\"                                                     |\r\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text | \"Start earning\"                                                    |\r\n\t\t\t| layout      | \"overlay\"                                                          |\r\n\t\t\t| image-pos   | <value>                                                            |\r\n\t\tThen the image with overlay is displayed\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen the image is <alignment> to fit content\r\n\t\tExamples:\r\n\t\t\t| value  | alignment     |\r\n\t\t\t| left   | left aligned  |\r\n\t\t\t| center | centered      |\r\n\t\t\t| right  | right aligned |\r\n\t\t\t| N/A    | centered      |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Overlay padding is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop         | value                                                              |\r\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header       | \"Klip Rewards\"                                                     |\r\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text  | \"Start earning\"                                                    |\r\n\t\t\t| layout       | \"overlay\"                                                          |\r\n\t\t\t| padding-text | <value>                                                            |\r\n\t\tThen the image with overlay is displayed\r\n\t\tAnd <padding> is applied around header, description and button\r\n\t\tExamples:\r\n\t\t\t| value      | padding    |\r\n\t\t\t| none       | no padding |\r\n\t\t\t| xxx-small  | xxx-small  |\r\n\t\t\t| xx-small   | xx-small   |\r\n\t\t\t| x-small    | x-small    |\r\n\t\t\t| small      | small      |\r\n\t\t\t| medium     | medium     |\r\n\t\t\t| large      | large      |\r\n\t\t\t| x-large    | x-large    |\r\n\t\t\t| xx-large   | xx-large   |\r\n\t\t\t| xxx-large  | xxx-large  |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A        | no padding |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Overlay color and background is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop            | value                                                              |\r\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\r\n\t\t\t| header          | \"Klip Rewards\"                                                     |\r\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text     | \"Start earning\"                                                    |\r\n\t\t\t| layout          | \"overlay\"                                                          |\r\n\t\t\t| text-color      | <textColor>                                                        |\r\n\t\t\t| overlay-color   | <overlayColor>                                                     |\r\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\r\n\t\tThen the image with overlay is displayed\r\n\t\tAnd the overlay is <overlayColor>\r\n\t\tAnd the overlay has <overlayOpacity>\r\n\t\tAnd the text is <textColor>\r\n\t\tExamples:\r\n\t\t\t| textColor | overlayColor | overlayOpacity |\r\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\r\n\t\t\t| #1d0314   | #4baa1a      | 0              |\r\n\t\t\t| #211a27   | #aa481a      | 1              |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop        | value                                                              |\r\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header      | \"Klip Rewards\"                                                     |\r\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text | \"Start earning\"                                                    |\r\n\t\t\t| layout      | \"columns\"                                                          |\r\n\t\tThen the image is displayed on the left\r\n\t\tAnd the following elements are displayed on the right\r\n\t\t\t| elements    |\r\n\t\t\t| header      |\r\n\t\t\t| description |\r\n\t\t\t| button      |\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen the two-column layout switches to a row layout\r\n\t\tAnd the image is displayed on top\r\n\t\tAnd the content is displayed below\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Image position is configurable for desktop and mobile\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop             | value                                                              |\r\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header           | \"Klip Rewards\"                                                     |\r\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text      | \"Start earning\"                                                    |\r\n\t\t\t| layout           | \"columns\"                                                          |\r\n\t\t\t| image-pos        | <imagePos>                                                         |\r\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\r\n\t\tThen the image is displayed on the <imagePos>\r\n\t\tWhen the component is scaled down to 599px\r\n\t\tThen two-column layout switches to a row layout\r\n\t\tAnd image is displayed on the <imageMobilePos>\r\n\t\tExamples:\r\n\t\t\t| imagePos | imageMobilePos |\r\n\t\t\t| left     | top            |\r\n\t\t\t| right    | bottom         |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop          | value                                                              |\r\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header        | \"Klip Rewards\"                                                     |\r\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text   | \"Start earning\"                                                    |\r\n\t\t\t| layout        | \"columns\"                                                          |\r\n\t\t\t| padding-text  | <paddingText>                                                      |\r\n\t\t\t| padding-image | <paddingImage>                                                     |\r\n\t\tThen the two column layout is displayed\r\n\t\tAnd the image has padding <paddingImage>\r\n\t\tAnd the text has padding <paddingText>\r\n\t\tExamples:\r\n\t\t\t| paddingText | paddingImage |\r\n\t\t\t| xxx-small   | xxx-small    |\r\n\t\t\t| xx-small    | xx-small     |\r\n\t\t\t| x-small     | x-small      |\r\n\t\t\t| small       | small        |\r\n\t\t\t| medium      | medium       |\r\n\t\t\t| large       | large        |\r\n\t\t\t| x-large     | x-large      |\r\n\t\t\t| xx-large    | xx-large     |\r\n\t\t\t| xxx-large   | xxx-large    |\r\n\t\t\t| xxxx-large  | xxxx-large   |\r\n\t\t\t| none        | none         |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Two-column layout image division percentage is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop             | value                                                              |\r\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\r\n\t\t\t| header           | \"Klip Rewards\"                                                     |\r\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text      | \"Start earning\"                                                    |\r\n\t\t\t| layout           | \"columns\"                                                          |\r\n\t\t\t| image-percentage | <percent>                                                          |\r\n\t\tThen the two column layout is displayed\r\n\t\tAnd the image takes up <percent> of the two-column layout\r\n\t\tAnd the text elements take up the remainder of the space\r\n\t\tExamples:\r\n\t\t\t| percent |\r\n\t\t\t| 25%     |\r\n\t\t\t| 42%     |\r\n\t\t\t| 66%     |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Two-column layout text and background color is configurable\r\n\t\tGiven a Hero Image component configured with the following props\r\n\t\t\t| prop             | value                                                              |\r\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\r\n\t\t\t| header           | \"Klip Rewards\"                                                     |\r\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\r\n\t\t\t| button-text      | \"Start earning\"                                                    |\r\n\t\t\t| layout           | \"columns\"                                                          |\r\n\t\t\t| text-color       | <textColor>                                                        |\r\n\t\t\t| background-color | <backgroundColor>                                                  |\r\n\t\tThen the two column layout is displayed\r\n\t\tAnd the text has color <textColor>\r\n\t\tAnd the background has color <backgroundColor>\r\n\t\tExamples:\r\n\t\t\t| textColor | backgroundColor |\r\n\t\t\t| #fffc4b   | #ff7f7f         |\r\n\t\t\t| #1d0314   | #4baa1a         |\r\n\t\t\t| #211a27   | #aa481a         |";
 
 const HeroImage_stories = {
   title: "Components/Hero Image",
   parameters: {
-    scenario: scenario$s,
+    scenario: scenario$t,
   },
 };
 const OverlayHeader = () => {
@@ -11611,12 +11733,12 @@ const HeroImage = /*#__PURE__*/Object.freeze({
   ColumnsCustomColors: ColumnsCustomColors
 });
 
-const scenario$t = "@author:kutay\r\n@owner:kutay\r\nFeature: Referral Card\r\n\r\n\tThe Referral Card component takes in two slots and displays them side by side.\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the Referral Card component\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Referral Card component displays provided content in left and right slots side by side\r\n\t\tGiven a Referral Card component\r\n\t\tAnd a slot with the name \"left\"\r\n\t\tAnd a slot with the name \"right\"\r\n\t\tWhen the user views the referral card\r\n\t\tThen the slot contents are displayed the card with equal width\r\n\t\tWhen the component is scaled down to 499px\r\n\t\tThen the column layout switches to row layout\r\n\t\tAnd the \"left\" slot content is displayed above the \"right\" slot content\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Referral Card component content can be vertically aligned start, center, end\r\n\t\tGiven a Referral Card component\r\n\t\tAnd a slot with the name \"left\"\r\n\t\tAnd a slot with the name \"right\"\r\n\t\tAnd the prop \"vertical-alignment\" has <value>\r\n\t\tThen slots contents are displayed inside the card\r\n\t\tAnd slots are vertically aligned to <alignment> of the card\r\n\t\tExamples:\r\n\t\t\t| value  | alignment  |\r\n\t\t\t| start  | the top    |\r\n\t\t\t| center | the center |\r\n\t\t\t| end    | the bottom |\r\n\t\t\t| N/A    | the top    |\r\n\r\n";
+const scenario$u = "@author:kutay\r\n@owner:kutay\r\nFeature: Referral Card\r\n\r\n\tThe Referral Card component takes in two slots and displays them side by side.\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the Referral Card component\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Referral Card component displays provided content in left and right slots side by side\r\n\t\tGiven a Referral Card component\r\n\t\tAnd a slot with the name \"left\"\r\n\t\tAnd a slot with the name \"right\"\r\n\t\tWhen the user views the referral card\r\n\t\tThen the slot contents are displayed the card with equal width\r\n\t\tWhen the component is scaled down to 499px\r\n\t\tThen the column layout switches to row layout\r\n\t\tAnd the \"left\" slot content is displayed above the \"right\" slot content\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Referral Card component content can be vertically aligned start, center, end\r\n\t\tGiven a Referral Card component\r\n\t\tAnd a slot with the name \"left\"\r\n\t\tAnd a slot with the name \"right\"\r\n\t\tAnd the prop \"vertical-alignment\" has <value>\r\n\t\tThen slots contents are displayed inside the card\r\n\t\tAnd slots are vertically aligned to <alignment> of the card\r\n\t\tExamples:\r\n\t\t\t| value  | alignment  |\r\n\t\t\t| start  | the top    |\r\n\t\t\t| center | the center |\r\n\t\t\t| end    | the bottom |\r\n\t\t\t| N/A    | the top    |\r\n\r\n";
 
 const ReferralCard_stories = {
   title: "Components/Referral Card",
   parameters: {
-    scenario: scenario$t,
+    scenario: scenario$u,
   },
 };
 const media = (slot) => {
@@ -11707,11 +11829,11 @@ const scenarioTimeline = "@author:derek\r\n@owner:kutay\r\nFeature: Timeline\r\n
 
 const scenarioTimelineEntry = "@author:derek\r\n@owner:kutay\r\nFeature: Timeline Entry\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Timeline entries have an icon, a reward and an entry desciption\r\n        Given an timeline entry with the following props\r\n            | prop   | value                                               |\r\n            | unit   | Visa Giftcard                                       |\r\n            | reward | 50$                                                 |\r\n            | desc   | Earn a 50$ Visa Giftcard for each referral you make |\r\n        When a user views the entry\r\n        Then they see a gift icon\r\n        And see \"$50 VISA GIFTCARRD\" to the right\r\n        And \"$50\" is bolded with x-large font size\r\n        And below they see \"Earn a 50$ Visa Giftcard for each referral you make\"\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: Icon can either be a gift or a brand colour cirle\r\n        Given a timeline entry with \"icon\" <iconPropValue>\r\n        When a user views the entry\r\n        Then they see an <icon>\r\n        Examples:\r\n            | iconPropValue 1 | icon                |\r\n            | gift            | gift                |\r\n            | circle          | brand colour circle |\r\n            |                 | gift                |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: A timeline entry can display a line to connect it to another entry\r\n        Given a timeline entry with \"line\" \"true\"\r\n        When a user views the entry\r\n        Then they see the entry\r\n        But it has a brand colour line connecting it to the next timeline entry\r\n";
 
-const scenario$u = scenarioTimeline + scenarioTimelineEntry;
+const scenario$v = scenarioTimeline + scenarioTimelineEntry;
 const Timeline_stories = {
   title: "Components/Timeline",
   parameters: {
-    scenario: scenario$u,
+    scenario: scenario$v,
   },
 };
 const TimelineWith1Reward = () => {
@@ -11784,12 +11906,12 @@ const Timeline = /*#__PURE__*/Object.freeze({
   TimelineWith4Rewards: TimelineWith4Rewards
 });
 
-const scenario$v = "@author:kutay\r\n@owner:kutay\r\nFeature: Image\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the image component\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Image is displayed from URL\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided with a valid image url\r\n\t\tThen the image is displayed\r\n\t\tAnd it is centered\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Images can be aligned left, center or right\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided with a valid image url\r\n\t\tAnd prop \"align\" has <value>\r\n\t\tThen the image is displayed\r\n\t\tAnd it is aligned to the <value>\r\n\t\tExamples:\r\n\t\t\t| value  |\r\n\t\t\t| left   |\r\n\t\t\t| center |\r\n\t\t\t| right  |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Image background can be assigned a color\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided with a valid image url\r\n\t\tAnd prop \"background-color\" is provided a color\r\n\t\tThen the image is displayed\r\n\t\tAnd the background is the provided color\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Image minimum height can be constrained\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided\r\n\t\tAnd prop \"min-height\" is given a minimum value\r\n\t\tThen the image is displayed\r\n\t\tAnd the container size changes\r\n\t\tThen the image does not shrink below its minimum height";
+const scenario$w = "@author:kutay\r\n@owner:kutay\r\nFeature: Image\r\n\r\n\tBackground: A user on the portal is viewing the widget\r\n\t\tGiven a user viewing the image component\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Image is displayed from URL\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided with a valid image url\r\n\t\tThen the image is displayed\r\n\t\tAnd it is centered\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Images can be aligned left, center or right\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided with a valid image url\r\n\t\tAnd prop \"align\" has <value>\r\n\t\tThen the image is displayed\r\n\t\tAnd it is aligned to the <value>\r\n\t\tExamples:\r\n\t\t\t| value  |\r\n\t\t\t| left   |\r\n\t\t\t| center |\r\n\t\t\t| right  |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Image background can be assigned a color\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided with a valid image url\r\n\t\tAnd prop \"background-color\" is provided a color\r\n\t\tThen the image is displayed\r\n\t\tAnd the background is the provided color\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Image minimum height can be constrained\r\n\t\tGiven an Image component\r\n\t\tAnd prop \"image-url\" is provided\r\n\t\tAnd prop \"min-height\" is given a minimum value\r\n\t\tThen the image is displayed\r\n\t\tAnd the container size changes\r\n\t\tThen the image does not shrink below its minimum height";
 
 const Image_stories = {
   title: "Components/Image",
   parameters: {
-    scenario: scenario$v,
+    scenario: scenario$w,
   },
 };
 const Image = () => {
@@ -11822,12 +11944,12 @@ const Image$1 = /*#__PURE__*/Object.freeze({
   MinimumHeight: MinimumHeight
 });
 
-const scenario$w = "@author:derek\r\n@owner:noah\r\nFeature: Titled Section\r\n\r\n    Background: The titled section has a label and content\r\n        Given a titled section\r\n        And it has a label\r\n        And it has content in the content slot\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Text alignment defaults to left align but can be configured\r\n        Given the titled section has \"text-align\" <textAlignPropValue>\r\n        When a user views the titled section\r\n        Then the text in the label is <aligned>\r\n        And the text in the content is <aligned>\r\n        Examples:\r\n            | textAlignPropValue | aligned |\r\n            | center             | center  |\r\n            | left               | left    |\r\n            | right              | right   |\r\n            |                    | left    |\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Label margin is configurable\r\n        Given the titled section has \"label-margin\" <marginPropValue>\r\n        When a user views the titled section\r\n        Then <marginPropValue> margin is between the label and content\r\n        Examples:\r\n            | marginPropValue | margin     |\r\n            | none            | no         |\r\n            | xxx-small       | xxx-small  |\r\n            | xx-small        | xx-small   |\r\n            | x-small         | x-small    |\r\n            | small           | small      |\r\n            | medium          | medium     |\r\n            | large           | large      |\r\n            | x-large         | x-large    |\r\n            | xx-large        | xx-large   |\r\n            | xxx-large       | xxx-large  |\r\n            | xxxx-large      | xxxx-large |\r\n            |                 | no         |\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario Outline: Titled section padding is configurable\r\n        Given the titled section has \"padding\" <paddingPropValue>\r\n        When a user views the titled section\r\n        Then <paddingPropValue> padding is applied around the titled section\r\n        Examples:\r\n            | paddingPropValue | padding    |\r\n            | none             | no         |\r\n            | xxx-small        | xxx-small  |\r\n            | xx-small         | xx-small   |\r\n            | x-small          | x-small    |\r\n            | small            | small      |\r\n            | medium           | medium     |\r\n            | large            | large      |\r\n            | x-large          | x-large    |\r\n            | xx-large         | xx-large   |\r\n            | xxx-large        | xxx-large  |\r\n            | xxxx-large       | xxxx-large |\r\n            |                  | no         |";
+const scenario$x = "@author:derek\r\n@owner:noah\r\nFeature: Titled Section\r\n\r\n    Background: The titled section has a label and content\r\n        Given a titled section\r\n        And it has a label\r\n        And it has content in the content slot\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Text alignment defaults to left align but can be configured\r\n        Given the titled section has \"text-align\" <textAlignPropValue>\r\n        When a user views the titled section\r\n        Then the text in the label is <aligned>\r\n        And the text in the content is <aligned>\r\n        Examples:\r\n            | textAlignPropValue | aligned |\r\n            | center             | center  |\r\n            | left               | left    |\r\n            | right              | right   |\r\n            |                    | left    |\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Label margin is configurable\r\n        Given the titled section has \"label-margin\" <marginPropValue>\r\n        When a user views the titled section\r\n        Then <marginPropValue> margin is between the label and content\r\n        Examples:\r\n            | marginPropValue | margin     |\r\n            | none            | no         |\r\n            | xxx-small       | xxx-small  |\r\n            | xx-small        | xx-small   |\r\n            | x-small         | x-small    |\r\n            | small           | small      |\r\n            | medium          | medium     |\r\n            | large           | large      |\r\n            | x-large         | x-large    |\r\n            | xx-large        | xx-large   |\r\n            | xxx-large       | xxx-large  |\r\n            | xxxx-large      | xxxx-large |\r\n            |                 | no         |\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario Outline: Titled section padding is configurable\r\n        Given the titled section has \"padding\" <paddingPropValue>\r\n        When a user views the titled section\r\n        Then <paddingPropValue> padding is applied around the titled section\r\n        Examples:\r\n            | paddingPropValue | padding    |\r\n            | none             | no         |\r\n            | xxx-small        | xxx-small  |\r\n            | xx-small         | xx-small   |\r\n            | x-small          | x-small    |\r\n            | small            | small      |\r\n            | medium           | medium     |\r\n            | large            | large      |\r\n            | x-large          | x-large    |\r\n            | xx-large         | xx-large   |\r\n            | xxx-large        | xxx-large  |\r\n            | xxxx-large       | xxxx-large |\r\n            |                  | no         |";
 
 const TitledSection_stories = {
   title: "Components/Titled Section",
   parameters: {
-    scenario: scenario$w,
+    scenario: scenario$x,
   },
 };
 const AlignLeft = () => {
@@ -12223,12 +12345,12 @@ const Scroll = /*#__PURE__*/Object.freeze({
   ShoelaceProps: ShoelaceProps
 });
 
-const scenario$x = "@author:Zach\r\n@owner:Zach\r\nFeature: Tabs\r\n\r\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\r\n\r\n  Background: A user on the portal is viewing the widget\r\n    Given a user viewing the Tabs component\r\n\r\n  @motivating\r\n  Scenario: Content inside the active tab is shown\r\n    Given the header is set to <tabHeader>\r\n    And the content inside is <tabContent>\r\n    And the user has clicked <tabHeader>\r\n    Then the <tabContent> is shown\r\n    Examples:\r\n      | tabHeader | tabContent               |\r\n      | Settings  | This is the settings tab |\r\n      | General   | This is the general tab  |\r\n      | History   | This is the history tab  |\r\n\r\n  @motivating\r\n  @ui\r\n  Scenario: The placement of the tabs is configurable\r\n    Given The placement prop has been passed a valid <placement>\r\n    Then tabs are placed on the <placementResult>\r\n    Examples:\r\n      | placement | placementResult                |\r\n      |           | top of the content             |\r\n      | left      | left hand side of the content  |\r\n      | right     | right hand side of the content |\r\n      | bottom    | bottom of the content          |\r\n\r\n\r\n  @minutae\r\n  @ui\r\n  Scenario Outline: Tabs are setup to use the brand color\r\n    Given the brand color is set to darkblue\r\n    Then the text inside the active tab is darkblue\r\n    And the underline of the active tab is darkblue\r\n\r\n  @ui\r\n  Scenario: Tabs are responsive\r\n    Given the user is on a mobile device\r\n    When there are more tabs than the horizontal space allows for\r\n    Then clickable arrows appear on the left and right of the tabs\r\n    And the tabs are scrollable\r\n\r\n  @landmine\r\n  Scenario: Program section cannot be used inside of tabs\r\n    Given a tabs component\r\n    And tab containing a program section with program-id \"test123\"\r\n    And the program section wraps a component using program context\r\n    When the tabs component is rendered\r\n    Then the \"sq:program-id\" event listener for the program section is removed\r\n    And the component does not use program-id \"test123\" to source its data\r\n    And falls back to the global program id";
+const scenario$y = "@author:Zach\r\n@owner:Zach\r\nFeature: Tabs\r\n\r\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\r\n\r\n  Background: A user on the portal is viewing the widget\r\n    Given a user viewing the Tabs component\r\n\r\n  @motivating\r\n  Scenario: Content inside the active tab is shown\r\n    Given the header is set to <tabHeader>\r\n    And the content inside is <tabContent>\r\n    And the user has clicked <tabHeader>\r\n    Then the <tabContent> is shown\r\n    Examples:\r\n      | tabHeader | tabContent               |\r\n      | Settings  | This is the settings tab |\r\n      | General   | This is the general tab  |\r\n      | History   | This is the history tab  |\r\n\r\n  @motivating\r\n  @ui\r\n  Scenario: The placement of the tabs is configurable\r\n    Given The placement prop has been passed a valid <placement>\r\n    Then tabs are placed on the <placementResult>\r\n    Examples:\r\n      | placement | placementResult                |\r\n      |           | top of the content             |\r\n      | left      | left hand side of the content  |\r\n      | right     | right hand side of the content |\r\n      | bottom    | bottom of the content          |\r\n\r\n\r\n  @minutae\r\n  @ui\r\n  Scenario Outline: Tabs are setup to use the brand color\r\n    Given the brand color is set to darkblue\r\n    Then the text inside the active tab is darkblue\r\n    And the underline of the active tab is darkblue\r\n\r\n  @ui\r\n  Scenario: Tabs are responsive\r\n    Given the user is on a mobile device\r\n    When there are more tabs than the horizontal space allows for\r\n    Then clickable arrows appear on the left and right of the tabs\r\n    And the tabs are scrollable\r\n\r\n  @landmine\r\n  Scenario: Program section cannot be used inside of tabs\r\n    Given a tabs component\r\n    And tab containing a program section with program-id \"test123\"\r\n    And the program section wraps a component using program context\r\n    When the tabs component is rendered\r\n    Then the \"sq:program-id\" event listener for the program section is removed\r\n    And the component does not use program-id \"test123\" to source its data\r\n    And falls back to the global program id";
 
 const Tabs_stories = {
   title: "Components/Tabs",
   parameters: {
-    scenario: scenario$x,
+    scenario: scenario$y,
   },
 };
 const SimpleTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
@@ -12727,12 +12849,12 @@ const Tabs = /*#__PURE__*/Object.freeze({
   RightTabs: RightTabs
 });
 
-const scenario$y = "@author:johan\r\n@owner:johan\r\nFeature: Share Code\r\n\r\n  The share code component is a box that allows users to see and copy their referral code 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 referral code 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 will appear 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 will appear 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 code\r\n    Given a user viewing the share code component\r\n    And the component is rendered for \"program-a\"\r\n    When they click to copy their code\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$z = "@author:johan\r\n@owner:johan\r\nFeature: Share Code\r\n\r\n  The share code component is a box that allows users to see and copy their referral code 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 referral code 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 will appear 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 will appear 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 code\r\n    Given a user viewing the share code component\r\n    And the component is rendered for \"program-a\"\r\n    When they click to copy their code\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 ShareCode_stories = {
   title: "Components/Share Code",
   parameters: {
-    scenario: scenario$y,
+    scenario: scenario$z,
   },
 };
 const ShareCode = () => {