@saasquatch/mint-components 1.3.3-3 → 1.3.3-4

package/dist/cjs/{useDemoBigStat-f22ebd22.js → useDemoBigStat-f0d2570c.js}

@@ -1,578 +1,872 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-426df801.js');
-const index_module = require('./index.module-89be78a4.js');
-const index$1 = require('./index-8c6255f5.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-62f8ddc9.js');
+const _extends = require('./extends-0302d27d.js');
+const index_module = require('./index.module-66cd975e.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 
-function BigStatView(props, children) {
-  const { statvalue, flexReverse, alignment } = props;
-  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,
-    },
-  };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", { part: "stat-wrapper", class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
-    index.h("div", { part: "stat-description", class: sheet.classes.Description }, children)));
+/**
+ * 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);
+}
+
+function BigStatView(props, children) {
+  const { statvalue, flexReverse, alignment } = props;
+  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,
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { part: "stat-wrapper", class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
+    index.h("div", { part: "stat-description", class: sheet.classes.Description }, children)));
 }
 
-const debug = stencilHooks_module.browser("sq:useBigStat");
-const LOADING = "...";
-const debugQuery = (query, variables, getStat) => {
-  const res = index_module.en(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;
-};
-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(index_module.dist.gql `
-      query ($queryFilter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $queryFilter) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, { queryFilter }, (res) => { var _a, _b, _c, _d; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const programGoalsQuery = (programId, locale, metricType, goalId) => {
-  // Confirm this behaviour
-  if (programId === "classic")
-    return null;
-  return debugQuery(index_module.dist.gql `
-      query {
-        viewer {
-          ... on User {
-            programGoals {
-              goalId
-              programId
-              count
-              conversionCount
-            }
-          }
-        }
-      }
-    `, { programId, metricType, goalId, locale }, (res) => {
-    var _a, _b, _c, _d, _e;
-    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 ((_e = (_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) === null || _e === void 0 ? void 0 : _e.toString()) || 0;
-  });
-};
-const referralsMonthQuery = (programId) => {
-  const programFilter = programId === "classic"
-    ? { programId_exists: false }
-    : { programId_eq: programId };
-  const filter = {
-    ...programFilter,
-    dateReferralStarted_timeframe: "this_month",
-  };
-  return debugQuery(index_module.dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const referralsWeekQuery = (programId) => {
-  const programFilter = programId === "classic"
-    ? { programId_exists: false }
-    : { programId_eq: programId };
-  const filter = {
-    ...programFilter,
-    dateReferralStarted_timeframe: "this_month",
-  };
-  return debugQuery(index_module.dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const rewardsCountQuery = (programId, 
-// locale
-_, global = "") => {
-  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const rewardsCountFilteredQuery = (programId, 
-// locale
-_, type, unit, status, global = "") => {
-  const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const integrationRewardsCountFilteredQuery = (programId, 
-// locale
-_, status, global = "") => {
-  const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const rewardsMonthQuery = (programId, 
-// locale
-_, global = "") => {
-  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const rewardsWeekQuery = (programId, 
-// locale
-_, global = "") => {
-  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
-};
-const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.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 }
-            ) {
-              ... on CreditRewardBalance {
-                prettyRedeemedCredit
-              }
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    type,
-    unit,
-    locale,
-  }, (res) => {
-    var _a, _b, _c, _d;
-    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyRedeemedCredit) || fallback;
-  });
-};
-const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.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 }
-            ) {
-              ... on CreditRewardBalance {
-                prettyAssignedCredit
-              }
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    type,
-    unit,
-    locale,
-  }, (res) => {
-    var _a, _b, _c, _d;
-    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || fallback;
-  });
-};
-const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.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 }
-            ) {
-              ... on CreditRewardBalance {
-                prettyAvailableValue
-              }
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    type,
-    unit,
-    locale,
-  }, (res) => {
-    var _a, _b, _c, _d;
-    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || fallback;
-  });
-};
-const parseRewardValueFormat = {
-  prettyValue: "UNIT_FORMATTED",
-  value: "NUMBER_UNFORMATTED",
-};
-const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
-  var _a;
-  return debugQuery(index_module.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 }
-            ) {
-              ... 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;
-    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.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,
-  },
-};
-// this should be exposed in documentation somehow
-const StatPaths = [
-  { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },
-  { 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) => index$1.pathToRegexp(pattern.route));
-function useBigStat(props) {
-  const { statType, flexReverse, alignment } = props;
-  const programId = index_module.M();
-  const locale = index_module.R();
-  const userIdent = index_module.T();
-  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
-  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
-    return {
-      props: { statvalue: "!!!", flexReverse, alignment },
-      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 = index$1.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: { statvalue: stat !== null && stat !== void 0 ? stat : LOADING, flexReverse, alignment },
-    label,
-  };
+const debug = _extends.browser("sq:useBigStat");
+const LOADING = "...";
+const debugQuery = (query, variables, getStat) => {
+  const res = index_module.en(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;
+};
+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(index_module.dist.gql `
+      query ($queryFilter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $queryFilter) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, { queryFilter }, (res) => { var _a, _b, _c, _d; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const programGoalsQuery = (programId, locale, metricType, goalId) => {
+  // Confirm this behaviour
+  if (programId === "classic")
+    return null;
+  return debugQuery(index_module.dist.gql `
+      query {
+        viewer {
+          ... on User {
+            programGoals {
+              goalId
+              programId
+              count
+              conversionCount
+            }
+          }
+        }
+      }
+    `, { programId, metricType, goalId, locale }, (res) => {
+    var _a, _b, _c, _d, _e;
+    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 ((_e = (_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) === null || _e === void 0 ? void 0 : _e.toString()) || 0;
+  });
+};
+const referralsMonthQuery = (programId) => {
+  const programFilter = programId === "classic"
+    ? { programId_exists: false }
+    : { programId_eq: programId };
+  const filter = {
+    ...programFilter,
+    dateReferralStarted_timeframe: "this_month",
+  };
+  return debugQuery(index_module.dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const referralsWeekQuery = (programId) => {
+  const programFilter = programId === "classic"
+    ? { programId_exists: false }
+    : { programId_eq: programId };
+  const filter = {
+    ...programFilter,
+    dateReferralStarted_timeframe: "this_month",
+  };
+  return debugQuery(index_module.dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
+    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const rewardsCountQuery = (programId, 
+// locale
+_, global = "") => {
+  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const rewardsCountFilteredQuery = (programId, 
+// locale
+_, type, unit, status, global = "") => {
+  const statusFilter = status ? { status } : null;
+  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const integrationRewardsCountFilteredQuery = (programId, 
+// locale
+_, status, global = "") => {
+  const statusFilter = status ? { status } : null;
+  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const rewardsMonthQuery = (programId, 
+// locale
+_, global = "") => {
+  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const rewardsWeekQuery = (programId, 
+// locale
+_, global = "") => {
+  return debugQuery(index_module.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; return (_d = (_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) === null || _d === void 0 ? void 0 : _d.toString(); });
+};
+const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(index_module.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 }
+            ) {
+              ... on CreditRewardBalance {
+                prettyRedeemedCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d;
+    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyRedeemedCredit) || fallback;
+  });
+};
+const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(index_module.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 }
+            ) {
+              ... on CreditRewardBalance {
+                prettyAssignedCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d;
+    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || fallback;
+  });
+};
+const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(index_module.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 }
+            ) {
+              ... on CreditRewardBalance {
+                prettyAvailableValue
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d;
+    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || fallback;
+  });
+};
+const parseRewardValueFormat = {
+  prettyValue: "UNIT_FORMATTED",
+  value: "NUMBER_UNFORMATTED",
+};
+const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
+  var _a;
+  return debugQuery(index_module.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 }
+            ) {
+              ... 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;
+    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 ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.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,
+  },
+};
+// this should be exposed in documentation somehow
+const StatPaths = [
+  { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },
+  { 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) {
+  const { statType, flexReverse, alignment } = props;
+  const programId = index_module.M();
+  const locale = index_module.R();
+  const userIdent = index_module.T();
+  const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
+    return {
+      props: { statvalue: "!!!", flexReverse, alignment },
+      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: { statvalue: stat !== null && stat !== void 0 ? stat : LOADING, flexReverse, alignment },
+    label,
+  };
 }
 
-function useDemoBigStat(props) {
-  const { statType } = props;
-  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
-  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
-    return {
-      props: {
-        statvalue: "!!!",
-        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.cjs({
-      statvalue: "12345",
-      flexReverse: false,
-      alignment: "center",
-    }, props.demoData || {}, { arrayMerge: (_, a) => a }),
-    label: label !== null && label !== void 0 ? label : "Demo Label",
-  };
+function useDemoBigStat(props) {
+  const { statType } = props;
+  const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
+    return {
+      props: {
+        statvalue: "!!!",
+        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.cjs({
+      statvalue: "12345",
+      flexReverse: false,
+      alignment: "center",
+    }, props.demoData || {}, { arrayMerge: (_, a) => a }),
+    label: label !== null && label !== void 0 ? label : "Demo Label",
+  };
 }
 
 exports.BigStatView = BigStatView;
+exports.pathToRegexp = pathToRegexp;
 exports.useBigStat = useBigStat;
 exports.useDemoBigStat = useDemoBigStat;