@saasquatch/mint-components 2.2.0-7 → 2.2.0-9

package/dist/cjs/ShadowViewAddon-1c054d52.js

@@ -1,4551 +0,0 @@
-'use strict';
-
-const index = require('./index-8277cbb3.js');
-const global = require('./global-b7b1b8fe.js');
-const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
-const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
-const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-0f7948af.js');
-const mixins = require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-bb2c0ea7.js');
-const sqmTextSpanView = require('./sqm-text-span-view-8a32dd8c.js');
-const useChildElements = require('./useChildElements-041127d7.js');
-const luxon = require('./luxon-c1ad356a.js');
-const index$1 = require('./index-8c6255f5.js');
-const imageUrl$1 = require('./imageUrl-a7880cab.js');
-const utilities = require('./utilities-fcdb9504.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.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",
-      "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" },
-  twitter: { color: "#000000", text: "#fff", icon: "twitter-x" },
-  email: { color: "#666666", text: "#fff", icon: "envelope" },
-  direct: {
-    color: "var(--sqm-primary-button-background)",
-    text: "var(--sqm-primary-button-color)",
-    icon: "send",
-  },
-  linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
-  sms: { color: "#34DA50", text: "#fff", icon: "chat" },
-  fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
-  whatsapp: { color: "#25d366", text: "#fff", icon: "whatsapp" },
-  linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
-  pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
-};
-const style = {
-  HostBlock: mixins.HostBlock,
-  buttonStyle: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    lineHeight: "0",
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function ShareButtonView(props, children) {
-  const vanillaStyle = `
-	sl-button::part(base) {
-	  border: ${props.border || "none"};
-    font-family: var(--sqm-primary-font);
-
-	background: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""};
-	color: ${props.textcolor
-    ? props.textcolor
-    : props.medium
-      ? medium[props.medium].text
-      : ""};
-	border-radius: ${props.borderradius
-    ? props.borderradius + "px"
-    : "var(--sqm-primary-button-radius)"};
-	}
-
-
-
-	*::part(label) {
-		position: relative;
-		top: 2%;
-	}
-	`;
-  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}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 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 = {
-    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(),
-      },
-      "& > :last-child": {
-        "border-right": "none",
-      },
-      "& > ::slotted(*)": {
-        "border-right": props.hideBorder
-          ? "none"
-          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
-        "padding-right": divideSpace(),
-      },
-      "& > ::slotted(*:last-child)": {
-        "border-right": "none",
-      },
-      "@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();
-  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(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)",
-      },
-    },
-    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: {
-      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", 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", 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))));
-}
-
-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$1 = {
-  Wrapper: mixins.AuthWrapper,
-  Column: mixins.AuthColumn,
-  HostBlock: mixins.HostBlock,
-  ":host": {
-    margin: "0 auto",
-    width: "100%",
-  },
-  ButtonsContainer: {
-    ...mixins.AuthButtonsContainer,
-    gap: "var(--sl-spacing-medium)",
-    "& > *": {
-      margin: "0 !important",
-    },
-  },
-  ErrorStyle: mixins.ErrorStyles,
-};
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-`;
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
-function BaseRegistrationFormView(props) {
-  var _a, _b;
-  const { states, content, callbacks } = props;
-  return (index.h("div", { class: sheet$1.classes.Wrapper },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$1),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$1.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      content.formData,
-      index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
-          if (!value) {
-            return content.requiredFieldErrorMessage;
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return content.invalidEmailErrorMessage;
-          }
-        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
-        class: sheet$1.classes.ErrorStyle,
-        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
-          content.requiredFieldErrorMessage,
-      }
-        : []))),
-      content.terms,
-      index.h("div", { class: sheet$1.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
-        index.h("sl-menu-divider", { style: { margin: "0" } }),
-        content.googleButton,
-        content.secondaryButton))));
-}
-
-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);
-  }
-  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
-            }
-          }
-        }
-      }
-    `, { programId, metricType, goalId, locale }, (res) => {
-    var _a, _b, _c, _d, _e, _f;
-    const goal = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.programGoals) === null || _c === void 0 ? void 0 : _c.filter((goal) => goal.goalId === goalId && goal.programId === programId);
-    return {
-      value: ((_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) || 0,
-      statvalue: ((_f = (_e = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _e === void 0 ? void 0 : _e[metricType]) === null || _f === void 0 ? void 0 : _f.toString()) || 0,
-    };
-  });
-};
-const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
-  return debugQuery(index_module.dist.gql `
-      query {
-        viewer {
-          ... on User {
-            customFields
-          }
-        }
-      }
-    `, { fieldName, goalId, locale }, (res) => {
-    var _a, _b, _c;
-    const customField = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.customFields) === null || _c === void 0 ? void 0 : _c[fieldName];
-    return {
-      value: customField || 0,
-      statvalue: (customField === null || customField === void 0 ? void 0 : customField.toString()) || "0",
-    };
-  });
-};
-const referralsMonthQuery = (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 filter = {
-    ...programFilter,
-    ...convertedFilter,
-    dateReferralStarted_timeframe: "this_month",
-  };
-  return debugQuery(index_module.dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, { filter }, (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 referralsWeekQuery = (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 filter = {
-    ...programFilter,
-    ...convertedFilter,
-    dateReferralStarted_timeframe: "this_week",
-  };
-  return debugQuery(index_module.dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, { filter }, (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 rewardsCountQuery = (programId, 
-// locale
-_, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(filter: { programId_eq: $programId }) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
-    });
-  });
-};
-const rewardsCountFilteredQuery = (programId, 
-// locale
-_, type, unit, status, global = "") => {
-  const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
-      query (
-        $programId: ID
-        $unit: String
-        $type: RewardType
-        $statusFilter: RewardStatusFilterInput
-      ) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                type_eq: $type
-                unit_eq: $unit
-                statuses_eq: $statusFilter
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    unit,
-    type,
-    statusFilter,
-  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
-    });
-  });
-};
-const integrationRewardsCountFilteredQuery = (programId, 
-// locale
-_, status, global = "") => {
-  const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                type_eq: INTEGRATION
-                statuses_eq: $statusFilter
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    statusFilter,
-  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
-    });
-  });
-};
-const rewardsMonthQuery = (programId, 
-// locale
-_, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                dateGiven_timeframe: "this_month"
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
-    });
-  });
-};
-const rewardsWeekQuery = (programId, 
-// locale
-_, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                dateGiven_timeframe: "this_week"
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-  }, (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.rewards) === 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.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
-    });
-  });
-};
-const rewardsPendingQuery = (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 {
-                prettyPendingCredit
-              }
-            }
-          }
-        }
-      }
-    `, {
-    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.prettyPendingCredit) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyPendingCredit) || fallback,
-    };
-  });
-};
-const rewardsRedeemedQuery = (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 {
-                prettyRedeemedCredit
-              }
-            }
-          }
-        }
-      }
-    `, {
-    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.prettyRedeemedCredit) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyRedeemedCredit) || fallback,
-    };
-  });
-};
-const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID, $type: RewardType, $unit: String!) {
-        viewer: viewer {
-          ... on User {
-            rewards(
-              limit: 1000
-              filter: {
-                programId_eq: $programId
-                type_eq: $type
-                unit_eq: $unit
-                dateRedeemed_timeframe: "this_week"
-              }
-            ) {
-              data {
-                redeemedCredit
-              }
-              totalCount
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    type,
-    unit,
-  }, (res) => {
-    var _a, _b, _c, _d;
-    const rewardData = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.data;
-    const fallback = 0;
-    const redeemedTotal = rewardData === null || rewardData === void 0 ? void 0 : rewardData.reduce((total, reward) => (total += reward.redeemedCredit), fallback);
-    if (redeemedTotal !== undefined) {
-      const query = `query formatRewardPrettyValue(
-          $value: Int!
-          $unit: String!
-          $locale: RSLocale
-        ) {
-          formatRewardPrettyValue(
-          value: $value
-          unit: $unit
-          locale: $locale
-          formatType: UNIT_FORMATTED
-        )}`;
-      const result = index_module.wn(query, {
-        value: redeemedTotal,
-        unit,
-        locale,
-      });
-      return {
-        value: redeemedTotal || fallback,
-        statvalue: (_d = result === null || result === void 0 ? void 0 : result.data) === null || _d === void 0 ? void 0 : _d.formatRewardPrettyValue,
-      };
-    }
-    return {
-      value: fallback,
-      statvalue: "...",
-    };
-  });
-};
-const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID, $type: RewardType, $unit: String!) {
-        viewer: viewer {
-          ... on User {
-            rewards(
-              limit: 1000
-              filter: {
-                programId_eq: $programId
-                type_eq: $type
-                unit_eq: $unit
-                dateRedeemed_timeframe: "this_month"
-              }
-            ) {
-              data {
-                redeemedCredit
-              }
-              totalCount
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    type,
-    unit,
-  }, (res) => {
-    var _a, _b, _c, _d;
-    const rewardData = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.data;
-    const fallback = 0;
-    const redeemedTotal = rewardData === null || rewardData === void 0 ? void 0 : rewardData.reduce((total, reward) => (total += reward.redeemedCredit), fallback);
-    if (redeemedTotal !== undefined) {
-      const query = `query formatRewardPrettyValue(
-          $value: Int!
-          $unit: String!
-          $locale: RSLocale
-        ) {
-          formatRewardPrettyValue(
-          value: $value
-          unit: $unit
-          locale: $locale
-          formatType: UNIT_FORMATTED
-        )}`;
-      const result = index_module.wn(query, {
-        value: redeemedTotal,
-        unit,
-        locale,
-      });
-      return {
-        value: redeemedTotal || fallback,
-        statvalue: (_d = result === null || result === void 0 ? void 0 : result.data) === null || _d === void 0 ? void 0 : _d.formatRewardPrettyValue,
-      };
-    }
-    return {
-      value: fallback,
-      statvalue: "...",
-    };
-  });
-};
-const rewardsAssignedQuery = (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 {
-                prettyAssignedCredit
-              }
-            }
-          }
-        }
-      }
-    `, {
-    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 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.prettyExpiredCredit) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyExpiredCredit) || 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.prettyCancelledCredit) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyCancelledCredit) || fallback,
-    };
-  });
-};
-const rewardsAvailableQuery = (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 {
-                prettyAvailableValue
-              }
-            }
-          }
-        }
-      }
-    `, {
-    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.prettyAvailableValue) || 0,
-      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
-    };
-  });
-};
-const parseRewardValueFormat = {
-  prettyValue: "UNIT_FORMATTED",
-  value: "NUMBER_UNFORMATTED",
-};
-const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
-  var _a;
-  const formatType = (_a = parseRewardValueFormat[format]) !== null && _a !== void 0 ? _a : "UNIT_FORMATTED";
-  return debugQuery(index_module.dist.gql `
-      query (
-        $programId: ID
-        $type: RewardType!
-        $unit: String!
-        $locale: RSLocale
-        $format: RewardValueFormatType!
-      ) {
-        fallback: formatRewardPrettyValue(
-          value: 0
-          unit: $unit
-          locale: $locale
-          formatType: $format
-        )
-        viewer: viewer {
-          ... on User {
-            rewardBalanceDetails(
-              programId: $programId
-              filter: { type_eq: $type, unit_eq: $unit }
-              locale: $locale
-            ) {
-              ... on CreditRewardBalance {
-                totalAssignedCredit
-                totalPendingCredit
-              }
-            }
-          }
-        }
-      }
-    `, {
-    programId: !global && programId !== "classic" ? programId : null,
-    type,
-    unit,
-    locale,
-    format: formatType,
-  }, (res) => {
-    var _a, _b, _c, _d;
-    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;
-    const balance = arr === null || arr === void 0 ? void 0 : arr[0];
-    const totalEarned = balance
-      ? (balance.totalAssignedCredit || 0) +
-        (balance.totalPendingCredit || 0)
-      : 0;
-    const result = index_module.wn(index_module.dist.gql `
-          query (
-            $value: Int!
-            $unit: String!
-            $locale: RSLocale
-            $format: RewardValueFormatType!
-          ) {
-            formatRewardPrettyValue(
-              value: $value
-              unit: $unit
-              locale: $locale
-              formatType: $format
-            )
-          }
-        `, {
-      value: totalEarned,
-      unit,
-      locale,
-      format: formatType,
-    }, res.loading);
-    return {
-      value: totalEarned,
-      statvalue: ((_d = result === null || result === void 0 ? void 0 : result.data) === null || _d === void 0 ? void 0 : _d.formatRewardPrettyValue) || fallback,
-    };
-  });
-};
-const trafficQuery = () => {
-  return debugQuery(index_module.dist.gql `
-      query traffic {
-        viewer: viewer {
-          ... on User {
-            stats {
-              traffic
-            }
-          }
-        }
-      }
-    `, {}, (res) => {
-    var _a, _b, _c;
-    const traffic = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.stats) === null || _c === void 0 ? void 0 : _c.traffic;
-    const fallback = 0;
-    return {
-      value: traffic || fallback,
-      statvalue: traffic || fallback,
-    };
-  });
-};
-const userStatsQuery = (_programId, _locale, statId) => {
-  const statArg = {
-    [statId]: true,
-  };
-  const variables = {
-    traffic: false,
-    referrals: false,
-    conversions: false,
-    goals: false,
-    rewards: false,
-    widgetLoads: false,
-    revenue: false,
-    generatedRevenue: false,
-    referredRevenue: false,
-    ...statArg,
-  };
-  return debugQuery(index_module.dist.gql `
-      query userStat(
-        $traffic: Boolean!
-        $referrals: Boolean!
-        $conversions: Boolean!
-        $goals: Boolean!
-        $rewards: Boolean!
-        $widgetLoads: Boolean!
-        $revenue: Boolean!
-        $generatedRevenue: Boolean!
-        $referredRevenue: Boolean!
-      ) {
-        viewer: viewer {
-          ... on User {
-            stats {
-              traffic @include(if: $traffic)
-              referrals @include(if: $referrals)
-              conversions @include(if: $conversions)
-              goals @include(if: $goals)
-              rewards @include(if: $rewards)
-              widgetLoads @include(if: $widgetLoads)
-              revenue @include(if: $revenue)
-              generatedRevenue @include(if: $generatedRevenue)
-              referredRevenue @include(if: $referredRevenue)
-            }
-          }
-        }
-      }
-    `, { ...variables }, (res) => {
-    var _a, _b, _c;
-    const stat = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.stats) === null || _c === void 0 ? void 0 : _c[statId];
-    const fallback = 0;
-    return {
-      value: stat || fallback,
-      statvalue: stat || fallback,
-    };
-  });
-};
-const payoutBalanceQuery = () => {
-  return debugQuery(index_module.dist.gql `
-      query payoutBalance {
-        viewer: viewer {
-          ... on User {
-            id
-            impactConnection {
-              publisher {
-                payoutsAccount {
-                  balance
-                }
-              }
-            }
-          }
-        }
-      }
-    `, {}, (res) => {
-    var _a, _b, _c, _d;
-    const fallback = 0;
-    const balance = (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount) === null || _d === void 0 ? void 0 : _d.balance;
-    const balanceText = `${balance || fallback}`;
-    return {
-      value: balance || fallback,
-      statvalue: balanceText,
-    };
-  });
-};
-// functions are of the form (programId: string, ...args: string) => string
-const queries = {
-  rewardsAssigned: {
-    label: "Rewards Earned",
-    query: rewardsAssignedQuery,
-  },
-  rewardsPending: {
-    label: "Rewards Pending",
-    query: rewardsPendingQuery,
-  },
-  rewardsExpired: {
-    label: "Rewards Expired",
-    query: rewardsExpiredQuery,
-  },
-  rewardsCancelled: {
-    label: "Rewards Cancelled",
-    query: rewardsCancelledQuery,
-  },
-  rewardsRedeemed: {
-    label: "Rewards Paid",
-    query: rewardsRedeemedQuery,
-  },
-  rewardsRedeemedMonth: {
-    label: "Rewards Paid - This Month",
-    query: rewardsRedeemedMonthQuery,
-  },
-  rewardsRedeemedWeek: {
-    label: "Rewards Paid - This Week",
-    query: rewardsRedeemedWeekQuery,
-  },
-  rewardsAvailable: {
-    label: "Rewards Available",
-    query: rewardsAvailableQuery,
-  },
-  referralsCount: {
-    label: "Referrals - Count",
-    query: referralsCountQuery,
-  },
-  referralsMonth: {
-    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,
-  },
-};
-// ! 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,
-    },
-    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",
-  };
-}
-
-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$2 = {
-  Description: {
-    "& .icon": {
-      color: "var(--sqm-text)",
-      "&:hover": {
-        color: "var(--sqm-accent-color-icon)",
-      },
-    },
-    "& input[type=checkbox]": {
-      display: "none",
-    },
-    "& input:checked ~ .details": {
-      transform: "rotate(-180deg)",
-    },
-    "& .details": {
-      position: "absolute",
-      top: "var(--sl-spacing-medium)",
-      right: "var(--sl-spacing-medium)",
-      color: "var(--sqm-text)",
-      fontSize: "var(--sl-font-size-large)",
-      "& :hover": {
-        color: "var(--sl-color-primary-700)",
-      },
-      transformOrigin: "50% 37%",
-      transition: "transform var(--sl-transition-medium) ease",
-      cursor: "pointer",
-    },
-    "& input:checked ~ .summary": {
-      transition: "all var(--sl-transition-medium) ease",
-      maxHeight: "300px",
-      marginBottom: "var(--sl-spacing-x-large)",
-    },
-    "& input:checked ~ .summary[progress-bar]": {
-      marginBottom: "var(--sl-spacing-xx-large)",
-    },
-    "& .summary": {
-      display: "block",
-      overflow: "hidden",
-      fontSize: "var(--sl-font-size-small)",
-      maxHeight: "0px",
-      transition: "all var(--sl-transition-fast) ease-out",
-      marginBottom: "var(--sl-spacing-medium)",
-    },
-  },
-};
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.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$2),
-    index.h("span", { class: sheet$2.classes.Description },
-      index.h("input", { type: "checkbox", id: "details-" + rid }),
-      index.h("label", { class: "details", htmlFor: "details-" + rid },
-        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))));
-}
-
-const Gift = () => {
-  return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#F2C94C" }),
-    index.h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
-    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: "#EB5757" })));
-};
-const GreyGift = () => {
-  return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#C9C9C9" }),
-    index.h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#C9C9C9" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#A5A3A3" }),
-    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$3 = {
-  ProgressBar: {
-    "& .progress-bar": {
-      height: "0",
-      marginTop: "var(--sl-spacing-large)",
-      marginBottom: "var(--sl-spacing-xxx-large)",
-      marginRight: "var(--sl-spacing-x-small)",
-      fontSize: "var(--sl-font-size-x-small)",
-      display: "grid",
-      lineHeight: "45px",
-      userSelect: "none",
-    },
-    "& .progress-bar.repeatable-steps": {
-      marginLeft: "var(--sl-spacing-x-small)",
-    },
-    "&[data-steps]": {
-      marginTop: "calc(-1*var(--sl-spacing-x-small))",
-    },
-    "&[data-steps]  .progress-bar": {
-      marginTop: "var(--sl-spacing-medium)",
-    },
-    "&[data-expired]  .progress::after": {
-      backgroundColor: "#bfbfbf",
-    },
-    "&[data-expired]  .filled::after": {
-      backgroundColor: "#bfbfbf",
-    },
-    "&[data-complete] .filled::after .progress::after": {
-      backgroundColor: "var(--sl-color-primary-200)",
-    },
-    "& .gift": {
-      textAlign: "center",
-      marginLeft: "-100px",
-      marginRight: "-100px",
-      position: "relative",
-      top: "-18px",
-    },
-    "& .gift.start": {
-      transform: "scale(80%)",
-      top: "-20px",
-    },
-    "& .filled:after": {
-      content: '""',
-      display: "flex",
-      width: "100%",
-      height: "4px",
-      borderRadius: "4px",
-      backgroundColor: "var(--sqm-accent-color-icon)",
-      background: "red",
-    },
-    "& .progress": {
-      display: "block",
-      textAlign: "center",
-      marginLeft: "-100px",
-      marginRight: "-100px",
-    },
-    "& .progress::after": {
-      content: '""',
-      width: "12px",
-      height: "12px",
-      display: "flex",
-      backgroundColor: "var(--sqm-accent-color-icon)",
-      borderRadius: "50%",
-      position: "relative",
-      left: "47%",
-      top: "-85%",
-    },
-    "& .progress.bg:after": {
-      width: "0",
-      height: "0",
-      border: "none",
-    },
-    "& .progress.top": {
-      position: "relative",
-      top: "-40px",
-    },
-    "& .progress.top:after": {
-      top: "-16%",
-    },
-    "& .empty": {
-      display: "block",
-      textAlign: "center",
-      marginLeft: "-100px",
-      marginRight: "-100px",
-    },
-    "& .empty::after": {
-      content: '""',
-      width: "12px",
-      height: "12px",
-      border: "2px solid #E0E0E0",
-      margin: "-2px",
-      display: "flex",
-      backgroundColor: "white",
-      borderRadius: "50%",
-      position: "relative",
-      left: "47%",
-      top: "-85%",
-    },
-    "& .empty.bg:after": {
-      width: "0",
-      height: "0",
-      border: "none",
-    },
-    "& .remain:after": {
-      content: '""',
-      display: "flex",
-      width: "100%",
-      height: "4px",
-      borderRadius: "4px",
-      backgroundColor: "#E0E0E0",
-    },
-  },
-};
-const sheet$3 = JSS.createStyleSheet(style$3, { classNamePrefix: "sqm-prog-bar" });
-const styleString$3 = sheet$3.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$3.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$3),
-    index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
-        (Boolean(finite) && progress > 2 * goal)
-        ? "progress-bar repeatable-steps"
-        : "progress-bar", style: {
-        gridTemplateColumns: columns,
-        marginLeft: progress === 0 && !steps ? "var(--sl-spacing-x-small)" : "",
-      } }, items)));
-}
-function buildProgressBar(repeatable, steps, props) {
-  if (repeatable) {
-    if (steps) {
-      return addStepsRepeatable(props);
-    }
-    else {
-      return addLinearRepeatable(props);
-    }
-  }
-  // non repeatable
-  else {
-    if (steps) {
-      return addSteps(props);
-    }
-    else {
-      return addLinear(props);
-    }
-  }
-}
-function addSteps({ progress, goal, expired }) {
-  const items = [];
-  const columns = [];
-  let ratio = 1 / goal;
-  for (let i = 1; i < goal; i++) {
-    columns.push(ratio + "fr");
-    columns.push("0fr");
-    if (i > progress) {
-      items.push(index.h("div", { class: "remain" }));
-      items.push(index.h("div", { class: "empty" }, i));
-    }
-    else {
-      items.push(index.h("div", { class: "filled" }));
-      items.push(index.h("div", { class: "progress" }, i));
-    }
-  }
-  columns.push(ratio + "fr");
-  columns.push("0fr");
-  // reward success
-  if (goal <= progress) {
-    columns.push("0fr");
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: "progress bg" }, goal));
-    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-  }
-  // reward fail
-  else {
-    columns.push("0fr");
-    items.push(index.h("div", { class: "remain" }));
-    items.push(index.h("div", { class: "empty bg" }, goal));
-    items.push(index.h("div", { class: "gift" },
-      index.h(GreyGift, null)));
-  }
-  return {
-    items,
-    columns: columns.join(" "),
-  };
-}
-function addLinearRepeatable({ progress, goal, progressBarUnit, finite, expired, }) {
-  let repetitions = Math.floor(progress / goal);
-  let ratio = ((progress % goal) / goal) * 0.5;
-  const items = [];
-  let columns = "";
-  // 0 repetition
-  if (repetitions == 0) {
-    columns = ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr 0.5fr 0fr 0fr";
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
-    items.push(index.h("div", { class: "remain" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(index.h("div", { class: "gift" }, progress == goal ? expired ? index.h(GreyGift, null) : index.h(Gift, null) : index.h(GreyGift, null)));
-    items.push(index.h("div", { class: "remain" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
-  }
-  // single repetition
-  else if (repetitions == 1) {
-    columns =
-      "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
-    items.push(index.h("div", { class: "remain" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
-  }
-  // finite repetition hit
-  else if (finite && repetitions >= finite) {
-    if (repetitions > 2) {
-      items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
-      items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-      columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
-    }
-    else {
-      columns = "0.5fr 0fr 0fr 0.5fr 0fr 0fr";
-    }
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
-    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
-    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-  }
-  // multiple repetitions
-  else {
-    columns =
-      "0fr 0fr 0.5fr 0fr 0fr " +
-        ratio +
-        "fr 0fr " +
-        (0.5 - ratio) +
-        "fr 0fr 0fr";
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-    items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-    items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
-    items.push(index.h("div", { class: "remain" }));
-    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-    items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
-  }
-  return { items, columns };
-}
-function addStepsRepeatable({ progress, goal, finite, expired, }) {
-  const items = [];
-  const columns = [];
-  let repetitions = Math.floor(progress / goal);
-  // no or single repetition
-  if (repetitions < 2) {
-    let ratio = 1 / goal;
-    for (let i = 1; i < goal * 2 + 1; i++) {
-      columns.push(ratio + "fr");
-      columns.push("0fr");
-      if (i > progress) {
-        if (i == goal) {
-          columns.push("0fr");
-          items.push(index.h("div", { class: "remain" }));
-          items.push(index.h("div", { class: "empty bg" }, goal));
-          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
-        }
-        else if (i == goal * 2) {
-          columns.push("0fr");
-          columns.push("0fr");
-          items.push(index.h("div", { class: "remain" }));
-          items.push(index.h("div", { class: "empty bg" }, goal * 2));
-          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
-        }
-        else {
-          items.push(index.h("div", { class: "remain" }));
-          items.push(index.h("div", { class: "empty" }, i));
-        }
-      }
-      else if (i == goal) {
-        columns.push("0fr");
-        items.push(index.h("div", { class: "filled" }));
-        items.push(index.h("div", { class: "progress bg" }, i));
-        items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-      }
-      else {
-        items.push(index.h("div", { class: "filled" }));
-        items.push(index.h("div", { class: "progress" }, i));
-      }
-    }
-  }
-  // finite repetition hit
-  else if (finite && repetitions >= finite) {
-    let ratio = 1 / goal;
-    if (repetitions > 2) {
-      columns.push("0fr");
-      columns.push("0fr");
-      items.push(index.h("div", { class: "progress bg" }, goal * (finite - 2)));
-      items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-    }
-    for (let i = 1; i < goal * 2 + 1; i++) {
-      columns.push(ratio + "fr");
-      columns.push("0fr");
-      if (i > progress) {
-        if (i == goal) {
-          columns.push("0fr");
-          items.push(index.h("div", { class: "remain" }));
-          items.push(index.h("div", { class: "progress bg" }, goal * (finite - 1)));
-          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
-        }
-      }
-      else if (i == goal) {
-        columns.push("0fr");
-        items.push(index.h("div", { class: "filled" }));
-        items.push(index.h("div", { class: "progress bg" }, goal * (finite - 1)));
-        items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-      }
-      else if (i == goal * 2) {
-        columns.push("0fr");
-        columns.push("0fr");
-        items.push(index.h("div", { class: "filled" }));
-        items.push(index.h("div", { class: "progress bg" }, goal * finite));
-        items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-      }
-      else {
-        items.push(index.h("div", { class: "filled" }));
-        items.push(index.h("div", { class: "progress" }, i + goal * (finite - 2)));
-      }
-    }
-  }
-  // case repetition many
-  else {
-    let position = (progress % goal) + goal;
-    let ratio = 1 / goal;
-    columns.push("0fr");
-    columns.push("0fr");
-    items.push(index.h("div", { class: "progress bg" }, goal * (repetitions - 1)));
-    items.push(index.h("div", { class: "gift start" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-    for (let i = 1; i < goal * 2 + 1; i++) {
-      columns.push(ratio + "fr");
-      columns.push("0fr");
-      if (i <= goal) {
-        if (i == goal) {
-          columns.push("0fr");
-          items.push(index.h("div", { class: "filled" }));
-          items.push(index.h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-          items.push(index.h("div", { class: "gift" }, expired ? index.h(GreyGift, null) : index.h(Gift, null)));
-        }
-        else {
-          items.push(index.h("div", { class: "filled" }));
-          items.push(index.h("div", { class: "progress" }, i + goal * (repetitions - 1)));
-        }
-      }
-      else if (i > position) {
-        if (i == goal * 2) {
-          columns.push("0fr");
-          columns.push("0fr");
-          items.push(index.h("div", { class: "remain" }));
-          items.push(index.h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-          items.push(index.h("div", { class: "gift" }, index.h(GreyGift, null)));
-        }
-        else {
-          items.push(index.h("div", { class: "remain" }));
-          items.push(index.h("div", { class: "empty" }, i + goal * (repetitions - 1)));
-        }
-      }
-      else {
-        items.push(index.h("div", { class: "filled" }));
-        items.push(index.h("div", { class: "progress" }, i + goal * (repetitions - 1)));
-      }
-    }
-  }
-  return { items, columns: columns.join(" ") };
-}
-function addLinear({ progress, goal, progressBarUnit, expired, }) {
-  const items = [];
-  let columns = "";
-  const ratio = progress / goal;
-  columns =
-    clamp(ratio, 0, 1) + "fr 0fr " + clamp(1 - ratio, 0, 1) + "fr 0fr 0fr";
-  items.push(index.h("div", { class: "filled" }));
-  items.push(index.h("div", { class: clamp(progress, 0, goal) == goal ? "progress top bg" : "progress top" }, clamp(progress, 0, goal) == goal
-    ? ""
-    : progressBarUnit + clamp(progress, 0, goal)));
-  items.push(index.h("div", { class: "remain" }));
-  items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
-  items.push(index.h("div", { class: "gift" }, clamp(progress, 0, goal) == goal ? (expired ? (index.h(GreyGift, null)) : (index.h(Gift, null))) : (index.h(GreyGift, null))));
-  return { items, columns };
-}
-function clamp(x, min, max) {
-  return Math.min(Math.max(x, min), max);
-}
-
-const checkmark_circle = () => {
-  return (index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.81818 10C1.81818 5.48131 5.48131 1.81818 10 1.81818C14.5187 1.81818 18.1818 5.48131 18.1818 10C18.1818 14.5187 14.5187 18.1818 10 18.1818C5.48131 18.1818 1.81818 14.5187 1.81818 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM15.7692 6.96189C16.1398 6.48683 16.0551 5.80132 15.58 5.43077C15.1049 5.06022 14.4194 5.14495 14.0489 5.62001L8.72994 12.4391L5.86229 9.5715C5.43627 9.14548 4.74554 9.14548 4.31952 9.5715C3.89349 9.99752 3.89349 10.6882 4.31952 11.1143L8.05976 14.8545C8.28083 15.0756 8.58613 15.1912 8.89818 15.172C9.21023 15.1528 9.49905 15.0006 9.69133 14.7541L15.7692 6.96189Z", fill: "currentColor" })));
-};
-const checkmark_filled = () => {
-  return (index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.65 6.19231C15.0459 6.5011 15.1165 7.07236 14.8077 7.46825L9.74277 13.9617C9.58254 14.1672 9.34186 14.294 9.08182 14.31C8.82178 14.326 8.56736 14.2297 8.38314 14.0454L5.26627 10.9286C4.91124 10.5735 4.91124 9.99794 5.26627 9.64292C5.62129 9.2879 6.19689 9.2879 6.55191 9.64292L8.94162 12.0326L13.3741 6.35001C13.6828 5.95412 14.2541 5.88352 14.65 6.19231Z", fill: "white" })));
-};
-const arrow_left_right = () => {
-  return (index.h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
-};
-
-function TaskCardView(props) {
-  var _a, _b;
-  const { callbacks, states, content } = props;
-  const style = {
-    TaskCard: {
-      display: "inline-block",
-      width: "100%",
-      "& .main": {
-        position: "relative",
-        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.4)",
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-      "& .main.complete": {
-        opacity: "0.8",
-        borderColor: "var(--sqm-accent-color-border)",
-      },
-      "& .main.expired": {
-        color: content.textColor || "var(--sqm-text)",
-        opacity: "0.8",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-medium)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-      "& .container": {
-        margin: "var(--sl-spacing-medium)",
-      },
-      "& .container.subdued": {
-        opacity: "0.45",
-      },
-      "& .container > div": {
-        margin: "var(--sl-spacing-medium) 0",
-      },
-    },
-    NotStarted: {
-      fontSize: "var(--sl-font-size-small)",
-      padding: "var(--sl-spacing-medium)",
-      color: content.textColor || "var(--sqm-primary-color)",
-      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)",
-      lineHeight: "var(--sl-line-height-dense)",
-      "& .icon": {
-        position: "relative",
-        top: "0.1em",
-        marginRight: "var(--sl-spacing-small)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-    },
-    Ended: {
-      fontSize: "var(--sl-font-size-small)",
-      padding: "var(--sl-spacing-medium)",
-      color: content.textColor || "var(--sqm-warning-color-text)",
-      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(--sqm-warning-color-background)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-      lineHeight: "var(--sl-line-height-dense)",
-      "& .icon": {
-        position: "relative",
-        top: "0.1em",
-        marginRight: "var(--sl-spacing-small)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-    },
-    Header: {
-      display: "flex",
-      "& .icon": {
-        position: "relative",
-        top: "5%",
-        alignSelf: "center",
-        lineHeight: "0",
-        color: "var(--sqm-accent-color-icon)",
-        fontSize: "var(--sl-font-size-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-      },
-      "& .value": {
-        alignSelf: "center",
-        fontSize: "var(--sl-font-size-x-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: content.textColor || "var(--sqm-text)",
-        lineHeight: "100%",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        alignSelf: "end",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-x-small)",
-        color: content.textColor || "var(--sqm-text)",
-        lineHeight: "var(--sl-font-size-medium)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .end": {
-        color: content.textColor || "var(--sqm-warning-color-text)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        marginBottom: "var(--sl-spacing-xx-small)",
-      },
-      "& .neutral": {
-        color: content.textColor || "var(--sl-color-neutral-400)",
-      },
-    },
-    Footer: {
-      "&[data-subdue] .success": {
-        color: content.textColor || "var(--sqm-accent-color-text)",
-      },
-      "&[data-subdue] .neutral": {
-        color: content.textColor || "var(--sqm-text)",
-      },
-      display: "flex",
-      "& .icon": {
-        fontSize: "var(--sl-font-size-xx-small)",
-        marginRight: "var(--sl-spacing-xx-small)",
-        verticalAlign: "middle",
-      },
-      "& .text": {
-        marginTop: "auto",
-        verticalAlign: "text-bottom",
-        fontSize: "var(--sl-font-size-x-small)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-      "& .success": {
-        color: content.textColor || "var(--sqm-text)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .neutral": {
-        color: content.textColor || "var(--sqm-text)",
-      },
-      "& .datetime": {
-        display: "block",
-        marginTop: "var(--sl-spacing-xx-small)",
-      },
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const contentString = sheet.toString();
-  const dateStart = content.rewardDuration &&
-    luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
-  const dateEnd = content.rewardDuration &&
-    luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[1]);
-  const dateToday = luxon.luxon.DateTime.now();
-  if (content.displayDuration) {
-    const start = (_a = content.displayDuration.split("/")) === null || _a === void 0 ? void 0 : _a[0];
-    const end = (_b = content.displayDuration.split("/")) === null || _b === void 0 ? void 0 : _b[1];
-    const displayDateStart = start ? luxon.luxon.DateTime.fromISO(start) : dateToday;
-    const displayDateEnd = end ? luxon.luxon.DateTime.fromISO(end) : dateToday;
-    if (dateToday < displayDateStart || dateToday > displayDateEnd)
-      return index.h("span", null);
-  }
-  const checkmark_circle$1 = checkmark_circle();
-  const checkmark_filled$1 = checkmark_filled();
-  const arrow_left_right$1 = arrow_left_right();
-  const showComplete = states.progress >= content.goal;
-  const repetitions = content.showProgressBar
-    ? Math.floor(states.progress / content.goal)
-    : states.progress;
-  const taskComplete = (showComplete && content.repeatable === false) ||
-    (content.finite && states.progress >= content.finite * content.goal);
-  const taskEnded = content.rewardDuration && dateEnd <= dateToday;
-  const taskNotStarted = content.rewardDuration && dateToday <= dateStart;
-  const taskUnavailable = taskEnded || taskNotStarted;
-  const vanillaStyle = `
-	:host{
-		display: block;
-		margin-bottom: var(--sl-spacing-large);
-	}
-
-  `;
-  return (index.h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      contentString,
-      vanillaStyle),
-    !states.loading && taskNotStarted && (index.h("div", { class: sheet.classes.NotStarted },
-      index.h("span", { class: "icon" },
-        index.h("sl-icon", { name: "info-circle-fill" })),
-      global.intl.formatMessage({
-        id: "startsOnMessage",
-        defaultMessage: content.startsOnMessage,
-      }, {
-        startDate: dateStart
-          .setLocale(utils.luxonLocale(states.locale))
-          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
-      }))),
-    !states.loading && taskEnded && (index.h("div", { class: sheet.classes.Ended },
-      index.h("span", { class: "icon" },
-        index.h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
-      global.intl.formatMessage({
-        id: "endedMessage",
-        defaultMessage: content.endedMessage,
-      }, {
-        endDate: dateEnd
-          .setLocale(utils.luxonLocale(states.locale))
-          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
-      }))),
-    index.h("div", { part: "sqm-style-container", style: {
-        borderRadius: taskUnavailable &&
-          "0 0 var(--sqm-border-radius-normal) var(--sqm-border-radius-normal)",
-      }, class: taskUnavailable
-        ? "main expired"
-        : taskComplete
-          ? "main complete"
-          : "main" },
-      index.h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        index.h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
-          showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
-          index.h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
-          index.h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
-        states.loading ? (index.h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: "title", part: "sqm-title", style: {
-            marginBottom: !content.description
-              ? content.steps
-                ? "var(--sl-spacing-x-large)"
-                : content.showProgressBar
-                  ? "var(--sl-spacing-xx-large)"
-                  : ""
-              : "",
-            opacity: taskComplete || taskUnavailable ? "0.45" : "1",
-          } }, content.cardTitle)),
-        states.loading ? (index.h("sqm-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("sqm-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("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
-          index.h("span", { class: "text" },
-            content.repeatable && (index.h("div", null,
-              index.h("span", { class: repetitions > 0
-                  ? taskUnavailable
-                    ? "icon neutral"
-                    : "icon success"
-                  : "icon neutral", "data-subdue": taskComplete || taskUnavailable }, arrow_left_right$1),
-              index.h("span", { class: repetitions > 0
-                  ? taskUnavailable
-                    ? "neutral"
-                    : "success"
-                  : "neutral", "data-subdue": taskComplete || taskUnavailable }, global.intl.formatMessage({
-                id: "completedMessage",
-                defaultMessage: content.completedText,
-              }, {
-                finite: content.finite,
-                count: content.finite
-                  ? Math.min(repetitions, content.finite)
-                  : repetitions,
-              })))),
-            dateEnd && !taskUnavailable && (index.h("span", { class: "datetime neutral", "data-subdue": taskComplete || taskUnavailable }, global.intl.formatMessage({
-              id: "expiryMessage",
-              defaultMessage: content.expiryMessage,
-            }, {
-              endDate: dateEnd
-                .setLocale(utils.luxonLocale(states.locale))
-                .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
-            })))),
-          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)))))))));
-}
-
-const style$4 = {
-  ErrorStyle: {
-    "&::part(control)": {
-      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;
-}
-sl-checkbox[checked]::part(control){
-  background-color: var(--sqm-input-border-color-focus);
-}
-
-sl-checkbox[checked]::part(checked-icon){
-  color: var(--sqm-input-background);
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet$4 = JSS.jss.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
-function CheckboxFieldView(props) {
-  var _a, _b, _c, _d, _e;
-  const { states, content, callbacks } = 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$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), validationError: ({ value }) => {
-        if (!value && !content.checkboxOptional) {
-          return content.errorMessage;
-        }
-      } }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
-      class: sheet$4.classes.ErrorStyle,
-    }
-      : [])), global.intl.formatMessage({
-      id: content.checkboxName + "-message",
-      defaultMessage: content.checkboxLabel,
-    }, {
-      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    })),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$4.classes.ErrorMessageStyle }, content.errorMessage))));
-}
-
-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{
-    display: block;   
-    width: 100%;
-  }
-`;
-  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-medium)",
-  },
-};
-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", { loading: states.loading, 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)))));
-  }
-  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 = {
-    Leaderboard: {
-      "& table": {
-        width: "100%",
-        borderCollapse: "collapse",
-        background: styles.background || "transparent",
-        borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : "0",
-      },
-      "& 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: `var(--sqm-border-thickness) solid ${styles.borderColor || "var(--sqm-border-color)"}`,
-      },
-      "& 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();
-  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(5)].map(() => {
-        return (index.h("tr", null,
-          index.h("td", null,
-            index.h("sqm-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"))))));
-}
-
-const paddingList = [
-  "var(--sl-spacing-xxx-small)",
-  "var(--sl-spacing-xx-small)",
-  "var(--sl-spacing-x-small)",
-  "var(--sl-spacing-small)",
-  "var(--sl-spacing-medium)",
-  "var(--sl-spacing-large)",
-  "var(--sl-spacing-x-large)",
-  "var(--sl-spacing-xx-large)",
-  "var(--sl-spacing-xxx-large)",
-  "var(--sl-spacing-xxxx-large)",
-];
-const parseBackground = (provided_bg) => {
-  if (provided_bg) {
-    if (utilities.isValidColor(provided_bg)) {
-      return provided_bg;
-    }
-    else {
-      return `url(${imageUrl$1.optimizeCloudinaryUrl(provided_bg)})`;
-    }
-  }
-  else {
-    return "var(--sqm-portal-background)";
-  }
-};
-function HeroView(props) {
-  const { states, content } = props;
-  const { secondaryBackground = "var(--sqm-portal-background)" } = states;
-  const getVertivalPadding = (size, half) => {
-    const sizes = {
-      small: 7,
-      medium: 8,
-      large: 9,
-    };
-    var index = sizes[size];
-    if (utilities.isMobile(650)) {
-      index = index - 2;
-    }
-    else if (utilities.isMobile(767)) {
-      index = index - 1;
-    }
-    return half ? paddingList[index - 2] : paddingList[index];
-  };
-  const getHorizontalPadding = (size) => {
-    if (size == "small") {
-      return "1%";
-    }
-    else if (size == "medium") {
-      return "3%";
-    }
-    else {
-      return "5%";
-    }
-  };
-  // Dependent on props, not feasiable to move out
-  const style = {
-    TwoColumnContainer: {
-      display: "flex",
-      "@media screen and (max-width: 650px)": {
-        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
-        justfiyContent: "center",
-      },
-    },
-    ColumnPadding: {
-      paddingTop: states.paddingSize == "none"
-        ? "0px"
-        : getVertivalPadding(states.paddingSize),
-      paddingBottom: states.paddingSize == "none"
-        ? "0px"
-        : getVertivalPadding(states.paddingSize),
-      paddingLeft: states.paddingSize == "none"
-        ? "0px"
-        : getHorizontalPadding(states.paddingSize),
-      paddingRight: states.paddingSize == "none"
-        ? "0px"
-        : getHorizontalPadding(states.paddingSize),
-    },
-    ColumnWrapper: {
-      "&:first-of-type": {
-        background: `no-repeat center/cover ${parseBackground(states.background)}`,
-      },
-      "&:last-of-type": {
-        background: `no-repeat center/cover ${parseBackground(secondaryBackground)}`,
-      },
-      "@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`,
-    },
-    Container: {
-      width: "100%",
-      maxWidth: "var(--sqm-max-width)",
-      margin: "0 auto",
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      minHeight: "100%",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{    
-    height: 100%;
-    display: contents;
-  }
-  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} ${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,
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle$3 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet$6 = JSS.jss.createStyleSheet(style$6);
-const styleString$6 = sheet$6.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$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: `/${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$6.classes.ErrorStyle,
-      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: mixins.ErrorStyles,
-  FieldsContainer: {
-    "& sl-input": {
-      "margin-bottom": "var(--sl-spacing-large)",
-    },
-  },
-};
-const vanillaStyle$4 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-*::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); 
-}
-
-`;
-const sheet$7 = JSS.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
-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.FieldsContainer },
-    index.h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$7),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: !states.optional, 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$7.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: !states.optional, 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",
-    }
-      : [])))));
-}
-
-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;
-  }
-`;
-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),
-    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" },
-  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.58.23c.475.371.56 1.057.19 1.532L5.69 9.554a1.091 1.091 0 0 1-1.631.1L.32 5.915a1.09 1.09 0 1 1 1.542-1.542L4.73 7.239 10.049.42A1.09 1.09 0 0 1 11.58.23Z", fill: "#fff" })));
-const CheckmarkFilled = () => (index.h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  index.h("path", { d: "M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z", fill: "currentColor" }),
-  index.h("path", { d: "M5.68394 8.77046C5.28103 8.39273 4.64819 8.41315 4.27046 8.81606C3.89273 9.21897 3.91315 9.85181 4.31606 10.2295L5.68394 8.77046ZM7.66667 12L6.98273 12.7295C7.36738 13.0902 7.96595 13.0902 8.35061 12.7295L7.66667 12ZM13.6839 7.72954C14.0869 7.35181 14.1073 6.71897 13.7295 6.31606C13.3518 5.91315 12.719 5.89273 12.3161 6.27046L13.6839 7.72954ZM4.31606 10.2295L6.98273 12.7295L8.35061 11.2705L5.68394 8.77046L4.31606 10.2295ZM8.35061 12.7295L13.6839 7.72954L12.3161 6.27046L6.98273 11.2705L8.35061 12.7295Z", fill: "white" })));
-const Gift$1 = () => (index.h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  index.h("path", { d: "M40.18 126h83.663a3 3 0 0 0 3-3V73.966a3 3 0 0 0-3-3H40.18a3 3 0 0 0-3 3V123a3 3 0 0 0 3 3Z", fill: "#FFD34F" }),
-  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
-  index.h("path", { d: "M133.039 74.224a2.18 2.18 0 0 0 2.187-2.172v-19.19c0-1.2-.98-2.172-2.187-2.172H31.347a2.18 2.18 0 0 0-2.187 2.172v19.19c0 1.2.98 2.172 2.187 2.172H133.04Z", fill: "#FFC000" }),
-  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M123.287 35.172c0 6.056-9.155 15.226-13.76 15.654H88.888V126H75.141V50.826H58.534c-9.462-2.038-17.803-9.258-17.803-16.944 0-7.49 3.274-13.422 9.23-15.983 5.693-2.446 12.265-1.105 17.46 2.479 6.378 4.398 9.956 12.654 13.202 20.144.284.657.567 1.308.848 1.95.274-.608.55-1.228.83-1.856 3.216-7.22 6.887-15.464 13.057-19.89 5.454-3.913 12.387-5.39 18.38-2.711 6.197 2.77 9.549 9.127 9.549 17.157Zm-23.306-8.266c3.305-2.37 7.262-2.8 10.645 0 2.946 2.44 3.103 3.588 3.482 6.351l.067.483c0 4.09-3.549 10.252-7.097 10.252-2.515 0-4.489-.022-6.34-.041-3.375-.036-6.337-.068-11.403.04.966-1.86 1.737-3.644 2.473-5.346 1.967-4.553 3.678-8.515 8.173-11.739Zm-39.034 0c-1.6-1.103-5.268-.61-6.79.043-1.257.54-3.134 2.19-3.134 6.933 0 4.61 7.511 8.59 7.511 8.59s5.962 1.52 16.607 1.52c-3.624-8.922-8.757-13.336-14.194-17.086Z", fill: "#EB5757" }),
-  index.h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
-  index.h("g", { filter: "url(#a)" },
-    index.h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
-  index.h("path", { d: "M150.446 79.134a.5.5 0 0 1 .9 0l1.133 2.336c.05.102.132.184.234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.503.503 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.499.499 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.343-1.122a.499.499 0 0 0 .234-.233l1.134-2.336Z", fill: "#FAB6B6" }),
-  index.h("path", { d: "M14.86 29.168a.5.5 0 0 1 .9 0l1.133 2.336a.5.5 0 0 0 .234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.5.5 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.5.5 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.344-1.122a.5.5 0 0 0 .233-.233l1.134-2.336Z", fill: "#F4EFBC" }),
-  index.h("path", { d: "m125.382 0 .712 1.466 1.475.706-1.475.707-.712 1.466-.711-1.466-1.476-.707 1.476-.706.711-1.466Z", fill: "#FDA802" }),
-  index.h("path", { d: "m2.187 103.552.711 1.466 1.476.706-1.476.707-.711 1.466-.711-1.466L0 105.724l1.476-.706.71-1.466Z", fill: "#E4599C" }),
-  index.h("defs", null,
-    index.h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
-      index.h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
-      index.h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
-      index.h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));
-
-function Dot({ active, completed, incomplete, stage, }) {
-  return (index.h("div", { style: {
-      display: "flex",
-    } },
-    index.h("div", { style: {
-        backgroundColor: completed
-          ? "var(--sqm-success-color-icon)"
-          : incomplete
-            ? "var(--sqm-border-color)"
-            : "white",
-        border: active
-          ? "1px solid var(--sqm-success-color-border)"
-          : incomplete
-            ? "1px solid var(--sqm-border-color)"
-            : "1px solid var(--sqm-success-color-border)",
-        borderRadius: "50%",
-        width: "23px",
-        height: "23px",
-        margin: "-11px",
-        zIndex: "1",
-        boxSizing: "content-box",
-      } }, completed ? (index.h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
-      index.h(CheckMark, null))) : (index.h("div", { style: {
-        color: active
-          ? "var(--sqm-success-color-border)"
-          : "var(--sqm-text-subdued)",
-        width: "23px",
-        lineHeight: "24px",
-        textAlign: "center",
-        position: "relative",
-      } }, stage + 1)))));
-}
-function ProgressLine({ incomplete = false, active = false, invisible = false, }) {
-  return (index.h("div", { style: {
-      content: "''",
-      flex: "0.5 0.5 0",
-      height: "4px",
-      borderRadius: "4px",
-      background: incomplete || active
-        ? "var(--sqm-border-color)"
-        : "var(--sqm-success-color-icon)",
-      position: "relative",
-      bottom: "0",
-      left: "0",
-      display: "flex",
-      justifyContent: "center",
-      columnGap: "50px",
-      marginRight: "-2px",
-      boxSizing: "content-box",
-      opacity: invisible ? "0" : "1",
-    } }));
-}
-function Progress({ active, completed, incomplete, stage }) {
-  return [
-    index.h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
-    index.h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
-    index.h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
-  ];
-}
-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$8 = {
-  HostBlock: mixins.HostBlock,
-  Container: {
-    minWidth: "300px",
-    position: "relative",
-  },
-  FullImage: {
-    objectFit: "contain",
-    maxWidth: "100%",
-    height: "250px",
-    display: "flex",
-    margin: "0 auto",
-  },
-  Select: {
-    "&::part(base)": {
-      borderRadius: "var(--sqm-input-border-radius)",
-    },
-    "&::part(label)": {
-      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",
-      color: "var(--sqm-input-color)",
-    },
-    "& sl-menu-item::part(base):hover": {
-      backgroundColor: "var(--sqm-input-border-color-hover)",
-    },
-    "& sl-menu-item::part(base):focus": {
-      background: "var(--sqm-accent-color-background)",
-    },
-  },
-  ProgressBar: {
-    maxWidth: "350px",
-    width: "100%",
-    margin: "auto",
-    marginBottom: "var(--sl-spacing-xxx-large)",
-    "& .text-area": {
-      marginTop: "5px",
-      display: "flex",
-      justifyContent: "center",
-      textAlign: "center",
-      whiteSpace: "nowrap",
-      marginBottom: "6px",
-      "& .text": {
-        marginBottom: "var(--sl-spacing-x-small)",
-        flex: "1 1 0",
-      },
-      "& .text.subdued": {
-        color: "var(--sqm-text-subdued)",
-      },
-    },
-  },
-  CardLayout: {
-    display: "flex",
-    width: "100%",
-    borderRadius: "3px",
-    background: "rgba(0, 0, 0, 0)",
-  },
-  Card: {
-    display: "flex",
-    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%",
-    },
-    "&::part(body)": {
-      display: "flex",
-      padding: 0,
-    },
-    "& .selected": {
-      borderRadius: "var(--sqm-border-radius-normal)",
-      position: "relative",
-      top: "-2%",
-      left: "100%",
-      color: "var(--sqm-primary-color)",
-      margin: "-9px",
-    },
-  },
-  Title: {
-    fontSize: "var(--sl-font-size-large)",
-    fontWeight: "var(--sl-font-weight-semibold)",
-    margin: "var(--sl-spacing-large) 0",
-  },
-  Image: {
-    padding: "var(--sl-spacing-small)",
-    minWidth: "96px",
-    maxWidth: "96px",
-    "& .image": {
-      width: "100%",
-      height: "100%",
-      objectFit: "contain",
-      borderRadius: "4px",
-    },
-    "& .image.subdued": {
-      filter: "brightness(0.95)",
-      opacity: "0.5",
-    },
-  },
-  TextArea: {
-    textAlign: "left",
-    padding: "var(--sl-spacing-small)",
-    paddingLeft: "0",
-    "& .title": {
-      fontSize: "var(--sl-font-size-medium)",
-      lineHeight: "var(--sl-line-height-dense)",
-      fontWeight: "600",
-      color: "var(--sqm-text)",
-      display: "-webkit-box",
-      "-webkit-line-clamp": "1",
-      "-webkit-box-orient": "vertical",
-      overflow: "hidden",
-    },
-    "& .amount": {
-      fontSize: "var(--sl-font-size-small)",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginTop: "var(--sl-spacing-x-small)",
-      color: "var(--sqm-text-subdued)",
-      display: "-webkit-box",
-      "-webkit-line-clamp": "1",
-      "-webkit-box-orient": "vertical",
-      overflow: "hidden",
-    },
-    "& .error": {
-      fontSize: "var(--sl-font-size-small)",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginTop: "var(--sl-spacing-x-small)",
-      fontWeight: "600",
-      color: "var(--sqm-warning-color-icon)",
-      display: "-webkit-box",
-      "-webkit-line-clamp": "1",
-      "-webkit-box-orient": "vertical",
-      overflow: "hidden",
-      "& .icon": {
-        position: "relative",
-        top: "0.1em",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-    },
-  },
-  ChooseAmount: {
-    maxWidth: "800px",
-    margin: "auto",
-    "& .wrapper": {
-      display: "flex",
-      gap: "var(--sl-spacing-xx-large)",
-      "@media (max-width: 799px)": {
-        flexDirection: "column",
-      },
-    },
-    "& .image": {
-      width: "50%",
-      objectFit: "contain",
-      maxWidth: "100%",
-      height: "250px",
-      display: "flex",
-      "@media (max-width: 799px)": {
-        width: "auto",
-      },
-    },
-    "& .text": {
-      width: "50%",
-      maxWidth: "400px",
-      "@media (max-width: 799px)": {
-        width: "auto",
-        margin: "auto",
-      },
-    },
-    "& .title": {
-      fontSize: "var(--sl-font-size-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sqm-text)",
-    },
-    "& .points": {
-      fontSize: "var(--sl-font-size-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sqm-accent-color-text)",
-    },
-    "& .description": {
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sqm-text-subdued)",
-      margin: "var(--sl-spacing-medium) 0",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginTop: "var(--sl-spacing-xx-small)",
-    },
-    "& .space": {
-      marginBottom: "var(--sl-spacing-xxx-large)",
-    },
-    "& sl-menu-item[disabled]::part(label)": {
-      color: "var(--sqm-text-subdued)",
-    },
-    "& sl-menu-item[disabled]": {
-      "& .step-cost": {
-        color: "var(--sqm-text-subdued)",
-      },
-      "& .step-value": {
-        color: "var(--sqm-text-subdued)",
-      },
-    },
-  },
-  SelectItem: {
-    display: "flex",
-    flexDirection: "column",
-    "&::part(label)": {
-      color: "var(--sqm-text)",
-      margin: "0",
-    },
-    "& .step-cost": {
-      color: "var(--sqm-text-subdued)",
-      marginBottom: "var(--sl-spacing-x-small)",
-    },
-    "& .step-unavailable": {
-      fontSize: "var(--sl-font-size-small)",
-      color: "var(--sqm-warning-color-text)",
-      margin: "0",
-    },
-  },
-  Success: {
-    textAlign: "center",
-    "& .title": {
-      fontSize: "var(--sl-font-size-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sqm-text)",
-    },
-    "& .description": {
-      color: "var(--sqm-text-subued)",
-      maxWidth: "350px",
-      margin: "0 auto",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginBottom: "var(--sl-spacing-xx-large)",
-      marginTop: "var(--sl-spacing-xx-small)",
-    },
-    "& .promo": {
-      maxWidth: "350px",
-      margin: "-30px auto var(--sl-spacing-xxx-large) auto",
-      textAlign: "left",
-      color: "var(--sqm-text-subdued)",
-    },
-  },
-  Grid: {
-    display: "grid",
-    justifyContent: "center",
-    gap: "20px",
-    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-  },
-  Confirmation: {
-    maxWidth: "800px",
-    margin: "auto",
-    "& .wrapper": {
-      display: "flex",
-      "@media (max-width: 499px)": {
-        flexDirection: "column",
-      },
-    },
-    "& .reward-item-container": {
-      "@media (max-width: 499px)": {
-        display: "flex",
-        flexDirection: "row-reverse",
-        justifyContent: "flex-end",
-        alignItems: "center",
-      },
-    },
-    "& .reward-item-container .reward-title": {
-      paddingBottom: "var(--sl-spacing-medium)",
-      lineHeight: "20px",
-      "@media (max-width: 499px)": {
-        paddingBottom: "none",
-        paddingLeft: "var(--sl-spacing-small)",
-      },
-    },
-    "& .padding": {
-      padding: "var(--sl-spacing-medium) 0",
-      "@media (max-width: 499px)": {
-        padding: "var(--sl-spacing-small) 0",
-      },
-    },
-    "& .field": {
-      width: "30%",
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sqm-text-subdued)",
-      textAlign: "left",
-      paddingRight: "var(--sl-spacing-xxx-large)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-        paddingRight: "0",
-        paddingBottom: "0",
-      },
-    },
-    "& .value": {
-      fontSize: "var(--sl-font-size-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& .top-border": {
-      borderTop: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
-    },
-    "& .image": {
-      width: "200px",
-      "@media (max-width: 499px)": {
-        width: "100px",
-      },
-    },
-  },
-  Button: {
-    display: "flex",
-    flexWrap: "wrap-reverse",
-    margin: "var(--sl-spacing-medium) 0",
-    "& .cancel": {
-      marginLeft: "auto",
-      marginRight: "var(--sl-spacing-medium)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-        marginRight: "0",
-        marginTop: "var(--sl-spacing-small)",
-      },
-    },
-    "& .continue": {
-      "@media (max-width: 499px)": {
-        width: "100%",
-      },
-    },
-    "& .continue.right": {
-      marginLeft: "auto",
-    },
-    "& .continue.center": {
-      margin: "0 auto",
-    },
-  },
-  Confetti: {
-    pointerEvents: "none",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    top: "0%",
-    left: "0%",
-    zIndex: "1",
-  },
-};
-// JSS config
-const sheet$8 = JSS.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
-const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-function RewardExchangeView(props) {
-  const { states, data, callbacks, refs } = props;
-  const { selectedItem, selectedStep } = states;
-  const stageProgressList = {
-    chooseReward: states.content.text.chooseRewardTitle,
-    chooseAmount: states.content.text.chooseAmountTitle,
-    confirmation: states.content.text.confirmationTitle,
-  };
-  function getInput() {
-    var _a, _b, _c;
-    const item = states.selectedItem;
-    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
-      return index.h("span", { class: "points" }, item === null || item === void 0 ? void 0 : item.prettySourceValue);
-    if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
-      return (index.h("p", null, global.intl.formatMessage({
-        id: "notEnoughError",
-        defaultMessage: states.content.text.notEnoughError,
-      }, {
-        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$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,
-          selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
-        });
-      } }, (_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$8.classes.SelectItem },
-        step.prettyDestinationValue,
-        index.h("br", null),
-        index.h("div", { class: "step-cost", slot: "suffix" },
-          step.prettySourceValue,
-          step.unavailableReasonCode && (index.h("p", { class: "step-unavailable" }, global.intl.formatMessage({
-            id: "unavailableCode",
-            defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
-          }, {
-            unavailableReasonCode: step.unavailableReasonCode,
-            sourceUnit: item.sourceUnit,
-            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
-          }))))));
-    })));
-  }
-  function chooseReward() {
-    var _a;
-    return [
-      index.h("div", { part: "choose-reward-container" },
-        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(--sqm-primary-color)"
-              : "none",
-            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$8.classes.Card, style: {
-                cursor: item.unavailableReasonCode
-                  ? "not-allowed"
-                  : "pointer",
-              }, onClick: () => item.available &&
-                callbacks.setExchangeState({ selectedItem: item }) },
-              item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (index.h("div", { class: "selected" },
-                index.h(CheckmarkFilled, null))),
-              index.h("div", { style: {
-                  display: "flex",
-                  width: "100%",
-                  height: "120px",
-                  borderRadius: "3px",
-                  background: item.unavailableReasonCode
-                    ? "rgba(0, 0, 0, 0.05)"
-                    : "rgba(0, 0, 0, 0)",
-                } },
-                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: imageUrl$1.optimizeCloudinaryUrl((item === null || item === void 0 ? void 0 : item.imageUrl) ||
-                      index.getAssetPath("./assets/Reward-image.png")), decoding: "async" })),
-                index.h("div", { class: sheet$8.classes.TextArea, style: {
-                    opacity: item.unavailableReasonCode ? "0.5" : "1",
-                  } },
-                  index.h("div", { class: "title", style: {
-                      "-webkit-line-clamp": item.unavailableReasonCode
-                        ? "1"
-                        : "2",
-                    } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
-                  index.h("div", { class: "amount", style: {
-                      "-webkit-line-clamp": item.unavailableReasonCode
-                        ? "1"
-                        : "2",
-                    } }, global.intl.formatMessage({
-                    id: "sourceAmountMessage",
-                    defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
-                  }, {
-                    ruleType: item.ruleType,
-                    sourceValue: item.prettySourceValue,
-                    sourceMinValue: item.prettySourceMinValue,
-                    sourceMaxValue: item.prettySourceMaxValue,
-                  })),
-                  item.unavailableReasonCode && (index.h("div", { class: "error" },
-                    index.h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
-                    global.intl.formatMessage({
-                      id: "unavailableCode",
-                      defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
-                    }, {
-                      unavailableReasonCode: item.unavailableReasonCode,
-                      sourceUnit: item.sourceUnit,
-                      sourceValue: item.prettySourceValue ||
-                        item.prettySourceMinValue,
-                    }))))))));
-        }))),
-        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() {
-    var _a, _b, _c, _d;
-    const input = getInput();
-    const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
-      ? false
-      : input && !states.amount;
-    return (index.h("div", null,
-      index.h("div", { class: sheet$8.classes.ChooseAmount, part: "choose-amount-container" },
-        index.h("div", { class: "wrapper" },
-          index.h("img", { class: "image", src: imageUrl$1.optimizeCloudinaryUrl((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-              index.getAssetPath("./assets/Reward-image.png")), decoding: "async" }),
-          index.h("div", { class: "text" },
-            index.h("div", { class: "title" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
-            ((_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$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 === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
-    const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
-    return (index.h("div", null,
-      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" },
-            index.h("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
-            index.h("img", { class: "image", src: imageUrl$1.optimizeCloudinaryUrl((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                index.getAssetPath("./assets/Reward-image.png")), decoding: "async" }))),
-        index.h("div", { class: "wrapper padding" },
-          index.h("div", { class: "field" })),
-        amount && (index.h("div", { class: "wrapper top-border padding" },
-          index.h("div", { class: "field" }, states.content.text.rewardAmountTitle),
-          index.h("div", null, amount))),
-        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$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, _g, _h;
-    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),
-      index.h("div", { class: "description" }, global.intl.formatMessage({
-        id: "successMessage",
-        defaultMessage: states.content.text.redemptionSuccessText,
-      }, {
-        sourceValue: (_c = (_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.prettySourceValue) !== null && _c !== void 0 ? _c : (_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettySourceValue,
-        destinationValue: ((_e = states.selectedStep) === null || _e === void 0 ? void 0 : _e.prettyDestinationValue) || ((_f = states.selectedItem) === null || _f === void 0 ? void 0 : _f.name) || ((_g = states.selectedItem) === null || _g === void 0 ? void 0 : _g.globalRewardKey),
-      })),
-      (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: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
-      index.h("div", { class: sheet$8.classes.Button },
-        index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
-  }
-  const stages = {
-    chooseReward: () => chooseReward(),
-    chooseAmount: () => chooseAmount(),
-    confirmation: () => confirmation(),
-    success: () => success(),
-  };
-  const currentStage = stages[states.redeemStage];
-  function stageMap() {
-    const stageNumber = stageList.indexOf(states.redeemStage);
-    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]);
-        }
-        else {
-          return (index.h("span", { class: "text subdued" }, stageProgressList[stage]));
-        }
-      })),
-      index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
-  }
-  function loading() {
-    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$8.classes.Card },
-          index.h("div", { class: sheet$8.classes.CardLayout },
-            index.h("div", null,
-              index.h("sqm-skeleton", { style: {
-                  margin: "9px",
-                }, width: "100px", height: "100px" })),
-            index.h("div", { style: {
-                margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
-                width: "100%",
-                display: "flex",
-                flexDirection: "column",
-                gap: "var(--sl-spacing-small)",
-              } },
-              index.h("sqm-skeleton", null),
-              index.h("sqm-skeleton", null),
-              index.h("sqm-skeleton", { width: "45%" }))))));
-    })));
-  }
-  function errorMessage() {
-    return (index.h("sl-alert", { type: "danger", open: true },
-      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      states.content.text.redemptionError));
-  }
-  function queryErrorMessage() {
-    return (index.h("sl-alert", { type: "danger", open: true },
-      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      states.content.text.queryError));
-  }
-  function Confetti() {
-    return (index.h("canvas", { ref: (canvas) => {
-        if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
-          return;
-        refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$8.classes.Confetti }));
-  }
-  if (states.noExchangeOptions)
-    return states.content.text.empty;
-  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(),
-      states.queryError && !states.exchangeError && queryErrorMessage(),
-      currentStage && currentStage(),
-      states.redeemStage === "success")));
-}
-
-const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, exchangeError = false, loading = false, fueltank = null, noExchangeOptions = false, queryError = false) => ({
-  states: {
-    content: {
-      text: {
-        notAvailableError: "{unavailableReasonCode, select, NOT_CHAMPION {CUSTOM ERROR MESSAGE } US_TAX {Exceeds tax limit for this year} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }",
-        chooseRewardTitle: "Rewards",
-        chooseAmountTitle: "Select",
-        confirmationTitle: "Confirm",
-        rewardTitle: "Choose a reward",
-        cancelText: "Cancel",
-        backText: "Back",
-        continueText: "Continue",
-        continueToConfirmationText: "Continue to confirmation",
-        redeemText: "Redeem",
-        redeemTitle: "Confirm and redeem",
-        redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
-        doneText: "Done",
-        tooltipText: "Copied!",
-        selectText: "Select amount to receive",
-        sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
-        rewardRedeemedText: "Reward redeemed",
-        redemptionError: "An error occured trying to redeem this reward. Please try again",
-        queryError: "Unable to load reward exchange list. Please try again",
-        promoCode: "Promo code",
-        skeletonCardNum: 8,
-        rewardNameTitle: "Reward Name",
-        rewardAmountTitle: "Reward Amount",
-        costTitle: "Cost",
-        notEnoughError: "Sorry not enough!",
-        empty: (index.h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })),
-      },
-    },
-    queryError: queryError,
-    redeemStage: stage,
-    amount: 0,
-    exchangeError: exchangeError,
-    loading: loading,
-    selectedItem: selectedItem,
-    selectedStep: selectedStep,
-    noExchangeOptions: noExchangeOptions,
-    open: false,
-  },
-  data: {
-    exchangeList: data,
-    fuelTankCode: fueltank,
-  },
-  callbacks: {
-    exchangeReward: null,
-    resetState: null,
-    setStage: null,
-    setExchangeState: null,
-    copyFuelTankCode: null,
-  },
-  refs: null,
-});
-const baseReward = {
-  key: "reward",
-  name: "Demo Reward",
-  description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
-  imageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png",
-  available: true,
-  unavailableReasonCode: null,
-  ruleType: "FIXED_GLOBAL_REWARD",
-  sourceUnit: "POINT",
-  sourceValue: 10,
-  prettySourceValue: "10 SaaSquatch Points",
-  sourceMinValue: null,
-  prettySourceMinValue: null,
-  sourceMaxValue: null,
-  prettySourceMaxValue: null,
-  destinationMinValue: null,
-  prettyDestinationMinValue: null,
-  destinationMaxValue: null,
-  prettyDestinationMaxValue: null,
-  globalRewardKey: "",
-  destinationUnit: null,
-  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,
-  unavailableReasonCode: "INSUFFICIENT_REDEEMABLE_CREDIT",
-};
-const usTax = {
-  available: false,
-  unavailableReasonCode: "US_TAX",
-};
-const customError = {
-  available: false,
-  unavailableReasonCode: "NOT_CHAMPION",
-};
-const selected = {
-  key: "r1",
-};
-const imageUrl = (props) => ({
-  imageUrl: props,
-});
-const name = (props) => ({
-  name: props,
-});
-const description = (props) => ({
-  description: props,
-});
-const fixedValue = (props) => ({
-  prettySourceValue: props,
-});
-const variableValue = (min, max, unit) => ({
-  ruleType: "VARIABLE_CREDIT_REWARD",
-  sourceMinValue: min,
-  prettySourceMinValue: min + " " + unit,
-  sourceMaxValue: max,
-  prettySourceMaxValue: max + " " + unit,
-});
-const demoData = [
-  {
-    ...baseReward,
-    ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
-    ...fixedValue("40 Points"),
-  },
-  {
-    ...baseReward,
-    ...selected,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-  },
-  {
-    ...baseReward,
-    ...name("$50 Store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
-    ...fixedValue("100 Points"),
-  },
-  {
-    ...baseReward,
-    ...name("Variable amount of store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
-    ...variableValue(20, 100, "Points"),
-  },
-];
-const data = [
-  {
-    ...baseReward,
-    ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
-    ...fixedValue("40 SaaSquatch Points"),
-  },
-  {
-    ...baseReward,
-    ...selected,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-  },
-  {
-    ...baseReward,
-    ...name("A very exclusive gift box"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
-    ...fixedValue("30 SaaSquatch Points"),
-  },
-  {
-    ...baseReward,
-    ...name("$50 Store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
-    ...fixedValue("100 SaaSquatch Points"),
-  },
-  {
-    ...baseReward,
-    ...name("Variable amount of store credit"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
-    ...variableValue(20, 100, "Points"),
-  },
-  {
-    ...baseReward,
-    ...notEnoughPoints,
-    ...name("A very rare cactus"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
-    ...fixedValue("2000 SaaSquatch Points"),
-  },
-  {
-    ...baseReward,
-    ...usTax,
-    ...name("$1000 Store credit with a really super long name in the front page"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
-    ...fixedValue("2000 SaaSquatch Long Points"),
-  },
-  {
-    ...baseReward,
-    ...notEnoughPoints,
-    ...name("A holiday gift box"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
-    ...fixedValue("100 SaaSquatch Points"),
-  },
-];
-const rewardExchange = {
-  ...baseResponse(data),
-};
-const demoRewardExchange = {
-  ...baseResponse(demoData, "chooseReward", baseReward),
-};
-const rewardExchangeLongText = {
-  ...baseResponse([
-    {
-      ...baseReward,
-      ...notEnoughPoints,
-      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
-      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
-      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
-    },
-    {
-      ...baseReward,
-      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
-      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
-      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
-    },
-    {
-      ...baseReward,
-      ...name("Suuuuuuuuper aweeeeesssssoooommme reward!!!!!!"),
-      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
-      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
-    },
-    ...data,
-  ]),
-};
-const rewardExchangeCustomErrorMsg = {
-  ...baseResponse([
-    {
-      ...baseReward,
-      ...customError,
-      ...name("A very rare cactus"),
-      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
-      ...fixedValue("2000 SaaSquatch Points"),
-    },
-    ...data,
-  ]),
-};
-const rewardExchangeSelected = {
-  ...baseResponse(data, "chooseReward", {
-    ...baseReward,
-    ...selected,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-  }),
-};
-const baseStep = (dst, dstUnit, src, srcUnit, available = true, unavailableReason = null) => ({
-  destinationValue: dst,
-  prettyDestinationValue: dstUnit + dst,
-  sourceValue: src,
-  prettySourceValue: src + " " + srcUnit,
-  available: available,
-  unavailableReasonCode: unavailableReason,
-});
-const chooseAmountVariable = {
-  ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-    steps: [
-      baseStep(20, "$", 40, "Points"),
-      baseStep(30, "$", 60, "Points"),
-      baseStep(40, "$", 80, "Points"),
-      baseStep(50, "$", 100, "Points"),
-      baseStep(60, "$", 120, "Points"),
-    ],
-  }),
-};
-const chooseAmountVariableNoDescription = {
-  ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
-    ...name("Visa® Prepaid Card USD"),
-    ...description(""),
-    ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-    steps: [
-      baseStep(20, "$", 40, "Points"),
-      baseStep(30, "$", 60, "Points"),
-      baseStep(40, "$", 80, "Points"),
-      baseStep(50, "$", 100, "Points"),
-      baseStep(60, "$", 120, "Points"),
-    ],
-  }),
-};
-const chooseAmountVariableDisabled = {
-  ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-    steps: [
-      baseStep(20, "$", 40, "Points"),
-      baseStep(30, "$", 60, "Points"),
-      baseStep(40, "$", 80, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
-      baseStep(50, "$", 100, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
-      baseStep(60, "$", 120, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
-    ],
-  }),
-};
-const chooseAmountVariableUnavailable = {
-  ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-    steps: [
-      baseStep(20, "$", 40, "Points"),
-      baseStep(30, "$", 60, "Points"),
-      baseStep(40, "$", 80, "Points", false, "US_TAX"),
-      baseStep(50, "$", 100, "Points", false, "US_TAX"),
-      baseStep(60, "$", 120, "Points", false, "US_TAX"),
-    ],
-  }),
-};
-const chooseAmountFixed = {
-  ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
-    ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
-    ...fixedValue("40 SaaSquatch Points"),
-  }),
-};
-const chooseAmountFixedNoDescription = {
-  ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
-    ...description(""),
-    ...name("Free swag with a promo code"),
-    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
-    ...fixedValue("40 SaaSquatch Points"),
-  }),
-};
-const confirmFixed = {
-  ...baseResponse(data, "confirmation", {
-    ...baseReward,
-    ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
-    ...fixedValue("40 SaaSquatch Points"),
-  }),
-};
-const confirmVariable = {
-  ...baseResponse(data, "confirmation", {
-    ...baseReward,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-  }, baseStep(20, "$", 40, "Points")),
-};
-const redemptionError = {
-  ...baseResponse(data, "confirmation", {
-    ...baseReward,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
-    ...variableValue(20, 80, "Points"),
-  }, baseStep(20, "$", 40, "Points"), true),
-};
-const queryError = {
-  ...baseResponse(undefined, "chooseReward", undefined, undefined, undefined, undefined, undefined, undefined, true),
-};
-const success = {
-  ...baseResponse(data, "success", {
-    ...baseReward,
-    ...name("Free swag with a promo code"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
-    ...fixedValue("40 SaaSquatch Points"),
-  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
-};
-const successVariable = {
-  ...baseResponse(data, "success", {
-    ...baseReward,
-    ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
-    ...variableValue(20, 80, "Points"),
-  }, baseStep(20, "$", 40, "Points")),
-};
-const loading = {
-  ...baseResponse(null, "chooseReward", null, null, false, true),
-};
-const empty = {
-  ...baseResponse(null, "chooseReward", null, null, false, false, null, true),
-};
-
-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)
-      }
-    }
-  }
-`;
-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, 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 style$9 = {
-  Wrapper: {
-    ...mixins.AuthWrapper,
-    "max-width": "600px",
-    border: "none",
-    margin: "0",
-  },
-  Column: mixins.AuthColumn,
-  HostBlock: mixins.HostBlock,
-  ":host": {
-    margin: "0 auto",
-    width: "100%",
-  },
-  NameFieldWrapper: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-    marginBottom: "0 !important",
-  },
-  ContinueButton: { maxWidth: "169px" },
-  ButtonsContainer: mixins.AuthButtonsContainer,
-  SuccessAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-green-100)",
-      borderTop: "none",
-    },
-  },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-  },
-  NameInput: {
-    marginBottom: "0",
-    width: "50%",
-  },
-  ErrorStyle: mixins.ErrorStyles,
-};
-const vanillaStyle$6 = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-`;
-const sheet$9 = JSS.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
-function LeadFormView(props) {
-  var _a, _b, _c, _d;
-  const { states, refs, callbacks, content } = props;
-  if (states.error) {
-    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-  }
-  const getRequiredFieldErrorMessage = ({ fieldLabel, }) => global.intl.formatMessage({
-    id: "requiredFieldErrorMessage",
-    defaultMessage: content.requiredFieldErrorMessage,
-  }, {
-    fieldLabel,
-  });
-  return (index.h(index.Fragment, null,
-    states.success && (index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
-      index.h("style", { type: "text/css" },
-        vanillaStyle$6,
-        styleString$9),
-      index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-      index.h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
-        index.h("b", null, content.submitSuccessHeader),
-        index.h("br", null),
-        index.h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
-      index.h("sl-button", { class: sheet$9.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
-    index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
-      index.h("style", { type: "text/css" },
-        vanillaStyle$6,
-        styleString$9),
-      index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-      index.h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-        states.error && (index.h("sqm-form-message", { type: "error" },
-          index.h("p", { part: "alert-title" }, content.submitErrorHeader),
-          index.h("p", { part: "alert-description" }, global.intl.formatMessage({
-            id: "submitErrorDescription",
-            defaultMessage: content.submitErrorDescription,
-          }, {
-            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
-          })))),
-        index.h("div", { class: sheet$9.classes.NameFieldWrapper },
-          index.h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
-          index.h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
-        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 getRequiredFieldErrorMessage({
-                fieldLabel: content.emailLabel || "Email",
-              });
-            }
-            // this matches shoelace validation, but could be better
-            if (!value.includes("@")) {
-              return content.invalidEmailErrorMessage;
-            }
-          } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-          class: sheet$9.classes.ErrorStyle,
-          helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-            content.requiredFieldErrorMessage,
-        }
-          : []))),
-        index.h("input", { type: "hidden", hidden: true, name: "/referralCode", value: states.referralCode }),
-        content.formData,
-        index.h("div", { class: sheet$9.classes.ButtonsContainer },
-          index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"))))));
-}
-
-const style$a = {
-  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$7 = `
-: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);
-}
-sl-select::part(menu){
-  max-height: 300px;
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet$a = JSS.jss.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
-function LeadDropdownFieldView(props) {
-  var _a, _b, _c, _d, _e;
-  const { states, content } = props;
-  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  const getRequiredFieldErrorMessage = ({ dropdownLabel, }) => global.intl.formatMessage({
-    id: `requiredFieldErrorMessage-${dropdownLabel}`,
-    defaultMessage: content.requiredFieldErrorMessage,
-  }, {
-    dropdownLabel,
-  });
-  return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle$7,
-      styleString$a),
-    index.h("sl-select", Object.assign({ style: { maxHeight: "100px" }, exportparts: "label: input-label, base: input-base", label: `${content.dropdownLabel}${content.dropdownOptional ? ` ${content.optionalLabel}` : ""}`, name: `/${content.dropdownName}`, multiple: content.multiple }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
-        if (!value && !content.dropdownOptional) {
-          return getRequiredFieldErrorMessage({
-            dropdownLabel: content.dropdownLabel,
-          });
-        }
-      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
-      class: sheet$a.classes.ErrorStyle,
-    }
-      : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
-      dropdownLabel: content.dropdownLabel,
-    })))));
-}
-
-const map = new Map();
-function withShadowView(component) {
-  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
-  const element = index.getElement(component);
-  let renderFn = component["render"].bind(component);
-  const newRenderFn = () => {
-    const key = element.getAttribute("stencilbook-shadow-view");
-    if (key) {
-      const value = map.get(key);
-      if (value) {
-        return value;
-      }
-    }
-    return renderFn();
-  };
-  component["render"] = newRenderFn;
-}
-/**
- * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
- */
-const ShadowViewAddon = ({ story }, children) => {
-  var _a;
-  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
-  if (!TagName)
-    return children;
-  const randomInt = Math.round(Math.random() * 100000);
-  map.set(randomInt + "", children);
-  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
-  // This will only re-render when the tag name changes, so we use a random tag name every time.
-  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
-  return (index.h(RandomTagName, null,
-    index.h(TagName, { "stencilbook-shadow-view": randomInt })));
-};
-
-exports.BaseRegistrationFormView = BaseRegistrationFormView;
-exports.BigStatView = BigStatView;
-exports.CardFeedView = CardFeedView;
-exports.ChangeMarktingView = ChangeMarktingView;
-exports.CheckboxFieldView = CheckboxFieldView;
-exports.CouponCodeView = CouponCodeView;
-exports.DropdownFieldView = DropdownFieldView;
-exports.EditProfileView = EditProfileView;
-exports.HeroView = HeroView;
-exports.InputFieldView = InputFieldView;
-exports.LeadDropdownFieldView = LeadDropdownFieldView;
-exports.LeadFormView = LeadFormView;
-exports.LeaderboardView = LeaderboardView;
-exports.NameFieldsView = NameFieldsView;
-exports.PortalChangePasswordView = PortalChangePasswordView;
-exports.PortalFooterView = PortalFooterView;
-exports.PortalFrameView = PortalFrameView;
-exports.PoweredByImg = PoweredByImg;
-exports.ProgressBar = ProgressBar;
-exports.ProgressBarView = ProgressBarView;
-exports.ReferralIframeView = ReferralIframeView;
-exports.RewardExchangeView = RewardExchangeView;
-exports.ShadowViewAddon = ShadowViewAddon;
-exports.ShareButtonView = ShareButtonView;
-exports.StatContainerView = StatContainerView;
-exports.TaskCardView = TaskCardView;
-exports.chooseAmountFixed = chooseAmountFixed;
-exports.chooseAmountFixedNoDescription = chooseAmountFixedNoDescription;
-exports.chooseAmountVariable = chooseAmountVariable;
-exports.chooseAmountVariableDisabled = chooseAmountVariableDisabled;
-exports.chooseAmountVariableNoDescription = chooseAmountVariableNoDescription;
-exports.chooseAmountVariableUnavailable = chooseAmountVariableUnavailable;
-exports.confirmFixed = confirmFixed;
-exports.confirmVariable = confirmVariable;
-exports.demoRewardExchange = demoRewardExchange;
-exports.empty = empty;
-exports.loading = loading;
-exports.queryError = queryError;
-exports.redemptionError = redemptionError;
-exports.rewardExchange = rewardExchange;
-exports.rewardExchangeCustomErrorMsg = rewardExchangeCustomErrorMsg;
-exports.rewardExchangeLongText = rewardExchangeLongText;
-exports.rewardExchangeSelected = rewardExchangeSelected;
-exports.success = success;
-exports.successVariable = successVariable;
-exports.useBigStat = useBigStat;
-exports.useDemoBigStat = useDemoBigStat;
-exports.useShareButton = useShareButton;
-exports.useShareLink = useShareLink;
-exports.withShadowView = withShadowView;