@saasquatch/mint-components 1.5.0-103 → 1.5.0-104

package/dist/cjs/{ShadowViewAddon-0cd7b382.js → ShadowViewAddon-68b2edc9.js}

@@ -2,8 +2,8 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-633d1fb7.js');
-const index_module = require('./index.module-f972f103.js');
+const global = require('./global-4c495d76.js');
+const index_module = require('./index.module-54724339.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
 const luxon = require('./luxon-59ca7d19.js');
@@ -154,7 +154,6 @@ function LeaderboardView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { states, data, elements } = props;
   const { styles } = states;
-  console.log("LEADERBOARD PROPS", props);
   if (states.loading)
     return (index.h("div", { class: sheet$1.classes.Leaderboard },
       index.h("style", { type: "text/css" },
@@ -162,7 +161,6 @@ function LeaderboardView(props) {
         vanillaStyle),
       elements.loadingstate));
   let userSeenFlag = false;
-  console.log("empty", states.hasLeaders);
   if (!states.hasLeaders) {
     return (index.h("div", { class: sheet$1.classes.Leaderboard },
       index.h("style", { type: "text/css" },
@@ -332,10 +330,10 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = index_module.M() } = props;
-  const user = index_module.ie();
-  const engagementMedium = index_module.Rn();
-  const { data } = index_module.sn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.qe(WIDGET_ENGAGEMENT_EVENT);
+  const user = index_module.ne();
+  const engagementMedium = index_module.x();
+  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.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -421,16 +419,16 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : index_module.M();
-  const user = index_module.ie();
+  const user = index_module.ne();
   const variables = {
-    engagementMedium: index_module.Rn(),
+    engagementMedium: index_module.x(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = index_module.sn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = index_module.mn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
-  const environment = index_module.kn();
+  const environment = index_module.D();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
@@ -1492,365 +1490,365 @@ function ProgressBar({ stageCount, currentStage, }) {
   return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
 }
 
-const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-function RewardExchangeView(props) {
-  const { states, data, callbacks, refs } = props;
-  const { selectedItem, selectedStep } = states;
-  const stageProgressList = {
-    chooseReward: states.content.text.chooseRewardTitle,
-    chooseAmount: states.content.text.chooseAmountTitle,
-    confirmation: states.content.text.confirmationTitle,
-  };
-  const style = {
-    HostBlock: mixins.HostBlock,
-    Container: {
-      minWidth: "300px",
-      position: "relative",
+const style$8 = {
+  HostBlock: mixins.HostBlock,
+  Container: {
+    minWidth: "300px",
+    position: "relative",
+  },
+  FullImage: {
+    objectFit: "contain",
+    maxWidth: "100%",
+    height: "250px",
+    display: "flex",
+    margin: "0 auto",
+  },
+  Select: {
+    "&::part(label)": {
+      color: "var(--sl-color-primary-500)",
     },
-    FullImage: {
-      objectFit: "contain",
-      maxWidth: "100%",
-      height: "250px",
-      display: "flex",
-      margin: "0 auto",
+    "&::part(menu)": {
+      maxHeight: "50vh",
     },
-    Select: {
-      "&::part(label)": {
-        color: "var(--sl-color-primary-500)",
-      },
-      "&::part(menu)": {
-        maxHeight: "50vh",
-      },
-      "& sl-menu-item::part(checked-icon)": {
-        top: "8px",
-      },
-      "& sl-menu-item::part(base)": {
-        flexDirection: "column",
+    "& sl-menu-item::part(checked-icon)": {
+      top: "8px",
+    },
+    "& sl-menu-item::part(base)": {
+      flexDirection: "column",
+    },
+    "& sl-menu-item::part(base):focus": {
+      background: "transparent",
+      color: "var(--sl-color-gray-700)",
+    },
+  },
+  ProgressBar: {
+    maxWidth: "350px",
+    width: "100%",
+    margin: "auto",
+    marginBottom: "var(--sl-spacing-xxx-large)",
+    "& .text-area": {
+      marginTop: "5px",
+      display: "flex",
+      justifyContent: "center",
+      textAlign: "center",
+      whiteSpace: "nowrap",
+      marginBottom: "6px",
+      "& .text": {
+        marginBottom: "var(--sl-spacing-x-small)",
+        flex: "1 1 0",
       },
-      "& sl-menu-item::part(base):focus": {
-        background: "transparent",
-        color: "var(--sl-color-gray-700)",
+      "& .text.subdued": {
+        color: "var(--sl-color-neutral-200)",
       },
     },
-    ProgressBar: {
-      maxWidth: "350px",
+  },
+  CardLayout: {
+    display: "flex",
+    width: "100%",
+    borderRadius: "3px",
+    background: "rgba(0, 0, 0, 0)",
+  },
+  Card: {
+    display: "flex",
+    userSelect: "none",
+    height: "120px",
+    "&::part(base)": {
+      boxShadow: "none",
       width: "100%",
-      margin: "auto",
-      marginBottom: "var(--sl-spacing-xxx-large)",
-      "& .text-area": {
-        marginTop: "5px",
-        display: "flex",
-        justifyContent: "center",
-        textAlign: "center",
-        whiteSpace: "nowrap",
-        marginBottom: "6px",
-        "& .text": {
-          marginBottom: "var(--sl-spacing-x-small)",
-          flex: "1 1 0",
-        },
-        "& .text.subdued": {
-          color: "var(--sl-color-neutral-200)",
-        },
-      },
     },
-    CardLayout: {
+    "&::part(body)": {
       display: "flex",
+      padding: 0,
+    },
+    "& .selected": {
+      position: "relative",
+      top: "-2%",
+      left: "100%",
+      color: "var(--sl-color-primary-500)",
+      margin: "-9px",
+    },
+  },
+  Image: {
+    padding: "var(--sl-spacing-small)",
+    minWidth: "96px",
+    maxWidth: "96px",
+    "& .image": {
       width: "100%",
-      borderRadius: "3px",
-      background: "rgba(0, 0, 0, 0)",
+      height: "100%",
+      objectFit: "contain",
+      borderRadius: "4px",
     },
-    Card: {
-      display: "flex",
-      userSelect: "none",
-      height: "120px",
-      "&::part(base)": {
-        boxShadow: "none",
-        width: "100%",
-      },
-      "&::part(body)": {
-        display: "flex",
-        padding: 0,
-      },
-      "& .selected": {
-        position: "relative",
-        top: "-2%",
-        left: "100%",
-        color: "var(--sl-color-primary-500)",
-        margin: "-9px",
-      },
+    "& .image.subdued": {
+      filter: "brightness(0.95)",
+      opacity: "0.5",
     },
-    Image: {
-      padding: "var(--sl-spacing-small)",
-      minWidth: "96px",
-      maxWidth: "96px",
-      "& .image": {
-        width: "100%",
-        height: "100%",
-        objectFit: "contain",
-        borderRadius: "4px",
-      },
-      "& .image.subdued": {
-        filter: "brightness(0.95)",
-        opacity: "0.5",
-      },
+  },
+  Square: {
+    width: "120px",
+    height: "118px",
+    borderRadius: "3px 0 0 3px",
+    "& .image": {
+      width: "100%",
+      height: "100%",
+      objectFit: "contain",
+      borderRadius: "inherit",
     },
-    Square: {
-      width: "120px",
-      height: "118px",
-      borderRadius: "3px 0 0 3px",
-      "& .image": {
-        width: "100%",
-        height: "100%",
-        objectFit: "contain",
-        borderRadius: "inherit",
-      },
+  },
+  TextArea: {
+    textAlign: "left",
+    padding: "var(--sl-spacing-small)",
+    paddingLeft: "0",
+    "& .title": {
+      fontSize: "var(--sl-font-size-medium)",
+      lineHeight: "var(--sl-line-height-dense)",
+      fontWeight: "600",
+      color: "var(--sl-color-neutral-1000)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
     },
-    TextArea: {
-      textAlign: "left",
-      padding: "var(--sl-spacing-small)",
-      paddingLeft: "0",
-      "& .title": {
-        fontSize: "var(--sl-font-size-medium)",
-        lineHeight: "var(--sl-line-height-dense)",
-        fontWeight: "600",
-        color: "var(--sl-color-neutral-1000)",
-        display: "-webkit-box",
-        "-webkit-line-clamp": "1",
-        "-webkit-box-orient": "vertical",
-        overflow: "hidden",
-      },
-      "& .amount": {
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginTop: "var(--sl-spacing-x-small)",
-        color: "var(--sl-color-neutral-500)",
-        display: "-webkit-box",
-        "-webkit-line-clamp": "1",
-        "-webkit-box-orient": "vertical",
-        overflow: "hidden",
-      },
-      "& .error": {
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginTop: "var(--sl-spacing-x-small)",
-        fontWeight: "600",
-        color: "var(--sl-color-warning-600)",
-        display: "-webkit-box",
-        "-webkit-line-clamp": "1",
-        "-webkit-box-orient": "vertical",
-        overflow: "hidden",
-        "& .icon": {
-          position: "relative",
-          top: "0.1em",
-          marginRight: "var(--sl-spacing-xx-small)",
-        },
+    "& .amount": {
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-x-small)",
+      color: "var(--sl-color-neutral-500)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+    },
+    "& .error": {
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-x-small)",
+      fontWeight: "600",
+      color: "var(--sl-color-warning-600)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-xx-small)",
       },
     },
-    ChooseAmount: {
+  },
+  ChooseAmount: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "var(--sl-spacing-medium) 0",
+    "& .wrapper": {
       display: "flex",
-      alignItems: "center",
       justifyContent: "center",
-      margin: "var(--sl-spacing-medium) 0",
-      "& .wrapper": {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "var(--sl-spacing-xx-large)",
-        "@media (max-width: 799px)": {
-          flexDirection: "column",
-        },
-      },
-      "& .image": {
-        width: "50%",
-        objectFit: "contain",
-        maxWidth: "100%",
-        height: "250px",
-        display: "flex",
-        "@media (max-width: 799px)": {
-          width: "auto",
-        },
-      },
-      "& .text": {
-        width: "50%",
-        maxWidth: "400px",
-        minWidth: "330px",
-        "@media (max-width: 799px)": {
-          width: "auto",
-          margin: "auto",
-        },
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-neutral-1000)",
-      },
-      "& .points": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-primary-500)",
+      alignItems: "center",
+      gap: "var(--sl-spacing-xx-large)",
+      "@media (max-width: 799px)": {
+        flexDirection: "column",
       },
-      "& .description": {
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-500)",
-        margin: "var(--sl-spacing-medium) 0",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginTop: "var(--sl-spacing-xx-small)",
+    },
+    "& .image": {
+      width: "50%",
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "250px",
+      display: "flex",
+      "@media (max-width: 799px)": {
+        width: "auto",
       },
-      "& .space": {
-        marginBottom: "var(--sl-spacing-xxx-large)",
+    },
+    "& .text": {
+      width: "50%",
+      maxWidth: "400px",
+      minWidth: "330px",
+      "@media (max-width: 799px)": {
+        width: "auto",
+        margin: "auto",
       },
-      "& sl-menu-item[disabled]::part(label)": {
+    },
+    "& .title": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-neutral-1000)",
+    },
+    "& .points": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-primary-500)",
+    },
+    "& .description": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-neutral-500)",
+      margin: "var(--sl-spacing-medium) 0",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-xx-small)",
+    },
+    "& .space": {
+      marginBottom: "var(--sl-spacing-xxx-large)",
+    },
+    "& sl-menu-item[disabled]::part(label)": {
+      color: "var(--sl-color-neutral-200)",
+    },
+    "& sl-menu-item[disabled]": {
+      "& .step-cost": {
         color: "var(--sl-color-neutral-200)",
       },
-      "& sl-menu-item[disabled]": {
-        "& .step-cost": {
-          color: "var(--sl-color-neutral-200)",
-        },
-      },
     },
-    SelectItem: {
+  },
+  SelectItem: {
+    display: "flex",
+    flexDirection: "column",
+    "& > .step-cost": {
+      color: "var(--sl-color-neutral-400)",
+      height: "0",
+      marginBottom: "5px",
+    },
+    "& > .step-value": {
+      margin: "0",
+    },
+  },
+  Success: {
+    textAlign: "center",
+    "& .title": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-neutral-1000)",
+    },
+    "& .description": {
+      color: "var(--sl-color-neutral-400)",
+      width: "100%",
+      maxWidth: "350px",
+      margin: "0 auto",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginBottom: "var(--sl-spacing-xx-large)",
+      marginTop: "var(--sl-spacing-xx-small)",
+    },
+  },
+  Grid: {
+    display: "grid",
+    justifyContent: "center",
+    gap: "20px",
+    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+  },
+  Confirmation: {
+    maxWidth: "800px",
+    margin: "auto",
+    "& .wrapper": {
       display: "flex",
-      flexDirection: "column",
-      "& > .step-cost": {
-        color: "var(--sl-color-neutral-400)",
-        height: "0",
-        marginBottom: "5px",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
       },
-      "& > .step-value": {
-        margin: "0",
+    },
+    "& .reward-item-container": {
+      "@media (max-width: 499px)": {
+        display: "flex",
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        alignItems: "center",
       },
     },
-    Success: {
-      textAlign: "center",
-      "& .title": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-neutral-1000)",
+    "& .reward-item-container .reward-title": {
+      paddingBottom: "var(--sl-spacing-medium)",
+      lineHeight: "20px",
+      "@media (max-width: 499px)": {
+        paddingBottom: "none",
+        paddingLeft: "var(--sl-spacing-small)",
       },
-      "& .description": {
-        color: "var(--sl-color-neutral-400)",
+    },
+    "& .padding": {
+      padding: "var(--sl-spacing-medium) 0",
+      "@media (max-width: 499px)": {
+        padding: "var(--sl-spacing-small) 0",
+      },
+    },
+    "& .field": {
+      width: "30%",
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-neutral-400)",
+      textAlign: "left",
+      paddingRight: "var(--sl-spacing-xxx-large)",
+      "@media (max-width: 499px)": {
         width: "100%",
-        maxWidth: "350px",
-        margin: "0 auto",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginBottom: "var(--sl-spacing-xx-large)",
-        marginTop: "var(--sl-spacing-xx-small)",
+        paddingRight: "0",
+        paddingBottom: "0",
       },
     },
-    Grid: {
-      display: "grid",
-      justifyContent: "center",
-      gap: "20px",
-      gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+    "& .value": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
     },
-    Confirmation: {
-      maxWidth: "800px",
-      margin: "auto",
-      "& .wrapper": {
-        display: "flex",
-        "@media (max-width: 499px)": {
-          flexDirection: "column",
-        },
-      },
-      "& .reward-item-container": {
-        "@media (max-width: 499px)": {
-          display: "flex",
-          flexDirection: "row-reverse",
-          justifyContent: "flex-end",
-          alignItems: "center",
-        },
-      },
-      "& .reward-item-container .reward-title": {
-        paddingBottom: "var(--sl-spacing-medium)",
-        lineHeight: "20px",
-        "@media (max-width: 499px)": {
-          paddingBottom: "none",
-          paddingLeft: "var(--sl-spacing-small)",
-        },
-      },
-      "& .padding": {
-        padding: "var(--sl-spacing-medium) 0",
-        "@media (max-width: 499px)": {
-          padding: "var(--sl-spacing-small) 0",
-        },
+    "& .top-border": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& .image": {
+      width: "200px",
+      "@media (max-width: 499px)": {
+        width: "100px",
       },
-      "& .field": {
-        width: "30%",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-medium)",
+    },
+  },
+  Button: {
+    display: "flex",
+    flexWrap: "wrap-reverse",
+    margin: "var(--sl-spacing-medium) 0",
+    "& .cancel": {
+      marginLeft: "auto",
+      marginRight: "var(--sl-spacing-medium)",
+      "&::part(base)": {
         fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-400)",
-        textAlign: "left",
-        paddingRight: "var(--sl-spacing-xxx-large)",
-        "@media (max-width: 499px)": {
-          width: "100%",
-          paddingRight: "0",
-          paddingBottom: "0",
-        },
-      },
-      "& .value": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .top-border": {
-        borderTop: "1px solid var(--sl-color-neutral-200)",
+        color: "var(--sl-color-neutral-1000)",
       },
-      "& .image": {
-        width: "200px",
-        "@media (max-width: 499px)": {
-          width: "100px",
-        },
+      "@media (max-width: 499px)": {
+        width: "100%",
+        marginRight: "0",
+        marginTop: "var(--sl-spacing-small)",
       },
     },
-    Button: {
-      display: "flex",
-      flexWrap: "wrap-reverse",
-      margin: "var(--sl-spacing-medium) 0",
-      "& .cancel": {
-        marginLeft: "auto",
-        marginRight: "var(--sl-spacing-medium)",
-        "&::part(base)": {
-          fontWeight: "var(--sl-font-weight-normal)",
-          color: "var(--sl-color-neutral-1000)",
-        },
-        "@media (max-width: 499px)": {
-          width: "100%",
-          marginRight: "0",
-          marginTop: "var(--sl-spacing-small)",
-        },
-      },
-      "& .continue": {
-        "&::part(base)": {
-          background: "var(--sl-color-primary-500)",
-          borderColor: "var(--sl-color-primary-500)",
-          fontWeight: "var(--sl-font-weight-normal)",
-          color: "var(--sl-color-neutral-0)",
-        },
-        "@media (max-width: 499px)": {
-          width: "100%",
-        },
-      },
-      "& .continue.right": {
-        marginLeft: "auto",
+    "& .continue": {
+      "&::part(base)": {
+        background: "var(--sl-color-primary-500)",
+        borderColor: "var(--sl-color-primary-500)",
+        fontWeight: "var(--sl-font-weight-normal)",
+        color: "var(--sl-color-neutral-0)",
       },
-      "& .continue.center": {
-        margin: "0 auto",
+      "@media (max-width: 499px)": {
+        width: "100%",
       },
     },
-    Confetti: {
-      pointerEvents: "none",
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      top: "0%",
-      left: "0%",
-      zIndex: "1",
+    "& .continue.right": {
+      marginLeft: "auto",
     },
+    "& .continue.center": {
+      margin: "0 auto",
+    },
+  },
+  Confetti: {
+    pointerEvents: "none",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: "0%",
+    left: "0%",
+    zIndex: "1",
+  },
+};
+// JSS config
+const sheet$8 = JSS.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+function RewardExchangeView(props) {
+  const { states, data, callbacks, refs } = props;
+  const { selectedItem, selectedStep } = states;
+  const stageProgressList = {
+    chooseReward: states.content.text.chooseRewardTitle,
+    chooseAmount: states.content.text.chooseAmountTitle,
+    confirmation: states.content.text.confirmationTitle,
   };
-  // JSS config
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
   function getInput() {
     var _a, _b, _c;
     const item = states.selectedItem;
@@ -1866,7 +1864,7 @@ function RewardExchangeView(props) {
     }
     // console.log("SELECTED ITEM ", states.selectedStep);
     // console.log("CALLBACKS ", callbacks);
-    return (index.h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    return (index.h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet$8.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
         var _a, _b, _c, _d, _e;
         return callbacks.setExchangeState({
           amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
@@ -1899,7 +1897,7 @@ function RewardExchangeView(props) {
     return [
       index.h("div", null,
         index.h("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.rewardTitle),
-        states.loading ? (loading()) : (index.h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        states.loading ? (loading()) : (index.h("div", { class: sheet$8.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
@@ -1908,7 +1906,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (index.h("div", { key: item.key, style: style },
-            index.h("sl-card", { class: sheet.classes.Card, style: {
+            index.h("sl-card", { class: sheet$8.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -1925,14 +1923,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                index.h("div", { class: sheet.classes.Image, style: {
+                index.h("div", { class: sheet$8.classes.Image, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("img", { class: item.unavailableReasonCode
                       ? "image subdued"
                       : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
                       index.getAssetPath("./assets/Reward-image.png") })),
-                index.h("div", { class: sheet.classes.TextArea, style: {
+                index.h("div", { class: sheet$8.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("div", { class: "title", style: {
@@ -1965,7 +1963,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        index.h("div", { class: sheet.classes.Button },
+        index.h("div", { class: sheet$8.classes.Button },
           index.h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -1978,7 +1976,7 @@ function RewardExchangeView(props) {
     console.log("input", input);
     console.log(states.amount);
     return (index.h("div", null,
-      index.h("div", { class: sheet.classes.ChooseAmount },
+      index.h("div", { class: sheet$8.classes.ChooseAmount },
         index.h("div", { class: "wrapper" },
           index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               index.getAssetPath("./assets/Reward-image.png") }),
@@ -1987,7 +1985,7 @@ function RewardExchangeView(props) {
             ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "points" }, input)) : (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", { class: "points" }, input)),
             index.h("div", { class: "space" }),
-            index.h("div", { class: sheet.classes.Button },
+            index.h("div", { class: sheet$8.classes.Button },
               index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
               index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))))));
   }
@@ -1998,7 +1996,7 @@ function RewardExchangeView(props) {
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (index.h("div", null,
       index.h("h2", { style: { margin: "var(--sl-spacing-large) 0", textAlign: "center" } }, states.content.text.redeemTitle),
-      index.h("div", { class: sheet.classes.Confirmation },
+      index.h("div", { class: sheet$8.classes.Confirmation },
         index.h("div", { class: "wrapper" },
           index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
           index.h("div", { class: "reward-item-container" },
@@ -2013,23 +2011,23 @@ function RewardExchangeView(props) {
         index.h("div", { class: "wrapper top-border padding" },
           index.h("div", { class: "field" }, states.content.text.costTitle),
           index.h("div", { class: "value" }, cost)),
-        index.h("div", { class: sheet.classes.Button },
+        index.h("div", { class: sheet$8.classes.Button },
           index.h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
           index.h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     // console.log("success");
-    return (index.h("div", { class: sheet.classes.Success },
+    return (index.h("div", { class: sheet$8.classes.Success },
       index.h(Gift$1, null),
       index.h(Confetti, null),
-      index.h("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      index.h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
       index.h("div", { class: "description" }, global.intl.formatMessage({
         id: "successMessage",
         defaultMessage: states.content.text.redemptionSuccessText,
       }, {
-        sourceValue: (_a = states.selectedItem.prettySourceValue) !== null && _a !== void 0 ? _a : (_b = states.selectedStep) === null || _b === void 0 ? void 0 : _b.prettySourceValue,
-        destinationValue: ((_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettyDestinationValue) || ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.name) ||
+        sourceValue: (_b = states.selectedItem.prettySourceValue) !== null && _b !== void 0 ? _b : (_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettySourceValue,
+        destinationValue: ((_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettyDestinationValue) || ((_e = states.selectedItem) === null || _e === void 0 ? void 0 : _e.name) ||
           states.selectedItem.globalRewardKey,
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { style: {
@@ -2039,8 +2037,8 @@ function RewardExchangeView(props) {
           color: "var(--sl-color-neutral-700)",
         } },
         states.content.text.promoCode,
-        index.h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_e = states === null || states === void 0 ? void 0 : states.content) === null || _e === void 0 ? void 0 : _e.text.toopTipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
-      index.h("div", { class: sheet.classes.Button },
+        index.h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltiptext, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+      index.h("div", { class: sheet$8.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -2052,7 +2050,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { class: sheet.classes.ProgressBar },
+    return (index.h("div", { class: sheet$8.classes.ProgressBar },
       index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return index.h("span", { class: "text" }, stageProgressList[stage]);
@@ -2064,10 +2062,10 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$8.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
-        index.h("sl-card", { class: sheet.classes.Card },
-          index.h("div", { class: sheet.classes.CardLayout },
+        index.h("sl-card", { class: sheet$8.classes.Card },
+          index.h("div", { class: sheet$8.classes.CardLayout },
             index.h("div", null,
               index.h("sl-skeleton", { style: {
                   width: "100px",
@@ -2092,17 +2090,17 @@ function RewardExchangeView(props) {
   function queryErrorMessage() {
     return (index.h("sl-alert", { type: "danger", open: true },
       index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      states.content.text.queryError));
+      states.queryError));
   }
   function Confetti() {
     return (index.h("canvas", { ref: (canvas) => {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$8.classes.Confetti }));
   }
-  return (index.h("div", { class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
+  return (index.h("div", { class: sheet$8.classes.Container },
+    index.h("style", { type: "text/css" }, styleString$8),
     index.h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -2129,7 +2127,7 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
         redeemTitle: "Confirm and redeem",
         redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
         doneText: "Done",
-        toolTipText: "Copied!",
+        tooltiptext: "Copied!",
         selectText: "Select amount to receive",
         sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
         rewardRedeemedText: "Reward redeemed",
@@ -2139,8 +2137,10 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
         rewardNameTitle: "Reward Name",
         rewardAmountTitle: "Reward Amount",
         costTitle: "Cost",
+        notEnoughError: "Sorry not enough!",
       },
     },
+    queryError: false,
     redeemStage: stage,
     amount: 0,
     exchangeError: error,
@@ -2148,6 +2148,7 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     selectedItem: selectedItem,
     selectedStep: selectedStep,
     open: false,
+    empty: (index.h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1643998821/squatch-assets/Group_29.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })),
   },
   data: {
     exchangeList: data,