@saasquatch/mint-components 1.15.0-9 → 1.15.0-90

package/dist/cjs/{ShadowViewAddon-3e3e03ab.js → ShadowViewAddon-15a0eed0.js}

@@ -1,21 +1,63 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-124aec2c.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-191f2253.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-7cbd60cc.js');
 const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-82e8797b.js');
-const mixins = require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-b2f47da0.js');
-const useChildElements = require('./useChildElements-1b35d945.js');
-const luxon = require('./luxon-2926d85f.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
+const useReferralCodes = require('./useReferralCodes-11cdf43b.js');
+const mixins = require('./mixins-4761d472.js');
+const copyTextView = require('./copy-text-view-a8adf868.js');
+const useChildElements = require('./useChildElements-966c9041.js');
+const luxon = require('./luxon-949beaf2.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 const index$1 = require('./index-8c6255f5.js');
-const utilities = require('./utilities-78f5e169.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
+const utilities = require('./utilities-9a0c5e91.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
+
+function BigStatView(props) {
+  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
+  // Dependent on props, not feasible to move out
+  const style = {
+    Container: {
+      display: "flex",
+      // height: "inherit",
+      // "justify-content": "space-between",
+      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
+      "align-items": `${alignment === "left"
+        ? "flex-start"
+        : alignment === "right"
+          ? "flex-end"
+          : "center"}`,
+    },
+    Stat: {
+      "font-size": statFontSize
+        ? `${statFontSize}px`
+        : "var(--sl-font-size-xx-large)",
+      "text-align": alignment,
+      color: statTextColor || "var(--sqm-text)",
+      lineHeight: "35px",
+      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
+    },
+    Description: {
+      "font-size": descriptionFontSize
+        ? `${descriptionFontSize}px`
+        : "var(--sl-font-size-small)",
+      "font-weight": "var(--sl-font-weight-normal)",
+      color: descriptionTextColor || "var(--sqm-text)",
+      "text-align": alignment,
+      lineHeight: "20px",
+    },
+  };
+  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),
+    index.h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
+    index.h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
+}
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -40,15 +82,30 @@ const style = {
 };
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
+// TODO: Figure out hover and active states
+// *::part(base):hover {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
+// *::part(base):focus {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
 function ShareButtonView(props, children) {
   const vanillaStyle = `
-	*::part(base) {
-	border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}80!important;
+	sl-button::part(base) {
+	  border: ${props.border || "none"};
+    font-family: var(--sqm-primary-font);
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -63,21 +120,7 @@ function ShareButtonView(props, children) {
 	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
 	}
 
-	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
-	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
 	*::part(label) {
 		position: relative;
@@ -87,490 +130,238 @@ function ShareButtonView(props, children) {
   return props.hide ? (index.h(index.Host, { style: { display: "none" } })) : (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString),
     index.h("style", { type: "text/css" }, vanillaStyle),
-    index.h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
+    index.h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
       !props.hideicon && (index.h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }
 
-function LeaderboardView(props) {
-  var _a, _b, _c;
-  const { states, data, elements } = props;
-  const { styles } = states;
+function StatContainerView(props, children) {
+  const divideSpace = () => {
+    const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
+    return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
+  };
+  // take alignment variable and convert it to CSS flexbox alignment
+  const alignment = props.alignment === "center"
+    ? "center"
+    : props.alignment === "right"
+      ? "flex-end"
+      : "flex-start";
+  // Dependent on props, not feasible to move out
   const style = {
-    Leaderboard: {
-      "& table": {
-        width: "100%",
-        borderCollapse: "collapse",
-      },
-      "& th": {
-        textAlign: "left",
-        padding: "var(--sl-spacing-medium)",
-        paddingTop: "0",
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& tr:not(:first-child)": {
-        borderTop: "1px solid var(--sl-color-neutral-200)",
-      },
-      "& td": {
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-normal)",
-      },
-      "& .ellipses": {
-        textAlign: "left",
-        padding: "0",
-        color: "var(--sqm-text)",
-        paddingLeft: "25%",
-      },
-      "& .highlight": {
-        background: styles.viewingUserhighlightColor || "var(--sl-color-primary-100)",
-      },
-      "& td, th": {
-        color: "var(--sqm-text)",
-        padding: "var(--sl-spacing-medium)",
+    StatContainer: {
+      width: "100%",
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: alignment,
+      flexDirection: "row",
+      gap: `var(--sl-spacing-${props.gap})`,
+      // Apply border styles conditionally based on the hideBorder prop
+      "& > *": {
+        "border-right": props.hideBorder
+          ? "none"
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+        "padding-right": divideSpace(),
       },
-      "& .User": {
-        width: "100%",
+      "& > :last-child": {
+        "border-right": "none",
       },
-      "& .Score": {
-        width: "auto",
-        whiteSpace: "nowrap",
+      "& > ::slotted(*)": {
+        "border-right": props.hideBorder
+          ? "none"
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+        "padding-right": divideSpace(),
       },
-      "& .Rank": {
-        whiteSpace: "nowrap",
+      "& > ::slotted(*:last-child)": {
+        "border-right": "none",
       },
-      "& .fullWidth": {
-        width: "100%",
+      "@media screen and (max-width: 430px)": {
+        "& > ::slotted(*)": {
+          borderRight: "none",
+        },
       },
     },
+    StatFrame: {
+      display: "flex",
+    },
+    BorderFix: {
+      "border-right": "var(--sqm-border-thickness) solid transparent",
+      width: "0px",
+      "margin-left": "-1px",
+    },
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: block;
-  }
-`;
-  if (states.isEssentials) {
-    return (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
-  }
-  if (states.loading) {
-    return (index.h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
-      index.h("style", { type: "text/css" },
-        styleString,
-        vanillaStyle),
-      index.h("table", null, [...Array(10)].map(() => {
-        return (index.h("tr", null,
-          index.h("td", null,
-            index.h("sl-skeleton", null))));
-      }))));
-  }
-  if (!states.hasLeaders)
-    return elements.empty;
-  let userSeenFlag = false;
-  const getUsersName = (user) => {
-    if (!user.firstName && !user.lastInitial)
-      return styles.anonymousUser;
-    const { firstName, lastInitial } = user;
-    if (firstName && lastInitial)
-      return `${firstName} ${lastInitial}`;
-    if (firstName || lastInitial)
-      return firstName || lastInitial;
-    return styles.anonymousUser;
-  };
-  const getRankCellText = (userRank, isViewingUsersRow) => {
-    if (!userRank) {
-      return styles.hideNames ? `${styles.viewingUserText}` : "-";
-    }
-    const viewingUserText = ` - ${styles.viewingUserText}`;
-    return styles.rankSuffix
-      ? global.intl.formatMessage({
-        id: "rank",
-        defaultMessage: styles.rankSuffix,
-      }, {
-        rank: userRank,
-      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
-      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
-  };
-  return (index.h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
-    index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    index.h("table", { part: "sqm-table" },
-      index.h("tr", null,
-        styles.showRank && (index.h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
-        !styles.hideNames && index.h("th", { class: "User" }, styles.usersheading),
-        index.h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
-      _a.map((user) => {
-        var _a, _b;
-        if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
-          userSeenFlag = true;
-        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
-        return (index.h("tr", { class: isViewingUsersRow ? "highlight" : "" },
-          styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
-          !styles.hideNames && index.h("td", { class: "User" }, getUsersName(user)),
-          index.h("td", { class: "Score" }, user.textValue)));
-      }),
-      !userSeenFlag && !styles.hideViewer && (index.h("tr", null,
-        index.h("td", { colSpan: 100, class: "ellipses" },
-          index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
-      !userSeenFlag && !styles.hideViewer && (index.h("tr", { class: "highlight" },
-        styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
-        !styles.hideNames && (index.h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
-        index.h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
+  return (index.h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
+    index.h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
+      index.h("style", { type: "text/css" }, styleString),
+      children),
+    index.h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
 }
 
-function BigStatView(props) {
-  const { statvalue, flexReverse, alignment } = props;
-  // Dependent on props, not feasiable to move out
+function PortalChangePasswordView(props) {
+  const { states, callbacks } = props;
   const style = {
-    Container: {
-      display: "flex",
-      height: "inherit",
-      "justify-content": "space-between",
-      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
-      "align-items": `${alignment === "left"
-        ? "flex-start"
-        : alignment === "right"
-          ? "flex-end"
-          : "center"}`,
+    Dialog: {
+      padding: "0",
+      "&::part(panel)": {
+        background: "var(--sqm-portal-background)",
+        borderRadius: "var(--sqm-border-radius-normal, var(--sl-border-radius-medium))",
+      },
+      "&::part(close-button)": {
+        "margin-top": "var(--sl-spacing-medium)",
+      },
+      "&::part(body)": {
+        padding: "0 var(--sl-spacing-x-large) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
+      },
     },
-    Stat: {
-      "font-size": "var(--sl-font-size-x-large)",
-      "text-align": alignment,
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
     },
-    Description: {
-      "font-size": "var(--sl-font-size-small)",
-      "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sqm-text-subdued)",
-      "text-align": alignment,
+    Success: {
+      "&::part(successalert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+    InputContainer: {
+      "& > :not(:last-child)": {
+        "margin-bottom": "var(--sl-spacing-x-large)",
+      },
+    },
+    CancelButton: {
+      margin: "var(--sl-spacing-large) auto",
+      width: "100%",
+    },
+    PasswordField: {
+      marginBottom: "var(--sl-spacing-large) !important",
+      display: "block",
+    },
+    ChangePasswordButton: {
+      paddingTop: "var(--sl-spacing-x-large)",
     },
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", { part: "stat-wrapper", class: sheet.classes.Container },
+  return (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
-    index.h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
-}
-
-const style$1 = {
-  HostBlock: mixins.HostBlock,
-  Frame: {
-    display: "flex",
-    "flex-direction": "column",
-    "box-sizing": "border-box",
-  },
-  FooterWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-    background: "var(--sqm-footer-background)",
-    display: "flex",
-    "justify-content": "flex-end",
-    "align-items": "center",
-    "box-sizing": "border-box",
-    "margin-top": "auto",
-  },
-  HeaderWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    "box-sizing": "border-box",
-    display: "flex",
-    "justify-content": "space-between",
-    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
-    "align-items": "center",
-    "background-color": "var(--sqm-header-background)",
-    "@media screen and (max-width: 499px)": {
-      "flex-direction": "row-reverse",
-      "justify-content": "flex-end",
-      padding: "0",
-    },
-  },
-};
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
-function PortalFrameView(props, children) {
-  const { data, notFullScreen } = props;
-  return (index.h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$1.classes.Frame, part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$1),
-    index.h("div", { class: sheet$1.classes.HeaderWrapper, part: "sqm-header" },
-      data.header,
-      index.h("slot", { name: "sqm-navigation-menu" })),
-    children,
-    index.h("div", { class: sheet$1.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
+    index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        labelMargin: "x-large",
+        padding: "none",
+        label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.modalChangePasswordHeader)),
+        content: (index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "none", gap: "32px" }),
+          states.error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+            index.h("div", { part: "erroralert-text" }, states.error))),
+          states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
+            index.h("div", { part: "successalert-text" }, states.content.successMessage))),
+          index.h("sl-form", { "onSl-submit": callbacks.submit },
+            index.h("div", { class: sheet.classes.InputContainer },
+              index.h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
+              index.h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
+            index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
+              index.h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              index.h("sl-button", { class: sheet.classes.CancelButton, type: "secondary", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+      }))),
+    index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+      labelMargin: "x-large",
+      padding: "xxx-large",
+      label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
+      content: (index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+    }),
+      index.h("style", { type: "text/css" }, styleString))));
 }
 
-const EditProfileView = (props) => {
-  var _a, _b, _c, _d;
-  const { states, callbacks } = props;
-  const { text } = states;
-  const { errors } = states.formState;
-  if (states.showEdit) {
-    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
-      index.h("h2", { part: "sqm-header", style: {
-          fontSize: "var(--sl-font-size-x-large)",
-          margin: "0px",
-          textAlign: "center",
-        } }, text.editprofileheader),
-      index.h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
-        index.h("div", { class: "FormSection" },
-          states.formState.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-            index.h("div", { part: "erroralert-text" }, states.formState.error))),
-          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
-            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
-            : []), { id: "firstName", name: "firstName", error: errors.firstName && errors.firstName.status !== "valid"
-              ? errors.firstName.message
-              : undefined })),
-          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
-            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
-            : []), { error: errors.lastName && errors.lastName.status !== "valid"
-              ? errors.lastName.message
-              : undefined }))),
-        text.showregion && states.formState.currentRegion && (index.h("sl-input", { exportparts: "label: input-label, base: input-base", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
-        index.h("div", { class: "ButtonWrapper" },
-          index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
-              callbacks.onSubmit(e);
-            }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
-          index.h("sl-button", { onClick: () => {
-              callbacks.setShowEdit(false);
-            }, exportparts: "base: secondarybutton-base" }, text.canceltext)))));
+function PoweredByImg({ color = "#A6A6A6", width = 120, height = 16, }) {
+  return (index.h("svg", { width: width, height: height, viewBox: "0 0 1662 254", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { d: "M801.082 253.58L869.382 1.67969", stroke: color, "stroke-width": "3" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M125.682 42.48C123.882 42.48 121.982 42.78 120.382 43.48C118.682 44.18 117.182 45.18 115.882 46.48C114.582 47.68 113.582 49.28 112.882 50.98C112.182 52.68 111.882 54.48 111.982 56.28C112.282 59.68 113.882 63.08 116.382 65.38C118.982 67.78 122.382 68.98 125.782 68.98C129.282 68.98 132.682 67.58 135.182 65.38C137.782 62.98 139.382 59.78 139.582 56.28C139.582 54.38 139.282 52.68 138.682 50.98C137.982 49.28 136.982 47.78 135.682 46.48C134.382 45.18 132.882 44.18 131.182 43.48C129.282 42.78 127.582 42.48 125.682 42.48Z", fill: color }),
+    index.h("path", { d: "M135.882 89.2798H115.582V187.58H135.882V89.2798Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M231.481 104.18C238.781 93.4799 251.181 87.3799 266.281 87.3799C290.981 87.3799 307.581 103.28 307.381 127.08V187.48H286.781V132.38C286.781 116.38 278.281 107.18 263.381 107.18C248.481 107.18 237.981 117.68 237.981 132.68V187.48H217.281V132.38C217.281 116.38 208.781 107.18 193.881 107.18C178.981 107.18 168.481 117.68 168.481 132.68V187.48H147.981V89.3799H168.681V97.8799C178.081 88.8799 190.181 87.4799 197.081 87.4799C211.881 87.4799 224.381 93.5799 231.481 104.18Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M370.781 87.48C358.581 87.48 347.981 91.38 339.981 98.38V89.28H319.481V226.08H339.981V177.78C347.881 185.08 358.581 188.78 370.781 188.78C398.781 188.78 419.881 166.88 419.881 138.08C419.981 109.28 398.781 87.48 370.781 87.48ZM368.881 169.58C351.481 169.58 338.881 156.38 338.881 138.28C338.881 120.38 351.381 106.98 368.881 106.98C386.281 106.98 398.881 120.08 398.881 138.28C398.881 156.48 386.381 169.58 368.881 169.58Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M701.782 169.88C707.682 169.88 714.082 167.58 719.582 163.98L721.482 162.88L731.482 178.68L729.782 179.88C721.282 186.28 710.982 189.58 700.382 189.58C678.082 189.58 665.782 176.38 665.782 152.28V108.68H645.682V89.3799H665.782V59.8799H686.482V89.2798H725.682V108.48H686.482V151.88C686.482 163.38 691.982 169.88 701.782 169.88Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M551.282 239.88C549.982 239.88 548.782 240.28 547.682 240.88C546.682 241.58 545.782 242.58 545.382 243.68C544.882 244.78 544.782 246.08 545.082 247.28C545.282 248.58 545.882 249.68 546.882 250.48C547.782 251.38 548.882 251.98 550.082 252.28C551.382 252.48 552.582 252.38 553.782 251.98C554.882 251.48 555.982 250.78 556.582 249.68C557.282 248.68 557.582 247.38 557.582 246.18C557.582 244.48 556.982 242.88 555.682 241.68C554.482 240.48 552.882 239.88 551.282 239.88Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M586.182 210.78C592.282 210.78 597.582 213.08 601.082 217.18L601.482 217.68L596.282 223.08L595.782 222.58C594.482 221.18 593.082 220.18 591.382 219.48C589.682 218.78 587.882 218.38 586.082 218.48C578.882 218.48 573.682 224.08 573.682 231.58C573.682 239.18 578.882 244.78 586.082 244.78C589.782 244.68 593.282 243.18 595.882 240.58L596.382 240.08L601.382 245.68L600.982 246.08C597.182 250.18 591.982 252.18 586.082 252.18C574.082 252.18 565.382 243.58 565.382 231.58C565.582 219.48 574.182 210.78 586.182 210.78Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M633.782 210.78C621.682 210.78 612.582 219.68 612.582 231.38C612.582 243.08 621.682 251.98 633.782 251.98C645.882 251.98 654.882 243.08 654.882 231.38C655.082 219.78 645.982 210.78 633.782 210.78ZM633.782 244.78C626.382 244.78 620.782 239.28 620.782 231.58C620.782 223.88 626.182 218.48 633.782 218.48C641.182 218.48 646.782 224.08 646.782 231.58C646.782 238.98 641.382 244.78 633.782 244.78Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M723.982 228.78C723.982 222.18 720.382 218.28 714.082 218.28C707.682 218.28 703.382 222.78 702.982 228.98V252.18H695.082V228.68C695.082 222.08 691.482 218.18 685.182 218.18C680.082 218.18 674.482 221.48 674.482 228.88V252.08H666.582V211.38H674.482V214.78L676.682 213.28C679.582 211.38 683.082 210.48 686.582 210.48C692.082 210.48 696.782 212.48 699.882 216.08L700.882 217.28L701.882 216.08C704.782 212.48 709.582 210.48 715.182 210.48C725.082 210.48 731.982 217.08 731.982 226.38V251.88H724.082V228.68H723.982V228.78Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M511.681 89.4797V98.7797C503.681 91.4797 493.181 87.6797 480.981 87.6797C452.981 87.6797 431.981 109.68 431.981 138.68C431.981 167.78 453.081 189.68 480.981 189.68C493.181 189.68 503.681 185.78 511.681 178.38V187.68H532.381V89.4797H511.681ZM482.881 169.88C465.481 169.88 452.781 156.58 452.781 138.48C452.781 120.48 465.281 106.98 482.881 106.98C500.481 106.98 512.781 120.08 512.781 138.48C512.781 156.68 500.181 169.88 482.881 169.88Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M595.281 107.08C604.181 107.08 611.781 110.38 618.781 116.98L620.481 118.68L633.981 104.58L632.581 102.98C623.781 92.98 610.781 87.48 595.781 87.48C565.981 87.48 544.481 109.08 544.481 138.48C544.481 167.98 565.981 189.48 595.781 189.48C610.481 189.48 623.681 183.98 632.581 174.08L633.981 172.58L620.981 158.18L619.281 159.88C612.481 166.48 603.981 169.98 595.481 169.98C578.381 169.98 565.681 156.68 565.681 138.58C565.581 120.58 577.881 107.08 595.281 107.08Z", fill: color }),
+    index.h("path", { d: "M135.882 89.2798H115.582V187.58H135.882V89.2798Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M231.481 104.18C238.781 93.4799 251.181 87.3799 266.281 87.3799C290.981 87.3799 307.581 103.28 307.381 127.08V187.48H286.781V132.38C286.781 116.38 278.281 107.18 263.381 107.18C248.481 107.18 237.981 117.68 237.981 132.68V187.48H217.281V132.38C217.281 116.38 208.781 107.18 193.881 107.18C178.981 107.18 168.481 117.68 168.481 132.68V187.48H147.981V89.3799H168.681V97.8799C178.081 88.8799 190.181 87.4799 197.081 87.4799C211.881 87.4799 224.381 93.5799 231.481 104.18Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M370.781 87.48C358.581 87.48 347.981 91.38 339.981 98.38V89.28H319.481V226.08H339.981V177.78C347.881 185.08 358.581 188.78 370.781 188.78C398.781 188.78 419.881 166.88 419.881 138.08C419.981 109.28 398.781 87.48 370.781 87.48ZM368.881 169.58C351.481 169.58 338.881 156.38 338.881 138.28C338.881 120.38 351.381 106.98 368.881 106.98C386.281 106.98 398.881 120.08 398.881 138.28C398.881 156.48 386.381 169.58 368.881 169.58Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M701.782 169.88C707.682 169.88 714.082 167.58 719.582 163.98L721.482 162.88L731.482 178.68L729.782 179.88C721.282 186.28 710.982 189.58 700.382 189.58C678.082 189.58 665.782 176.38 665.782 152.28V108.68H645.682V89.3799H665.782V59.8799H686.482V89.2798H725.682V108.48H686.482V151.88C686.482 163.38 691.982 169.88 701.782 169.88Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M511.681 89.4797V98.7797C503.681 91.4797 493.181 87.6797 480.981 87.6797C452.981 87.6797 431.981 109.68 431.981 138.68C431.981 167.78 453.081 189.68 480.981 189.68C493.181 189.68 503.681 185.78 511.681 178.38V187.68H532.381V89.4797H511.681ZM482.881 169.88C465.481 169.88 452.781 156.58 452.781 138.48C452.781 120.48 465.281 106.98 482.881 106.98C500.481 106.98 512.781 120.08 512.781 138.48C512.781 156.68 500.181 169.88 482.881 169.88Z", fill: color }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M595.281 107.08C604.181 107.08 611.781 110.38 618.781 116.98L620.481 118.68L633.981 104.58L632.581 102.98C623.781 92.98 610.781 87.48 595.781 87.48C565.981 87.48 544.481 109.08 544.481 138.48C544.481 167.98 565.981 189.48 595.781 189.48C610.481 189.48 623.681 183.98 632.581 174.08L633.981 172.58L620.981 158.18L619.281 159.88C612.481 166.48 603.981 169.98 595.481 169.98C578.381 169.98 565.681 156.68 565.681 138.58C565.581 120.58 577.881 107.08 595.281 107.08Z", fill: color }),
+    index.h("path", { d: "M34.6815 112.78C40.6815 112.78 46.5815 114.18 51.8815 116.68C57.2815 119.18 62.0815 122.78 65.9815 127.28C67.9815 122.68 69.0815 117.78 69.0815 112.88C69.0815 108.38 68.1815 103.88 66.4815 99.8799C64.6815 95.6799 62.1815 91.9799 58.9815 88.8799C55.7815 85.7799 51.9815 83.2799 47.7815 81.4799C43.5815 79.7799 39.0815 78.8799 34.5815 78.8799C30.0815 78.8799 25.5815 79.6799 21.3815 81.4799C17.1815 83.1799 13.3815 85.7799 10.1815 88.8799C6.98154 91.9799 4.48154 95.7799 2.68154 99.8799C0.881541 104.08 0.081543 108.38 0.081543 112.88C0.181543 117.88 1.18154 122.78 3.18154 127.28C7.08154 122.68 11.8815 119.18 17.1815 116.68C22.7815 113.98 28.7815 112.68 34.6815 112.78Z", fill: color }),
+    index.h("path", { d: "M69.1817 153.48C69.1817 146.68 67.1817 140.18 63.2817 134.48C59.4817 128.88 54.0817 124.48 47.7817 121.88C41.4817 119.28 34.4817 118.68 27.7817 119.88C21.0817 121.28 14.8817 124.48 10.0817 129.28C5.28166 134.08 1.88166 140.08 0.681661 146.78C-0.718339 153.48 0.0816607 160.18 2.68166 166.48C5.28166 172.78 9.68166 178.08 15.4817 181.78C21.0817 185.58 27.7817 187.48 34.6817 187.48C43.7817 187.38 52.5817 183.88 59.0817 177.38C65.6817 170.98 69.1817 162.58 69.1817 153.48Z", fill: color }),
+    index.h("path", { d: "M69.1817 34.9799C69.1817 28.1799 67.1817 21.6799 63.2817 15.9799C59.4817 10.3799 54.1817 5.9799 47.7817 3.3799C41.4817 0.779901 34.4817 0.1799 27.7817 1.3799C21.0817 2.7799 14.8817 5.97986 10.0817 10.7799C5.28166 15.5799 1.88166 21.5799 0.681661 28.2799C-0.718339 34.9799 0.0816607 41.6799 2.68166 47.9799C5.28166 54.2799 9.68166 59.5799 15.4817 63.2799C21.0817 67.0799 27.7817 68.9799 34.6817 68.9799C43.8817 68.9799 52.6817 65.3799 59.1817 58.9799C65.5817 52.6799 69.1817 43.8799 69.1817 34.9799Z", fill: color }),
+    index.h("path", { d: "M962.664 203.95C953.044 203.95 945.244 201.285 939.264 195.955C933.284 190.495 930.294 183.41 930.294 174.7C930.294 165.08 933.739 157.605 940.629 152.275C947.649 146.945 957.464 144.28 970.074 144.28H993.864V138.43C993.864 129.72 991.589 123.09 987.039 118.54C982.619 113.86 976.184 111.52 967.734 111.52C962.014 111.52 956.749 112.885 951.939 115.615C947.129 118.345 943.229 122.18 940.239 127.12L933.999 120.295C937.639 114.575 942.384 110.22 948.234 107.23C954.214 104.11 960.974 102.55 968.514 102.55C979.694 102.55 988.404 105.605 994.644 111.715C1001.01 117.695 1004.2 126.015 1004.2 136.675V184.255C1004.2 188.805 1004.98 194.72 1006.54 202H997.569C996.399 199.14 995.554 194.07 995.034 186.79H994.644C990.874 192.25 986.259 196.475 980.799 199.465C975.339 202.455 969.294 203.95 962.664 203.95ZM962.664 195.175C968.124 195.175 973.259 194.07 978.069 191.86C982.879 189.52 986.714 186.465 989.574 182.695C992.434 178.795 993.864 174.7 993.864 170.41V152.665H969.489C960.389 152.665 953.239 154.615 948.039 158.515C942.969 162.415 940.434 167.81 940.434 174.7C940.434 180.68 942.514 185.62 946.674 189.52C950.834 193.29 956.164 195.175 962.664 195.175Z", fill: color }),
+    index.h("path", { d: "M1067.55 203.95C1055.07 203.95 1045.25 199.27 1038.1 189.91C1030.95 180.55 1027.38 167.745 1027.38 151.495C1027.38 136.415 1031.02 124.52 1038.3 115.81C1045.71 106.97 1055.72 102.55 1068.33 102.55C1074.7 102.55 1080.55 104.045 1085.88 107.035C1091.21 110.025 1095.5 114.25 1098.75 119.71H1099.14V57.3101H1109.67V178.21C1109.67 189.13 1109.86 197.06 1110.25 202H1100.89C1100.63 197.84 1100.5 192.12 1100.5 184.84H1100.11C1097.12 190.69 1092.7 195.37 1086.85 198.88C1081 202.26 1074.57 203.95 1067.55 203.95ZM1068.13 195.175C1077.23 195.175 1084.64 192.185 1090.36 186.205C1096.21 180.225 1099.14 172.49 1099.14 163V146.815C1099.14 135.895 1096.41 127.25 1090.95 120.88C1085.49 114.38 1078.08 111.13 1068.72 111.13C1059.1 111.13 1051.49 114.77 1045.9 122.05C1040.44 129.2 1037.71 139.145 1037.71 151.885C1037.71 165.275 1040.44 175.87 1045.9 183.67C1051.36 191.34 1058.77 195.175 1068.13 195.175Z", fill: color }),
+    index.h("path", { d: "M1208.57 104.5L1172.3 202H1161.96L1125.5 104.5H1136.61L1167.03 189.715L1197.45 104.5H1208.57Z", fill: color }),
+    index.h("path", { d: "M1261.51 203.95C1252.54 203.95 1244.61 201.87 1237.72 197.71C1230.96 193.55 1225.7 187.635 1221.93 179.965C1218.29 172.295 1216.47 163.39 1216.47 153.25C1216.47 143.11 1218.29 134.205 1221.93 126.535C1225.7 118.865 1230.96 112.95 1237.72 108.79C1244.61 104.63 1252.54 102.55 1261.51 102.55C1270.48 102.55 1278.35 104.63 1285.11 108.79C1292 112.95 1297.33 118.865 1301.1 126.535C1304.87 134.205 1306.75 143.11 1306.75 153.25C1306.75 163.39 1304.87 172.295 1301.1 179.965C1297.33 187.635 1292 193.55 1285.11 197.71C1278.35 201.87 1270.48 203.95 1261.51 203.95ZM1261.51 195.37C1268.4 195.37 1274.45 193.615 1279.65 190.105C1284.98 186.595 1289.07 181.655 1291.93 175.285C1294.79 168.915 1296.22 161.57 1296.22 153.25C1296.22 144.93 1294.79 137.585 1291.93 131.215C1289.07 124.845 1284.98 119.905 1279.65 116.395C1274.45 112.885 1268.4 111.13 1261.51 111.13C1254.75 111.13 1248.71 112.885 1243.38 116.395C1238.18 119.905 1234.15 124.845 1231.29 131.215C1228.43 137.585 1227 144.93 1227 153.25C1227 161.57 1228.43 168.915 1231.29 175.285C1234.15 181.655 1238.18 186.595 1243.38 190.105C1248.71 193.615 1254.75 195.37 1261.51 195.37Z", fill: color }),
+    index.h("path", { d: "M1366.03 203.95C1352.25 203.95 1341.52 199.53 1333.85 190.69C1326.31 181.72 1322.54 169.24 1322.54 153.25C1322.54 137.39 1326.38 124.975 1334.05 116.005C1341.72 107.035 1352.38 102.55 1366.03 102.55C1373.57 102.55 1380.26 104.11 1386.11 107.23C1391.96 110.22 1396.77 114.575 1400.54 120.295L1394.3 126.34C1391.31 121.66 1387.28 118.02 1382.21 115.42C1377.27 112.69 1371.88 111.325 1366.03 111.325C1355.76 111.325 1347.63 115.03 1341.65 122.44C1335.8 129.85 1332.88 140.12 1332.88 153.25C1332.88 166.38 1335.8 176.65 1341.65 184.06C1347.63 191.47 1355.76 195.175 1366.03 195.175C1371.88 195.175 1377.27 193.875 1382.21 191.275C1387.28 188.545 1391.31 184.84 1394.3 180.16L1400.54 186.205C1396.77 191.925 1391.96 196.345 1386.11 199.465C1380.26 202.455 1373.57 203.95 1366.03 203.95Z", fill: color }),
+    index.h("path", { d: "M1446.55 203.95C1436.93 203.95 1429.13 201.285 1423.15 195.955C1417.17 190.495 1414.18 183.41 1414.18 174.7C1414.18 165.08 1417.62 157.605 1424.51 152.275C1431.53 146.945 1441.35 144.28 1453.96 144.28H1477.75V138.43C1477.75 129.72 1475.47 123.09 1470.92 118.54C1466.5 113.86 1460.07 111.52 1451.62 111.52C1445.9 111.52 1440.63 112.885 1435.82 115.615C1431.01 118.345 1427.11 122.18 1424.12 127.12L1417.88 120.295C1421.52 114.575 1426.27 110.22 1432.12 107.23C1438.1 104.11 1444.86 102.55 1452.4 102.55C1463.58 102.55 1472.29 105.605 1478.53 111.715C1484.9 117.695 1488.08 126.015 1488.08 136.675V184.255C1488.08 188.805 1488.86 194.72 1490.42 202H1481.45C1480.28 199.14 1479.44 194.07 1478.92 186.79H1478.53C1474.76 192.25 1470.14 196.475 1464.68 199.465C1459.22 202.455 1453.18 203.95 1446.55 203.95ZM1446.55 195.175C1452.01 195.175 1457.14 194.07 1461.95 191.86C1466.76 189.52 1470.6 186.465 1473.46 182.695C1476.32 178.795 1477.75 174.7 1477.75 170.41V152.665H1453.37C1444.27 152.665 1437.12 154.615 1431.92 158.515C1426.85 162.415 1424.32 167.81 1424.32 174.7C1424.32 180.68 1426.4 185.62 1430.56 189.52C1434.72 193.29 1440.05 195.175 1446.55 195.175Z", fill: color }),
+    index.h("path", { d: "M1547.14 203.95C1539.08 203.95 1532.97 201.48 1528.81 196.54C1524.65 191.47 1522.57 184.19 1522.57 174.7V113.275H1505.02V104.5H1522.57V77.9801L1532.32 74.6651H1533.1V104.5H1560.59V113.275H1533.1V172.555C1533.1 180.355 1534.33 186.01 1536.8 189.52C1539.27 193.03 1543.17 194.785 1548.5 194.785C1553.83 194.785 1558.06 194.005 1561.18 192.445L1562.35 200.83C1558.19 202.91 1553.12 203.95 1547.14 203.95Z", fill: color }),
+    index.h("path", { d: "M1661.53 157.54H1589.77C1590.42 169.37 1593.54 178.535 1599.13 185.035C1604.85 191.535 1612.65 194.785 1622.53 194.785C1628.51 194.785 1633.97 193.485 1638.91 190.885C1643.98 188.285 1647.95 184.645 1650.81 179.965L1657.24 186.4C1653.34 192.12 1648.4 196.475 1642.42 199.465C1636.57 202.455 1629.94 203.95 1622.53 203.95C1609.01 203.95 1598.35 199.465 1590.55 190.495C1582.88 181.525 1579.05 169.175 1579.05 153.445C1579.05 137.585 1582.82 125.17 1590.36 116.2C1597.9 107.1 1608.23 102.55 1621.36 102.55C1633.84 102.55 1643.66 106.84 1650.81 115.42C1657.96 124 1661.53 135.895 1661.53 151.105V157.54ZM1651.39 147.4C1651.39 136.48 1648.66 127.77 1643.2 121.27C1637.74 114.77 1630.46 111.52 1621.36 111.52C1611.74 111.52 1604.2 114.77 1598.74 121.27C1593.28 127.77 1590.29 137.065 1589.77 149.155H1651.39V147.4Z", fill: color })));
+}
+
+const debug = domContextHooks_module.browser("sq:useBigStat");
+const LOADING = "...";
+const debugQuery = (query, variables, getStat) => {
+  const res = index_module.wn(query, variables);
+  if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
+    console.error("issue getting stat:", res);
   }
-  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
-    index.h("div", { class: "FormSection" },
-      index.h("h2", { part: "sqm-header", style: {
-          fontSize: "var(--sl-font-size-x-large)",
-          marginBottom: "0px",
-          textAlign: "center",
-        } }, text.editprofileheader),
-      index.h("div", null,
-        index.h("p", { style: { fontSize: "var(--sl-font-size-medium)" } }, (_a = states.user) === null || _a === void 0 ? void 0 :
-          _a.firstName,
-          " ", (_b = states.user) === null || _b === void 0 ? void 0 :
-          _b.lastName),
-        index.h("p", { style: { fontSize: "var(--sl-font-size-medium)" }, title: (_c = states.user) === null || _c === void 0 ? void 0 : _c.email }, (_d = states.user) === null || _d === void 0 ? void 0 : _d.email))),
-    index.h("sl-button", { type: "primary", loading: states.loading, onClick: () => {
-        callbacks.resetForm();
-        callbacks.setShowEdit(true);
-      }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
+  const stat = getStat(res);
+  return { ...stat, loading: res.loading };
 };
-
-const MessageLinkQuery = index_module.dist.gql `
-  query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
-    user: viewer {
-      ... on User {
-        shareLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: DIRECT
-        )
+const referralsCountQuery = (programId, 
+// locale
+_, status) => {
+  const programFilter = programId === "classic"
+    ? { programId_exists: false }
+    : { programId_eq: programId };
+  const convertedFilter = status && status == "converted"
+    ? { dateConverted_exists: true }
+    : status && status == "started"
+      ? { dateConverted_exists: false }
+      : {};
+  const queryFilter = { ...programFilter, ...convertedFilter };
+  return debugQuery(index_module.dist.gql `
+      query ($queryFilter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $queryFilter) {
+              totalCount
+            }
+          }
+        }
       }
-    }
-  }
-`;
-const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
-`;
-function useShareLink(props) {
-  var _a, _b;
-  const { programId = index_module.H() } = props;
-  const user = index_module.J();
-  const engagementMedium = index_module.B();
-  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
-  const { data } = index_module.wn(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
-  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_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
-  "...";
-  const [open, setOpen] = stencilHooks_module.useState(false);
-  async function onClick() {
-    if (contextData) {
-      await setCopied({ referralCode: contextData.referralCode });
-      contextData.refresh();
-    }
-    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
-    // Only if called from a user-initiated event
-    navigator.clipboard.writeText(copyString);
-    setOpen(true);
-    setTimeout(() => setOpen(false), props.tooltiplifespan);
-    sendLoadEvent({
-      eventMeta: {
-        programId,
-        id: user === null || user === void 0 ? void 0 : user.id,
-        accountId: user === null || user === void 0 ? void 0 : user.accountId,
-        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
-        meta: {
-          engagementMedium,
-          shareMedium: "DIRECT",
-        },
-      },
+    `, { queryFilter }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
     });
-  }
-  return { ...props, onClick, open, copyString: copyString };
-}
-
-const MessageLinkQuery$1 = index_module.dist.gql `
-  query (
-    $programId: ID
-    $engagementMedium: UserEngagementMedium!
-    $shareMedium: ReferralShareMedium!
-  ) {
-    viewer {
-      ... on User {
-        messageLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: $shareMedium
-        )
-        shareLink(programId: $programId, engagementMedium: $engagementMedium)
-      }
-    }
-  }
-`;
-function NativeShare(props, directLink, undefinedErrorText, unsupportedPlatformText) {
-  const title = props.sharetitle || "Share title";
-  const text = props.sharetext || "Share text";
-  if (directLink === "undefined") {
-    return alert(undefinedErrorText);
-  }
-  if (window.navigator.share) {
-    window.navigator
-      .share({
-      title,
-      text,
-      url: directLink,
-    })
-      .catch((error) => console.error("Error on web share", error));
-  }
-  else {
-    alert(unsupportedPlatformText);
-  }
-}
-function FacebookShare(directLink, messageLink, errorText) {
-  if (messageLink === "undefined" || directLink === "undefined") {
-    return alert(errorText);
-  }
-  if (typeof SquatchAndroid.shareOnFacebook !== "undefined") {
-    return SquatchAndroid.shareOnFacebook(directLink, messageLink);
-  }
-  else {
-    return GenericShare(messageLink, errorText);
-  }
-}
-function GenericShare(messageLink, errorText) {
-  return messageLink ? (window.location.href = messageLink) : alert(errorText);
-}
-function useShareButton(props) {
-  var _a, _b, _c, _d;
-  const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : index_module.H();
-  const user = index_module.J();
-  const engagementMedium = index_module.B();
-  const variables = {
-    engagementMedium,
-    programId: programId,
-    shareMedium: medium.toUpperCase(),
-  };
-  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
-  const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
-  // only queries if a programId is available
-  const res = index_module.wn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
-  const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_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.getEnvironmentSDK();
-  const hide = (medium.toLocaleUpperCase() === "SMS" &&
-    window.orientation === undefined) ||
-    (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
-  const messageLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.messageLink);
-  async function onClick() {
-    if (overrideData) {
-      await setCopied({ referralCode: contextData.referralCode });
-      contextData.refresh();
-    }
-    if (medium.toLocaleUpperCase() === "FACEBOOK" &&
-      environment.type === "SquatchAndroid") {
-      FacebookShare(directLink, messageLink, props.errorText);
-    }
-    else if (medium.toLocaleUpperCase() === "DIRECT") {
-      NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
-    }
-  }
-  const isPlainLink = !(medium.toLocaleUpperCase() === "FACEBOOK" &&
-    environment.type === "SquatchAndroid") &&
-    medium.toLocaleUpperCase() !== "DIRECT" &&
-    messageLink;
-  const userAgent = window.navigator.userAgent.toLowerCase(), safari = /safari/.test(userAgent), ios = /iphone|ipod|ipad/.test(userAgent);
-  const openInSameTab = ios && !safari;
-  return {
-    ...props,
-    loading: res.loading && !(overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink),
-    messageLink,
-    isPlainLink,
-    onClick,
-    openInSameTab,
-    hide,
-  };
-}
-
-const debug = stencilHooks_module.browser("sq:useBigStat");
-const LOADING = "...";
-const debugQuery = (query, variables, getStat) => {
-  const res = index_module.wn(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, loading: res.loading };
-};
-const referralsCountQuery = (programId, 
-// locale
-_, status) => {
-  const programFilter = programId === "classic"
-    ? { programId_exists: false }
-    : { programId_eq: programId };
-  const convertedFilter = status && status == "converted"
-    ? { dateConverted_exists: true }
-    : status && status == "started"
-      ? { dateConverted_exists: false }
-      : {};
-  const queryFilter = { ...programFilter, ...convertedFilter };
-  return debugQuery(index_module.dist.gql `
-      query ($queryFilter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $queryFilter) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, { queryFilter }, (res) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return ({
-      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
-      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
-    });
-  });
-};
-const programGoalsQuery = (programId, locale, metricType, goalId) => {
-  // Confirm this behaviour
-  if (programId === "classic")
-    return null;
-  return debugQuery(index_module.dist.gql `
-      query {
-        viewer {
-          ... on User {
-            programGoals {
-              goalId
-              programId
-              count
-              conversionCount
-            }
-          }
-        }
+  });
+};
+const programGoalsQuery = (programId, locale, metricType, goalId) => {
+  // Confirm this behaviour
+  if (programId === "classic")
+    return null;
+  return debugQuery(index_module.dist.gql `
+      query {
+        viewer {
+          ... on User {
+            programGoals {
+              goalId
+              programId
+              count
+              conversionCount
+            }
+          }
+        }
       }
     `, { programId, metricType, goalId, locale }, (res) => {
     var _a, _b, _c, _d, _e, _f;
@@ -599,12 +390,18 @@ const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
     };
   });
 };
-const referralsMonthQuery = (programId) => {
+const referralsMonthQuery = (programId, status) => {
   const programFilter = programId === "classic"
     ? { programId_exists: false }
     : { programId_eq: programId };
+  const convertedFilter = status && status == "converted"
+    ? { dateConverted_exists: true }
+    : status && status == "started"
+      ? { dateConverted_exists: false }
+      : {};
   const filter = {
     ...programFilter,
+    ...convertedFilter,
     dateReferralStarted_timeframe: "this_month",
   };
   return debugQuery(index_module.dist.gql `
@@ -1047,6 +844,92 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
     };
   });
 };
+const rewardsExpiredQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyExpiredCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
+  });
+};
+const rewardsCancelledQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyCancelledCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
+  });
+};
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(index_module.dist.gql `
       query (
@@ -1252,6 +1135,14 @@ const queries = {
     label: "Rewards Pending",
     query: rewardsPendingQuery,
   },
+  rewardsExpired: {
+    label: "Rewards Expired",
+    query: rewardsExpiredQuery,
+  },
+  rewardsCancelled: {
+    label: "Rewards Cancelled",
+    query: rewardsCancelledQuery,
+  },
   rewardsRedeemed: {
     label: "Rewards Paid",
     query: rewardsRedeemedQuery,
@@ -1276,496 +1167,258 @@ const queries = {
     label: "Referrals - This Month",
     query: referralsMonthQuery,
   },
-  referralsWeek: {
-    label: "Referrals - This Week",
-    query: referralsWeekQuery,
-  },
-  rewardsCount: {
-    label: "Rewards",
-    query: rewardsCountQuery,
-  },
-  rewardsCountFiltered: {
-    label: "Rewards",
-    query: rewardsCountFilteredQuery,
-  },
-  integrationRewardsCountFiltered: {
-    label: "Rewards",
-    query: integrationRewardsCountFilteredQuery,
-  },
-  rewardsMonth: {
-    label: "Rewards - This Month",
-    query: rewardsMonthQuery,
-  },
-  rewardsWeek: {
-    label: "Rewards - This Week",
-    query: rewardsWeekQuery,
-  },
-  rewardBalance: {
-    label: "Balance - Credit Earned",
-    query: rewardsBalanceQuery,
-  },
-  programGoals: {
-    label: "Program Goals",
-    query: programGoalsQuery,
-  },
-  customFields: {
-    label: "Custom Fields",
-    query: customFieldsQuery,
-  },
-  traffic: {
-    label: "Traffic",
-    query: trafficQuery,
-  },
-  userStats: {
-    label: "User Stat",
-    query: userStatsQuery,
-  },
-  payoutBalance: {
-    label: "Payout Balance",
-    query: payoutBalanceQuery,
-  },
-};
-// this should be exposed in documentation somehow
-const StatPaths = [
-  { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },
-  { name: "customFields", route: "/(customFields)/:customField" },
-  { name: "referralsCount", route: "/(referralsCount)/:status?" },
-  { name: "referralsMonth", route: "/(referralsMonth)" },
-  { name: "referralsWeek", route: "/(referralsWeek)" },
-  { name: "rewardsCount", route: "/(rewardsCount)/:global?" },
-  { name: "rewardsMonth", route: "/(rewardsMonth)/:global?" },
-  { name: "rewardsWeek", route: "/(rewardsWeek)/:global?" },
-  {
-    name: "rewardsCountFiltered",
-    route: "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?",
-  },
-  {
-    name: "integrationRewardsCountFiltered",
-    route: "/(integrationRewardsCountFiltered)/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?",
-  },
-  {
-    name: "rewardsAssigned",
-    route: "/(rewardsAssigned)/:statType/:unit/:global?",
-  },
-  {
-    name: "rewardsPending",
-    route: "/(rewardsPending)/:statType/:unit/:global?",
-  },
-  {
-    name: "rewardsRedeemed",
-    route: "/(rewardsRedeemed)/:statType/:unit/:global?",
-  },
-  {
-    name: "rewardsRedeemedWeek",
-    route: "/(rewardsRedeemedWeek)/:statType/:unit/:global?",
-  },
-  {
-    name: "rewardsRedeemedMonth",
-    route: "/(rewardsRedeemedMonth)/:statType/:unit/:global?",
-  },
-  {
-    name: "rewardsAvailable",
-    route: "/(rewardsAvailable)/:statType/:unit/:global?",
-  },
-  {
-    name: "rewardBalance",
-    route: "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?",
-  },
-  {
-    name: "traffic",
-    route: "/(traffic)",
-  },
-  {
-    name: "userStats",
-    route: "/(userStats)/:statId",
-  },
-  {
-    name: "payoutBalance",
-    route: "/(payoutBalance)",
-  },
-];
-const StatPatterns = StatPaths.map((pattern) => index$1.pathToRegexp(pattern.route));
-function useBigStat(props) {
-  var _a;
-  const { statType, flexReverse, alignment, programId = index_module.H(), } = props;
-  // triggers a re-render if the label is manually changed
-  useChildElements.useChildElements();
-  const locale = index_module.L();
-  const userIdent = index_module.J();
-  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
-  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
-    return {
-      props: {
-        value: 0,
-        statvalue: "!!!",
-        flexReverse,
-        alignment,
-        loading: false,
-      },
-      label: "BAD PROP TYPE",
-    };
-  }
-  const result = re.exec(statType);
-  const queryName = result[1];
-  const statPath = StatPaths.find((pattern) => pattern.name === queryName);
-  // Get a list all possible keys in path
-  const keys = [];
-  const regex = index$1.pathToRegexp(statPath === null || statPath === void 0 ? void 0 : statPath.route, keys, {
-    strict: false,
-    sensitive: false,
-    end: true,
-  });
-  const allQueryArgs = regex.exec(statType);
-  // Retrieve all key values in order including undefined
-  const queryArgs = keys.map((_, i) => allQueryArgs[i + 1] ? decodeURIComponent(allQueryArgs[i + 1]) : undefined);
-  //  remove query name from list
-  queryArgs.shift();
-  const label = queries[queryName].label;
-  const stat = (userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt) && queries[queryName].query(programId, locale, ...queryArgs);
-  debug("stat:", stat);
-  return {
-    props: {
-      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 === null || stat === void 0 ? void 0 : stat.loading,
-      flexReverse,
-      alignment,
-    },
-    label,
-  };
-}
-
-function useDemoBigStat(props) {
-  const { statType } = props;
-  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
-  // triggers a re-render if the label is manually changed
-  useChildElements.useChildElements();
-  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
-    return {
-      props: {
-        value: 0,
-        statvalue: "!!!",
-        loading: false,
-        flexReverse: false,
-        alignment: "center",
-      },
-      label: "BAD PROP TYPE",
-    };
-  }
-  const result = re.exec(statType);
-  const queryName = result[1];
-  const label = queries[queryName].label;
-  return {
-    props: cjs.cjs({
-      statvalue: "12345",
-      value: 0,
-      flexReverse: false,
-      alignment: "center",
-    }, props.demoData || {}, { arrayMerge: (_, a) => a }),
-    label: label !== null && label !== void 0 ? label : "Demo Label",
-  };
-}
-
-function StatContainerView(props, children) {
-  const divideSpace = () => {
-    const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
-    return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
-  };
-  // Dependent on props, not feasiable to move out
-  const style = {
-    StatContainer: {
-      width: "100%",
-      display: props.display || "grid",
-      "grid-template-columns": "repeat(auto-fill, minmax(130px, auto))",
-      gap: divideSpace(),
-      // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
-      "& > *": {
-        "border-right": "1px solid #EAEAEA",
-        "padding-right": divideSpace(),
-      },
-      "& > :last-child": {
-        "border-right": "none",
-      },
-      "& > ::slotted(*)": {
-        "border-right": "1px solid #EAEAEA",
-        "padding-right": divideSpace(),
-        height: "100%",
-      },
-      "& > ::slotted(*:last-child)": {
-        "border-right": "none",
-      },
-      "@media screen and (max-width: 430px)": {
-        "& > ::slotted(*)": {
-          borderRight: "none",
-        },
-      },
-    },
-    StatFrame: {
-      display: "flex",
-    },
-    BorderFix: {
-      "border-right": "1px solid transparent",
-      width: "0px",
-      "margin-left": "-1px",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
-    index.h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
-      index.h("style", { type: "text/css" }, styleString),
-      children),
-    index.h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
-}
-
-function PortalChangePasswordView(props) {
-  const { states, callbacks } = props;
-  const style = {
-    Dialog: {
-      padding: "0",
-      "&::part(close-button)": {
-        "margin-top": "var(--sl-spacing-medium)",
-      },
-      "&::part(body)": {
-        padding: "0 var(--sl-spacing-x-large) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
-      },
-    },
-    Error: {
-      "&::part(erroralert-base)": {
-        "margin-bottom": "15px",
-      },
-    },
-    Success: {
-      "&::part(successalert-base)": {
-        "margin-bottom": "15px",
-      },
-    },
-    InputContainer: {
-      "& > :not(:last-child)": {
-        "margin-bottom": "var(--sl-spacing-x-large)",
-      },
-    },
-    CancelButton: {
-      width: "25%",
-      margin: "var(--sl-spacing-large) auto",
-    },
-    PasswordField: {
-      marginBottom: "var(--sl-spacing-large) !important",
-      display: "block",
-    },
-    ChangePasswordButton: {
-      paddingTop: "var(--sl-spacing-x-large)",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
-      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
-        labelMargin: "x-large",
-        padding: "none",
-        label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.modalChangePasswordHeader)),
-        content: (index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "none", gap: "32px" }),
-          states.error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
-            index.h("div", { part: "erroralert-text" }, states.error))),
-          states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
-            index.h("div", { part: "successalert-text" }, states.content.successMessage))),
-          index.h("sl-form", { "onSl-submit": callbacks.submit },
-            index.h("div", { class: sheet.classes.InputContainer },
-              index.h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
-              index.h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
-            index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
-              index.h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
-              index.h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
-      }))),
-    index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
-      labelMargin: "x-large",
-      padding: "xxx-large",
-      label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
-      content: (index.h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
-    }),
-      index.h("style", { type: "text/css" }, styleString))));
-}
-
-const style$2 = {
-  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
-  Column: mixins.AuthColumn,
-  HostBlock: mixins.HostBlock,
-  ":host": {
-    margin: "0 auto",
-    width: "100%",
-  },
-  ButtonsContainer: mixins.AuthButtonsContainer,
-  ErrorStyle: mixins.ErrorStyles,
-};
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-`;
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
-function PortalRegisterView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-  const { states, refs, callbacks, content } = props;
-  if (states.error) {
-    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-  }
-  return (index.h("div", { class: sheet$2.classes.Wrapper, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$2),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$2.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, props.states.error))),
-      content.formData,
-      !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
-          if (!value) {
-            return content.requiredFieldErrorMessage;
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return content.invalidEmailErrorMessage;
-          }
-        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet$2.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-          content.requiredFieldErrorMessage,
-      }
-        : [])))),
-      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
-      content.passwordField,
-      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
-        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
-      }
-        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
-        class: sheet$2.classes.ErrorStyle,
-        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
-      }
-        : [])))),
-      content.terms,
-      index.h("div", { class: sheet$2.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
-        content.secondaryButton))));
-}
-
-const style$3 = {
-  ErrorStyle: {
-    "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
-      borderColor: "var(--sl-color-danger-500)",
-      outline: "var(--sl-color-danger-500)",
-    },
-    "&:host": {
-      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
-    },
+  referralsWeek: {
+    label: "Referrals - This Week",
+    query: referralsWeekQuery,
   },
-  ErrorMessageStyle: {
-    margin: 0,
-    marginTop: "5px",
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-    fontFamily: "var(--sl-font-sans)",
-    fontWeight: "var(--sl-font-weight-normal)",
+  rewardsCount: {
+    label: "Rewards",
+    query: rewardsCountQuery,
   },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+  rewardsCountFiltered: {
+    label: "Rewards",
+    query: rewardsCountFilteredQuery,
+  },
+  integrationRewardsCountFiltered: {
+    label: "Rewards",
+    query: integrationRewardsCountFilteredQuery,
+  },
+  rewardsMonth: {
+    label: "Rewards - This Month",
+    query: rewardsMonthQuery,
+  },
+  rewardsWeek: {
+    label: "Rewards - This Week",
+    query: rewardsWeekQuery,
+  },
+  rewardBalance: {
+    label: "Balance - Credit Earned",
+    query: rewardsBalanceQuery,
+  },
+  programGoals: {
+    label: "Program Goals",
+    query: programGoalsQuery,
+  },
+  customFields: {
+    label: "Custom Fields",
+    query: customFieldsQuery,
+  },
+  traffic: {
+    label: "Traffic",
+    query: trafficQuery,
+  },
+  userStats: {
+    label: "User Stat",
+    query: userStatsQuery,
+  },
+  payoutBalance: {
+    label: "Payout Balance",
+    query: payoutBalanceQuery,
   },
 };
-const vanillaStyle$1 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet$3 = JSS.jss.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
-function CheckboxFieldView(props) {
-  var _b, _c;
-  const { states, content, callbacks } = props;
-  return (index.h("div", { class: sheet$3.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle$1,
-      styleString$3),
-    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
-        e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), global.intl.formatMessage({
-      id: content.checkboxName + "-message",
-      defaultMessage: content.checkboxLabel,
-    }, {
-      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
-}
-
-function ChangeMarktingView(props) {
-  const { states, callbacks } = props;
-  const { text, formState } = states;
-  const { error } = formState;
-  const style = {
-    Container: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "var(--sl-spacing-x-small)",
-      padding: "0 var(--sl-spacing-xxx-large) var(--sl-spacing-xxx-large)",
-    },
-    SubmitButton: { marginBottom: "var(--sl-spacing-medium)" },
-    Error: {
-      "&::part(erroralert-base)": {
-        "margin-bottom": "15px",
+// ! Any update to this should be reflected in StatPathBuilder.tsx in the saasquatch repo
+// this should be exposed in documentation somehow
+const StatPaths = [
+  { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },
+  { name: "customFields", route: "/(customFields)/:customField" },
+  { name: "referralsCount", route: "/(referralsCount)/:status?" },
+  { name: "referralsMonth", route: "/(referralsMonth)/:status?" },
+  { name: "referralsWeek", route: "/(referralsWeek)/:status?" },
+  { name: "rewardsCount", route: "/(rewardsCount)/:global?" },
+  { name: "rewardsMonth", route: "/(rewardsMonth)/:global?" },
+  { name: "rewardsWeek", route: "/(rewardsWeek)/:global?" },
+  {
+    name: "rewardsCountFiltered",
+    route: "/(rewardsCountFiltered)/:statType([FUELTANK|INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?",
+  },
+  {
+    name: "integrationRewardsCountFiltered",
+    route: "/(integrationRewardsCountFiltered)/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?",
+  },
+  {
+    name: "rewardsAssigned",
+    route: "/(rewardsAssigned)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsExpired",
+    route: "/(rewardsExpired)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsCancelled",
+    route: "/(rewardsCancelled)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsPending",
+    route: "/(rewardsPending)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsRedeemed",
+    route: "/(rewardsRedeemed)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsRedeemedWeek",
+    route: "/(rewardsRedeemedWeek)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsRedeemedMonth",
+    route: "/(rewardsRedeemedMonth)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsAvailable",
+    route: "/(rewardsAvailable)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardBalance",
+    route: "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?",
+  },
+  {
+    name: "traffic",
+    route: "/(traffic)",
+  },
+  {
+    name: "userStats",
+    route: "/(userStats)/:statId",
+  },
+  {
+    name: "payoutBalance",
+    route: "/(payoutBalance)",
+  },
+];
+const StatPatterns = StatPaths.map((pattern) => index$1.pathToRegexp(pattern.route));
+function useBigStat(props) {
+  var _a;
+  const { statType, flexReverse, alignment, programId = index_module.H(), } = props;
+  // triggers a re-render if the label is manually changed
+  useChildElements.useChildElements();
+  const locale = index_module.L();
+  const userIdent = index_module.J();
+  const re = domContextHooks_module.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,
+        loading: false,
+        statTextColor: props.statTextColor,
+        statFontSize: props.statFontSize,
+        descriptionTextColor: props.descriptionTextColor,
+        descriptionFontSize: props.descriptionFontSize,
+        statFontWeight: props.statFontWeight,
       },
+      label: "BAD PROP TYPE",
+    };
+  }
+  const result = re.exec(statType);
+  const queryName = result[1];
+  const statPath = StatPaths.find((pattern) => pattern.name === queryName);
+  // Get a list all possible keys in path
+  const keys = [];
+  const regex = index$1.pathToRegexp(statPath === null || statPath === void 0 ? void 0 : statPath.route, keys, {
+    strict: false,
+    sensitive: false,
+    end: true,
+  });
+  const allQueryArgs = regex.exec(statType);
+  // Retrieve all key values in order including undefined
+  const queryArgs = keys.map((_, i) => allQueryArgs[i + 1] ? decodeURIComponent(allQueryArgs[i + 1]) : undefined);
+  //  remove query name from list
+  queryArgs.shift();
+  const label = queries[queryName].label;
+  const stat = (userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt) && queries[queryName].query(programId, locale, ...queryArgs);
+  debug("stat:", stat);
+  return {
+    props: {
+      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 === null || stat === void 0 ? void 0 : stat.loading,
+      flexReverse,
+      alignment,
+      statTextColor: props.statTextColor,
+      statFontSize: props.statFontSize,
+      descriptionTextColor: props.descriptionTextColor,
+      descriptionFontSize: props.descriptionFontSize,
+      statFontWeight: props.statFontWeight,
     },
-    Success: {
-      "&::part(successalert-base)": {
-        "margin-bottom": "15px",
+    label,
+  };
+}
+
+function useDemoBigStat(props) {
+  const { statType } = props;
+  const re = domContextHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  // triggers a re-render if the label is manually changed
+  useChildElements.useChildElements();
+  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
+    return {
+      props: {
+        value: 0,
+        statvalue: "-",
+        loading: false,
+        flexReverse: props.flexReverse,
+        alignment: props.alignment,
+        statTextColor: props.statTextColor,
+        statFontSize: props.statFontSize,
+        descriptionTextColor: props.descriptionTextColor,
+        descriptionFontSize: props.descriptionFontSize,
       },
-    },
+      label: "BAD PROP TYPE",
+    };
+  }
+  const result = re.exec(statType);
+  const queryName = result[1];
+  const label = queries[queryName].label;
+  return {
+    props: cjs.cjs({
+      statvalue: "12345",
+      value: 0,
+      flexReverse: props.flexReverse,
+      alignment: props.alignment,
+      statTextColor: props.statTextColor,
+      statFontSize: props.statFontSize,
+      descriptionTextColor: props.descriptionTextColor,
+      descriptionFontSize: props.descriptionFontSize,
+      statFontWeight: props.statFontWeight,
+    }, props.demoData || {}, { arrayMerge: (_, a) => a }),
+    label: label !== null && label !== void 0 ? label : "Demo Label",
   };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
-    index.h("sl-form", { "onSl-submit": callbacks.onSubmit },
-      index.h(CheckboxFieldView, { states: {
-          checked: states.formState.marketingEmailOptIn,
-        }, content: {
-          checkboxLabel: text.marketingCheckboxLabel,
-          checkboxName: "marketingEmailOptIn",
-        }, callbacks: {
-          setChecked: callbacks.setChecked,
-        } }),
-      index.h("sl-button", { class: sheet.classes.SubmitButton, type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
-      error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, error))),
-      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
-        index.h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
 
-const style$4 = {
+function CardFeedView(props, children) {
+  // Dependent on props, not feasiable to move out
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+
+  `;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
+}
+
+const style$1 = {
   Description: {
+    "& .icon": {
+      color: "var(--sqm-text)",
+      "&:hover": {
+        color: "var(--sqm-accent-color-icon)",
+      },
+    },
     "& input[type=checkbox]": {
       display: "none",
     },
@@ -1803,16 +1456,16 @@ const style$4 = {
     },
   },
 };
-const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
   return (index.h("div", { style: { opacity: props.opacity } },
-    index.h("style", { type: "text/css" }, styleString$4),
-    index.h("span", { class: sheet$4.classes.Description },
+    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("span", { class: sheet$1.classes.Description },
       index.h("input", { type: "checkbox", id: "details-" + rid }),
       index.h("label", { class: "details", htmlFor: "details-" + rid },
-        index.h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
+        index.h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
       index.h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }
 
@@ -1831,7 +1484,7 @@ const GreyGift = () => {
     index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
 };
 
-const style$5 = {
+const style$2 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1878,7 +1531,8 @@ const style$5 = {
       width: "100%",
       height: "4px",
       borderRadius: "4px",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
+      background: "red",
     },
     "& .progress": {
       display: "block",
@@ -1891,7 +1545,7 @@ const style$5 = {
       width: "12px",
       height: "12px",
       display: "flex",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
       borderRadius: "50%",
       position: "relative",
       left: "47%",
@@ -1943,14 +1597,14 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = JSS.createStyleSheet(style$5, { classNamePrefix: "sqm-prog-bar" });
-const styleString$5 = sheet$5.toString();
+const sheet$2 = JSS.createStyleSheet(style$2, { classNamePrefix: "sqm-prog-bar" });
+const styleString$2 = sheet$2.toString();
 function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, finite = 0, opacity = "1", } = props;
   let aggregate = buildProgressBar(repeatable, steps, props);
   const { columns, items } = aggregate;
-  return (index.h("div", { class: sheet$5.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    index.h("style", { type: "text/css" }, styleString$5),
+  return (index.h("div", { class: sheet$2.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    index.h("style", { type: "text/css" }, styleString$2),
     index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2244,29 +1898,29 @@ const arrow_left_right = () => {
 function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
-  console.log("text color from the view ", content.textColor);
+  console.log("buttonType ", content.buttonType);
   const style = {
     TaskCard: {
       display: "inline-block",
       width: "100%",
       "& .main": {
         position: "relative",
-        boxSizing: "border-sizing",
-        background: content.backgroundColor || "var(--sl-color-neutral-0)",
-        border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-        borderRadius: "var(--sl-border-radius-large)",
+        boxSizing: "border-box",
+        background: content.backgroundColor || "var(--sqm-portal-background)",
+        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
+        borderRadius: "var(--sqm-border-radius-normal)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
         color: content.textColor || "var(--sqm-text)",
       },
       "& .main.complete": {
-        background: content.backgroundColor || "var(--sl-color-primary-50)",
-        borderColor: content.borderColor || "var(--sl-color-primary-500)",
+        opacity: "0.8",
+        borderColor: "var(--sqm-accent-color-border)",
       },
       "& .main.expired": {
         color: content.textColor || "var(--sqm-text)",
-        background: content.backgroundColor || "var(--sl-color-neutral-50)",
+        opacity: "0.8",
       },
       "& .title": {
         fontSize: "var(--sl-font-size-medium)",
@@ -2286,8 +1940,8 @@ function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-primary-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-primary-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
@@ -2303,8 +1957,8 @@ function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-warning-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-warning-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
@@ -2323,7 +1977,7 @@ function TaskCardView(props) {
         top: "5%",
         alignSelf: "center",
         lineHeight: "0",
-        color: content.textColor || "var(--sqm-text)",
+        color: "var(--sqm-accent-color-icon)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
@@ -2385,7 +2039,7 @@ function TaskCardView(props) {
     },
   };
   const sheet = JSS.createStyleSheet(style);
-  const contenttring = sheet.toString();
+  const contentString = sheet.toString();
   const dateStart = content.rewardDuration &&
     luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -2420,7 +2074,7 @@ function TaskCardView(props) {
   `;
   return (index.h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      contenttring,
+      contentString,
       vanillaStyle),
     !states.loading && taskNotStarted && (index.h("div", { class: sheet.classes.NotStarted },
       index.h("span", { class: "icon" },
@@ -2446,7 +2100,7 @@ function TaskCardView(props) {
       }))),
     index.h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
-          "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
+          "0 0 var(--sqm-border-radius-normal) var(--sqm-border-radius-normal)",
       }, class: taskUnavailable
         ? "main expired"
         : taskComplete
@@ -2468,7 +2122,7 @@ function TaskCardView(props) {
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
         states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (index.h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
         index.h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
           index.h("span", { class: "text" },
             content.repeatable && (index.h("div", null,
@@ -2498,116 +2152,407 @@ function TaskCardView(props) {
                 .setLocale(utils.luxonLocale(states.locale))
                 .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
             })))),
-          content.hideButton ? ("") : (index.h("sl-button", { exportparts: `base: ${content.buttonStyle === "primary"
-              ? "primary"
-              : "secondary"}button-base`, id: "sl-button", type: content.buttonStyle === "primary" ? "primary" : "default", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+          content.hideButton ? ("") : (index.h("sl-button", { exportparts: `base: ${content.buttonType || "primary"}button-base`, type: "primary", id: "sl-button", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }
 
-function PoweredByImg({ color = "#A6A6A6", width = 120, height = 16, }) {
-  return (index.h("svg", { width: width, height: height, viewBox: "0 0 1662 254", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { d: "M801.082 253.58L869.382 1.67969", stroke: color, "stroke-width": "3" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M125.682 42.48C123.882 42.48 121.982 42.78 120.382 43.48C118.682 44.18 117.182 45.18 115.882 46.48C114.582 47.68 113.582 49.28 112.882 50.98C112.182 52.68 111.882 54.48 111.982 56.28C112.282 59.68 113.882 63.08 116.382 65.38C118.982 67.78 122.382 68.98 125.782 68.98C129.282 68.98 132.682 67.58 135.182 65.38C137.782 62.98 139.382 59.78 139.582 56.28C139.582 54.38 139.282 52.68 138.682 50.98C137.982 49.28 136.982 47.78 135.682 46.48C134.382 45.18 132.882 44.18 131.182 43.48C129.282 42.78 127.582 42.48 125.682 42.48Z", fill: color }),
-    index.h("path", { d: "M135.882 89.2798H115.582V187.58H135.882V89.2798Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M231.481 104.18C238.781 93.4799 251.181 87.3799 266.281 87.3799C290.981 87.3799 307.581 103.28 307.381 127.08V187.48H286.781V132.38C286.781 116.38 278.281 107.18 263.381 107.18C248.481 107.18 237.981 117.68 237.981 132.68V187.48H217.281V132.38C217.281 116.38 208.781 107.18 193.881 107.18C178.981 107.18 168.481 117.68 168.481 132.68V187.48H147.981V89.3799H168.681V97.8799C178.081 88.8799 190.181 87.4799 197.081 87.4799C211.881 87.4799 224.381 93.5799 231.481 104.18Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M370.781 87.48C358.581 87.48 347.981 91.38 339.981 98.38V89.28H319.481V226.08H339.981V177.78C347.881 185.08 358.581 188.78 370.781 188.78C398.781 188.78 419.881 166.88 419.881 138.08C419.981 109.28 398.781 87.48 370.781 87.48ZM368.881 169.58C351.481 169.58 338.881 156.38 338.881 138.28C338.881 120.38 351.381 106.98 368.881 106.98C386.281 106.98 398.881 120.08 398.881 138.28C398.881 156.48 386.381 169.58 368.881 169.58Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M701.782 169.88C707.682 169.88 714.082 167.58 719.582 163.98L721.482 162.88L731.482 178.68L729.782 179.88C721.282 186.28 710.982 189.58 700.382 189.58C678.082 189.58 665.782 176.38 665.782 152.28V108.68H645.682V89.3799H665.782V59.8799H686.482V89.2798H725.682V108.48H686.482V151.88C686.482 163.38 691.982 169.88 701.782 169.88Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M551.282 239.88C549.982 239.88 548.782 240.28 547.682 240.88C546.682 241.58 545.782 242.58 545.382 243.68C544.882 244.78 544.782 246.08 545.082 247.28C545.282 248.58 545.882 249.68 546.882 250.48C547.782 251.38 548.882 251.98 550.082 252.28C551.382 252.48 552.582 252.38 553.782 251.98C554.882 251.48 555.982 250.78 556.582 249.68C557.282 248.68 557.582 247.38 557.582 246.18C557.582 244.48 556.982 242.88 555.682 241.68C554.482 240.48 552.882 239.88 551.282 239.88Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M586.182 210.78C592.282 210.78 597.582 213.08 601.082 217.18L601.482 217.68L596.282 223.08L595.782 222.58C594.482 221.18 593.082 220.18 591.382 219.48C589.682 218.78 587.882 218.38 586.082 218.48C578.882 218.48 573.682 224.08 573.682 231.58C573.682 239.18 578.882 244.78 586.082 244.78C589.782 244.68 593.282 243.18 595.882 240.58L596.382 240.08L601.382 245.68L600.982 246.08C597.182 250.18 591.982 252.18 586.082 252.18C574.082 252.18 565.382 243.58 565.382 231.58C565.582 219.48 574.182 210.78 586.182 210.78Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M633.782 210.78C621.682 210.78 612.582 219.68 612.582 231.38C612.582 243.08 621.682 251.98 633.782 251.98C645.882 251.98 654.882 243.08 654.882 231.38C655.082 219.78 645.982 210.78 633.782 210.78ZM633.782 244.78C626.382 244.78 620.782 239.28 620.782 231.58C620.782 223.88 626.182 218.48 633.782 218.48C641.182 218.48 646.782 224.08 646.782 231.58C646.782 238.98 641.382 244.78 633.782 244.78Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M723.982 228.78C723.982 222.18 720.382 218.28 714.082 218.28C707.682 218.28 703.382 222.78 702.982 228.98V252.18H695.082V228.68C695.082 222.08 691.482 218.18 685.182 218.18C680.082 218.18 674.482 221.48 674.482 228.88V252.08H666.582V211.38H674.482V214.78L676.682 213.28C679.582 211.38 683.082 210.48 686.582 210.48C692.082 210.48 696.782 212.48 699.882 216.08L700.882 217.28L701.882 216.08C704.782 212.48 709.582 210.48 715.182 210.48C725.082 210.48 731.982 217.08 731.982 226.38V251.88H724.082V228.68H723.982V228.78Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M511.681 89.4797V98.7797C503.681 91.4797 493.181 87.6797 480.981 87.6797C452.981 87.6797 431.981 109.68 431.981 138.68C431.981 167.78 453.081 189.68 480.981 189.68C493.181 189.68 503.681 185.78 511.681 178.38V187.68H532.381V89.4797H511.681ZM482.881 169.88C465.481 169.88 452.781 156.58 452.781 138.48C452.781 120.48 465.281 106.98 482.881 106.98C500.481 106.98 512.781 120.08 512.781 138.48C512.781 156.68 500.181 169.88 482.881 169.88Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M595.281 107.08C604.181 107.08 611.781 110.38 618.781 116.98L620.481 118.68L633.981 104.58L632.581 102.98C623.781 92.98 610.781 87.48 595.781 87.48C565.981 87.48 544.481 109.08 544.481 138.48C544.481 167.98 565.981 189.48 595.781 189.48C610.481 189.48 623.681 183.98 632.581 174.08L633.981 172.58L620.981 158.18L619.281 159.88C612.481 166.48 603.981 169.98 595.481 169.98C578.381 169.98 565.681 156.68 565.681 138.58C565.581 120.58 577.881 107.08 595.281 107.08Z", fill: color }),
-    index.h("path", { d: "M135.882 89.2798H115.582V187.58H135.882V89.2798Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M231.481 104.18C238.781 93.4799 251.181 87.3799 266.281 87.3799C290.981 87.3799 307.581 103.28 307.381 127.08V187.48H286.781V132.38C286.781 116.38 278.281 107.18 263.381 107.18C248.481 107.18 237.981 117.68 237.981 132.68V187.48H217.281V132.38C217.281 116.38 208.781 107.18 193.881 107.18C178.981 107.18 168.481 117.68 168.481 132.68V187.48H147.981V89.3799H168.681V97.8799C178.081 88.8799 190.181 87.4799 197.081 87.4799C211.881 87.4799 224.381 93.5799 231.481 104.18Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M370.781 87.48C358.581 87.48 347.981 91.38 339.981 98.38V89.28H319.481V226.08H339.981V177.78C347.881 185.08 358.581 188.78 370.781 188.78C398.781 188.78 419.881 166.88 419.881 138.08C419.981 109.28 398.781 87.48 370.781 87.48ZM368.881 169.58C351.481 169.58 338.881 156.38 338.881 138.28C338.881 120.38 351.381 106.98 368.881 106.98C386.281 106.98 398.881 120.08 398.881 138.28C398.881 156.48 386.381 169.58 368.881 169.58Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M701.782 169.88C707.682 169.88 714.082 167.58 719.582 163.98L721.482 162.88L731.482 178.68L729.782 179.88C721.282 186.28 710.982 189.58 700.382 189.58C678.082 189.58 665.782 176.38 665.782 152.28V108.68H645.682V89.3799H665.782V59.8799H686.482V89.2798H725.682V108.48H686.482V151.88C686.482 163.38 691.982 169.88 701.782 169.88Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M511.681 89.4797V98.7797C503.681 91.4797 493.181 87.6797 480.981 87.6797C452.981 87.6797 431.981 109.68 431.981 138.68C431.981 167.78 453.081 189.68 480.981 189.68C493.181 189.68 503.681 185.78 511.681 178.38V187.68H532.381V89.4797H511.681ZM482.881 169.88C465.481 169.88 452.781 156.58 452.781 138.48C452.781 120.48 465.281 106.98 482.881 106.98C500.481 106.98 512.781 120.08 512.781 138.48C512.781 156.68 500.181 169.88 482.881 169.88Z", fill: color }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M595.281 107.08C604.181 107.08 611.781 110.38 618.781 116.98L620.481 118.68L633.981 104.58L632.581 102.98C623.781 92.98 610.781 87.48 595.781 87.48C565.981 87.48 544.481 109.08 544.481 138.48C544.481 167.98 565.981 189.48 595.781 189.48C610.481 189.48 623.681 183.98 632.581 174.08L633.981 172.58L620.981 158.18L619.281 159.88C612.481 166.48 603.981 169.98 595.481 169.98C578.381 169.98 565.681 156.68 565.681 138.58C565.581 120.58 577.881 107.08 595.281 107.08Z", fill: color }),
-    index.h("path", { d: "M34.6815 112.78C40.6815 112.78 46.5815 114.18 51.8815 116.68C57.2815 119.18 62.0815 122.78 65.9815 127.28C67.9815 122.68 69.0815 117.78 69.0815 112.88C69.0815 108.38 68.1815 103.88 66.4815 99.8799C64.6815 95.6799 62.1815 91.9799 58.9815 88.8799C55.7815 85.7799 51.9815 83.2799 47.7815 81.4799C43.5815 79.7799 39.0815 78.8799 34.5815 78.8799C30.0815 78.8799 25.5815 79.6799 21.3815 81.4799C17.1815 83.1799 13.3815 85.7799 10.1815 88.8799C6.98154 91.9799 4.48154 95.7799 2.68154 99.8799C0.881541 104.08 0.081543 108.38 0.081543 112.88C0.181543 117.88 1.18154 122.78 3.18154 127.28C7.08154 122.68 11.8815 119.18 17.1815 116.68C22.7815 113.98 28.7815 112.68 34.6815 112.78Z", fill: color }),
-    index.h("path", { d: "M69.1817 153.48C69.1817 146.68 67.1817 140.18 63.2817 134.48C59.4817 128.88 54.0817 124.48 47.7817 121.88C41.4817 119.28 34.4817 118.68 27.7817 119.88C21.0817 121.28 14.8817 124.48 10.0817 129.28C5.28166 134.08 1.88166 140.08 0.681661 146.78C-0.718339 153.48 0.0816607 160.18 2.68166 166.48C5.28166 172.78 9.68166 178.08 15.4817 181.78C21.0817 185.58 27.7817 187.48 34.6817 187.48C43.7817 187.38 52.5817 183.88 59.0817 177.38C65.6817 170.98 69.1817 162.58 69.1817 153.48Z", fill: color }),
-    index.h("path", { d: "M69.1817 34.9799C69.1817 28.1799 67.1817 21.6799 63.2817 15.9799C59.4817 10.3799 54.1817 5.9799 47.7817 3.3799C41.4817 0.779901 34.4817 0.1799 27.7817 1.3799C21.0817 2.7799 14.8817 5.97986 10.0817 10.7799C5.28166 15.5799 1.88166 21.5799 0.681661 28.2799C-0.718339 34.9799 0.0816607 41.6799 2.68166 47.9799C5.28166 54.2799 9.68166 59.5799 15.4817 63.2799C21.0817 67.0799 27.7817 68.9799 34.6817 68.9799C43.8817 68.9799 52.6817 65.3799 59.1817 58.9799C65.5817 52.6799 69.1817 43.8799 69.1817 34.9799Z", fill: color }),
-    index.h("path", { d: "M962.664 203.95C953.044 203.95 945.244 201.285 939.264 195.955C933.284 190.495 930.294 183.41 930.294 174.7C930.294 165.08 933.739 157.605 940.629 152.275C947.649 146.945 957.464 144.28 970.074 144.28H993.864V138.43C993.864 129.72 991.589 123.09 987.039 118.54C982.619 113.86 976.184 111.52 967.734 111.52C962.014 111.52 956.749 112.885 951.939 115.615C947.129 118.345 943.229 122.18 940.239 127.12L933.999 120.295C937.639 114.575 942.384 110.22 948.234 107.23C954.214 104.11 960.974 102.55 968.514 102.55C979.694 102.55 988.404 105.605 994.644 111.715C1001.01 117.695 1004.2 126.015 1004.2 136.675V184.255C1004.2 188.805 1004.98 194.72 1006.54 202H997.569C996.399 199.14 995.554 194.07 995.034 186.79H994.644C990.874 192.25 986.259 196.475 980.799 199.465C975.339 202.455 969.294 203.95 962.664 203.95ZM962.664 195.175C968.124 195.175 973.259 194.07 978.069 191.86C982.879 189.52 986.714 186.465 989.574 182.695C992.434 178.795 993.864 174.7 993.864 170.41V152.665H969.489C960.389 152.665 953.239 154.615 948.039 158.515C942.969 162.415 940.434 167.81 940.434 174.7C940.434 180.68 942.514 185.62 946.674 189.52C950.834 193.29 956.164 195.175 962.664 195.175Z", fill: color }),
-    index.h("path", { d: "M1067.55 203.95C1055.07 203.95 1045.25 199.27 1038.1 189.91C1030.95 180.55 1027.38 167.745 1027.38 151.495C1027.38 136.415 1031.02 124.52 1038.3 115.81C1045.71 106.97 1055.72 102.55 1068.33 102.55C1074.7 102.55 1080.55 104.045 1085.88 107.035C1091.21 110.025 1095.5 114.25 1098.75 119.71H1099.14V57.3101H1109.67V178.21C1109.67 189.13 1109.86 197.06 1110.25 202H1100.89C1100.63 197.84 1100.5 192.12 1100.5 184.84H1100.11C1097.12 190.69 1092.7 195.37 1086.85 198.88C1081 202.26 1074.57 203.95 1067.55 203.95ZM1068.13 195.175C1077.23 195.175 1084.64 192.185 1090.36 186.205C1096.21 180.225 1099.14 172.49 1099.14 163V146.815C1099.14 135.895 1096.41 127.25 1090.95 120.88C1085.49 114.38 1078.08 111.13 1068.72 111.13C1059.1 111.13 1051.49 114.77 1045.9 122.05C1040.44 129.2 1037.71 139.145 1037.71 151.885C1037.71 165.275 1040.44 175.87 1045.9 183.67C1051.36 191.34 1058.77 195.175 1068.13 195.175Z", fill: color }),
-    index.h("path", { d: "M1208.57 104.5L1172.3 202H1161.96L1125.5 104.5H1136.61L1167.03 189.715L1197.45 104.5H1208.57Z", fill: color }),
-    index.h("path", { d: "M1261.51 203.95C1252.54 203.95 1244.61 201.87 1237.72 197.71C1230.96 193.55 1225.7 187.635 1221.93 179.965C1218.29 172.295 1216.47 163.39 1216.47 153.25C1216.47 143.11 1218.29 134.205 1221.93 126.535C1225.7 118.865 1230.96 112.95 1237.72 108.79C1244.61 104.63 1252.54 102.55 1261.51 102.55C1270.48 102.55 1278.35 104.63 1285.11 108.79C1292 112.95 1297.33 118.865 1301.1 126.535C1304.87 134.205 1306.75 143.11 1306.75 153.25C1306.75 163.39 1304.87 172.295 1301.1 179.965C1297.33 187.635 1292 193.55 1285.11 197.71C1278.35 201.87 1270.48 203.95 1261.51 203.95ZM1261.51 195.37C1268.4 195.37 1274.45 193.615 1279.65 190.105C1284.98 186.595 1289.07 181.655 1291.93 175.285C1294.79 168.915 1296.22 161.57 1296.22 153.25C1296.22 144.93 1294.79 137.585 1291.93 131.215C1289.07 124.845 1284.98 119.905 1279.65 116.395C1274.45 112.885 1268.4 111.13 1261.51 111.13C1254.75 111.13 1248.71 112.885 1243.38 116.395C1238.18 119.905 1234.15 124.845 1231.29 131.215C1228.43 137.585 1227 144.93 1227 153.25C1227 161.57 1228.43 168.915 1231.29 175.285C1234.15 181.655 1238.18 186.595 1243.38 190.105C1248.71 193.615 1254.75 195.37 1261.51 195.37Z", fill: color }),
-    index.h("path", { d: "M1366.03 203.95C1352.25 203.95 1341.52 199.53 1333.85 190.69C1326.31 181.72 1322.54 169.24 1322.54 153.25C1322.54 137.39 1326.38 124.975 1334.05 116.005C1341.72 107.035 1352.38 102.55 1366.03 102.55C1373.57 102.55 1380.26 104.11 1386.11 107.23C1391.96 110.22 1396.77 114.575 1400.54 120.295L1394.3 126.34C1391.31 121.66 1387.28 118.02 1382.21 115.42C1377.27 112.69 1371.88 111.325 1366.03 111.325C1355.76 111.325 1347.63 115.03 1341.65 122.44C1335.8 129.85 1332.88 140.12 1332.88 153.25C1332.88 166.38 1335.8 176.65 1341.65 184.06C1347.63 191.47 1355.76 195.175 1366.03 195.175C1371.88 195.175 1377.27 193.875 1382.21 191.275C1387.28 188.545 1391.31 184.84 1394.3 180.16L1400.54 186.205C1396.77 191.925 1391.96 196.345 1386.11 199.465C1380.26 202.455 1373.57 203.95 1366.03 203.95Z", fill: color }),
-    index.h("path", { d: "M1446.55 203.95C1436.93 203.95 1429.13 201.285 1423.15 195.955C1417.17 190.495 1414.18 183.41 1414.18 174.7C1414.18 165.08 1417.62 157.605 1424.51 152.275C1431.53 146.945 1441.35 144.28 1453.96 144.28H1477.75V138.43C1477.75 129.72 1475.47 123.09 1470.92 118.54C1466.5 113.86 1460.07 111.52 1451.62 111.52C1445.9 111.52 1440.63 112.885 1435.82 115.615C1431.01 118.345 1427.11 122.18 1424.12 127.12L1417.88 120.295C1421.52 114.575 1426.27 110.22 1432.12 107.23C1438.1 104.11 1444.86 102.55 1452.4 102.55C1463.58 102.55 1472.29 105.605 1478.53 111.715C1484.9 117.695 1488.08 126.015 1488.08 136.675V184.255C1488.08 188.805 1488.86 194.72 1490.42 202H1481.45C1480.28 199.14 1479.44 194.07 1478.92 186.79H1478.53C1474.76 192.25 1470.14 196.475 1464.68 199.465C1459.22 202.455 1453.18 203.95 1446.55 203.95ZM1446.55 195.175C1452.01 195.175 1457.14 194.07 1461.95 191.86C1466.76 189.52 1470.6 186.465 1473.46 182.695C1476.32 178.795 1477.75 174.7 1477.75 170.41V152.665H1453.37C1444.27 152.665 1437.12 154.615 1431.92 158.515C1426.85 162.415 1424.32 167.81 1424.32 174.7C1424.32 180.68 1426.4 185.62 1430.56 189.52C1434.72 193.29 1440.05 195.175 1446.55 195.175Z", fill: color }),
-    index.h("path", { d: "M1547.14 203.95C1539.08 203.95 1532.97 201.48 1528.81 196.54C1524.65 191.47 1522.57 184.19 1522.57 174.7V113.275H1505.02V104.5H1522.57V77.9801L1532.32 74.6651H1533.1V104.5H1560.59V113.275H1533.1V172.555C1533.1 180.355 1534.33 186.01 1536.8 189.52C1539.27 193.03 1543.17 194.785 1548.5 194.785C1553.83 194.785 1558.06 194.005 1561.18 192.445L1562.35 200.83C1558.19 202.91 1553.12 203.95 1547.14 203.95Z", fill: color }),
-    index.h("path", { d: "M1661.53 157.54H1589.77C1590.42 169.37 1593.54 178.535 1599.13 185.035C1604.85 191.535 1612.65 194.785 1622.53 194.785C1628.51 194.785 1633.97 193.485 1638.91 190.885C1643.98 188.285 1647.95 184.645 1650.81 179.965L1657.24 186.4C1653.34 192.12 1648.4 196.475 1642.42 199.465C1636.57 202.455 1629.94 203.95 1622.53 203.95C1609.01 203.95 1598.35 199.465 1590.55 190.495C1582.88 181.525 1579.05 169.175 1579.05 153.445C1579.05 137.585 1582.82 125.17 1590.36 116.2C1597.9 107.1 1608.23 102.55 1621.36 102.55C1633.84 102.55 1643.66 106.84 1650.81 115.42C1657.96 124 1661.53 135.895 1661.53 151.105V157.54ZM1651.39 147.4C1651.39 136.48 1648.66 127.77 1643.2 121.27C1637.74 114.77 1630.46 111.52 1621.36 111.52C1611.74 111.52 1604.2 114.77 1598.74 121.27C1593.28 127.77 1590.29 137.065 1589.77 149.155H1651.39V147.4Z", fill: color })));
+const style$3 = {
+  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
+  Column: mixins.AuthColumn,
+  HostBlock: mixins.HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: mixins.AuthButtonsContainer,
+  ErrorStyle: mixins.ErrorStyles,
+};
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
 }
 
-const vanillaStyle$2 = `
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+function PortalRegisterView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  return (index.h("div", { class: sheet$3.classes.Wrapper, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString$3),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+    index.h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
+      !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet$3.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
+      content.passwordField,
+      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
+        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
+      }
+        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
+        class: sheet$3.classes.ErrorStyle,
+        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      content.terms,
+      index.h("div", { class: sheet$3.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}
+
+const style$4 = {
+  ErrorStyle: {
+    "&::part(control)": {
+      background: "var(--sl-color-danger-10)",
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle$1 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet$4 = JSS.jss.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+function CheckboxFieldView(props) {
+  var _b, _c;
+  const { states, content, callbacks } = props;
+  return (index.h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$4),
+    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+        callbacks.setChecked(e.target.value);
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), global.intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
+}
+
+function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  const style = {
+    HostBlock: mixins.HostBlock,
+    couponCodeLabel: {
+      margin: "var(--sl-spacing-x-small) 0",
+      color: props.textColor || "var(--sqm-text-subdued)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+  };
+  const vanillaStyle = `
   :host{
-    margin: 0 auto;
+    display: block;   
     width: 100%;
   }
-  a{
-    cursor:pointer;
-    color: inherit;
-    text-decoration: none;
+`;
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+    error ? (index.h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
+      index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(copyTextView.CopyTextView, Object.assign({}, props)))));
+}
+
+const style$5 = {
+  ErrorStyle: {
+    "--sl-input-border-color": "var(--sl-color-danger-500)",
+    "--sl-input-background-color": "var(--sl-color-danger-10)",
+    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
+    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle$2 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-select::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet$5 = JSS.jss.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
+function DropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { states, content } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (index.h("div", { class: sheet$5.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$2,
+      styleString$5),
+    index.h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+      class: sheet$5.classes.ErrorStyle,
+    }
+      : [])), content.selectOptions),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$5.classes.ErrorMessageStyle }, global.intl.formatMessage({
+      id: `errorMessage-${content.dropdownName}`,
+      defaultMessage: content.errorMessage,
+    })))));
+}
+
+const EditProfileView = (props) => {
+  var _a, _b, _c, _d;
+  const { states, callbacks } = props;
+  const { text } = states;
+  const { errors } = states.formState;
+  if (states.showEdit) {
+    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+      index.h("h2", { part: "sqm-header", style: {
+          fontSize: "var(--sl-font-size-x-large)",
+          margin: "0px",
+          textAlign: "center",
+        } }, text.editprofileheader),
+      index.h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
+        index.h("div", { class: "FormSection" },
+          states.formState.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+            index.h("div", { part: "erroralert-text" }, states.formState.error))),
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
+            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
+            : []), { id: "firstName", name: "firstName", error: errors.firstName && errors.firstName.status !== "valid"
+              ? errors.firstName.message
+              : undefined })),
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
+            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
+            : []), { error: errors.lastName && errors.lastName.status !== "valid"
+              ? errors.lastName.message
+              : undefined }))),
+        text.showregion && states.formState.currentRegion && (index.h("sl-input", { exportparts: "label: input-label, base: input-base", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
+        index.h("div", { class: "ButtonWrapper" },
+          index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+              callbacks.onSubmit(e);
+            }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
+          index.h("sl-button", { onClick: () => {
+              callbacks.setShowEdit(false);
+            }, type: "secondary", exportparts: "base: secondarybutton-base" }, text.canceltext)))));
   }
-`;
-function PortalFooterView(props) {
+  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+    index.h("div", { class: "FormSection" },
+      index.h("h2", { part: "sqm-header", style: {
+          fontSize: "var(--sl-font-size-x-large)",
+          marginBottom: "0px",
+          textAlign: "center",
+        } }, text.editprofileheader),
+      index.h("div", null,
+        index.h("p", { style: { fontSize: "var(--sl-font-size-medium)" } }, (_a = states.user) === null || _a === void 0 ? void 0 :
+          _a.firstName,
+          " ", (_b = states.user) === null || _b === void 0 ? void 0 :
+          _b.lastName),
+        index.h("p", { style: { fontSize: "var(--sl-font-size-medium)" }, title: (_c = states.user) === null || _c === void 0 ? void 0 : _c.email }, (_d = states.user) === null || _d === void 0 ? void 0 : _d.email))),
+    index.h("sl-button", { type: "primary", loading: states.loading, onClick: () => {
+        callbacks.resetForm();
+        callbacks.setShowEdit(true);
+      }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
+};
+
+function LeaderboardView(props) {
+  var _a, _b, _c;
+  const { states, data, elements } = props;
+  const { styles } = states;
   const style = {
-    RowContainer: {
-      display: "flex",
-      "& > :not(:last-child)": {
-        "margin-right": "var(--sl-spacing-large)",
+    Leaderboard: {
+      "& table": {
+        width: "100%",
+        borderCollapse: "collapse",
+        background: styles.background || "transparent",
+        borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : "0",
       },
-    },
-    Container: {
-      display: "flex",
-      "flex-direction": "column",
-      "align-items": "center",
-      "font-size": "var(--sl-font-size-small)",
-      color: "var(--sl-color-gray-600)",
-      "padding-top": `var(--sl-spacing-${props.paddingTop})`,
-      "padding-right": `var(--sl-spacing-${props.paddingRight})`,
-      "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
-      "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
-      "row-gap": `var(--sl-spacing-small)`,
-      "& a:hover": {
-        color: "var(--sl-color-gray-900)",
+      "& th": {
+        textAlign: "left",
+        padding: "var(--sl-spacing-medium)",
+        paddingTop: "0",
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
       },
-    },
-    SupportText: {
-      textAlign: "center",
-      margin: 0,
-    },
-    PoweredByLink: {
-      color: "var(--sl-color-gray-400)",
-      "font-size": "var(--sl-font-size-small)",
-      display: "flex",
-      alignItems: "center",
-      svg: {
-        marginTop: "2px",
-        shapeRendering: "geometricprecision",
+      "& tr:not(:first-child)": {
+        borderTop: `var(--sqm-bordr-thickness) solid ${styles.borderColor || "var(--sqm-border-color)"}`,
       },
-      "&:hover, &:hover *": {
-        color: "var(--sl-color-gray-900)",
+      "& td": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+      },
+      "& .ellipses": {
+        textAlign: "left",
+        padding: "0",
+        color: styles.textColor || "var(--sqm-text)",
+        paddingLeft: "25%",
+      },
+      "& .highlight": {
+        background: styles.viewingUserHighlightColor ||
+          "var(--sqm-accent-color-background)",
+        "& td, th": {
+          color: styles.viewingUserHighlightTextColor || "var(--sqm-text)",
+        },
+      },
+      "& td, th": {
+        color: styles.textColor || "var(--sqm-text)",
+        padding: "var(--sl-spacing-medium)",
+      },
+      "& .User": {
+        width: "100%",
+      },
+      "& .Score": {
+        width: "auto",
+        whiteSpace: "nowrap",
+      },
+      "& .Rank": {
+        whiteSpace: "nowrap",
+      },
+      "& .fullWidth": {
+        width: "100%",
       },
     },
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+  const vanillaStyle = `
+  :host{
+    display: block;
+  }
+`;
+  if (states.isEssentials) {
+    return (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
+  }
+  if (states.loading) {
+    return (index.h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
+      index.h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      index.h("table", null, [...Array(10)].map(() => {
+        return (index.h("tr", null,
+          index.h("td", null,
+            index.h("sl-skeleton", null))));
+      }))));
+  }
+  if (!states.hasLeaders)
+    return elements.empty;
+  let userSeenFlag = false;
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
+  const getRankCellText = (userRank, isViewingUsersRow) => {
+    if (!userRank) {
+      return styles.hideNames ? `${styles.viewingUserText}` : "-";
+    }
+    const viewingUserText = ` - ${styles.viewingUserText}`;
+    return styles.rankSuffix
+      ? global.intl.formatMessage({
+        id: "rank",
+        defaultMessage: styles.rankSuffix,
+      }, {
+        rank: userRank,
+      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
+      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
+  };
+  return (index.h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     index.h("style", { type: "text/css" },
-      vanillaStyle$2,
-      styleString),
-    index.h("div", { class: sheet.classes.RowContainer },
-      props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
-      props.termsLink && (index.h("a", { target: "_blank", href: props.termsLink }, props.termsText))),
-    !props.hideSupportText && (index.h("p", { class: sheet.classes.SupportText }, global.intl.formatMessage({
-      id: "supportFooter",
-      defaultMessage: props.supportText,
-    }, {
-      email: (index.h("a", { target: "_blank", href: `mailto:${props.supportEmail}` }, props.supportEmail)),
-    }))),
-    !props.hidePoweredBy && (index.h("a", { class: sheet.classes.PoweredByLink, target: "_blank", href: props.poweredByLink },
-      "Powered by ",
-      index.h(PoweredByImg, { color: "currentColor" })))));
+      styleString,
+      vanillaStyle),
+    index.h("table", { part: "sqm-table" },
+      index.h("tr", null,
+        styles.showRank && (index.h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
+        !styles.hideNames && index.h("th", { class: "User" }, styles.usersheading),
+        index.h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
+      _a.map((user) => {
+        var _a, _b;
+        if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
+        return (index.h("tr", { class: isViewingUsersRow ? "highlight" : "" },
+          styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
+          !styles.hideNames && index.h("td", { class: "User" }, getUsersName(user)),
+          index.h("td", { class: "Score" }, user.textValue)));
+      }),
+      !userSeenFlag && !styles.hideViewer && (index.h("tr", null,
+        index.h("td", { colSpan: 100, class: "ellipses" },
+          index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      !userSeenFlag && !styles.hideViewer && (index.h("tr", { class: "highlight" },
+        styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
+        !styles.hideNames && (index.h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        index.h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }
 
 const paddingList = [
@@ -2644,10 +2589,10 @@ function HeroView(props) {
       large: 9,
     };
     var index = sizes[size];
-    if (utilities.isMobile(767)) {
+    if (utilities.isMobile(650)) {
       index = index - 2;
     }
-    else if (utilities.isMobile(1023)) {
+    else if (utilities.isMobile(767)) {
       index = index - 1;
     }
     return half ? paddingList[index - 2] : paddingList[index];
@@ -2667,7 +2612,7 @@ function HeroView(props) {
   const style = {
     TwoColumnContainer: {
       display: "flex",
-      "@media screen and (max-width: 1023px)": {
+      "@media screen and (max-width: 650px)": {
         flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
         justfiyContent: "center",
       },
@@ -2693,10 +2638,13 @@ function HeroView(props) {
       "&:last-of-type": {
         background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
       },
-      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      "@media screen and (min-width: 650px)": { flex: "1 1 0" },
       minHeight: `${states.minHeight}px`,
       display: "block",
     },
+    HideColumn: {
+      "@media screen and (max-width: 650px)": { display: "none" },
+    },
     SingleColumnContainer: {
       background: `no-repeat center/cover ${parseBackground(states.background)}`,
       minHeight: `${states.minHeight}px`,
@@ -2721,57 +2669,31 @@ function HeroView(props) {
   sqm-hero{    
     height: 100%;
     display: contents;
-  }
-  img{
-      max-width: 100%;
-      height: auto;
-  }
-  
-`;
-  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
-      index.h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      index.h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (index.h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
-}
-
-function ReferralIframeView(props) {
-  const { states, data } = props;
-  const { content } = states;
-  // dependent on props
-  const style = {
-    Container: {
-      position: "relative",
-      width: content.iframeWidth,
-      height: content.iframeHeight,
-    },
-    IFrame: {
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      border: "0",
-      top: "0",
-      left: "0",
-      right: "0",
-    },
-  };
-  // JSS config
-  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("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
+`;
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
+      index.h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "primary"
+          ? sheet.classes.HideColumn
+          : ""}` }, content.primaryColumn),
+      index.h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "secondary"
+          ? sheet.classes.HideColumn
+          : ""}` }, content.secondaryColumn))) : (index.h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
 const style$6 = {
   ErrorStyle: mixins.ErrorStyles,
-  FieldsContainer: {
-    "& sl-input": {
-      "margin-bottom": "var(--sl-spacing-large)",
-    },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
   },
 };
 const vanillaStyle$3 = `
@@ -2780,54 +2702,37 @@ const vanillaStyle$3 = `
   width: 100%;
   display: block;
 }
-
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
 `;
-const sheet$6 = JSS.createStyleSheet(style$6);
+JSS.jss.setup(JSS.create());
+const sheet$6 = JSS.jss.createStyleSheet(style$6);
 const styleString$6 = sheet$6.toString();
-function NameFieldsView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-  const { states } = props;
+function InputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$6.classes.FieldsContainer },
+  return (index.h("div", { class: sheet$6.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle$3,
       styleString$6),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
-      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
-    }
-      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
-      class: sheet$6.classes.ErrorStyle,
-      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
-    }
-      : []))),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
-      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
     }
-      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
       class: sheet$6.classes.ErrorStyle,
-      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
+      helpText: global.intl.formatMessage({
+        id: `errorMessage-${content.fieldName}`,
+        defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
+      }),
     }
       : [])))));
 }
 
 const style$7 = {
-  ErrorStyle: {
-    "--sl-input-border-color": "var(--sl-color-danger-500)",
-    "--sl-input-background-color": "var(--sl-color-danger-10)",
-    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
-    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+  ErrorStyle: mixins.ErrorStyles,
+  FieldsContainer: {
+    "& sl-input": {
+      "margin-bottom": "var(--sl-spacing-large)",
+    },
   },
 };
 const vanillaStyle$4 = `
@@ -2836,70 +2741,259 @@ const vanillaStyle$4 = `
   width: 100%;
   display: block;
 }
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
+
+*::part(input-label), *::part(select-label), *::part(textarea-label){
+  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
   font-weight: var(--sl-font-weight-semibold);
+  color: var(--sqm-input-label-color, var(--sqm-text), black);
+}
+
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
 }
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textare::part(textarea-label):focus {
+  border-color: none;
+  border: var(--sqm-input-focus-border, var(--sqm-border-thickness) solid var(--sl-input-border-color-focus));
+}
+
+*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+sl-input {
+  --sl-input-border-color-focus: var(--sqm-border-color-focus); 
+}
+
 `;
-JSS.jss.setup(JSS.create());
-const sheet$7 = JSS.jss.createStyleSheet(style$7);
+const sheet$7 = JSS.createStyleSheet(style$7);
 const styleString$7 = sheet$7.toString();
-function DropdownFieldView(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { states, content } = props;
+function NameFieldsView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  const { states } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$7.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$7.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$4,
       styleString$7),
-    index.h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
-      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
-      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
       class: sheet$7.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
-      : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$7.classes.ErrorMessageStyle }, global.intl.formatMessage({
-      id: `errorMessage-${content.dropdownName}`,
-      defaultMessage: content.errorMessage,
-    })))));
+      : []))),
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+      class: sheet$7.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
+    }
+      : [])))));
 }
 
-const style$8 = {
-  ErrorStyle: mixins.ErrorStyles,
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle$5 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
+function ChangeMarktingView(props) {
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { error } = formState;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-x-small)",
+      padding: "0 var(--sl-spacing-xxx-large) var(--sl-spacing-xxx-large)",
+    },
+    SubmitButton: { marginBottom: "var(--sl-spacing-medium)" },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+    Success: {
+      "&::part(successalert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
+    index.h("sl-form", { "onSl-submit": callbacks.onSubmit },
+      index.h(CheckboxFieldView, { states: {
+          checked: states.formState.marketingEmailOptIn,
+        }, content: {
+          checkboxLabel: text.marketingCheckboxLabel,
+          checkboxName: "marketingEmailOptIn",
+        }, callbacks: {
+          setChecked: callbacks.setChecked,
+        } }),
+      index.h("sl-button", { class: sheet.classes.SubmitButton, type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
+      error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, error))),
+      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
+        index.h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
+
+const vanillaStyle$5 = `
+  :host{
+    margin: 0 auto;
+    width: 100%;
+  }
+  a{
+    cursor:pointer;
+    color: var(--sqm-text-subdued);
+    text-decoration: none ;
+  }
 `;
-JSS.jss.setup(JSS.create());
-const sheet$8 = JSS.jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
-function InputFieldView(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { states, content } = props;
-  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$8.classes.FieldContainer, part: "sqm-base" },
+function PortalFooterView(props) {
+  const style = {
+    RowContainer: {
+      display: "flex",
+      "& > :not(:last-child)": {
+        "margin-right": "var(--sl-spacing-large)",
+      },
+    },
+    Container: {
+      display: "flex",
+      "flex-direction": "column",
+      "align-items": "center",
+      "font-size": "var(--sl-font-size-small)",
+      color: "var(--sqm-text-subdued)",
+      "padding-top": `var(--sl-spacing-${props.paddingTop})`,
+      "padding-right": `var(--sl-spacing-${props.paddingRight})`,
+      "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
+      "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
+      "row-gap": `var(--sl-spacing-small)`,
+      "& a:hover": {
+        color: "var(--sqm-text)",
+      },
+    },
+    SupportText: {
+      textAlign: "center",
+      margin: 0,
+    },
+    PoweredByLink: {
+      color: "var(--sqm-text-subdued)",
+      "font-size": "var(--sl-font-size-small)",
+      display: "flex",
+      alignItems: "center",
+      svg: {
+        marginTop: "2px",
+        shapeRendering: "geometricprecision",
+      },
+      "&:hover, &:hover *": {
+        color: "var(--sqm-text)",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle$5,
-      styleString$8),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
-      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
-    }
-      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
-      class: sheet$8.classes.ErrorStyle,
-      helpText: global.intl.formatMessage({
-        id: `errorMessage-${content.fieldName}`,
-        defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
-      }),
-    }
-      : [])))));
+      styleString),
+    index.h("div", { class: sheet.classes.RowContainer },
+      props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
+      props.termsLink && (index.h("a", { target: "_blank", href: props.termsLink }, props.termsText))),
+    !props.hideSupportText && (index.h("p", { class: sheet.classes.SupportText }, global.intl.formatMessage({
+      id: "supportFooter",
+      defaultMessage: props.supportText,
+    }, {
+      email: (index.h("a", { target: "_blank", href: `mailto:${props.supportEmail}` }, props.supportEmail)),
+    }))),
+    !props.hidePoweredBy && (index.h("a", { class: sheet.classes.PoweredByLink, target: "_blank", href: props.poweredByLink },
+      "Powered by ",
+      index.h(PoweredByImg, { color: "currentColor" })))));
+}
+
+function PortalFrameView(props, children) {
+  const { data, notFullScreen, border } = props;
+  const style = {
+    HostBlock: mixins.HostBlock,
+    Frame: {
+      display: "flex",
+      "flex-direction": "column",
+      "box-sizing": "border-box",
+      "&:nth-child(2)": {
+        background: props.backgroundColor,
+      },
+    },
+    FooterWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
+      background: props.headerAndFooterBackgroundColor,
+      display: "flex",
+      "justify-content": "flex-end",
+      "align-items": "center",
+      "box-sizing": "border-box",
+      borderTop: border,
+      "margin-top": "auto",
+    },
+    HeaderWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      "box-sizing": "border-box",
+      display: "flex",
+      "justify-content": "space-between",
+      padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+      "align-items": "center",
+      borderBottom: border,
+      background: props.headerAndFooterBackgroundColor,
+      "@media screen and (max-width: 499px)": {
+        "flex-direction": "row-reverse",
+        "justify-content": "flex-end",
+        padding: "0",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: sheet.classes.HeaderWrapper, part: "sqm-header" },
+      data.header,
+      index.h("slot", { name: "sqm-navigation-menu" })),
+    children,
+    index.h("div", { class: sheet.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
+}
+
+function ReferralIframeView(props) {
+  const { states, data } = props;
+  const { content } = states;
+  // dependent on props
+  const style = {
+    Container: {
+      position: "relative",
+      width: content.iframeWidth,
+      height: content.iframeHeight,
+    },
+    IFrame: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      border: "0",
+      top: "0",
+      left: "0",
+      right: "0",
+    },
+  };
+  // JSS config
+  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("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }
 
 const CheckMark = () => (index.h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -2931,15 +3025,15 @@ function Dot({ active, completed, incomplete, stage, }) {
     } },
     index.h("div", { style: {
         backgroundColor: completed
-          ? "var(--sl-color-success-500)"
+          ? "var(--sqm-success-color-icon)"
           : incomplete
-            ? "var(--sl-color-neutral-200)"
-            : "var(--sl-color-neutral-0)",
+            ? "var(--sqm-border-color)"
+            : "white",
         border: active
-          ? "1px solid var(--sl-color-success-500)"
+          ? "1px solid var(--sqm-success-color-border)"
           : incomplete
-            ? "1px solid var(--sl-color-neutral-200)"
-            : "1px solid var(--sl-color-success-500)",
+            ? "1px solid var(--sqm-border-color)"
+            : "1px solid var(--sqm-success-color-border)",
         borderRadius: "50%",
         width: "23px",
         height: "23px",
@@ -2949,8 +3043,8 @@ function Dot({ active, completed, incomplete, stage, }) {
       } }, completed ? (index.h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
       index.h(CheckMark, null))) : (index.h("div", { style: {
         color: active
-          ? "var(--sl-color-success-500)"
-          : "var(--sl-color-neutral-50)",
+          ? "var(--sqm-success-color-border)"
+          : "var(--sqm-text-subdued)",
         width: "23px",
         lineHeight: "24px",
         textAlign: "center",
@@ -2964,8 +3058,8 @@ function ProgressLine({ incomplete = false, active = false, invisible = false, }
       height: "4px",
       borderRadius: "4px",
       background: incomplete || active
-        ? "var(--sl-color-neutral-200)"
-        : "var(--sl-color-success-500)",
+        ? "var(--sqm-border-color)"
+        : "var(--sqm-success-color-icon)",
       position: "relative",
       bottom: "0",
       left: "0",
@@ -2988,7 +3082,7 @@ 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 style$9 = {
+const style$8 = {
   HostBlock: mixins.HostBlock,
   Container: {
     minWidth: "300px",
@@ -3002,21 +3096,25 @@ const style$9 = {
     margin: "0 auto",
   },
   Select: {
+    "&::part(base)": {
+      borderRadius: "var(--sqm-input-border-radius)",
+    },
     "&::part(label)": {
-    //   color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-input-label-color)",
     },
     "&::part(menu)": {
       maxHeight: "450px",
     },
     "& sl-menu-item::part(checked-icon)": {
       top: "8px",
+      color: "var(--sqm-text)",
     },
     "& sl-menu-item::part(base)": {
       flexDirection: "column",
     },
     "& sl-menu-item::part(base):focus": {
-      background: "transparent",
-      color: "var(--sl-color-gray-700)",
+      background: "var(--sqm-accent-color-background)",
+      color: "var(--sqm-text)",
     },
   },
   ProgressBar: {
@@ -3036,7 +3134,7 @@ const style$9 = {
         flex: "1 1 0",
       },
       "& .text.subdued": {
-        color: "var(--sl-color-neutral-200)",
+        color: "var(--sqm-text-subdued)",
       },
     },
   },
@@ -3051,6 +3149,9 @@ const style$9 = {
     userSelect: "none",
     height: "120px",
     "&::part(base)": {
+      background: "var(--sqm-portal-background)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+      borderRadius: "var(--sqm-border-radius-normal)",
       boxShadow: "none",
       width: "100%",
     },
@@ -3059,10 +3160,11 @@ const style$9 = {
       padding: 0,
     },
     "& .selected": {
+      borderRadius: "var(--sqm-border-radius-normal)",
       position: "relative",
       top: "-2%",
       left: "100%",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-primary-color)",
       margin: "-9px",
     },
   },
@@ -3094,7 +3196,7 @@ const style$9 = {
       fontSize: "var(--sl-font-size-medium)",
       lineHeight: "var(--sl-line-height-dense)",
       fontWeight: "600",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -3104,7 +3206,7 @@ const style$9 = {
       fontSize: "var(--sl-font-size-small)",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -3115,7 +3217,7 @@ const style$9 = {
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
       fontWeight: "600",
-      color: "var(--sl-color-warning-600)",
+      color: "var(--sqm-warning-color-icon)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -3150,7 +3252,6 @@ const style$9 = {
     "& .text": {
       width: "50%",
       maxWidth: "400px",
-      //   minWidth: "330px",
       "@media (max-width: 799px)": {
         width: "auto",
         margin: "auto",
@@ -3159,17 +3260,17 @@ const style$9 = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .points": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-accent-color-text)",
     },
     "& .description": {
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       margin: "var(--sl-spacing-medium) 0",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-xx-small)",
@@ -3178,14 +3279,14 @@ const style$9 = {
       marginBottom: "var(--sl-spacing-xxx-large)",
     },
     "& sl-menu-item[disabled]::part(label)": {
-      color: "var(--sl-color-neutral-300)",
+      color: "var(sqm-text-subdued)",
     },
     "& sl-menu-item[disabled]": {
       "& .step-cost": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
       "& .step-value": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
     },
   },
@@ -3193,16 +3294,16 @@ const style$9 = {
     display: "flex",
     flexDirection: "column",
     "&::part(label)": {
-      color: "var(--sl-color-neutral-900)",
+      color: "var(--sqm-text)",
       margin: "0",
     },
     "& .step-cost": {
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       marginBottom: "var(--sl-spacing-x-small)",
     },
     "& .step-unavailable": {
       fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
       margin: "0",
     },
   },
@@ -3211,10 +3312,10 @@ const style$9 = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .description": {
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subued)",
       maxWidth: "350px",
       margin: "0 auto",
       lineHeight: "var(--sl-line-height-dense)",
@@ -3225,7 +3326,7 @@ const style$9 = {
       maxWidth: "350px",
       margin: "-30px auto var(--sl-spacing-xxx-large) auto",
       textAlign: "left",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   Grid: {
@@ -3267,10 +3368,9 @@ const style$9 = {
     },
     "& .field": {
       width: "30%",
-      textTransform: "uppercase",
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subdued)",
       textAlign: "left",
       paddingRight: "var(--sl-spacing-xxx-large)",
       "@media (max-width: 499px)": {
@@ -3284,7 +3384,7 @@ const style$9 = {
       fontWeight: "var(--sl-font-weight-semibold)",
     },
     "& .top-border": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
+      borderTop: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
     },
     "& .image": {
       width: "200px",
@@ -3300,10 +3400,6 @@ const style$9 = {
     "& .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",
@@ -3311,12 +3407,6 @@ const style$9 = {
       },
     },
     "& .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%",
       },
@@ -3339,8 +3429,8 @@ const style$9 = {
   },
 };
 // JSS config
-const sheet$9 = JSS.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+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;
@@ -3363,7 +3453,7 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    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$9.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,
@@ -3371,7 +3461,7 @@ function RewardExchangeView(props) {
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
-      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$9.classes.SelectItem },
+      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$8.classes.SelectItem },
         step.prettyDestinationValue,
         index.h("br", null),
         index.h("div", { class: "step-cost", slot: "suffix" },
@@ -3390,17 +3480,18 @@ function RewardExchangeView(props) {
     var _a;
     return [
       index.h("div", { part: "choose-reward-container" },
-        index.h("div", { class: sheet$9.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$9.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        index.h("div", { class: sheet$8.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (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)
-              ? "0 0 0 2px var(--sl-color-primary-500)"
+              ? "0 0 0 2px var(--sqm-primary-color)"
               : "none",
-            borderRadius: "4px",
+            borderRadius: "var(--sqm-border-radius-normal)",
+            borderColor: "none",
           };
           return (index.h("div", { key: item.key, style: style },
-            index.h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$9.classes.Card, style: {
+            index.h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$8.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3417,14 +3508,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                index.h("div", { class: sheet$9.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$9.classes.TextArea, style: {
+                index.h("div", { class: sheet$8.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("div", { class: "title", style: {
@@ -3457,8 +3548,8 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        index.h("div", { class: sheet$9.classes.Button },
-          index.h("sl-button", { exportparts: "base: primarybutton-base", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
+        index.h("div", { class: sheet$8.classes.Button },
+          index.h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
   function chooseAmount() {
@@ -3468,7 +3559,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", { class: sheet$9.classes.ChooseAmount, part: "choose-amount-container" },
+      index.h("div", { class: sheet$8.classes.ChooseAmount, part: "choose-amount-container" },
         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") }),
@@ -3477,16 +3568,16 @@ 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", null, input)),
             index.h("div", { class: "space" }))),
-        index.h("div", { class: sheet$9.classes.Button },
-          index.h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
-          index.h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
+        index.h("div", { class: sheet$8.classes.Button },
+          index.h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          index.h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (index.h("div", null,
-      index.h("div", { class: sheet$9.classes.Confirmation, part: "confirmation-container" },
-        index.h("div", { class: sheet$9.classes.Title }, states.content.text.redeemTitle),
+      index.h("div", { class: sheet$8.classes.Confirmation, part: "confirmation-container" },
+        index.h("div", { class: sheet$8.classes.Title }, states.content.text.redeemTitle),
         index.h("div", { class: "wrapper" },
           index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
           index.h("div", { class: "reward-item-container" },
@@ -3501,13 +3592,13 @@ 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$9.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)))));
+        index.h("div", { class: sheet$8.classes.Button },
+          index.h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          index.h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f;
-    return (index.h("div", { class: sheet$9.classes.Success, part: "success-container" },
+    return (index.h("div", { class: sheet$8.classes.Success, part: "success-container" },
       index.h(Gift$1, null),
       index.h(Confetti, null),
       index.h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -3522,7 +3613,7 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { class: "promo" },
         states.content.text.promoCode,
         index.h(copyTextView.CopyTextView, { copyString: 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$9.classes.Button },
+      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 = {
@@ -3534,7 +3625,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { class: sheet$9.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]);
@@ -3546,16 +3637,16 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet$9.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$8.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
-        index.h("sl-card", { class: sheet$9.classes.Card },
-          index.h("div", { class: sheet$9.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",
                   height: "100px",
                   margin: "9px",
-                  "--border-radius": "4px",
+                  "--border-radius": "var(--sqm-border-radius-normal)",
                 } })),
             index.h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
@@ -3581,12 +3672,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$9.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$8.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (index.h("div", { class: sheet$9.classes.Container, part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$9),
+  return (index.h("div", { class: sheet$8.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString$8),
     index.h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -3647,15 +3738,14 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     setStage: null,
     setExchangeState: null,
     copyFuelTankCode: null,
-    refs: null,
   },
   refs: null,
 });
 const baseReward = {
-  key: "",
-  name: "",
+  key: "reward",
+  name: "Demo Reward",
   description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
-  imageUrl: "",
+  imageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png",
   available: true,
   unavailableReasonCode: null,
   ruleType: "FIXED_GLOBAL_REWARD",
@@ -3672,7 +3762,34 @@ const baseReward = {
   prettyDestinationMaxValue: null,
   globalRewardKey: "",
   destinationUnit: null,
-  steps: [],
+  steps: [
+    {
+      prettyDestinationValue: "Reward Step 1",
+      prettySourceValue: "50 Points",
+      available: true,
+      unavailableReasonCode: null,
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+    {
+      prettyDestinationValue: "Reward Step 2",
+      prettySourceValue: "100 Points",
+      available: false,
+      unavailableReasonCode: "Not enough points",
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+  ],
 };
 const notEnoughPoints = {
   available: false,
@@ -3976,108 +4093,164 @@ const empty = {
   ...baseResponse(null, "chooseReward", null, null, false, false, null, true),
 };
 
-function CardFeedView(props, children) {
-  // Dependent on props, not feasiable to move out
-  const style = {
-    Container: {
-      columnGap: props.gap + "px",
-      columnWidth: props.width + "px",
-      "& > div": {
-        marginBottom: "24px",
-      },
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
+const MessageLinkQuery = index_module.dist.gql `
+  query (
+    $programId: ID
+    $engagementMedium: UserEngagementMedium!
+    $shareMedium: ReferralShareMedium!
+  ) {
+    viewer {
+      ... on User {
+        messageLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: $shareMedium
+        )
+        shareLink(programId: $programId, engagementMedium: $engagementMedium)
+      }
     }
-
-  `;
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    index.h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
-}
-
-const style$a = {
-  HostBlock: mixins.HostBlock,
-  couponCodeLabel: {
-    margin: "var(--sl-spacing-x-small) 0",
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-small)",
-  },
-};
-const vanillaStyle$6 = `
-  :host{
-    display: block;   
-    width: 100%;
   }
 `;
-const sheet$a = JSS.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
-function CouponCodeView(props) {
-  const error = !props.loading && props.error;
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" },
-      styleString$a,
-      vanillaStyle$6),
-    index.h("p", { class: sheet$a.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
-    error ? (index.h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
-      index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(copyTextView.CopyTextView, Object.assign({}, props)))));
+function NativeShare(props, directLink, undefinedErrorText, unsupportedPlatformText) {
+  const title = props.sharetitle || "Share title";
+  const text = props.sharetext || "Share text";
+  if (directLink === "undefined") {
+    return alert(undefinedErrorText);
+  }
+  if (window.navigator.share) {
+    window.navigator
+      .share({
+      title,
+      text,
+      url: directLink,
+    })
+      .catch((error) => console.error("Error on web share", error));
+  }
+  else {
+    alert(unsupportedPlatformText);
+  }
 }
-
-function t(t,n,r){return Math.min(Math.max(t,r),n)}class n extends Error{constructor(t){super(`Failed to parse color: "${t}"`);}}function r(r){if("string"!=typeof r)throw new n(r);if("transparent"===r.trim().toLowerCase())return [0,0,0,0];let e=r.trim();e=u.test(r)?function(t){const r=t.toLowerCase().trim(),e=o[function(t){let n=5381,r=t.length;for(;r;)n=33*n^t.charCodeAt(--r);return (n>>>0)%2341}(r)];if(!e)throw new n(t);return `#${e}`}(r):r;const f=s.exec(e);if(f){const t=Array.from(f).slice(1);return [...t.slice(0,3).map(t=>parseInt(_(t,2),16)),parseInt(_(t[3]||"f",2),16)/255]}const p=i.exec(e);if(p){const t=Array.from(p).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,16)),parseInt(t[3]||"ff",16)/255]}const z=a.exec(e);if(z){const t=Array.from(z).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,10)),parseFloat(t[3]||"1")]}const h=c.exec(e);if(h){const[e,o,_,s]=Array.from(h).slice(1).map(parseFloat);if(t(0,100,o)!==o)throw new n(r);if(t(0,100,_)!==_)throw new n(r);return [...l(e,o,_),s||1]}throw new n(r)}const e=t=>parseInt(t.replace(/_/g,""),36),o="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((t,n)=>{const r=e(n.substring(0,3)),o=e(n.substring(3)).toString(16);let _="";for(let t=0;t<6-o.length;t++)_+="0";return t[r]=`${_}${o}`,t},{}),_=(t,n)=>Array.from(Array(n)).map(()=>t).join(""),s=new RegExp(`^#${_("([a-f0-9])",3)}([a-f0-9])?$`,"i"),i=new RegExp(`^#${_("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),a=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${_(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),c=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,u=/^[a-z]+$/i,f=t=>Math.round(255*t),l=(t,n,r)=>{let e=r/100;if(0===n)return [e,e,e].map(f);const o=(t%360+360)%360/60,_=(1-Math.abs(2*e-1))*(n/100),s=_*(1-Math.abs(o%2-1));let i=0,a=0,c=0;o>=0&&o<1?(i=_,a=s):o>=1&&o<2?(i=s,a=_):o>=2&&o<3?(a=_,c=s):o>=3&&o<4?(a=s,c=_):o>=4&&o<5?(i=s,c=_):o>=5&&o<6&&(i=_,c=s);const u=e-_/2;return [i+u,a+u,c+u].map(f)};function p(t){const[n,e,o,_]=r(t).map((t,n)=>3===n?t:t/255),s=Math.max(n,e,o),i=Math.min(n,e,o),a=(s+i)/2;if(s===i)return [0,0,a,_];const c=s-i;return [60*(n===s?(e-o)/c+(e<o?6:0):e===s?(o-n)/c+2:(n-e)/c+4),a>.5?c/(2-s-i):c/(s+i),a,_]}function z(n,r,e,o){return `hsla(${(n%360).toFixed()}, ${t(0,100,100*r).toFixed()}%, ${t(0,100,100*e).toFixed()}%, ${parseFloat(t(0,1,o).toFixed(3))})`}
-
-const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-const lScale = [
-  0.95,
-  0.86,
-  0.76,
-  0.66,
-  0.56,
-  0.46,
-  0.39,
-  0.32,
-  0.25,
-  0.18,
-  0.15,
-];
-// https://github.com/ricokahler/color2k/blob/main/src/parseToRgba.ts
-const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
-function niceParseToHsla(color) {
-  const normalizedColor = color.trim();
-  const hslaMatch = hslaRegex.exec(normalizedColor);
-  if (hslaMatch) {
-    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
-    if (t(0, 100, s) !== s)
-      throw new n(color);
-    if (t(0, 100, l) !== l)
-      throw new n(color);
-    return [h, s / 100, l, a || 1];
+function FacebookShare(directLink, messageLink, errorText) {
+  if (messageLink === "undefined" || directLink === "undefined") {
+    return alert(errorText);
+  }
+  if (typeof SquatchAndroid.shareOnFacebook !== "undefined") {
+    return SquatchAndroid.shareOnFacebook(directLink, messageLink);
+  }
+  else {
+    return GenericShare(messageLink, errorText);
   }
-  // Warning -- converts to RGB first, so is lossy
-  return p(color);
 }
-function generateScale(color, name = "primary") {
-  const [h, s, l, a] = niceParseToHsla(color);
-  return lScale
-    .map((l) => z(h, s, l, a))
-    .map((color, index) => {
-    return `--sl-color-${name}-${colorScale[index]}: ${color};\n`;
-  });
+function GenericShare(messageLink, errorText) {
+  return messageLink ? (window.location.href = messageLink) : alert(errorText);
 }
-/**
- * Generated a Shoelace color scale css string from a base color
- *
- * @param color
- * @param name
- * @returns
- */
-function autoColorScaleCss(color, name = "primary") {
-  return generateScale(color, name).join("\n");
+function useShareButton(props) {
+  var _a, _b, _c, _d;
+  const { sharetitle, sharetext, medium } = props;
+  const programId = props.programId ? props.programId : index_module.H();
+  const user = index_module.J();
+  const engagementMedium = index_module.B();
+  const variables = {
+    engagementMedium,
+    programId: programId,
+    shareMedium: medium.toUpperCase(),
+  };
+  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
+  const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
+  // only queries if a programId is available
+  const res = index_module.wn(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
+  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_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.getEnvironmentSDK();
+  const hide = (medium.toLocaleUpperCase() === "SMS" &&
+    window.orientation === undefined) ||
+    (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
+  const messageLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.messageLink);
+  async function onClick() {
+    if (overrideData) {
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
+    }
+    if (medium.toLocaleUpperCase() === "FACEBOOK" &&
+      environment.type === "SquatchAndroid") {
+      FacebookShare(directLink, messageLink, props.errorText);
+    }
+    else if (medium.toLocaleUpperCase() === "DIRECT") {
+      NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
+    }
+  }
+  const isPlainLink = !(medium.toLocaleUpperCase() === "FACEBOOK" &&
+    environment.type === "SquatchAndroid") &&
+    medium.toLocaleUpperCase() !== "DIRECT" &&
+    messageLink;
+  const userAgent = window.navigator.userAgent.toLowerCase(), safari = /safari/.test(userAgent), ios = /iphone|ipod|ipad/.test(userAgent);
+  const openInSameTab = ios && !safari;
+  return {
+    ...props,
+    loading: res.loading && !(overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink),
+    messageLink,
+    isPlainLink,
+    onClick,
+    openInSameTab,
+    hide,
+  };
+}
+
+const MessageLinkQuery$1 = index_module.dist.gql `
+  query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
+    user: viewer {
+      ... on User {
+        shareLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: DIRECT
+        )
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+function useShareLink(props) {
+  var _a, _b;
+  const { programId = index_module.H() } = props;
+  const user = index_module.J();
+  const engagementMedium = index_module.B();
+  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
+  const { data } = index_module.wn(MessageLinkQuery$1, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_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
+  "...";
+  const [open, setOpen] = domContextHooks_module.useState(false);
+  async function onClick() {
+    if (contextData) {
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
+    }
+    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+    // Only if called from a user-initiated event
+    navigator.clipboard.writeText(copyString);
+    setOpen(true);
+    setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
+  }
+  return { ...props, onClick, open, copyString: copyString };
 }
 
 const map = new Map();
@@ -4138,7 +4311,6 @@ exports.ShadowViewAddon = ShadowViewAddon;
 exports.ShareButtonView = ShareButtonView;
 exports.StatContainerView = StatContainerView;
 exports.TaskCardView = TaskCardView;
-exports.autoColorScaleCss = autoColorScaleCss;
 exports.chooseAmountFixed = chooseAmountFixed;
 exports.chooseAmountFixedNoDescription = chooseAmountFixedNoDescription;
 exports.chooseAmountVariable = chooseAmountVariable;