@saasquatch/mint-components 1.15.0-45 → 1.15.0-46

package/dist/cjs/{ShadowViewAddon-bebbd4d0.js → ShadowViewAddon-85d2eed4.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-a43a63b4.js');
 const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const global = require('./global-242743b1.js');
+const global = require('./global-2298fc8b.js');
 const index_module = require('./index.module-39955732.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
@@ -17,48 +17,6 @@ const index$1 = require('./index-8c6255f5.js');
 const utilities = require('./utilities-be3ce1f8.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-70eaf785.js');
 
-function BigStatView(props) {
-  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
-  // Dependent on props, not feasible to move out
-  const style = {
-    Container: {
-      display: "flex",
-      // height: "inherit",
-      // "justify-content": "space-between",
-      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
-      "align-items": `${alignment === "left"
-        ? "flex-start"
-        : alignment === "right"
-          ? "flex-end"
-          : "center"}`,
-    },
-    Stat: {
-      "font-size": statFontSize
-        ? `${statFontSize}px`
-        : "var(--sl-font-size-xx-large)",
-      "text-align": alignment,
-      color: statTextColor || "var(--sqm-text)",
-      lineHeight: "35px",
-      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
-    },
-    Description: {
-      "font-size": descriptionFontSize
-        ? `${descriptionFontSize}px`
-        : "var(--sl-font-size-small)",
-      "font-weight": "var(--sl-font-weight-normal)",
-      color: descriptionTextColor || "var(--sqm-text)",
-      "text-align": alignment,
-      lineHeight: "20px",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", { part: "stat-wrapper", class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
-    index.h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
-}
-
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
   twitter: { color: "#000000", text: "#fff", icon: "twitter-x" },
@@ -135,190 +93,461 @@ function ShareButtonView(props, children) {
       !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
+function LeaderboardView(props) {
+  var _a, _b, _c;
+  const { states, data, elements } = props;
+  const { styles } = states;
   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"
-          : "1px solid var(--sqm-text-subdued)",
-        "padding-right": divideSpace(),
+    Leaderboard: {
+      "& table": {
+        width: "100%",
+        borderCollapse: "collapse",
+        background: styles.background || "transparent",
+        borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : "0",
       },
-      "& > :last-child": {
-        "border-right": "none",
+      "& th": {
+        textAlign: "left",
+        padding: "var(--sl-spacing-medium)",
+        paddingTop: "0",
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
       },
-      "& > ::slotted(*)": {
-        "border-right": props.hideBorder
-          ? "none"
-          : "1px solid var(--sqm-text-subdued)",
-        "padding-right": divideSpace(),
+      "& tr:not(:first-child)": {
+        borderTop: `var(--sqm-bordr-thickness) solid ${styles.borderColor || "var(--sqm-border-color)"}`,
       },
-      "& > ::slotted(*:last-child)": {
-        "border-right": "none",
+      "& td": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
       },
-      "@media screen and (max-width: 430px)": {
-        "& > ::slotted(*)": {
-          borderRight: "none",
-        },
+      "& .ellipses": {
+        textAlign: "left",
+        padding: "0",
+        color: styles.textColor || "var(--sqm-text)",
+        paddingLeft: "25%",
       },
-    },
-    StatFrame: {
-      display: "flex",
-    },
-    BorderFix: {
-      "border-right": "1px solid transparent",
-      width: "0px",
-      "margin-left": "-1px",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
-    index.h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
-      index.h("style", { type: "text/css" }, styleString),
-      children),
-    index.h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
-}
-
-function PortalChangePasswordView(props) {
-  const { states, callbacks } = props;
-  const style = {
-    Dialog: {
-      padding: "0",
-      "&::part(panel)": {
-        background: "var(--sqm-portal-background)",
-        borderRadius: "var(--sqm-border-radius-normal, var(--sl-border-radius-medium))",
+      "& .highlight": {
+        background: styles.viewingUserHighlightColor ||
+          "var(--sqm-accent-color-background)",
+        "& td, th": {
+          color: styles.viewingUserHighlightTextColor || "var(--sqm-text)",
+        },
       },
-      "&::part(close-button)": {
-        "margin-top": "var(--sl-spacing-medium)",
+      "& td, th": {
+        color: styles.textColor || "var(--sqm-text)",
+        padding: "var(--sl-spacing-medium)",
       },
-      "&::part(body)": {
-        padding: "0 var(--sl-spacing-x-large) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
+      "& .User": {
+        width: "100%",
       },
-    },
-    Error: {
-      "&::part(erroralert-base)": {
-        "margin-bottom": "15px",
+      "& .Score": {
+        width: "auto",
+        whiteSpace: "nowrap",
       },
-    },
-    Success: {
-      "&::part(successalert-base)": {
-        "margin-bottom": "15px",
+      "& .Rank": {
+        whiteSpace: "nowrap",
       },
-    },
-    InputContainer: {
-      "& > :not(:last-child)": {
-        "margin-bottom": "var(--sl-spacing-x-large)",
+      "& .fullWidth": {
+        width: "100%",
       },
     },
-    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 debug = stencilHooks_module.browser("sq:useBigStat");
-const LOADING = "...";
-const debugQuery = (query, variables, getStat) => {
-  const res = index_module.wn(query, variables);
-  if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
-    console.error("issue getting stat:", res);
+  const vanillaStyle = `
+  :host{
+    display: block;
   }
-  const stat = getStat(res);
-  return { ...stat, loading: res.loading };
-};
-const referralsCountQuery = (programId, 
-// locale
-_, status) => {
+`;
+  if (states.isEssentials) {
+    return (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
+  }
+  if (states.loading) {
+    return (index.h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
+      index.h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      index.h("table", null, [...Array(10)].map(() => {
+        return (index.h("tr", null,
+          index.h("td", null,
+            index.h("sl-skeleton", null))));
+      }))));
+  }
+  if (!states.hasLeaders)
+    return elements.empty;
+  let userSeenFlag = false;
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
+  const getRankCellText = (userRank, isViewingUsersRow) => {
+    if (!userRank) {
+      return styles.hideNames ? `${styles.viewingUserText}` : "-";
+    }
+    const viewingUserText = ` - ${styles.viewingUserText}`;
+    return styles.rankSuffix
+      ? global.intl.formatMessage({
+        id: "rank",
+        defaultMessage: styles.rankSuffix,
+      }, {
+        rank: userRank,
+      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
+      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
+  };
+  return (index.h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("table", { part: "sqm-table" },
+      index.h("tr", null,
+        styles.showRank && (index.h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
+        !styles.hideNames && index.h("th", { class: "User" }, styles.usersheading),
+        index.h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
+      _a.map((user) => {
+        var _a, _b;
+        if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
+        return (index.h("tr", { class: isViewingUsersRow ? "highlight" : "" },
+          styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
+          !styles.hideNames && index.h("td", { class: "User" }, getUsersName(user)),
+          index.h("td", { class: "Score" }, user.textValue)));
+      }),
+      !userSeenFlag && !styles.hideViewer && (index.h("tr", null,
+        index.h("td", { colSpan: 100, class: "ellipses" },
+          index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      !userSeenFlag && !styles.hideViewer && (index.h("tr", { class: "highlight" },
+        styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
+        !styles.hideNames && (index.h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        index.h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
+}
+
+function BigStatView(props) {
+  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
+  // Dependent on props, not feasible to move out
+  const style = {
+    Container: {
+      display: "flex",
+      // height: "inherit",
+      // "justify-content": "space-between",
+      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
+      "align-items": `${alignment === "left"
+        ? "flex-start"
+        : alignment === "right"
+          ? "flex-end"
+          : "center"}`,
+    },
+    Stat: {
+      "font-size": statFontSize
+        ? `${statFontSize}px`
+        : "var(--sl-font-size-xx-large)",
+      "text-align": alignment,
+      color: statTextColor || "var(--sqm-text)",
+      lineHeight: "35px",
+      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
+    },
+    Description: {
+      "font-size": descriptionFontSize
+        ? `${descriptionFontSize}px`
+        : "var(--sl-font-size-small)",
+      "font-weight": "var(--sl-font-weight-normal)",
+      color: descriptionTextColor || "var(--sqm-text)",
+      "text-align": alignment,
+      lineHeight: "20px",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { part: "stat-wrapper", class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
+    index.h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
+}
+
+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)));
+}
+
+const EditProfileView = (props) => {
+  var _a, _b, _c, _d;
+  const { states, callbacks } = props;
+  const { text } = states;
+  const { errors } = states.formState;
+  if (states.showEdit) {
+    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+      index.h("h2", { part: "sqm-header", style: {
+          fontSize: "var(--sl-font-size-x-large)",
+          margin: "0px",
+          textAlign: "center",
+        } }, text.editprofileheader),
+      index.h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
+        index.h("div", { class: "FormSection" },
+          states.formState.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+            index.h("div", { part: "erroralert-text" }, states.formState.error))),
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
+            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
+            : []), { id: "firstName", name: "firstName", error: errors.firstName && errors.firstName.status !== "valid"
+              ? errors.firstName.message
+              : undefined })),
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
+            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
+            : []), { error: errors.lastName && errors.lastName.status !== "valid"
+              ? errors.lastName.message
+              : undefined }))),
+        text.showregion && states.formState.currentRegion && (index.h("sl-input", { exportparts: "label: input-label, base: input-base", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
+        index.h("div", { class: "ButtonWrapper" },
+          index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+              callbacks.onSubmit(e);
+            }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
+          index.h("sl-button", { onClick: () => {
+              callbacks.setShowEdit(false);
+            }, type: "secondary", exportparts: "base: secondarybutton-base" }, text.canceltext)))));
+  }
+  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+    index.h("div", { class: "FormSection" },
+      index.h("h2", { part: "sqm-header", style: {
+          fontSize: "var(--sl-font-size-x-large)",
+          marginBottom: "0px",
+          textAlign: "center",
+        } }, text.editprofileheader),
+      index.h("div", null,
+        index.h("p", { style: { fontSize: "var(--sl-font-size-medium)" } }, (_a = states.user) === null || _a === void 0 ? void 0 :
+          _a.firstName,
+          " ", (_b = states.user) === null || _b === void 0 ? void 0 :
+          _b.lastName),
+        index.h("p", { style: { fontSize: "var(--sl-font-size-medium)" }, title: (_c = states.user) === null || _c === void 0 ? void 0 : _c.email }, (_d = states.user) === null || _d === void 0 ? void 0 : _d.email))),
+    index.h("sl-button", { type: "primary", loading: states.loading, onClick: () => {
+        callbacks.resetForm();
+        callbacks.setShowEdit(true);
+      }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
+};
+
+const MessageLinkQuery = 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, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
+  // Shown during loading
+  "...";
+  const [open, setOpen] = stencilHooks_module.useState(false);
+  async function onClick() {
+    if (contextData) {
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
+    }
+    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+    // Only if called from a user-initiated event
+    navigator.clipboard.writeText(copyString);
+    setOpen(true);
+    setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
+  }
+  return { ...props, onClick, open, copyString: copyString };
+}
+
+const MessageLinkQuery$1 = index_module.dist.gql `
+  query (
+    $programId: ID
+    $engagementMedium: UserEngagementMedium!
+    $shareMedium: ReferralShareMedium!
+  ) {
+    viewer {
+      ... on User {
+        messageLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: $shareMedium
+        )
+        shareLink(programId: $programId, engagementMedium: $engagementMedium)
+      }
+    }
+  }
+`;
+function NativeShare(props, directLink, undefinedErrorText, unsupportedPlatformText) {
+  const title = props.sharetitle || "Share title";
+  const text = props.sharetext || "Share text";
+  if (directLink === "undefined") {
+    return alert(undefinedErrorText);
+  }
+  if (window.navigator.share) {
+    window.navigator
+      .share({
+      title,
+      text,
+      url: directLink,
+    })
+      .catch((error) => console.error("Error on web share", error));
+  }
+  else {
+    alert(unsupportedPlatformText);
+  }
+}
+function FacebookShare(directLink, messageLink, errorText) {
+  if (messageLink === "undefined" || directLink === "undefined") {
+    return alert(errorText);
+  }
+  if (typeof SquatchAndroid.shareOnFacebook !== "undefined") {
+    return SquatchAndroid.shareOnFacebook(directLink, messageLink);
+  }
+  else {
+    return GenericShare(messageLink, errorText);
+  }
+}
+function GenericShare(messageLink, errorText) {
+  return messageLink ? (window.location.href = messageLink) : alert(errorText);
+}
+function useShareButton(props) {
+  var _a, _b, _c, _d;
+  const { sharetitle, sharetext, medium } = props;
+  const programId = props.programId ? props.programId : index_module.H();
+  const user = index_module.J();
+  const engagementMedium = index_module.B();
+  const variables = {
+    engagementMedium,
+    programId: programId,
+    shareMedium: medium.toUpperCase(),
+  };
+  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
+  const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
+  // only queries if a programId is available
+  const res = index_module.wn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
+  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink);
+  const environment = index_module.getEnvironmentSDK();
+  const hide = (medium.toLocaleUpperCase() === "SMS" &&
+    window.orientation === undefined) ||
+    (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
+  const messageLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.messageLink);
+  async function onClick() {
+    if (overrideData) {
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
+    }
+    if (medium.toLocaleUpperCase() === "FACEBOOK" &&
+      environment.type === "SquatchAndroid") {
+      FacebookShare(directLink, messageLink, props.errorText);
+    }
+    else if (medium.toLocaleUpperCase() === "DIRECT") {
+      NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
+    }
+  }
+  const isPlainLink = !(medium.toLocaleUpperCase() === "FACEBOOK" &&
+    environment.type === "SquatchAndroid") &&
+    medium.toLocaleUpperCase() !== "DIRECT" &&
+    messageLink;
+  const userAgent = window.navigator.userAgent.toLowerCase(), safari = /safari/.test(userAgent), ios = /iphone|ipod|ipad/.test(userAgent);
+  const openInSameTab = ios && !safari;
+  return {
+    ...props,
+    loading: res.loading && !(overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink),
+    messageLink,
+    isPlainLink,
+    onClick,
+    openInSameTab,
+    hide,
+  };
+}
+
+const debug = stencilHooks_module.browser("sq:useBigStat");
+const LOADING = "...";
+const debugQuery = (query, variables, getStat) => {
+  const res = index_module.wn(query, variables);
+  if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
+    console.error("issue getting stat:", res);
+  }
+  const stat = getStat(res);
+  return { ...stat, loading: res.loading };
+};
+const referralsCountQuery = (programId, 
+// locale
+_, status) => {
   const programFilter = programId === "classic"
     ? { programId_exists: false }
     : { programId_eq: programId };
@@ -1232,77 +1461,365 @@ function useBigStat(props) {
       descriptionFontSize: props.descriptionFontSize,
       statFontWeight: props.statFontWeight,
     },
-    label,
+    label,
+  };
+}
+
+function useDemoBigStat(props) {
+  const { statType } = props;
+  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  // triggers a re-render if the label is manually changed
+  useChildElements.useChildElements();
+  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
+    return {
+      props: {
+        value: 0,
+        statvalue: "!!!",
+        loading: false,
+        flexReverse: 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 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"
+          : "1px solid var(--sqm-text-subdued)",
+        "padding-right": divideSpace(),
+      },
+      "& > :last-child": {
+        "border-right": "none",
+      },
+      "& > ::slotted(*)": {
+        "border-right": props.hideBorder
+          ? "none"
+          : "1px solid var(--sqm-text-subdued)",
+        "padding-right": divideSpace(),
+      },
+      "& > ::slotted(*:last-child)": {
+        "border-right": "none",
+      },
+      "@media screen and (max-width: 430px)": {
+        "& > ::slotted(*)": {
+          borderRight: "none",
+        },
+      },
+    },
+    StatFrame: {
+      display: "flex",
+    },
+    BorderFix: {
+      "border-right": "1px solid transparent",
+      width: "0px",
+      "margin-left": "-1px",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
+    index.h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
+      index.h("style", { type: "text/css" }, styleString),
+      children),
+    index.h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
+}
+
+function PortalChangePasswordView(props) {
+  const { states, callbacks } = props;
+  const style = {
+    Dialog: {
+      padding: "0",
+      "&::part(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 useDemoBigStat(props) {
-  const { statType } = props;
-  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
-  // triggers a re-render if the label is manually changed
-  useChildElements.useChildElements();
-  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
-    return {
-      props: {
-        value: 0,
-        statvalue: "!!!",
-        loading: false,
-        flexReverse: props.flexReverse,
-        alignment: props.alignment,
-        statTextColor: props.statTextColor,
-        statFontSize: props.statFontSize,
-        descriptionTextColor: props.descriptionTextColor,
-        descriptionFontSize: props.descriptionFontSize,
-      },
-      label: "BAD PROP TYPE",
-    };
+const style$1 = {
+  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
+  Column: mixins.AuthColumn,
+  HostBlock: mixins.HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: mixins.AuthButtonsContainer,
+  ErrorStyle: mixins.ErrorStyles,
+};
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+function PortalRegisterView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  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",
-  };
+  return (index.h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
+    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.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
+      !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet$1.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
+      content.passwordField,
+      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
+        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
+      }
+        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
+        class: sheet$1.classes.ErrorStyle,
+        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      content.terms,
+      index.h("div", { class: sheet$1.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
 }
 
-function CardFeedView(props, children) {
-  // Dependent on props, not feasiable to move out
+const style$2 = {
+  ErrorStyle: {
+    "&::part(control)": {
+      background: "var(--sl-color-danger-10)",
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle$1 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet$2 = JSS.jss.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+function CheckboxFieldView(props) {
+  var _b, _c;
+  const { states, content, callbacks } = props;
+  return (index.h("div", { class: sheet$2.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$2),
+    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+        callbacks.setChecked(e.target.value);
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), global.intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
+}
+
+function ChangeMarktingView(props) {
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { error } = formState;
   const style = {
     Container: {
-      columnGap: props.gap + "px",
-      columnWidth: props.width + "px",
-      "& > div": {
-        marginBottom: "24px",
+      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();
-  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)));
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
+    index.h("sl-form", { "onSl-submit": callbacks.onSubmit },
+      index.h(CheckboxFieldView, { states: {
+          checked: states.formState.marketingEmailOptIn,
+        }, content: {
+          checkboxLabel: text.marketingCheckboxLabel,
+          checkboxName: "marketingEmailOptIn",
+        }, callbacks: {
+          setChecked: callbacks.setChecked,
+        } }),
+      index.h("sl-button", { class: sheet.classes.SubmitButton, type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
+      error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, error))),
+      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
+        index.h("div", { part: "successalert-text" }, states.text.successMessage))))));
 }
 
-const style$1 = {
+const style$3 = {
   Description: {
     "& .icon": {
       color: "var(--sqm-text)",
@@ -1347,13 +1864,13 @@ const style$1 = {
     },
   },
 };
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.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$1),
-    index.h("span", { class: sheet$1.classes.Description },
+    index.h("style", { type: "text/css" }, styleString$3),
+    index.h("span", { class: sheet$3.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" })),
@@ -1375,7 +1892,7 @@ const GreyGift = () => {
     index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
 };
 
-const style$2 = {
+const style$4 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1488,14 +2005,14 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2, { classNamePrefix: "sqm-prog-bar" });
-const styleString$2 = sheet$2.toString();
+const sheet$4 = JSS.createStyleSheet(style$4, { classNamePrefix: "sqm-prog-bar" });
+const styleString$4 = sheet$4.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$2.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    index.h("style", { type: "text/css" }, styleString$2),
+  return (index.h("div", { class: sheet$4.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$4),
     index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2048,402 +2565,109 @@ function TaskCardView(props) {
             } }, content.buttonText)))))))));
 }
 
-const style$3 = {
-  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
-  Column: mixins.AuthColumn,
-  HostBlock: mixins.HostBlock,
-  ":host": {
-    margin: "0 auto",
-    width: "100%",
-  },
-  ButtonsContainer: mixins.AuthButtonsContainer,
-  ErrorStyle: mixins.ErrorStyles,
-};
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-`;
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
-function PortalRegisterView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-  const { states, refs, callbacks, content } = props;
-  if (states.error) {
-    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-  }
-  return (index.h("div", { class: sheet$3.classes.Wrapper, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$3),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, props.states.error))),
-      content.formData,
-      !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
-          if (!value) {
-            return content.requiredFieldErrorMessage;
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return content.invalidEmailErrorMessage;
-          }
-        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet$3.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-          content.requiredFieldErrorMessage,
-      }
-        : [])))),
-      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
-      content.passwordField,
-      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
-        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
-      }
-        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
-        class: sheet$3.classes.ErrorStyle,
-        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
-      }
-        : [])))),
-      content.terms,
-      index.h("div", { class: sheet$3.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
-        content.secondaryButton))));
-}
-
-const style$4 = {
-  ErrorStyle: {
-    "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
-      borderColor: "var(--sl-color-danger-500)",
-      outline: "var(--sl-color-danger-500)",
-    },
-    "&:host": {
-      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
-    },
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    marginTop: "5px",
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-    fontFamily: "var(--sl-font-sans)",
-    fontWeight: "var(--sl-font-weight-normal)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle$1 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet$4 = JSS.jss.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
-function CheckboxFieldView(props) {
-  var _b, _c;
-  const { states, content, callbacks } = props;
-  return (index.h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle$1,
-      styleString$4),
-    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
-        e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), global.intl.formatMessage({
-      id: content.checkboxName + "-message",
-      defaultMessage: content.checkboxLabel,
-    }, {
-      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
-}
-
-function CouponCodeView(props) {
-  const error = !props.loading && props.error;
-  const style = {
-    HostBlock: mixins.HostBlock,
-    couponCodeLabel: {
-      margin: "var(--sl-spacing-x-small) 0",
-      color: props.textColor || "var(--sqm-text-subdued)",
-      fontSize: "var(--sl-font-size-small)",
-    },
-  };
-  const vanillaStyle = `
-  :host{
-    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-large)",
-  },
-};
-const vanillaStyle$2 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet$5 = JSS.jss.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
-function DropdownFieldView(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { states, content } = props;
-  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$5.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle$2,
-      styleString$5),
-    index.h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
-      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
-    }
-      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
-      class: sheet$5.classes.ErrorStyle,
-    }
-      : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$5.classes.ErrorMessageStyle }, global.intl.formatMessage({
-      id: `errorMessage-${content.dropdownName}`,
-      defaultMessage: content.errorMessage,
-    })))));
-}
-
-const EditProfileView = (props) => {
-  var _a, _b, _c, _d;
-  const { states, callbacks } = props;
-  const { text } = states;
-  const { errors } = states.formState;
-  if (states.showEdit) {
-    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
-      index.h("h2", { part: "sqm-header", style: {
-          fontSize: "var(--sl-font-size-x-large)",
-          margin: "0px",
-          textAlign: "center",
-        } }, text.editprofileheader),
-      index.h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
-        index.h("div", { class: "FormSection" },
-          states.formState.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-            index.h("div", { part: "erroralert-text" }, states.formState.error))),
-          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
-            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
-            : []), { id: "firstName", name: "firstName", error: errors.firstName && errors.firstName.status !== "valid"
-              ? errors.firstName.message
-              : undefined })),
-          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, (errors.lastName && errors.lastName.status !== "valid"
-            ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
-            : []), { error: errors.lastName && errors.lastName.status !== "valid"
-              ? errors.lastName.message
-              : undefined }))),
-        text.showregion && states.formState.currentRegion && (index.h("sl-input", { exportparts: "label: input-label, base: input-base", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
-        index.h("div", { class: "ButtonWrapper" },
-          index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
-              callbacks.onSubmit(e);
-            }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
-          index.h("sl-button", { onClick: () => {
-              callbacks.setShowEdit(false);
-            }, type: "secondary", exportparts: "base: secondarybutton-base" }, text.canceltext)))));
-  }
-  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 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 })));
+}
 
-function LeaderboardView(props) {
-  var _a, _b, _c;
-  const { states, data, elements } = props;
-  const { styles } = states;
+const vanillaStyle$2 = `
+  :host{
+    margin: 0 auto;
+    width: 100%;
+  }
+  a{
+    cursor:pointer;
+    color: var(--sqm-text-subdued);
+    text-decoration: none ;
+  }
+`;
+function PortalFooterView(props) {
   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-bordr-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%",
+    RowContainer: {
+      display: "flex",
+      "& > :not(:last-child)": {
+        "margin-right": "var(--sl-spacing-large)",
       },
-      "& .Score": {
-        width: "auto",
-        whiteSpace: "nowrap",
+    },
+    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)",
       },
-      "& .Rank": {
-        whiteSpace: "nowrap",
+    },
+    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",
       },
-      "& .fullWidth": {
-        width: "100%",
+      "&:hover, &:hover *": {
+        color: "var(--sqm-text)",
       },
     },
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: block;
-  }
-`;
-  if (states.isEssentials) {
-    return (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
-  }
-  if (states.loading) {
-    return (index.h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
-      index.h("style", { type: "text/css" },
-        styleString,
-        vanillaStyle),
-      index.h("table", null, [...Array(10)].map(() => {
-        return (index.h("tr", null,
-          index.h("td", null,
-            index.h("sl-skeleton", null))));
-      }))));
-  }
-  if (!states.hasLeaders)
-    return elements.empty;
-  let userSeenFlag = false;
-  const getUsersName = (user) => {
-    if (!user.firstName && !user.lastInitial)
-      return styles.anonymousUser;
-    const { firstName, lastInitial } = user;
-    if (firstName && lastInitial)
-      return `${firstName} ${lastInitial}`;
-    if (firstName || lastInitial)
-      return firstName || lastInitial;
-    return styles.anonymousUser;
-  };
-  const getRankCellText = (userRank, isViewingUsersRow) => {
-    if (!userRank) {
-      return styles.hideNames ? `${styles.viewingUserText}` : "-";
-    }
-    const viewingUserText = ` - ${styles.viewingUserText}`;
-    return styles.rankSuffix
-      ? global.intl.formatMessage({
-        id: "rank",
-        defaultMessage: styles.rankSuffix,
-      }, {
-        rank: userRank,
-      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
-      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
-  };
-  return (index.h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
     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"))))));
+      vanillaStyle$2,
+      styleString),
+    index.h("div", { class: sheet.classes.RowContainer },
+      props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
+      props.termsLink && (index.h("a", { target: "_blank", href: props.termsLink }, props.termsText))),
+    !props.hideSupportText && (index.h("p", { class: sheet.classes.SupportText }, global.intl.formatMessage({
+      id: "supportFooter",
+      defaultMessage: props.supportText,
+    }, {
+      email: (index.h("a", { target: "_blank", href: `mailto:${props.supportEmail}` }, props.supportEmail)),
+    }))),
+    !props.hidePoweredBy && (index.h("a", { class: sheet.classes.PoweredByLink, target: "_blank", href: props.poweredByLink },
+      "Powered by ",
+      index.h(PoweredByImg, { color: "currentColor" })))));
 }
 
 const paddingList = [
@@ -2564,54 +2788,45 @@ function HeroView(props) {
   }
   
 `;
-  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
-      index.h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      index.h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (index.h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
-}
-
-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]),
-      }),
-    }
-      : [])))));
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
+      index.h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      index.h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (index.h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
-const style$7 = {
+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 style$5 = {
   ErrorStyle: mixins.ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2619,7 +2834,7 @@ const style$7 = {
     },
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$3 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2636,7 +2851,7 @@ const vanillaStyle$4 = `
   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);
+  border-width: var(--sqm-border-width, 1px);
 }
 
 sl-input::part(base):focus,
@@ -2656,21 +2871,21 @@ sl-input {
 }
 
 `;
-const sheet$7 = JSS.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$5 = JSS.createStyleSheet(style$5);
+const styleString$5 = sheet$5.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 },
+  return (index.h("div", { class: sheet$5.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$7),
+      vanillaStyle$3,
+      styleString$5),
     index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
-      class: sheet$7.classes.ErrorStyle,
+      class: sheet$5.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
@@ -2678,206 +2893,98 @@ function NameFieldsView(props) {
       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,
+      class: sheet$5.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 style$6 = {
+  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$4 = `
+: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);
 }
-
-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" },
+JSS.jss.setup(JSS.create());
+const sheet$6 = JSS.jss.createStyleSheet(style$6);
+const styleString$6 = sheet$6.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$6.classes.FieldContainer, 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)));
+      vanillaStyle$4,
+      styleString$6),
+    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$6.classes.ErrorStyle,
+    }
+      : [])), content.selectOptions),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$6.classes.ErrorMessageStyle }, global.intl.formatMessage({
+      id: `errorMessage-${content.dropdownName}`,
+      defaultMessage: content.errorMessage,
+    })))));
 }
 
-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 style$7 = {
+  ErrorStyle: mixins.ErrorStyles,
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle$5 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet$7 = JSS.jss.createStyleSheet(style$7);
+const styleString$7 = sheet$7.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$7.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$5,
+      styleString$7),
+    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$7.classes.ErrorStyle,
+      helpText: global.intl.formatMessage({
+        id: `errorMessage-${content.fieldName}`,
+        defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
+      }),
+    }
+      : [])))));
 }
 
 const CheckMark = () => (index.h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -3954,164 +4061,57 @@ 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(),
+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 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 sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+    :host{
+      display: block;   
     }
-  }
-  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,
-  };
+
+  `;
+  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 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 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%;
   }
 `;
-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] = stencilHooks_module.useState(false);
-  async function onClick() {
-    if (contextData) {
-      await setCopied({ referralCode: contextData.referralCode });
-      contextData.refresh();
-    }
-    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
-    // Only if called from a user-initiated event
-    navigator.clipboard.writeText(copyString);
-    setOpen(true);
-    setTimeout(() => setOpen(false), props.tooltiplifespan);
-    sendLoadEvent({
-      eventMeta: {
-        programId,
-        id: user === null || user === void 0 ? void 0 : user.id,
-        accountId: user === null || user === void 0 ? void 0 : user.accountId,
-        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
-        meta: {
-          engagementMedium,
-          shareMedium: "DIRECT",
-        },
-      },
-    });
-  }
-  return { ...props, onClick, open, copyString: copyString };
+  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 map = new Map();