@saasquatch/mint-components 1.5.0-3 → 1.5.0-30

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4d78fd6d.js');
+require('./sqm-text-span-view-96f53c04.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-3d591372.js');
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f;
   const [reset, setReset] = _extends.useState(false);
   const [error, setError] = _extends.useState("");
-  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = index_module.Re();
-  const [resetPassword, resetPasswordState] = index_module.$e();
+  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = index_module.Je();
+  const [resetPassword, resetPasswordState] = index_module.Le();
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   urlParams.delete("oobCode");
@@ -38,14 +38,14 @@ function usePortalResetPassword(props) {
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    index_module.rn.push({
+    index_module.pn.push({
       pathname: nextPageOverride || props.nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
   const failed = () => {
-    index_module.rn.push({
-      pathname: "/",
+    index_module.pn.push({
+      pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -93,9 +93,17 @@ const PortalResetPassword = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
+     * The page that users are redirected to when the password reset succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     /**
      * @uiName Show confirm password
      */
@@ -132,7 +140,7 @@ const PortalResetPassword = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = index_module.j()
+    const { states, callbacks } = index_module.k()
       ? usePortalResetPasswordDemo(this)
       : usePortalResetPassword(this);
     return index.h(sqmPortalResetPasswordView.PortalResetPasswordView, { states: states, callbacks: callbacks });

package/dist/cjs/{sqm-portal-section-view-3b008930.js → sqm-portal-section-view-2b445aa0.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 
 function PortalSectionView(props) {
   const style = {
@@ -11,13 +11,10 @@ function PortalSectionView(props) {
         : `var(--sl-spacing-${props.labelMargin})`,
     },
     SectionContainer: {
-      padding: props.padding === "none"
-        ? "0"
-        : `var(--sl-spacing-${props.padding})`,
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.SectionContainer },
     index.h("style", { type: "text/css" }, styleString),

package/dist/cjs/{sqm-portal-verify-email-view-b595e302.js → sqm-portal-verify-email-view-0de55d6d.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 const mixins = require('./mixins-7b7c59fe.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+const sqmTextSpanView = require('./sqm-text-span-view-96f53c04.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,
@@ -20,8 +20,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -5,33 +5,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-7dd4b981.js');
-require('./jss-preset-default.esm-6304d24f.js');
+const index_module = require('./index.module-548bf279.js');
+require('./JSS-95c698c1.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-b595e302.js');
+require('./sqm-text-span-view-96f53c04.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-0de55d6d.js');
 
-function usePortalVerifyEmail({ nextPage }) {
+function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = _extends.useState(false);
   const [disableContinue, setDisableContinue] = _extends.useState(true);
-  const userIdent = index_module.T();
-  const [request, { loading, data, errors }] = index_module.Le();
+  const userIdent = index_module.ne();
+  const [request, { loading, data, errors }] = index_module.tn();
   const [error, setError] = _extends.useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
   urlParams.delete("oobCode");
   const failed = () => {
-    return index_module.rn.push({
-      pathname: "/",
+    return index_module.pn.push({
+      pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    return index_module.rn.push({
+    return index_module.pn.push({
       pathname: nextPageOverride || nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
@@ -96,14 +96,22 @@ const PortalVerifyEmail = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
+     * The page that users are redirected to when the verification succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if verification fails due to outdated verification attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     _extends.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const { states, data, callbacks } = index_module.j()
+    const { states, data, callbacks } = index_module.k()
       ? usePortalVerifyEmailDemo(this)
       : usePortalVerifyEmail(this);
     return (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks }));

package/dist/cjs/sqm-program-explainer-step-view-5d1847c4.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-95c698c1.js');
+
+function ProgramExplainerStepView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      color: props.color,
+      background: props.background,
+      padding: "var(--sl-spacing-large)",
+      //   paddingBottom: "var(--sl-spacing-xxx-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "row",
+        width: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
+      },
+    },
+    Text: {
+      "@media (max-width: 499px)": {
+        marginLeft: "var(--sl-spacing-large)",
+      },
+    },
+    Title: {
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-large)",
+      "@media (max-width: 499px)": {
+        margin: "0",
+      },
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-small)",
+      "@media (max-width: 499px)": {
+        marginTop: "var(--sl-spacing-x-small)",
+      },
+    },
+    Icon: {
+      width: "64px",
+      height: "64px",
+      borderRadius: "100%",
+      background: "#F4F5F7",
+      color: "var(--sl-color-primary-400)",
+      fontSize: "26px",
+      textAlign: "center",
+      lineHeight: "72px",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", null,
+      index.h("div", { class: sheet.classes.Icon },
+        index.h("sl-icon", { name: props.icon }))),
+    index.h("div", { class: sheet.classes.Text },
+      index.h("div", { class: sheet.classes.Title }, props.cardTitle),
+      index.h("div", { class: sheet.classes.Description }, props.description))));
+}
+
+exports.ProgramExplainerStepView = ProgramExplainerStepView;

package/dist/cjs/sqm-program-explainer-step.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-98958ab1.js');
+const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-5d1847c4.js');
 
 const ProgramExplainerStep = class {
   constructor(hostRef) {

package/dist/cjs/sqm-program-explainer-view-de0888f4.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-95c698c1.js');
+
+function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "row",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+      },
+    },
+    Header: {
+      padding: "var(--sl-spacing-large)",
+      color: props.headerColor,
+      background: props.headerBackground,
+    },
+    Card: {
+      padding: "var(--sl-spacing-large)",
+      color: props.cardColor,
+      background: props.cardBackground,
+    },
+    Title: {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
+  }`;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("div", { class: sheet.classes.Header },
+      index.h("div", { class: sheet.classes.Title }, props.header)),
+    index.h("div", { class: sheet.classes.Container }, children),
+    index.h("div", { class: sheet.classes.Card },
+      index.h("div", { class: sheet.classes.Title }, props.cardTitle),
+      index.h("div", { class: sheet.classes.Description }, props.cardDescription))));
+}
+
+exports.ProgramExplainerView = ProgramExplainerView;

package/dist/cjs/sqm-program-explainer.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerView = require('./sqm-program-explainer-view-ba7ed24a.js');
+const sqmProgramExplainerView = require('./sqm-program-explainer-view-de0888f4.js');
 
 const ProgramExplainer = class {
   constructor(hostRef) {

package/dist/cjs/sqm-referral-table-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-7dd4b981.js');
-const reRender = require('./re-render-6111d4bd.js');
+require('./index.module-548bf279.js');
+const reRender = require('./re-render-c019e16e.js');
 
 const ReferralTableGenericColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-refresh-button.cjs.entry.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const _extends = require('./extends-0302d27d.js');
+require('./use-callback-fadb2643.js');
+const index_module = require('./index.module-548bf279.js');
+const utils = require('./utils-95e5317c.js');
+
+function RefreshButtonView(props, children) {
+  return props.hide ? (index.h(index.Host, { style: { display: "none" } })) : (index.h(index.Host, null,
+    index.h("style", { type: "text/css" }, `:host{display:inline-block}`),
+    index.h("sl-button", { loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}-refresh-base` },
+      !props.hideicon && (index.h("sl-icon", { slot: props.iconslot, name: props.icon, exportparts: "icon" })),
+      !props.hidetext && children)));
+}
+
+const RefreshButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Icon to show in the slot
+     */
+    this.icon = "arrow-clockwise";
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.k()
+      ? useDemoRefereshButton(thisProps)
+      : useRefreshButton(thisProps);
+    return (index.h(RefreshButtonView, Object.assign({}, props), index.h("slot", null)));
+  }
+};
+function useDemoRefereshButton({ icon, }) {
+  return {
+    onClick: () => { },
+    icon,
+  };
+}
+function useRefreshButton({ icon }) {
+  //   const { refresh } = useRefreshDispatcher();
+  return {
+    disabled: false,
+    hide: false,
+    // onClick: refresh,
+    icon,
+  };
+}
+
+exports.sqm_refresh_button = RefreshButton;

package/dist/cjs/sqm-share-code.cjs.entry.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-7dd4b981.js');
-require('./jss-preset-default.esm-6304d24f.js');
+const index_module = require('./index.module-548bf279.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-const sqmShareLinkView = require('./sqm-share-link-view-a935d07e.js');
+const sqmShareLinkView = require('./sqm-share-link-view-9c8b219a.js');
 
 const MessageLinkQuery = index_module.dist.gql `
   query ($programId: ID) {
@@ -29,10 +29,10 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 function useShareCode(props) {
   var _a, _b;
   const programId = index_module.M();
-  const user = index_module.T();
+  const user = index_module.ne();
   const engagementMedium = index_module.x();
-  const { data } = index_module.en(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.be(WIDGET_ENGAGEMENT_EVENT);
+  const { data } = index_module.mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.De(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -80,7 +80,7 @@ const ShareCode = class {
   disconnectedCallback() { }
   render() {
     const thisProps = utils.getProps(this);
-    const props = index_module.j()
+    const props = index_module.k()
       ? useDemoShareCode(thisProps)
       : useShareCode(thisProps);
     return index.h(sqmShareLinkView.ShareLinkView, Object.assign({}, props));

package/dist/cjs/{sqm-share-link-view-a935d07e.js → sqm-share-link-view-9c8b219a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 const mixins = require('./mixins-7b7c59fe.js');
 
 const style = {
@@ -10,8 +10,7 @@ const style = {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
   },
 };
-jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function ShareLinkView(props) {
   return (index.h("div", null,

package/dist/cjs/{sqm-stat-container-view-ee7b00ff.js → sqm-stat-container-view-80a57302.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 
 function StatContainerView(props, children) {
   const divideSpace = () => {
@@ -28,7 +28,7 @@ function StatContainerView(props, children) {
         height: "100%",
       },
       "& > ::slotted(*:last-child)": {
-        "border-right": "1px solid #ffffff",
+        "border-right": "none",
       },
     },
     StatFrame: {
@@ -40,8 +40,7 @@ function StatContainerView(props, children) {
       "margin-left": "-1px",
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.StatFrame },
     index.h("div", { class: sheet.classes.StatContainer },

package/dist/cjs/sqm-stat-container.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmStatContainerView = require('./sqm-stat-container-view-ee7b00ff.js');
+const sqmStatContainerView = require('./sqm-stat-container-view-80a57302.js');
 
 const StatContainer = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-text-span-view-b5ae787b.js → sqm-text-span-view-96f53c04.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 
 function TextSpanView(props, children) {
   const style = {
@@ -42,8 +42,7 @@ function TextSpanView(props, children) {
       margin: "0",
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
     sqm-text-span {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+require('./JSS-95c698c1.js');
+const sqmTextSpanView = require('./sqm-text-span-view-96f53c04.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/cjs/sqm-titled-section.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-3b008930.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-2b445aa0.js');
 
 const TitledSection = class {
   constructor(hostRef) {

package/dist/cjs/{useDemoBigStat-2786227e.js → useDemoBigStat-18989b37.js}

@@ -2,8 +2,8 @@
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const index_module = require('./index.module-7dd4b981.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const index_module = require('./index.module-548bf279.js');
+const JSS = require('./JSS-95c698c1.js');
 const cjs = require('./cjs-1066ec21.js');
 
 /**
@@ -326,8 +326,7 @@ function BigStatView(props, children) {
       "text-align": alignment,
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = 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),
@@ -338,12 +337,12 @@ function BigStatView(props, children) {
 const debug = _extends.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.en(query, variables);
+  const res = index_module.mn(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;
+  return { ...stat, loading: res.loading };
 };
 const referralsCountQuery = (programId, 
 // locale
@@ -895,14 +894,13 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = index_module.M();
+  const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
   const locale = index_module.R();
-  const userIdent = index_module.T();
+  const userIdent = index_module.ne();
   const re = _extends.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 },
+      props: { value: 0, statvalue: "!!!", flexReverse, alignment, loading: false },
       label: "BAD PROP TYPE",
     };
   }
@@ -928,6 +926,7 @@ function useBigStat(props) {
     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.loading,
       flexReverse,
       alignment,
     },
@@ -943,6 +942,7 @@ function useDemoBigStat(props) {
       props: {
         value: 0,
         statvalue: "!!!",
+        loading: false,
         flexReverse: false,
         alignment: "center",
       },