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

package/dist/esm/{sqm-qr-code-view-f1d0763b.js → sqm-qr-code-view-ea505213.js}

@@ -1,6 +1,6 @@
-import { h } from './index-91e7729f.js';
+import { h } from './index-b3a06de8.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { E as ErrorView } from './ErrorView-48e2b969.js';
+import { E as ErrorView } from './ErrorView-bbf0a042.js';
 
 const style = {
   DialogContainer: {
@@ -39,11 +39,6 @@ const style = {
     height: "100%",
     maxWidth: "335px",
   },
-  TextButton: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-600)",
-    },
-  },
   LoadingSkeleton: {
     "&::part(indicator)": {
       borderRadius: "0px !important",
@@ -94,8 +89,8 @@ function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCodeText,
       !hideTitle && h("span", { part: "sqm-title" }, titleText),
       codeContent,
       h("div", { class: sheet.classes.ButtonContainer },
-        h("sl-button", { size: "small", exportparts: "base: defaultbutton-base", type: "default", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable, class: sheet.classes.TextButton }, printCodeText)))));
+        h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }
 
 export { QrCodeView as Q };

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

@@ -1,12 +1,12 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
-import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, i as isDemo } from './index.module-89a79f66.js';
+import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
+import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
+import { d as dist, H, J, B, F as Fn, w as wn, $ as $e, i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-84b4b092.js';
 import './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE } from './useReferralCodes-8f75921a.js';
-import './ErrorView-48e2b969.js';
-import { Q as QrCodeView } from './sqm-qr-code-view-f1d0763b.js';
+import { a as REFERRAL_CODES_NAMESPACE } from './useReferralCodes-c2e809cf.js';
+import './ErrorView-bbf0a042.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-ea505213.js';
 
 const ShareLinkQuery = dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
@@ -44,19 +44,7 @@ function useQRCode(props) {
     if (!shareLink)
       return;
     const getQrCode = async () => {
-      setLoading(true);
-      try {
-        const res = await fetch(`${shareLink}?qrCode&qrCodeImageFormat=svg&qrCodeQuietZoneSize=0`);
-        const blob = await res.blob();
-        const url = URL.createObjectURL(blob);
-        setQrUrl(url);
-      }
-      catch (e) {
-        setError(true);
-      }
-      finally {
-        setLoading(false);
-      }
+      setQrUrl(`${shareLink}?qrCode&qrCodeImageFormat=svg&qrCodeQuietZoneSize=0`);
     };
     getQrCode();
   }, [shareLink]);

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

@@ -1,18 +1,18 @@
-import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-91e7729f.js';
-import { n as h, j as useReducer, u as useMemo, f as useEffect } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
-import { i as isDemo } from './index.module-89a79f66.js';
+import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-b3a06de8.js';
+import { i as intl } from './global-1099f20d.js';
+import { n as h, j as useReducer, u as useMemo, f as useEffect } from './dom-context-hooks.module-63370afd.js';
+import { i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { l as luxonLocale } from './utils-334c1e34.js';
+import { l as luxonLocale } from './utils-84b4b092.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { G as GenericTableView } from './GenericTableView-7b9087af.js';
-import { a as useRequestRerender, u as useRerenderListener } from './re-render-cc945f38.js';
-import { u as useChildElements } from './useChildElements-7945ae56.js';
-import { l as luxon } from './luxon-8d51c92b.js';
-import { g as getPaypalMeta } from './mockRewardData-a3cdb832.js';
-import { u as useReferralTable, t as tryMethod } from './useReferralTable-b3876ed6.js';
-import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
+import './mixins-f750863a.js';
+import { G as GenericTableView } from './GenericTableView-e43d310f.js';
+import { a as useRequestRerender, u as useRerenderListener } from './re-render-7e22fb0d.js';
+import { u as useChildElements } from './useChildElements-3d872cef.js';
+import { l as luxon } from './luxon-bbf75a9d.js';
+import { g as getPaypalMeta } from './mockRewardData-96a2d26d.js';
+import { u as useReferralTable, t as tryMethod } from './useReferralTable-909ccb28.js';
+import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 
 const mockReferralData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());
@@ -444,9 +444,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"}`,
@@ -455,6 +453,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)": {
@@ -462,7 +461,6 @@ const ReferralTableRewardsCell = class {
         },
         "&::part(summary-icon[open])": {
           transform: "rotate(-90deg)",
-          background: "red",
         },
       },
       BadgeContainer: {
@@ -473,23 +471,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 = 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 = [
@@ -592,19 +631,13 @@ const ReferralTableRewardsCell = class {
       }, {
         status: state,
       });
-      return (h$1("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, h$1("style", { type: "text/css" }, styleString), h$1("div", { slot: "summary", class: sheet.classes.DetailsContainer }, h$1(TextSpanView, { type: "p" }, h$1("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)), h$1("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h$1("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
+      return (h$1("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, h$1("style", { type: "text/css" }, styleString), h$1("div", { slot: "summary", class: sheet.classes.DetailsContainer }, h$1(TextSpanView, { type: "p" }, h$1("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)), h$1("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h$1("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, intl.formatMessage({
         id: "pendingForText",
         defaultMessage: this.pendingForText,
       }, {
         status: badgeText,
         date: getTimeDiff(reward.dateScheduledFor),
-      }))) : (h$1("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (h$1("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), h$1("div", null, state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.DateTime.fromMillis(reward.referral.dateModerated)
+      }))) : (h$1("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (h$1("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), h$1("div", null, state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.DateTime.fromMillis(reward.referral.dateModerated)
         .setLocale(luxonLocale(this.locale))
         .toLocaleString(luxon.DateTime.DATE_MED))))), state === "PAYOUT_APPROVED" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PAYOUT_FAILED" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PAYOUT_CANCELLED" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_TAX_REVIEW" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_NEW_TAX_FORM" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_TAX_SUBMISSION" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_PARTNER_CREATION" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "DENIED" && ((_b = reward.referral) === null || _b === void 0 ? void 0 : _b.dateModerated) && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.DateTime.fromMillis(reward.referral.dateModerated)
         .setLocale(luxonLocale(this.locale))
@@ -708,17 +741,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 = createStyleSheet(style);
@@ -728,6 +798,8 @@ const ReferralTableStatusCell = class {
     registerInstance(this, hostRef);
   }
   render() {
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
     const getBadgeType = (fraudStatus) => {
       if (fraudStatus === "PENDING")
         return "warning";
@@ -737,7 +809,22 @@ const ReferralTableStatusCell = class {
         return "success";
       return "warning";
     };
-    return (h$1("div", null, h$1("style", { type: "text/css" }, styleString), h$1("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: sheet.classes.Badge }, this.statusText), this.statusSubText ? (h$1("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 (h$1("div", null, h$1("style", { type: "text/css" }, styleString), h$1("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: getBadgeCSSClass(getBadgeType(this.fraudStatus)) }, this.statusText), this.statusSubText ? (h$1("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
   }
 };
 

package/dist/esm/sqm-rewards-table-customer-note-cell.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
+import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
+import { n as h } from './dom-context-hooks.module-63370afd.js';
 import './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
+import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 
 const RewardTableCustomerNoteCell = class {
   constructor(hostRef) {

package/dist/esm/sqm-rewards-table-customer-note-column.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import './index.module-89a79f66.js';
-import { a as useRequestRerender } from './re-render-cc945f38.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
+import { n as h } from './dom-context-hooks.module-63370afd.js';
+import './index.module-c9811a48.js';
+import { a as useRequestRerender } from './re-render-7e22fb0d.js';
 
 const RewardTableCustomerNoteColumn = class {
   constructor(hostRef) {

package/dist/esm/sqm-rewards-table_9.entry.js

@@ -1,17 +1,17 @@
-import { h, r as registerInstance, c as Host } from './index-91e7729f.js';
-import { b as browser, j as useReducer, f as useEffect, n as h$1, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
-import { d as dist, J, H, L, w as wn, R as Rn, i as isDemo } from './index.module-89a79f66.js';
+import { h, r as registerInstance, c as Host } from './index-b3a06de8.js';
+import { i as intl } from './global-1099f20d.js';
+import { b as browser, j as useReducer, f as useEffect, n as h$1, u as useMemo } from './dom-context-hooks.module-63370afd.js';
+import { d as dist, J, H, L, w as wn, R as Rn, i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { l as luxonLocale } from './utils-334c1e34.js';
+import { l as luxonLocale } from './utils-84b4b092.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { G as GenericTableView } from './GenericTableView-7b9087af.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-cc945f38.js';
-import { u as useChildElements } from './useChildElements-7945ae56.js';
-import { l as luxon } from './luxon-8d51c92b.js';
-import { m as mockRewardData } from './mockRewardData-a3cdb832.js';
-import { g as generateUserError } from './useReferralTable-b3876ed6.js';
+import './mixins-f750863a.js';
+import { G as GenericTableView } from './GenericTableView-e43d310f.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-7e22fb0d.js';
+import { u as useChildElements } from './useChildElements-3d872cef.js';
+import { l as luxon } from './luxon-bbf75a9d.js';
+import { m as mockRewardData } from './mockRewardData-96a2d26d.js';
+import { g as generateUserError } from './useReferralTable-909ccb28.js';
 
 const debug = browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";
@@ -583,11 +583,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%",
@@ -603,11 +603,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 = createStyleSheet(style);
@@ -681,7 +681,7 @@ const RewardTableSourceCell = class {
       var _a;
       const rewardExchange = (h("div", null, h("span", { style: {
           fontSize: "var(--sl-font-size-small)",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text-subdued)",
         } }, this.rewardExchangeText), h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
         _a.prettyRedeemedCredit, " → ", reward.prettyValue));
       return reward.exchangedRewardRedemptionTransaction.prettyRedeemedCredit
@@ -705,10 +705,10 @@ const RewardTableSourceCell = class {
     };
     const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
       this.reward.rewardSource === "REFERRED" ? (this.reward.referral === null ? (h("p", { style: {
-        color: "var(--sl-color-gray-400)",
+        color: "var(--sqm-text-subdued)",
       } }, this.deletedReferralText)) : (h("div", null, h("div", { style: {
         fontSize: "var(--sl-font-size-small)",
-        color: "var(--sl-color-neutral-500)",
+        color: "var(--sqm-text-subdued)",
       } }, intl.formatMessage({
       id: "referralText",
       defaultMessage: this.referralText,
@@ -791,14 +791,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",
   },
 };
@@ -946,9 +979,23 @@ const RewardTableStatusCell = class {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    return (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString$1), h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-        ? sheet$1.classes.RedeemBadge
-        : sheet$1.classes.Badge }, statusText), 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 (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString$1), h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText), h("p", { class: sheet$1.classes.Date }, fraudStatusText ||
       pendingReasons ||
       this.getPayoutStatusText(rewardStatus) ||
       date)));
@@ -992,9 +1039,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";
     /**

package/dist/esm/sqm-route.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, c as Host } from './index-91e7729f.js';
+import { r as registerInstance, h, c as Host } from './index-b3a06de8.js';
 
 const SqmRoute = class {
   constructor(hostRef) {

package/dist/esm/sqm-scroll.entry.js

@@ -1,6 +1,5 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
+import { n as h } from './dom-context-hooks.module-63370afd.js';
 
 const REVEAL_EVENT = "sq:reveal";
 function useScroll(props) {
@@ -24,14 +23,6 @@ const Scroll = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
-    /**
-     * @uiName Button type
-     * @uiType string
-     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
-     * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
-  
-     */
-    this.buttonType = "default";
     /**
      * @uiName Scroll animation style
      * @uiType string
@@ -43,62 +34,25 @@ const Scroll = class {
   }
   disconnectedCallback() { }
   render() {
-    var _a;
     const { callbacks } = useScroll(this);
-    const outlineColor = (_a = this.buttonType) !== null && _a !== void 0 ? _a : "primary";
-    const style = {
-      Button: {
-        "& .outline": {
-          "&::part(base)": {
-            color: "var(--sl-color-" + outlineColor + "-500)",
-            borderColor: "var(--sl-color-" + outlineColor + "-500)",
-            backgroundColor: "transparent",
-            "&:hover": {
-              color: "var(--sl-color-primary-text)",
-              backgroundColor: "var(--sl-color-" + outlineColor + "-500)",
-            },
-          },
-        },
-        "& .neutral": {
-          "&::part(base)": {
-            color: "var(--sl-color-primary-text)",
-            background: "var(--sl-color-neutral-500)",
-            "&:hover": {
-              opacity: "0.8",
-            },
-          },
-        },
-        "& .mobile": {
-          "@media (max-width: 499px)": {
-            width: "100%",
-          },
-        },
-      },
-    };
-    const sheet = createStyleSheet(style);
-    const styleString = sheet.toString();
-    const vanillaStyle = `
-		:host{
-			display: contents;
-		}
-		${this.mobile &&
-      `
-		@media only screen and (max-width: 499px) {
-			:host {
-				display: block;
-				width: 100%;
-			}
-		}
-	  `}
-	`;
-    let classStack = "";
-    if (this.outline && this.buttonType != "default")
-      classStack += "outline ";
-    if (this.buttonType === "neutral")
-      classStack += "neutral ";
-    if (this.mobile)
-      classStack += "mobile ";
-    return (h$1("div", { class: sheet.classes.Button }, h$1("style", { type: "text/css" }, vanillaStyle, styleString), h$1("sl-button", { type: this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack }, (this.iconSlot || this.iconName) && (h$1("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, h$1("slot", null))));
+    const vanillaStyleString = `
+    *::part(secondarybutton-base),
+    sl-button[type="secondary"]::part(base) {
+      font-family: var(--sqm-primary-font);
+      background-color: var(--sqm-secondary-button-background);
+      color: var(--sqm-secondary-button-color);
+      border-color: var(--sqm-secondary-button-color-border);
+      border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    *::part(secondarybutton-base):hover,
+    sl-button[type="secondary"]::part(base):hover {
+      background-color: var(--sqm-secondary-button-background-hover);
+      color: var(--sqm-secondary-button-color-hover);
+      border-color: var(--sqm-secondary-button-border-color-hover);
+    }
+  `;
+    return (h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle }, h$1("style", { type: "text/css" }, vanillaStyleString), (this.iconSlot || this.iconName) && (h$1("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, h$1("slot", null)));
   }
 };