@saasquatch/mint-components 1.5.0-24 → 1.5.0-25

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

@@ -6436,7 +6436,7 @@ function useReferraltableDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 function EmptySlot() {
-  return (index.h("slot", { name: "empty" }, index.h("div", { style: { width: "100%" } }, index.h("sqm-text", null, index.h("h3", { style: { color: "#777777" } }, "No Referrals Yet")))));
+  return (index.h("slot", { name: "empty" }, index.h("div", { style: { width: "100%" } }, index.h("sqm-text", null, index.h("h3", { style: { color: "#777777", textAlign: "center" } }, "No Referrals Yet")))));
 }
 
 const ReferralTableCell = class {
@@ -15848,88 +15848,73 @@ function RewardsTableView(props) {
   const { show } = states;
   const hiddenCols = data.hiddenColumns.split(",").map(Number);
   console.log(props);
-  const mobile = `@media (max-width: ${data.tabletBreakpoint}px)`;
+  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = "@media (min-width: " +
-    data.phoneBreakpoint +
+    data.smBreakpoint +
     "px) and (max-width: " +
-    data.tabletBreakpoint +
+    data.mdBreakpoint +
     "px)";
   const style = {
-    THead: {
-      padding: "var(--sl-spacing-small)",
-      paddingLeft: "0",
-      textAlign: "left",
-      [mobile]: {
-        display: "none",
+    Table: {
+      borderCollapse: "collapse",
+      width: "100%",
+      "& thead": {
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
+        textAlign: "left",
+        fontWeight: "var(--sl-font-weight-normal)",
       },
-    },
-    TCell: {
-      padding: "var(--sl-spacing-small)",
-      paddingLeft: "0",
-      [mobile]: {
-        display: "block",
-        padding: "0",
-        marginBottom: "var(--sl-spacing-medium)",
-        "&:first-child": {
-          textAlign: "left",
-        },
-        "&:before": {
-          content: "attr(data-label)",
-          float: "left",
-          width: "40%",
-          marginBottom: "1px",
-        },
-        "&:last-child": {
-          marginBottom: "0",
-        },
+      "& tr": {},
+      "& td": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
       },
-    },
-    TCellHidden: {
-      padding: "var(--sl-spacing-small)",
-      paddingLeft: "0",
       [mobile]: {
-        display: "block",
-        padding: "0",
-        marginBottom: "var(--sl-spacing-medium)",
-        "&:first-child": {
-          textAlign: "left",
+        "& thead": {
+          display: "none",
         },
-        "&:before": {
-          content: "",
-          float: "left",
-          width: "40%",
-          marginBottom: "1px",
+        "& tr": {
+          display: "block",
+          background: "#FFFFFF",
+          border: "1px solid var(--sl-color-neutral-200)",
+          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "var(--sl-border-radius-medium)",
+          padding: "var(--sl-spacing-medium)",
+          color: "var(--sl-color-neutral-500)",
+          fontSize: "var(--sl-font-size-small)",
+          marginBottom: "var(--sl-spacing-large)",
         },
-        "&:last-child": {
-          marginBottom: "0",
+        "& td": {
+          display: "block",
+          borderTop: "none",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-medium)",
+          ".hidden::before": {
+            content: "",
+          },
+          "&:first-child": {
+            textAlign: "left",
+          },
+          "&:before": {
+            content: "attr(data-label)",
+            float: "left",
+            width: "40%",
+            marginBottom: "5px",
+          },
+          "&:last-child": {
+            marginBottom: "0",
+          },
         },
       },
-    },
-    TRow: {
-      "border-top": "1px solid #EAEAEA",
-      [mobile]: {
-        display: "block",
-        background: "#FFFFFF",
-        border: "1px solid #E0E0E0",
-        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
-        borderRadius: "4px",
-        padding: "var(--sl-spacing-medium)",
-        color: "var(--sl-color-neutral-500)",
-        fontSize: "var(--sl-font-size-small)",
-        marginBottom: "var(--sl-spacing-large)",
-      },
-    },
-    TBody: {
       [tablet]: {
-        display: "grid",
-        gridTemplateColumns: "0.5fr 0.5fr",
-        gap: "25px",
+        "& tbody": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          gap: "25px",
+        },
       },
     },
-    Table: {
-      "border-collapse": "collapse",
-      width: "100%",
-    },
     ButtonContainer: {
       display: "flex",
       "justify-content": "flex-end",
@@ -15944,15 +15929,13 @@ function RewardsTableView(props) {
     index.h("style", { type: "text/css" }, styleString),
     index.h("table", { class: sheet.classes.Table },
       data.textOverrides.showLabels && (index.h("thead", null,
-        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (index.h("th", { class: sheet.classes.THead }, column)))))),
-      index.h("tbody", { class: sheet.classes.TBody },
+        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (index.h("th", null, column)))))),
+      index.h("tbody", null,
         show === "loading" && elements.loadingElement,
         show === "empty" && elements.emptyElement,
-        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (index.h("tr", { class: sheet.classes.TRow, style: {
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (index.h("tr", { style: {
             borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
-          }, part: "table-row" }, row.map((cell, j) => (index.h("td", { class: hiddenCols.includes(j)
-            ? sheet.classes.TCellHidden
-            : sheet.classes.TCell, "data-label": columns[j] + ":" }, cell))))))))),
+          }, part: "table-row" }, row.map((cell, j) => (index.h("td", { class: hiddenCols.includes(j) ? "hidden" : "", "data-label": columns[j] + ":" }, cell))))))))),
     index.h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
       index.h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
       index.h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
@@ -16117,8 +16100,8 @@ function useRewardsTable(props, emptyElement, loadingElement) {
         moreLabel: props.moreLabel,
       },
       hiddenColumns: props.hiddenColumns,
-      phoneBreakpoint: props.smBreakpoint,
-      tabletBreakpoint: props.mdBreakpoint,
+      smBreakpoint: props.smBreakpoint,
+      mdBreakpoint: props.mdBreakpoint,
     },
     elements: {
       columns: content.columns,
@@ -16185,9 +16168,9 @@ const RewardsTable = class {
     /** @uiName Hide Columns (Mobile View)  */
     this.hiddenColumns = "0";
     /** @uiName Hide Columns (Mobile View)  */
-    this.smBreakpoint = 499;
+    this.smBreakpoint = 599;
     /** @uiName Hide Columns (Mobile View)  */
-    this.mdBreakpoint = 999;
+    this.mdBreakpoint = 899;
     _extends.h$1(this);
   }
   disconnectedCallback() { }
@@ -16382,17 +16365,15 @@ const RewardTableRewardsCell = class {
         })));
         const style = {
           Progress: {
-            background: "#e0e0e0",
-            borderRadius: "4px",
             height: "3px",
-            width: "80px",
-            marginTop: "6px",
-            marginBottom: "6px",
+            width: "100px",
+            margin: "var(--sl-spacing-xx-small) 0",
+            background: "var(--sl-color-neutral-200)",
             "&:after": {
               content: '""',
               display: "block",
-              background: "#222222",
-              borderRadius: "4px",
+              background: "var(--sl-color-neutral-1000)",
+              borderRadius: "100px",
               width: `${progress}%`,
               height: "100%",
             },
@@ -16406,15 +16387,23 @@ const RewardTableRewardsCell = class {
             overflow: "hidden",
             textOverflow: "ellipsis",
           },
+          RewardAmount: {
+            fontSize: "var(--sl-font-size-medium)",
+            fontWeight: "var(--sl-font-weight-semibold)",
+          },
+          RewardRemain: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-neutral-500)",
+          },
         };
         jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
         const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
         const styleString = sheet.toString();
-        return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("div", { class: sheet.classes.Container }, index.h("span", { style: { color: "#232323" } }, pimpedPrettyValue), " ", index.h("br", null), " ", index.h("div", { class: sheet.classes.Progress }), progressBarSubtext)));
+        return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("div", { class: sheet.classes.Container }, index.h("span", { class: sheet.classes.RewardAmount }, pimpedPrettyValue + " "), index.h("br", null), " ", index.h("div", { class: sheet.classes.Progress }), index.h("span", { class: sheet.classes.RewardRemain }, progressBarSubtext))));
       }
-      return index.h("span", { style: { color: "#232323" } }, pimpedPrettyValue);
+      return index.h("span", null, pimpedPrettyValue);
     };
-    return (index.h("div", { style: { display: "contents" } }, index.h("style", { type: "text/css" }, styleString), index.h(sqmTextSpanView.TextSpanView, { type: "p" }, index.h("span", { class: sheet.classes.BoldText }, index.h(RewardValue, { reward: this.reward })))));
+    return (index.h("div", { style: { display: "contents" } }, index.h("style", { type: "text/css" }, styleString), index.h(sqmTextSpanView.TextSpanView, { type: "p" }, index.h(RewardValue, { reward: this.reward }))));
   }
 };
 
@@ -16458,12 +16447,17 @@ const RewardTableSourceCell = class {
       return `${user.firstName} ${user.lastName}`;
     };
     const source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
-      this.reward.rewardSource === "REFERRED" ? (index.h("div", null, global.intl.formatMessage({
+      this.reward.rewardSource === "REFERRED" ? (index.h("div", null, index.h("div", { style: {
+        fontSize: "var(--sl-font-size-small)",
+        color: "var(--sl-color-neutral-500)",
+      } }, global.intl.formatMessage({
       id: "referralText",
       defaultMessage: this.referralText,
     }, {
       rewardSource: this.reward.rewardSource,
-    }), index.h("br", null), index.h("b", null, getFullName(this.reward.referral.referredUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (index.h(RewardExchangeBadge, { reward: this.reward })) : (index.h(RewardSource, { reward: this.reward }));
+    })), index.h("div", { style: {
+        fontSize: "var(--sl-font-size-medium)",
+      } }, getFullName(this.reward.referral.referredUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (index.h(RewardExchangeBadge, { reward: this.reward })) : (index.h(RewardSource, { reward: this.reward }));
     return index.h(sqmTextSpanView.TextSpanView, { type: "p" }, source());
   }
 };
@@ -16548,6 +16542,22 @@ const RewardTableStatusCell = class {
   }
   render() {
     var _a;
+    const style = {
+      Badge: {
+        "&::part(base)": {
+          fontSize: "var(--sl-font-size-small)",
+          padding: "4px 8px",
+        },
+      },
+      Date: {
+        fontSize: "var(--sl-font-size-small)",
+        margin: "0",
+        color: "var(--sl-color-neutral-500)",
+      },
+    };
+    jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+    const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+    const styleString = sheet.toString();
     const rewardStatus = this.rewardStatus(this.reward);
     const statusText = global.intl.formatMessage({ id: "statusMessage", defaultMessage: this.statusText }, {
       status: rewardStatus,
@@ -16565,7 +16575,7 @@ const RewardTableStatusCell = class {
       "";
     const date = dateShown &&
       `${this.reward.dateExpires ? this.expiryText : ""}${(_a = luxon.DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.toLocaleString(luxon.DateTime.DATE_MED)}`;
-    return (index.h("div", { style: { display: "contents" } }, index.h("sl-badge", { type: badgeType, pill: true }, statusText), index.h("p", { style: { fontSize: "90%", marginTop: "0" } }, date)));
+    return (index.h("div", { style: { display: "contents" } }, index.h("style", { type: "text/css" }, styleString), index.h("sl-badge", { type: badgeType, pill: true, class: sheet.classes.Badge }, statusText), index.h("p", { class: sheet.classes.Date }, date)));
   }
 };
 
@@ -22472,7 +22482,6 @@ function TaskCardView(props) {
       "& .main": {
         position: "relative",
         boxSizing: "border-box",
-        // minWidth: "347px",
         background: "var(--sl-color-neutral-0)",
         border: "1px solid var(--sl-color-neutral-200)",
         borderRadius: "var(--sl-border-radius-medium)",
@@ -27350,6 +27359,73 @@ const PortalContainer$1 = /*#__PURE__*/Object.freeze({
   FullWidth: FullWidth
 });
 
+const RewardsTableCell_stories = {
+  title: "Components/Rewards Table Cell",
+};
+const rewardsData$1 = {
+  id: "61c100117a82a376d8804166",
+  type: "CREDIT",
+  value: 5,
+  unit: "TESTUNIT",
+  name: null,
+  dateGiven: 1640038417468,
+  dateExpires: null,
+  dateCancelled: null,
+  dateRedeemed: null,
+  dateScheduledFor: null,
+  fuelTankCode: null,
+  fuelTankType: null,
+  currency: null,
+  prettyValue: "5 Salmons",
+  prettyValueNumber: "5",
+  prettyAvailableNumber: "5",
+  prettyRedeemedNumber: "0",
+  statuses: ["AVAILABLE"],
+  globalRewardKey: null,
+  rewardSource: "MANUAL",
+  prettyRedeemedCredit: "0 Salmons",
+  prettyAssignedCredit: "5 Salmons",
+  prettyAvailableValue: "5 Salmons",
+  exchangedRewardRedemptionTransaction: {
+    id: "61c100117a82a376d8804156",
+    creditRedeemed: 5,
+    prettyRedeemedCredit: "5 Points",
+    unit: "POINT",
+    dateRedeemed: 1640038417173,
+    redeemedRewards: null,
+    exchangedRewards: null,
+  },
+  referral: null,
+  rewardRedemptionTransactions: {
+    data: null,
+  },
+};
+const RewardsCell$1 = () => {
+  return (index.h("sqm-rewards-table-rewards-cell", { reward: rewardsData$1 }));
+};
+const SourceCell = () => {
+  return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData$1 }));
+};
+const StatusCell$1 = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData$1 }));
+};
+const DateCell$1 = () => {
+  return (index.h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
+};
+const EmptyCell$2 = () => {
+  return index.h("sqm-rewards-table-date-cell", null);
+};
+
+const RewardsTableCell = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': RewardsTableCell_stories,
+  RewardsCell: RewardsCell$1,
+  SourceCell: SourceCell,
+  StatusCell: StatusCell$1,
+  DateCell: DateCell$1,
+  EmptyCell: EmptyCell$2
+});
+
 /**
  *
  * Themes
@@ -30039,7 +30115,8 @@ const stories = [
   ProgramExplainerStep,
   BrandStories,
   CardFeed,
-  PortalContainer$1
+  PortalContainer$1,
+  RewardsTableCell,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -237,5 +237,5 @@ function EmptySlot() {
   return (h("slot", { name: "empty" },
     h("div", { style: { width: "100%" } },
       h("sqm-text", null,
-        h("h3", { style: { color: "#777777" } }, "No Referrals Yet")))));
+        h("h3", { style: { color: "#777777", textAlign: "center" } }, "No Referrals Yet")))));
 }

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -0,0 +1,57 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Rewards Table Cell",
+};
+const rewardsData = {
+  id: "61c100117a82a376d8804166",
+  type: "CREDIT",
+  value: 5,
+  unit: "TESTUNIT",
+  name: null,
+  dateGiven: 1640038417468,
+  dateExpires: null,
+  dateCancelled: null,
+  dateRedeemed: null,
+  dateScheduledFor: null,
+  fuelTankCode: null,
+  fuelTankType: null,
+  currency: null,
+  prettyValue: "5 Salmons",
+  prettyValueNumber: "5",
+  prettyAvailableNumber: "5",
+  prettyRedeemedNumber: "0",
+  statuses: ["AVAILABLE"],
+  globalRewardKey: null,
+  rewardSource: "MANUAL",
+  prettyRedeemedCredit: "0 Salmons",
+  prettyAssignedCredit: "5 Salmons",
+  prettyAvailableValue: "5 Salmons",
+  exchangedRewardRedemptionTransaction: {
+    id: "61c100117a82a376d8804156",
+    creditRedeemed: 5,
+    prettyRedeemedCredit: "5 Points",
+    unit: "POINT",
+    dateRedeemed: 1640038417173,
+    redeemedRewards: null,
+    exchangedRewards: null,
+  },
+  referral: null,
+  rewardRedemptionTransactions: {
+    data: null,
+  },
+};
+export const RewardsCell = () => {
+  return (h("sqm-rewards-table-rewards-cell", { reward: rewardsData }));
+};
+export const SourceCell = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: rewardsData }));
+};
+export const StatusCell = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData }));
+};
+export const DateCell = () => {
+  return (h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
+};
+export const EmptyCell = () => {
+  return h("sqm-rewards-table-date-cell", null);
+};

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-rewards-cell.js

@@ -72,17 +72,15 @@ export class RewardTableRewardsCell {
         })));
         const style = {
           Progress: {
-            background: "#e0e0e0",
-            borderRadius: "4px",
             height: "3px",
-            width: "80px",
-            marginTop: "6px",
-            marginBottom: "6px",
+            width: "100px",
+            margin: "var(--sl-spacing-xx-small) 0",
+            background: "var(--sl-color-neutral-200)",
             "&:after": {
               content: '""',
               display: "block",
-              background: "#222222",
-              borderRadius: "4px",
+              background: "var(--sl-color-neutral-1000)",
+              borderRadius: "100px",
               width: `${progress}%`,
               height: "100%",
             },
@@ -96,6 +94,14 @@ export class RewardTableRewardsCell {
             overflow: "hidden",
             textOverflow: "ellipsis",
           },
+          RewardAmount: {
+            fontSize: "var(--sl-font-size-medium)",
+            fontWeight: "var(--sl-font-weight-semibold)",
+          },
+          RewardRemain: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-neutral-500)",
+          },
         };
         jss.setup(preset());
         const sheet = jss.createStyleSheet(style);
@@ -103,20 +109,18 @@ export class RewardTableRewardsCell {
         return (h("div", null,
           h("style", { type: "text/css" }, styleString),
           h("div", { class: sheet.classes.Container },
-            h("span", { style: { color: "#232323" } }, pimpedPrettyValue),
-            " ",
+            h("span", { class: sheet.classes.RewardAmount }, pimpedPrettyValue + " "),
             h("br", null),
             " ",
             h("div", { class: sheet.classes.Progress }),
-            progressBarSubtext)));
+            h("span", { class: sheet.classes.RewardRemain }, progressBarSubtext))));
       }
-      return h("span", { style: { color: "#232323" } }, pimpedPrettyValue);
+      return h("span", null, pimpedPrettyValue);
     };
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
       h(TextSpanView, { type: "p" },
-        h("span", { class: sheet.classes.BoldText },
-          h(RewardValue, { reward: this.reward })))));
+        h(RewardValue, { reward: this.reward }))));
   }
   static get is() { return "sqm-rewards-table-rewards-cell"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js

@@ -43,14 +43,18 @@ export class RewardTableSourceCell {
     };
     const source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
       this.reward.rewardSource === "REFERRED" ? (h("div", null,
-      intl.formatMessage({
+      h("div", { style: {
+          fontSize: "var(--sl-font-size-small)",
+          color: "var(--sl-color-neutral-500)",
+        } }, intl.formatMessage({
         id: "referralText",
         defaultMessage: this.referralText,
       }, {
         rewardSource: this.reward.rewardSource,
-      }),
-      h("br", null),
-      h("b", null, getFullName(this.reward.referral.referredUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
+      })),
+      h("div", { style: {
+          fontSize: "var(--sl-font-size-medium)",
+        } }, getFullName(this.reward.referral.referredUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
     return h(TextSpanView, { type: "p" }, source());
   }
   static get is() { return "sqm-rewards-table-source-cell"; }

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -1,6 +1,8 @@
 import { Component, h, Prop } from "@stencil/core";
 import { DateTime } from "luxon";
 import { intl } from "../../../global/global";
+import jss from "jss";
+import preset from "jss-preset-default";
 export class RewardTableStatusCell {
   rewardStatus(reward) {
     if (reward.dateCancelled)
@@ -30,6 +32,22 @@ export class RewardTableStatusCell {
   }
   render() {
     var _a;
+    const style = {
+      Badge: {
+        "&::part(base)": {
+          fontSize: "var(--sl-font-size-small)",
+          padding: "4px 8px",
+        },
+      },
+      Date: {
+        fontSize: "var(--sl-font-size-small)",
+        margin: "0",
+        color: "var(--sl-color-neutral-500)",
+      },
+    };
+    jss.setup(preset());
+    const sheet = jss.createStyleSheet(style);
+    const styleString = sheet.toString();
     const rewardStatus = this.rewardStatus(this.reward);
     const statusText = intl.formatMessage({ id: "statusMessage", defaultMessage: this.statusText }, {
       status: rewardStatus,
@@ -48,8 +66,9 @@ export class RewardTableStatusCell {
     const date = dateShown &&
       `${this.reward.dateExpires ? this.expiryText : ""}${(_a = DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.toLocaleString(DateTime.DATE_MED)}`;
     return (h("div", { style: { display: "contents" } },
-      h("sl-badge", { type: badgeType, pill: true }, statusText),
-      h("p", { style: { fontSize: "90%", marginTop: "0" } }, date)));
+      h("style", { type: "text/css" }, styleString),
+      h("sl-badge", { type: badgeType, pill: true, class: sheet.classes.Badge }, statusText),
+      h("p", { class: sheet.classes.Date }, date)));
   }
   static get is() { return "sqm-rewards-table-status-cell"; }
   static get encapsulation() { return "shadow"; }