@saasquatch/mint-components 1.4.2 → 1.5.0-100

package/dist/cjs/ShadowViewAddon-44a75fcc.js

@@ -0,0 +1,2630 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const global = require('./global-6165db50.js');
+const index_module = require('./index.module-54724339.js');
+const mixins = require('./mixins-7b7c59fe.js');
+const JSS = require('./JSS-c65a40f1.js');
+const luxon = require('./luxon-59ca7d19.js');
+const utils = require('./utils-01dbfd4a.js');
+const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-fdfb3656.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-186a5f7e.js');
+
+const medium = {
+  facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
+  twitter: { color: "#1da1f2", text: "#fff", icon: "twitter" },
+  email: { color: "#666666", text: "#fff", icon: "envelope" },
+  direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
+  linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
+  sms: { color: "#34DA50", text: "#fff", icon: "chat" },
+  fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
+  whatsapp: { color: "#25d366", text: "#fff", icon: "whatsapp" },
+  linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
+  pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
+};
+function ShareButtonView(props, children) {
+  const vanillaStyle = `
+    *::part(base) {
+			--sl-focus-ring-color-primary: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}80!important;
+
+      background: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""};
+      color: ${props.textcolor
+    ? props.textcolor
+    : props.medium
+      ? medium[props.medium].text
+      : ""};
+      border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+    }
+
+	*::part(base):hover {
+		border-color: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}D1!important;
+	}
+	
+	*::part(base):focus {
+		border-color: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}D1!important;
+	}
+
+	*::part(label) {
+		position: relative;
+		top: 2%;
+	}
+  `;
+  const style = {
+    HostBlock: mixins.HostBlock,
+    buttonStyle: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: "0",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return props.hide ? (index.h(index.Host, { style: { display: "none" } })) : (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("style", { type: "text/css" }, vanillaStyle),
+    index.h("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
+      !props.hideicon && (index.h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
+      !props.hidetext && children)));
+}
+
+const style = {
+  HostBlock: mixins.HostBlock,
+  inputStyle: {
+    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function ShareLinkView(props) {
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open },
+      index.h("sl-input", { class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
+        index.h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })))));
+}
+
+const style$1 = {
+  Leaderboard: {
+    "& table": {
+      width: "100%",
+      borderCollapse: "collapse",
+    },
+    "& th": {
+      textAlign: "left",
+      padding: "var(--sl-spacing-medium)",
+      paddingTop: "0",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& tr:not(:first-child)": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& td": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+    },
+    "& .ellipses": {
+      textAlign: "center",
+      padding: "0",
+      color: "var(--sl-color-neutral-500)",
+    },
+    "& .highlight": {
+      background: "var(--sl-color-primary-50)",
+    },
+    "& td, th": {
+      color: "var(--sl-color-gray-800)",
+      padding: "var(--sl-spacing-medium)",
+    },
+    "& .User": {
+      width: "100%",
+    },
+    "& .Score": {
+      width: "auto",
+      whiteSpace: "nowrap",
+    },
+  },
+};
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+const vanillaStyle = `
+	:host{
+		display: block;
+	}
+`;
+function LeaderboardView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  console.log("LEADERBOARD PROPS", props);
+  if (states.loading)
+    return (index.h("div", { class: sheet$1.classes.Leaderboard },
+      index.h("style", { type: "text/css" },
+        styleString$1,
+        vanillaStyle),
+      elements.loadingstate));
+  let userSeenFlag = false;
+  if (!states.hasLeaders) {
+    return (index.h("div", { class: sheet$1.classes.Leaderboard },
+      index.h("style", { type: "text/css" },
+        styleString$1,
+        vanillaStyle),
+      index.h("table", null,
+        index.h("tr", null,
+          styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
+          index.h("th", { class: "User" }, styles.usersheading),
+          index.h("th", { class: "Score" }, styles.statsheading))),
+      elements.empty));
+  }
+  return (index.h("div", { class: sheet$1.classes.Leaderboard },
+    index.h("style", { type: "text/css" },
+      styleString$1,
+      vanillaStyle),
+    index.h("table", null,
+      index.h("tr", null,
+        styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
+        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.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        return (index.h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
+          styles.showRank && index.h("td", { class: "Rank" }, user.rank),
+          index.h("td", { class: "User" }, user.firstName && user.lastInitial
+            ? user.firstName + " " + user.lastInitial
+            : user.firstName || user.lastInitial
+              ? user.firstName || user.lastInitial
+              : styles.anonymousUser || "Anonymous User"),
+          index.h("td", { class: "Score" }, user.value)));
+      }),
+      states.hasLeaders && !userSeenFlag && data.showUser && (index.h("tr", null,
+        index.h("td", { colSpan: 100, class: "ellipses" },
+          index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      states.hasLeaders && !userSeenFlag && data.showUser && (index.h("tr", { class: "highlight" },
+        styles.showRank && (index.h("td", { class: "Rank" }, ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
+        index.h("td", { class: "User" }, ((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+          ? ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.firstName) + " " + ((_f = data.userRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
+          : ((_g = data.userRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.userRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
+            ? ((_j = data.userRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.userRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
+            : styles.anonymousUser || "Anonymous User"),
+        index.h("td", { class: "Score" }, ((_l = data.userRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))),
+      data.leaderboard.length ? elements.empty : "")));
+}
+
+const style$2 = {
+  HostBlock: mixins.HostBlock,
+  ":host": {
+    "min-height": "100vh",
+  },
+  Frame: {
+    "min-height": "100vh",
+    display: "flex",
+    "flex-direction": "column",
+    "box-sizing": "border-box",
+  },
+  FooterWrapper: {
+    width: "100%",
+    "max-width": "100%",
+    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
+    background: "var(--sqm-footer-background)",
+    display: "flex",
+    "justify-content": "flex-end",
+    "align-items": "center",
+    "box-sizing": "border-box",
+    "margin-top": "auto",
+  },
+  HeaderWrapper: {
+    width: "100%",
+    "max-width": "100%",
+    "box-sizing": "border-box",
+    display: "flex",
+    "justify-content": "space-between",
+    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+    "align-items": "center",
+    "background-color": "var(--sqm-header-background)",
+    "@media screen and (max-width: 499px)": {
+      "flex-direction": "row-reverse",
+      "justify-content": "flex-end",
+      padding: "0",
+    },
+  },
+};
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+function PortalFrameView(props, children) {
+  const { data } = props;
+  return (index.h("div", { class: sheet$2.classes.Frame },
+    index.h("style", { type: "text/css" }, styleString$2),
+    index.h("div", { class: sheet$2.classes.HeaderWrapper },
+      data.header,
+      index.h("slot", { name: "sqm-navigation-menu" })),
+    children,
+    index.h("div", { class: sheet$2.classes.FooterWrapper }, 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"}` },
+      index.h("h2", { 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", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
+            ? { class: "ErrorStyles", helpText: "Cannot be empty" }
+            : []), { 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", 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: "Cannot be empty" }
+            : []), { error: errors.lastName && errors.lastName.status !== "valid"
+              ? errors.lastName.message
+              : undefined }))),
+        text.showregion && states.formState.currentRegion && (index.h("sl-input", { exportparts: "label: input-label", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
+        index.h("div", { class: "ButtonWrapper" },
+          index.h("sl-button", { onClick: () => {
+              callbacks.setShowEdit(false);
+            }, exportparts: "base: defaultbutton-base" }, text.canceltext),
+          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)))));
+  }
+  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
+    index.h("div", { class: "FormSection" },
+      index.h("h2", { 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) {
+    user: viewer {
+      ... on User {
+        shareLink(programId: $programId)
+      }
+    }
+  }
+`;
+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.M() } = props;
+  const user = index_module.ne();
+  const engagementMedium = index_module.x();
+  const { data } = index_module.mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.De(WIDGET_ENGAGEMENT_EVENT);
+  const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
+  // Shown during loading
+  "...";
+  const [open, setOpen] = stencilHooks_module.useState(false);
+  function onClick() {
+    // 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(shareString);
+    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, shareString };
+}
+
+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) {
+  const title = props.sharetitle || "Share title";
+  const text = props.sharetext || "Share text";
+  if (directLink === "undefined") {
+    return alert("error: message link undefined!");
+  }
+  if (window.navigator.share) {
+    window.navigator
+      .share({
+      title,
+      text,
+      url: directLink,
+    })
+      .catch((error) => console.error("Error on web share", error));
+  }
+  else {
+    alert("Not on a supported device");
+  }
+}
+function FacebookShare(directLink, res) {
+  var _a, _b;
+  if (((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) === "undefined" ||
+    directLink === "undefined") {
+    return alert("error: message link undefined!");
+  }
+  if (typeof SquatchAndroid.shareOnFacebook !== "undefined") {
+    return SquatchAndroid.shareOnFacebook(directLink, res.data.viewer.messageLink);
+  }
+  else {
+    return GenericShare(res);
+  }
+}
+function GenericShare(res) {
+  var _a, _b;
+  return ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) ? window.open(res.data.viewer.messageLink)
+    : alert("error: message link undefined!");
+}
+function useShareButton(props) {
+  var _a, _b;
+  const { sharetitle, sharetext, medium } = props;
+  const programId = props.programId ? props.programId : index_module.M();
+  const user = index_module.ne();
+  const variables = {
+    engagementMedium: index_module.x(),
+    programId: programId,
+    shareMedium: medium.toUpperCase(),
+  };
+  // only queries if a programId is available
+  const res = index_module.mn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
+  const environment = index_module.D();
+  const hide = (medium.toLocaleUpperCase() === "SMS" &&
+    window.orientation === undefined) ||
+    (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
+  function onClick() {
+    if (medium.toLocaleUpperCase() === "FACEBOOK" &&
+      environment.type === "SquatchAndroid") {
+      FacebookShare(directLink, res);
+    }
+    else if (medium.toLocaleUpperCase() === "DIRECT") {
+      NativeShare({ sharetitle, sharetext }, directLink);
+    }
+    else {
+      GenericShare(res);
+    }
+  }
+  return { ...props, loading: res.loading, onClick, hide };
+}
+
+function PortalChangePasswordView(props) {
+  const { states, callbacks } = props;
+  const style = {
+    Dialog: {
+      padding: "0",
+      "&::part(close-button)": {
+        "margin-top": "var(--sl-spacing-medium)",
+      },
+      "&::part(body)": {
+        padding: "0 var(--sl-spacing-x-large) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
+      },
+    },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+    Success: {
+      "&::part(successalert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+    InputContainer: {
+      "& > :not(:last-child)": {
+        "margin-bottom": "var(--sl-spacing-x-large)",
+      },
+    },
+    CancelButton: {
+      width: "25%",
+      margin: "var(--sl-spacing-large) auto",
+    },
+    PasswordField: {
+      marginBottom: "var(--sl-spacing-large) !important",
+      display: "block",
+    },
+    ChangePasswordButton: {
+      paddingTop: "var(--sl-spacing-x-large)",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
+      index.h(sqmPortalSectionView.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 }),
+              index.h("sl-input", { exportparts: "label: input-label", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
+            index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
+              index.h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              index.h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+      }))),
+    index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      labelMargin: "x-large",
+      padding: "xxx-large",
+      label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
+      content: (index.h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+    }),
+      index.h("style", { type: "text/css" }, styleString))));
+}
+
+const style$3 = {
+  Wrapper: mixins.AuthWrapper,
+  Column: mixins.AuthColumn,
+  ForgotButtonContainer: {
+    display: "inline",
+    cursor: "pointer",
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "#AAAAAA",
+    margin: "0",
+  },
+  ButtonsContainer: mixins.AuthButtonsContainer,
+};
+const vanillaStyle$1 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+function PortalLoginView(props) {
+  const { states, callbacks, content } = props;
+  return (index.h("div", { class: sheet$3.classes.Wrapper },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$3),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+    index.h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit },
+      props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      index.h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      index.h("div", null,
+        index.h("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
+        index.h("div", { class: sheet$3.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      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 || "Login"),
+        content.secondaryButton))));
+}
+
+const style$4 = {
+  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$2 = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+function PortalRegisterView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  return (index.h("div", { class: sheet$4.classes.Wrapper },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$2,
+      styleString$4),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+    index.h("sl-form", { class: sheet$4.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", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return "Cannot be empty";
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return "Must be a valid email address";
+          }
+        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet$4.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          "Cannot be empty",
+      }
+        : [])))),
+      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
+      content.passwordField,
+      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+        class: sheet$4.classes.ErrorStyle,
+        helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
+          "Cannot be empty",
+      }
+        : [])))),
+      content.terms,
+      index.h("div", { class: sheet$4.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}
+
+const style$5 = {
+  Description: {
+    "& input[type=checkbox]": {
+      display: "none",
+    },
+    "& input:checked ~ .details": {
+      transform: "rotate(-180deg)",
+    },
+    "& .details": {
+      position: "absolute",
+      top: "var(--sl-spacing-medium)",
+      right: "var(--sl-spacing-medium)",
+      color: "var(--sl-color-neutral-700)",
+      fontSize: "var(--sl-font-size-large)",
+      "& :hover": {
+        color: "var(--sl-color-primary-700)",
+      },
+      transformOrigin: "50% 37%",
+      transition: "transform var(--sl-transition-medium) ease",
+      cursor: "pointer",
+    },
+    "& input:checked ~ .summary": {
+      transition: "all var(--sl-transition-medium) ease",
+      maxHeight: "300px",
+      marginBottom: "var(--sl-spacing-x-large)",
+    },
+    "& input:checked ~ .summary[progress-bar]": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "& .summary": {
+      display: "block",
+      overflow: "hidden",
+      fontSize: "var(--sl-font-size-small)",
+      maxHeight: "0px",
+      transition: "all var(--sl-transition-fast) ease-out",
+      marginBottom: "var(--sl-spacing-medium)",
+    },
+  },
+};
+const sheet$5 = JSS.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
+function Details(props) {
+  const rid = Math.random().toString(36).slice(2);
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString$5),
+    index.h("span", { class: sheet$5.classes.Description },
+      index.h("input", { type: "checkbox", id: "details-" + rid }),
+      index.h("label", { class: "details", htmlFor: "details-" + rid },
+        index.h("sl-icon", { name: "chevron-down" })),
+      index.h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
+}
+
+const Gift = () => {
+  return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#F2C94C" }),
+    index.h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#EB5757" })));
+};
+
+const style$6 = {
+  ProgressBar: {
+    "& .progress-bar": {
+      height: "0",
+      marginTop: "var(--sl-spacing-large)",
+      marginBottom: "var(--sl-spacing-xxx-large)",
+      marginRight: "var(--sl-spacing-x-small)",
+      fontSize: "var(--sl-font-size-x-small)",
+      display: "grid",
+      lineHeight: "45px",
+      userSelect: "none",
+    },
+    "&[data-steps]": {
+      marginTop: "calc(-1*var(--sl-spacing-x-small))",
+    },
+    "&[data-steps]  .progress-bar": {
+      marginTop: "var(--sl-spacing-medium)",
+    },
+    "&[data-expired]  .progress-bar": {
+      filter: "grayscale(1)",
+    },
+    "& .progress-bar.repeatable-steps": {
+      marginLeft: "var(--sl-spacing-x-small)",
+    },
+    "& .filled:after": {
+      content: '""',
+      display: "flex",
+      width: "100%",
+      height: "4px",
+      borderRadius: "4px",
+      backgroundColor: "var(--sl-color-primary-300)",
+    },
+    "& .progress": {
+      display: "block",
+      textAlign: "center",
+      marginLeft: "-100px",
+      marginRight: "-100px",
+    },
+    "& .progress::after": {
+      content: '""',
+      width: "12px",
+      height: "12px",
+      display: "flex",
+      backgroundColor: "var(--sl-color-primary-300)",
+      borderRadius: "50%",
+      position: "relative",
+      left: "47%",
+      top: "-85%",
+    },
+    "& .progress.bg:after": {
+      width: "0",
+      height: "0",
+      border: "none",
+    },
+    "& .progress.top": {
+      position: "relative",
+      top: "-40px",
+    },
+    "& .progress.top:after": {
+      top: "-16%",
+    },
+    "& .empty": {
+      display: "block",
+      textAlign: "center",
+      marginLeft: "-100px",
+      marginRight: "-100px",
+    },
+    "& .empty::after": {
+      content: '""',
+      width: "12px",
+      height: "12px",
+      border: "2px solid #E0E0E0",
+      margin: "-2px",
+      display: "flex",
+      backgroundColor: "white",
+      borderRadius: "50%",
+      position: "relative",
+      left: "47%",
+      top: "-85%",
+    },
+    "& .empty.bg:after": {
+      width: "0",
+      height: "0",
+      border: "none",
+    },
+    "& .remain:after": {
+      content: '""',
+      display: "flex",
+      width: "100%",
+      height: "4px",
+      borderRadius: "4px",
+      backgroundColor: "#E0E0E0",
+    },
+    "& .gift.bw": {
+      filter: "grayscale(100%)",
+    },
+    "& .gift.start": {
+      transform: "scale(80%)",
+      top: "-20px",
+    },
+    "& .gift": {
+      textAlign: "center",
+      marginLeft: "-100px",
+      marginRight: "-100px",
+      position: "relative",
+      top: "-18px",
+    },
+  },
+};
+const sheet$6 = JSS.createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
+const styleString$6 = sheet$6.toString();
+function ProgressBarView(props) {
+  var _a;
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, finite = 0, } = props;
+  let aggregate = buildProgressBar(repeatable, steps, props);
+  const { columns, items } = aggregate;
+  //@ts-ignore
+  console.log("PROGRESS BAR PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
+  console.log({ props });
+  return (index.h("div", { class: sheet$6.classes.ProgressBar, "data-expired": expired, "data-steps": steps, "data-done": goal <= progress },
+    index.h("style", { type: "text/css" }, styleString$6),
+    index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
+        (Boolean(finite) && progress > 2 * goal)
+        ? "progress-bar repeatable-steps"
+        : "progress-bar", style: {
+        gridTemplateColumns: columns,
+        marginLeft: progress === 0 && !steps ? "var(--sl-spacing-x-small)" : "",
+      } }, items)));
+}
+function buildProgressBar(repeatable, steps, props) {
+  if (repeatable) {
+    if (steps) {
+      return addStepsRepeatable(props);
+    }
+    else {
+      return addLinearRepeatable(props);
+    }
+  }
+  // non repeatable
+  else {
+    if (steps) {
+      return addSteps(props);
+    }
+    else {
+      return addLinear(props);
+    }
+  }
+}
+function addSteps({ progress, goal }) {
+  const items = [];
+  const columns = [];
+  let ratio = 1 / goal;
+  for (let i = 1; i < goal; i++) {
+    columns.push(ratio + "fr");
+    columns.push("0fr");
+    if (i > progress) {
+      items.push(index.h("div", { class: "remain" }));
+      items.push(index.h("div", { class: "empty" }, i));
+    }
+    else {
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: "progress" }, i));
+    }
+  }
+  columns.push(ratio + "fr");
+  columns.push("0fr");
+  // reward success
+  if (goal <= progress) {
+    columns.push("0fr");
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: "progress bg" }, goal));
+    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+  }
+  // reward fail
+  else {
+    columns.push("0fr");
+    items.push(index.h("div", { class: "remain" }));
+    items.push(index.h("div", { class: "empty bg" }, goal));
+    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+  }
+  return {
+    items,
+    columns: columns.join(" "),
+  };
+}
+function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
+  let repetitions = Math.floor(progress / goal);
+  let ratio = ((progress % goal) / goal) * 0.5;
+  const items = [];
+  let columns = "";
+  // 0 repetition
+  if (repetitions == 0) {
+    columns = ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr 0.5fr 0fr 0fr";
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
+    items.push(index.h("div", { class: "remain" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
+    items.push(index.h("div", { class: progress == goal ? "gift" : "gift bw" },
+      index.h(Gift, null)));
+    items.push(index.h("div", { class: "remain" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+  }
+  // single repetition
+  else if (repetitions == 1) {
+    columns =
+      "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
+    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
+    items.push(index.h("div", { class: "remain" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+  }
+  // finite repetition hit
+  else if (finite && repetitions >= finite) {
+    if (repetitions > 2) {
+      items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
+      items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+      columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+    }
+    else {
+      columns = "0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+    }
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
+    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
+    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+  }
+  // multiple repetitions
+  else {
+    columns =
+      "0fr 0fr 0.5fr 0fr 0fr " +
+        ratio +
+        "fr 0fr " +
+        (0.5 - ratio) +
+        "fr 0fr 0fr";
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
+    items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
+    items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
+    items.push(index.h("div", { class: "remain" }));
+    items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
+    items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+  }
+  return { items, columns };
+}
+function addStepsRepeatable({ progress, goal, finite, }) {
+  const items = [];
+  const columns = [];
+  let repetitions = Math.floor(progress / goal);
+  // no or single repetition
+  if (repetitions < 2) {
+    let ratio = 1 / goal;
+    for (let i = 1; i < goal * 2 + 1; i++) {
+      columns.push(ratio + "fr");
+      columns.push("0fr");
+      if (i > progress) {
+        if (i == goal) {
+          columns.push("0fr");
+          items.push(index.h("div", { class: "remain" }));
+          items.push(index.h("div", { class: "empty bg" }, goal));
+          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+        }
+        else if (i == goal * 2) {
+          columns.push("0fr");
+          columns.push("0fr");
+          items.push(index.h("div", { class: "remain" }));
+          items.push(index.h("div", { class: "empty bg" }, goal * 2));
+          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+        }
+        else {
+          items.push(index.h("div", { class: "remain" }));
+          items.push(index.h("div", { class: "empty" }, i));
+        }
+      }
+      else if (i == goal) {
+        columns.push("0fr");
+        items.push(index.h("div", { class: "filled" }));
+        items.push(index.h("div", { class: "progress bg" }, i));
+        items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+      }
+      else {
+        items.push(index.h("div", { class: "filled" }));
+        items.push(index.h("div", { class: "progress" }, i));
+      }
+    }
+  }
+  // finite repetition hit
+  else if (finite && repetitions >= finite) {
+    let ratio = 1 / goal;
+    if (repetitions > 2) {
+      columns.push("0fr");
+      columns.push("0fr");
+      items.push(index.h("div", { class: "progress bg" }, goal * (finite - 2)));
+      items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+    }
+    for (let i = 1; i < goal * 2 + 1; i++) {
+      columns.push(ratio + "fr");
+      columns.push("0fr");
+      if (i > progress) {
+        if (i == goal) {
+          columns.push("0fr");
+          items.push(index.h("div", { class: "remain" }));
+          items.push(index.h("div", { class: "progress bg" }, goal * (finite - 1)));
+          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+        }
+      }
+      else if (i == goal) {
+        columns.push("0fr");
+        items.push(index.h("div", { class: "filled" }));
+        items.push(index.h("div", { class: "progress bg" }, goal * (finite - 1)));
+        items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+      }
+      else if (i == goal * 2) {
+        columns.push("0fr");
+        columns.push("0fr");
+        items.push(index.h("div", { class: "filled" }));
+        items.push(index.h("div", { class: "progress bg" }, goal * finite));
+        items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+      }
+      else {
+        items.push(index.h("div", { class: "filled" }));
+        items.push(index.h("div", { class: "progress" }, i + goal * (finite - 2)));
+      }
+    }
+  }
+  // case repetition many
+  else {
+    let position = (progress % goal) + goal;
+    let ratio = 1 / goal;
+    columns.push("0fr");
+    columns.push("0fr");
+    items.push(index.h("div", { class: "progress bg" }, goal * (repetitions - 1)));
+    items.push(index.h("div", { class: "gift start" }, index.h(Gift, null)));
+    for (let i = 1; i < goal * 2 + 1; i++) {
+      columns.push(ratio + "fr");
+      columns.push("0fr");
+      if (i <= goal) {
+        if (i == goal) {
+          columns.push("0fr");
+          items.push(index.h("div", { class: "filled" }));
+          items.push(index.h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
+          items.push(index.h("div", { class: "gift" }, index.h(Gift, null)));
+        }
+        else {
+          items.push(index.h("div", { class: "filled" }));
+          items.push(index.h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+        }
+      }
+      else if (i > position) {
+        if (i == goal * 2) {
+          columns.push("0fr");
+          columns.push("0fr");
+          items.push(index.h("div", { class: "remain" }));
+          items.push(index.h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
+          items.push(index.h("div", { class: "gift bw" }, index.h(Gift, null)));
+        }
+        else {
+          items.push(index.h("div", { class: "remain" }));
+          items.push(index.h("div", { class: "empty" }, i + goal * (repetitions - 1)));
+        }
+      }
+      else {
+        items.push(index.h("div", { class: "filled" }));
+        items.push(index.h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+      }
+    }
+  }
+  return { items, columns: columns.join(" ") };
+}
+function addLinear({ progress, goal, progressBarUnit, }) {
+  const items = [];
+  let columns = "";
+  const ratio = progress / goal;
+  columns =
+    clamp(ratio, 0, 1) + "fr 0fr " + clamp(1 - ratio, 0, 1) + "fr 0fr 0fr";
+  items.push(index.h("div", { class: "filled" }));
+  items.push(index.h("div", { class: clamp(progress, 0, goal) == goal ? "progress top bg" : "progress top" }, clamp(progress, 0, goal) == goal
+    ? ""
+    : progressBarUnit + clamp(progress, 0, goal)));
+  items.push(index.h("div", { class: "remain" }));
+  items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal));
+  items.push(index.h("div", { class: clamp(progress, 0, goal) == goal ? "gift" : "gift bw" },
+    index.h(Gift, null)));
+  return { items, columns };
+}
+function clamp(x, min, max) {
+  return Math.min(Math.max(x, min), max);
+}
+
+const checkmark_circle = () => {
+  return (index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.81818 10C1.81818 5.48131 5.48131 1.81818 10 1.81818C14.5187 1.81818 18.1818 5.48131 18.1818 10C18.1818 14.5187 14.5187 18.1818 10 18.1818C5.48131 18.1818 1.81818 14.5187 1.81818 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM15.7692 6.96189C16.1398 6.48683 16.0551 5.80132 15.58 5.43077C15.1049 5.06022 14.4194 5.14495 14.0489 5.62001L8.72994 12.4391L5.86229 9.5715C5.43627 9.14548 4.74554 9.14548 4.31952 9.5715C3.89349 9.99752 3.89349 10.6882 4.31952 11.1143L8.05976 14.8545C8.28083 15.0756 8.58613 15.1912 8.89818 15.172C9.21023 15.1528 9.49905 15.0006 9.69133 14.7541L15.7692 6.96189Z", fill: "currentColor" })));
+};
+const checkmark_filled = () => {
+  return (index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.65 6.19231C15.0459 6.5011 15.1165 7.07236 14.8077 7.46825L9.74277 13.9617C9.58254 14.1672 9.34186 14.294 9.08182 14.31C8.82178 14.326 8.56736 14.2297 8.38314 14.0454L5.26627 10.9286C4.91124 10.5735 4.91124 9.99794 5.26627 9.64292C5.62129 9.2879 6.19689 9.2879 6.55191 9.64292L8.94162 12.0326L13.3741 6.35001C13.6828 5.95412 14.2541 5.88352 14.65 6.19231Z", fill: "white" })));
+};
+const arrow_left_right = () => {
+  return (index.h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
+};
+
+const style$7 = {
+  TaskCard: {
+    display: "inline-block",
+    width: "100%",
+    "& .main": {
+      position: "relative",
+      boxSizing: "border-box",
+      background: "var(--sl-color-neutral-0)",
+      border: "1px solid var(--sl-color-neutral-200)",
+      borderRadius: "var(--sl-border-radius-medium)",
+      boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      color: "var(--sl-color-neutral-600)",
+    },
+    "& .main.complete": {
+      background: "var(--sl-color-primary-50)",
+      borderColor: "var(--sl-color-primary-500)",
+    },
+    "& .main.expired": {
+      color: "var(--sl-color-neutral-600)",
+      background: "var(--sl-color-neutral-50)",
+    },
+    "& .title": {
+      fontSize: "var(--sl-font-size-medium)",
+      color: "var(--sl-color-neutral-950)",
+    },
+    "& .container": {
+      margin: "var(--sl-spacing-medium)",
+    },
+    "& .container.subdued": {
+      opacity: "0.45",
+    },
+    "& .container > div": {
+      margin: "var(--sl-spacing-medium) 0",
+    },
+  },
+  NotStarted: {
+    fontSize: "var(--sl-font-size-small)",
+    padding: "var(--sl-spacing-medium)",
+    color: "var(--sl-color-primary-600)",
+    border: "1px solid var(--sl-color-neutral-200)",
+    borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+    borderBottom: "none",
+    background: "var(--sl-color-primary-50)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .icon": {
+      position: "relative",
+      top: "0.1em",
+      marginRight: "var(--sl-spacing-small)",
+      color: "var(--sl-color-primary-500)",
+    },
+  },
+  Ended: {
+    fontSize: "var(--sl-font-size-small)",
+    padding: "var(--sl-spacing-medium)",
+    color: "var(--sl-color-warning-600)",
+    border: "1px solid var(--sl-color-neutral-200)",
+    borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+    borderBottom: "none",
+    background: "var(--sl-color-warning-50)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .icon": {
+      position: "relative",
+      top: "0.1em",
+      marginRight: "var(--sl-spacing-small)",
+      color: "var(--sl-color-warning-500)",
+    },
+  },
+  Header: {
+    display: "flex",
+    "& .icon": {
+      position: "relative",
+      top: "5%",
+      alignSelf: "center",
+      lineHeight: "0",
+      color: "var(--sl-color-primary-400)",
+      fontSize: "var(--sl-font-size-large)",
+      marginRight: "var(--sl-spacing-x-small)",
+    },
+    "& .value": {
+      alignSelf: "center",
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-neutral-950)",
+      lineHeight: "100%",
+      marginRight: "var(--sl-spacing-xx-small)",
+    },
+    "& .text": {
+      alignSelf: "end",
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-x-small)",
+      color: "var(--sl-color-neutral-950)",
+      lineHeight: "var(--sl-font-size-medium)",
+      marginRight: "var(--sl-spacing-xx-small)",
+    },
+    "& .end": {
+      color: "var(--sl-color-warning-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      marginBottom: "var(--sl-spacing-xx-small)",
+    },
+    "& .neutral": {
+      color: "var(--sl-color-neutral-400)",
+    },
+  },
+  Footer: {
+    display: "flex",
+    "& .icon": {
+      fontSize: "var(--sl-font-size-xx-small)",
+      marginRight: "var(--sl-spacing-xx-small)",
+      verticalAlign: "middle",
+    },
+    "& .text": {
+      marginTop: "auto",
+      verticalAlign: "text-bottom",
+      fontSize: "var(--sl-font-size-x-small)",
+      color: "var(--sl-color-neutral-400)",
+    },
+    "& .success": {
+      color: "var(--sl-color-primary-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& .action": {
+      marginTop: "auto",
+      marginLeft: "auto",
+      "&::part(base)": {
+        color: "var(--sl-color-neutral-0)",
+        borderRadius: "var(--sl-border-radius-medium)",
+      },
+      "&.disabled::part(base)": {
+        border: "1px solid var(--sl-color-primary-400)",
+        background: "var(--sl-color-primary-400)",
+      },
+      "&.neutral::part(base)": {
+        border: "1px solid var(--sl-color-neutral-400)",
+        background: "var(--sl-color-neutral-400)",
+      },
+    },
+    "& .neutral": {
+      color: "var(--sl-color-neutral-400)",
+    },
+    "& .datetime": {
+      display: "block",
+      marginTop: "var(--sl-spacing-xx-small)",
+      color: "var(--sl-color-neutral-400)",
+    },
+  },
+};
+const sheet$7 = JSS.createStyleSheet(style$7);
+const styleString$7 = sheet$7.toString();
+function TaskCardView(props) {
+  var _a, _b, _c;
+  console.log("TASK CARD PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
+  console.log({ props });
+  const { callbacks, states, content } = props;
+  const dateStart = content.rewardDuration &&
+    luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
+  const dateEnd = content.rewardDuration &&
+    luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[1]);
+  const dateToday = luxon.luxon.DateTime.now();
+  if (content.displayDuration) {
+    const start = (_b = content.displayDuration.split("/")) === null || _b === void 0 ? void 0 : _b[0];
+    const end = (_c = content.displayDuration.split("/")) === null || _c === void 0 ? void 0 : _c[1];
+    const displayDateStart = start ? luxon.luxon.DateTime.fromISO(start) : dateToday;
+    const displayDateEnd = end ? luxon.luxon.DateTime.fromISO(end) : dateToday;
+    console.log({ displayDateStart, dateToday, displayDateEnd });
+    if (dateToday < displayDateStart || dateToday > displayDateEnd)
+      return index.h("span", null);
+  }
+  const checkmark_circle$1 = checkmark_circle();
+  const checkmark_filled$1 = checkmark_filled();
+  const arrow_left_right$1 = arrow_left_right();
+  const showComplete = states.progress >= content.goal;
+  const repetitions = content.showProgressBar
+    ? Math.floor(states.progress / content.goal)
+    : states.progress;
+  const taskComplete = (showComplete && content.repeatable === false) ||
+    (content.finite && states.progress >= content.finite * content.goal);
+  const taskEnded = content.rewardDuration && dateEnd <= dateToday;
+  const taskNotStarted = content.rewardDuration && dateToday <= dateStart;
+  const taskUnavailable = taskEnded || taskNotStarted;
+  const vanillaStyle = `
+	:host{
+		display: block;
+		margin-bottom: var(--sl-spacing-large);
+	}
+  `;
+  return (index.h("div", { class: sheet$7.classes.TaskCard },
+    index.h("style", { type: "text/css" },
+      styleString$7,
+      vanillaStyle),
+    !states.loading && taskNotStarted && (index.h("div", { class: sheet$7.classes.NotStarted },
+      index.h("span", { class: "icon" },
+        index.h("sl-icon", { name: "info-circle-fill" })),
+      global.intl.formatMessage({
+        id: "startsOnMessage",
+        defaultMessage: content.startsOnMessage,
+      }, {
+        startDate: dateStart
+          .setLocale(utils.luxonLocale(states.locale))
+          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
+      }))),
+    !states.loading && taskEnded && (index.h("div", { class: sheet$7.classes.Ended },
+      index.h("span", { class: "icon" },
+        index.h("sl-icon", { name: "exclamation-triangle-fill" })),
+      global.intl.formatMessage({
+        id: "endedMessage",
+        defaultMessage: content.endedMessage,
+      }, {
+        endDate: dateEnd
+          .setLocale(utils.luxonLocale(states.locale))
+          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
+      }))),
+    index.h("div", { style: {
+        borderRadius: taskUnavailable &&
+          "0 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium)",
+      }, class: taskUnavailable
+        ? "main expired"
+        : taskComplete
+          ? "main complete"
+          : "main" },
+      index.h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
+        index.h("div", { class: sheet$7.classes.Header }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
+          showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
+          index.h("span", { class: "value" }, content.rewardAmount),
+          index.h("span", { class: "text" }, content.rewardUnit)))),
+        states.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: "title", style: {
+            marginBottom: !content.description
+              ? content.steps
+                ? "var(--sl-spacing-x-large)"
+                : content.showProgressBar
+                  ? "var(--sl-spacing-xx-large)"
+                  : ""
+              : "",
+          } }, content.cardTitle)),
+        states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && index.h(Details, Object.assign({}, props))),
+        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
+        index.h("div", { class: sheet$7.classes.Footer }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
+          index.h("span", { class: "text" },
+            content.repeatable && (index.h("div", null,
+              index.h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "icon neutral"
+                    : "icon success"
+                  : "icon" }, arrow_left_right$1),
+              index.h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "neutral"
+                    : "success"
+                  : "" }, global.intl.formatMessage({
+                id: "completedMessage",
+                defaultMessage: content.completedText,
+              }, {
+                finite: content.finite,
+                count: content.finite
+                  ? Math.min(repetitions, content.finite)
+                  : repetitions,
+              })))),
+            dateEnd && !taskUnavailable && (index.h("span", { class: "datetime" }, global.intl.formatMessage({
+              id: "expiryMessage",
+              defaultMessage: content.expiryMessage,
+            }, {
+              endDate: dateEnd
+                .setLocale(utils.luxonLocale(states.locale))
+                .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
+            })))),
+          index.h("sl-button", { class: taskUnavailable
+              ? "action neutral"
+              : taskComplete
+                ? "action disabled"
+                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable }, content.buttonText))))))));
+}
+
+function ReferralIframeView(props) {
+  const { states, data } = props;
+  const { content } = states;
+  const style = {
+    Container: {
+      position: "relative",
+      width: content.iframeWidth,
+      height: content.iframeHeight,
+    },
+    IFrame: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      border: "0",
+      top: "0",
+      left: "0",
+      right: "0",
+    },
+  };
+  // JSS config
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
+}
+
+const CheckMark = () => (index.h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.58.23c.475.371.56 1.057.19 1.532L5.69 9.554a1.091 1.091 0 0 1-1.631.1L.32 5.915a1.09 1.09 0 1 1 1.542-1.542L4.73 7.239 10.049.42A1.09 1.09 0 0 1 11.58.23Z", fill: "#fff" })));
+const CheckmarkFilled = () => (index.h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z", fill: "currentColor" }),
+  index.h("path", { d: "M5.68394 8.77046C5.28103 8.39273 4.64819 8.41315 4.27046 8.81606C3.89273 9.21897 3.91315 9.85181 4.31606 10.2295L5.68394 8.77046ZM7.66667 12L6.98273 12.7295C7.36738 13.0902 7.96595 13.0902 8.35061 12.7295L7.66667 12ZM13.6839 7.72954C14.0869 7.35181 14.1073 6.71897 13.7295 6.31606C13.3518 5.91315 12.719 5.89273 12.3161 6.27046L13.6839 7.72954ZM4.31606 10.2295L6.98273 12.7295L8.35061 11.2705L5.68394 8.77046L4.31606 10.2295ZM8.35061 12.7295L13.6839 7.72954L12.3161 6.27046L6.98273 11.2705L8.35061 12.7295Z", fill: "white" })));
+const Gift$1 = () => (index.h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M40.18 126h83.663a3 3 0 0 0 3-3V73.966a3 3 0 0 0-3-3H40.18a3 3 0 0 0-3 3V123a3 3 0 0 0 3 3Z", fill: "#FFD34F" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
+  index.h("path", { d: "M133.039 74.224a2.18 2.18 0 0 0 2.187-2.172v-19.19c0-1.2-.98-2.172-2.187-2.172H31.347a2.18 2.18 0 0 0-2.187 2.172v19.19c0 1.2.98 2.172 2.187 2.172H133.04Z", fill: "#FFC000" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M123.287 35.172c0 6.056-9.155 15.226-13.76 15.654H88.888V126H75.141V50.826H58.534c-9.462-2.038-17.803-9.258-17.803-16.944 0-7.49 3.274-13.422 9.23-15.983 5.693-2.446 12.265-1.105 17.46 2.479 6.378 4.398 9.956 12.654 13.202 20.144.284.657.567 1.308.848 1.95.274-.608.55-1.228.83-1.856 3.216-7.22 6.887-15.464 13.057-19.89 5.454-3.913 12.387-5.39 18.38-2.711 6.197 2.77 9.549 9.127 9.549 17.157Zm-23.306-8.266c3.305-2.37 7.262-2.8 10.645 0 2.946 2.44 3.103 3.588 3.482 6.351l.067.483c0 4.09-3.549 10.252-7.097 10.252-2.515 0-4.489-.022-6.34-.041-3.375-.036-6.337-.068-11.403.04.966-1.86 1.737-3.644 2.473-5.346 1.967-4.553 3.678-8.515 8.173-11.739Zm-39.034 0c-1.6-1.103-5.268-.61-6.79.043-1.257.54-3.134 2.19-3.134 6.933 0 4.61 7.511 8.59 7.511 8.59s5.962 1.52 16.607 1.52c-3.624-8.922-8.757-13.336-14.194-17.086Z", fill: "#EB5757" }),
+  index.h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
+  index.h("g", { filter: "url(#a)" },
+    index.h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
+  index.h("path", { d: "M150.446 79.134a.5.5 0 0 1 .9 0l1.133 2.336c.05.102.132.184.234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.503.503 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.499.499 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.343-1.122a.499.499 0 0 0 .234-.233l1.134-2.336Z", fill: "#FAB6B6" }),
+  index.h("path", { d: "M14.86 29.168a.5.5 0 0 1 .9 0l1.133 2.336a.5.5 0 0 0 .234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.5.5 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.5.5 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.344-1.122a.5.5 0 0 0 .233-.233l1.134-2.336Z", fill: "#F4EFBC" }),
+  index.h("path", { d: "m125.382 0 .712 1.466 1.475.706-1.475.707-.712 1.466-.711-1.466-1.476-.707 1.476-.706.711-1.466Z", fill: "#FDA802" }),
+  index.h("path", { d: "m2.187 103.552.711 1.466 1.476.706-1.476.707-.711 1.466-.711-1.466L0 105.724l1.476-.706.71-1.466Z", fill: "#E4599C" }),
+  index.h("defs", null,
+    index.h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
+      index.h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
+      index.h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+      index.h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));
+
+function Dot({ active, completed, incomplete, stage, }) {
+  return (index.h("div", { style: {
+      display: "flex",
+    } },
+    index.h("div", { style: {
+        backgroundColor: completed
+          ? "var(--sl-color-success-500)"
+          : incomplete
+            ? "var(--sl-color-neutral-200)"
+            : "var(--sl-color-neutral-0)",
+        border: active
+          ? "1px solid var(--sl-color-success-500)"
+          : incomplete
+            ? "1px solid var(--sl-color-neutral-200)"
+            : "1px solid var(--sl-color-success-500)",
+        borderRadius: "50%",
+        width: "23px",
+        height: "23px",
+        margin: "-11px",
+        zIndex: "1",
+        boxSizing: "content-box",
+      } }, completed ? (index.h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
+      index.h(CheckMark, null))) : (index.h("div", { style: {
+        color: active
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-neutral-50)",
+        width: "23px",
+        lineHeight: "24px",
+        textAlign: "center",
+        position: "relative",
+      } }, stage + 1)))));
+}
+function ProgressLine({ incomplete = false, active = false, invisible = false, }) {
+  return (index.h("div", { style: {
+      content: "''",
+      flex: "0.5 0.5 0",
+      height: "4px",
+      borderRadius: "4px",
+      background: incomplete || active
+        ? "var(--sl-color-neutral-200)"
+        : "var(--sl-color-success-500)",
+      position: "relative",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      columnGap: "50px",
+      marginRight: "-2px",
+      boxSizing: "content-box",
+      opacity: invisible ? "0" : "1",
+    } }));
+}
+function Progress({ active, completed, incomplete, stage }) {
+  return [
+    index.h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
+    index.h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
+    index.h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
+  ];
+}
+function ProgressBar({ stageCount, currentStage, }) {
+  return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
+}
+
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+function RewardExchangeView(props) {
+  const { states, data, callbacks, refs } = props;
+  const { selectedItem, selectedStep } = states;
+  const stageProgressList = {
+    chooseReward: states.content.text.chooseRewardTitle,
+    chooseAmount: states.content.text.chooseAmountTitle,
+    confirmation: states.content.text.confirmationTitle,
+  };
+  const style = {
+    HostBlock: mixins.HostBlock,
+    Container: {
+      minWidth: "300px",
+      position: "relative",
+    },
+    FullImage: {
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "250px",
+      display: "flex",
+      margin: "0 auto",
+    },
+    Select: {
+      "&::part(label)": {
+        color: "var(--sl-color-primary-500)",
+      },
+      "&::part(menu)": {
+        maxHeight: "50vh",
+      },
+      "& sl-menu-item::part(checked-icon)": {
+        top: "8px",
+      },
+      "& sl-menu-item::part(base)": {
+        flexDirection: "column",
+      },
+      "& sl-menu-item::part(base):focus": {
+        background: "transparent",
+        color: "var(--sl-color-gray-700)",
+      },
+    },
+    ProgressBar: {
+      maxWidth: "350px",
+      width: "100%",
+      margin: "auto",
+      marginBottom: "var(--sl-spacing-xxx-large)",
+      "& .text-area": {
+        marginTop: "5px",
+        display: "flex",
+        justifyContent: "center",
+        textAlign: "center",
+        whiteSpace: "nowrap",
+        marginBottom: "6px",
+        "& .text": {
+          marginBottom: "var(--sl-spacing-x-small)",
+          flex: "1 1 0",
+        },
+        "& .text.subdued": {
+          color: "var(--sl-color-neutral-200)",
+        },
+      },
+    },
+    CardLayout: {
+      display: "flex",
+      width: "100%",
+      borderRadius: "3px",
+      background: "rgba(0, 0, 0, 0)",
+    },
+    Card: {
+      display: "flex",
+      userSelect: "none",
+      height: "120px",
+      "&::part(base)": {
+        boxShadow: "none",
+        width: "100%",
+      },
+      "&::part(body)": {
+        display: "flex",
+        padding: 0,
+      },
+      "& .selected": {
+        position: "relative",
+        top: "-2%",
+        left: "100%",
+        color: "var(--sl-color-primary-500)",
+        margin: "-9px",
+      },
+    },
+    Image: {
+      padding: "var(--sl-spacing-small)",
+      minWidth: "96px",
+      maxWidth: "96px",
+      "& .image": {
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        borderRadius: "4px",
+      },
+      "& .image.subdued": {
+        filter: "brightness(0.95)",
+        opacity: "0.5",
+      },
+    },
+    Square: {
+      width: "120px",
+      height: "118px",
+      borderRadius: "3px 0 0 3px",
+      "& .image": {
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        borderRadius: "inherit",
+      },
+    },
+    TextArea: {
+      textAlign: "left",
+      padding: "var(--sl-spacing-small)",
+      paddingLeft: "0",
+      "& .title": {
+        fontSize: "var(--sl-font-size-medium)",
+        lineHeight: "var(--sl-line-height-dense)",
+        fontWeight: "600",
+        color: "var(--sl-color-neutral-1000)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
+      },
+      "& .amount": {
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-x-small)",
+        color: "var(--sl-color-neutral-500)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
+      },
+      "& .error": {
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-x-small)",
+        fontWeight: "600",
+        color: "var(--sl-color-warning-600)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
+        "& .icon": {
+          position: "relative",
+          top: "0.1em",
+          marginRight: "var(--sl-spacing-xx-small)",
+        },
+      },
+    },
+    ChooseAmount: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      margin: "var(--sl-spacing-medium) 0",
+      "& .wrapper": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "var(--sl-spacing-xx-large)",
+        "@media (max-width: 799px)": {
+          flexDirection: "column",
+        },
+      },
+      "& .image": {
+        width: "50%",
+        objectFit: "contain",
+        maxWidth: "100%",
+        height: "250px",
+        display: "flex",
+        "@media (max-width: 799px)": {
+          width: "auto",
+        },
+      },
+      "& .text": {
+        width: "50%",
+        maxWidth: "400px",
+        minWidth: "330px",
+        "@media (max-width: 799px)": {
+          width: "auto",
+          margin: "auto",
+        },
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .points": {
+        fontSize: "var(--sl-font-size-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-primary-500)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+        color: "var(--sl-color-neutral-500)",
+        margin: "var(--sl-spacing-medium) 0",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-xx-small)",
+      },
+      "& .space": {
+        marginBottom: "var(--sl-spacing-xxx-large)",
+      },
+      "& sl-menu-item[disabled]::part(label)": {
+        color: "var(--sl-color-neutral-200)",
+      },
+      "& sl-menu-item[disabled]": {
+        "& .step-cost": {
+          color: "var(--sl-color-neutral-200)",
+        },
+      },
+    },
+    SelectItem: {
+      display: "flex",
+      flexDirection: "column",
+      "& > .step-cost": {
+        color: "var(--sl-color-neutral-400)",
+        height: "0",
+        marginBottom: "5px",
+      },
+      "& > .step-value": {
+        margin: "0",
+      },
+    },
+    Success: {
+      textAlign: "center",
+      "& .title": {
+        fontSize: "var(--sl-font-size-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .description": {
+        color: "var(--sl-color-neutral-400)",
+        width: "100%",
+        maxWidth: "350px",
+        margin: "0 auto",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginBottom: "var(--sl-spacing-xx-large)",
+        marginTop: "var(--sl-spacing-xx-small)",
+      },
+    },
+    Grid: {
+      display: "grid",
+      justifyContent: "center",
+      gap: "20px",
+      gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+    },
+    Confirmation: {
+      maxWidth: "800px",
+      margin: "auto",
+      "& .wrapper": {
+        display: "flex",
+        "@media (max-width: 499px)": {
+          flexDirection: "column",
+        },
+      },
+      "& .reward-item-container": {
+        "@media (max-width: 499px)": {
+          display: "flex",
+          flexDirection: "row-reverse",
+          justifyContent: "flex-end",
+          alignItems: "center",
+        },
+      },
+      "& .reward-item-container .reward-title": {
+        paddingBottom: "var(--sl-spacing-medium)",
+        lineHeight: "20px",
+        "@media (max-width: 499px)": {
+          paddingBottom: "none",
+          paddingLeft: "var(--sl-spacing-small)",
+        },
+      },
+      "& .padding": {
+        padding: "var(--sl-spacing-medium) 0",
+        "@media (max-width: 499px)": {
+          padding: "var(--sl-spacing-small) 0",
+        },
+      },
+      "& .field": {
+        width: "30%",
+        textTransform: "uppercase",
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+        color: "var(--sl-color-neutral-400)",
+        textAlign: "left",
+        paddingRight: "var(--sl-spacing-xxx-large)",
+        "@media (max-width: 499px)": {
+          width: "100%",
+          paddingRight: "0",
+          paddingBottom: "0",
+        },
+      },
+      "& .value": {
+        fontSize: "var(--sl-font-size-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .top-border": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+      },
+      "& .image": {
+        width: "200px",
+        "@media (max-width: 499px)": {
+          width: "100px",
+        },
+      },
+    },
+    Button: {
+      display: "flex",
+      flexWrap: "wrap-reverse",
+      margin: "var(--sl-spacing-medium) 0",
+      "& .cancel": {
+        marginLeft: "auto",
+        marginRight: "var(--sl-spacing-medium)",
+        "&::part(base)": {
+          fontWeight: "var(--sl-font-weight-normal)",
+          color: "var(--sl-color-neutral-1000)",
+        },
+        "@media (max-width: 499px)": {
+          width: "100%",
+          marginRight: "0",
+          marginTop: "var(--sl-spacing-small)",
+        },
+      },
+      "& .continue": {
+        "&::part(base)": {
+          background: "var(--sl-color-primary-500)",
+          borderColor: "var(--sl-color-primary-500)",
+          fontWeight: "var(--sl-font-weight-normal)",
+          color: "var(--sl-color-neutral-0)",
+        },
+        "@media (max-width: 499px)": {
+          width: "100%",
+        },
+      },
+      "& .continue.right": {
+        marginLeft: "auto",
+      },
+      "& .continue.center": {
+        margin: "0 auto",
+      },
+    },
+    Confetti: {
+      pointerEvents: "none",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: "0%",
+      left: "0%",
+      zIndex: "1",
+    },
+  };
+  // JSS config
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  function getInput() {
+    var _a, _b, _c;
+    const item = states.selectedItem;
+    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
+      return index.h("span", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
+    if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
+      return (index.h("p", null, global.intl.formatMessage({
+        id: "notEnoughError",
+        defaultMessage: states.content.text.notEnoughError,
+      }, {
+        sourceUnit: item.sourceUnit,
+      })));
+    }
+    // console.log("SELECTED ITEM ", states.selectedStep);
+    // console.log("CALLBACKS ", callbacks);
+    return (index.h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+        var _a, _b, _c, _d, _e;
+        return callbacks.setExchangeState({
+          amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
+          selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
+        });
+      } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
+      // console.log(item.steps);
+      var _a, _b;
+      return (index.h("sl-menu-item", { value: step, disabled: !step.available },
+        step.prettyDestinationValue,
+        " ",
+        index.h("br", null),
+        step.unavailableReasonCode && (index.h("p", { style: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-warning-500)",
+            margin: "0",
+          } }, global.intl.formatMessage({
+          id: "unavailableCode",
+          defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+        }, {
+          unavailableReasonCode: step.unavailableReasonCode,
+          sourceUnit: item.sourceUnit,
+          sourceValue: step.prettySourceValue || item.prettySourceMinValue,
+        }))),
+        index.h("div", { class: "step-cost", slot: "suffix" }, step.prettySourceValue)));
+    })));
+  }
+  function chooseReward() {
+    var _a;
+    return [
+      index.h("div", null,
+        index.h("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.rewardTitle),
+        states.loading ? (loading()) : (index.h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+          var _a, _b, _c, _d, _e;
+          const style = {
+            boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
+              ? "0 0 0 2px var(--sl-color-primary-500)"
+              : "none",
+            borderRadius: "4px",
+          };
+          return (index.h("div", { key: item.key, style: style },
+            index.h("sl-card", { class: sheet.classes.Card, style: {
+                cursor: item.unavailableReasonCode
+                  ? "not-allowed"
+                  : "pointer",
+              }, onClick: () => item.available &&
+                callbacks.setExchangeState({ selectedItem: item }) },
+              item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (index.h("div", { class: "selected" },
+                index.h(CheckmarkFilled, null))),
+              index.h("div", { style: {
+                  display: "flex",
+                  width: "100%",
+                  height: "120px",
+                  borderRadius: "3px",
+                  background: item.unavailableReasonCode
+                    ? "rgba(0, 0, 0, 0.05)"
+                    : "rgba(0, 0, 0, 0)",
+                } },
+                index.h("div", { class: sheet.classes.Image, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  index.h("img", { class: item.unavailableReasonCode
+                      ? "image subdued"
+                      : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                      index.getAssetPath("./assets/Reward-image.png") })),
+                index.h("div", { class: sheet.classes.TextArea, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  index.h("div", { class: "title", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
+                  index.h("div", { class: "amount", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, global.intl.formatMessage({
+                    id: "sourceAmountMessage",
+                    defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
+                  }, {
+                    ruleType: item.ruleType,
+                    sourceValue: item.prettySourceValue,
+                    sourceMinValue: item.prettySourceMinValue,
+                    sourceMaxValue: item.prettySourceMaxValue,
+                  })),
+                  item.unavailableReasonCode && (index.h("div", { class: "error" },
+                    index.h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
+                    global.intl.formatMessage({
+                      id: "unavailableCode",
+                      defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
+                    }, {
+                      unavailableReasonCode: item.unavailableReasonCode,
+                      sourceUnit: item.sourceUnit,
+                      sourceValue: item.prettySourceValue ||
+                        item.prettySourceMinValue,
+                    }))))))));
+        }))),
+        index.h("div", { class: sheet.classes.Button },
+          index.h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
+    ];
+  }
+  function chooseAmount() {
+    var _a, _b, _c, _d;
+    const input = getInput();
+    const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? false
+      : input && !states.amount;
+    console.log("input", input);
+    console.log(states.amount);
+    return (index.h("div", null,
+      index.h("div", { class: sheet.classes.ChooseAmount },
+        index.h("div", { class: "wrapper" },
+          index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+              index.getAssetPath("./assets/Reward-image.png") }),
+          index.h("div", { class: "text" },
+            index.h("div", { class: "title" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
+            ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "points" }, input)) : (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
+            ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", { class: "points" }, input)),
+            index.h("div", { class: "space" }),
+            index.h("div", { class: sheet.classes.Button },
+              index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+              index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))))));
+  }
+  function confirmation() {
+    // console.log(selectedItem);
+    // console.log(selectedStep);
+    const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
+    const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
+    return (index.h("div", null,
+      index.h("h2", { style: { margin: "var(--sl-spacing-large) 0", textAlign: "center" } }, states.content.text.redeemTitle),
+      index.h("div", { class: sheet.classes.Confirmation },
+        index.h("div", { class: "wrapper" },
+          index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
+          index.h("div", { class: "reward-item-container" },
+            index.h("div", { class: "reward-title" }, selectedItem.name),
+            index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                index.getAssetPath("./assets/Reward-image.png") }))),
+        index.h("div", { class: "wrapper padding" },
+          index.h("div", { class: "field" })),
+        amount && (index.h("div", { class: "wrapper top-border padding" },
+          index.h("div", { class: "field" }, states.content.text.rewardAmountTitle),
+          index.h("div", null, amount))),
+        index.h("div", { class: "wrapper top-border padding" },
+          index.h("div", { class: "field" }, states.content.text.costTitle),
+          index.h("div", { class: "value" }, cost)),
+        index.h("div", { class: sheet.classes.Button },
+          index.h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          index.h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
+  }
+  function success() {
+    var _a, _b, _c, _d, _e;
+    // console.log("success");
+    return (index.h("div", { class: sheet.classes.Success },
+      index.h(Gift$1, null),
+      index.h(Confetti, null),
+      index.h("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      index.h("div", { class: "description" }, global.intl.formatMessage({
+        id: "successMessage",
+        defaultMessage: states.content.text.redemptionSuccessText,
+      }, {
+        sourceValue: (_a = states.selectedItem.prettySourceValue) !== null && _a !== void 0 ? _a : (_b = states.selectedStep) === null || _b === void 0 ? void 0 : _b.prettySourceValue,
+        destinationValue: ((_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettyDestinationValue) || ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.name) ||
+          states.selectedItem.globalRewardKey,
+      })),
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { style: {
+          width: "40%",
+          margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+          textAlign: "left",
+          color: "var(--sl-color-neutral-700)",
+        } },
+        states.content.text.promoCode,
+        index.h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_e = states === null || states === void 0 ? void 0 : states.content) === null || _e === void 0 ? void 0 : _e.text.toopTipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+      index.h("div", { class: sheet.classes.Button },
+        index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
+  }
+  const stages = {
+    chooseReward: () => chooseReward(),
+    chooseAmount: () => chooseAmount(),
+    confirmation: () => confirmation(),
+    success: () => success(),
+  };
+  const currentStage = stages[states.redeemStage];
+  function stageMap() {
+    const stageNumber = stageList.indexOf(states.redeemStage);
+    return (index.h("div", { class: sheet.classes.ProgressBar },
+      index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
+        if (stageList.indexOf(stage) <= stageNumber) {
+          return index.h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (index.h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
+      })),
+      index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
+  }
+  function loading() {
+    return (index.h("div", { class: sheet.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+      return (index.h("div", null,
+        index.h("sl-card", { class: sheet.classes.Card },
+          index.h("div", { class: sheet.classes.CardLayout },
+            index.h("div", null,
+              index.h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
+                  margin: "9px",
+                  "--border-radius": "4px",
+                } })),
+            index.h("div", { style: {
+                margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
+                width: "100%",
+              } },
+              index.h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              index.h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              index.h("sl-skeleton", { style: { width: "45%" } }))))));
+    })));
+  }
+  function errorMessage() {
+    return (index.h("sl-alert", { type: "danger", open: true },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.redemptionError));
+  }
+  function queryErrorMessage() {
+    return (index.h("sl-alert", { type: "danger", open: true },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.queryError));
+  }
+  function Confetti() {
+    return (index.h("canvas", { ref: (canvas) => {
+        if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
+          return;
+        refs.canvasRef.current = canvas;
+      }, id: "my-canvas", class: sheet.classes.Confetti }));
+  }
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", null,
+      stageMap(),
+      states.exchangeError && errorMessage(),
+      states.queryError && queryErrorMessage(),
+      currentStage && currentStage(),
+      states.redeemStage === "success")));
+}
+
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false, fueltank = null) => ({
+  states: {
+    content: {
+      text: {
+        buttonText: "Exchange Rewards",
+        notAvailableError: "{unavailableReasonCode, select, NOT_CHAMPION {CUSTOM ERROR MESSAGE } US_TAX {Exceeds tax limit for this year} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }",
+        chooseRewardTitle: "Rewards",
+        chooseAmountTitle: "Select",
+        confirmationTitle: "Confirm",
+        rewardTitle: "Choose a reward",
+        cancelText: "Cancel",
+        backText: "Back",
+        continueText: "Continue",
+        continueToConfirmationText: "Continue to confirmation",
+        redeemText: "Redeem",
+        redeemTitle: "Confirm and redeem",
+        redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
+        doneText: "Done",
+        toolTipText: "Copied!",
+        selectText: "Select amount to receive",
+        sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
+        rewardRedeemedText: "Reward redeemed",
+        redemptionError: "An error occured trying to redeem this reward. Please try again",
+        promoCode: "Promo code",
+        skeletonCardNum: 8,
+        rewardNameTitle: "Reward Name",
+        rewardAmountTitle: "Reward Amount",
+        costTitle: "Cost",
+      },
+    },
+    redeemStage: stage,
+    amount: 0,
+    exchangeError: error,
+    loading: loading,
+    selectedItem: selectedItem,
+    selectedStep: selectedStep,
+    open: false,
+  },
+  data: {
+    exchangeList: data,
+    fuelTankCode: fueltank,
+  },
+  callbacks: {
+    exchangeReward: null,
+    resetState: null,
+    setStage: null,
+    setExchangeState: null,
+    copyFuelTankCode: null,
+    refs: null,
+  },
+  refs: null,
+});
+const baseReward = {
+  key: "",
+  name: "",
+  description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
+  imageUrl: "",
+  available: true,
+  unavailableReasonCode: null,
+  ruleType: "FIXED_GLOBAL_REWARD",
+  sourceUnit: "POINT",
+  sourceValue: 10,
+  prettySourceValue: "10 SaaSquatch Points",
+  sourceMinValue: null,
+  prettySourceMinValue: null,
+  sourceMaxValue: null,
+  prettySourceMaxValue: null,
+  destinationMinValue: null,
+  prettyDestinationMinValue: null,
+  destinationMaxValue: null,
+  prettyDestinationMaxValue: null,
+  globalRewardKey: "",
+  destinationUnit: null,
+  steps: [],
+};
+const notEnoughPoints = {
+  available: false,
+  unavailableReasonCode: "INSUFFICIENT_REDEEMABLE_CREDIT",
+};
+const usTax = {
+  available: false,
+  unavailableReasonCode: "US_TAX",
+};
+const customError = {
+  available: false,
+  unavailableReasonCode: "NOT_CHAMPION",
+};
+const selected = {
+  key: "r1",
+};
+const imageUrl = (props) => ({
+  imageUrl: props,
+});
+const name = (props) => ({
+  name: props,
+});
+const description = (props) => ({
+  description: props,
+});
+const fixedValue = (props) => ({
+  prettySourceValue: props,
+});
+const variableValue = (min, max, unit) => ({
+  ruleType: "VARIABLE_CREDIT_REWARD",
+  sourceMinValue: min,
+  prettySourceMinValue: min + " " + unit,
+  sourceMaxValue: max,
+  prettySourceMaxValue: max + " " + unit,
+});
+const demoData = [
+  {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
+    ...fixedValue("40 Points"),
+  },
+  {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+  },
+  {
+    ...baseReward,
+    ...name("$50 Store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829222/tenant_test_a7iws76wkk4az/wvxtrsytmr4h1ozhxspv.png"),
+    ...fixedValue("100 Points"),
+  },
+  {
+    ...baseReward,
+    ...name("Variable amount of store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829263/tenant_test_a7iws76wkk4az/dbo8tb4qpwmhg5iudviq.png"),
+    ...variableValue(20, 100, "Points"),
+  },
+];
+const data = [
+  {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+  },
+  {
+    ...baseReward,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829284/tenant_test_a7iws76wkk4az/cognmlwma874b5q94hqv.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...name("$50 Store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829222/tenant_test_a7iws76wkk4az/wvxtrsytmr4h1ozhxspv.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...name("Variable amount of store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829263/tenant_test_a7iws76wkk4az/dbo8tb4qpwmhg5iudviq.png"),
+    ...variableValue(20, 100, "Points"),
+  },
+  {
+    ...baseReward,
+    ...notEnoughPoints,
+    ...name("A very rare cactus"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829341/tenant_test_a7iws76wkk4az/lgrlweifpsekh2y4zjih.png"),
+    ...fixedValue("2000 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...usTax,
+    ...name("$1000 Store credit with a really super long name in the front page"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829384/tenant_test_a7iws76wkk4az/f0dzeyrx3hojncbgim8y.png"),
+    ...fixedValue("2000 SaaSquatch Long Points"),
+  },
+  {
+    ...baseReward,
+    ...notEnoughPoints,
+    ...name("A holiday gift box"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829450/tenant_test_a7iws76wkk4az/ujzfhfkvwqb02dlgjx6q.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+];
+const rewardExchange = {
+  ...baseResponse(data),
+};
+const demoRewardExchange = {
+  ...baseResponse(demoData),
+};
+const rewardExchangeLongText = {
+  ...baseResponse([
+    {
+      ...baseReward,
+      ...notEnoughPoints,
+      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829450/tenant_test_a7iws76wkk4az/ujzfhfkvwqb02dlgjx6q.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    {
+      ...baseReward,
+      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829384/tenant_test_a7iws76wkk4az/f0dzeyrx3hojncbgim8y.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    {
+      ...baseReward,
+      ...name("Suuuuuuuuper aweeeeesssssoooommme reward!!!!!!"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829222/tenant_test_a7iws76wkk4az/wvxtrsytmr4h1ozhxspv.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    ...data,
+  ]),
+};
+const rewardExchangeCustomErrorMsg = {
+  ...baseResponse([
+    {
+      ...baseReward,
+      ...customError,
+      ...name("A very rare cactus"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829341/tenant_test_a7iws76wkk4az/lgrlweifpsekh2y4zjih.png"),
+      ...fixedValue("2000 SaaSquatch Points"),
+    },
+    ...data,
+  ]),
+};
+const rewardExchangeSelected = {
+  ...baseResponse(data, "chooseReward", {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+  }),
+};
+const baseStep = (dst, dstUnit, src, srcUnit, available = true, unavailableReason = null) => ({
+  destinationValue: dst,
+  prettyDestinationValue: dstUnit + dst,
+  sourceValue: src,
+  prettySourceValue: src + " " + srcUnit,
+  available: available,
+  unavailableReasonCode: unavailableReason,
+});
+const chooseAmountVariable = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
+    ],
+  }),
+};
+const chooseAmountVariableNoDescription = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...description(""),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
+    ],
+  }),
+};
+const chooseAmountVariableDisabled = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+      baseStep(50, "$", 100, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+      baseStep(60, "$", 120, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+    ],
+  }),
+};
+const chooseAmountVariableUnavailable = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points", false, "US_TAX"),
+      baseStep(50, "$", 100, "Points", false, "US_TAX"),
+      baseStep(60, "$", 120, "Points", false, "US_TAX"),
+    ],
+  }),
+};
+const chooseAmountFixed = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829486/tenant_test_a7iws76wkk4az/xtptk0dynrxxlkg0dctb.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+const chooseAmountFixedNoDescription = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...description(""),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+const confirmFixed = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829486/tenant_test_a7iws76wkk4az/xtptk0dynrxxlkg0dctb.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+const confirmVariable = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+const error = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829161/tenant_test_a7iws76wkk4az/lmzj1rtxchiyquvazo5k.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points"), true),
+};
+const success = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829486/tenant_test_a7iws76wkk4az/xtptk0dynrxxlkg0dctb.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
+};
+const successVariable = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829284/tenant_test_a7iws76wkk4az/cognmlwma874b5q94hqv.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+const loading = {
+  ...baseResponse(null, "chooseReward", null, null, false, true),
+};
+
+function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  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 }, children)));
+}
+
+function t(t,n,r){return Math.min(Math.max(t,r),n)}class n extends Error{constructor(t){super(`Failed to parse color: "${t}"`);}}function r(r){if("string"!=typeof r)throw new n(r);if("transparent"===r.trim().toLowerCase())return [0,0,0,0];let e=r.trim();e=u.test(r)?function(t){const r=t.toLowerCase().trim(),e=o[function(t){let n=5381,r=t.length;for(;r;)n=33*n^t.charCodeAt(--r);return (n>>>0)%2341}(r)];if(!e)throw new n(t);return `#${e}`}(r):r;const f=s.exec(e);if(f){const t=Array.from(f).slice(1);return [...t.slice(0,3).map(t=>parseInt(_(t,2),16)),parseInt(_(t[3]||"f",2),16)/255]}const p=i.exec(e);if(p){const t=Array.from(p).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,16)),parseInt(t[3]||"ff",16)/255]}const z=a.exec(e);if(z){const t=Array.from(z).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,10)),parseFloat(t[3]||"1")]}const h=c.exec(e);if(h){const[e,o,_,s]=Array.from(h).slice(1).map(parseFloat);if(t(0,100,o)!==o)throw new n(r);if(t(0,100,_)!==_)throw new n(r);return [...l(e,o,_),s||1]}throw new n(r)}const e=t=>parseInt(t.replace(/_/g,""),36),o="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((t,n)=>{const r=e(n.substring(0,3)),o=e(n.substring(3)).toString(16);let _="";for(let t=0;t<6-o.length;t++)_+="0";return t[r]=`${_}${o}`,t},{}),_=(t,n)=>Array.from(Array(n)).map(()=>t).join(""),s=new RegExp(`^#${_("([a-f0-9])",3)}([a-f0-9])?$`,"i"),i=new RegExp(`^#${_("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),a=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${_(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),c=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,u=/^[a-z]+$/i,f=t=>Math.round(255*t),l=(t,n,r)=>{let e=r/100;if(0===n)return [e,e,e].map(f);const o=(t%360+360)%360/60,_=(1-Math.abs(2*e-1))*(n/100),s=_*(1-Math.abs(o%2-1));let i=0,a=0,c=0;o>=0&&o<1?(i=_,a=s):o>=1&&o<2?(i=s,a=_):o>=2&&o<3?(a=_,c=s):o>=3&&o<4?(a=s,c=_):o>=4&&o<5?(i=s,c=_):o>=5&&o<6&&(i=_,c=s);const u=e-_/2;return [i+u,a+u,c+u].map(f)};function p(t){const[n,e,o,_]=r(t).map((t,n)=>3===n?t:t/255),s=Math.max(n,e,o),i=Math.min(n,e,o),a=(s+i)/2;if(s===i)return [0,0,a,_];const c=s-i;return [60*(n===s?(e-o)/c+(e<o?6:0):e===s?(o-n)/c+2:(n-e)/c+4),a>.5?c/(2-s-i):c/(s+i),a,_]}function z(n,r,e,o){return `hsla(${(n%360).toFixed()}, ${t(0,100,100*r).toFixed()}%, ${t(0,100,100*e).toFixed()}%, ${parseFloat(t(0,1,o).toFixed(3))})`}
+
+const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const lScale = [
+  0.95,
+  0.86,
+  0.76,
+  0.66,
+  0.56,
+  0.46,
+  0.39,
+  0.32,
+  0.25,
+  0.18,
+  0.15,
+];
+// https://github.com/ricokahler/color2k/blob/main/src/parseToRgba.ts
+const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+function niceParseToHsla(color) {
+  const normalizedColor = color.trim();
+  const hslaMatch = hslaRegex.exec(normalizedColor);
+  if (hslaMatch) {
+    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
+    if (t(0, 100, s) !== s)
+      throw new n(color);
+    if (t(0, 100, l) !== l)
+      throw new n(color);
+    return [h, s / 100, l, a || 1];
+  }
+  // Warning -- converts to RGB first, so is lossy
+  return p(color);
+}
+function generateScale(color, name = "primary") {
+  const [h, s, l, a] = niceParseToHsla(color);
+  return lScale
+    .map((l) => z(h, s, l, a))
+    .map((color, index) => {
+    return `--sl-color-${name}-${colorScale[index]}: ${color};\n`;
+  });
+}
+/**
+ * Generated a Shoelace color scale css string from a base color
+ *
+ * @param color
+ * @param name
+ * @returns
+ */
+function autoColorScaleCss(color, name = "primary") {
+  return generateScale(color, name).join("\n");
+}
+
+const map = new Map();
+function withShadowView(component) {
+  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
+  const element = index.getElement(component);
+  let renderFn = component["render"].bind(component);
+  const newRenderFn = () => {
+    const key = element.getAttribute("stencilbook-shadow-view");
+    if (key) {
+      const value = map.get(key);
+      if (value) {
+        return value;
+      }
+    }
+    return renderFn();
+  };
+  component["render"] = newRenderFn;
+}
+/**
+ * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
+ */
+const ShadowViewAddon = ({ story }, children) => {
+  var _a;
+  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
+  if (!TagName)
+    return children;
+  const randomInt = Math.round(Math.random() * 100000);
+  map.set(randomInt + "", children);
+  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
+  // This will only re-render when the tag name changes, so we use a random tag name every time.
+  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
+  return (index.h(RandomTagName, null,
+    index.h(TagName, { "stencilbook-shadow-view": randomInt })));
+};
+
+exports.CardFeedView = CardFeedView;
+exports.EditProfileView = EditProfileView;
+exports.LeaderboardView = LeaderboardView;
+exports.PortalChangePasswordView = PortalChangePasswordView;
+exports.PortalFrameView = PortalFrameView;
+exports.PortalLoginView = PortalLoginView;
+exports.PortalRegisterView = PortalRegisterView;
+exports.ProgressBarView = ProgressBarView;
+exports.ReferralIframeView = ReferralIframeView;
+exports.RewardExchangeView = RewardExchangeView;
+exports.ShadowViewAddon = ShadowViewAddon;
+exports.ShareButtonView = ShareButtonView;
+exports.ShareLinkView = ShareLinkView;
+exports.TaskCardView = TaskCardView;
+exports.autoColorScaleCss = autoColorScaleCss;
+exports.chooseAmountFixed = chooseAmountFixed;
+exports.chooseAmountFixedNoDescription = chooseAmountFixedNoDescription;
+exports.chooseAmountVariable = chooseAmountVariable;
+exports.chooseAmountVariableDisabled = chooseAmountVariableDisabled;
+exports.chooseAmountVariableNoDescription = chooseAmountVariableNoDescription;
+exports.chooseAmountVariableUnavailable = chooseAmountVariableUnavailable;
+exports.confirmFixed = confirmFixed;
+exports.confirmVariable = confirmVariable;
+exports.demoRewardExchange = demoRewardExchange;
+exports.error = error;
+exports.loading = loading;
+exports.rewardExchange = rewardExchange;
+exports.rewardExchangeCustomErrorMsg = rewardExchangeCustomErrorMsg;
+exports.rewardExchangeLongText = rewardExchangeLongText;
+exports.rewardExchangeSelected = rewardExchangeSelected;
+exports.success = success;
+exports.successVariable = successVariable;
+exports.useShareButton = useShareButton;
+exports.useShareLink = useShareLink;
+exports.withShadowView = withShadowView;