@saasquatch/mint-components 1.5.0-99 → 1.5.0

package/dist/esm/{ShadowViewAddon-47fc4166.js → ShadowViewAddon-e2ca6a02.js}

@@ -1,14 +1,15 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
-import { k as useState } from './stencil-hooks.module-acc8a613.js';
-import { i as intl } from './global-a8e9f822.js';
-import { d as dist, M, n as ne, x, b as mn, D as De, f as D } from './index.module-2821f17d.js';
+import { k as useState, b as browser, i as useMemo } from './stencil-hooks.module-acc8a613.js';
+import { i as intl } from './global-15cdf41a.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-f5e17a4e.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-f74db584.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" },
@@ -22,27 +23,39 @@ 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) {
+	*::part(base) {
+	border: none;
 			--sl-focus-ring-color-primary: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
       ? medium[props.medium].color
       : ""}80!important;
 
-      background: ${props.backgroundcolor
+	background: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
       ? medium[props.medium].color
       : ""};
-      color: ${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
@@ -51,7 +64,7 @@ function ShareButtonView(props, children) {
       ? medium[props.medium].color
       : ""}D1!important;
 	}
-	
+
 	*::part(base):focus {
 		border-color: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -64,18 +77,7 @@ 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),
@@ -84,22 +86,6 @@ function ShareButtonView(props, children) {
       !props.hidetext && children)));
 }
 
-const style = {
-  HostBlock: HostBlock,
-  inputStyle: {
-    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-function ShareLinkView(props) {
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString),
-    h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open },
-      h("sl-input", { class: sheet.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 })))));
-}
-
 const style$1 = {
   Leaderboard: {
     "& table": {
@@ -152,26 +138,15 @@ 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("LEADERBOARD PROPS", props);
   if (states.loading)
     return (h("div", { class: sheet$1.classes.Leaderboard },
       h("style", { type: "text/css" },
         styleString$1,
         vanillaStyle),
       elements.loadingstate));
+  if (!states.hasLeaders)
+    return elements.empty;
   let userSeenFlag = false;
-  if (!states.hasLeaders) {
-    return (h("div", { class: sheet$1.classes.Leaderboard },
-      h("style", { type: "text/css" },
-        styleString$1,
-        vanillaStyle),
-      h("table", null,
-        h("tr", null,
-          styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
-          h("th", { class: "User" }, styles.usersheading),
-          h("th", { class: "Score" }, styles.statsheading))),
-      elements.empty));
-  }
   return (h("div", { class: sheet$1.classes.Leaderboard },
     h("style", { type: "text/css" },
       styleString$1,
@@ -183,32 +158,86 @@ function LeaderboardView(props) {
         h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
         var _a, _b;
-        if (user.rowNumber === ((_a = data.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+        if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
           userSeenFlag = true;
-        return (h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
+        return (h("tr", { class: !styles.hideViewer &&
+            user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
+            ? "highlight"
+            : "" },
           styles.showRank && h("td", { class: "Rank" }, user.rank),
           h("td", { class: "User" }, user.firstName && user.lastInitial
             ? user.firstName + " " + user.lastInitial
             : user.firstName || user.lastInitial
               ? user.firstName || user.lastInitial
-              : styles.anonymousUser || "Anonymous User"),
+              : styles.anonymousUser),
           h("td", { class: "Score" }, user.value)));
       }),
-      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", null,
+      !userSeenFlag && !styles.hideViewer && (h("tr", null,
         h("td", { colSpan: 100, class: "ellipses" },
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
-      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", { class: "highlight" },
-        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        h("td", { class: "User" }, ((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.firstName) + " " + ((_f = data.userRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.userRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.userRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.userRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.userRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser || "Anonymous User"),
-        h("td", { class: "Score" }, ((_l = data.userRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))),
-      data.leaderboard.length ? elements.empty : "")));
+      !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
+        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
+        h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
+            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
+          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
+            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
+            : styles.anonymousUser),
+        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))))));
 }
 
 const style$2 = {
+  HostBlock: HostBlock,
+  inputStyle: {
+    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+  },
+};
+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$2),
+    h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
+      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",
+      height: "inherit",
+      "justify-content": "space-between",
+      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
+      "align-items": `${alignment === "left"
+        ? "flex-start"
+        : alignment === "right"
+          ? "flex-end"
+          : "center"}`,
+    },
+    Stat: {
+      "font-size": "var(--sl-font-size-x-large)",
+      "text-align": alignment,
+    },
+    Description: {
+      "font-size": "var(--sl-font-size-small)",
+      "font-weight": "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-gray-600)",
+      "text-transform": "uppercase",
+      "text-align": alignment,
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
+    h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
+}
+
+const style$3 = {
   HostBlock: HostBlock,
   ":host": {
     "min-height": "100vh",
@@ -246,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) => {
@@ -330,10 +359,10 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = M() } = props;
-  const user = ne();
-  const engagementMedium = x();
-  const { data } = mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = De(WIDGET_ENGAGEMENT_EVENT);
+  const user = ie();
+  const engagementMedium = Rn();
+  const { data } = sn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = qe(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -419,16 +448,16 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : M();
-  const user = ne();
+  const user = ie();
   const variables = {
-    engagementMedium: x(),
+    engagementMedium: Rn(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = mn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = sn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
-  const environment = D();
+  const environment = kn();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
@@ -447,6 +476,983 @@ function useShareButton(props) {
   return { ...props, loading: res.loading, onClick, hide };
 }
 
+/**
+ * Tokenize input string.
+ */
+function lexer(str) {
+    var tokens = [];
+    var i = 0;
+    while (i < str.length) {
+        var char = str[i];
+        if (char === "*" || char === "+" || char === "?") {
+            tokens.push({ type: "MODIFIER", index: i, value: str[i++] });
+            continue;
+        }
+        if (char === "\\") {
+            tokens.push({ type: "ESCAPED_CHAR", index: i++, value: str[i++] });
+            continue;
+        }
+        if (char === "{") {
+            tokens.push({ type: "OPEN", index: i, value: str[i++] });
+            continue;
+        }
+        if (char === "}") {
+            tokens.push({ type: "CLOSE", index: i, value: str[i++] });
+            continue;
+        }
+        if (char === ":") {
+            var name = "";
+            var j = i + 1;
+            while (j < str.length) {
+                var code = str.charCodeAt(j);
+                if (
+                // `0-9`
+                (code >= 48 && code <= 57) ||
+                    // `A-Z`
+                    (code >= 65 && code <= 90) ||
+                    // `a-z`
+                    (code >= 97 && code <= 122) ||
+                    // `_`
+                    code === 95) {
+                    name += str[j++];
+                    continue;
+                }
+                break;
+            }
+            if (!name)
+                throw new TypeError("Missing parameter name at " + i);
+            tokens.push({ type: "NAME", index: i, value: name });
+            i = j;
+            continue;
+        }
+        if (char === "(") {
+            var count = 1;
+            var pattern = "";
+            var j = i + 1;
+            if (str[j] === "?") {
+                throw new TypeError("Pattern cannot start with \"?\" at " + j);
+            }
+            while (j < str.length) {
+                if (str[j] === "\\") {
+                    pattern += str[j++] + str[j++];
+                    continue;
+                }
+                if (str[j] === ")") {
+                    count--;
+                    if (count === 0) {
+                        j++;
+                        break;
+                    }
+                }
+                else if (str[j] === "(") {
+                    count++;
+                    if (str[j + 1] !== "?") {
+                        throw new TypeError("Capturing groups are not allowed at " + j);
+                    }
+                }
+                pattern += str[j++];
+            }
+            if (count)
+                throw new TypeError("Unbalanced pattern at " + i);
+            if (!pattern)
+                throw new TypeError("Missing pattern at " + i);
+            tokens.push({ type: "PATTERN", index: i, value: pattern });
+            i = j;
+            continue;
+        }
+        tokens.push({ type: "CHAR", index: i, value: str[i++] });
+    }
+    tokens.push({ type: "END", index: i, value: "" });
+    return tokens;
+}
+/**
+ * Parse a string for the raw tokens.
+ */
+function parse(str, options) {
+    if (options === void 0) { options = {}; }
+    var tokens = lexer(str);
+    var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a;
+    var defaultPattern = "[^" + escapeString(options.delimiter || "/#?") + "]+?";
+    var result = [];
+    var key = 0;
+    var i = 0;
+    var path = "";
+    var tryConsume = function (type) {
+        if (i < tokens.length && tokens[i].type === type)
+            return tokens[i++].value;
+    };
+    var mustConsume = function (type) {
+        var value = tryConsume(type);
+        if (value !== undefined)
+            return value;
+        var _a = tokens[i], nextType = _a.type, index = _a.index;
+        throw new TypeError("Unexpected " + nextType + " at " + index + ", expected " + type);
+    };
+    var consumeText = function () {
+        var result = "";
+        var value;
+        // tslint:disable-next-line
+        while ((value = tryConsume("CHAR") || tryConsume("ESCAPED_CHAR"))) {
+            result += value;
+        }
+        return result;
+    };
+    while (i < tokens.length) {
+        var char = tryConsume("CHAR");
+        var name = tryConsume("NAME");
+        var pattern = tryConsume("PATTERN");
+        if (name || pattern) {
+            var prefix = char || "";
+            if (prefixes.indexOf(prefix) === -1) {
+                path += prefix;
+                prefix = "";
+            }
+            if (path) {
+                result.push(path);
+                path = "";
+            }
+            result.push({
+                name: name || key++,
+                prefix: prefix,
+                suffix: "",
+                pattern: pattern || defaultPattern,
+                modifier: tryConsume("MODIFIER") || ""
+            });
+            continue;
+        }
+        var value = char || tryConsume("ESCAPED_CHAR");
+        if (value) {
+            path += value;
+            continue;
+        }
+        if (path) {
+            result.push(path);
+            path = "";
+        }
+        var open = tryConsume("OPEN");
+        if (open) {
+            var prefix = consumeText();
+            var name_1 = tryConsume("NAME") || "";
+            var pattern_1 = tryConsume("PATTERN") || "";
+            var suffix = consumeText();
+            mustConsume("CLOSE");
+            result.push({
+                name: name_1 || (pattern_1 ? key++ : ""),
+                pattern: name_1 && !pattern_1 ? defaultPattern : pattern_1,
+                prefix: prefix,
+                suffix: suffix,
+                modifier: tryConsume("MODIFIER") || ""
+            });
+            continue;
+        }
+        mustConsume("END");
+    }
+    return result;
+}
+/**
+ * Escape a regular expression string.
+ */
+function escapeString(str) {
+    return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
+}
+/**
+ * Get the flags for a regexp from the options.
+ */
+function flags(options) {
+    return options && options.sensitive ? "" : "i";
+}
+/**
+ * Pull out keys from a regexp.
+ */
+function regexpToRegexp(path, keys) {
+    if (!keys)
+        return path;
+    var groupsRegex = /\((?:\?<(.*?)>)?(?!\?)/g;
+    var index = 0;
+    var execResult = groupsRegex.exec(path.source);
+    while (execResult) {
+        keys.push({
+            // Use parenthesized substring match if available, index otherwise
+            name: execResult[1] || index++,
+            prefix: "",
+            suffix: "",
+            modifier: "",
+            pattern: ""
+        });
+        execResult = groupsRegex.exec(path.source);
+    }
+    return path;
+}
+/**
+ * Transform an array into a regexp.
+ */
+function arrayToRegexp(paths, keys, options) {
+    var parts = paths.map(function (path) { return pathToRegexp(path, keys, options).source; });
+    return new RegExp("(?:" + parts.join("|") + ")", flags(options));
+}
+/**
+ * Create a path regexp from string input.
+ */
+function stringToRegexp(path, keys, options) {
+    return tokensToRegexp(parse(path, options), keys, options);
+}
+/**
+ * Expose a function for taking tokens and returning a RegExp.
+ */
+function tokensToRegexp(tokens, keys, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.strict, strict = _a === void 0 ? false : _a, _b = options.start, start = _b === void 0 ? true : _b, _c = options.end, end = _c === void 0 ? true : _c, _d = options.encode, encode = _d === void 0 ? function (x) { return x; } : _d;
+    var endsWith = "[" + escapeString(options.endsWith || "") + "]|$";
+    var delimiter = "[" + escapeString(options.delimiter || "/#?") + "]";
+    var route = start ? "^" : "";
+    // Iterate over the tokens and create our regexp string.
+    for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
+        var token = tokens_1[_i];
+        if (typeof token === "string") {
+            route += escapeString(encode(token));
+        }
+        else {
+            var prefix = escapeString(encode(token.prefix));
+            var suffix = escapeString(encode(token.suffix));
+            if (token.pattern) {
+                if (keys)
+                    keys.push(token);
+                if (prefix || suffix) {
+                    if (token.modifier === "+" || token.modifier === "*") {
+                        var mod = token.modifier === "*" ? "?" : "";
+                        route += "(?:" + prefix + "((?:" + token.pattern + ")(?:" + suffix + prefix + "(?:" + token.pattern + "))*)" + suffix + ")" + mod;
+                    }
+                    else {
+                        route += "(?:" + prefix + "(" + token.pattern + ")" + suffix + ")" + token.modifier;
+                    }
+                }
+                else {
+                    route += "(" + token.pattern + ")" + token.modifier;
+                }
+            }
+            else {
+                route += "(?:" + prefix + suffix + ")" + token.modifier;
+            }
+        }
+    }
+    if (end) {
+        if (!strict)
+            route += delimiter + "?";
+        route += !options.endsWith ? "$" : "(?=" + endsWith + ")";
+    }
+    else {
+        var endToken = tokens[tokens.length - 1];
+        var isEndDelimited = typeof endToken === "string"
+            ? delimiter.indexOf(endToken[endToken.length - 1]) > -1
+            : // tslint:disable-next-line
+                endToken === undefined;
+        if (!strict) {
+            route += "(?:" + delimiter + "(?=" + endsWith + "))?";
+        }
+        if (!isEndDelimited) {
+            route += "(?=" + delimiter + "|" + endsWith + ")";
+        }
+    }
+    return new RegExp(route, flags(options));
+}
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ */
+function pathToRegexp(path, keys, options) {
+    if (path instanceof RegExp)
+        return regexpToRegexp(path, keys);
+    if (Array.isArray(path))
+        return arrayToRegexp(path, keys, options);
+    return stringToRegexp(path, keys, options);
+}
+
+const debug = browser("sq:useBigStat");
+const LOADING = "...";
+const debugQuery = (query, variables, getStat) => {
+  const res = sn(query, variables);
+  if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
+    console.error("issue getting stat:", res);
+  }
+  const stat = getStat(res);
+  return { ...stat, loading: res.loading };
+};
+const referralsCountQuery = (programId, 
+// locale
+_, status) => {
+  const programFilter = programId === "classic"
+    ? { programId_exists: false }
+    : { programId_eq: programId };
+  const convertedFilter = status && status == "converted"
+    ? { dateConverted_exists: true }
+    : status && status == "started"
+      ? { dateConverted_exists: false }
+      : {};
+  const queryFilter = { ...programFilter, ...convertedFilter };
+  return debugQuery(dist.gql `
+      query ($queryFilter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $queryFilter) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, { 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) || 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(),
+    });
+  });
+};
+const programGoalsQuery = (programId, locale, metricType, goalId) => {
+  // Confirm this behaviour
+  if (programId === "classic")
+    return null;
+  return debugQuery(dist.gql `
+      query {
+        viewer {
+          ... on User {
+            programGoals {
+              goalId
+              programId
+              count
+              conversionCount
+            }
+          }
+        }
+      }
+    `, { programId, metricType, goalId, locale }, (res) => {
+    var _a, _b, _c, _d, _e, _f;
+    const goal = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.programGoals) === null || _c === void 0 ? void 0 : _c.filter((goal) => goal.goalId === goalId && goal.programId === programId);
+    return {
+      value: ((_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) || 0,
+      statvalue: ((_f = (_e = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _e === void 0 ? void 0 : _e[metricType]) === null || _f === void 0 ? void 0 : _f.toString()) || 0,
+    };
+  });
+};
+const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
+  return debugQuery(dist.gql `
+      query {
+        viewer {
+          ... on User {
+            customFields
+          }
+        }
+      }
+    `, { fieldName, goalId, locale }, (res) => {
+    var _a, _b, _c;
+    const customField = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.customFields) === null || _c === void 0 ? void 0 : _c[fieldName];
+    return {
+      value: customField || 0,
+      statvalue: (customField === null || customField === void 0 ? void 0 : customField.toString()) || "0",
+    };
+  });
+};
+const referralsMonthQuery = (programId) => {
+  const programFilter = programId === "classic"
+    ? { programId_exists: false }
+    : { programId_eq: programId };
+  const filter = {
+    ...programFilter,
+    dateReferralStarted_timeframe: "this_month",
+  };
+  return debugQuery(dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, { filter }, (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) || 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(),
+    });
+  });
+};
+const referralsWeekQuery = (programId) => {
+  const programFilter = programId === "classic"
+    ? { programId_exists: false }
+    : { programId_eq: programId };
+  const filter = {
+    ...programFilter,
+    dateReferralStarted_timeframe: "this_month",
+  };
+  return debugQuery(dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, { filter }, (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) || 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(),
+    });
+  });
+};
+const rewardsCountQuery = (programId, 
+// locale
+_, global = "") => {
+  return debugQuery(dist.gql `
+      query ($programId: ID) {
+        viewer {
+          ... on User {
+            rewards(filter: { programId_eq: $programId }) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
+};
+const rewardsCountFilteredQuery = (programId, 
+// locale
+_, type, unit, status, global = "") => {
+  const statusFilter = status ? { status } : null;
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $unit: String
+        $type: RewardType
+        $statusFilter: RewardStatusFilterInput
+      ) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                type_eq: $type
+                unit_eq: $unit
+                statuses_eq: $statusFilter
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    unit,
+    type,
+    statusFilter,
+  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
+};
+const integrationRewardsCountFilteredQuery = (programId, 
+// locale
+_, status, global = "") => {
+  const statusFilter = status ? { status } : null;
+  return debugQuery(dist.gql `
+      query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                type_eq: INTEGRATION
+                statuses_eq: $statusFilter
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    statusFilter,
+  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
+};
+const rewardsMonthQuery = (programId, 
+// locale
+_, global = "") => {
+  return debugQuery(dist.gql `
+      query ($programId: ID) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                dateGiven_timeframe: "this_month"
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
+};
+const rewardsWeekQuery = (programId, 
+// locale
+_, global = "") => {
+  return debugQuery(dist.gql `
+      query ($programId: ID) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                dateGiven_timeframe: "this_week"
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
+};
+const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyRedeemedCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyRedeemedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyRedeemedCredit) || fallback,
+    };
+  });
+};
+const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyAssignedCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
+  });
+};
+const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyAvailableValue
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
+    };
+  });
+};
+const parseRewardValueFormat = {
+  prettyValue: "UNIT_FORMATTED",
+  value: "NUMBER_UNFORMATTED",
+};
+const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
+  var _a;
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType!
+        $unit: String!
+        $format: RewardValueFormatType!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: $format
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyAvailableValue(formatType: $format)
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    format: (_a = parseRewardValueFormat[format]) !== null && _a !== void 0 ? _a : "UNIT_FORMATTED",
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
+    };
+  });
+};
+// functions are of the form (programId: string, ...args: string) => string
+const queries = {
+  rewardsAssigned: {
+    label: "Rewards Earned",
+    query: rewardsAssignedQuery,
+  },
+  rewardsRedeemed: {
+    label: "Rewards Paid",
+    query: rewardsRedeemedQuery,
+  },
+  rewardsAvailable: {
+    label: "Rewards Available",
+    query: rewardsAvailableQuery,
+  },
+  referralsCount: {
+    label: "Referrals - Count",
+    query: referralsCountQuery,
+  },
+  referralsMonth: {
+    label: "Referrals - This Month",
+    query: referralsMonthQuery,
+  },
+  referralsWeek: {
+    label: "Referrals - This Week",
+    query: referralsWeekQuery,
+  },
+  rewardsCount: {
+    label: "Rewards",
+    query: rewardsCountQuery,
+  },
+  rewardsCountFiltered: {
+    label: "Rewards",
+    query: rewardsCountFilteredQuery,
+  },
+  integrationRewardsCountFiltered: {
+    label: "Rewards",
+    query: integrationRewardsCountFilteredQuery,
+  },
+  rewardsMonth: {
+    label: "Rewards - This Month",
+    query: rewardsMonthQuery,
+  },
+  rewardsWeek: {
+    label: "Rewards - This Week",
+    query: rewardsWeekQuery,
+  },
+  rewardBalance: {
+    label: "Balance - Credit Earned",
+    query: rewardsBalanceQuery,
+  },
+  programGoals: {
+    label: "Program Goals",
+    query: programGoalsQuery,
+  },
+  customFields: {
+    label: "Custom Fields",
+    query: customFieldsQuery,
+  },
+};
+// this should be exposed in documentation somehow
+const StatPaths = [
+  { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },
+  { name: "customFields", route: "/(customFields)/:customField" },
+  { name: "referralsCount", route: "/(referralsCount)/:status?" },
+  { name: "referralsMonth", route: "/(referralsMonth)" },
+  { name: "referralsWeek", route: "/(referralsWeek)" },
+  { name: "rewardsCount", route: "/(rewardsCount)/:global?" },
+  { name: "rewardsMonth", route: "/(rewardsMonth)/:global?" },
+  { name: "rewardsWeek", route: "/(rewardsWeek)/:global?" },
+  {
+    name: "rewardsCountFiltered",
+    route: "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?",
+  },
+  {
+    name: "integrationRewardsCountFiltered",
+    route: "/(integrationRewardsCountFiltered)/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?",
+  },
+  {
+    name: "rewardsAssigned",
+    route: "/(rewardsAssigned)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsRedeemed",
+    route: "/(rewardsRedeemed)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsAvailable",
+    route: "/(rewardsAvailable)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardBalance",
+    route: "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?",
+  },
+];
+const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
+function useBigStat(props) {
+  var _a;
+  const { statType, flexReverse, alignment, programId = M(), } = props;
+  const locale = An();
+  const userIdent = ie();
+  const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
+    return {
+      props: {
+        value: 0,
+        statvalue: "!!!",
+        flexReverse,
+        alignment,
+        loading: false,
+      },
+      label: "BAD PROP TYPE",
+    };
+  }
+  const result = re.exec(statType);
+  const queryName = result[1];
+  const statPath = StatPaths.find((pattern) => pattern.name === queryName);
+  // Get a list all possible keys in path
+  const keys = [];
+  const regex = pathToRegexp(statPath === null || statPath === void 0 ? void 0 : statPath.route, keys, {
+    strict: false,
+    sensitive: false,
+    end: true,
+  });
+  const allQueryArgs = regex.exec(statType);
+  // Retrieve all key values in order including undefined
+  const queryArgs = keys.map((_, i) => allQueryArgs[i + 1] ? decodeURIComponent(allQueryArgs[i + 1]) : undefined);
+  //  remove query name from list
+  queryArgs.shift();
+  const label = queries[queryName].label;
+  const stat = (userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt) && queries[queryName].query(programId, locale, ...queryArgs);
+  debug("stat:", stat);
+  return {
+    props: {
+      value: stat === null || stat === void 0 ? void 0 : stat.value,
+      statvalue: (_a = stat === null || stat === void 0 ? void 0 : stat.statvalue) !== null && _a !== void 0 ? _a : LOADING,
+      loading: stat === null || stat === void 0 ? void 0 : stat.loading,
+      flexReverse,
+      alignment,
+    },
+    label,
+  };
+}
+
+function useDemoBigStat(props) {
+  const { statType } = props;
+  const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
+    return {
+      props: {
+        value: 0,
+        statvalue: "!!!",
+        loading: false,
+        flexReverse: false,
+        alignment: "center",
+      },
+      label: "BAD PROP TYPE",
+    };
+  }
+  const result = re.exec(statType);
+  const queryName = result[1];
+  const label = queries[queryName].label;
+  return {
+    props: cjs({
+      statvalue: "12345",
+      value: 0,
+      flexReverse: false,
+      alignment: "center",
+    }, props.demoData || {}, { arrayMerge: (_, a) => a }),
+    label: label !== null && label !== void 0 ? label : "Demo Label",
+  };
+}
+
+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": "none",
+      },
+      "& > ::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 transparent",
+      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 = {
@@ -517,7 +1523,7 @@ function PortalChangePasswordView(props) {
       h("style", { type: "text/css" }, styleString))));
 }
 
-const style$3 = {
+const style$4 = {
   Wrapper: AuthWrapper,
   Column: AuthColumn,
   ForgotButtonContainer: {
@@ -538,28 +1544,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,
@@ -585,20 +1591,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,
@@ -611,7 +1617,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",
       }
@@ -619,18 +1625,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",
@@ -669,13 +1675,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" })),
@@ -688,9 +1694,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",
@@ -702,17 +1715,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: '""',
@@ -780,37 +1810,19 @@ const style$6 = {
       display: "flex",
       width: "100%",
       height: "4px",
-      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",
+      borderRadius: "4px",
+      backgroundColor: "#E0E0E0",
     },
   },
 };
-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) {
-  var _a;
-  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;
-  //@ts-ignore
-  console.log("PROGRESS BAR PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
-  console.log({ props });
-  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"
@@ -838,7 +1850,7 @@ function buildProgressBar(repeatable, steps, props) {
     }
   }
 }
-function addSteps({ progress, goal }) {
+function addSteps({ progress, goal, expired }) {
   const items = [];
   const columns = [];
   let ratio = 1 / goal;
@@ -861,21 +1873,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 = [];
@@ -887,11 +1900,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) {
@@ -899,18 +1911,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 {
@@ -918,10 +1930,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 {
@@ -932,19 +1944,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);
@@ -959,14 +1971,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" }));
@@ -977,7 +1989,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" }));
@@ -992,7 +2004,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");
@@ -1002,21 +2014,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" }));
@@ -1031,7 +2043,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");
@@ -1040,7 +2052,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" }));
@@ -1053,7 +2065,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" }));
@@ -1068,7 +2080,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;
@@ -1080,8 +2092,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) {
@@ -1102,7 +2113,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%",
@@ -1111,7 +2122,7 @@ const style$7 = {
       boxSizing: "border-box",
       background: "var(--sl-color-neutral-0)",
       border: "1px solid var(--sl-color-neutral-200)",
-      borderRadius: "var(--sl-border-radius-medium)",
+      borderRadius: "var(--sl-border-radius-large)",
       boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
       fontSize: "var(--sl-font-size-small)",
       lineHeight: "var(--sl-line-height-dense)",
@@ -1144,7 +2155,7 @@ const style$7 = {
     padding: "var(--sl-spacing-medium)",
     color: "var(--sl-color-primary-600)",
     border: "1px solid var(--sl-color-neutral-200)",
-    borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+    borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
     borderBottom: "none",
     background: "var(--sl-color-primary-50)",
     fontWeight: "var(--sl-font-weight-semibold)",
@@ -1161,7 +2172,7 @@ const style$7 = {
     padding: "var(--sl-spacing-medium)",
     color: "var(--sl-color-warning-600)",
     border: "1px solid var(--sl-color-neutral-200)",
-    borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+    borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
     borderBottom: "none",
     background: "var(--sl-color-warning-50)",
     fontWeight: "var(--sl-font-weight-semibold)",
@@ -1210,6 +2221,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)",
@@ -1231,7 +2248,6 @@ const style$7 = {
       marginLeft: "auto",
       "&::part(base)": {
         color: "var(--sl-color-neutral-0)",
-        borderRadius: "var(--sl-border-radius-medium)",
       },
       "&.disabled::part(base)": {
         border: "1px solid var(--sl-color-primary-400)",
@@ -1248,16 +2264,13 @@ 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, _c;
-  console.log("TASK CARD PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
-  console.log({ props });
+  var _a, _b;
   const { callbacks, states, content } = props;
   const dateStart = content.rewardDuration &&
     luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
@@ -1265,11 +2278,10 @@ function TaskCardView(props) {
     luxon.DateTime.fromISO(content.rewardDuration.split("/")[1]);
   const dateToday = luxon.DateTime.now();
   if (content.displayDuration) {
-    const start = (_b = content.displayDuration.split("/")) === null || _b === void 0 ? void 0 : _b[0];
-    const end = (_c = content.displayDuration.split("/")) === null || _c === void 0 ? void 0 : _c[1];
+    const start = (_a = content.displayDuration.split("/")) === null || _a === void 0 ? void 0 : _a[0];
+    const end = (_b = content.displayDuration.split("/")) === null || _b === void 0 ? void 0 : _b[1];
     const displayDateStart = start ? luxon.DateTime.fromISO(start) : dateToday;
     const displayDateEnd = end ? luxon.DateTime.fromISO(end) : dateToday;
-    console.log({ displayDateStart, dateToday, displayDateEnd });
     if (dateToday < displayDateStart || dateToday > displayDateEnd)
       return h("span", null);
   }
@@ -1291,11 +2303,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({
@@ -1306,7 +2318,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({
@@ -1319,14 +2331,14 @@ function TaskCardView(props) {
       }))),
     h("div", { style: {
         borderRadius: taskUnavailable &&
-          "0 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium)",
+          "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
       }, class: taskUnavailable
         ? "main expired"
         : 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)))),
@@ -1338,22 +2350,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,
               }, {
@@ -1362,7 +2375,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,
             }, {
@@ -1374,12 +2387,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",
@@ -1490,370 +2506,373 @@ 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 stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-function RewardExchangeView(props) {
-  const { states, data, callbacks, refs } = props;
-  const { selectedItem, selectedStep } = states;
-  const stageProgressList = {
-    chooseReward: states.content.text.chooseRewardTitle,
-    chooseAmount: states.content.text.chooseAmountTitle,
-    confirmation: states.content.text.confirmationTitle,
-  };
-  const style = {
-    HostBlock: HostBlock,
-    Container: {
-      minWidth: "300px",
-      position: "relative",
+const style$9 = {
+  HostBlock: HostBlock,
+  Container: {
+    minWidth: "300px",
+    position: "relative",
+  },
+  FullImage: {
+    objectFit: "contain",
+    maxWidth: "100%",
+    height: "250px",
+    display: "flex",
+    margin: "0 auto",
+  },
+  Select: {
+    "&::part(label)": {
+    //   color: "var(--sl-color-primary-500)",
     },
-    FullImage: {
-      objectFit: "contain",
-      maxWidth: "100%",
-      height: "250px",
-      display: "flex",
-      margin: "0 auto",
+    "&::part(menu)": {
+      maxHeight: "50vh",
     },
-    Select: {
-      "&::part(label)": {
-        color: "var(--sl-color-primary-500)",
-      },
-      "&::part(menu)": {
-        maxHeight: "50vh",
-      },
-      "& sl-menu-item::part(checked-icon)": {
-        top: "8px",
-      },
-      "& sl-menu-item::part(base)": {
-        flexDirection: "column",
+    "& sl-menu-item::part(checked-icon)": {
+      top: "8px",
+    },
+    "& sl-menu-item::part(base)": {
+      flexDirection: "column",
+    },
+    "& sl-menu-item::part(base):focus": {
+      background: "transparent",
+      color: "var(--sl-color-gray-700)",
+    },
+  },
+  ProgressBar: {
+    maxWidth: "350px",
+    width: "100%",
+    margin: "auto",
+    marginBottom: "var(--sl-spacing-xxx-large)",
+    "& .text-area": {
+      marginTop: "5px",
+      display: "flex",
+      justifyContent: "center",
+      textAlign: "center",
+      whiteSpace: "nowrap",
+      marginBottom: "6px",
+      "& .text": {
+        marginBottom: "var(--sl-spacing-x-small)",
+        flex: "1 1 0",
       },
-      "& sl-menu-item::part(base):focus": {
-        background: "transparent",
-        color: "var(--sl-color-gray-700)",
+      "& .text.subdued": {
+        color: "var(--sl-color-neutral-200)",
       },
     },
-    ProgressBar: {
-      maxWidth: "350px",
+  },
+  CardLayout: {
+    display: "flex",
+    width: "100%",
+    borderRadius: "3px",
+    background: "rgba(0, 0, 0, 0)",
+  },
+  Card: {
+    display: "flex",
+    userSelect: "none",
+    height: "120px",
+    "&::part(base)": {
+      boxShadow: "none",
       width: "100%",
-      margin: "auto",
-      marginBottom: "var(--sl-spacing-xxx-large)",
-      "& .text-area": {
-        marginTop: "5px",
-        display: "flex",
-        justifyContent: "center",
-        textAlign: "center",
-        whiteSpace: "nowrap",
-        marginBottom: "6px",
-        "& .text": {
-          marginBottom: "var(--sl-spacing-x-small)",
-          flex: "1 1 0",
-        },
-        "& .text.subdued": {
-          color: "var(--sl-color-neutral-200)",
-        },
-      },
     },
-    CardLayout: {
+    "&::part(body)": {
       display: "flex",
+      padding: 0,
+    },
+    "& .selected": {
+      position: "relative",
+      top: "-2%",
+      left: "100%",
+      color: "var(--sl-color-primary-500)",
+      margin: "-9px",
+    },
+  },
+  Title: {
+    fontSize: "var(--sl-font-size-large)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    margin: "var(--sl-spacing-large) 0",
+  },
+  Image: {
+    padding: "var(--sl-spacing-small)",
+    minWidth: "96px",
+    maxWidth: "96px",
+    "& .image": {
       width: "100%",
-      borderRadius: "3px",
-      background: "rgba(0, 0, 0, 0)",
+      height: "100%",
+      objectFit: "contain",
+      borderRadius: "4px",
     },
-    Card: {
-      display: "flex",
-      userSelect: "none",
-      height: "120px",
-      "&::part(base)": {
-        boxShadow: "none",
-        width: "100%",
-      },
-      "&::part(body)": {
-        display: "flex",
-        padding: 0,
-      },
-      "& .selected": {
+    "& .image.subdued": {
+      filter: "brightness(0.95)",
+      opacity: "0.5",
+    },
+  },
+  TextArea: {
+    textAlign: "left",
+    padding: "var(--sl-spacing-small)",
+    paddingLeft: "0",
+    "& .title": {
+      fontSize: "var(--sl-font-size-medium)",
+      lineHeight: "var(--sl-line-height-dense)",
+      fontWeight: "600",
+      color: "var(--sl-color-neutral-1000)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+    },
+    "& .amount": {
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-x-small)",
+      color: "var(--sl-color-neutral-500)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+    },
+    "& .error": {
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-x-small)",
+      fontWeight: "600",
+      color: "var(--sl-color-warning-600)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+      "& .icon": {
         position: "relative",
-        top: "-2%",
-        left: "100%",
-        color: "var(--sl-color-primary-500)",
-        margin: "-9px",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-xx-small)",
       },
     },
-    Image: {
-      padding: "var(--sl-spacing-small)",
-      minWidth: "96px",
-      maxWidth: "96px",
-      "& .image": {
-        width: "100%",
-        height: "100%",
-        objectFit: "contain",
-        borderRadius: "4px",
-      },
-      "& .image.subdued": {
-        filter: "brightness(0.95)",
-        opacity: "0.5",
+  },
+  ChooseAmount: {
+    maxWidth: "800px",
+    margin: "auto",
+    "& .wrapper": {
+      display: "flex",
+      gap: "var(--sl-spacing-xx-large)",
+      "@media (max-width: 799px)": {
+        flexDirection: "column",
       },
     },
-    Square: {
-      width: "120px",
-      height: "118px",
-      borderRadius: "3px 0 0 3px",
-      "& .image": {
-        width: "100%",
-        height: "100%",
-        objectFit: "contain",
-        borderRadius: "inherit",
+    "& .image": {
+      width: "50%",
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "250px",
+      display: "flex",
+      "@media (max-width: 799px)": {
+        width: "auto",
       },
     },
-    TextArea: {
-      textAlign: "left",
-      padding: "var(--sl-spacing-small)",
-      paddingLeft: "0",
-      "& .title": {
-        fontSize: "var(--sl-font-size-medium)",
-        lineHeight: "var(--sl-line-height-dense)",
-        fontWeight: "600",
-        color: "var(--sl-color-neutral-1000)",
-        display: "-webkit-box",
-        "-webkit-line-clamp": "1",
-        "-webkit-box-orient": "vertical",
-        overflow: "hidden",
+    "& .text": {
+      width: "50%",
+      maxWidth: "400px",
+      //   minWidth: "330px",
+      "@media (max-width: 799px)": {
+        width: "auto",
+        margin: "auto",
       },
-      "& .amount": {
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginTop: "var(--sl-spacing-x-small)",
-        color: "var(--sl-color-neutral-500)",
-        display: "-webkit-box",
-        "-webkit-line-clamp": "1",
-        "-webkit-box-orient": "vertical",
-        overflow: "hidden",
+    },
+    "& .title": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-neutral-1000)",
+    },
+    "& .points": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-primary-500)",
+    },
+    "& .description": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-neutral-500)",
+      margin: "var(--sl-spacing-medium) 0",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-xx-small)",
+    },
+    "& .space": {
+      marginBottom: "var(--sl-spacing-xxx-large)",
+    },
+    "& sl-menu-item[disabled]::part(label)": {
+      color: "var(--sl-color-neutral-300)",
+    },
+    "& sl-menu-item[disabled]": {
+      "& .step-cost": {
+        color: "var(--sl-color-neutral-300)",
       },
-      "& .error": {
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginTop: "var(--sl-spacing-x-small)",
-        fontWeight: "600",
-        color: "var(--sl-color-warning-600)",
-        display: "-webkit-box",
-        "-webkit-line-clamp": "1",
-        "-webkit-box-orient": "vertical",
-        overflow: "hidden",
-        "& .icon": {
-          position: "relative",
-          top: "0.1em",
-          marginRight: "var(--sl-spacing-xx-small)",
-        },
+      "& .step-value": {
+        color: "var(--sl-color-neutral-300)",
       },
     },
-    ChooseAmount: {
+  },
+  SelectItem: {
+    display: "flex",
+    flexDirection: "column",
+    "&::part(label)": {
+      color: "var(--sl-color-neutral-900)",
+      margin: "0",
+    },
+    "& .step-cost": {
+      color: "var(--sl-color-neutral-500)",
+      marginBottom: "var(--sl-spacing-x-small)",
+    },
+    "& .step-unavailable": {
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-warning-500)",
+      margin: "0",
+    },
+  },
+  Success: {
+    textAlign: "center",
+    "& .title": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-neutral-1000)",
+    },
+    "& .description": {
+      color: "var(--sl-color-neutral-400)",
+      maxWidth: "350px",
+      margin: "0 auto",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginBottom: "var(--sl-spacing-xx-large)",
+      marginTop: "var(--sl-spacing-xx-small)",
+    },
+    "& .promo": {
+      maxWidth: "350px",
+      margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+      textAlign: "left",
+      color: "var(--sl-color-neutral-700)",
+    },
+  },
+  Grid: {
+    display: "grid",
+    justifyContent: "center",
+    gap: "20px",
+    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+  },
+  Confirmation: {
+    maxWidth: "800px",
+    margin: "auto",
+    "& .wrapper": {
       display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      margin: "var(--sl-spacing-medium) 0",
-      "& .wrapper": {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "var(--sl-spacing-xx-large)",
-        "@media (max-width: 799px)": {
-          flexDirection: "column",
-        },
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
       },
-      "& .image": {
-        width: "50%",
-        objectFit: "contain",
-        maxWidth: "100%",
-        height: "250px",
+    },
+    "& .reward-item-container": {
+      "@media (max-width: 499px)": {
         display: "flex",
-        "@media (max-width: 799px)": {
-          width: "auto",
-        },
-      },
-      "& .text": {
-        width: "50%",
-        maxWidth: "400px",
-        minWidth: "330px",
-        "@media (max-width: 799px)": {
-          width: "auto",
-          margin: "auto",
-        },
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-neutral-1000)",
-      },
-      "& .points": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-primary-500)",
-      },
-      "& .description": {
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-500)",
-        margin: "var(--sl-spacing-medium) 0",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginTop: "var(--sl-spacing-xx-small)",
-      },
-      "& .space": {
-        marginBottom: "var(--sl-spacing-xxx-large)",
-      },
-      "& sl-menu-item[disabled]::part(label)": {
-        color: "var(--sl-color-neutral-200)",
-      },
-      "& sl-menu-item[disabled]": {
-        "& .step-cost": {
-          color: "var(--sl-color-neutral-200)",
-        },
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        alignItems: "center",
       },
     },
-    SelectItem: {
-      display: "flex",
-      flexDirection: "column",
-      "& > .step-cost": {
-        color: "var(--sl-color-neutral-400)",
-        height: "0",
-        marginBottom: "5px",
-      },
-      "& > .step-value": {
-        margin: "0",
+    "& .reward-item-container .reward-title": {
+      paddingBottom: "var(--sl-spacing-medium)",
+      lineHeight: "20px",
+      "@media (max-width: 499px)": {
+        paddingBottom: "none",
+        paddingLeft: "var(--sl-spacing-small)",
       },
     },
-    Success: {
-      textAlign: "center",
-      "& .title": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-neutral-1000)",
+    "& .padding": {
+      padding: "var(--sl-spacing-medium) 0",
+      "@media (max-width: 499px)": {
+        padding: "var(--sl-spacing-small) 0",
       },
-      "& .description": {
-        color: "var(--sl-color-neutral-400)",
+    },
+    "& .field": {
+      width: "30%",
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-neutral-400)",
+      textAlign: "left",
+      paddingRight: "var(--sl-spacing-xxx-large)",
+      "@media (max-width: 499px)": {
         width: "100%",
-        maxWidth: "350px",
-        margin: "0 auto",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginBottom: "var(--sl-spacing-xx-large)",
-        marginTop: "var(--sl-spacing-xx-small)",
+        paddingRight: "0",
+        paddingBottom: "0",
       },
     },
-    Grid: {
-      display: "grid",
-      justifyContent: "center",
-      gap: "20px",
-      gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+    "& .value": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
     },
-    Confirmation: {
-      maxWidth: "800px",
-      margin: "auto",
-      "& .wrapper": {
-        display: "flex",
-        "@media (max-width: 499px)": {
-          flexDirection: "column",
-        },
-      },
-      "& .reward-item-container": {
-        "@media (max-width: 499px)": {
-          display: "flex",
-          flexDirection: "row-reverse",
-          justifyContent: "flex-end",
-          alignItems: "center",
-        },
-      },
-      "& .reward-item-container .reward-title": {
-        paddingBottom: "var(--sl-spacing-medium)",
-        lineHeight: "20px",
-        "@media (max-width: 499px)": {
-          paddingBottom: "none",
-          paddingLeft: "var(--sl-spacing-small)",
-        },
-      },
-      "& .padding": {
-        padding: "var(--sl-spacing-medium) 0",
-        "@media (max-width: 499px)": {
-          padding: "var(--sl-spacing-small) 0",
-        },
+    "& .top-border": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& .image": {
+      width: "200px",
+      "@media (max-width: 499px)": {
+        width: "100px",
       },
-      "& .field": {
-        width: "30%",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-medium)",
+    },
+  },
+  Button: {
+    display: "flex",
+    flexWrap: "wrap-reverse",
+    margin: "var(--sl-spacing-medium) 0",
+    "& .cancel": {
+      marginLeft: "auto",
+      marginRight: "var(--sl-spacing-medium)",
+      "&::part(base)": {
         fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-400)",
-        textAlign: "left",
-        paddingRight: "var(--sl-spacing-xxx-large)",
-        "@media (max-width: 499px)": {
-          width: "100%",
-          paddingRight: "0",
-          paddingBottom: "0",
-        },
-      },
-      "& .value": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .top-border": {
-        borderTop: "1px solid var(--sl-color-neutral-200)",
+        color: "var(--sl-color-neutral-1000)",
       },
-      "& .image": {
-        width: "200px",
-        "@media (max-width: 499px)": {
-          width: "100px",
-        },
+      "@media (max-width: 499px)": {
+        width: "100%",
+        marginRight: "0",
+        marginTop: "var(--sl-spacing-small)",
       },
     },
-    Button: {
-      display: "flex",
-      flexWrap: "wrap-reverse",
-      margin: "var(--sl-spacing-medium) 0",
-      "& .cancel": {
-        marginLeft: "auto",
-        marginRight: "var(--sl-spacing-medium)",
-        "&::part(base)": {
-          fontWeight: "var(--sl-font-weight-normal)",
-          color: "var(--sl-color-neutral-1000)",
-        },
-        "@media (max-width: 499px)": {
-          width: "100%",
-          marginRight: "0",
-          marginTop: "var(--sl-spacing-small)",
-        },
-      },
-      "& .continue": {
-        "&::part(base)": {
-          background: "var(--sl-color-primary-500)",
-          borderColor: "var(--sl-color-primary-500)",
-          fontWeight: "var(--sl-font-weight-normal)",
-          color: "var(--sl-color-neutral-0)",
-        },
-        "@media (max-width: 499px)": {
-          width: "100%",
-        },
-      },
-      "& .continue.right": {
-        marginLeft: "auto",
+    "& .continue": {
+      "&::part(base)": {
+        background: "var(--sl-color-primary-500)",
+        borderColor: "var(--sl-color-primary-500)",
+        fontWeight: "var(--sl-font-weight-normal)",
+        color: "var(--sl-color-neutral-0)",
       },
-      "& .continue.center": {
-        margin: "0 auto",
+      "@media (max-width: 499px)": {
+        width: "100%",
       },
     },
-    Confetti: {
-      pointerEvents: "none",
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      top: "0%",
-      left: "0%",
-      zIndex: "1",
+    "& .continue.right": {
+      marginLeft: "auto",
+    },
+    "& .continue.center": {
+      margin: "0 auto",
     },
+  },
+  Confetti: {
+    pointerEvents: "none",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: "0%",
+    left: "0%",
+    zIndex: "1",
+  },
+};
+// JSS config
+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;
+  const { selectedItem, selectedStep } = states;
+  const stageProgressList = {
+    chooseReward: states.content.text.chooseRewardTitle,
+    chooseAmount: states.content.text.chooseAmountTitle,
+    confirmation: states.content.text.confirmationTitle,
   };
-  // JSS config
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
   function getInput() {
     var _a, _b, _c;
     const item = states.selectedItem;
     if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
-      return h("span", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
+      return h("span", { class: "points" }, item === null || item === void 0 ? void 0 : item.prettySourceValue);
     if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
       return (h("p", null, intl.formatMessage({
         id: "notEnoughError",
@@ -1862,42 +2881,35 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    // console.log("SELECTED ITEM ", states.selectedStep);
-    // console.log("CALLBACKS ", callbacks);
-    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.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,
           selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
-      // console.log(item.steps);
       var _a, _b;
-      return (h("sl-menu-item", { value: step, disabled: !step.available },
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$9.classes.SelectItem },
         step.prettyDestinationValue,
-        " ",
         h("br", null),
-        step.unavailableReasonCode && (h("p", { style: {
-            fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-warning-500)",
-            margin: "0",
-          } }, intl.formatMessage({
-          id: "unavailableCode",
-          defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
-        }, {
-          unavailableReasonCode: step.unavailableReasonCode,
-          sourceUnit: item.sourceUnit,
-          sourceValue: step.prettySourceValue || item.prettySourceMinValue,
-        }))),
-        h("div", { class: "step-cost", slot: "suffix" }, step.prettySourceValue)));
+        h("div", { class: "step-cost", slot: "suffix" },
+          step.prettySourceValue,
+          step.unavailableReasonCode && (h("p", { class: "step-unavailable" }, intl.formatMessage({
+            id: "unavailableCode",
+            defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+          }, {
+            unavailableReasonCode: step.unavailableReasonCode,
+            sourceUnit: item.sourceUnit,
+            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
+          }))))));
     })));
   }
   function chooseReward() {
     var _a;
     return [
       h("div", null,
-        h("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.rewardTitle),
-        states.loading ? (loading()) : (h("div", { class: sheet.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)
@@ -1906,7 +2918,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { class: sheet.classes.Card, style: {
+            h("sl-card", { class: sheet$9.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -1923,14 +2935,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                h("div", { class: sheet.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.classes.TextArea, style: {
+                h("div", { class: sheet$9.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("div", { class: "title", style: {
@@ -1963,7 +2975,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        h("div", { class: sheet.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))),
     ];
   }
@@ -1973,30 +2985,26 @@ function RewardExchangeView(props) {
     const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
       ? false
       : input && !states.amount;
-    console.log("input", input);
-    console.log(states.amount);
     return (h("div", null,
-      h("div", { class: sheet.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") }),
           h("div", { class: "text" },
             h("div", { class: "title" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
             ((_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", { class: "points" }, input)),
-            h("div", { class: "space" }),
-            h("div", { class: sheet.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)))))));
+            ((_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$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)))));
   }
   function confirmation() {
-    // console.log(selectedItem);
-    // console.log(selectedStep);
     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("h2", { style: { margin: "var(--sl-spacing-large) 0", textAlign: "center" } }, states.content.text.redeemTitle),
-      h("div", { class: sheet.classes.Confirmation },
+      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" },
@@ -2011,34 +3019,28 @@ 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.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;
-    // console.log("success");
-    return (h("div", { class: sheet.classes.Success },
+    var _a, _b, _c, _d, _e, _f;
+    return (h("div", { class: sheet$9.classes.Success },
       h(Gift$1, null),
       h(Confetti, null),
-      h("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
       h("div", { class: "description" }, intl.formatMessage({
         id: "successMessage",
         defaultMessage: states.content.text.redemptionSuccessText,
       }, {
-        sourceValue: (_a = states.selectedItem.prettySourceValue) !== null && _a !== void 0 ? _a : (_b = states.selectedStep) === null || _b === void 0 ? void 0 : _b.prettySourceValue,
-        destinationValue: ((_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettyDestinationValue) || ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.name) ||
+        sourceValue: (_b = states.selectedItem.prettySourceValue) !== null && _b !== void 0 ? _b : (_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettySourceValue,
+        destinationValue: ((_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettyDestinationValue) || ((_e = states.selectedItem) === null || _e === void 0 ? void 0 : _e.name) ||
           states.selectedItem.globalRewardKey,
       })),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { style: {
-          width: "40%",
-          margin: "-30px auto var(--sl-spacing-xxx-large) auto",
-          textAlign: "left",
-          color: "var(--sl-color-neutral-700)",
-        } },
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_e = states === null || states === void 0 ? void 0 : states.content) === null || _e === void 0 ? void 0 : _e.text.toopTipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
-      h("div", { class: sheet.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 = {
@@ -2050,7 +3052,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet.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]);
@@ -2062,10 +3064,10 @@ function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet.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.classes.Card },
-          h("div", { class: sheet.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",
@@ -2097,23 +3099,24 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$9.classes.Confetti }));
   }
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
+  if (states.noExchangeOptions)
+    return states.content.text.empty;
+  return (h("div", { class: sheet$9.classes.Container },
+    h("style", { type: "text/css" }, styleString$9),
     h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
-      states.queryError && queryErrorMessage(),
+      states.queryError && !states.exchangeError && queryErrorMessage(),
       currentStage && currentStage(),
       states.redeemStage === "success")));
 }
 
-const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false, fueltank = null) => ({
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, exchangeError = false, loading = false, fueltank = null, noExchangeOptions = false, queryError = false) => ({
   states: {
     content: {
       text: {
-        buttonText: "Exchange Rewards",
         notAvailableError: "{unavailableReasonCode, select, NOT_CHAMPION {CUSTOM ERROR MESSAGE } US_TAX {Exceeds tax limit for this year} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }",
         chooseRewardTitle: "Rewards",
         chooseAmountTitle: "Select",
@@ -2127,24 +3130,29 @@ 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",
         redemptionError: "An error occured trying to redeem this reward. Please try again",
+        queryError: "Unable to load reward exchange list. Please try again",
         promoCode: "Promo code",
         skeletonCardNum: 8,
         rewardNameTitle: "Reward Name",
         rewardAmountTitle: "Reward Amount",
         costTitle: "Cost",
+        notEnoughError: "Sorry not enough!",
+        empty: (h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })),
       },
     },
+    queryError: queryError,
     redeemStage: stage,
     amount: 0,
-    exchangeError: error,
+    exchangeError: exchangeError,
     loading: loading,
     selectedItem: selectedItem,
     selectedStep: selectedStep,
+    noExchangeOptions: noExchangeOptions,
     open: false,
   },
   data: {
@@ -2229,19 +3237,19 @@ const demoData = [
     ...baseReward,
     ...selected,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
   },
   {
     ...baseReward,
     ...name("$50 Store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829222/tenant_test_a7iws76wkk4az/wvxtrsytmr4h1ozhxspv.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
     ...fixedValue("100 Points"),
   },
   {
     ...baseReward,
     ...name("Variable amount of store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829263/tenant_test_a7iws76wkk4az/dbo8tb4qpwmhg5iudviq.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
     ...variableValue(20, 100, "Points"),
   },
 ];
@@ -2256,46 +3264,46 @@ const data = [
     ...baseReward,
     ...selected,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
   },
   {
     ...baseReward,
     ...name("A very exclusive gift box"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829284/tenant_test_a7iws76wkk4az/cognmlwma874b5q94hqv.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
     ...fixedValue("30 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...name("$50 Store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829222/tenant_test_a7iws76wkk4az/wvxtrsytmr4h1ozhxspv.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...name("Variable amount of store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829263/tenant_test_a7iws76wkk4az/dbo8tb4qpwmhg5iudviq.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
     ...variableValue(20, 100, "Points"),
   },
   {
     ...baseReward,
     ...notEnoughPoints,
     ...name("A very rare cactus"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829341/tenant_test_a7iws76wkk4az/lgrlweifpsekh2y4zjih.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
     ...fixedValue("2000 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...usTax,
     ...name("$1000 Store credit with a really super long name in the front page"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829384/tenant_test_a7iws76wkk4az/f0dzeyrx3hojncbgim8y.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
     ...fixedValue("2000 SaaSquatch Long Points"),
   },
   {
     ...baseReward,
     ...notEnoughPoints,
     ...name("A holiday gift box"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829450/tenant_test_a7iws76wkk4az/ujzfhfkvwqb02dlgjx6q.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
 ];
@@ -2311,19 +3319,19 @@ const rewardExchangeLongText = {
       ...baseReward,
       ...notEnoughPoints,
       ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
-      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829450/tenant_test_a7iws76wkk4az/ujzfhfkvwqb02dlgjx6q.png"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
       ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
     },
     {
       ...baseReward,
       ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
-      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829384/tenant_test_a7iws76wkk4az/f0dzeyrx3hojncbgim8y.png"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
       ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
     },
     {
       ...baseReward,
       ...name("Suuuuuuuuper aweeeeesssssoooommme reward!!!!!!"),
-      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829222/tenant_test_a7iws76wkk4az/wvxtrsytmr4h1ozhxspv.png"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
       ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
     },
     ...data,
@@ -2335,7 +3343,7 @@ const rewardExchangeCustomErrorMsg = {
       ...baseReward,
       ...customError,
       ...name("A very rare cactus"),
-      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829341/tenant_test_a7iws76wkk4az/lgrlweifpsekh2y4zjih.png"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
       ...fixedValue("2000 SaaSquatch Points"),
     },
     ...data,
@@ -2346,7 +3354,7 @@ const rewardExchangeSelected = {
     ...baseReward,
     ...selected,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
   }),
 };
@@ -2362,7 +3370,7 @@ const chooseAmountVariable = {
   ...baseResponse(data, "chooseAmount", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
     steps: [
       baseStep(20, "$", 40, "Points"),
@@ -2393,7 +3401,7 @@ const chooseAmountVariableDisabled = {
   ...baseResponse(data, "chooseAmount", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
     steps: [
       baseStep(20, "$", 40, "Points"),
@@ -2408,7 +3416,7 @@ const chooseAmountVariableUnavailable = {
   ...baseResponse(data, "chooseAmount", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
     steps: [
       baseStep(20, "$", 40, "Points"),
@@ -2423,7 +3431,7 @@ const chooseAmountFixed = {
   ...baseResponse(data, "chooseAmount", {
     ...baseReward,
     ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829486/tenant_test_a7iws76wkk4az/xtptk0dynrxxlkg0dctb.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
   }),
 };
@@ -2440,7 +3448,7 @@ const confirmFixed = {
   ...baseResponse(data, "confirmation", {
     ...baseReward,
     ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829486/tenant_test_a7iws76wkk4az/xtptk0dynrxxlkg0dctb.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
   }),
 };
@@ -2448,23 +3456,26 @@ const confirmVariable = {
   ...baseResponse(data, "confirmation", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
   }, baseStep(20, "$", 40, "Points")),
 };
-const error = {
+const redemptionError = {
   ...baseResponse(data, "confirmation", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
   }, baseStep(20, "$", 40, "Points"), true),
 };
+const queryError = {
+  ...baseResponse(undefined, "chooseReward", undefined, undefined, undefined, undefined, undefined, undefined, true),
+};
 const success = {
   ...baseResponse(data, "success", {
     ...baseReward,
     ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829486/tenant_test_a7iws76wkk4az/xtptk0dynrxxlkg0dctb.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
   }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
 };
@@ -2472,15 +3483,19 @@ const successVariable = {
   ...baseResponse(data, "success", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829284/tenant_test_a7iws76wkk4az/cognmlwma874b5q94hqv.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
     ...variableValue(20, 80, "Points"),
   }, baseStep(20, "$", 40, "Points")),
 };
 const loading = {
   ...baseResponse(null, "chooseReward", null, null, false, true),
+};
+const empty = {
+  ...baseResponse(null, "chooseReward", null, null, false, false, null, true),
 };
 
 function CardFeedView(props, children) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       columnGap: props.gap + "px",
@@ -2492,7 +3507,6 @@ function CardFeedView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(props);
   const vanillaStyle = `
     :host{
       display: block;   
@@ -2591,4 +3605,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { withShadowView as A, demoRewardExchange as B, CardFeedView as C, EditProfileView as E, LeaderboardView as L, PortalFrameView as P, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, ShareLinkView as a, useShareButton as b, PortalChangePasswordView as c, PortalLoginView as d, PortalRegisterView as e, ProgressBarView as f, RewardExchangeView as g, rewardExchangeLongText as h, rewardExchangeSelected as i, chooseAmountFixed as j, chooseAmountFixedNoDescription as k, chooseAmountVariable as l, chooseAmountVariableNoDescription as m, chooseAmountVariableDisabled as n, chooseAmountVariableUnavailable as o, confirmFixed as p, confirmVariable as q, rewardExchangeCustomErrorMsg as r, error as s, success as t, useShareLink as u, successVariable as v, loading as w, rewardExchange as x, autoColorScaleCss as y, ShadowViewAddon 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 };