@saasquatch/mint-components 2.0.10 → 2.0.11-2

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

@@ -34,8 +34,8 @@ require('./ErrorView-3f91e5ab.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-4ccf89da.js');
 const ShadowViewAddon = require('./ShadowViewAddon-4753ff2d.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-c14ba407.js');
-const data = require('./data-24028727.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-a61124db.js');
+const data = require('./data-62fc9ba5.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-2006001f.js');
 
 /**
@@ -10719,7 +10719,7 @@ const column = "@author:noah\n@owner:noah\nFeature: Referral Table User Column\n
 
 const date = "@author:noah\n@owner:noah\nFeature: Referral Table Date Column\n\n    Shows the date of each referral\n\n    Background:\n        Given the date column is included in the referral table\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the date column is configurable\n        Given the \"column-title\" prop is set to <value>\n        Then the date column is shown with <columTitle>\n        Examples:\n            | value           | columnTitle     |\n            |                 | Date Converted  |\n            | My column title | My column title |\n\n    @motivating\n    Scenario Outline: A configurable date associated with the referral is shown for each referral\n        Given the \"date-shown\" prop is set to <dateType>\n        And referrals exist\n        Then for each referral the <referralDate> is shown in the table\n        And the date is localized to the users locale\n        Examples:\n            | dateType            | referralDate          |\n            | dateReferralStarted | date referral started |\n            | dateReferralPaid    | date referral paid    |\n            | dateReferralEnded   | date referral ended   |\n            | dateModerated       | date moderated        |\n            | dateUserModified    | date user modified    |\n            | dateConverted       | date converted        |\n            | dateModified        | date modified         |\n            |                     | date converted        |";
 
-const rewards = "@author:noah @owner:noah\nFeature: Referral Table Reward Column\n  Shows the reward associated with each referral\n\n  Background: \n    Given the status column is included in the referral table\n    And at least one referral exists\n\n  @motivating @ui\n  Scenario Outline: The referral reward and it's status are shown for each referral\n    Then for each referral reward there exists a reward cell\n    And the reward type and value is displayed in the cell\n    And the status of each reward is displayed as a pill in the cell\n    And rewards of <status> have a <pillColour> pill with the text <statusText>\n\n    Examples: \n      | status                   | pillColour | statusText       |\n      | Available                | green      | Available        |\n      | Pending                  | orange     | Pending          |\n      | Pending Tax Review       | orange     | Pending          |\n      | Pending New Tax Form     | orange     | Pending          |\n      | Pending Tax Submission   | orange     | Pending          |\n      | Pending Partner Creation | orange     | Pending          |\n      | Cancelled                | red        | Cancelled        |\n      | Payout Overdue           | red        | Payout Failed    |\n      | Payout Reversed          | red        | Payout Cancelled |\n      | Expired                  | red        | Expired          |\n      | Redeemed                 | blue       | Redeemed         |\n      | Payout Transferred       | blue       | Payout Approved  |\n      | Payout Not Yet Due       | blue       | Payout Approved  |\n      | Pending Review           | orange     | Pending Review   |\n      | Denied                   | red        | Denied           |\n\n  @motivating\n  Scenario: The pending period of a referral reward is shown if it exists\n    Given a reward that is pending\n    And the reward has a set pending period\n    Then the status pill of the reward will instead have the text \"Pending for <relativeTime>\"\n    And all dates are localized to the users locale\n\n    Examples: \n      | relativeTime |\n      |       2 days |\n      |       1 week |\n      |     3 months |\n      |      2 years |\n\n  @motivating\n  Scenario: The expiry date of a reward is shown if it exists\n    Given a reward that is available\n    And the reward has a set expiry date\n    Then an additional grey pill will appear next to the status pill with the text \"Expiring in <relativeTime>\"\n    And all dates are localized to the users locale\n\n    Examples: \n      | relativeTime |\n      |       2 days |\n      |       1 week |\n      |     3 months |\n      |      2 years |\n\n  @motivating\n  Scenario: Each reward can be expanded to show additional details about the reward\n    When a reward cell is clicked\n    Then it expands to show the following additional information (if it's available):\n      | Date the reward was received       |\n      | Date the reward was cancelled      |\n      | Date the reward expires            |\n      | Date the reward is pending until   |\n      | Payout process start date          |\n      | Payout retry date on failure       |\n      | Description for tax pending reason |\n      | Coupon code                        |\n    And all dates are localized to a users locale\n";
+const rewards = "@author:noah @owner:noah\nFeature: Referral Table Reward Column\n  Shows the reward associated with each referral\n\n  Background: \n    Given the status column is included in the referral table\n    And at least one referral exists\n\n\n\n  @motivating @ui\n  Scenario Outline: The referral reward and its status are shown for each referral\n    Then for each referral reward there exists a reward cell\n    And the reward type and value is displayed in the cell\n    And the status of each reward is displayed as a pill in the cell\n    And rewards of <status> have a <pillColour> pill with the text <statusText>\n\n    Examples: \n      | status                     | pillColour | statusText         |\n      | Available                  | success    | Available          |\n      | Pending                    | warning    | Pending            |\n      | Pending Fraud Review       | warning    | Pending            |\n      | Pending Tax Review         | warning    | Pending            |\n      | Pending New Tax Form       | warning    | Pending            |\n      | Pending Tax Submission     | warning    | Pending            |\n      | Pending Partner Creation   | warning    | Pending            |\n      | Cancelled                  | danger     | Cancelled          |\n      | Payout Overdue             | danger     | Payout Failed      |\n      | Payout Reversed            | danger     | Payout Cancelled   |\n      | Expired                    | danger     | Expired            |\n      | Denied                     | danger     | Denied             |\n      | Redeemed                   | primary    | Redeemed           |\n      | Payout Transferred         | primary    | Payout Approved    |\n      | Payout Not Yet Due         | primary    | Payout Approved    |\n      | Payout Processing          | primary    | Payment Processing |\n\n  @motivating\n  Scenario: The pending period of a referral reward is shown inside the pill if scheduled\n    Given a reward that is pending\n    And the reward has a scheduled date in the future\n    Then the status pill of the reward will contain the text \"Pending for <relativeTime>\"\n    And the date is localized to the user's locale\n\n    Examples: \n      | relativeTime |\n      | 2 days       |\n      | 1 week       |\n      | 3 months     |\n\n  @motivating\n  Scenario: The expiry date of a reward is shown in a secondary pill\n    Given a reward that is available\n    And the reward has a set expiry date\n    Then an additional info pill will appear next to the status pill with the text \"Expiring in <relativeTime>\"\n    And the date is localized to the user's locale\n\n    Examples: \n      | relativeTime |\n      | 2 days       |\n      | 1 week       |\n\n  @motivating @ui\n  Scenario Outline: Expanding the reward cell shows specific detailed status messages\n    When a reward cell is clicked\n    Then it expands to show the detail view\n    And if the reward status is <status>\n    Then the detail text displays <detailMessage>\n\n    Examples: Payout States\n      | status             | detailMessage                                                              |\n      | Payout Approved    | Processing until {date}. Payout is then scheduled based your settings.     |\n      | Payout Failed      | Payout failed due to a fulfillment issue and is currently being retried.   |\n      | Payout Cancelled   | If you think this is a mistake, contact our Support team.                  |\n      | Processing         | Processing until {date}. Payout is then scheduled based your settings.     |\n\n    Examples: Tax Compliance States\n      | status                   | detailMessage                                                      |\n      | Pending Tax Review       | Awaiting tax form review                                           |\n      | Pending New Tax Form     | Invalid tax form. Submit a new form to receive your rewards.       |\n      | Pending Tax Submission   | Submit your tax documents to receive your rewards                  |\n      | Pending Partner Creation | Complete your tax and cash payout setup to receive your rewards    |\n\n    Examples: Standard States\n      | status             | detailMessage       |\n      | Available          | Reward expiring on  |\n      | Cancelled          | Reward cancelled on |\n      | Pending            | Available on        |\n      | Pending Review     | Pending since       |\n      | Denied             | Denied on           |\n      | Expired            | Reward expired on   |\n      | Redeemed           | Redeemed            |\n\n  @motivating\n  Scenario: Fuel Tank codes are displayed in the expanded view\n    Given a reward has a Fuel Tank code\n    When the reward cell is clicked\n    Then the expanded details display the text \"Your code is\"\n    And the code <fuelTankCode> is displayed in bold\n\n  @motivating\n  Scenario: Fraud denial help text is displayed\n    Given a reward has been denied due to fraud\n    And the component has \"deniedHelpText\" configured\n    When the reward cell is clicked\n    Then the expanded details display the denied help text next to the denial date\n\n  @minutia\n  Scenario: Payout-related reward statuses are determined by the state of the Paid Funds Transfer\n    Given a reward exists\n    And the reward has a connected Paid Funds Transfer (PFT)\n    When the PFT is in <pftState>\n    Then the reward's status is <status>\n    And the status text displays <text>\n    And the status is displayed in a <pillColour> pill\n\n    Examples:\n      | pftState                                           | status              | text               | pillColour |\n      | transfer date is in the future                     | PAYOUT_PROCESSING   | Payment Processing | primary    |\n      | successfully transferred to payment provider       | PAYOUT_TRANSFERRED  | Payout Approved    | primary    |\n      | approved but payout scheduled date not yet arrived | PAYOUT_NOT_YET_DUE  | Payout Approved    | primary    |\n      | failed due to fulfillment issue and retrying       | PAYOUT_OVERDUE      | Payout Failed      | danger     |\n      | reversed or cancelled after being processed        | PAYOUT_REVERSED     | Payout Cancelled   | danger     |\n";
 
 const status = "@author:noah\n@owner:noah\nFeature: Referral Table Status Column\n\n  Shows the status of each referral\n\n  Background:\n    Given the status column is included in the referral table\n\n  @motivating\n  @ui\n  Scenario: The title of the date column is configurable\n    Given the \"column-title\" prop is set to \"My column title\"\n    Then the date column is shown with \"My column title\"\n\n  @motivating\n  Scenario: The status column's fraudStatus maps to the fraud status of the referral\n    Given at least one referral\n    Then the referral cell fraud status is set to `moderationStatus` of the referral\n\n  @motivating\n  Scenario Outline: The status column displays the status of each referral\n    Given referrals exist\n    Then the status of each referral is displayed\n    And the status <status> is displayed as text from <statusTextProp> in a <pillColour> pill\n\n    Examples:\n      | status      | statusTextProp          | pillColour |\n      | In Progress | inProgressStatusText    | Orange     |\n      | Converted   | convertedStatusText     | Green      |\n      | Pending     | pendingReviewStatusText | Orange     |\n      | Denied      | deniedStatusText        | Red        |\n";
 
@@ -11798,6 +11798,308 @@ const ReferralTable = /*#__PURE__*/Object.freeze({
   ColumnsMobileHidden: ColumnsMobileHidden
 });
 
+const TaxAndCashReferralTableRewardsCell_stories = {
+  title: "Components/Tax And Cash Referral Table Rewards Cell",
+};
+function getDays$1() {
+  return luxon.luxon.DateTime.now().toMillis() + 600000000;
+}
+function getMonths$1() {
+  return luxon.luxon.DateTime.now().toMillis() + 10000000000;
+}
+const cashReward = {
+  id: "1234",
+  type: "CREDIT",
+  value: 50,
+  unit: "USD",
+  name: "test",
+  dateScheduledFor: getDays$1(),
+  dateExpires: getMonths$1(),
+  dateCancelled: 134400,
+  dateRedeemed: 0,
+  fuelTankCode: null,
+  fuelTankType: null,
+  currency: "USD",
+  prettyValue: "$50.00",
+  statuses: ["AVAILABLE"],
+  globalRewardKey: "Key",
+  rewardRedemptionTransactions: null,
+  partnerFundsTransfer: null,
+};
+const taxConnection = {
+  connected: true,
+  taxHandlingEnabled: true,
+  publisher: {
+    requiredTaxDocumentType: "W9",
+    withdrawalSettings: { paymentMethod: "BANK_TRANSFER" },
+    payoutsAccount: null,
+    currentTaxDocument: {
+      status: "ACTIVE",
+      type: "W9",
+      dateCreated: 1627427794891,
+    },
+  },
+};
+const defaultPFT = {
+  id: "ID1234",
+  status: null,
+  dateCreated: null,
+  dateScheduled: null,
+  dateTransferred: null,
+};
+const defaultTaxDocument = {
+  status: "NOT_VERIFIED",
+  type: "W9",
+  dateCreated: luxon.luxon.DateTime.now().toMillis() - 1000000,
+};
+const defaultProps$o = {
+  statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
+  statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }",
+  rewardReceivedText: "Reward received on",
+  hideDetails: false,
+};
+const CashReward = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [{ ...cashReward }], taxConnection: taxConnection }, defaultProps$o)));
+};
+const PayoutApproved = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        partnerFundsTransfer: {
+          ...defaultPFT,
+          status: "TRANSFERRED",
+          dateScheduled: Date.now() - 600000000,
+        },
+      },
+    ], taxConnection: taxConnection }, defaultProps$o)));
+};
+const PayoutProcessing = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        partnerFundsTransfer: {
+          ...defaultPFT,
+          dateCreated: 1355612521321,
+          dateScheduled: getDays$1(),
+        },
+      },
+    ], taxConnection: taxConnection }, defaultProps$o)));
+};
+const PayoutFailed$1 = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        partnerFundsTransfer: {
+          ...defaultPFT,
+          status: "OVERDUE",
+          dateScheduled: Date.now() - 100000,
+        },
+      },
+    ], taxConnection: taxConnection }, defaultProps$o)));
+};
+const PayoutCancelled$1 = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        partnerFundsTransfer: {
+          ...defaultPFT,
+          status: "REVERSED",
+          dateScheduled: Date.now() - 100000,
+        },
+      },
+    ], taxConnection: taxConnection }, defaultProps$o)));
+};
+const PendingTaxReview$1 = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        statuses: ["PENDING"],
+        pendingReasons: ["US_TAX"],
+      },
+    ], taxConnection: {
+      ...taxConnection,
+      publisher: {
+        ...taxConnection.publisher,
+        currentTaxDocument: {
+          ...defaultTaxDocument,
+          status: "NOT_VERIFIED",
+        },
+      },
+    } }, defaultProps$o)));
+};
+const PendingNewTaxForm$1 = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        statuses: ["PENDING"],
+        pendingReasons: ["US_TAX"],
+      },
+    ], taxConnection: {
+      ...taxConnection,
+      publisher: {
+        ...taxConnection.publisher,
+        currentTaxDocument: {
+          ...defaultTaxDocument,
+          status: "INACTIVE",
+        },
+      },
+    } }, defaultProps$o)));
+};
+const PendingTaxSubmission$1 = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        statuses: ["PENDING"],
+        pendingReasons: ["US_TAX"],
+      },
+    ], taxConnection: {
+      ...taxConnection,
+      publisher: {
+        ...taxConnection.publisher,
+        currentTaxDocument: null,
+      },
+    } }, defaultProps$o)));
+};
+const PendingPartnerCreation$1 = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        statuses: ["PENDING"],
+        pendingReasons: ["MISSING_PAYOUT_CONFIGURATION"],
+      },
+    ], taxConnection: {
+      ...taxConnection,
+      connected: false,
+    } }, defaultProps$o)));
+};
+const PendingW9 = () => {
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        statuses: ["PENDING"],
+        pendingReasons: ["US_TAX"],
+      },
+    ], taxConnection: {
+      ...taxConnection,
+      taxHandlingEnabled: false,
+    } }, defaultProps$o)));
+};
+
+const TaxAndCashReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': TaxAndCashReferralTableRewardsCell_stories,
+  CashReward: CashReward,
+  PayoutApproved: PayoutApproved,
+  PayoutProcessing: PayoutProcessing,
+  PayoutFailed: PayoutFailed$1,
+  PayoutCancelled: PayoutCancelled$1,
+  PendingTaxReview: PendingTaxReview$1,
+  PendingNewTaxForm: PendingNewTaxForm$1,
+  PendingTaxSubmission: PendingTaxSubmission$1,
+  PendingPartnerCreation: PendingPartnerCreation$1,
+  PendingW9: PendingW9
+});
+
+const TaxAndCashReferralTable_stories = {
+  title: "Components/Tax And Cash Referral Table",
+};
+const taxAndCashTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Customer", "Status", "Date converted", "Rewards"],
+    rows: [
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Payout Approved User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PayoutApproved, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Payout Failed User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PayoutFailed$1, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Payout Cancelled User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PayoutCancelled$1, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Tax Review User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PendingTaxReview$1, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Payout Processing User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PayoutProcessing, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "New Tax Form User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PendingNewTaxForm$1, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Tax Submission User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PendingTaxSubmission$1, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Partner Creation User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PendingPartnerCreation$1, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Missing W9 User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(PendingW9, null),
+      ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Standard Cash User" }),
+        index.h(Converted, null),
+        index.h(DateCell$1, null),
+        index.h(CashReward, null),
+      ],
+    ],
+  },
+};
+const TaxAndCashReferralTable = () => {
+  return index.h(GenericTableView.GenericTableView, Object.assign({}, taxAndCashTableProps));
+};
+
+const TaxAndCashReferralTable$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': TaxAndCashReferralTable_stories,
+  TaxAndCashReferralTable: TaxAndCashReferralTable
+});
+
 const UseReferralTable_stories = {
   title: "Hooks / useReferralTable",
 };
@@ -12115,7 +12417,7 @@ const scenario2 = "@author:derek\n@owner:derek\nFeature: Reward Table reward Col
 
 const scenario4 = "@author:derek @owner:derek\nFeature: Reward Table Source Column\n    Shows the source of each reward\n\n  @motivating @ui\n  Scenario Outline: The title of the source column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the source column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Source          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario: The source column displays manual if the reward is caused by a manual action\n    Given a user with a \"MANUAL\" reward\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Manual\"\n\n  @motivating @ui\n  Scenario: The source column displays the program name if the reward is caused automatically by a program\n    Given a user with a \"AUTOMATED\" program reward\n    And the program has name \"Loyalty Program\"\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Loyalty Program\"\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n    Given the \"reward-exchange-text\" prop is <propValue>\n    And a user with a \"MANUAL\" reward\n    But it was created by a reward exchange\n    Then they view the rewards table\n    Then the source displays <exchangeText>\n    And under it displays the following\n      | prettyRedeemedCredit → prettyValue |\n\n    Examples:\n      | propValue | exchangeText    |\n      |           | Reward Exchange |\n      | Exchanged | Exchanged       |\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n    Given the \"reward-source-text\" prop is <propValue>\n    And a user with a referral reward\n    And that reward has <rewardSource>\n    When they view the rewards table\n    Then then source displays <referralText>\n    And under it displays the full name of the <referralUser>\n\n    Examples:\n      | propValue                                                                             | rewardSource  | referralText | referralUser  |\n      |                                                                                       | REFERRED      | Referred by  | referrer user |\n      |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n  @motivating @ui\n  Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n    Given a user with a referral reward\n    And referral user exists\n    And referral user has <name>\n    But referral user has no <otherName>\n    When they view the rewards table\n    Then referral user's name is displayed as <name>\n\n    Examples:\n      | name       | otherName  |\n      | first.name | last.name  |\n      | last.name  | first.name |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    And the <referralUser> has no first name\n    And the <referralUser> has no last name\n    When they view the rewards table\n    Then then source displays <sourceText>\n    And under it displays \"Anonymous User\"\n\n    Examples:\n      | rewardSource  | referralUser  | sourceText  |\n      | FRIEND_SIGNUP | referrer      | Referral to |\n      | REFERRED      | referred user | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted User\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted referral\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted referral\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @minutia @ui\n  Scenario Outline: Name fallbacks for referral users without names are customizable\n    Given <prop> with <value>\n    And a user with a referral reward\n    But the referral user <hadAction>\n    When they view the rewards table\n    Then the source displays <value> as the referral user\n\n    Examples:\n      | prop           | value           | hadAction                       |\n      | deleted-user   | Former Customer | was deleted                     |\n      | anonymous-user | Nameless User   | had first and last name deleted |\n\n  @motivating\n  Scenario Outline: Source text can be customized\n    Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n    And a user with a <rewardSource> reward\n    When they view the rewards table\n    Then the source is <sourceText>\n\n    Examples:\n      | rewardSource | sourceText      |\n      | MANUAL       | Support         |\n      | AUTOMATED    | Loyalty Program |\n";
 
-const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background:\n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples:\n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format \"Month-Day-Year\"                                 |\n      | redeemed reward                                              | localized redemption date in format \"Month-Day-Year\"                             |\n      | expired reward                                               | localized expired date in format \"Month-Day-Year\"                                |\n      | cancelled reward                                             | localized cancelled date in format \"Month-Day-Year\"                              |\n      | pending reward with a end date                               | localized pending for date in format \"Month-Day-Year\"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"MISSING_PAYOUT_CONFIGURATION\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples:\n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n";
+const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background:\n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | success    |\n      | CANCELLED                | Cancelled        | danger     |\n      | PENDING                  | Pending          | warning    |\n      | EXPIRED                  | Expired          | danger     |\n      | REDEEMED                 | Redeemed         | primary    |\n      | PENDING_REVIEW           | Pending          | warning    |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | primary    |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | primary    |\n      | PAYOUT_OVERDUE           | Payout Failed    | danger     |\n      | PAYOUT_REVERSED          | Payout Cancelled | danger     |\n      | PAYOUT_PROCESSING        | Processing       | warning    |\n      | PENDING_TAX_REVIEW       | Pending          | warning    |\n      | PENDING_NEW_TAX_FORM     | Pending          | warning    |\n      | PENDING_TAX_SUBMISSION   | Pending          | warning    |\n      | PENDING_PARTNER_CREATION | Pending          | warning    |\n      | DENIED                   | Denied           | danger     |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples: Standard Rewards\n      | reward                               | text                     |\n      | available reward with an expiry date | Expires <localized date> |\n      | redeemed reward                      | <localized date>         |\n      | expired reward                       | <localized date>         |\n      | cancelled reward                     | <localized date>         |\n      | pending reward with a scheduled date | Until <localized date>   |\n      \n    Examples: Tax & Payout Rewards\n      | reward                                                       | text                                                                            |\n      | pending reward due to W9                                     | W-9 required                                                                    |\n      | pending reward due to fufillment error                       | Fulfillment error                                                               |\n      | reward pending review of referral                            | Awaiting review                                                                 |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                    |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                              |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                       |\n      | reward whose payout is processing                            | Processing until <localized date>. Payout is then scheduled based your settings.|\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is current being retried.          |\n      | reward whose payout was approved                             | Payout approved and scheduled for payment based on your settings.               |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                       |\n      | cancelled reward from denied referral                        | Detected self-referral                                                          |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"MISSING_PAYOUT_CONFIGURATION\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized via ICU format\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | success    |\n      | CANCELLED          | Unavailable       | danger     |\n      | PENDING            | Coming soon!      | warning    |\n      | EXPIRED            | Past due          | danger     |\n      | REDEEMED           | Spent             | primary    |\n      | PENDING_REVIEW     | Pending Review!   | warning    |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | primary    |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | primary    |\n      | PAYOUT_OVERDUE     | Payout Failed!    | danger     |\n      | PAYOUT_REVERSED    | Payout Cancelled! | danger     |\n      | DENIED             | Unlucky!          | danger     |\n\n  @minutia @ui\n  Scenario Outline: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples:\n      | value         | text                           |\n      | Expires       | Expires <localized date>       |\n      | Redeem before | Redeem before <localized date> |\n\n  @motivating\n  Scenario: Payout-related reward statuses are determined by the state of the Paid Funds Transfer\n    Given a user has a reward with a connected Paid Funds Transfer (PFT)\n    When the PFT is in <pftState>\n    Then the reward's status is <status>\n    And the status is displayed in a <pillColour> pill with <text>\n    And under the pill is <description>\n\n    Examples:\n      | pftState                                           | status              | text             | pillColour | description                                                                     |\n      | transfer date is in the future                     | PAYOUT_PROCESSING   | Processing       | warning    | Processing until <localized date>. Payout is then scheduled based your settings.|\n      | successfully transferred to payment provider       | PAYOUT_TRANSFERRED  | Payout Approved  | primary    | Payout approved and scheduled for payment based on your settings.               |\n      | approved but payout scheduled date not yet arrived | PAYOUT_NOT_YET_DUE  | Payout Approved  | primary    | Payout approved and scheduled for payment based on your settings.               |\n      | failed due to fulfillment issue and retrying       | PAYOUT_OVERDUE      | Payout Failed    | danger     | Payout failed due to a fulfillment issue and is current being retried.          |\n      | reversed or cancelled after being processed        | PAYOUT_REVERSED     | Payout Cancelled | danger     | If you think this is a mistake, contact our Support team.                       |";
 
 const scenario$x = scenario1 + scenario2 + scenario3 + scenario4;
 const RewardsTableCell_stories = {
@@ -12155,22 +12457,7 @@ const rewardsData$1 = {
   rewardRedemptionTransactions: {
     data: null,
   },
-};
-const taxConnection = {
-  connected: true,
-  taxHandlingEnabled: true,
-  publisher: {
-    requiredTaxDocumentType: "W8BEN",
-    currentTaxDocument: {
-      status: "NOT_VERIFIED",
-      type: "W8BEN",
-      dateCreated: 321321487,
-    },
-    withdrawalSettings: {
-      paymentMethod: "BANK_TRANSFER",
-    },
-    payoutsAccount: null,
-  },
+  partnerFundsTransfer: null,
 };
 const RewardsCellCreditSingle = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
@@ -12375,16 +12662,6 @@ const StatusCellExpired = () => {
 const pending = {
   statuses: ["PENDING"],
 };
-const payoutSent = {
-  statuses: ["PAYOUT_SENT"],
-};
-const payoutFailed = {
-  statuses: ["PAYOUT_FAILED"],
-};
-const payoutCancelled = {
-  statuses: ["PAYOUT_CANCELLED"],
-  dateCancelled: 1355612521321,
-};
 const us_tax = {
   pendingReasons: ["US_TAX"],
 };
@@ -12398,57 +12675,6 @@ const unhandled = {
 const StatusCellPending = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1, ...pending } }));
 };
-const StatusCellPendingTaxReview = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1 }, taxConnection: {
-      ...taxConnection,
-      publisher: {
-        requiredTaxDocumentType: "W8BEN",
-        currentTaxDocument: {
-          status: "",
-        },
-        ...taxConnection.publisher,
-      },
-    } }));
-};
-const StatusCellPendingNewTaxForm = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1 }, taxConnection: {
-      ...taxConnection,
-      publisher: {
-        ...taxConnection.publisher,
-        requiredTaxDocumentType: "W8BEN",
-        currentTaxDocument: {
-          status: "INACTIVE",
-          type: "W8BEN",
-          dateCreated: 321321487,
-        },
-      },
-    } }));
-};
-const StatusCellPendingTaxSubmission = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1 }, taxConnection: {
-      ...taxConnection,
-      publisher: {
-        ...taxConnection.publisher,
-        requiredTaxDocumentType: "W8BEN",
-        currentTaxDocument: null,
-      },
-    } }));
-};
-const StatusCellPendingPartnerCreation = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...rewardsData$1,
-      pendingReasons: ["MISSING_PAYOUT_CONFIGURATION"],
-    } }));
-};
-const StatusCellPayoutSent = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Sent", reward: { ...rewardsData$1, ...payoutSent }, taxConnection: taxConnection }));
-};
-const StatusCellPayoutFailed = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: { ...rewardsData$1, ...payoutFailed } }));
-};
-const StatusCellPayoutCancelled = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: { ...rewardsData$1, ...payoutCancelled } }));
-};
 const StatusCellPendingWithLongText = () => {
   return (index.h("div", { style: { width: "200px" } },
     index.h("sqm-rewards-table-status-cell", { statusText: "Pending for 300,000,000 months and some change", reward: { ...rewardsData$1, ...pending } })));
@@ -12507,61 +12733,388 @@ const StatusCellDenied = () => {
       },
     } }));
 };
-const DateCell$2 = () => {
-  return (index.h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
+const DateCell$2 = () => {
+  return (index.h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
+};
+const CustomerNoteCell = () => {
+  return (index.h("sqm-rewards-table-customer-note-cell", { note: rewardsData$1.meta.message }));
+};
+const EmptyCell$3 = () => {
+  return index.h("sqm-rewards-table-date-cell", null);
+};
+
+const RewardsTableCell = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': RewardsTableCell_stories,
+  RewardsCellCreditSingle: RewardsCellCreditSingle,
+  RewardsCellCreditFull: RewardsCellCreditFull,
+  RewardsCellCreditPartial: RewardsCellCreditPartial,
+  RewardsCellCreditCancelled: RewardsCellCreditCancelled,
+  RewardsCellCreditExpired: RewardsCellCreditExpired,
+  RewardsCellCreditPending: RewardsCellCreditPending,
+  RewardsCellCreditRedeemed: RewardsCellCreditRedeemed,
+  RewardsCellCreditLong: RewardsCellCreditLong,
+  RewardsCellNonCredit: RewardsCellNonCredit,
+  RewardsCellFueltank: RewardsCellFueltank,
+  RewardsCellFueltankLong: RewardsCellFueltankLong,
+  SourceCellManual: SourceCellManual,
+  SourceCellProgram: SourceCellProgram,
+  SourceCellExchange: SourceCellExchange,
+  SourceCellReferral: SourceCellReferral,
+  SourceCellWithLongText: SourceCellWithLongText,
+  SourceCellReferred: SourceCellReferred,
+  SourceCellAnonymousUser: SourceCellAnonymousUser,
+  SourceCellDeletedUser: SourceCellDeletedUser,
+  SourceCellDeletedReferral: SourceCellDeletedReferral,
+  StatusCellAvailable: StatusCellAvailable,
+  StatusCellAvailableExpiry: StatusCellAvailableExpiry,
+  StatusCellRedeemed: StatusCellRedeemed,
+  StatusCellCancelled: StatusCellCancelled,
+  StatusCellExpired: StatusCellExpired,
+  StatusCellPending: StatusCellPending,
+  StatusCellPendingWithLongText: StatusCellPendingWithLongText,
+  StatusCellPendingUsTax: StatusCellPendingUsTax,
+  StatusCellPendingScheduled: StatusCellPendingScheduled,
+  StatusCellPendingUnhandled: StatusCellPendingUnhandled,
+  StatusCellPendingReview: StatusCellPendingReview,
+  StatusCellDenied: StatusCellDenied,
+  DateCell: DateCell$2,
+  CustomerNoteCell: CustomerNoteCell,
+  EmptyCell: EmptyCell$3
+});
+
+const TaxAndCashRewardsTableCell_stories = {
+  title: "Components/Tax And Cash Rewards Table Cell",
+};
+const cashReward$1 = {
+  id: "68c34fd98a6cb4f5f8394084",
+  type: "CREDIT",
+  value: 59900,
+  prettyValue: "$599.00",
+  availableValue: 0,
+  prettyAvailableValue: "$0.00",
+  prettyAssignedCredit: "$599.00",
+  prettyRedeemedCredit: "$599.00",
+  prettyValueNumber: "599",
+  prettyAvailableNumber: "0",
+  prettyRedeemedNumber: "599",
+  unit: "CASH/USD",
+  baseUnit: "CASH",
+  rewardUnit: {
+    key: "CASH/USD",
+    name: "Cash",
+  },
+  name: null,
+  dateCreated: 1757630425085,
+  dateScheduledFor: 1757631025115,
+  dateGiven: 1757630737115,
+  dateExpires: null,
+  dateCancelled: null,
+  dateRedeemed: 1757630737115,
+  dateModified: 1757630737115,
+  rewardSource: "MANUAL",
+  fuelTankCode: null,
+  fuelTankType: null,
+  fuelTankSyncSetting: null,
+  currency: "USD",
+  meta: null,
+  programId: "40444",
+  programRewardKey: null,
+  globalRewardKey: "cash",
+  program: {
+    id: "40444",
+    name: "Make Money Program",
+    template: {
+      id: "2qdmAx1fi31deo3P9O36sQ",
+      name: "Referral Program With Objectives",
+    },
+  },
+  partnerFundsTransfer: null,
+  user: {
+    id: "8da2c67e05e3e56de7ea638c2705017945211621c80e1cd4b4aac0e423d1cdb2",
+    accountId: "8da2c67e05e3e56de7ea638c2705017945211621c80e1cd4b4aac0e423d1cdb2",
+    firstName: "Billy",
+    lastName: "Jean",
+    email: "billy.jean@impact.com",
+    impactConnection: {
+      connected: true,
+      taxHandlingEnabled: true,
+      publisher: null,
+    },
+  },
+  referral: null,
+  description: null,
+  statuses: ["REDEEMED"],
+  rewardRedemptionTransactions: {
+    data: null,
+  },
+  exchangedRewardRedemptionTransaction: null,
+  pendingReasons: [],
+};
+const pending$1 = {
+  statuses: ["PENDING"],
+};
+const processingPFT = {
+  partnerFundsTransfer: {
+    id: "123",
+    status: null,
+    dateCreated: 1355612521321,
+    dateScheduled: 2779257600000,
+    dateTransferred: null,
+  },
+};
+const taxConnection$1 = {
+  connected: true,
+  taxHandlingEnabled: true,
+  publisher: {
+    requiredTaxDocumentType: "W8BEN",
+    currentTaxDocument: {
+      status: "NOT_VERIFIED",
+      type: "W8BEN",
+      dateCreated: 321321487,
+    },
+    withdrawalSettings: {
+      paymentMethod: "BANK_TRANSFER",
+    },
+    payoutsAccount: null,
+  },
+};
+const CashReward$1 = () => {
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...cashReward$1 }, availableText: "{availableAmount} remaining" }));
+};
+const StatusCellPendingTaxReview = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward$1, ...pending$1, pendingReasons: ["US_TAX"] }, taxConnection: {
+      ...taxConnection$1,
+      publisher: {
+        requiredTaxDocumentType: "W8BEN",
+        currentTaxDocument: {
+          status: "",
+        },
+        ...taxConnection$1.publisher,
+      },
+    } }));
+};
+const StatusCellPendingNewTaxForm = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+      ...cashReward$1,
+      statuses: ["PENDING"],
+      pendingReasons: ["US_TAX"],
+    }, taxConnection: {
+      connected: true,
+      taxHandlingEnabled: true,
+      publisher: {
+        requiredTaxDocumentType: "W8BEN",
+        withdrawalSettings: {
+          paymentMethod: "BANK_TRANSFER",
+        },
+        payoutsAccount: null,
+        currentTaxDocument: {
+          status: "INACTIVE",
+          type: "W8BEN",
+          dateCreated: 321321487,
+        },
+      },
+    } }));
+};
+const StatusCellPendingTaxSubmission = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward$1, ...pending$1, pendingReasons: ["US_TAX"] }, taxConnection: {
+      ...taxConnection$1,
+      publisher: {
+        ...taxConnection$1.publisher,
+        requiredTaxDocumentType: "W8BEN",
+        currentTaxDocument: null,
+      },
+    } }));
+};
+const StatusCellPendingPartnerCreation = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+      ...cashReward$1,
+      ...pending$1,
+      pendingReasons: ["US_TAX"],
+    }, taxConnection: {
+      ...taxConnection$1,
+      connected: false,
+    } }));
+};
+const StatusCellPendingW9 = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+      ...cashReward$1,
+      ...pending$1,
+      pendingReasons: ["US_TAX"],
+    }, taxConnection: {
+      ...taxConnection$1,
+      taxHandlingEnabled: false,
+    } }));
 };
-const CustomerNoteCell = () => {
-  return (index.h("sqm-rewards-table-customer-note-cell", { note: rewardsData$1.meta.message }));
+const StatusCellPayoutSent = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Sent", reward: {
+      ...cashReward$1,
+      partnerFundsTransfer: {
+        id: "transfer-123",
+        status: "TRANSFERRED",
+        dateScheduled: 1640995200000,
+        dateTransferred: 1640995200000,
+        dateCreated: 1640995200000,
+      },
+    }, taxConnection: taxConnection$1 }));
 };
-const EmptyCell$3 = () => {
-  return index.h("sqm-rewards-table-date-cell", null);
+const StatusCellPayoutFailed = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: {
+      ...cashReward$1,
+      partnerFundsTransfer: {
+        id: "transfer-failed",
+        status: "OVERDUE",
+        dateScheduled: 1640995200000,
+        dateTransferred: null,
+        dateCreated: 1640995200000,
+      },
+    } }));
+};
+const StatusCellPayoutProcessing = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payment Processing", reward: { ...cashReward$1, ...processingPFT } }));
+};
+const StatusCellPayoutCancelled = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: {
+      ...cashReward$1,
+      partnerFundsTransfer: {
+        id: "transfer-reversed",
+        status: "REVERSED",
+        dateScheduled: 1640995200000,
+        dateTransferred: null,
+        dateCreated: 1640995200000,
+      },
+    } }));
 };
 
-const RewardsTableCell = /*#__PURE__*/Object.freeze({
+const TaxAndCashRewardsTableCell = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': RewardsTableCell_stories,
-  RewardsCellCreditSingle: RewardsCellCreditSingle,
-  RewardsCellCreditFull: RewardsCellCreditFull,
-  RewardsCellCreditPartial: RewardsCellCreditPartial,
-  RewardsCellCreditCancelled: RewardsCellCreditCancelled,
-  RewardsCellCreditExpired: RewardsCellCreditExpired,
-  RewardsCellCreditPending: RewardsCellCreditPending,
-  RewardsCellCreditRedeemed: RewardsCellCreditRedeemed,
-  RewardsCellCreditLong: RewardsCellCreditLong,
-  RewardsCellNonCredit: RewardsCellNonCredit,
-  RewardsCellFueltank: RewardsCellFueltank,
-  RewardsCellFueltankLong: RewardsCellFueltankLong,
-  SourceCellManual: SourceCellManual,
-  SourceCellProgram: SourceCellProgram,
-  SourceCellExchange: SourceCellExchange,
-  SourceCellReferral: SourceCellReferral,
-  SourceCellWithLongText: SourceCellWithLongText,
-  SourceCellReferred: SourceCellReferred,
-  SourceCellAnonymousUser: SourceCellAnonymousUser,
-  SourceCellDeletedUser: SourceCellDeletedUser,
-  SourceCellDeletedReferral: SourceCellDeletedReferral,
-  StatusCellAvailable: StatusCellAvailable,
-  StatusCellAvailableExpiry: StatusCellAvailableExpiry,
-  StatusCellRedeemed: StatusCellRedeemed,
-  StatusCellCancelled: StatusCellCancelled,
-  StatusCellExpired: StatusCellExpired,
-  StatusCellPending: StatusCellPending,
+  'default': TaxAndCashRewardsTableCell_stories,
+  CashReward: CashReward$1,
   StatusCellPendingTaxReview: StatusCellPendingTaxReview,
   StatusCellPendingNewTaxForm: StatusCellPendingNewTaxForm,
   StatusCellPendingTaxSubmission: StatusCellPendingTaxSubmission,
   StatusCellPendingPartnerCreation: StatusCellPendingPartnerCreation,
+  StatusCellPendingW9: StatusCellPendingW9,
   StatusCellPayoutSent: StatusCellPayoutSent,
   StatusCellPayoutFailed: StatusCellPayoutFailed,
-  StatusCellPayoutCancelled: StatusCellPayoutCancelled,
-  StatusCellPendingWithLongText: StatusCellPendingWithLongText,
-  StatusCellPendingUsTax: StatusCellPendingUsTax,
-  StatusCellPendingScheduled: StatusCellPendingScheduled,
-  StatusCellPendingUnhandled: StatusCellPendingUnhandled,
-  StatusCellPendingReview: StatusCellPendingReview,
-  StatusCellDenied: StatusCellDenied,
-  DateCell: DateCell$2,
-  CustomerNoteCell: CustomerNoteCell,
-  EmptyCell: EmptyCell$3
+  StatusCellPayoutProcessing: StatusCellPayoutProcessing,
+  StatusCellPayoutCancelled: StatusCellPayoutCancelled
+});
+
+const TaxAndCashRewardsTable_stories = {
+  title: "Components/Tax And Cash Rewards Table",
+};
+const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: empty
+      ? "empty"
+      : loading
+        ? "loading"
+        : "rows",
+    namespace: "sqm-rewards-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: prev,
+      moreLabel: next,
+    },
+    hiddenColumns: hidden,
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: rows,
+  },
+});
+/* -------------------------------------------------------------------------- */
+/* PENDING ROWS                                */
+/* -------------------------------------------------------------------------- */
+const r_pending_new_tax_form = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPendingNewTaxForm, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+const r_pending_tax_submission = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPendingTaxSubmission, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+const r_pending_tax_review = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPendingTaxReview, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+const r_pending_partner_creation = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPendingPartnerCreation, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+const r_pending_w9 = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPendingW9, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+/* -------------------------------------------------------------------------- */
+/* SUCCESS / PROCESSING ROWS                                                  */
+/* -------------------------------------------------------------------------- */
+const r_payout_sent = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPayoutSent, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+const r_payout_processing = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPayoutProcessing, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+/* -------------------------------------------------------------------------- */
+/* ERROR / CANCELLED ROWS                                                     */
+/* -------------------------------------------------------------------------- */
+const r_payout_failed = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPayoutFailed, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+const r_payout_cancelled = [
+  index.h(CashReward$1, null),
+  index.h(StatusCellPayoutCancelled, null),
+  index.h(SourceCellReferral, null),
+  index.h(DateCell$2, null),
+];
+const RewardsTable = () => {
+  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([
+    r_pending_new_tax_form,
+    r_pending_tax_submission,
+    r_pending_tax_review,
+    r_pending_partner_creation,
+    r_pending_w9,
+    r_payout_processing,
+    r_payout_sent,
+    r_payout_failed,
+    r_payout_cancelled,
+  ]))));
+};
+
+const RewardsTable$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': TaxAndCashRewardsTable_stories,
+  RewardsTable: RewardsTable
 });
 
 const scenario$y = "@owner:sam\n@author:sam\nFeature: Rewards Table\n\n    Shows a list of rewards as a table\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no rewards\n        Given a user with rewards\n        When they view the reward table\n        Then no rewards are displayed\n        And they see an image with a user icon\n        And \"View your rewards\" in bold\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutia\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no rewards\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the reward table\n        Then they see the custom empty state\n\n    @minutia\n    @ui\n    Scenario: The loading state is shown while rewards are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the \"loading\" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n        Given the user has <number of rewards>\n        And the table is configured to show <page limit> rewards per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of rewards\n        And the pagination button to go to the previous page is disabled on the first page of rewards\n        Examples:\n            | number of rewards | page limit | number of pages |\n            | 0                 | 4          | 1               |\n            | 1                 | 4          | 1               |\n            | 3                 | 4          | 1               |\n            | 5                 | 4          | 2               |\n            | 42                | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the reward table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile\n        Given a reward table with 4 columns\n        And prop \"hidden-columns\" with <hideColumnValue>\n        And a user with rewards\n        When they view the reward table\n        And their window size is below the tablet breakpoint\n        Then reward cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\n        Given the table is configured with \"program-id\"\n        Then only rewards from the program with \"program-id\" are shown\n\n    @landmine\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\n        There is no easy way for the backend to filter for \"classic\" programs,\n        thus we are filtering for rewards without programId's.\n\n        Given the \"program-id\" of the table is set to \"classic\"\n        Then rewards from classic programs are shown\n        And manual rewards are shown\n\n    @minutia\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with \"hide-labels\" set to \"true\"\n        Then the table is displayed without column headings";
@@ -12589,7 +13142,7 @@ const loadingElement$2 = (index.h("div", { slot: "loading", style: { display: "c
     index.h("sqm-table-cell", { colspan: 5 },
       index.h("sl-skeleton", null)))));
 const emptyElement$2 = (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" }));
-const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
+const rewardsTableProps$1 = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
   states: {
     hasPrev: false,
     hasNext: true,
@@ -12681,44 +13234,8 @@ const r_fueltank_long = [
   index.h(SourceCellManual, null),
   index.h(DateCell$2, null),
 ];
-const r_payout_sent = [
-  index.h(RewardsCellCreditRedeemed, null),
-  index.h(StatusCellPayoutSent, null),
-  index.h(SourceCellReferral, null),
-  index.h(DateCell$2, null),
-];
-const r_payout_failed = [
-  index.h(RewardsCellCreditRedeemed, null),
-  index.h(StatusCellPayoutFailed, null),
-  index.h(SourceCellReferral, null),
-  index.h(DateCell$2, null),
-];
-const r_pending_new_tax_form = [
-  index.h(RewardsCellCreditRedeemed, null),
-  index.h(StatusCellPendingNewTaxForm, null),
-  index.h(SourceCellReferral, null),
-  index.h(DateCell$2, null),
-];
-const r_pending_partner_creation = [
-  index.h(RewardsCellCreditRedeemed, null),
-  index.h(StatusCellPendingPartnerCreation, null),
-  index.h(SourceCellReferral, null),
-  index.h(DateCell$2, null),
-];
-const r_pending_tax_review = [
-  index.h(RewardsCellCreditRedeemed, null),
-  index.h(StatusCellPendingTaxReview, null),
-  index.h(SourceCellReferral, null),
-  index.h(DateCell$2, null),
-];
-const r_pending_tax_submission = [
-  index.h(RewardsCellCreditRedeemed, null),
-  index.h(StatusCellPendingTaxSubmission, null),
-  index.h(SourceCellReferral, null),
-  index.h(DateCell$2, null),
-];
-const RewardsTable = () => {
-  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([
+const RewardsTable$2 = () => {
+  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps$1([
     r_available,
     r_redeemed,
     r_cancelled,
@@ -12726,37 +13243,31 @@ const RewardsTable = () => {
     r_expired,
     r_denied,
     r_pending_review,
-    r_payout_sent,
-    r_payout_failed,
-    r_pending_new_tax_form,
-    r_pending_partner_creation,
-    r_pending_tax_submission,
-    r_pending_tax_review,
   ]))));
 };
 const RewardsTableSingle = () => {
-  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank]))));
+  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps$1([r_fueltank]))));
 };
 const RewardsTableLong = () => {
-  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank_long, r_long]))));
+  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps$1([r_fueltank_long, r_long]))));
 };
 const RewardsTableEmpty = () => {
-  return index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([], true)));
+  return index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps$1([], true)));
 };
 const RewardsTableLoading = () => {
-  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([], false, true))));
+  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps$1([], false, true))));
 };
 const CustomButtonTextTable$1 = () => {
-  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, "CUSTOM PREVIOUS TEXT", "CUSTOM NEXT TEXT"))));
+  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps$1([r_available, r_redeemed, r_cancelled, r_expired], false, false, "CUSTOM PREVIOUS TEXT", "CUSTOM NEXT TEXT"))));
 };
 const ColumnsMobileHidden$1 = () => {
-  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, undefined, undefined, "0,1,2,3"))));
+  return (index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps$1([r_available, r_redeemed, r_cancelled, r_expired], false, false, undefined, undefined, "0,1,2,3"))));
 };
 
-const RewardsTable$1 = /*#__PURE__*/Object.freeze({
+const TaxAndCashRewardsTable = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardsTable_stories,
-  RewardsTable: RewardsTable,
+  RewardsTable: RewardsTable$2,
   RewardsTableSingle: RewardsTableSingle,
   RewardsTableLong: RewardsTableLong,
   RewardsTableEmpty: RewardsTableEmpty,
@@ -14777,13 +15288,13 @@ const UseTaskCard = /*#__PURE__*/Object.freeze({
 const ProgressBar_stories = {
   title: "Components/Progress Bar",
 };
-const defaultProps$o = {
+const defaultProps$p = {
   progress: 2,
   goal: 4,
   steps: true,
 };
 const TaxAndPayoutsProgressBar = () => {
-  return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$o, { stageCount: 4, currentStage: 2 }));
+  return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$p, { stageCount: 4, currentStage: 2 }));
 };
 
 const ProgressBar$1 = /*#__PURE__*/Object.freeze({
@@ -15159,35 +15670,35 @@ const UserName = /*#__PURE__*/Object.freeze({
 const WidgetCodeVerification_stories = {
   title: "Components/Widget Code Verification",
 };
-const defaultProps$p = {
+const defaultProps$q = {
   initialiseLoading: false,
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
   emailResent: false,
 };
-const Default$o = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$p } }));
+const Default$o = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$q } }));
 const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$p,
+      ...defaultProps$q,
       initialiseLoading: true,
     },
   } }));
 const Loading$9 = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$p,
+      ...defaultProps$q,
       loading: true,
     },
   } }));
 const CodeResent = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$p,
+      ...defaultProps$q,
       emailResent: true,
     },
   } }));
 const VerificationFailed = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$p,
+      ...defaultProps$q,
       verifyFailed: true,
     },
   } }));
@@ -15205,7 +15716,7 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
 const WidgetEmailVerification_stories = {
   title: "Components/Widget Email Verification",
 };
-const defaultProps$q = {
+const defaultProps$r = {
   email: "",
   error: false,
   loading: false,
@@ -15220,19 +15731,19 @@ const EmailIsPrefilled = () => (index.h("div", null,
     index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
   index.h("sqm-email-verification", { demoData: {
       states: {
-        ...defaultProps$q,
+        ...defaultProps$r,
         email: "test@example.com",
       },
     } })));
 const Loading$a = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       initialLoading: true,
     },
   } }));
 const SaveLoading = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       loading: true,
     },
   } }));
@@ -15243,19 +15754,19 @@ const WithHeader$1 = () => (index.h("div", null,
     index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
   index.h("sqm-email-verification", { demoData: {
       states: {
-        ...defaultProps$q,
+        ...defaultProps$r,
         email: "test@example.com",
       },
     } })));
 const InvalidEmail = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       error: true,
     },
   } }));
 const SendCodeError = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       sendCodeError: true,
     },
   } }));
@@ -17052,34 +17563,34 @@ const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
 const PayoutStatusAlert_stories = {
   title: "Components/Payout Status Alert",
 };
-const defaultProps$r = {
+const defaultProps$s = {
   error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
   veriffLoading: false,
 };
-const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$r } }));
-const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:REQUIRED" } } }));
-const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:INTERNAL" } } }));
-const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:REVIEW" } } }));
-const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:FAILED" } } }));
-const W9ThresholdReached = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "OVER_W9_THRESHOLD" } } }));
-const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "HOLD" } } }));
-const Loading$c = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, loading: true } } }));
-const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, error: true } } }));
-const NewPayeeReview = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "NEW_PAYEE_REVIEW" } } }));
-const PaymentHoldOnChange = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
+const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$s } }));
+const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:REQUIRED" } } }));
+const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:INTERNAL" } } }));
+const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:REVIEW" } } }));
+const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:FAILED" } } }));
+const W9ThresholdReached = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "OVER_W9_THRESHOLD" } } }));
+const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "HOLD" } } }));
+const Loading$c = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, loading: true } } }));
+const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, error: true } } }));
+const NewPayeeReview = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "NEW_PAYEE_REVIEW" } } }));
+const PaymentHoldOnChange = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
 const BeneficiaryNameInvalid = () => (index.h("sqm-payout-status-alert", { demoData: {
-    states: { ...defaultProps$r, status: "BENEFICIARY_NAME_INVALID" },
+    states: { ...defaultProps$s, status: "BENEFICIARY_NAME_INVALID" },
   } }));
 const BeneficiaryNameMismatch = () => (index.h("sqm-payout-status-alert", { demoData: {
-    states: { ...defaultProps$r, status: "BENEFICIARY_NAME_MISMATCH" },
+    states: { ...defaultProps$s, status: "BENEFICIARY_NAME_MISMATCH" },
   } }));
-const BankTaxNameMismatch = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "BANK_TAX_NAME_MISMATCH" } } }));
+const BankTaxNameMismatch = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "BANK_TAX_NAME_MISMATCH" } } }));
 const WithdrawalSettingsInvalid = () => (index.h("sqm-payout-status-alert", { demoData: {
-    states: { ...defaultProps$r, status: "WITHDRAWAL_SETTINGS_INVALID" },
+    states: { ...defaultProps$s, status: "WITHDRAWAL_SETTINGS_INVALID" },
   } }));
-const PaymentReturned = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "PAYMENT_RETURNED" } } }));
+const PaymentReturned = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "PAYMENT_RETURNED" } } }));
 
 const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -17234,7 +17745,7 @@ const EmailRegistration_stories = {
   // scenario,
   },
 };
-const defaultProps$s = {
+const defaultProps$t = {
   states: {
     error: "",
     loading: false,
@@ -17253,59 +17764,59 @@ const defaultProps$s = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$q = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$s));
+const Default$q = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$t));
 const HasFirstNameLastName = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   content: {
-    ...defaultProps$s.content,
+    ...defaultProps$t.content,
     includeName: true,
   },
 })));
 const WithSlots = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   content: {
-    ...defaultProps$s.content,
+    ...defaultProps$t.content,
     topSlot: index.h("div", null, "Hello this is the top slot"),
     bottomSlot: index.h("div", null, "Hello this is the bottom slot"),
   },
 })));
 const NoBorder$1 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   content: {
-    ...defaultProps$s.content,
+    ...defaultProps$t.content,
     hideBorder: true,
   },
 })));
 const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   content: {
-    ...defaultProps$s.content,
+    ...defaultProps$t.content,
     backgroundColor: "aquamarine",
   },
 })));
 const Loading$d = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   states: {
     error: "",
     loading: true,
   },
 })));
 const Error$c = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
   },
 })));
 const FraudError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   states: {
     error: "FRAUD",
     loading: false,
   },
 })));
 const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$s,
+  ...defaultProps$t,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -17332,7 +17843,7 @@ const EmailRegistration = /*#__PURE__*/Object.freeze({
 const LeadForm_stories = {
   title: "Components/Lead Form",
 };
-const defaultProps$t = {
+const defaultProps$u = {
   states: {
     success: false,
     leadFormState: {},
@@ -17361,21 +17872,21 @@ const defaultProps$t = {
   },
 };
 const successProps$5 = {
-  ...defaultProps$t,
+  ...defaultProps$u,
   states: {
-    ...defaultProps$t.states,
+    ...defaultProps$u.states,
     success: true,
     error: null,
   },
   content: {
-    ...defaultProps$t.content,
+    ...defaultProps$u.content,
     pageLabel: "Refer your friend",
   },
 };
 const errorProps$c = {
-  ...defaultProps$t,
+  ...defaultProps$u,
   states: {
-    ...defaultProps$t.states,
+    ...defaultProps$u.states,
     error: "Something went wrong. Please try again.",
     leadFormState: {
       validationErrors: {
@@ -17387,16 +17898,16 @@ const errorProps$c = {
   },
 };
 const loadingProps$9 = {
-  ...defaultProps$t,
+  ...defaultProps$u,
   states: {
-    ...defaultProps$t.states,
+    ...defaultProps$u.states,
     loading: true,
   },
 };
 const slottedProps$2 = {
-  ...defaultProps$t,
+  ...defaultProps$u,
   content: {
-    ...defaultProps$t.content,
+    ...defaultProps$u.content,
     formData: (index.h("div", null,
       index.h("sqm-lead-input-field", { "field-name": "firstName", "field-label": "First Name", "field-type": "text", "required-field-error-message": "Please enter a first name" }),
       index.h("sqm-lead-input-field", { "field-name": "lastName", "field-label": "Last Name", "field-type": "text", "required-field-error-message": "Please enter a last name" }),
@@ -17404,7 +17915,7 @@ const slottedProps$2 = {
       index.h("sqm-lead-dropdown-field", null))),
   },
 };
-const Default$r = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, defaultProps$t));
+const Default$r = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, defaultProps$u));
 const LeadSubmitSuccess = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, successProps$5));
 const LeadSubmitWithError = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, errorProps$c));
 const LeadSubmitLoading = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, loadingProps$9));
@@ -17435,7 +17946,7 @@ const LeadForm = /*#__PURE__*/Object.freeze({
 const LeadInputField_stories = {
   title: "Components/Lead Form Input Field",
 };
-const defaultProps$u = {
+const defaultProps$v = {
   states: {
     leadFormState: {
       validationErrors: {},
@@ -17453,27 +17964,27 @@ const defaultProps$u = {
     fieldOptional: false,
   },
 };
-const Default$s = () => index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u));
-const WithError$1 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
-    ...defaultProps$u.states,
+const Default$s = () => index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v));
+const WithError$1 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
     leadFormState: {
-      ...defaultProps$u.states.leadFormState,
+      ...defaultProps$v.states.leadFormState,
       validationErrors: {
         firstName: "Please enter a first name",
       },
     },
   } })));
-const Disabled$2 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
-    ...defaultProps$u.states,
+const Disabled$2 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
     leadFormState: {
-      ...defaultProps$u.states.leadFormState,
+      ...defaultProps$v.states.leadFormState,
       disabled: true,
     },
   } })));
-const WithInitialValue = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
-    ...defaultProps$u.states,
+const WithInitialValue = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
     leadFormState: {
-      ...defaultProps$u.states.leadFormState,
+      ...defaultProps$v.states.leadFormState,
       initialData: {
         firstName: "Jane",
       },
@@ -17492,7 +18003,7 @@ const LeadInputField = /*#__PURE__*/Object.freeze({
 const LeadFormDropdownField_stories = {
   title: "Components/Lead Form Dropdown Field",
 };
-const defaultProps$v = {
+const defaultProps$w = {
   states: {
     leadFormState: {
       validationErrors: {},
@@ -17515,35 +18026,35 @@ const defaultProps$v = {
     ],
   },
 };
-const Default$t = () => index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v));
-const Multiple = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { content: { ...defaultProps$v.content, multiple: true } })));
-const WithError$2 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
-    ...defaultProps$v.states,
+const Default$t = () => index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w));
+const Multiple = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { content: { ...defaultProps$w.content, multiple: true } })));
+const WithError$2 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
     leadFormState: {
-      ...defaultProps$v.states.leadFormState,
+      ...defaultProps$w.states.leadFormState,
       validationErrors: {
         country: "Please select a country",
       },
     },
   } })));
-const Disabled$3 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
-    ...defaultProps$v.states,
+const Disabled$3 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
     leadFormState: {
-      ...defaultProps$v.states.leadFormState,
+      ...defaultProps$w.states.leadFormState,
       disabled: true,
     },
   } })));
-const Loading$e = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
-    ...defaultProps$v.states,
+const Loading$e = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
     leadFormState: {
-      ...defaultProps$v.states.leadFormState,
+      ...defaultProps$w.states.leadFormState,
       loading: true,
     },
   } })));
-const WithInitialValue$1 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
-    ...defaultProps$v.states,
+const WithInitialValue$1 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
     leadFormState: {
-      ...defaultProps$v.states.leadFormState,
+      ...defaultProps$w.states.leadFormState,
       initialData: {
         country: "Canada",
       },
@@ -17564,7 +18075,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
 const LeadCheckboxField_stories = {
   title: "Components/Lead Checkbox Field",
 };
-const defaultProps$w = {
+const defaultProps$x = {
   states: {
     leadFormState: {
       validationErrors: {},
@@ -17578,28 +18089,28 @@ const defaultProps$w = {
     errorMessage: "{checkboxLabel} Must be checked",
   },
 };
-const Default$u = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w))));
-const CustomLabel$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { content: {
-    ...defaultProps$w.content,
+const Default$u = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x))));
+const CustomLabel$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x, { content: {
+    ...defaultProps$x.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$d = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
-    ...defaultProps$w.states,
+const Error$d = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x, { states: {
+    ...defaultProps$x.states,
     leadFormState: {
       validationErrors: {
         terms: "{checkboxLabel} Must be checked",
       },
     },
   } }))));
-const CustomError$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
-    ...defaultProps$w.states,
+const CustomError$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x, { states: {
+    ...defaultProps$x.states,
     leadFormState: {
       validationErrors: {
         terms: "{checkboxLabel} Must be checked",
       },
     },
   }, content: {
-    ...defaultProps$w.content,
+    ...defaultProps$x.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
 
@@ -20642,6 +21153,10 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
+  TaxAndCashRewardsTableCell,
+  TaxAndCashRewardsTable,
+  TaxAndCashReferralTableRewardsCell,
+  TaxAndCashReferralTable$1,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {