@saasquatch/mint-components 1.12.0-2 → 1.12.0-21

package/dist/cjs/sqm-big-stat_39.cjs.entry.js

@@ -3,25 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const global = require('./global-e4ebdbcc.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const global = require('./global-c3637175.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
-const reRender = require('./re-render-5de6631a.js');
-const useChildElements = require('./useChildElements-23beb180.js');
-require('./luxon-20eafbd9.js');
-const index$1 = require('./index-56d1fa5b.js');
+const reRender = require('./re-render-5bde3d2e.js');
+const useChildElements = require('./useChildElements-410d2435.js');
+require('./luxon-05098e19.js');
 const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
-const index$2 = require('./index-8c6255f5.js');
-const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-e7e820d0.js');
-const utilities = require('./utilities-ac5b5f2c.js');
+const index$1 = require('./index-8c6255f5.js');
+const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
+const utilities = require('./utilities-f7de6c04.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-13173901.js');
+const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 require('./sqm-portal-container-view-990a85a3.js');
+const usePayoutStatus = require('./usePayoutStatus-8f924372.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -34,7 +34,7 @@ const BigStat = class {
      */
     this.flexReverse = false;
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -63,7 +63,7 @@ function buildFontsCssUrl(...fonts) {
 const BrandComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -129,7 +129,7 @@ const CardFeed = class {
      * @uiType number
      */
     this.gap = 24;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -237,7 +237,7 @@ const CheckboxField = class {
      * @uiName Optional
      */
     this.checkboxOptional = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -271,7 +271,7 @@ function useCheckboxFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const FuelTankRewardsQuery = index$1.dist.gql `
+const FuelTankRewardsQuery = index_module.dist.gql `
   query fuelTankRewardsQuery($programId: ID!) {
     user: viewer {
       ... on User {
@@ -296,7 +296,7 @@ const FuelTankRewardsQuery = index$1.dist.gql `
     }
   }
 `;
-const WIDGET_ENGAGEMENT_EVENT = index$1.dist.gql `
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
   mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
@@ -489,7 +489,7 @@ const CouponCode = class {
      * @uiGroup Coupon code error
      */
     this.couponCodePlaceholder = "...";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -589,7 +589,7 @@ const DividedLayout = class {
      * @uiName Border style
      */
     this.dividerStyle = "1px solid #EAEAEA";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -623,7 +623,7 @@ const DropdownField = class {
      * @default
      */
     this.dropdownOptional = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -654,7 +654,7 @@ function useDropdownFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_USER = index$1.dist.gql `
+const GET_USER = index_module.dist.gql `
   query {
     viewer {
       ... on User {
@@ -668,7 +668,7 @@ const GET_USER = index$1.dist.gql `
     }
   }
 `;
-const UPSERT_USER = index$1.dist.gql `
+const UPSERT_USER = index_module.dist.gql `
   mutation (
     $id: String!
     $accountId: String!
@@ -826,7 +826,7 @@ const EditProfile = class {
      * @uiName Form error message
      */
     this.formErrorText = "Please correct the errors below to update your profile.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -929,7 +929,7 @@ const Hero = class {
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
     this.wrapDirection = "wrap";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   // TODO: Improve empty slot behavior with useChildElements to check for empty slot
@@ -1135,7 +1135,7 @@ const HeroImage = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingImage = "none";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1147,7 +1147,7 @@ const SqmHookStoryContainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1232,7 +1232,7 @@ const InputField = class {
      * @default
      */
     this.fieldOptional = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1260,7 +1260,7 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_LEADERBOARD = index$1.dist.gql `
+const GET_LEADERBOARD = index_module.dist.gql `
   query (
     $type: String!
     $filter: UserLeaderboardFilterInput
@@ -1282,7 +1282,7 @@ const GET_LEADERBOARD = index$1.dist.gql `
     }
   }
 `;
-const GET_LEADERBOARD_WITHOUT_NAMES = index$1.dist.gql `
+const GET_LEADERBOARD_WITHOUT_NAMES = index_module.dist.gql `
   query (
     $type: String!
     $filter: UserLeaderboardFilterInput
@@ -1302,7 +1302,7 @@ const GET_LEADERBOARD_WITHOUT_NAMES = index$1.dist.gql `
     }
   }
 `;
-const GET_RANK = index$1.dist.gql `
+const GET_RANK = index_module.dist.gql `
   query (
     $type: String!
     $filter: UserLeaderboardFilterInput
@@ -1322,7 +1322,7 @@ const GET_RANK = index$1.dist.gql `
     }
   }
 `;
-const GET_RANK_WITHOUT_NAMES = index$1.dist.gql `
+const GET_RANK_WITHOUT_NAMES = index_module.dist.gql `
   query (
     $type: String!
     $filter: UserLeaderboardFilterInput
@@ -1453,7 +1453,7 @@ const Leaderboard = class {
      */
     this.maxRows = 10;
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
     ShadowViewAddon.withShadowView(this);
   }
   disconnectedCallback() { }
@@ -1629,7 +1629,7 @@ const NameFields = class {
      * @uiName Last name label
      */
     this.lastNameLabel = "Last Name";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1694,7 +1694,7 @@ const NavigationMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1724,6 +1724,7 @@ NavigationMenu.style = sqmNavigationMenuCss;
 const style$2 = {
   Wrapper: {
     maxWidth: "200px",
+    marginLeft: "auto",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
@@ -1737,12 +1738,47 @@ function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return index.h("div", null);
-  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Wrapper },
+  return (index.h("div", { class: sheet$2.classes.Wrapper },
     index.h("style", { type: "text/css" }, styleString$2),
     index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
     index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
+const GET_PAYOUT_DETAILS = index_module.dist.gql `
+  query getPayoutDetails {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              balance
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function usePayoutButton(props) {
+  var _a, _b, _c;
+  const { data, refetch } = index_module.En(GET_PAYOUT_DETAILS, {});
+  stencilHooks_module.useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  return {
+    states: {
+      payoutSettingsComplete: !!((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount),
+    },
+    text: props.getTextProps(),
+  };
+}
+
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1756,14 +1792,16 @@ const PayoutButtonScroll = class {
      */
     this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
     return utils.getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = index_module.isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return index.h(PayoutButtonScrollView, Object.assign({}, props));
   }
 };
@@ -1785,6 +1823,15 @@ const style$3 = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
   WarningAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-yellow-100)",
@@ -1803,12 +1850,26 @@ const style$3 = {
       color: "var(--sl-color-blue-500)",
     },
   },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
 };
 const sheet$3 = JSS.createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
   var _a, _b, _c, _d, _e;
-  const { text, states } = props;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
   }
@@ -1816,29 +1877,87 @@ function PayoutStatusAlertView(props) {
     return index.h("div", null);
   }
   function getAlert(status) {
+    if (states.error)
+      return {
+        header: text.errorHeader,
+        description: text.errorDescription,
+        buttonText: null,
+        alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet$3.classes.ErrorAlertContainer,
+      };
     switch (status) {
       case "INFORMATION_REQUIRED":
         return {
           header: text.informationRequiredHeader,
           description: text.informationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
           icon: "info-circle",
           class: sheet$3.classes.InfoAlertContainer,
         };
-      case "VERIFICATION_NEEDED":
+      case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
-          description: text.verificationRequiredDescription,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet$3.classes.WarningAlertContainer,
         };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet$3.classes.ErrorAlertContainer,
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
-          description: text.holdDescription,
+          description: global.intl.formatMessage({
+            id: "holdDescription",
+            defaultMessage: text.holdDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
@@ -1848,13 +1967,14 @@ function PayoutStatusAlertView(props) {
         return;
     }
   }
-  //AL: TODO hookup ID
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
-      case "VERIFICATION_NEEDED":
-        return (index.h("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        // Demo case
+        index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
+      case "VERIFICATION:REQUIRED":
+        return (index.h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
@@ -1868,54 +1988,6 @@ function PayoutStatusAlertView(props) {
       getButton(states.status))));
 }
 
-const GET_USER_STATUS = index$1.dist.gql `
-  query getUserStatus {
-    user: viewer {
-      ... on User {
-        id
-        impactConnection {
-          connected
-          publisher {
-            id
-            payoutsAccount {
-              hold
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-function usePayoutStatus(props) {
-  const { loading, data, errors, refetch } = index_module.En(GET_USER_STATUS, {});
-  const [status, setStatus] = stencilHooks_module.useState(undefined);
-  stencilHooks_module.useEffect(() => {
-    if (!data)
-      return;
-    function getStatus(data) {
-      var _a, _b;
-      const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
-      if (!account)
-        return "INFORMATION_REQUIRED";
-      if (account.hold)
-        return "HOLD";
-      // @ts-ignore, TODO: add check for account verification
-      if (!account.verified)
-        return "VERIFICATION_NEEDED";
-      return "DONE";
-    }
-    const s = getStatus(data);
-    setStatus(s);
-  }, [data]);
-  stencilHooks_module.useEffect(() => {
-    const cb = () => refetch();
-    window.addEventListener("sqm:tax-form-updated", cb);
-    return () => window.removeEventListener("sqm:tax-form-updated", cb);
-  }, []);
-  console.log({ data });
-  return { states: { loading, status }, text: props.getTextProps() };
-}
-
 const PayoutStatusAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1938,20 +2010,61 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification required alert description
      */
-    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredDescription = "It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
     /**
      * @uiName Verification required alert button text
      */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName Verification required internal alert header
+     */
+    this.verificationRequiredInternalHeader = "Identity Verification in Progress";
+    /**
+     * @uiName Verification required internal alert description
+     */
+    this.verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortley. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification review internal alert header
+     */
+    this.verificationReviewInternalHeader = "Identity Verification Under Review";
+    /**
+     * @uiName Verification review internal alert description
+     */
+    this.verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification failed internal alert header
+     */
+    this.verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    /**
+     * @uiName Verification failed internal alert description
+     */
+    this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
     /**
      * @uiName Payout on hold alert header
      */
     this.holdHeader = "Your payouts and account are on hold";
     /**
      * @uiName Payout on hold alert description
+     * AL: TODO copy not finalized for support section
+     */
+    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to our {supportLink}.";
+    /**
+     * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
+     */
+    this.cashPayoutsPageUrl = "/cash";
+    /**
+     * @uiName Support link text
      */
-    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
-    stencilHooks_module.h(this);
+    this.supportLink = "support team";
+    /**
+     * @uiName Error header
+     */
+    this.errorHeader = "Could not determine payout status.";
+    /**
+     * @uiName Error description
+     */
+    this.errorDescription = "There was an error with determining your payout status.";
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -1960,17 +2073,24 @@ const PayoutStatusAlert = class {
   render() {
     const props = index_module.isDemo()
       ? useDemoPayoutStatusAlert(this)
-      : usePayoutStatus(this);
+      : usePayoutStatus.usePayoutStatus(this);
     return index.h(PayoutStatusAlertView, Object.assign({}, props));
   }
 };
 function useDemoPayoutStatusAlert(props) {
   return cjs.cjs({
     states: {
+      error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
+      showVerifyIdentity: false,
     },
+    data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => { },
+      onClick: () => console.log("show"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
@@ -2117,7 +2237,7 @@ const PortalChangePassword = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2212,7 +2332,7 @@ const PortalFooter = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2242,7 +2362,7 @@ const PortalFrame = class {
      * @undocumented
      */
     this.notFullScreen = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2364,7 +2484,7 @@ const PortalLogin = class {
      * Displayed when the login fails due to a network error. The participant can try refreshing the page.
      */
     this.networkErrorMessage = "An error occurred while logging you in. Please refresh the page and try again.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2640,7 +2760,7 @@ const PortalRegister = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2738,7 +2858,7 @@ const ProgramExplainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2809,7 +2929,7 @@ function ProgramExplainerStepView(props) {
 const ProgramExplainerStep = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2852,7 +2972,7 @@ const ProgramMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2974,7 +3094,7 @@ const ReferralCard = class {
      * @uiType boolean
      */
     this.limitWidth = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2991,7 +3111,7 @@ const ReferralCard = class {
   }
 };
 
-const GET_USER_DETAILS = index$1.dist.gql `
+const GET_USER_DETAILS = index_module.dist.gql `
   query getUser($programId: ID) {
     viewer {
       ... on User {
@@ -3029,7 +3149,7 @@ const SqmReferralIframe = class {
      * @uiName IFrame width
      */
     this.iframeWidth = "100%";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3662,7 +3782,7 @@ var module$1 = {};
 
 const confetti = module$1.exports;
 
-const GET_EXCHANGE_LIST = index$1.dist.gql `
+const GET_EXCHANGE_LIST = index_module.dist.gql `
   query getExchangeList {
     viewer {
       ... on User {
@@ -3705,7 +3825,7 @@ const GET_EXCHANGE_LIST = index$1.dist.gql `
     }
   }
 `;
-const EXCHANGE = index$1.dist.gql `
+const EXCHANGE = index_module.dist.gql `
   mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
     exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
       reward {
@@ -3998,7 +4118,7 @@ const SqmRewardExchangeList = class {
      * @uiName Cost row title
      */
     this.costTitle = "Cost to Redeem";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4054,7 +4174,7 @@ const debug$1 = stencilHooks_module.browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
     return;
-  const regexp = index$2.pathToRegexp(pattern);
+  const regexp = index$1.pathToRegexp(pattern);
   return regexp.exec(page);
 }
 function useRouter() {
@@ -4132,7 +4252,7 @@ const SqmRouter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4181,7 +4301,7 @@ const ShareButton = class {
      * @uiName Unsupported platform text
      */
     this.unsupportedPlatformText = "Error: not on a supported device";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4204,7 +4324,7 @@ function useDemoShareButton(props) {
 }
 ShareButton.style = sqmShareButtonCss;
 
-const MessageLinkQuery = index$1.dist.gql `
+const MessageLinkQuery = index_module.dist.gql `
   query ($programId: ID) {
     user: viewer {
       ... on User {
@@ -4213,7 +4333,7 @@ const MessageLinkQuery = index$1.dist.gql `
     }
   }
 `;
-const WIDGET_ENGAGEMENT_EVENT$1 = index$1.dist.gql `
+const WIDGET_ENGAGEMENT_EVENT$1 = index_module.dist.gql `
   mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
@@ -4288,7 +4408,7 @@ const ShareCode = class {
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
      */
     this.buttonStyle = "icon";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4357,7 +4477,7 @@ const ShareLink = class {
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
      */
     this.buttonStyle = "icon";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4407,7 +4527,7 @@ const StatContainer = class {
      * @uiEnumNames ["Grid", "Flex"]
      */
     this.display = "grid";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4415,7 +4535,7 @@ const StatContainer = class {
   }
 };
 
-const SEND_EVENT = index$1.dist.gql `
+const SEND_EVENT = index_module.dist.gql `
   mutation taskCardEvent($userEventInput: UserEventInput!) {
     logUserEvent(userEventInput: $userEventInput) {
       userId
@@ -4565,7 +4685,7 @@ const TaskCard = class {
      * @uiGroup Button
      */
     this.hideButton = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4605,7 +4725,7 @@ const Timeline = class {
      * @uiEnumNames ["Gift", "Circle"]
      */
     this.icon = "gift";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4719,7 +4839,7 @@ const TimelineReward = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     this.iconState = "gift";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   async setIcon(value) {
     this.iconState = value;
@@ -4735,7 +4855,7 @@ function UserNameView(props) {
   return index.h(index.Host, null, props.loading ? props.loadingText : props.username);
 }
 
-const GET_USER_NAME = index$1.dist.gql `
+const GET_USER_NAME = index_module.dist.gql `
   query getUserName {
     viewer {
       ... on User {
@@ -4773,7 +4893,7 @@ const UserName = class {
      * @uiName Loading text
      */
     this.loadingText = "...";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {