@saasquatch/mint-components 1.5.0-69 → 1.5.0-72

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

@@ -12,7 +12,7 @@ require('./insertcss-04580cfa.js');
 require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
-const GenericTableView = require('./GenericTableView-65598160.js');
+const GenericTableView = require('./GenericTableView-2cdb4c5d.js');
 const luxon = require('./luxon-59ca7d19.js');
 const utils = require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
@@ -27,12 +27,12 @@ const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f42557ca.js');
 const sqmPortalFooterView = require('./sqm-portal-footer-view-5e6903c9.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-10c0b54f.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-3bc23603.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-25537e0b.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-fdfb3656.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-637d2fe7.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1fdc957e.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4c78e231.js');
 const sqmStatContainerView = require('./sqm-stat-container-view-5b2db929.js');
-const ShadowViewAddon = require('./ShadowViewAddon-25f524e4.js');
+const ShadowViewAddon = require('./ShadowViewAddon-fbbacd12.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-186a5f7e.js');
 
 /**
@@ -1545,7 +1545,7 @@ const AllMediums = () => {
       index.h("span", null, "Line Messenger")),
     index.h("br", null),
     index.h("sqm-share-button", { medium: "direct" },
-      index.h("span", null, "Direct"))));
+      index.h("span", null, "Share"))));
 };
 
 const ShareButton = /*#__PURE__*/Object.freeze({
@@ -1711,9 +1711,6 @@ const defaultElements = {
           index.h("sl-skeleton", null))));
     })))),
 };
-const test = () => {
-  return (index.h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true" }));
-};
 const Empty = () => {
   const props = {
     states: {
@@ -2308,7 +2305,6 @@ const UserEmpty = () => {
 const Leaderboard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Leaderboard_stories,
-  test: test,
   Empty: Empty,
   Loading: Loading,
   One: One,
@@ -5193,15 +5189,12 @@ const loadingElement = (index.h("div", { slot: "loading", style: { display: "con
 const emptyElement = (index.h("div", { slot: "empty", style: { display: "contents" } },
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
-      index.h("div", { style: { padding: "var(--sl-spacing-xxx-large)" } },
-        index.h("img", { src: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", style: { width: "100px" } }),
-        index.h("div", null,
-          index.h("b", null, "View your referral details")),
-        index.h("div", { style: {
-            marginTop: "var(--sl-spacing-xx-small)",
-            fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-neutral-500)",
-          } }, "Track the status of your referrals and rewards earned by referring friends"))))));
+      index.h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+        index.h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", "max-width": "100px" }),
+        index.h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+          index.h("sqm-text", { slot: "label" },
+            index.h("h3", null, "View your referral details")),
+          index.h("sqm-text", { slot: "content" }, "Track the status of your referrals and rewards earned by referring friends")))))));
 const baseReward$1 = {
   id: "123",
   type: "CREDIT",
@@ -5276,12 +5269,7 @@ const simpleUserTableProps = {
     nextPage: () => console.log("Next"),
   },
   elements: {
-    columns: [
-      index.h("div", null, "Name"),
-      index.h("div", null, "Email"),
-      index.h("div", null, "DOB"),
-      index.h("div", null, "Rewards"),
-    ],
+    columns: ["Customer", "Status", "Date converted", "Rewards"],
     rows: [
       [
         index.h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
@@ -5357,15 +5345,15 @@ const longCellTextTableProps = {
   },
   elements: {
     columns: [
-      index.h("div", null, "Name"),
-      index.h("div", null, "Email"),
-      index.h("div", null, "DOB"),
-      index.h("div", null, "City"),
-      index.h("div", null, "State/Province"),
-      index.h("div", null, "Country"),
-      index.h("div", null, "Referrals"),
-      index.h("div", null, "Reward Earnings"),
-      index.h("div", null, "Status"),
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "Status",
     ],
     rows: [
       [
@@ -5429,15 +5417,15 @@ const longColumnTextTableProps = {
   },
   elements: {
     columns: [
-      index.h("div", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit."),
-      index.h("div", null, "Email"),
-      index.h("div", null, "DOB"),
-      index.h("div", null, "City"),
-      index.h("div", null, "State/Province"),
-      index.h("div", null, "Country"),
-      index.h("div", null, "Referrals"),
-      index.h("div", null, "Rewarddddddddddd Earningsssssssssssss"),
-      index.h("div", null, "Status"),
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Rewarddddddddddd Earningsssssssssssss",
+      "Status",
     ],
     rows: [
       [
@@ -5501,15 +5489,15 @@ const fullUserTableProps = {
   },
   elements: {
     columns: [
-      index.h("div", null, "Name"),
-      index.h("div", null, "Email"),
-      index.h("div", null, "DOB"),
-      index.h("div", null, "City"),
-      index.h("div", null, "State/Province"),
-      index.h("div", null, "Country"),
-      index.h("div", null, "Referrals"),
-      index.h("div", null, "Reward Earnings"),
-      index.h("div", null, "Status"),
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "Status",
     ],
     rows: [
       [
@@ -5589,7 +5577,7 @@ const EmptyTable = () => {
       elements: {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
-        columns: [index.h("div", null, "Name"), index.h("div", null, "Email"), index.h("div", null, "DOB")],
+        columns: ["Name", "Email", "DOB"],
         rows: [],
       },
     } }));
@@ -5615,7 +5603,7 @@ const LoadingTable = () => {
       elements: {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
-        columns: [index.h("div", null, "Name"), index.h("div", null, "Email"), index.h("div", null, "DOB")],
+        columns: ["Name", "Email", "DOB"],
         rows: [],
       },
     } }));
@@ -5642,11 +5630,11 @@ const FullRewardsTable = () => {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
         columns: [
-          index.h("div", null, "User"),
-          index.h("div", null, "Rewards"),
-          index.h("div", null, "Status"),
-          index.h("div", null, "Date Started"),
-          index.h("div", null, "Date Converted"),
+          "User",
+          "Rewards",
+          "Status",
+          "Date Started",
+          "Date Converted",
         ],
         rows: [
           [
@@ -5905,7 +5893,7 @@ function cartesian(...args) {
   return r;
 }
 
-const scenarioTaskCard = "@author:derek\r\n@owner:kutay\r\nFeature: Task Card\r\n\r\n\t@motivating\r\n\tScenario: A header, body title and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value             |\r\n\t\t\t| rewardAmount | \"40\"              |\r\n\t\t\t| rewardUnit   | \"Points\"          |\r\n\t\t\t| cardTitle    | Complete a survey |\r\n\t\t\t| buttonText   | Take Survey       |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\r\n\t@motivating\r\n\tScenario Outline: A Task Card description can be included but is not required\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <descriptionPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tThen they <maySee> a chevron icon in the top right\r\n\t\tWhen they attempt to click the chevron\r\n\t\tThen they <maySee> the card description\r\n\t\tExamples:\r\n\t\t\t| descriptionPropValue             | maySee    |\r\n\t\t\t| This is my task card description | see       |\r\n\t\t\t|                                  | don't see |\r\n\r\n\t@motivating\r\n\tScenario Outline: CTA links can open in a new tab or the same tab\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <openNewTabPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tAnd they click on the CTA\r\n\t\tThen they are redirected to the CTA link in <tab>\r\n\t\tExamples:\r\n\t\t\t| openNewTabPropValue | tab          |\r\n\t\t\t| true                | a new tab    |\r\n\t\t\t| false               | the same tab |\r\n\t\t\t| N/A                 | the same tab |\r\n\r\n\t@minutae\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\t@motivating\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <showProgressBarPropValue>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| showProgressBarPropValue | mayBe |\r\n\t\t\t| true                     | is    |\r\n\t\t\t| false                    | isn't |\r\n\t\t\t| N/A                      | isn't |\r\n\r\n\t@motivating\r\n\tScenario: Clicking the CTA Button can trigger an event to be sent and refresh the widget\r\n\t\tGiven a Task card\r\n\t\tAnd it is configured to send an \"test\" event\r\n\t\tWhen a user views the Task card\r\n\t\tAnd clicks on the CTA\r\n\t\tThen a \"test\" event is sent to SSQT on the users behalf\r\n\t\tAnd the contents of the widget the card is dislayed within are refreshed\r\n\r\n\t@motivating\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <repeatablePropValue>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they view the Task Card\r\n\t\tThen they see a brand colour checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> brand colour\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| repeatablePropValue | mayBe |\r\n\t\t\t| true                | isn't |\r\n\t\t\t| false               | is    |\r\n\t\t\t| N/A                 | is    |\r\n\r\n\t@motivating\r\n\tScenario Outline: Display duration hides or shows a task\r\n\t\tGiven a Task Card\r\n\t\tAnd it has a \"display-duration\" interval\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen card <mayBeHidden>\r\n\t\tExamples:\r\n\t\t\t| day                       | mayBeHidden   |\r\n\t\t\t| a day before the interval | is hidden     |\r\n\t\t\t| a day during the interval | is not hidden |\r\n\t\t\t| a day after the interval  | is hidden     |\r\n\r\n\t@motivating\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card\r\n\t\tAnd it has an \"reward-duration\" interval\r\n\t\tWhen a user views the card on <day>\r\n\t\tThen the card <mayBeDisabled>\r\n\t\tAnd it <mayHaveAlert>\r\n\t\tAnd it <mayHaveExpiryText> on the bottom left hand side of the card\r\n\t\tExamples:\r\n\t\t\t| day                              | mayBeDisabled  | mayHaveAlert                                                      | mayHaveExpiryText                                   |\r\n\t\t\t| a day before the expiry interval | is disabled    | has alert stating the month, date, year and time the task starts  | doesn't have expiry text                            |\r\n\t\t\t| a day during the expiry interval | isn't disabled | doesn't have an alert                                             | has the month, date, year and time the task expires |\r\n\t\t\t| a day after the expiry interval  | is disabled    | has alert stating the month, date, year and time the task expired | doesn't have expiry text                            |\r\n\r\n\t@minutae\r\n\tScenario Outline: Task expiry can be hidden or shown but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured with an expiry duration interval\r\n\t\tAnd it has <showExpiryPropValue>\r\n\t\tWhen a user views the Task card during the interval\r\n\t\tThen the expiry <mayBe> shown in the bottom left hand corner\r\n\t\tAnd it is in form \"Month-Date-Year-Time\"\r\n\t\tExamples:\r\n\t\t\t| showExpiryPropValue | mayBe |\r\n\t\t\t| true                | is    |\r\n\t\t\t| false               | isn't |\r\n\t\t\t| N/A                 | isn't |\r\n\r\n\t@motivating\r\n\tScenario Outline: Task Card dates support localization\r\n\t\tGiven a Task Card\r\n\t\tAnd it's configured with a expiry duration interval\r\n\t\tWhen a user with <locale> views the task card <atTime>\r\n\t\tThen they <seeDate> translated for <locale>\r\n\t\tExamples:\r\n\t\t\t| atTime              | locale | seeDate         |\r\n\t\t\t| before the interval | en     | Task Start Date |\r\n\t\t\t| during the interval | en     | Task End Date   |\r\n\t\t\t| after the interval  | en     | Task Ended Date |\r\n\t\t\t| before the interval | fr     | Task Start Date |\r\n\t\t\t| during the interval | fr     | Task End Date   |\r\n\t\t\t| after the interval  | fr     | Task Ended Date |\r\n\r\n\t@motivating\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for a repeatable task\r\n\t\tAnd has it has <goalValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is brand colour\r\n\t\tExamples:\r\n\t\t\t| goalValue | userGoalProgress | text              |\r\n\t\t\t| 2         | 0                | Completed 0 times |\r\n\t\t\t| 2         | 1                | Completed 0 times |\r\n\t\t\t| 2         | 2                | Completed 1 times |\r\n\t\t\t| 2         | 4                | Completed 2 times |\r\n\r\n\t@motivating\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured <progressSourcePath>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the \"Goal Completion Count\"\r\n\t\tExamples:\r\n\t\t\t| progressSourcePath                               |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\t@motivating\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\t@motivating\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goal\" value\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
+const scenarioTaskCard = "@author:derek\r\n@owner:kutay\r\nFeature: Task Card\r\n\r\n\t@motivating\r\n\tScenario: A header, body title and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value             |\r\n\t\t\t| rewardAmount | \"40\"              |\r\n\t\t\t| rewardUnit   | \"Points\"          |\r\n\t\t\t| cardTitle    | Complete a survey |\r\n\t\t\t| buttonText   | Take Survey       |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\r\n\t@motivating\r\n\tScenario Outline: A Task Card description can be included but is not required\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <descriptionPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tThen they <maySee> a chevron icon in the top right\r\n\t\tWhen they attempt to click the chevron\r\n\t\tThen they <maySee> the card description\r\n\t\tExamples:\r\n\t\t\t| descriptionPropValue             | maySee    |\r\n\t\t\t| This is my task card description | see       |\r\n\t\t\t|                                  | don't see |\r\n\r\n\t@motivating\r\n\tScenario Outline: CTA links can open in a new tab or the same tab\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <openNewTabPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tAnd they click on the CTA\r\n\t\tThen they are redirected to the CTA link in <tab>\r\n\t\tExamples:\r\n\t\t\t| openNewTabPropValue | tab          |\r\n\t\t\t| true                | a new tab    |\r\n\t\t\t| false               | the same tab |\r\n\t\t\t| N/A                 | the same tab |\r\n\r\n\t@minutae\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\t@motivating\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <showProgressBarPropValue>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| showProgressBarPropValue | mayBe |\r\n\t\t\t| true                     | is    |\r\n\t\t\t| false                    | isn't |\r\n\t\t\t| N/A                      | isn't |\r\n\r\n\t@motivating\r\n\tScenario: Clicking the CTA Button can trigger an event to be sent and refresh the widget\r\n\t\tGiven a Task card\r\n\t\tAnd it is configured to send an \"test\" event\r\n\t\tWhen a user views the Task card\r\n\t\tAnd clicks on the CTA\r\n\t\tThen a \"test\" event is sent to SSQT on the users behalf\r\n\t\tAnd the contents of the widget the card is dislayed within are refreshed\r\n\r\n\t@motivating\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <repeatablePropValue>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they view the Task Card\r\n\t\tThen they see a brand colour checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> brand colour\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| repeatablePropValue | mayBe |\r\n\t\t\t| true                | isn't |\r\n\t\t\t| false               | is    |\r\n\t\t\t| N/A                 | is    |\r\n\r\n\t@motivating\r\n\tScenario Outline: Display duration hides or shows a task\r\n\t\tGiven a Task Card\r\n\t\tAnd it has a \"display-duration\" interval\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen card <mayBeHidden>\r\n\t\tExamples:\r\n\t\t\t| day                       | mayBeHidden   |\r\n\t\t\t| a day before the interval | is hidden     |\r\n\t\t\t| a day during the interval | is not hidden |\r\n\t\t\t| a day after the interval  | is hidden     |\r\n\r\n\t@motivating\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card\r\n\t\tAnd it has an \"reward-duration\" interval\r\n\t\tWhen a user views the card on <day>\r\n\t\tThen the card <mayBeDisabled>\r\n\t\tAnd it <mayHaveAlert>\r\n\t\tAnd it <mayHaveExpiryText> on the bottom left hand side of the card\r\n\t\tExamples:\r\n\t\t\t| day                              | mayBeDisabled  | mayHaveAlert                                                      | mayHaveExpiryText                                   |\r\n\t\t\t| a day before the expiry interval | is disabled    | has alert stating the month, date, year and time the task starts  | doesn't have expiry text                            |\r\n\t\t\t| a day during the expiry interval | isn't disabled | doesn't have an alert                                             | has the month, date, year and time the task expires |\r\n\t\t\t| a day after the expiry interval  | is disabled    | has alert stating the month, date, year and time the task expired | doesn't have expiry text                            |\r\n\r\n\t@motivating\r\n\tScenario Outline: Task Card dates support localization\r\n\t\tGiven a Task Card\r\n\t\tAnd it's configured with a expiry duration interval\r\n\t\tWhen a user with <locale> views the task card <atTime>\r\n\t\tThen they <seeDate> translated for <locale>\r\n\t\tExamples:\r\n\t\t\t| atTime              | locale | seeDate         |\r\n\t\t\t| before the interval | en     | Task Start Date |\r\n\t\t\t| during the interval | en     | Task End Date   |\r\n\t\t\t| after the interval  | en     | Task Ended Date |\r\n\t\t\t| before the interval | fr     | Task Start Date |\r\n\t\t\t| during the interval | fr     | Task End Date   |\r\n\t\t\t| after the interval  | fr     | Task Ended Date |\r\n\r\n\t@motivating\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for a repeatable task\r\n\t\tAnd has it has <goalValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is brand colour\r\n\t\tExamples:\r\n\t\t\t| goalValue | userGoalProgress | text              |\r\n\t\t\t| 2         | 0                | Completed 0 times |\r\n\t\t\t| 2         | 1                | Completed 0 times |\r\n\t\t\t| 2         | 2                | Completed 1 times |\r\n\t\t\t| 2         | 4                | Completed 2 times |\r\n\r\n\t@motivating\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured <progressSourcePath>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the \"Goal Completion Count\"\r\n\t\tExamples:\r\n\t\t\t| progressSourcePath                               |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\t@motivating\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\t@motivating\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goal\" value\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
 
 const scenarioProgressBar = "@author:kutay\r\n@owner:kutay\r\nFeature: Task Card Progress Bar\r\n\r\n\tScenario Outline: Progress Bar\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> with <unit> below\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | unit | color |\r\n\t\t\t| 0        | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 100      | 500  | ―――――――――●―――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 650      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1200     | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\tScenario Outline: Progress Bar Steps\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps up to <goal>\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> below\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | color |\r\n\t\t\t| 0        | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | 5    | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 7        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 12       | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\r\n\r\n\tScenario Outline: Progress Bar Repeatable\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd first <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd second <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd third <icon3> is <color3> with <text3> displayed below\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\r\n\t\t\t| 250      | 500  | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 500      | 500  | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 750      | 500  | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 1000     | 500  | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\t\t\t| 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\r\n\tScenario Outline: Progress Bar Steps Repeatable\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps up to <goal>\r\n\t\tAnd first <icon1> is <color1>\r\n\t\tAnd second <icon2> is <color2>\r\n\t\tAnd third <icon3> is <color3>\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\r\n\t\t\t| 0        | 5    | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 1        | 5    | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 5        | 5    | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 7        | 5    | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 12       | 5    | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
 
@@ -5969,7 +5957,6 @@ const oneAction = {
     buttonText: "Take survey",
     buttonLink: "https://example.com/",
     openNewTab: false,
-    showExpiry: false,
     rewardDuration: null,
     completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
     expiryMessage: "Ends {endDate}",
@@ -5977,7 +5964,7 @@ const oneAction = {
     endedMessage: "Ended {endDate}",
     finite: 0,
     goal: 1,
-    locale: "en"
+    locale: "en",
   },
   states: {
     progress: 0,
@@ -6001,7 +5988,6 @@ const coupleActions = {
     buttonText: "Take survey",
     buttonLink: "https://example.com/",
     openNewTab: false,
-    showExpiry: false,
     completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
     rewardDuration: null,
     expiryMessage: "Ends {endDate}",
@@ -6009,7 +5995,7 @@ const coupleActions = {
     endedMessage: "Ended {endDate}",
     finite: 0,
     goal: 5,
-    locale: "en"
+    locale: "en",
   },
   states: {
     progress: 1,
@@ -6035,20 +6021,18 @@ const manyActions = {
     buttonText: "Take survey",
     buttonLink: "https://example.com/",
     openNewTab: false,
-    showExpiry: false,
     rewardDuration: null,
     expiryMessage: "Ends {endDate}",
     startsOnMessage: "Starts {startDate}",
     endedMessage: "Ended {endDate}",
     finite: 0,
     goal: 500,
-    locale: "en"
+    locale: "en",
   },
   states: { progress: 100, loading: false, loadingEvent: false },
 };
 const TaskCard$1 = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
   };
   const expireRepeat = { ...expire, repeatable: true };
@@ -6169,7 +6153,6 @@ const TaskCardRepeatableFinite = () => {
 };
 const TaskCardEndDate = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: luxon.luxon.DateTime.now().minus({ days: 1 }).toISO() +
       "/" +
       luxon.luxon.DateTime.now().plus({ days: 1 }).toISO(),
@@ -6233,7 +6216,6 @@ const TaskCardLoading = () => {
 };
 const TaskCardNotStarted = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: luxon.luxon.DateTime.now().plus({ days: 1 }).toISO() +
       "/" +
       luxon.luxon.DateTime.now().plus({ days: 2 }).toISO(),
@@ -6273,7 +6255,6 @@ const TaskCardNotStarted = () => {
 };
 const TaskCardEnded = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: luxon.luxon.DateTime.now().minus({ days: 2 }).toISO() +
       "/" +
       luxon.luxon.DateTime.now().minus({ days: 1 }).toISO(),
@@ -10023,7 +10004,7 @@ const data = [
   {
     ...baseReward$2,
     ...name("Free swag with a promo code"),
-    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
     ...fixedValue("40 SaaSquatch Points"),
   },
   {
@@ -10532,7 +10513,7 @@ const CardFeed = /*#__PURE__*/Object.freeze({
   TaskCardGrid: TaskCardGrid
 });
 
-const scenario$a = "Feature: Portal Container\r\n\r\n\r\n    Scenario: Horizontal content overflows, but does not stretch\r\n\r\n        Bad elements should not affect other elements in the page\r\n\r\n        Given there are two element in the container\r\n        And the first is small\r\n        And the second would stretch the container wider than it's parent\r\n        Then the second one is clipped\r\n        And the first one doesn't stretch\r\n\r\n    @landmine\r\n    Scenario: `max-width` is required for displaying as a row\r\n        Given I have `direction` to \"row\"\r\n        And I have not set a `max-width`\r\n        Then it will display as a column\r\n";
+const scenario$a = "@author:kutay\r\n@owner:noah\r\nFeature: Portal Container\r\n\r\n\r\n\tScenario: Horizontal content overflows, but does not stretch\r\n\r\n\t\tBad elements should not affect other elements in the page\r\n\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\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@minutae\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";
 
 const PortalContainer_stories = {
   title: "Components/Portal Container",
@@ -10554,6 +10535,11 @@ const HalfWidth = () => (index.h("div", { style: { width: "1000px", border: "1px
     index.h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
     index.h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     index.h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+const HalfWidthCenter = () => (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  index.h("sqm-portal-container", { direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
+    index.h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    index.h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    index.h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 const FullWidth = () => (index.h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   index.h("sqm-portal-container", { direction: "row", maxWidth: "100%" },
     index.h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
@@ -10566,6 +10552,7 @@ const PortalContainer = /*#__PURE__*/Object.freeze({
   TooWideColumn: TooWideColumn,
   TooWideRow: TooWideRow,
   HalfWidth: HalfWidth,
+  HalfWidthCenter: HalfWidthCenter,
   FullWidth: FullWidth
 });
 
@@ -10591,6 +10578,7 @@ const rewardsData$1 = {
   prettyAvailableNumber: "19",
   prettyRedeemedNumber: "0",
   statuses: ["AVAILABLE"],
+  pendingReasons: null,
   globalRewardKey: null,
   rewardSource: "MANUAL",
   prettyRedeemedCredit: "0 Points",
@@ -10603,7 +10591,7 @@ const rewardsData$1 = {
   },
 };
 const RewardsCellCreditFull = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points available" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -10612,7 +10600,7 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditPartial = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points available" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -10621,7 +10609,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditEmpty = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points available" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Points",
@@ -10636,7 +10624,11 @@ const RewardsCellSingleRedeemed = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
 };
 const RewardsCellNonCredit = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, type: "FUELTANK", prettyValue: "SaaSquatch Giftcard" } }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: {
+      ...rewardsData$1,
+      type: "FUELTANK",
+      prettyValue: "SaaSquatch Giftcard",
+    } }));
 };
 const SourceCellText = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData$1, rewardSourceText: "Manual" }));
@@ -10703,6 +10695,13 @@ const SourceCellReferral = () => {
 const SourceCellReferred = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referred(johnDoe) }, referralText: "Referred by" }));
 };
+const SourceCellProgram = () => {
+  return (index.h("sqm-rewards-table-source-cell", { reward: {
+      ...rewardsData$1,
+      rewardSource: "AUTOMATED",
+      program: { name: "Stencil Loyalty Program" },
+    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programId}} other {}}" }));
+};
 const SourceCellAnonymousUser = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
 };
@@ -10742,9 +10741,28 @@ const StatusCellExpired = () => {
 const pending = {
   statuses: ["PENDING"],
 };
+const us_tax = {
+  pendingReasons: ["US_TAX"],
+};
+const scheduled = {
+  pendingReasons: ["SCHEDULED"],
+  dateScheduledFor: 1640038417468,
+};
+const unhandled = {
+  pendingReasons: ["UNHANDLED_ERROR"],
+};
 const StatusCellPending = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1, ...pending } }));
 };
+const StatusCellPendingUsTax = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1, ...pending, ...us_tax } }));
+};
+const StatusCellPendingScheduled = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1, ...pending, ...scheduled } }));
+};
+const StatusCellPendingUnhandled = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1, ...pending, ...unhandled } }));
+};
 const DateCell$1 = () => {
   return (index.h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
 };
@@ -10764,6 +10782,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   SourceCellExchange: SourceCellExchange,
   SourceCellReferral: SourceCellReferral,
   SourceCellReferred: SourceCellReferred,
+  SourceCellProgram: SourceCellProgram,
   SourceCellAnonymousUser: SourceCellAnonymousUser,
   SourceCellDeletedUser: SourceCellDeletedUser,
   StatusCellAvailable: StatusCellAvailable,
@@ -10772,6 +10791,9 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   StatusCellCancelled: StatusCellCancelled,
   StatusCellExpired: StatusCellExpired,
   StatusCellPending: StatusCellPending,
+  StatusCellPendingUsTax: StatusCellPendingUsTax,
+  StatusCellPendingScheduled: StatusCellPendingScheduled,
+  StatusCellPendingUnhandled: StatusCellPendingUnhandled,
   DateCell: DateCell$1,
   EmptyCell: EmptyCell$2
 });
@@ -10779,18 +10801,72 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
 const RewardsTable_stories = {
   title: "Components/Rewards Table",
 };
-const Tab = () => {
-  return index.h("sqm-rewards-table-date-cell", null);
+const loadingElement$1 = (index.h("div", { slot: "loading", style: { display: "contents" } },
+  index.h("sqm-table-row", null,
+    index.h("sqm-table-cell", { colspan: 5 },
+      index.h("sl-skeleton", null))),
+  index.h("sqm-table-row", null,
+    index.h("sqm-table-cell", { colspan: 5 },
+      index.h("sl-skeleton", null))),
+  index.h("sqm-table-row", null,
+    index.h("sqm-table-cell", { colspan: 5 },
+      index.h("sl-skeleton", null))),
+  index.h("sqm-table-row", null,
+    index.h("sqm-table-cell", { colspan: 5 },
+      index.h("sl-skeleton", null))),
+  index.h("sqm-table-row", null,
+    index.h("sqm-table-cell", { colspan: 5 },
+      index.h("sl-skeleton", null)))));
+const emptyElement$1 = (index.h("div", { slot: "empty", style: { display: "contents" } },
+  index.h("sqm-table-row", null,
+    index.h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
+      index.h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+        index.h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", "max-width": "100px" }),
+        index.h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+          index.h("sqm-text", { slot: "label" },
+            index.h("h3", null, "View your referral details")),
+          index.h("sqm-text", { slot: "content" }, "Track the status of your referrals and rewards earned by referring friends")))))));
+const rewardsTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [
+      [
+        index.h(RewardsCellCreditFull, null),
+        index.h(StatusCellAvailable, null),
+        index.h(SourceCellReferral, null),
+        index.h(DateCell$1, null),
+      ],
+    ],
+  },
 };
-const EmptyCell$3 = () => {
-  return index.h("sqm-rewards-table-date-cell", null);
+const RewardsTable = () => {
+  return index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps));
 };
 
-const RewardsTable = /*#__PURE__*/Object.freeze({
+const RewardsTable$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardsTable_stories,
-  Tab: Tab,
-  EmptyCell: EmptyCell$3
+  RewardsTable: RewardsTable
 });
 
 const UseReferralTable_stories = {
@@ -10977,9 +11053,6 @@ const timeline = (slot, count) => {
     count > 2 && (index.h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
     count > 3 && (index.h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
 };
-const ReferralCardDefault = () => {
-  return index.h("sqm-referral-card", null);
-};
 const ReferralCardA = () => {
   return (index.h("sqm-referral-card", null,
     media("left"),
@@ -11029,6 +11102,27 @@ const ReferralCardDFlipped = () => {
   return (index.h("sqm-referral-card", null,
     timeline("right", 4),
     sharebutton("left")));
+};
+
+const ReferralCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ReferralCard_stories,
+  media: media,
+  sharebutton: sharebutton,
+  ReferralCardA: ReferralCardA,
+  ReferralCardB: ReferralCardB,
+  ReferralCardC: ReferralCardC,
+  ReferralCardDStart: ReferralCardDStart,
+  ReferralCardDCenter: ReferralCardDCenter,
+  ReferralCardDEnd: ReferralCardDEnd,
+  ReferralCardAFlipped: ReferralCardAFlipped,
+  ReferralCardBFlipped: ReferralCardBFlipped,
+  ReferralCardCFlipped: ReferralCardCFlipped,
+  ReferralCardDFlipped: ReferralCardDFlipped
+});
+
+const Timeline_stories = {
+  title: "Components/Timeline",
 };
 const TimelineWith1Reward = () => {
   return (index.h("div", null,
@@ -11091,20 +11185,9 @@ const TimelineWith4Rewards = () => {
       index.h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
 };
 
-const ReferralCard = /*#__PURE__*/Object.freeze({
+const Timeline = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': ReferralCard_stories,
-  ReferralCardDefault: ReferralCardDefault,
-  ReferralCardA: ReferralCardA,
-  ReferralCardB: ReferralCardB,
-  ReferralCardC: ReferralCardC,
-  ReferralCardDStart: ReferralCardDStart,
-  ReferralCardDCenter: ReferralCardDCenter,
-  ReferralCardDEnd: ReferralCardDEnd,
-  ReferralCardAFlipped: ReferralCardAFlipped,
-  ReferralCardBFlipped: ReferralCardBFlipped,
-  ReferralCardCFlipped: ReferralCardCFlipped,
-  ReferralCardDFlipped: ReferralCardDFlipped,
+  'default': Timeline_stories,
   TimelineWith1Reward: TimelineWith1Reward,
   TimelineWith2Rewards: TimelineWith2Rewards,
   TimelineWith3Rewards: TimelineWith3Rewards,
@@ -11154,23 +11237,32 @@ const TitledSection_stories = {
 const AlignLeft = () => {
   return (index.h("sqm-titled-section", { "text-align": "left" },
     index.h("sqm-text", { slot: "label" },
-      index.h("h3", null, "Earn more rewards")),
+      index.h("h3", null, "Earn more rewards"),
+      index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
     index.h("sqm-text", { slot: "content" },
-      index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+      index.h("sqm-referral-card", null,
+        media("left"),
+        sharebutton("right")))));
 };
 const AlignCenter = () => {
   return (index.h("sqm-titled-section", { "text-align": "center" },
     index.h("sqm-text", { slot: "label" },
-      index.h("h3", null, "Earn more rewards")),
+      index.h("h3", null, "Earn more rewards"),
+      index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
     index.h("sqm-text", { slot: "content" },
-      index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+      index.h("sqm-referral-card", null,
+        media("left"),
+        sharebutton("right")))));
 };
 const AlignRight = () => {
   return (index.h("sqm-titled-section", { "text-align": "right" },
     index.h("sqm-text", { slot: "label" },
-      index.h("h3", null, "Earn more rewards")),
+      index.h("h3", null, "Earn more rewards"),
+      index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
     index.h("sqm-text", { slot: "content" },
-      index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+      index.h("sqm-referral-card", null,
+        media("left"),
+        sharebutton("right")))));
 };
 const Padding = () => {
   return (index.h("div", null,
@@ -14072,10 +14164,11 @@ const stories = [
   CardFeed,
   PortalContainer,
   RewardsTableCell,
-  RewardsTable,
+  RewardsTable$1,
   UseReferralTable,
   HeroImage,
   ReferralCard,
+  Timeline,
   Image$1,
   TitledSection,
 ];