@saasquatch/mint-components 1.15.0-16 → 1.15.0-160

package/dist/cjs/sqm-portal-registration-form.cjs.entry.js

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-56e48a78.js');
-require('./useRegistrationFormState-7b820f0c.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-4377d849.js');
+require('./mixins-4761d472.js');
+require('./sqm-text-span-view-7a61ae4c.js');
+require('./useRegistrationFormState-bbee6e7b.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
 require('./AsYouType-6788393a.js');
-const usePortalRegistrationForm = require('./usePortalRegistrationForm-f25d89e7.js');
+const usePortalRegistrationForm = require('./usePortalRegistrationForm-75b647fe.js');
 
 const PortalRegistrationForm = class {
   constructor(hostRef) {
@@ -137,7 +137,7 @@ const PortalRegistrationForm = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{sqm-portal-reset-password-view-52fc50fe.js → sqm-portal-reset-password-view-25eb2099.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
+const mixins = require('./mixins-4761d472.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -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 index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-7cbd60cc.js');
 require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-52fc50fe.js');
+require('./mixins-4761d472.js');
+require('./sqm-text-span-view-7a61ae4c.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  const [reset, setReset] = stencilHooks_module.useState(false);
-  const [error, setError] = stencilHooks_module.useState("");
+  const [reset, setReset] = domContextHooks_module.useState(false);
+  const [error, setError] = domContextHooks_module.useState("");
   const [verifyPasswordResetCode, verifyPasswordResetCodeState] = index_module.Je();
   const [resetPassword, resetPasswordState] = index_module.Te();
   const urlParams = new URLSearchParams(index_module.jn.location.search);
@@ -29,7 +29,7 @@ function usePortalResetPassword(props) {
       setError(props.networkErrorMessage);
     }
   };
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     verifyPasswordResetCodeAndHandleResponse();
   }, []);
   const submit = async (event) => {
@@ -189,7 +189,7 @@ const PortalResetPassword = class {
      * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while resetting your password. Please refresh the page and try again.";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{sqm-portal-verify-email-view-4f837226.js → sqm-portal-verify-email-view-1c4e781f.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
+const mixins = require('./mixins-4761d472.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -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 index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.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-7cbd60cc.js');
 require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4f837226.js');
+require('./mixins-4761d472.js');
+require('./sqm-text-span-view-7a61ae4c.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 
 let globalPromise = null;
 function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  const [completed, setCompleted] = stencilHooks_module.useState(false);
-  const [successful, setSuccessful] = stencilHooks_module.useState(false);
+  const [completed, setCompleted] = domContextHooks_module.useState(false);
+  const [successful, setSuccessful] = domContextHooks_module.useState(false);
   const userIdent = index_module.J();
   const [request, { loading, data, errors }] = index_module.an();
   const urlParams = new URLSearchParams(index_module.jn.location.search);
@@ -49,7 +49,7 @@ function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyE
   const login = () => {
     setTimeout(gotoNextPage, 3000);
   };
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     const verify = async () => {
       if (!globalPromise)
         globalPromise = request({ oobCode });
@@ -63,7 +63,7 @@ function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyE
     };
     verify();
   }, []);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (!completed)
       return;
     if (verified && validEmail)
@@ -137,7 +137,7 @@ const PortalVerifyEmail = class {
      * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{sqm-qr-code-view-3da9ed28.js → sqm-qr-code-view-0c3b2f48.js}

@@ -1,8 +1,13 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
-const ErrorView = require('./ErrorView-b2fcf954.js');
+
+const ErrorView = (props) => {
+  return (index.h("sqm-form-message", { type: "error" },
+    index.h("p", { part: "alert-title" }, props.loadingErrorAlertHeader),
+    index.h("p", { part: "alert-description" }, props.loadingErrorAlertDescription)));
+};
 
 const style = {
   DialogContainer: {
@@ -68,7 +73,7 @@ function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCodeText,
       : "center";
   const getCodeContent = (error, qrLink, loading) => {
     if (error) {
-      return (index.h(ErrorView.ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
+      return (index.h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
     }
     else if (loading) {
       return (index.h("sl-skeleton", { className: sheet.classes.LoadingSkeleton, effect: "sheen", style: {
@@ -92,7 +97,7 @@ function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCodeText,
       codeContent,
       index.h("div", { class: sheet.classes.ButtonContainer },
         index.h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
-        index.h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
+        index.h("sl-button", { size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }
 
 exports.QrCodeView = QrCodeView;

package/dist/cjs/sqm-qr-code.cjs.entry.js

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.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-7cbd60cc.js');
 require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-82e8797b.js');
-require('./ErrorView-b2fcf954.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-3da9ed28.js');
+const useReferralCodes = require('./useReferralCodes-11cdf43b.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-0c3b2f48.js');
 
 const ShareLinkQuery = index_module.dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
@@ -36,15 +35,15 @@ function useQRCode(props) {
   const user = index_module.J();
   const engagementMedium = index_module.B();
   const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
-  const [qrLink, setQrUrl] = stencilHooks_module.useState(null);
-  const [error, setError] = stencilHooks_module.useState(false);
-  const [loading, setLoading] = stencilHooks_module.useState(false);
+  const [qrLink, setQrUrl] = domContextHooks_module.useState(null);
+  const [error, setError] = domContextHooks_module.useState(false);
+  const [loading, setLoading] = domContextHooks_module.useState(false);
   const { data, errors, loading: requestLoading, } = index_module.wn(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
   const shareLink = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink;
   const qrPrefix = `${shareLink}?qrCode`;
   const completeLoading = requestLoading || loading;
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (!shareLink)
       return;
     const getQrCode = async () => {
@@ -170,7 +169,7 @@ const QrCode = class {
      * @uiEnumNames ["Left", "Center", "Right"]
      */
     this.alignment = "center";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -180,7 +179,7 @@ const QrCode = class {
   }
 };
 function useDemoQRCode(props) {
-  const [dialogIsOpen, setDialog] = stencilHooks_module.useState(false);
+  const [dialogIsOpen, setDialog] = domContextHooks_module.useState(false);
   return cjs.cjs({
     dialogIsOpen,
     hideTitle: props.hideTitle,

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

@@ -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-19fe8600.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-7cbd60cc.js');
 const JSS = require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-f0e9c531.js');
-const reRender = require('./re-render-b324deab.js');
-const useChildElements = require('./useChildElements-1b35d945.js');
-const luxon = require('./luxon-2926d85f.js');
-const mockRewardData = require('./mockRewardData-272e22d6.js');
-const useReferralTable = require('./useReferralTable-7c3f9600.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.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());
@@ -114,7 +114,7 @@ const getMockData = () => {
           prettyValue: "1 Point",
           statuses: statuses[Math.floor(Math.random() * statuses.length)],
           // statuses: ["PENDING"],
-          // pendingReasons: ["US_TAX", "PAYOUT_CONFIGURATION_MISSING"],
+          // pendingReasons: ["US_TAX", "MISSING_PAYOUT_CONFIGURATION"],
           globalRewardKey: null,
           programRewardKey: "partnerReward",
           meta: {
@@ -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) {
@@ -457,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)": {
@@ -464,7 +465,6 @@ const ReferralTableRewardsCell = class {
         },
         "&::part(summary-icon[open])": {
           transform: "rotate(-90deg)",
-          background: "red",
         },
       },
       BadgeContainer: {
@@ -475,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 = [
@@ -542,7 +583,7 @@ const ReferralTableRewardsCell = class {
         if (!((_l = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _l === void 0 ? void 0 : _l.withdrawalSettings))
           return "PENDING_PARTNER_CREATION";
       }
-      if ((_m = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _m === void 0 ? void 0 : _m.includes("PAYOUT_CONFIGURATION_MISSING")) {
+      if ((_m = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _m === void 0 ? void 0 : _m.includes("MISSING_PAYOUT_CONFIGURATION")) {
         return "PENDING_PARTNER_CREATION";
       }
       if (reward.statuses.length === 1)
@@ -592,19 +633,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))
@@ -679,7 +714,7 @@ const ReferralTableRewardsColumn = class {
      * @default
      */
     this.hideDetails = false;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
@@ -708,17 +743,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);
@@ -728,6 +800,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";
@@ -737,7 +811,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));
   }
 };
 
@@ -772,7 +861,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) {
@@ -844,7 +933,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

@@ -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-56e48a78.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() {