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

package/dist/cjs/{ShadowViewAddon-79dd6c07.js → ShadowViewAddon-60ca6e6c.js}

@@ -2,16 +2,16 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-633d1fb7.js');
+const global = require('./global-13123238.js');
 const index_module = require('./index.module-f972f103.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
 const luxon = require('./luxon-59ca7d19.js');
 const utils = require('./utils-01dbfd4a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-d101032e.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-186a5f7e.js');
+const sqmTextSpanView = require('./sqm-text-span-view-c54af22c.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5ea913a8.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-f3c8475a.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -25,40 +25,51 @@ const medium = {
   linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
   pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
 };
+const style = {
+  HostBlock: mixins.HostBlock,
+  buttonStyle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: "0",
+  },
+};
+const sheet = JSS.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;
@@ -68,27 +79,16 @@ function ShareButtonView(props, children) {
 		position: relative;
 		top: 2%;
 	}
-  `;
-  const style = {
-    HostBlock: mixins.HostBlock,
-    buttonStyle: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      lineHeight: "0",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
+	`;
   return props.hide ? (index.h(index.Host, { style: { display: "none" } })) : (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString),
     index.h("style", { type: "text/css" }, vanillaStyle),
     index.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 && (index.h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
-      !props.hidetext && children)));
+      !props.hideIcon && (index.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%",
@@ -129,8 +129,8 @@ const style = {
     },
   },
 };
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 const vanillaStyle = `
 	:host{
 		display: block;
@@ -140,22 +140,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 (index.h("div", { class: sheet.classes.Leaderboard },
+    return (index.h("div", { class: sheet$1.classes.Leaderboard },
       index.h("style", { type: "text/css" },
-        styleString,
+        styleString$1,
         vanillaStyle),
       elements.loadingstate));
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (index.h("div", { class: sheet.classes.Leaderboard },
+  return (index.h("div", { class: sheet$1.classes.Leaderboard },
     index.h("style", { type: "text/css" },
-      styleString,
+      styleString$1,
       vanillaStyle),
     index.h("table", null,
       index.h("tr", null,
@@ -179,7 +175,6 @@ function LeaderboardView(props) {
           index.h("td", { class: "Score" }, user.value)));
       }),
       !userSeenFlag && !styles.hideViewer && (index.h("tr", null,
-        console.log("res", !userSeenFlag && !styles.hideViewer),
         index.h("td", { colSpan: 100, class: "ellipses" },
           index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (index.h("tr", { class: "highlight" },
@@ -193,24 +188,25 @@ function LeaderboardView(props) {
         index.h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))))));
 }
 
-const style$1 = {
+const style$2 = {
   HostBlock: mixins.HostBlock,
   inputStyle: {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
   },
 };
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function ShareLinkView(props) {
   return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$1),
-    index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open },
-      index.h("sl-input", { class: sheet$1.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
+    index.h("style", { type: "text/css" }, styleString$2),
+    index.h("sl-tooltip", { trigger: "manual", content: props.tooltipText, placement: "top-end", disabled: props.disabled, open: props.open },
+      index.h("sl-input", { class: sheet$2.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
         index.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",
@@ -243,7 +239,7 @@ function BigStatView(props) {
     index.h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
 }
 
-const style$2 = {
+const style$3 = {
   HostBlock: mixins.HostBlock,
   ":host": {
     "min-height": "100vh",
@@ -281,17 +277,17 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
   const { data } = props;
-  return (index.h("div", { class: sheet$2.classes.Frame },
-    index.h("style", { type: "text/css" }, styleString$2),
-    index.h("div", { class: sheet$2.classes.HeaderWrapper },
+  return (index.h("div", { class: sheet$3.classes.Frame },
+    index.h("style", { type: "text/css" }, styleString$3),
+    index.h("div", { class: sheet$3.classes.HeaderWrapper },
       data.header,
       index.h("slot", { name: "sqm-navigation-menu" })),
     children,
-    index.h("div", { class: sheet$2.classes.FooterWrapper }, data.footer)));
+    index.h("div", { class: sheet$3.classes.FooterWrapper }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -811,7 +807,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(),
     });
   });
@@ -1415,6 +1411,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 = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.StatFrame },
+    index.h("div", { class: sheet.classes.StatContainer },
+      index.h("style", { type: "text/css" }, styleString),
+      children),
+    index.h("div", { class: sheet.classes.BorderFix })));
+}
+
 function PortalChangePasswordView(props) {
   const { states, callbacks } = props;
   const style = {
@@ -1485,7 +1528,7 @@ function PortalChangePasswordView(props) {
       index.h("style", { type: "text/css" }, styleString))));
 }
 
-const style$3 = {
+const style$4 = {
   Wrapper: mixins.AuthWrapper,
   Column: mixins.AuthColumn,
   ForgotButtonContainer: {
@@ -1506,28 +1549,28 @@ const vanillaStyle$1 = `
   display: none;
 }
 `;
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 function PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  return (index.h("div", { class: sheet$3.classes.Wrapper },
+  return (index.h("div", { class: sheet$4.classes.Wrapper },
     index.h("style", { type: "text/css" },
       vanillaStyle$1,
-      styleString$3),
+      styleString$4),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit },
+    index.h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, props.states.error))),
       index.h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       index.h("div", null,
         index.h("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
-        index.h("div", { class: sheet$3.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
-      index.h("div", { class: sheet$3.classes.ButtonsContainer },
+        index.h("div", { class: sheet$4.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      index.h("div", { class: sheet$4.classes.ButtonsContainer },
         index.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: { ...mixins.AuthWrapper, "max-width": "600px" },
   Column: mixins.AuthColumn,
   HostBlock: mixins.HostBlock,
@@ -1553,20 +1596,20 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = JSS.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 (index.h("div", { class: sheet$4.classes.Wrapper },
+  return (index.h("div", { class: sheet$5.classes.Wrapper },
     index.h("style", { type: "text/css" },
       vanillaStyle$2,
-      styleString$4),
+      styleString$5),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    index.h("sl-form", { class: sheet$5.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
       states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
@@ -1579,7 +1622,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",
       }
@@ -1587,18 +1630,18 @@ function PortalRegisterView(props) {
       !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
       content.passwordField,
       !states.hideInputs && states.confirmPassword && (index.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,
-      index.h("div", { class: sheet$4.classes.ButtonsContainer },
+      index.h("div", { class: sheet$5.classes.ButtonsContainer },
         index.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",
@@ -1637,13 +1680,13 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = JSS.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$6 = JSS.createStyleSheet(style$6);
+const styleString$6 = sheet$6.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$5),
-    index.h("span", { class: sheet$5.classes.Description },
+  return (index.h("div", { style: { opacity: props.opacity } },
+    index.h("style", { type: "text/css" }, styleString$6),
+    index.h("span", { class: sheet$6.classes.Description },
       index.h("input", { type: "checkbox", id: "details-" + rid }),
       index.h("label", { class: "details", htmlFor: "details-" + rid },
         index.h("sl-icon", { name: "chevron-down" })),
@@ -1656,9 +1699,16 @@ const Gift = () => {
     index.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" }),
     index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
     index.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 (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.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" }),
+    index.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" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#A5A3A3" }),
+    index.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",
@@ -1670,17 +1720,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: '""',
@@ -1751,30 +1818,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 = JSS.createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
-const styleString$6 = sheet$6.toString();
+const sheet$7 = JSS.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 (index.h("div", { class: sheet$6.classes.ProgressBar, "data-expired": expired, "data-steps": steps, "data-done": goal <= progress },
-    index.h("style", { type: "text/css" }, styleString$6),
+  return (index.h("div", { class: sheet$7.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    index.h("style", { type: "text/css" }, styleString$7),
     index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -1802,7 +1855,7 @@ function buildProgressBar(repeatable, steps, props) {
     }
   }
 }
-function addSteps({ progress, goal }) {
+function addSteps({ progress, goal, expired }) {
   const items = [];
   const columns = [];
   let ratio = 1 / goal;
@@ -1825,21 +1878,22 @@ function addSteps({ progress, goal }) {
     columns.push("0fr");
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: "progress bg" }, goal));
-    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
   }
   // reward fail
   else {
     columns.push("0fr");
     items.push(index.h("div", { class: "remain" }));
     items.push(index.h("div", { class: "empty bg" }, goal));
-    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" },
+      index.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 = [];
@@ -1851,11 +1905,10 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
     items.push(index.h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
     items.push(index.h("div", { class: "remain" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(index.h("div", { class: progress == goal ? "gift" : "gift bw" },
-      index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, progress == goal ? expired ? index.h(GreyGift, null) : index.h(Gift, null) : index.h(GreyGift, null)));
     items.push(index.h("div", { class: "remain" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
   }
   // single repetition
   else if (repetitions == 1) {
@@ -1863,18 +1916,18 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
       "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
     items.push(index.h("div", { class: "remain" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
   }
   // finite repetition hit
   else if (finite && repetitions >= finite) {
     if (repetitions > 2) {
       items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
-      items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+      items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
       columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
     }
     else {
@@ -1882,10 +1935,10 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
     }
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
-    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
-    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
   }
   // multiple repetitions
   else {
@@ -1896,19 +1949,19 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
         (0.5 - ratio) +
         "fr 0fr 0fr";
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-    items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
     items.push(index.h("div", { class: "remain" }));
     items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift" }, index.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);
@@ -1923,14 +1976,14 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(index.h("div", { class: "remain" }));
           items.push(index.h("div", { class: "empty bg" }, goal));
-          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
         }
         else if (i == goal * 2) {
           columns.push("0fr");
           columns.push("0fr");
           items.push(index.h("div", { class: "remain" }));
           items.push(index.h("div", { class: "empty bg" }, goal * 2));
-          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
         }
         else {
           items.push(index.h("div", { class: "remain" }));
@@ -1941,7 +1994,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
         columns.push("0fr");
         items.push(index.h("div", { class: "filled" }));
         items.push(index.h("div", { class: "progress bg" }, i));
-        items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+        items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
       }
       else {
         items.push(index.h("div", { class: "filled" }));
@@ -1956,7 +2009,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
       columns.push("0fr");
       columns.push("0fr");
       items.push(index.h("div", { class: "progress bg" }, goal * (finite - 2)));
-      items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+      items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
     }
     for (let i = 1; i < goal * 2 + 1; i++) {
       columns.push(ratio + "fr");
@@ -1966,21 +2019,21 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(index.h("div", { class: "remain" }));
           items.push(index.h("div", { class: "progress bg" }, goal * (finite - 1)));
-          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
         }
       }
       else if (i == goal) {
         columns.push("0fr");
         items.push(index.h("div", { class: "filled" }));
         items.push(index.h("div", { class: "progress bg" }, goal * (finite - 1)));
-        items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+        items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
       }
       else if (i == goal * 2) {
         columns.push("0fr");
         columns.push("0fr");
         items.push(index.h("div", { class: "filled" }));
         items.push(index.h("div", { class: "progress bg" }, goal * finite));
-        items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+        items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
       }
       else {
         items.push(index.h("div", { class: "filled" }));
@@ -1995,7 +2048,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
     columns.push("0fr");
     columns.push("0fr");
     items.push(index.h("div", { class: "progress bg" }, goal * (repetitions - 1)));
-    items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
     for (let i = 1; i < goal * 2 + 1; i++) {
       columns.push(ratio + "fr");
       columns.push("0fr");
@@ -2004,7 +2057,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(index.h("div", { class: "filled" }));
           items.push(index.h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-          items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+          items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
         }
         else {
           items.push(index.h("div", { class: "filled" }));
@@ -2017,7 +2070,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(index.h("div", { class: "remain" }));
           items.push(index.h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
         }
         else {
           items.push(index.h("div", { class: "remain" }));
@@ -2032,7 +2085,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;
@@ -2044,8 +2097,7 @@ function addLinear({ progress, goal, progressBarUnit, }) {
     : progressBarUnit + clamp(progress, 0, goal)));
   items.push(index.h("div", { class: "remain" }));
   items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
-  items.push(index.h("div", { class: clamp(progress, 0, goal) == goal ? "gift" : "gift bw" },
-    index.h(Gift, null)));
+  items.push(index.h("div", { class: "gift" }, clamp(progress, 0, goal) == goal ? (expired ? (index.h(GreyGift, null)) : (index.h(Gift, null))) : (index.h(GreyGift, null))));
   return { items, columns };
 }
 function clamp(x, min, max) {
@@ -2066,7 +2118,7 @@ const arrow_left_right = () => {
     index.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%",
@@ -2174,6 +2226,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)",
@@ -2211,12 +2269,11 @@ const style$7 = {
     "& .datetime": {
       display: "block",
       marginTop: "var(--sl-spacing-xx-small)",
-      color: "var(--sl-color-neutral-400)",
     },
   },
 };
-const sheet$7 = JSS.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = JSS.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
@@ -2251,11 +2308,11 @@ function TaskCardView(props) {
 		margin-bottom: var(--sl-spacing-large);
 	}
   `;
-  return (index.h("div", { class: sheet$7.classes.TaskCard },
+  return (index.h("div", { class: sheet$8.classes.TaskCard },
     index.h("style", { type: "text/css" },
-      styleString$7,
+      styleString$8,
       vanillaStyle),
-    !states.loading && taskNotStarted && (index.h("div", { class: sheet$7.classes.NotStarted },
+    !states.loading && taskNotStarted && (index.h("div", { class: sheet$8.classes.NotStarted },
       index.h("span", { class: "icon" },
         index.h("sl-icon", { name: "info-circle-fill" })),
       global.intl.formatMessage({
@@ -2266,7 +2323,7 @@ function TaskCardView(props) {
           .setLocale(utils.luxonLocale(states.locale))
           .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
-    !states.loading && taskEnded && (index.h("div", { class: sheet$7.classes.Ended },
+    !states.loading && taskEnded && (index.h("div", { class: sheet$8.classes.Ended },
       index.h("span", { class: "icon" },
         index.h("sl-icon", { name: "exclamation-triangle-fill" })),
       global.intl.formatMessage({
@@ -2285,8 +2342,8 @@ function TaskCardView(props) {
         : taskComplete
           ? "main complete"
           : "main" },
-      index.h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
-        index.h("div", { class: sheet$7.classes.Header }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
+      index.h("div", { class: "container", "data-subdue": taskComplete || taskUnavailable },
+        index.h("div", { class: sheet$8.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
           showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           index.h("span", { class: "value" }, content.rewardAmount),
           index.h("span", { class: "text" }, content.rewardUnit)))),
@@ -2298,22 +2355,23 @@ function TaskCardView(props) {
                   ? "var(--sl-spacing-xx-large)"
                   : ""
               : "",
+            opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && index.h(Details, Object.assign({}, props))),
-        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
-        index.h("div", { class: sheet$7.classes.Footer }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
+        states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (index.h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        index.h("div", { class: sheet$8.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
           index.h("span", { class: "text" },
             content.repeatable && (index.h("div", null,
               index.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),
               index.h("span", { class: repetitions > 0
                   ? taskUnavailable
                     ? "neutral"
                     : "success"
-                  : "" }, global.intl.formatMessage({
+                  : "neutral", "data-subdue": taskComplete || taskUnavailable }, global.intl.formatMessage({
                 id: "completedMessage",
                 defaultMessage: content.completedText,
               }, {
@@ -2322,7 +2380,7 @@ function TaskCardView(props) {
                   ? Math.min(repetitions, content.finite)
                   : repetitions,
               })))),
-            dateEnd && !taskUnavailable && (index.h("span", { class: "datetime" }, global.intl.formatMessage({
+            dateEnd && !taskUnavailable && (index.h("span", { class: "datetime neutral", "data-subdue": taskComplete || taskUnavailable }, global.intl.formatMessage({
               id: "expiryMessage",
               defaultMessage: content.expiryMessage,
             }, {
@@ -2334,12 +2392,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",
@@ -2450,7 +2511,7 @@ function ProgressBar({ stageCount, currentStage, }) {
   return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
 }
 
-const style$8 = {
+const style$9 = {
   HostBlock: mixins.HostBlock,
   Container: {
     minWidth: "300px",
@@ -2801,8 +2862,8 @@ const style$8 = {
   },
 };
 // JSS config
-const sheet$8 = JSS.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$9 = JSS.createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -2825,7 +2886,7 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    return (index.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 (index.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,
@@ -2833,7 +2894,7 @@ function RewardExchangeView(props) {
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
-      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$8.classes.SelectItem },
+      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$9.classes.SelectItem },
         step.prettyDestinationValue,
         index.h("br", null),
         index.h("div", { class: "step-cost", slot: "suffix" },
@@ -2852,8 +2913,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       index.h("div", null,
-        index.h("div", { class: sheet$8.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$8.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        index.h("div", { class: sheet$9.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (index.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)
@@ -2862,7 +2923,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (index.h("div", { key: item.key, style: style },
-            index.h("sl-card", { class: sheet$8.classes.Card, style: {
+            index.h("sl-card", { class: sheet$9.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -2879,14 +2940,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                index.h("div", { class: sheet$8.classes.Image, style: {
+                index.h("div", { class: sheet$9.classes.Image, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("img", { class: item.unavailableReasonCode
                       ? "image subdued"
                       : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
                       index.getAssetPath("./assets/Reward-image.png") })),
-                index.h("div", { class: sheet$8.classes.TextArea, style: {
+                index.h("div", { class: sheet$9.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("div", { class: "title", style: {
@@ -2919,7 +2980,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        index.h("div", { class: sheet$8.classes.Button },
+        index.h("div", { class: sheet$9.classes.Button },
           index.h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -2930,7 +2991,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", { class: sheet$8.classes.ChooseAmount },
+      index.h("div", { class: sheet$9.classes.ChooseAmount },
         index.h("div", { class: "wrapper" },
           index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               index.getAssetPath("./assets/Reward-image.png") }),
@@ -2939,7 +3000,7 @@ function RewardExchangeView(props) {
             ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "points" }, input)) : (index.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" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", null, input)),
             index.h("div", { class: "space" }))),
-        index.h("div", { class: sheet$8.classes.Button },
+        index.h("div", { class: sheet$9.classes.Button },
           index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -2947,8 +3008,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 (index.h("div", null,
-      index.h("div", { class: sheet$8.classes.Confirmation },
-        index.h("div", { class: sheet$8.classes.Title }, states.content.text.redeemTitle),
+      index.h("div", { class: sheet$9.classes.Confirmation },
+        index.h("div", { class: sheet$9.classes.Title }, states.content.text.redeemTitle),
         index.h("div", { class: "wrapper" },
           index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
           index.h("div", { class: "reward-item-container" },
@@ -2963,13 +3024,13 @@ function RewardExchangeView(props) {
         index.h("div", { class: "wrapper top-border padding" },
           index.h("div", { class: "field" }, states.content.text.costTitle),
           index.h("div", { class: "value" }, cost)),
-        index.h("div", { class: sheet$8.classes.Button },
+        index.h("div", { class: sheet$9.classes.Button },
           index.h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
           index.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 (index.h("div", { class: sheet$8.classes.Success },
+    return (index.h("div", { class: sheet$9.classes.Success },
       index.h(Gift$1, null),
       index.h(Confetti, null),
       index.h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -2983,8 +3044,8 @@ function RewardExchangeView(props) {
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { class: "promo" },
         states.content.text.promoCode,
-        index.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 }))),
-      index.h("div", { class: sheet$8.classes.Button },
+        index.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 }))),
+      index.h("div", { class: sheet$9.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -2996,7 +3057,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { class: sheet$8.classes.ProgressBar },
+    return (index.h("div", { class: sheet$9.classes.ProgressBar },
       index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return index.h("span", { class: "text" }, stageProgressList[stage]);
@@ -3008,10 +3069,10 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet$8.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$9.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
-        index.h("sl-card", { class: sheet$8.classes.Card },
-          index.h("div", { class: sheet$8.classes.CardLayout },
+        index.h("sl-card", { class: sheet$9.classes.Card },
+          index.h("div", { class: sheet$9.classes.CardLayout },
             index.h("div", null,
               index.h("sl-skeleton", { style: {
                   width: "100px",
@@ -3043,12 +3104,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 (index.h("div", { class: sheet$8.classes.Container },
-    index.h("style", { type: "text/css" }, styleString$8),
+  return (index.h("div", { class: sheet$9.classes.Container },
+    index.h("style", { type: "text/css" }, styleString$9),
     index.h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -3075,7 +3136,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",
@@ -3440,6 +3501,7 @@ const empty = {
 };
 
 function CardFeedView(props, children) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       columnGap: props.gap + "px",
@@ -3563,6 +3625,7 @@ exports.RewardExchangeView = RewardExchangeView;
 exports.ShadowViewAddon = ShadowViewAddon;
 exports.ShareButtonView = ShareButtonView;
 exports.ShareLinkView = ShareLinkView;
+exports.StatContainerView = StatContainerView;
 exports.TaskCardView = TaskCardView;
 exports.autoColorScaleCss = autoColorScaleCss;
 exports.chooseAmountFixed = chooseAmountFixed;