@saasquatch/mint-components 1.5.0-113 → 1.5.0-117

package/dist/esm/{ShadowViewAddon-9c382e30.js → ShadowViewAddon-3347acdb.js}

@@ -1,15 +1,15 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
 import { k as useState, b as browser, i as useMemo } from './stencil-hooks.module-acc8a613.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import { d as dist, M, i as ie, R as Rn, b as sn, q as qe, k as kn, A as An } from './index.module-aac201f3.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 import { l as luxon } from './luxon-f44215d9.js';
 import { l as luxonLocale } from './utils-1d345130.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-dea0cdcc.js';
-import { P as PortalSectionView } from './sqm-portal-section-view-88a80af9.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-46929235.js';
+import { P as PortalSectionView } from './sqm-portal-section-view-61dbb8a9.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -23,40 +23,51 @@ const medium = {
   linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
   pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
 };
+const style = {
+  HostBlock: HostBlock,
+  buttonStyle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: "0",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 function ShareButtonView(props, children) {
   const vanillaStyle = `
-    *::part(base) {
-     border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
+	*::part(base) {
+	border: none;
+			--sl-focus-ring-color-primary: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""}80!important;
 
-      background: ${props.backgroundcolor
-    ? props.backgroundcolor
+	background: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""};
-      color: ${props.textcolor
-    ? props.textcolor
+	color: ${props.textColor
+    ? props.textColor
     : props.medium
       ? medium[props.medium].text
       : ""};
-      border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
-    }
+	border-radius: ${props.borderRadius ? props.borderRadius + "px" : ""};
+	}
 
 	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
+		border-color: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""}D1!important;
 	}
-	
+
 	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
+		border-color: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""}D1!important;
@@ -66,27 +77,16 @@ function ShareButtonView(props, children) {
 		position: relative;
 		top: 2%;
 	}
-  `;
-  const style = {
-    HostBlock: HostBlock,
-    buttonStyle: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      lineHeight: "0",
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
+	`;
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
     h("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
-      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
-      !props.hidetext && children)));
+      !props.hideIcon && (h("sl-icon", { slot: props.iconSlot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
+      !props.hideText && children)));
 }
 
-const style = {
+const style$1 = {
   Leaderboard: {
     "& table": {
       width: "100%",
@@ -127,8 +127,8 @@ const style = {
     },
   },
 };
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 const vanillaStyle = `
 	:host{
 		display: block;
@@ -138,22 +138,18 @@ function LeaderboardView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { states, data, elements } = props;
   const { styles } = states;
-  console.log("LEADER", props);
-  console.log(styles);
-  console.log("hideViewer", styles.hideViewer);
-  console.log(!styles.hideViewer);
   if (states.loading)
-    return (h("div", { class: sheet.classes.Leaderboard },
+    return (h("div", { class: sheet$1.classes.Leaderboard },
       h("style", { type: "text/css" },
-        styleString,
+        styleString$1,
         vanillaStyle),
       elements.loadingstate));
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet.classes.Leaderboard },
+  return (h("div", { class: sheet$1.classes.Leaderboard },
     h("style", { type: "text/css" },
-      styleString,
+      styleString$1,
       vanillaStyle),
     h("table", null,
       h("tr", null,
@@ -177,7 +173,6 @@ function LeaderboardView(props) {
           h("td", { class: "Score" }, user.value)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
-        console.log("res", !userSeenFlag && !styles.hideViewer),
         h("td", { colSpan: 100, class: "ellipses" },
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
@@ -191,24 +186,25 @@ function LeaderboardView(props) {
         h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))))));
 }
 
-const style$1 = {
+const style$2 = {
   HostBlock: HostBlock,
   inputStyle: {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
   },
 };
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function ShareLinkView(props) {
   return (h("div", null,
-    h("style", { type: "text/css" }, styleString$1),
-    h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open },
-      h("sl-input", { class: sheet$1.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
+    h("style", { type: "text/css" }, styleString$2),
+    h("sl-tooltip", { trigger: "manual", content: props.tooltipText, placement: "top-end", disabled: props.disabled, open: props.open },
+      h("sl-input", { class: sheet$2.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
         h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })))));
 }
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment } = props;
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       display: "flex",
@@ -241,7 +237,7 @@ function BigStatView(props) {
     h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
 }
 
-const style$2 = {
+const style$3 = {
   HostBlock: HostBlock,
   ":host": {
     "min-height": "100vh",
@@ -279,17 +275,17 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$3 = createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
   const { data } = props;
-  return (h("div", { class: sheet$2.classes.Frame },
-    h("style", { type: "text/css" }, styleString$2),
-    h("div", { class: sheet$2.classes.HeaderWrapper },
+  return (h("div", { class: sheet$3.classes.Frame },
+    h("style", { type: "text/css" }, styleString$3),
+    h("div", { class: sheet$3.classes.HeaderWrapper },
       data.header,
       h("slot", { name: "sqm-navigation-menu" })),
     children,
-    h("div", { class: sheet$2.classes.FooterWrapper }, data.footer)));
+    h("div", { class: sheet$3.classes.FooterWrapper }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -809,7 +805,7 @@ _, status) => {
     `, { queryFilter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
-      value: (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount,
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
       statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
     });
   });
@@ -1413,6 +1409,53 @@ function useDemoBigStat(props) {
   };
 }
 
+function StatContainerView(props, children) {
+  const divideSpace = () => {
+    const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
+    return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
+  };
+  // Dependent on props, not feasiable to move out
+  const style = {
+    StatContainer: {
+      width: "100%",
+      display: props.display || "grid",
+      "grid-template-columns": "repeat(auto-fill, minmax(130px, auto))",
+      gap: divideSpace(),
+      // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
+      "& > *": {
+        "border-right": "1px solid #EAEAEA",
+        "padding-right": divideSpace(),
+      },
+      "& > :last-child": {
+        "border-right": "1px solid #ffffff",
+      },
+      "& > ::slotted(*)": {
+        "border-right": "1px solid #EAEAEA",
+        "padding-right": divideSpace(),
+        height: "100%",
+      },
+      "& > ::slotted(*:last-child)": {
+        "border-right": "none",
+      },
+    },
+    StatFrame: {
+      display: "flex",
+    },
+    BorderFix: {
+      "border-right": "1px solid #ffffff",
+      width: "0px",
+      "margin-left": "-1px",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.StatFrame },
+    h("div", { class: sheet.classes.StatContainer },
+      h("style", { type: "text/css" }, styleString),
+      children),
+    h("div", { class: sheet.classes.BorderFix })));
+}
+
 function PortalChangePasswordView(props) {
   const { states, callbacks } = props;
   const style = {
@@ -1483,7 +1526,7 @@ function PortalChangePasswordView(props) {
       h("style", { type: "text/css" }, styleString))));
 }
 
-const style$3 = {
+const style$4 = {
   Wrapper: AuthWrapper,
   Column: AuthColumn,
   ForgotButtonContainer: {
@@ -1504,28 +1547,28 @@ const vanillaStyle$1 = `
   display: none;
 }
 `;
-const sheet$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$4 = createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 function PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  return (h("div", { class: sheet$3.classes.Wrapper },
+  return (h("div", { class: sheet$4.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle$1,
-      styleString$3),
+      styleString$4),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit },
+    h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
       h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       h("div", null,
         h("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
-        h("div", { class: sheet$3.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
-      h("div", { class: sheet$3.classes.ButtonsContainer },
+        h("div", { class: sheet$4.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      h("div", { class: sheet$4.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
         content.secondaryButton))));
 }
 
-const style$4 = {
+const style$5 = {
   Wrapper: { ...AuthWrapper, "max-width": "600px" },
   Column: AuthColumn,
   HostBlock: HostBlock,
@@ -1551,20 +1594,20 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 function PortalRegisterView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (h("div", { class: sheet$4.classes.Wrapper },
+  return (h("div", { class: sheet$5.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle$2,
-      styleString$4),
+      styleString$5),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    h("sl-form", { class: sheet$5.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,
@@ -1577,7 +1620,7 @@ function PortalRegisterView(props) {
             return "Must be a valid email address";
           }
         } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet$4.classes.ErrorStyle,
+        class: sheet$5.classes.ErrorStyle,
         helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           "Cannot be empty",
       }
@@ -1585,18 +1628,18 @@ function PortalRegisterView(props) {
       !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
       content.passwordField,
       !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
-        class: sheet$4.classes.ErrorStyle,
+        class: sheet$5.classes.ErrorStyle,
         helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
           "Cannot be empty",
       }
         : [])))),
       content.terms,
-      h("div", { class: sheet$4.classes.ButtonsContainer },
+      h("div", { class: sheet$5.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }
 
-const style$5 = {
+const style$6 = {
   Description: {
     "& input[type=checkbox]": {
       display: "none",
@@ -1635,13 +1678,13 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$6 = createStyleSheet(style$6);
+const styleString$6 = sheet$6.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString$5),
-    h("span", { class: sheet$5.classes.Description },
+  return (h("div", { style: { opacity: props.opacity } },
+    h("style", { type: "text/css" }, styleString$6),
+    h("span", { class: sheet$6.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
         h("sl-icon", { name: "chevron-down" })),
@@ -1654,9 +1697,16 @@ const Gift = () => {
     h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
     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: "#EB5757" })));
+};
+const GreyGift = () => {
+  return (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#C9C9C9" }),
+    h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#C9C9C9" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#A5A3A3" }),
+    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$7 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1668,17 +1718,34 @@ const style$6 = {
       lineHeight: "45px",
       userSelect: "none",
     },
+    "& .progress-bar.repeatable-steps": {
+      marginLeft: "var(--sl-spacing-x-small)",
+    },
     "&[data-steps]": {
       marginTop: "calc(-1*var(--sl-spacing-x-small))",
     },
     "&[data-steps]  .progress-bar": {
       marginTop: "var(--sl-spacing-medium)",
     },
-    "&[data-expired]  .progress-bar": {
-      filter: "grayscale(1)",
+    "&[data-expired]  .progress::after": {
+      backgroundColor: "#bfbfbf",
     },
-    "& .progress-bar.repeatable-steps": {
-      marginLeft: "var(--sl-spacing-x-small)",
+    "&[data-expired]  .filled::after": {
+      backgroundColor: "#bfbfbf",
+    },
+    "&[data-complete] .filled::after .progress::after": {
+      backgroundColor: "var(--sl-color-primary-200)",
+    },
+    "& .gift": {
+      textAlign: "center",
+      marginLeft: "-100px",
+      marginRight: "-100px",
+      position: "relative",
+      top: "-18px",
+    },
+    "& .gift.start": {
+      transform: "scale(80%)",
+      top: "-20px",
     },
     "& .filled:after": {
       content: '""',
@@ -1749,30 +1816,16 @@ const style$6 = {
       borderRadius: "4px",
       backgroundColor: "#E0E0E0",
     },
-    "& .gift.bw": {
-      filter: "grayscale(100%)",
-    },
-    "& .gift.start": {
-      transform: "scale(80%)",
-      top: "-20px",
-    },
-    "& .gift": {
-      textAlign: "center",
-      marginLeft: "-100px",
-      marginRight: "-100px",
-      position: "relative",
-      top: "-18px",
-    },
   },
 };
-const sheet$6 = createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
-const styleString$6 = sheet$6.toString();
+const sheet$7 = createStyleSheet(style$7, { classNamePrefix: "sqm-prog-bar" });
+const styleString$7 = sheet$7.toString();
 function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, finite = 0, } = 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-steps": steps, "data-done": goal <= progress },
-    h("style", { type: "text/css" }, styleString$6),
+  return (h("div", { class: sheet$7.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    h("style", { type: "text/css" }, styleString$7),
     h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -1800,7 +1853,7 @@ function buildProgressBar(repeatable, steps, props) {
     }
   }
 }
-function addSteps({ progress, goal }) {
+function addSteps({ progress, goal, expired }) {
   const items = [];
   const columns = [];
   let ratio = 1 / goal;
@@ -1823,21 +1876,22 @@ function addSteps({ progress, goal }) {
     columns.push("0fr");
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, goal));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
   }
   // reward fail
   else {
     columns.push("0fr");
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "empty bg" }, goal));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" },
+      h(GreyGift, null)));
   }
   return {
     items,
     columns: columns.join(" "),
   };
 }
-function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
+function addLinearRepeatable({ progress, goal, progressBarUnit, finite, expired, }) {
   let repetitions = Math.floor(progress / goal);
   let ratio = ((progress % goal) / goal) * 0.5;
   const items = [];
@@ -1849,11 +1903,10 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
     items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(h("div", { class: progress == goal ? "gift" : "gift bw" },
-      h(Gift, null)));
+    items.push(h("div", { class: "gift" }, progress == goal ? expired ? h(GreyGift, null) : h(Gift, null) : h(GreyGift, null)));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, h(GreyGift, null)));
   }
   // single repetition
   else if (repetitions == 1) {
@@ -1861,18 +1914,18 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
       "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, h(GreyGift, null)));
   }
   // finite repetition hit
   else if (finite && repetitions >= finite) {
     if (repetitions > 2) {
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
-      items.push(h("div", { class: "gift start" }, h(Gift, null)));
+      items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
       columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
     }
     else {
@@ -1880,10 +1933,10 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
     }
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
   }
   // multiple repetitions
   else {
@@ -1894,19 +1947,19 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
         (0.5 - ratio) +
         "fr 0fr 0fr";
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-    items.push(h("div", { class: "gift start" }, h(Gift, null)));
+    items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, h(GreyGift, null)));
   }
   return { items, columns };
 }
-function addStepsRepeatable({ progress, goal, finite, }) {
+function addStepsRepeatable({ progress, goal, finite, expired, }) {
   const items = [];
   const columns = [];
   let repetitions = Math.floor(progress / goal);
@@ -1921,14 +1974,14 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "empty bg" }, goal));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
         else if (i == goal * 2) {
           columns.push("0fr");
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "empty bg" }, goal * 2));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
         else {
           items.push(h("div", { class: "remain" }));
@@ -1939,7 +1992,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
         columns.push("0fr");
         items.push(h("div", { class: "filled" }));
         items.push(h("div", { class: "progress bg" }, i));
-        items.push(h("div", { class: "gift" }, h(Gift, null)));
+        items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
       }
       else {
         items.push(h("div", { class: "filled" }));
@@ -1954,7 +2007,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
       columns.push("0fr");
       columns.push("0fr");
       items.push(h("div", { class: "progress bg" }, goal * (finite - 2)));
-      items.push(h("div", { class: "gift start" }, h(Gift, null)));
+      items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
     }
     for (let i = 1; i < goal * 2 + 1; i++) {
       columns.push(ratio + "fr");
@@ -1964,21 +2017,21 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
       }
       else if (i == goal) {
         columns.push("0fr");
         items.push(h("div", { class: "filled" }));
         items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
-        items.push(h("div", { class: "gift" }, h(Gift, null)));
+        items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
       }
       else if (i == goal * 2) {
         columns.push("0fr");
         columns.push("0fr");
         items.push(h("div", { class: "filled" }));
         items.push(h("div", { class: "progress bg" }, goal * finite));
-        items.push(h("div", { class: "gift" }, h(Gift, null)));
+        items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
       }
       else {
         items.push(h("div", { class: "filled" }));
@@ -1993,7 +2046,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
     columns.push("0fr");
     columns.push("0fr");
     items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
-    items.push(h("div", { class: "gift start" }, h(Gift, null)));
+    items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
     for (let i = 1; i < goal * 2 + 1; i++) {
       columns.push(ratio + "fr");
       columns.push("0fr");
@@ -2002,7 +2055,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "filled" }));
           items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-          items.push(h("div", { class: "gift" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
         }
         else {
           items.push(h("div", { class: "filled" }));
@@ -2015,7 +2068,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
         else {
           items.push(h("div", { class: "remain" }));
@@ -2030,7 +2083,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
   }
   return { items, columns: columns.join(" ") };
 }
-function addLinear({ progress, goal, progressBarUnit, }) {
+function addLinear({ progress, goal, progressBarUnit, expired }) {
   const items = [];
   let columns = "";
   const ratio = progress / goal;
@@ -2042,8 +2095,7 @@ function addLinear({ progress, goal, progressBarUnit, }) {
     : progressBarUnit + clamp(progress, 0, goal)));
   items.push(h("div", { class: "remain" }));
   items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-  items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "gift" : "gift bw" },
-    h(Gift, null)));
+  items.push(h("div", { class: "gift" }, clamp(progress, 0, goal) == goal ? (expired ? (h(GreyGift, null)) : (h(Gift, null))) : (h(GreyGift, null))));
   return { items, columns };
 }
 function clamp(x, min, max) {
@@ -2064,7 +2116,7 @@ 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 = {
+const style$8 = {
   TaskCard: {
     display: "inline-block",
     width: "100%",
@@ -2172,6 +2224,12 @@ const style$7 = {
     },
   },
   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)",
@@ -2209,12 +2267,11 @@ const style$7 = {
     "& .datetime": {
       display: "block",
       marginTop: "var(--sl-spacing-xx-small)",
-      color: "var(--sl-color-neutral-400)",
     },
   },
 };
-const sheet$7 = createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
@@ -2249,11 +2306,11 @@ function TaskCardView(props) {
 		margin-bottom: var(--sl-spacing-large);
 	}
   `;
-  return (h("div", { class: sheet$7.classes.TaskCard },
+  return (h("div", { class: sheet$8.classes.TaskCard },
     h("style", { type: "text/css" },
-      styleString$7,
+      styleString$8,
       vanillaStyle),
-    !states.loading && taskNotStarted && (h("div", { class: sheet$7.classes.NotStarted },
+    !states.loading && taskNotStarted && (h("div", { class: sheet$8.classes.NotStarted },
       h("span", { class: "icon" },
         h("sl-icon", { name: "info-circle-fill" })),
       intl.formatMessage({
@@ -2264,7 +2321,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$8.classes.Ended },
       h("span", { class: "icon" },
         h("sl-icon", { name: "exclamation-triangle-fill" })),
       intl.formatMessage({
@@ -2283,8 +2340,8 @@ function TaskCardView(props) {
         : taskComplete
           ? "main complete"
           : "main" },
-      h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
-        h("div", { class: sheet$7.classes.Header }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+      h("div", { class: "container", "data-subdue": taskComplete || taskUnavailable },
+        h("div", { class: sheet$8.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", { class: "value" }, content.rewardAmount),
           h("span", { class: "text" }, content.rewardUnit)))),
@@ -2296,22 +2353,23 @@ function TaskCardView(props) {
                   ? "var(--sl-spacing-xx-large)"
                   : ""
               : "",
+            opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && h(Details, Object.assign({}, props))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet$7.classes.Footer }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        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$8.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
                   ? taskUnavailable
                     ? "icon neutral"
                     : "icon success"
-                  : "icon" }, arrow_left_right$1),
+                  : "icon neutral", "data-subdue": taskComplete || taskUnavailable }, arrow_left_right$1),
               h("span", { class: repetitions > 0
                   ? taskUnavailable
                     ? "neutral"
                     : "success"
-                  : "" }, intl.formatMessage({
+                  : "neutral", "data-subdue": taskComplete || taskUnavailable }, intl.formatMessage({
                 id: "completedMessage",
                 defaultMessage: content.completedText,
               }, {
@@ -2320,7 +2378,7 @@ function TaskCardView(props) {
                   ? Math.min(repetitions, content.finite)
                   : repetitions,
               })))),
-            dateEnd && !taskUnavailable && (h("span", { class: "datetime" }, intl.formatMessage({
+            dateEnd && !taskUnavailable && (h("span", { class: "datetime neutral", "data-subdue": taskComplete || taskUnavailable }, intl.formatMessage({
               id: "expiryMessage",
               defaultMessage: content.expiryMessage,
             }, {
@@ -2332,12 +2390,15 @@ function TaskCardView(props) {
               ? "action neutral"
               : taskComplete
                 ? "action disabled"
-                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable }, content.buttonText))))))));
+                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+              opacity: taskComplete || taskUnavailable ? "0.45" : "1",
+            } }, content.buttonText))))))));
 }
 
 function ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
+  // dependent on props
   const style = {
     Container: {
       position: "relative",
@@ -2448,7 +2509,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$8 = {
+const style$9 = {
   HostBlock: HostBlock,
   Container: {
     minWidth: "300px",
@@ -2799,8 +2860,8 @@ const style$8 = {
   },
 };
 // JSS config
-const sheet$8 = createStyleSheet(style$8);
-const styleString$8 = sheet$8.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;
@@ -2823,7 +2884,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$8.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,
@@ -2831,7 +2892,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$8.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" },
@@ -2850,8 +2911,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       h("div", null,
-        h("div", { class: sheet$8.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$8.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)
@@ -2860,7 +2921,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { class: sheet$8.classes.Card, style: {
+            h("sl-card", { class: sheet$9.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -2877,14 +2938,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                h("div", { class: sheet$8.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$8.classes.TextArea, style: {
+                h("div", { class: sheet$9.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("div", { class: "title", style: {
@@ -2917,7 +2978,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        h("div", { class: sheet$8.classes.Button },
+        h("div", { class: sheet$9.classes.Button },
           h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -2928,7 +2989,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (h("div", null,
-      h("div", { class: sheet$8.classes.ChooseAmount },
+      h("div", { class: sheet$9.classes.ChooseAmount },
         h("div", { class: "wrapper" },
           h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               getAssetPath("./assets/Reward-image.png") }),
@@ -2937,7 +2998,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$8.classes.Button },
+        h("div", { class: sheet$9.classes.Button },
           h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -2945,8 +3006,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$8.classes.Confirmation },
-        h("div", { class: sheet$8.classes.Title }, states.content.text.redeemTitle),
+      h("div", { class: sheet$9.classes.Confirmation },
+        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" },
@@ -2961,13 +3022,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$8.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$8.classes.Success },
+    return (h("div", { class: sheet$9.classes.Success },
       h(Gift$1, null),
       h(Confetti, null),
       h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -2981,8 +3042,8 @@ function RewardExchangeView(props) {
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(ShareLinkView, { shareString: 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$8.classes.Button },
+        h(ShareLinkView, { shareString: 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$9.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -2994,7 +3055,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet$8.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]);
@@ -3006,10 +3067,10 @@ function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet$8.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (h("div", { class: sheet$9.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (h("div", null,
-        h("sl-card", { class: sheet$8.classes.Card },
-          h("div", { class: sheet$8.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",
@@ -3041,12 +3102,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$8.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$9.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (h("div", { class: sheet$8.classes.Container },
-    h("style", { type: "text/css" }, styleString$8),
+  return (h("div", { class: sheet$9.classes.Container },
+    h("style", { type: "text/css" }, styleString$9),
     h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -3073,7 +3134,7 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
         redeemTitle: "Confirm and redeem",
         redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
         doneText: "Done",
-        tooltiptext: "Copied!",
+        tooltipText: "Copied!",
         selectText: "Select amount to receive",
         sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
         rewardRedeemedText: "Reward redeemed",
@@ -3438,6 +3499,7 @@ const empty = {
 };
 
 function CardFeedView(props, children) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       columnGap: props.gap + "px",
@@ -3547,4 +3609,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { rewardExchange as A, BigStatView as B, CardFeedView as C, autoColorScaleCss as D, EditProfileView as E, ShadowViewAddon as F, useBigStat as G, withShadowView as H, demoRewardExchange as I, pathToRegexp as J, LeaderboardView as L, PortalFrameView as P, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, ShareLinkView as a, useShareButton as b, useDemoBigStat as c, PortalChangePasswordView as d, PortalLoginView as e, PortalRegisterView as f, ProgressBarView as g, RewardExchangeView as h, rewardExchangeLongText as i, rewardExchangeSelected as j, chooseAmountFixed as k, chooseAmountFixedNoDescription as l, chooseAmountVariable as m, chooseAmountVariableNoDescription as n, chooseAmountVariableDisabled as o, chooseAmountVariableUnavailable as p, confirmFixed as q, rewardExchangeCustomErrorMsg as r, confirmVariable as s, redemptionError as t, useShareLink as u, queryError as v, success as w, successVariable as x, loading as y, empty as z };
+export { empty as A, BigStatView as B, rewardExchange as C, CardFeedView as D, EditProfileView as E, autoColorScaleCss as F, ShadowViewAddon as G, useBigStat as H, withShadowView as I, demoRewardExchange as J, pathToRegexp as K, LeaderboardView as L, PortalFrameView as P, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, ShareLinkView as a, useShareButton as b, useDemoBigStat as c, StatContainerView as d, PortalChangePasswordView as e, PortalLoginView as f, PortalRegisterView as g, ProgressBarView as h, RewardExchangeView as i, rewardExchangeLongText as j, rewardExchangeSelected as k, chooseAmountFixed as l, chooseAmountFixedNoDescription as m, chooseAmountVariable as n, chooseAmountVariableNoDescription as o, chooseAmountVariableDisabled as p, chooseAmountVariableUnavailable as q, rewardExchangeCustomErrorMsg as r, confirmFixed as s, confirmVariable as t, useShareLink as u, redemptionError as v, queryError as w, success as x, successVariable as y, loading as z };