@saasquatch/mint-components 1.15.0-0 → 1.15.0-10

package/dist/esm/{ShadowViewAddon-cf230f50.js → ShadowViewAddon-8f268346.js}

@@ -1,16 +1,16 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
 import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-9d6f3bbe.js';
 import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-8f75921a.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { C as CopyTextView } from './copy-text-view-782137ba.js';
+import { C as CopyTextView } from './copy-text-view-0ac6e1d1.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
-import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
+import { T as TextSpanView } from './sqm-text-span-view-c577cc60.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { a as isValidColor, b as isMobile } from './utilities-5b0ca040.js';
 import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';
@@ -90,72 +90,72 @@ function ShareButtonView(props, children) {
       !props.hidetext && children)));
 }
 
-const style$1 = {
-  Leaderboard: {
-    "& table": {
-      width: "100%",
-      borderCollapse: "collapse",
-    },
-    "& th": {
-      textAlign: "left",
-      padding: "var(--sl-spacing-medium)",
-      paddingTop: "0",
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& tr:not(:first-child)": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
-    },
-    "& td": {
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-    },
-    "& .ellipses": {
-      textAlign: "left",
-      padding: "0",
-      color: "var(--sl-color-neutral-500)",
-      paddingLeft: "25%",
-    },
-    "& .highlight": {
-      background: "var(--sl-color-primary-50)",
-    },
-    "& td, th": {
-      color: "var(--sl-color-gray-800)",
-      padding: "var(--sl-spacing-medium)",
-    },
-    "& .User": {
-      width: "100%",
-    },
-    "& .Score": {
-      width: "auto",
-      whiteSpace: "nowrap",
-    },
-    "& .Rank": {
-      whiteSpace: "nowrap",
-    },
-    "& .fullWidth": {
-      width: "100%",
+function LeaderboardView(props) {
+  var _a, _b, _c;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  const style = {
+    Leaderboard: {
+      "& table": {
+        width: "100%",
+        borderCollapse: "collapse",
+      },
+      "& th": {
+        textAlign: "left",
+        padding: "var(--sl-spacing-medium)",
+        paddingTop: "0",
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& tr:not(:first-child)": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+      },
+      "& td": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+      },
+      "& .ellipses": {
+        textAlign: "left",
+        padding: "0",
+        color: "var(--sqm-text)",
+        paddingLeft: "25%",
+      },
+      "& .highlight": {
+        background: styles.viewingUserhighlightColor || "var(--sl-color-primary-100)",
+      },
+      "& td, th": {
+        color: "var(--sqm-text)",
+        padding: "var(--sl-spacing-medium)",
+      },
+      "& .User": {
+        width: "100%",
+      },
+      "& .Score": {
+        width: "auto",
+        whiteSpace: "nowrap",
+      },
+      "& .Rank": {
+        whiteSpace: "nowrap",
+      },
+      "& .fullWidth": {
+        width: "100%",
+      },
     },
-  },
-};
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
-const vanillaStyle = `
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
   :host{
     display: block;
   }
 `;
-function LeaderboardView(props) {
-  var _a, _b, _c;
-  const { states, data, elements } = props;
-  const { styles } = states;
   if (states.isEssentials) {
     return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
   }
   if (states.loading) {
-    return (h("div", { class: sheet$1.classes.Leaderboard, style: { width: styles.width || "100%" } },
+    return (h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
       h("style", { type: "text/css" },
-        styleString$1,
+        styleString,
         vanillaStyle),
       h("table", null, [...Array(10)].map(() => {
         return (h("tr", null,
@@ -190,9 +190,9 @@ function LeaderboardView(props) {
       }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
       : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
   };
-  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
+  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     h("style", { type: "text/css" },
-      styleString$1,
+      styleString,
       vanillaStyle),
     h("table", { part: "sqm-table" },
       h("tr", null,
@@ -240,8 +240,7 @@ function BigStatView(props) {
     Description: {
       "font-size": "var(--sl-font-size-small)",
       "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-gray-600)",
-      "text-transform": "uppercase",
+      color: "var(--sqm-text-subdued)",
       "text-align": alignment,
     },
   };
@@ -253,7 +252,7 @@ function BigStatView(props) {
     h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
 }
 
-const style$2 = {
+const style$1 = {
   HostBlock: HostBlock,
   Frame: {
     display: "flex",
@@ -287,17 +286,17 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function PortalFrameView(props, children) {
   const { data, notFullScreen } = props;
-  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$2.classes.Frame, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString$2),
-    h("div", { class: sheet$2.classes.HeaderWrapper, part: "sqm-header" },
+  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$1.classes.Frame, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString$1),
+    h("div", { class: sheet$1.classes.HeaderWrapper, part: "sqm-header" },
       data.header,
       h("slot", { name: "sqm-navigation-menu" })),
     children,
-    h("div", { class: sheet$2.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
+    h("div", { class: sheet$1.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -333,7 +332,7 @@ const EditProfileView = (props) => {
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
           h("sl-button", { onClick: () => {
               callbacks.setShowEdit(false);
-            }, exportparts: "base: defaultbutton-base" }, text.canceltext)))));
+            }, exportparts: "base: secondarybutton-base" }, text.canceltext)))));
   }
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },
@@ -1587,7 +1586,7 @@ function PortalChangePasswordView(props) {
       h("style", { type: "text/css" }, styleString))));
 }
 
-const style$3 = {
+const style$2 = {
   Wrapper: { ...AuthWrapper, "max-width": "600px" },
   Column: AuthColumn,
   HostBlock: HostBlock,
@@ -1598,7 +1597,7 @@ const style$3 = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$1 = `
+const vanillaStyle = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -1613,20 +1612,20 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function PortalRegisterView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (h("div", { class: sheet$3.classes.Wrapper, part: "sqm-base" },
+  return (h("div", { class: sheet$2.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$1,
-      styleString$3),
+      vanillaStyle,
+      styleString$2),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    h("sl-form", { class: sheet$2.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
       states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
@@ -1639,7 +1638,7 @@ function PortalRegisterView(props) {
             return content.invalidEmailErrorMessage;
           }
         } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet$3.classes.ErrorStyle,
+        class: sheet$2.classes.ErrorStyle,
         helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           content.requiredFieldErrorMessage,
       }
@@ -1650,17 +1649,17 @@ function PortalRegisterView(props) {
         value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
       }
         : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
-        class: sheet$3.classes.ErrorStyle,
+        class: sheet$2.classes.ErrorStyle,
         helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
       content.terms,
-      h("div", { class: sheet$3.classes.ButtonsContainer },
+      h("div", { class: sheet$2.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }
 
-const style$4 = {
+const style$3 = {
   ErrorStyle: {
     "&::part(control)": {
       background: "var(--sl-color-danger-10)",
@@ -1683,7 +1682,7 @@ const style$4 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$2 = `
+const vanillaStyle$1 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -1699,15 +1698,15 @@ sl-checkbox::part(base){
 }
 `;
 jss.setup(create());
-const sheet$4 = jss.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$3 = jss.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 function CheckboxFieldView(props) {
   var _b, _c;
   const { states, content, callbacks } = props;
-  return (h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$3.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$2,
-      styleString$4),
+      vanillaStyle$1,
+      styleString$3),
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
@@ -1763,7 +1762,7 @@ function ChangeMarktingView(props) {
         h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
 
-const style$5 = {
+const style$4 = {
   Description: {
     "& input[type=checkbox]": {
       display: "none",
@@ -1775,7 +1774,7 @@ const style$5 = {
       position: "absolute",
       top: "var(--sl-spacing-medium)",
       right: "var(--sl-spacing-medium)",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       "& :hover": {
         color: "var(--sl-color-primary-700)",
@@ -1802,13 +1801,13 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$4 = createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
   return (h("div", { style: { opacity: props.opacity } },
-    h("style", { type: "text/css" }, styleString$5),
-    h("span", { class: sheet$5.classes.Description },
+    h("style", { type: "text/css" }, styleString$4),
+    h("span", { class: sheet$4.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
         h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
@@ -1830,7 +1829,7 @@ const GreyGift = () => {
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
 };
 
-const style$6 = {
+const style$5 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1942,14 +1941,14 @@ const style$6 = {
     },
   },
 };
-const sheet$6 = createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
-const styleString$6 = sheet$6.toString();
+const sheet$5 = createStyleSheet(style$5, { classNamePrefix: "sqm-prog-bar" });
+const styleString$5 = sheet$5.toString();
 function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, finite = 0, opacity = "1", } = props;
   let aggregate = buildProgressBar(repeatable, steps, props);
   const { columns, items } = aggregate;
-  return (h("div", { class: sheet$6.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    h("style", { type: "text/css" }, styleString$6),
+  return (h("div", { class: sheet$5.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    h("style", { type: "text/css" }, styleString$5),
     h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2240,165 +2239,151 @@ const arrow_left_right = () => {
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
 };
 
-const style$7 = {
-  TaskCard: {
-    display: "inline-block",
-    width: "100%",
-    "& .main": {
-      position: "relative",
-      boxSizing: "border-box",
-      background: "var(--sl-color-neutral-0)",
-      border: "1px solid var(--sl-color-neutral-200)",
-      borderRadius: "var(--sl-border-radius-large)",
-      boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
-      fontSize: "var(--sl-font-size-small)",
-      lineHeight: "var(--sl-line-height-dense)",
-      color: "var(--sl-color-neutral-600)",
-    },
-    "& .main.complete": {
-      background: "var(--sl-color-primary-50)",
-      borderColor: "var(--sl-color-primary-500)",
-    },
-    "& .main.expired": {
-      color: "var(--sl-color-neutral-600)",
-      background: "var(--sl-color-neutral-50)",
-    },
-    "& .title": {
-      fontSize: "var(--sl-font-size-medium)",
-      color: "var(--sl-color-neutral-950)",
-    },
-    "& .container": {
-      margin: "var(--sl-spacing-medium)",
-    },
-    "& .container.subdued": {
-      opacity: "0.45",
-    },
-    "& .container > div": {
-      margin: "var(--sl-spacing-medium) 0",
-    },
-  },
-  NotStarted: {
-    fontSize: "var(--sl-font-size-small)",
-    padding: "var(--sl-spacing-medium)",
-    color: "var(--sl-color-primary-600)",
-    border: "1px solid var(--sl-color-neutral-200)",
-    borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
-    borderBottom: "none",
-    background: "var(--sl-color-primary-50)",
-    fontWeight: "var(--sl-font-weight-semibold)",
-    lineHeight: "var(--sl-line-height-dense)",
-    "& .icon": {
-      position: "relative",
-      top: "0.1em",
-      marginRight: "var(--sl-spacing-small)",
-      color: "var(--sl-color-primary-500)",
-    },
-  },
-  Ended: {
-    fontSize: "var(--sl-font-size-small)",
-    padding: "var(--sl-spacing-medium)",
-    color: "var(--sl-color-warning-600)",
-    border: "1px solid var(--sl-color-neutral-200)",
-    borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
-    borderBottom: "none",
-    background: "var(--sl-color-warning-50)",
-    fontWeight: "var(--sl-font-weight-semibold)",
-    lineHeight: "var(--sl-line-height-dense)",
-    "& .icon": {
-      position: "relative",
-      top: "0.1em",
-      marginRight: "var(--sl-spacing-small)",
-      color: "var(--sl-color-warning-500)",
-    },
-  },
-  Header: {
-    display: "flex",
-    "& .icon": {
-      position: "relative",
-      top: "5%",
-      alignSelf: "center",
-      lineHeight: "0",
-      color: "var(--sl-color-primary-400)",
-      fontSize: "var(--sl-font-size-large)",
-      marginRight: "var(--sl-spacing-x-small)",
-    },
-    "& .value": {
-      alignSelf: "center",
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-950)",
-      lineHeight: "100%",
-      marginRight: "var(--sl-spacing-xx-small)",
-    },
-    "& .text": {
-      alignSelf: "end",
-      textTransform: "uppercase",
-      fontSize: "var(--sl-font-size-x-small)",
-      color: "var(--sl-color-neutral-950)",
-      lineHeight: "var(--sl-font-size-medium)",
-      marginRight: "var(--sl-spacing-xx-small)",
+function TaskCardView(props) {
+  var _a, _b;
+  const { callbacks, states, content } = props;
+  console.log("text color from the view ", content.textColor);
+  const style = {
+    TaskCard: {
+      display: "inline-block",
+      width: "100%",
+      "& .main": {
+        position: "relative",
+        boxSizing: "border-sizing",
+        background: content.backgroundColor || "var(--sl-color-neutral-0)",
+        border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+        borderRadius: "var(--sl-border-radius-large)",
+        boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        color: content.textColor || "var(--sqm-text)",
+      },
+      "& .main.complete": {
+        background: content.backgroundColor || "var(--sl-color-primary-50)",
+        borderColor: content.borderColor || "var(--sl-color-primary-500)",
+      },
+      "& .main.expired": {
+        color: content.textColor || "var(--sqm-text)",
+        background: content.backgroundColor || "var(--sl-color-neutral-50)",
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-medium)",
+        color: content.textColor || "var(--sqm-text)",
+      },
+      "& .container": {
+        margin: "var(--sl-spacing-medium)",
+      },
+      "& .container.subdued": {
+        opacity: "0.45",
+      },
+      "& .container > div": {
+        margin: "var(--sl-spacing-medium) 0",
+      },
     },
-    "& .end": {
-      color: "var(--sl-color-warning-500)",
+    NotStarted: {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "var(--sl-spacing-medium)",
+      color: content.textColor || "var(--sl-color-primary-600)",
+      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      borderBottom: "none",
+      background: content.backgroundColor || "var(--sl-color-primary-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      marginBottom: "var(--sl-spacing-xx-small)",
-    },
-    "& .neutral": {
-      color: "var(--sl-color-neutral-400)",
-    },
-  },
-  Footer: {
-    "&[data-subdue] .success": {
-      color: "var(--sl-color-primary-300)",
-    },
-    "&[data-subdue] .neutral": {
-      color: "var(--sl-color-neutral-300)",
-    },
-    display: "flex",
-    "& .icon": {
-      fontSize: "var(--sl-font-size-xx-small)",
-      marginRight: "var(--sl-spacing-xx-small)",
-      verticalAlign: "middle",
-    },
-    "& .text": {
-      marginTop: "auto",
-      verticalAlign: "text-bottom",
-      fontSize: "var(--sl-font-size-x-small)",
-      color: "var(--sl-color-neutral-400)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-small)",
+        color: content.textColor || "var(--sqm-text)",
+      },
     },
-    "& .success": {
-      color: "var(--sl-color-primary-500)",
+    Ended: {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "var(--sl-spacing-medium)",
+      color: content.textColor || "var(--sl-color-warning-600)",
+      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      borderBottom: "none",
+      background: content.backgroundColor || "var(--sl-color-warning-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-small)",
+        color: content.textColor || "var(--sqm-text)",
+      },
     },
-    "& .action": {
-      marginTop: "auto",
-      marginLeft: "auto",
-      "&::part(base)": {
-        color: "var(--sl-color-neutral-0)",
+    Header: {
+      display: "flex",
+      "& .icon": {
+        position: "relative",
+        top: "5%",
+        alignSelf: "center",
+        lineHeight: "0",
+        color: content.textColor || "var(--sqm-text)",
+        fontSize: "var(--sl-font-size-large)",
+        marginRight: "var(--sl-spacing-x-small)",
       },
-      "&.disabled::part(base)": {
-        border: "1px solid var(--sl-color-primary-400)",
-        background: "var(--sl-color-primary-400)",
+      "& .value": {
+        alignSelf: "center",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: content.textColor || "var(--sqm-text)",
+        lineHeight: "100%",
+        marginRight: "var(--sl-spacing-xx-small)",
       },
-      "&.neutral::part(base)": {
-        border: "1px solid var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-400)",
+      "& .text": {
+        alignSelf: "end",
+        textTransform: "uppercase",
+        fontSize: "var(--sl-font-size-x-small)",
+        color: content.textColor || "var(--sqm-text)",
+        lineHeight: "var(--sl-font-size-medium)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .end": {
+        color: content.textColor || "var(--sl-color-warning-500)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        marginBottom: "var(--sl-spacing-xx-small)",
+      },
+      "& .neutral": {
+        color: content.textColor || "var(--sl-color-neutral-400)",
       },
     },
-    "& .neutral": {
-      color: "var(--sl-color-neutral-400)",
-    },
-    "& .datetime": {
-      display: "block",
-      marginTop: "var(--sl-spacing-xx-small)",
+    Footer: {
+      "&[data-subdue] .success": {
+        color: content.textColor || "var(--sl-color-primary-300)",
+      },
+      "&[data-subdue] .neutral": {
+        color: content.textColor || "var(--sqm-text)",
+      },
+      display: "flex",
+      "& .icon": {
+        fontSize: "var(--sl-font-size-xx-small)",
+        marginRight: "var(--sl-spacing-xx-small)",
+        verticalAlign: "middle",
+      },
+      "& .text": {
+        marginTop: "auto",
+        verticalAlign: "text-bottom",
+        fontSize: "var(--sl-font-size-x-small)",
+        color: content.textColor || "var(--sqm-text)",
+      },
+      "& .success": {
+        color: content.textColor || "var(--sqm-text)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .neutral": {
+        color: content.textColor || "var(--sqm-text)",
+      },
+      "& .datetime": {
+        display: "block",
+        marginTop: "var(--sl-spacing-xx-small)",
+      },
     },
-  },
-};
-const sheet$7 = createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
-function TaskCardView(props) {
-  var _a, _b;
-  const { callbacks, states, content } = props;
+  };
+  const sheet = createStyleSheet(style);
+  const contenttring = sheet.toString();
   const dateStart = content.rewardDuration &&
     luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -2431,11 +2416,11 @@ function TaskCardView(props) {
 	}
 
   `;
-  return (h("div", { class: sheet$7.classes.TaskCard, part: "sqm-base" },
+  return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      styleString$7,
+      contenttring,
       vanillaStyle),
-    !states.loading && taskNotStarted && (h("div", { class: sheet$7.classes.NotStarted },
+    !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
       h("span", { class: "icon" },
         h("sl-icon", { name: "info-circle-fill" })),
       intl.formatMessage({
@@ -2446,7 +2431,7 @@ function TaskCardView(props) {
           .setLocale(luxonLocale(states.locale))
           .toLocaleString(luxon.DateTime.DATETIME_MED),
       }))),
-    !states.loading && taskEnded && (h("div", { class: sheet$7.classes.Ended },
+    !states.loading && taskEnded && (h("div", { class: sheet.classes.Ended },
       h("span", { class: "icon" },
         h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       intl.formatMessage({
@@ -2466,7 +2451,7 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet$7.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
@@ -2482,7 +2467,7 @@ function TaskCardView(props) {
           } }, content.cardTitle)),
         states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
         content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet$7.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
@@ -2511,11 +2496,9 @@ function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(luxon.DateTime.DATETIME_MED),
             })))),
-          content.hideButton ? ("") : (h("sl-button", { exportparts: "base: button", id: "sl-button", class: taskUnavailable
-              ? "action neutral"
-              : taskComplete
-                ? "action disabled"
-                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonStyle === "primary"
+              ? "primary"
+              : "secondary"}button-base`, id: "sl-button", type: content.buttonStyle === "primary" ? "primary" : "default", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }
@@ -2553,7 +2536,7 @@ function PoweredByImg({ color = "#A6A6A6", width = 120, height = 16, }) {
     h("path", { d: "M1661.53 157.54H1589.77C1590.42 169.37 1593.54 178.535 1599.13 185.035C1604.85 191.535 1612.65 194.785 1622.53 194.785C1628.51 194.785 1633.97 193.485 1638.91 190.885C1643.98 188.285 1647.95 184.645 1650.81 179.965L1657.24 186.4C1653.34 192.12 1648.4 196.475 1642.42 199.465C1636.57 202.455 1629.94 203.95 1622.53 203.95C1609.01 203.95 1598.35 199.465 1590.55 190.495C1582.88 181.525 1579.05 169.175 1579.05 153.445C1579.05 137.585 1582.82 125.17 1590.36 116.2C1597.9 107.1 1608.23 102.55 1621.36 102.55C1633.84 102.55 1643.66 106.84 1650.81 115.42C1657.96 124 1661.53 135.895 1661.53 151.105V157.54ZM1651.39 147.4C1651.39 136.48 1648.66 127.77 1643.2 121.27C1637.74 114.77 1630.46 111.52 1621.36 111.52C1611.74 111.52 1604.2 114.77 1598.74 121.27C1593.28 127.77 1590.29 137.065 1589.77 149.155H1651.39V147.4Z", fill: color })));
 }
 
-const vanillaStyle$3 = `
+const vanillaStyle$2 = `
   :host{
     margin: 0 auto;
     width: 100%;
@@ -2609,7 +2592,7 @@ function PortalFooterView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$3,
+      vanillaStyle$2,
       styleString),
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2781,7 +2764,7 @@ function ReferralIframeView(props) {
     h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }
 
-const style$8 = {
+const style$6 = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2789,7 +2772,7 @@ const style$8 = {
     },
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$3 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2801,21 +2784,21 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-const sheet$8 = createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$6 = createStyleSheet(style$6);
+const styleString$6 = sheet$6.toString();
 function NameFieldsView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet$8.classes.FieldsContainer },
+  return (h("div", { class: sheet$6.classes.FieldsContainer },
     h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$8),
+      vanillaStyle$3,
+      styleString$6),
     h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
-      class: sheet$8.classes.ErrorStyle,
+      class: sheet$6.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
@@ -2823,13 +2806,13 @@ function NameFieldsView(props) {
       value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
-      class: sheet$8.classes.ErrorStyle,
+      class: sheet$6.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }
       : [])))));
 }
 
-const style$9 = {
+const style$7 = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
     "--sl-input-background-color": "var(--sl-color-danger-10)",
@@ -2845,7 +2828,7 @@ const style$9 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$5 = `
+const vanillaStyle$4 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2857,36 +2840,36 @@ sl-select::part(label){
 }
 `;
 jss.setup(create());
-const sheet$9 = jss.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$7 = jss.createStyleSheet(style$7);
+const styleString$7 = sheet$7.toString();
 function DropdownFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet$9.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$7.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$5,
-      styleString$9),
+      vanillaStyle$4,
+      styleString$7),
     h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
-      class: sheet$9.classes.ErrorStyle,
+      class: sheet$7.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$9.classes.ErrorMessageStyle }, intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$7.classes.ErrorMessageStyle }, intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
 }
 
-const style$a = {
+const style$8 = {
   ErrorStyle: ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2894,21 +2877,21 @@ const vanillaStyle$6 = `
 }
 `;
 jss.setup(create());
-const sheet$a = jss.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
+const sheet$8 = jss.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function InputFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$8.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$6,
-      styleString$a),
+      vanillaStyle$5,
+      styleString$8),
     h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
-      class: sheet$a.classes.ErrorStyle,
+      class: sheet$8.classes.ErrorStyle,
       helpText: intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -3003,7 +2986,7 @@ function ProgressBar({ stageCount, currentStage, }) {
   return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
 }
 
-const style$b = {
+const style$9 = {
   HostBlock: HostBlock,
   Container: {
     minWidth: "300px",
@@ -3354,8 +3337,8 @@ const style$b = {
   },
 };
 // JSS config
-const sheet$b = createStyleSheet(style$b);
-const styleString$b = sheet$b.toString();
+const sheet$9 = createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3378,7 +3361,7 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    return (h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet$b.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    return (h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet$9.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
         var _a, _b, _c, _d, _e;
         return callbacks.setExchangeState({
           amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
@@ -3386,7 +3369,7 @@ function RewardExchangeView(props) {
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
-      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$b.classes.SelectItem },
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$9.classes.SelectItem },
         step.prettyDestinationValue,
         h("br", null),
         h("div", { class: "step-cost", slot: "suffix" },
@@ -3405,8 +3388,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       h("div", { part: "choose-reward-container" },
-        h("div", { class: sheet$b.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$b.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        h("div", { class: sheet$9.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$9.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
@@ -3415,7 +3398,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$b.classes.Card, style: {
+            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$9.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3432,14 +3415,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                h("div", { class: sheet$b.classes.Image, style: {
+                h("div", { class: sheet$9.classes.Image, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("img", { class: item.unavailableReasonCode
                       ? "image subdued"
                       : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
                       getAssetPath("./assets/Reward-image.png") })),
-                h("div", { class: sheet$b.classes.TextArea, style: {
+                h("div", { class: sheet$9.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("div", { class: "title", style: {
@@ -3472,7 +3455,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        h("div", { class: sheet$b.classes.Button },
+        h("div", { class: sheet$9.classes.Button },
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -3483,7 +3466,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (h("div", null,
-      h("div", { class: sheet$b.classes.ChooseAmount, part: "choose-amount-container" },
+      h("div", { class: sheet$9.classes.ChooseAmount, part: "choose-amount-container" },
         h("div", { class: "wrapper" },
           h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               getAssetPath("./assets/Reward-image.png") }),
@@ -3492,7 +3475,7 @@ function RewardExchangeView(props) {
             ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
             h("div", { class: "space" }))),
-        h("div", { class: sheet$b.classes.Button },
+        h("div", { class: sheet$9.classes.Button },
           h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -3500,8 +3483,8 @@ function RewardExchangeView(props) {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (h("div", null,
-      h("div", { class: sheet$b.classes.Confirmation, part: "confirmation-container" },
-        h("div", { class: sheet$b.classes.Title }, states.content.text.redeemTitle),
+      h("div", { class: sheet$9.classes.Confirmation, part: "confirmation-container" },
+        h("div", { class: sheet$9.classes.Title }, states.content.text.redeemTitle),
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
@@ -3516,13 +3499,13 @@ function RewardExchangeView(props) {
         h("div", { class: "wrapper top-border padding" },
           h("div", { class: "field" }, states.content.text.costTitle),
           h("div", { class: "value" }, cost)),
-        h("div", { class: sheet$b.classes.Button },
+        h("div", { class: sheet$9.classes.Button },
           h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
           h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f;
-    return (h("div", { class: sheet$b.classes.Success, part: "success-container" },
+    return (h("div", { class: sheet$9.classes.Success, part: "success-container" },
       h(Gift$1, null),
       h(Confetti, null),
       h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -3537,7 +3520,7 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
         h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
-      h("div", { class: sheet$b.classes.Button },
+      h("div", { class: sheet$9.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3549,7 +3532,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet$b.classes.ProgressBar },
+    return (h("div", { class: sheet$9.classes.ProgressBar },
       h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return h("span", { class: "text" }, stageProgressList[stage]);
@@ -3561,10 +3544,10 @@ function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet$b.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (h("div", { class: sheet$9.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (h("div", null,
-        h("sl-card", { class: sheet$b.classes.Card },
-          h("div", { class: sheet$b.classes.CardLayout },
+        h("sl-card", { class: sheet$9.classes.Card },
+          h("div", { class: sheet$9.classes.CardLayout },
             h("div", null,
               h("sl-skeleton", { style: {
                   width: "100px",
@@ -3596,12 +3579,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$b.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$9.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (h("div", { class: sheet$b.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString$b),
+  return (h("div", { class: sheet$9.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString$9),
     h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -4017,29 +4000,29 @@ function CardFeedView(props, children) {
     h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
-const style$c = {
+const style$a = {
   HostBlock: HostBlock,
   couponCodeLabel: {
     margin: "var(--sl-spacing-x-small) 0",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-small)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$6 = `
   :host{
     display: block;   
     width: 100%;
   }
 `;
-const sheet$c = createStyleSheet(style$c);
-const styleString$c = sheet$c.toString();
+const sheet$a = createStyleSheet(style$a);
+const styleString$a = sheet$a.toString();
 function CouponCodeView(props) {
   const error = !props.loading && props.error;
   return (h("div", null,
     h("style", { type: "text/css" },
-      styleString$c,
-      vanillaStyle$7),
-    h("p", { class: sheet$c.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+      styleString$a,
+      vanillaStyle$6),
+    h("p", { class: sheet$a.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
     error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
 }