npm - @saasquatch/mint-components - Versions diffs - 1.16.0-9 → 2.0.0-1 - Mend

@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (984) hide show

package/dist/cjs/sqm-referral-table_11.cjs.entry.js CHANGED Viewed

@@ -2,21 +2,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-8bba5b3a.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-0d3ac0fb.js');
 const JSS = require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-a9f4ba75.js');
-const reRender = require('./re-render-b324deab.js');
-const useChildElements = require('./useChildElements-1b35d945.js');
-const luxon = require('./luxon-2926d85f.js');
-const mockRewardData = require('./mockRewardData-7815f10f.js');
-const useReferralTable = require('./useReferralTable-7c3f9600.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+require('./mixins-4761d472.js');
+const GenericTableView = require('./GenericTableView-a9845e80.js');
+const reRender = require('./re-render-d516138a.js');
+const useChildElements = require('./useChildElements-966c9041.js');
+const luxon = require('./luxon-949beaf2.js');
+const mockRewardData = require('./mockRewardData-df37c8a3.js');
+const useReferralTable = require('./useReferralTable-90d4d6e9.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 const mockReferralData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());
@@ -196,7 +196,7 @@ const ReferralTable = class {
     this.smBreakpoint = 599;
     /** @uiName Tablet breakpoint  */
     this.mdBreakpoint = 799;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -219,7 +219,7 @@ function LoadingRow() {
   return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 5 }, index.h("sl-skeleton", null))));
 }
 function useReferralTableDemo(props, emptyElement, loadingElement) {
-  const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
+  const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
@@ -229,7 +229,7 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
     page: 0,
   });
   const tick = reRender.useRerenderListener();
-  const mockData = stencilHooks_module.useMemo(() => { var _a; return ((_a = props.demoData) === null || _a === void 0 ? void 0 : _a.mockData) || mockReferralData(props.perPage); }, [props.perPage]);
+  const mockData = domContextHooks_module.useMemo(() => { var _a; return ((_a = props.demoData) === null || _a === void 0 ? void 0 : _a.mockData) || mockReferralData(props.perPage); }, [props.perPage]);
   const components = useChildElements.useChildElements();
   async function getComponentData(components) {
     var _a;
@@ -292,7 +292,7 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
     // Set the content to render and finish loading components
     setContent({ columns, loading: false, page: 0 });
   }
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     setContent({ loading: true });
     (mockData === null || mockData === void 0 ? void 0 : mockData.data) && getComponentData(components);
   }, [mockData === null || mockData === void 0 ? void 0 : mockData.data, components, tick]);
@@ -332,7 +332,7 @@ const ReferralTableCell = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -343,7 +343,7 @@ const ReferralTableCell = class {
 const ReferralTableGenericColumn = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(_) {
@@ -364,7 +364,7 @@ const ReferralTableDateCell = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     this.locale = "en";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -404,7 +404,7 @@ const ReferralTableDateColumn = class {
      * "Date User Modified"]
      */
     this.dateShown = "dateConverted";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
@@ -448,9 +448,7 @@ const ReferralTableRewardsCell = class {
         "flex-wrap": "wrap",
       },
       Details: {
-        "padding-bottom": "var(--sl-spacing-small)",
         "max-width": "500px",
-        // "padding-right": "var(--sl-spacing-x-small)",
         "&::part(header)": {
           padding: "var(--sl-spacing-x-small)",
           cursor: `${this.hideDetails ? "default" : "pointer"}`,
@@ -459,6 +457,7 @@ const ReferralTableRewardsCell = class {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
         },
         "&::part(base)": {
+          border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
           opacity: "1",
         },
         "&::part(summary-icon)": {
@@ -466,7 +465,6 @@ const ReferralTableRewardsCell = class {
         },
         "&::part(summary-icon[open])": {
           transform: "rotate(-90deg)",
-          background: "red",
         },
       },
       BadgeContainer: {
@@ -477,23 +475,64 @@ const ReferralTableRewardsCell = class {
       BoldText: {
         "font-weight": "var(--sl-font-weight-semibold)",
       },
-      StatusBadge: {
+      RedeemBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
+          background: "var(--sqm-informative-color-icon)",
+          color: "var(--sl-color-white)",
         },
       },
-      RedeemBadge: {
+      DangerBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
-          background: "var(--sl-color-blue-600)",
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-danger-color-icon)",
+          color: "var(--sl-color-white)",
+        },
+      },
+      WarningBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-warning-color-icon)",
+          color: "var(--sl-color-white)",
+        },
+      },
+      SuccessBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-success-color-icon)",
+          color: "var(--sl-color-white)",
         },
       },
     };
     const sheet = JSS.createStyleSheet(style);
     const styleString = sheet.toString();
+    const getBadgeCSSClass = (badgeType) => {
+      switch (badgeType) {
+        case "primary":
+          return sheet.classes.RedeemBadge;
+        case "danger":
+          return sheet.classes.DangerBadge;
+        case "success":
+          return sheet.classes.SuccessBadge;
+        case "warning":
+        case "info":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.WarningBadge;
+      }
+    };
     const getState = (reward, taxConnection) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       const possibleStates = [
@@ -596,19 +635,13 @@ const ReferralTableRewardsCell = class {
       }, {
         status: state,
       });
-      return (index.h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, index.h("style", { type: "text/css" }, styleString), index.h("div", { slot: "summary", class: sheet.classes.DetailsContainer }, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, index.h("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)), index.h("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (index.h("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, global.intl.formatMessage({
+      return (index.h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, index.h("style", { type: "text/css" }, styleString), index.h("div", { slot: "summary", class: sheet.classes.DetailsContainer }, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, index.h("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)), index.h("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (index.h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, global.intl.formatMessage({
         id: "pendingForText",
         defaultMessage: this.pendingForText,
       }, {
         status: badgeText,
         date: getTimeDiff(reward.dateScheduledFor),
-      }))) : (index.h("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (index.h("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), index.h("div", null, state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText, " ", index.h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.luxon.DateTime.fromMillis(reward.referral.dateModerated)
+      }))) : (index.h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (index.h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), index.h("div", null, state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText, " ", index.h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.luxon.DateTime.fromMillis(reward.referral.dateModerated)
         .setLocale(utils.luxonLocale(this.locale))
         .toLocaleString(luxon.luxon.DateTime.DATE_MED))))), state === "PAYOUT_APPROVED" && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText))), state === "PAYOUT_FAILED" && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText))), state === "PAYOUT_CANCELLED" && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText))), state === "PENDING_TAX_REVIEW" && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText))), state === "PENDING_NEW_TAX_FORM" && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText))), state === "PENDING_TAX_SUBMISSION" && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText))), state === "PENDING_PARTNER_CREATION" && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText))), state === "DENIED" && ((_b = reward.referral) === null || _b === void 0 ? void 0 : _b.dateModerated) && (index.h("div", null, index.h(sqmTextSpanView.TextSpanView, { type: "p" }, statusText, " ", index.h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.luxon.DateTime.fromMillis(reward.referral.dateModerated)
         .setLocale(utils.luxonLocale(this.locale))
@@ -683,7 +716,7 @@ const ReferralTableRewardsColumn = class {
      * @default
      */
     this.hideDetails = false;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
@@ -712,17 +745,54 @@ const ReferralTableRewardsColumn = class {
 };
 const style = {
-  Badge: {
+  SubText: {
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sqm-text-subdued)",
+    margin: "0",
+  },
+  RedeemBadge: {
     "&::part(base)": {
       fontSize: "var(--sl-font-size-small)",
       padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
       whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
-  SubText: {
-    fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
-    margin: "0",
+  DangerBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sl-color-white)",
+    },
   },
 };
 const sheet = JSS.createStyleSheet(style);
@@ -732,6 +802,8 @@ const ReferralTableStatusCell = class {
     index.registerInstance(this, hostRef);
   }
   render() {
+    const sheet = JSS.createStyleSheet(style);
+    const styleString = sheet.toString();
     const getBadgeType = (fraudStatus) => {
       if (fraudStatus === "PENDING")
         return "warning";
@@ -741,7 +813,22 @@ const ReferralTableStatusCell = class {
         return "success";
       return "warning";
     };
-    return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: sheet.classes.Badge }, this.statusText), this.statusSubText ? (index.h("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
+    const getBadgeCSSClass = (badgeType) => {
+      switch (badgeType) {
+        case "primary":
+          return sheet.classes.RedeemBadge;
+        case "danger":
+          return sheet.classes.DangerBadge;
+        case "success":
+          return sheet.classes.SuccessBadge;
+        case "warning":
+        case "info":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.WarningBadge;
+      }
+    };
+    return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: getBadgeCSSClass(getBadgeType(this.fraudStatus)) }, this.statusText), this.statusSubText ? (index.h("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
   }
 };
@@ -776,7 +863,7 @@ const ReferralTableStatusColumn = class {
      * @uiName Denied status sub-text
      */
     this.deniedStatusSubText = "Detected self-referral";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data) {
@@ -848,7 +935,7 @@ const ReferralTableUserColumn = class {
      * @uiName Deleted user text
      */
     this.deletedUser = "Deleted User";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data) {

package/dist/cjs/sqm-rewards-table-customer-note-cell.cjs.entry.js CHANGED Viewed

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 const RewardTableCustomerNoteCell = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     this.locale = "en";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-rewards-table-customer-note-column.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./index.module-ee84433d.js');
-const reRender = require('./re-render-b324deab.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+require('./index.module-4f54e412.js');
+const reRender = require('./re-render-d516138a.js');
 const RewardTableCustomerNoteColumn = class {
   constructor(hostRef) {
@@ -14,7 +14,7 @@ const RewardTableCustomerNoteColumn = class {
      * @uiName Column title
      */
     this.columnTitle = "Note";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js CHANGED Viewed

@@ -2,22 +2,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-8bba5b3a.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-0d3ac0fb.js');
 const JSS = require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-a9f4ba75.js');
-const reRender = require('./re-render-b324deab.js');
-const useChildElements = require('./useChildElements-1b35d945.js');
-const luxon = require('./luxon-2926d85f.js');
-const mockRewardData = require('./mockRewardData-7815f10f.js');
-const useReferralTable = require('./useReferralTable-7c3f9600.js');
+require('./mixins-4761d472.js');
+const GenericTableView = require('./GenericTableView-a9845e80.js');
+const reRender = require('./re-render-d516138a.js');
+const useChildElements = require('./useChildElements-966c9041.js');
+const luxon = require('./luxon-949beaf2.js');
+const mockRewardData = require('./mockRewardData-df37c8a3.js');
+const useReferralTable = require('./useReferralTable-90d4d6e9.js');
-const debug = stencilHooks_module.browser("sq:useRewardsTable");
+const debug = domContextHooks_module.browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = index_module.dist.gql `
   query getRewards(
@@ -181,7 +181,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
         : { programId_eq: programId }
       : {}),
   };
-  const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
+  const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
@@ -219,7 +219,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     // Set the content to render and finish loading components
     setContent({ columns, loading: false, page: states.currentPage });
   }
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     setContent({ loading: true });
     rewardsData && getComponentData(components);
   }, [rewardsData, components, tick]);
@@ -313,7 +313,7 @@ const RewardsTable = class {
     this.smBreakpoint = 599;
     /** @uiName Tablet breakpoint  */
     this.mdBreakpoint = 799;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -336,7 +336,7 @@ function LoadingRow() {
   return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 5 }, index.h("sl-skeleton", null))));
 }
 function useRewardsTableDemo(props, emptyElement, loadingElement) {
-  const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
+  const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
@@ -346,7 +346,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     page: 0,
   });
   const tick = reRender.useRerenderListener();
-  const { data } = stencilHooks_module.useMemo(() => { var _a; return ((_a = props.demoData) === null || _a === void 0 ? void 0 : _a.mockData) || mockRewardData.mockRewardData(props.perPage); }, [props.perPage]);
+  const { data } = domContextHooks_module.useMemo(() => { var _a; return ((_a = props.demoData) === null || _a === void 0 ? void 0 : _a.mockData) || mockRewardData.mockRewardData(props.perPage); }, [props.perPage]);
   const components = useChildElements.useChildElements();
   async function getComponentData(components) {
     let componentData = data;
@@ -391,7 +391,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     // Set the content to render and finish loading components
     setContent({ columns, loading: false, page: 0 });
   }
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     setContent({ loading: true });
     data && getComponentData(components);
   }, [data, components, tick]);
@@ -431,7 +431,7 @@ const RewardTableDateCell = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     this.locale = "en";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -461,7 +461,7 @@ const RewardTableDateColumn = class {
      * @uiEnumNames ["Date Given", "Date Expires", "Date Cancelled", "Date Redeemed", "Date Scheduled For"]
      */
     this.dateShown = "dateGiven";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
@@ -587,11 +587,11 @@ const RewardTableRewardsCell = class {
             height: "3px",
             width: "100%",
             margin: "var(--sl-spacing-xx-small) 0",
-            background: "var(--sl-color-neutral-200)",
+            background: "var(--sqm-border-color)",
             "&:after": {
               content: '""',
               display: "block",
-              background: "var(--sl-color-primary-300)",
+              background: "var(--sqm-accent-color-icon)",
               borderRadius: "100px",
               width: `${progress}%`,
               height: "100%",
@@ -607,11 +607,11 @@ const RewardTableRewardsCell = class {
           },
           Text: {
             fontSize: "var(--sl-font-size-medium)",
-            color: "var(--sl-color-gray-800)",
+            color: "var(--sqm-text)",
           },
           Subtext: {
             fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-neutral-500)",
+            color: "var(--sqm-text-subdued)",
           },
         };
         const sheet = JSS.createStyleSheet(style);
@@ -643,7 +643,7 @@ const RewardsTableColumn = class {
      * @uiName Copied fuel tank text
      */
     this.copyText = "Copied!";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
@@ -685,7 +685,7 @@ const RewardTableSourceCell = class {
       var _a;
       const rewardExchange = (index.h("div", null, index.h("span", { style: {
           fontSize: "var(--sl-font-size-small)",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text-subdued)",
         } }, this.rewardExchangeText), index.h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
         _a.prettyRedeemedCredit, " → ", reward.prettyValue));
       return reward.exchangedRewardRedemptionTransaction.prettyRedeemedCredit
@@ -709,10 +709,10 @@ const RewardTableSourceCell = class {
     };
     const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
       this.reward.rewardSource === "REFERRED" ? (this.reward.referral === null ? (index.h("p", { style: {
-        color: "var(--sl-color-gray-400)",
+        color: "var(--sqm-text-subdued)",
       } }, this.deletedReferralText)) : (index.h("div", null, index.h("div", { style: {
         fontSize: "var(--sl-font-size-small)",
-        color: "var(--sl-color-neutral-500)",
+        color: "var(--sqm-text-subdued)",
       } }, global.intl.formatMessage({
       id: "referralText",
       defaultMessage: this.referralText,
@@ -762,7 +762,7 @@ const RewardTableUserColumn = class {
      * @uiWidget textArea
      */
     this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
@@ -795,14 +795,47 @@ const style$1 = {
   },
   RedeemBadge: {
     "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  DangerBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
       fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
       padding: "4px 8px",
-      background: "var(--sl-color-blue-600)",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
   Date: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
 };
@@ -950,9 +983,23 @@ const RewardTableStatusCell = class {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    return (index.h("div", { style: { display: "contents" } }, index.h("style", { type: "text/css" }, styleString$1), index.h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-        ? sheet$1.classes.RedeemBadge
-        : sheet$1.classes.Badge }, statusText), index.h("p", { class: sheet$1.classes.Date }, fraudStatusText ||
+    // @ts-ignore
+    const getBadgeCSSClass = (badgeType) => {
+      switch (rewardStatus) {
+        case "AVAILABLE":
+          return sheet$1.classes.SuccessBadge;
+        case "REDEEMED":
+        case "PAYOUT_APPROVED":
+          return sheet$1.classes.RedeemBadge;
+        case "PENDING":
+        case "PENDING_REVIEW":
+          return sheet$1.classes.WarningBadge;
+        default:
+          return sheet$1.classes.DangerBadge;
+      }
+    };
+    const badgeCSSClass = getBadgeCSSClass();
+    return (index.h("div", { style: { display: "contents" } }, index.h("style", { type: "text/css" }, styleString$1), index.h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText), index.h("p", { class: sheet$1.classes.Date }, fraudStatusText ||
       pendingReasons ||
       this.getPayoutStatusText(rewardStatus) ||
       date)));
@@ -996,9 +1043,9 @@ const RewardTableStatusColumn = class {
      */
     this.expiryText = "Expires on ";
     /**
-     * Displayed when a reward is pending due to W9 compliance.
+     * Displayed when a reward is pending due to W-9 compliance.
      *
-     * @uiName W9 pending text
+     * @uiName W-9 pending text
      */
     this.pendingUsTax = "W-9 required";
     /**
@@ -1067,7 +1114,7 @@ const RewardTableStatusColumn = class {
      * @uiName Payout approved text
      */
     this.payoutApproved = "Reward was scheduled for payment based on your settings, barring any account holds.";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {

package/dist/cjs/sqm-route.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const SqmRoute = class {
   constructor(hostRef) {