@saasquatch/mint-components 1.6.6-2 → 1.6.6-4

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
-const global = require('./global-a320ad05.js');
+const global = require('./global-b6c63e2b.js');
 const useCallback = require('./use-callback-5d15897d.js');
 const index_module = require('./index.module-0b9b8891.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
@@ -15,11 +15,11 @@ const reRender = require('./re-render-172958b1.js');
 const useChildElements = require('./useChildElements-6993ec39.js');
 require('./luxon-479fc825.js');
 const utils = require('./utils-6847bc06.js');
-require('./sqm-text-span-view-c34577fa.js');
+require('./sqm-text-span-view-1acdf7e9.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const useRegistrationFormState = require('./useRegistrationFormState-8f2caf7f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-83dada69.js');
-require('./sqm-portal-container-view-5beae29c.js');
+const ShadowViewAddon = require('./ShadowViewAddon-af7d0c85.js');
+require('./sqm-portal-container-view-3215dce9.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -89,27 +89,27 @@ const BrandComponent = class {
       return () => document.head.removeChild(sheet);
     }, [sanitizedFont]);
     const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "";
-    return (index.h(index.Host, null, index.h("style", null, `
-
-          :host{
-            display: contents;
-          }
-          /* 
-          Selects any element placed inside a slot
-           - resets css variable inheritence for fonts
-          
-          */
-          ::slotted(*) {
-            --sl-font-sans: "${font}", arial;
-            --sl-input-font-family: "${font}", arial;
-            --sl-tooltip-font-family: "${font}", arial;
-            font-family:  "${font}", arial;
-			
-            ${css}
-
-            --sl-focus-ring-color-primary: var(--sl-color-primary-100);
-            --sl-input-border-color-focus: var(--sl-color-primary-500);
-            --sl-color-primary-hue: var(--sl-color-primary-500);
+    return (index.h(index.Host, null, index.h("style", null, `
+
+          :host{
+            display: contents;
+          }
+          /* 
+          Selects any element placed inside a slot
+           - resets css variable inheritence for fonts
+          
+          */
+          ::slotted(*) {
+            --sl-font-sans: "${font}", arial;
+            --sl-input-font-family: "${font}", arial;
+            --sl-tooltip-font-family: "${font}", arial;
+            font-family:  "${font}", arial;
+			
+            ${css}
+
+            --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+            --sl-input-border-color-focus: var(--sl-color-primary-500);
+            --sl-color-primary-hue: var(--sl-color-primary-500);
           }`), index.h("slot", null)));
   }
 };
@@ -290,24 +290,24 @@ function DividedLayoutView(props, children) {
       },
     },
   };
-  const hostStyle = `
-    display: flex;
-    flex: 1;
-    box-sizing: border-box;
-    flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
-    overflow-x: clip;
+  const hostStyle = `
+    display: flex;
+    flex: 1;
+    box-sizing: border-box;
+    flex-direction: ${props.direction};
+    background-color: var(--sqm-content-background);
+    overflow-x: clip;
     ${props.direction === "column"
     ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    : ""}
   `;
-  const vanillaStyle = `
-  :host{
-    ${hostStyle}
-  }
-  sqm-divided-layout {
-    ${hostStyle}
-  }
+  const vanillaStyle = `
+  :host{
+    ${hostStyle}
+  }
+  sqm-divided-layout {
+    ${hostStyle}
+  }
   `;
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
@@ -391,39 +391,39 @@ function useDropdownFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_USER = index_module.dist.gql `
-  query {
-    viewer {
-      ... on User {
-        id
-        accountId
-        firstName
-        lastName
-        email
-        countryCode
-      }
-    }
-  }
+const GET_USER = index_module.dist.gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+      }
+    }
+  }
 `;
-const UPSERT_USER = index_module.dist.gql `
-  mutation (
-    $id: String!
-    $accountId: String!
-    $firstName: String!
-    $lastName: String!
-  ) {
-    upsertUser(
-      userInput: {
-        id: $id
-        accountId: $accountId
-        firstName: $firstName
-        lastName: $lastName
-      }
-    ) {
-      firstName
-      lastName
-    }
-  }
+const UPSERT_USER = index_module.dist.gql `
+  mutation (
+    $id: String!
+    $accountId: String!
+    $firstName: String!
+    $lastName: String!
+  ) {
+    upsertUser(
+      userInput: {
+        id: $id
+        accountId: $accountId
+        firstName: $firstName
+        lastName: $lastName
+      }
+    ) {
+      firstName
+      lastName
+    }
+  }
 `;
 // view doesn't tolerate undefined, even when we're loading
 const defaultFormState = {
@@ -718,9 +718,9 @@ function HeroImageView(props, children) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: block;
+  const vanillaStyle = `
+  :host{
+    display: block;
   }`;
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" },
@@ -882,47 +882,47 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_LEADERBOARD = index_module.dist.gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-    $limit: Int!
-  ) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows(limit: $limit) {
-        textValue(locale: $locale)
-        firstName
-        lastInitial
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
+const GET_LEADERBOARD = index_module.dist.gql `
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+    $limit: Int!
+  ) {
+    userLeaderboard(type: $type, filter: $filter) {
+      dateModified
+      rows(limit: $limit) {
+        textValue(locale: $locale)
+        firstName
+        lastInitial
+        rank {
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
 `;
-const GET_RANK = index_module.dist.gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        firstName
-        lastInitial
-        leaderboardRank(type: $type, filter: $filter) {
-          textValue(locale: $locale)
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
+const GET_RANK = index_module.dist.gql `
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        firstName
+        lastInitial
+        leaderboardRank(type: $type, filter: $filter) {
+          textValue(locale: $locale)
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
 `;
 function useLeaderboard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -1802,15 +1802,15 @@ function ProgramExplainerView(props, children) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  ::slotted(*){
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    ::slotted(*){
-      display: block;
-    }
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
   }`;
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" },
@@ -1984,10 +1984,10 @@ const style$1 = {
 };
 const sheet$1 = JSS.createStyleSheet(style$1);
 const styleString$1 = sheet$1.toString();
-const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
   `;
 function ReferralCardView(props) {
   return (index.h("div", null,
@@ -2026,14 +2026,14 @@ const ReferralCard = class {
   }
 };
 
-const GET_USER_DETAILS = index_module.dist.gql `
-  query getUser($programId: ID) {
-    viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
+const GET_USER_DETAILS = index_module.dist.gql `
+  query getUser($programId: ID) {
+    viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
 `;
 function useReferralIframe(props) {
   var _a;
@@ -2697,58 +2697,58 @@ var module$1 = {};
 
 const confetti = module$1.exports;
 
-const GET_EXCHANGE_LIST = index_module.dist.gql `
-  query getExchangeList {
-    viewer {
-      ... on User {
-        visibleRewardExchangeItems(limit: 20, offset: 0) {
-          data {
-            key
-            name
-            description
-            imageUrl
-            available
-            unavailableReasonCode
-            ruleType
-            sourceUnit
-            sourceValue
-            prettySourceValue
-            sourceMinValue
-            prettySourceMinValue
-            sourceMaxValue
-            prettySourceMaxValue
-            destinationMinValue
-            prettyDestinationMinValue
-            destinationMaxValue
-            prettyDestinationMaxValue
-            globalRewardKey
-            destinationUnit
-            steps {
-              sourceValue
-              prettySourceValue
-              destinationValue
-              prettyDestinationValue
-              available
-              globalRewardKey
-              unavailableReasonCode
-              rewardInput
-            }
-          }
-          totalCount
-        }
-      }
-    }
-  }
+const GET_EXCHANGE_LIST = index_module.dist.gql `
+  query getExchangeList {
+    viewer {
+      ... on User {
+        visibleRewardExchangeItems(limit: 20, offset: 0) {
+          data {
+            key
+            name
+            description
+            imageUrl
+            available
+            unavailableReasonCode
+            ruleType
+            sourceUnit
+            sourceValue
+            prettySourceValue
+            sourceMinValue
+            prettySourceMinValue
+            sourceMaxValue
+            prettySourceMaxValue
+            destinationMinValue
+            prettyDestinationMinValue
+            destinationMaxValue
+            prettyDestinationMaxValue
+            globalRewardKey
+            destinationUnit
+            steps {
+              sourceValue
+              prettySourceValue
+              destinationValue
+              prettyDestinationValue
+              available
+              globalRewardKey
+              unavailableReasonCode
+              rewardInput
+            }
+          }
+          totalCount
+        }
+      }
+    }
+  }
 `;
-const EXCHANGE = index_module.dist.gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-        fuelTankCode
-      }
-    }
-  }
+const EXCHANGE = index_module.dist.gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+        fuelTankCode
+      }
+    }
+  }
 `;
 function useRewardExchangeList(props) {
   var _a, _b, _c, _d, _e;
@@ -3052,26 +3052,12 @@ function EmptySlot$1() {
   return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
 }
 function useRewardExchangeListDemo(props) {
-  const [exchangeState, setExchangeState] = stencilHooks_module.useReducer((state, next) => ({
-    ...state,
-    ...next,
-  }), {
-    selectedItem: undefined,
-    selectedStep: undefined,
-    redeemStage: "chooseReward",
-    amount: 0,
-    exchangeError: false,
-  });
-  function setStage(stage) {
-    setExchangeState({ redeemStage: stage });
-  }
-  console.log("reward exchange props", { props });
   return cjs.cjs({
     states: {
       content: {
         text: props,
       },
-      redeemStage: exchangeState.redeemStage,
+      redeemStage: "chooseReward",
       amount: 0,
       selectedStep: undefined,
       selectedItem: undefined,
@@ -3088,17 +3074,15 @@ function useRewardExchangeListDemo(props) {
     },
     callbacks: {
       exchangeReward: () => { },
-      setExchangeState,
-      setStage,
+      setExchangeState: (_) => { },
+      setStage: (_) => { },
       resetState: () => { },
       copyFuelTankCode: () => { },
     },
     refs: {
       canvasRef: {},
     },
-  }, props.demoData || props.demoDataString
-    ? JSON.parse(props.demoDataString)
-    : {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
 const debug$1 = stencilHooks_module.browser("sq:useRouter");
@@ -3268,19 +3252,19 @@ const Scroll = class {
     };
     const sheet = JSS.createStyleSheet(style);
     const styleString = sheet.toString();
-    const vanillaStyle = `
-		:host{
-			display: contents;
-		}
+    const vanillaStyle = `
+		:host{
+			display: contents;
+		}
 		${this.mobile &&
-      `
-		@media only screen and (max-width: 499px) {
-			:host {
-				display: block;
-				width: 100%;
-			}
-		}
-	  `}
+      `
+		@media only screen and (max-width: 499px) {
+			:host {
+				display: block;
+				width: 100%;
+			}
+		}
+	  `}
 	`;
     let classStack = "";
     if (this.outline && this.buttonType != "default")
@@ -3345,19 +3329,19 @@ function useDemoShareButton(props) {
 }
 ShareButton.style = sqmShareButtonCss;
 
-const MessageLinkQuery = index_module.dist.gql `
-  query ($programId: ID) {
-    user: viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
+const MessageLinkQuery = index_module.dist.gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
 `;
-const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
 `;
 function useShareCode(props) {
   var _a, _b;
@@ -3530,12 +3514,12 @@ const TableRow = class {
   }
 };
 
-const SEND_EVENT = index_module.dist.gql `
-  mutation taskCardEvent($userEventInput: UserEventInput!) {
-    logUserEvent(userEventInput: $userEventInput) {
-      userId
-    }
-  }
+const SEND_EVENT = index_module.dist.gql `
+  mutation taskCardEvent($userEventInput: UserEventInput!) {
+    logUserEvent(userEventInput: $userEventInput) {
+      userId
+    }
+  }
 `;
 function useTaskCard(props) {
   const user = index_module.N();
@@ -3728,14 +3712,14 @@ const Timeline = class {
         // incase child is not sqm-timeline-entry
       }
     });
-    const vanillaStyle = `
-		:host{
-			display: block;   
-		}
-
-		::slotted(*:not(:only-child):not(:last-child)) {
-			margin-bottom: var(--sl-spacing-xx-large);
-		}
+    const vanillaStyle = `
+		:host{
+			display: block;   
+		}
+
+		::slotted(*:not(:only-child):not(:last-child)) {
+			margin-bottom: var(--sl-spacing-xx-large);
+		}
 	`;
     return (index.h("div", null, index.h("style", { type: "text/css" }, vanillaStyle), index.h("slot", null)));
   }
@@ -3794,14 +3778,14 @@ const style$2 = {
 };
 const sheet$2 = JSS.createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
-const vanillaStyle$1 = `
-	:host{
-		display: block; 
-	}
-
-	:host(:not(:last-of-type)) .line {
-		display: block; 
-	}
+const vanillaStyle$1 = `
+	:host{
+		display: block; 
+	}
+
+	:host(:not(:last-of-type)) .line {
+		display: block; 
+	}
 	`;
 function TimelineEntryView(props) {
   var _a;
@@ -3845,15 +3829,15 @@ function UserNameView(props) {
   return index.h(index.Host, null, props.loading ? props.loadingText : props.username);
 }
 
-const GET_USER_NAME = index_module.dist.gql `
-  query getUserName {
-    viewer {
-      ... on User {
-        firstName
-        lastName
-      }
-    }
-  }
+const GET_USER_NAME = index_module.dist.gql `
+  query getUserName {
+    viewer {
+      ... on User {
+        firstName
+        lastName
+      }
+    }
+  }
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;