@saasquatch/mint-components 1.5.0-9 → 1.5.0-93

package/dist/esm/ShadowViewAddon-44cb77bd.js

@@ -0,0 +1,2583 @@
+import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
+import { k as useState } from './stencil-hooks.module-acc8a613.js';
+import { i as intl } from './global-a8e9f822.js';
+import { d as dist, M, n as ne, x, b as mn, D as De, f as D } from './index.module-2821f17d.js';
+import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-10353a39.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
+import { l as luxon } from './luxon-f44215d9.js';
+import { l as luxonLocale } from './utils-1d345130.js';
+import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-f74db584.js';
+import { P as PortalSectionView } from './sqm-portal-section-view-88a80af9.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: HostBlock,
+    buttonStyle: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("style", { type: "text/css" }, vanillaStyle),
+    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 && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
+      !props.hidetext && children)));
+}
+
+const style = {
+  HostBlock: HostBlock,
+  inputStyle: {
+    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function ShareLinkView(props) {
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open },
+      h("sl-input", { class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
+        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 = 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 (h("div", { class: sheet$1.classes.Leaderboard },
+      h("style", { type: "text/css" },
+        styleString$1,
+        vanillaStyle),
+      elements.loadingstate));
+  let userSeenFlag = false;
+  return (h("div", { class: sheet$1.classes.Leaderboard },
+    h("style", { type: "text/css" },
+      styleString$1,
+      vanillaStyle),
+    h("table", null,
+      h("tr", null,
+        styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
+        h("th", { class: "User" }, styles.usersheading),
+        h("th", { class: "Score" }, styles.statsheading)),
+      !states.hasLeaders && (h("tr", null,
+        h("td", { colSpan: 100 }, elements.empty))), (_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 (h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
+          styles.showRank && h("td", { class: "Rank" }, user.rank),
+          h("td", { class: "User" }, user.firstName && user.lastInitial
+            ? user.firstName + " " + user.lastInitial
+            : user.firstName || user.lastInitial
+              ? user.firstName || user.lastInitial
+              : styles.anonymousUser || "Anonymous User"),
+          h("td", { class: "Score" }, user.value)));
+      }),
+      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", null,
+        h("td", { colSpan: 100, class: "ellipses" },
+          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", { class: "highlight" },
+        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
+        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"),
+        h("td", { class: "Score" }, ((_l = data.userRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))))));
+}
+
+const style$2 = {
+  HostBlock: 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 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+function PortalFrameView(props, children) {
+  const { data } = props;
+  return (h("div", { class: sheet$2.classes.Frame },
+    h("style", { type: "text/css" }, styleString$2),
+    h("div", { class: sheet$2.classes.HeaderWrapper },
+      data.header,
+      h("slot", { name: "sqm-navigation-menu" })),
+    children,
+    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 (h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}` },
+      h("h2", { style: {
+          fontSize: "var(--sl-font-size-x-large)",
+          margin: "0px",
+          textAlign: "center",
+        } }, text.editprofileheader),
+      h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
+        h("div", { class: "FormSection" },
+          states.formState.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+            h("div", { part: "erroralert-text" }, states.formState.error))),
+          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 })),
+          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 && (h("sl-input", { exportparts: "label: input-label", disabled: true, value: states.formState.currentRegion, label: text.currentregiontext, id: "currentRegion", name: "currentRegion" })),
+        h("div", { class: "ButtonWrapper" },
+          h("sl-button", { onClick: () => {
+              callbacks.setShowEdit(false);
+            }, exportparts: "base: defaultbutton-base" }, text.canceltext),
+          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 (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
+    h("div", { class: "FormSection" },
+      h("h2", { style: {
+          fontSize: "var(--sl-font-size-x-large",
+          marginBottom: "0px",
+          textAlign: "center",
+        } }, text.editprofileheader),
+      h("div", null,
+        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),
+        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))),
+    h("sl-button", { type: "primary", loading: states.loading, onClick: () => {
+        callbacks.resetForm();
+        callbacks.setShowEdit(true);
+      }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
+};
+
+const MessageLinkQuery = dist.gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        shareLink(programId: $programId)
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+function useShareLink(props) {
+  var _a, _b;
+  const { programId = M() } = props;
+  const user = ne();
+  const engagementMedium = x();
+  const { data } = mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = 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] = 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 = 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 : M();
+  const user = ne();
+  const variables = {
+    engagementMedium: x(),
+    programId: programId,
+    shareMedium: medium.toUpperCase(),
+  };
+  // only queries if a programId is available
+  const res = 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 = 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 = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
+      h(PortalSectionView, Object.assign({}, {
+        labelMargin: "x-large",
+        padding: "none",
+        label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.modalChangePasswordHeader)),
+        content: (h(PortalContainerView, Object.assign({}, { direction: "column", padding: "none", gap: "32px" }),
+          states.error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+            h("div", { part: "erroralert-text" }, states.error))),
+          states.success && (h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
+            h("div", { part: "successalert-text" }, states.content.successMessage))),
+          h("sl-form", { "onSl-submit": callbacks.submit },
+            h("div", { class: sheet.classes.InputContainer },
+              h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel }),
+              h("sl-input", { exportparts: "label: input-label", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
+            h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
+              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+      }))),
+    h(PortalSectionView, Object.assign({}, {
+      labelMargin: "x-large",
+      padding: "xxx-large",
+      label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
+      content: (h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+    }),
+      h("style", { type: "text/css" }, styleString))));
+}
+
+const style$3 = {
+  Wrapper: AuthWrapper,
+  Column: AuthColumn,
+  ForgotButtonContainer: {
+    display: "inline",
+    cursor: "pointer",
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "#AAAAAA",
+    margin: "0",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+};
+const vanillaStyle$1 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet$3 = createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+function PortalLoginView(props) {
+  const { states, callbacks, content } = props;
+  return (h("div", { class: sheet$3.classes.Wrapper },
+    h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$3),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit },
+      props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error))),
+      h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      h("div", null,
+        h("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
+        h("div", { class: sheet$3.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      h("div", { class: sheet$3.classes.ButtonsContainer },
+        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
+        content.secondaryButton))));
+}
+
+const style$4 = {
+  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Column: AuthColumn,
+  HostBlock: HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle$2 = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet$4 = 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 (h("div", { class: sheet$4.classes.Wrapper },
+    h("style", { type: "text/css" },
+      vanillaStyle$2,
+      styleString$4),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
+      !states.hideInputs && (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 && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
+      content.passwordField,
+      !states.hideInputs && states.confirmPassword && (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,
+      h("div", { class: sheet$4.classes.ButtonsContainer },
+        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 = createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
+function Details(props) {
+  const rid = Math.random().toString(36).slice(2);
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString$5),
+    h("span", { class: sheet$5.classes.Description },
+      h("input", { type: "checkbox", id: "details-" + rid }),
+      h("label", { class: "details", htmlFor: "details-" + rid },
+        h("sl-icon", { name: "chevron-down" })),
+      h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
+}
+
+const Gift = () => {
+  return (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    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" }),
+    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" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
+    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 = 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 (h("div", { class: sheet$6.classes.ProgressBar, "data-expired": expired, "data-steps": steps, "data-done": goal <= progress },
+    h("style", { type: "text/css" }, styleString$6),
+    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(h("div", { class: "remain" }));
+      items.push(h("div", { class: "empty" }, i));
+    }
+    else {
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress" }, i));
+    }
+  }
+  columns.push(ratio + "fr");
+  columns.push("0fr");
+  // reward success
+  if (goal <= progress) {
+    columns.push("0fr");
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: "progress bg" }, goal));
+    items.push(h("div", { class: "gift" }, h(Gift, null)));
+  }
+  // reward fail
+  else {
+    columns.push("0fr");
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "empty bg" }, goal));
+    items.push(h("div", { class: "gift bw" }, 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(h("div", { class: "filled" }));
+    items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+    items.push(h("div", { class: progress == goal ? "gift" : "gift bw" },
+      h(Gift, null)));
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+    items.push(h("div", { class: "gift bw" }, 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(h("div", { class: "filled" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+  }
+  // finite repetition hit
+  else if (finite && repetitions >= finite) {
+    if (repetitions > 2) {
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
+      items.push(h("div", { class: "gift start" }, 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(h("div", { class: "filled" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
+    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
+    items.push(h("div", { class: "gift" }, h(Gift, null)));
+  }
+  // multiple repetitions
+  else {
+    columns =
+      "0fr 0fr 0.5fr 0fr 0fr " +
+        ratio +
+        "fr 0fr " +
+        (0.5 - ratio) +
+        "fr 0fr 0fr";
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
+    items.push(h("div", { class: "gift start" }, h(Gift, null)));
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
+    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
+    items.push(h("div", { class: "gift bw" }, 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(h("div", { class: "remain" }));
+          items.push(h("div", { class: "empty bg" }, goal));
+          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+        }
+        else if (i == goal * 2) {
+          columns.push("0fr");
+          columns.push("0fr");
+          items.push(h("div", { class: "remain" }));
+          items.push(h("div", { class: "empty bg" }, goal * 2));
+          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+        }
+        else {
+          items.push(h("div", { class: "remain" }));
+          items.push(h("div", { class: "empty" }, i));
+        }
+      }
+      else if (i == goal) {
+        columns.push("0fr");
+        items.push(h("div", { class: "filled" }));
+        items.push(h("div", { class: "progress bg" }, i));
+        items.push(h("div", { class: "gift" }, h(Gift, null)));
+      }
+      else {
+        items.push(h("div", { class: "filled" }));
+        items.push(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(h("div", { class: "progress bg" }, goal * (finite - 2)));
+      items.push(h("div", { class: "gift start" }, 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(h("div", { class: "remain" }));
+          items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
+          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+        }
+      }
+      else if (i == goal) {
+        columns.push("0fr");
+        items.push(h("div", { class: "filled" }));
+        items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
+        items.push(h("div", { class: "gift" }, h(Gift, null)));
+      }
+      else if (i == goal * 2) {
+        columns.push("0fr");
+        columns.push("0fr");
+        items.push(h("div", { class: "filled" }));
+        items.push(h("div", { class: "progress bg" }, goal * finite));
+        items.push(h("div", { class: "gift" }, h(Gift, null)));
+      }
+      else {
+        items.push(h("div", { class: "filled" }));
+        items.push(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(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
+    items.push(h("div", { class: "gift start" }, 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(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
+          items.push(h("div", { class: "gift" }, h(Gift, null)));
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+        }
+      }
+      else if (i > position) {
+        if (i == goal * 2) {
+          columns.push("0fr");
+          columns.push("0fr");
+          items.push(h("div", { class: "remain" }));
+          items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
+          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+        }
+        else {
+          items.push(h("div", { class: "remain" }));
+          items.push(h("div", { class: "empty" }, i + goal * (repetitions - 1)));
+        }
+      }
+      else {
+        items.push(h("div", { class: "filled" }));
+        items.push(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(h("div", { class: "filled" }));
+  items.push(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(h("div", { class: "remain" }));
+  items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+  items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "gift" : "gift bw" },
+    h(Gift, null)));
+  return { items, columns };
+}
+function clamp(x, min, max) {
+  return Math.min(Math.max(x, min), max);
+}
+
+const checkmark_circle = () => {
+  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    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 (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+    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 (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    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 = 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.DateTime.fromISO(content.rewardDuration.split("/")[0]);
+  const dateEnd = content.rewardDuration &&
+    luxon.DateTime.fromISO(content.rewardDuration.split("/")[1]);
+  const dateToday = 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.DateTime.fromISO(start) : dateToday;
+    const displayDateEnd = end ? luxon.DateTime.fromISO(end) : dateToday;
+    console.log({ displayDateStart, dateToday, displayDateEnd });
+    if (dateToday < displayDateStart || dateToday > displayDateEnd)
+      return 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 (h("div", { class: sheet$7.classes.TaskCard },
+    h("style", { type: "text/css" },
+      styleString$7,
+      vanillaStyle),
+    !states.loading && taskNotStarted && (h("div", { class: sheet$7.classes.NotStarted },
+      h("span", { class: "icon" },
+        h("sl-icon", { name: "info-circle-fill" })),
+      intl.formatMessage({
+        id: "startsOnMessage",
+        defaultMessage: content.startsOnMessage,
+      }, {
+        startDate: dateStart
+          .setLocale(luxonLocale(states.locale))
+          .toLocaleString(luxon.DateTime.DATETIME_MED),
+      }))),
+    !states.loading && taskEnded && (h("div", { class: sheet$7.classes.Ended },
+      h("span", { class: "icon" },
+        h("sl-icon", { name: "exclamation-triangle-fill" })),
+      intl.formatMessage({
+        id: "endedMessage",
+        defaultMessage: content.endedMessage,
+      }, {
+        endDate: dateEnd
+          .setLocale(luxonLocale(states.locale))
+          .toLocaleString(luxon.DateTime.DATETIME_MED),
+      }))),
+    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" },
+      h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
+        h("div", { class: sheet$7.classes.Header }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+          showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
+          h("span", { class: "value" }, content.rewardAmount),
+          h("span", { class: "text" }, content.rewardUnit)))),
+        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (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 ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && h(Details, Object.assign({}, props))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet$7.classes.Footer }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+          h("span", { class: "text" },
+            content.repeatable && (h("div", null,
+              h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "icon neutral"
+                    : "icon success"
+                  : "icon" }, arrow_left_right$1),
+              h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "neutral"
+                    : "success"
+                  : "" }, intl.formatMessage({
+                id: "completedMessage",
+                defaultMessage: content.completedText,
+              }, {
+                finite: content.finite,
+                count: content.finite
+                  ? Math.min(repetitions, content.finite)
+                  : repetitions,
+              })))),
+            dateEnd && !taskUnavailable && (h("span", { class: "datetime" }, intl.formatMessage({
+              id: "expiryMessage",
+              defaultMessage: content.expiryMessage,
+            }, {
+              endDate: dateEnd
+                .setLocale(luxonLocale(states.locale))
+                .toLocaleString(luxon.DateTime.DATETIME_MED),
+            })))),
+          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 = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
+}
+
+const CheckMark = () => (h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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 = () => (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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" }),
+  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 = () => (h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
+  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" }),
+  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" }),
+  h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
+  h("g", { filter: "url(#a)" },
+    h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
+  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" }),
+  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" }),
+  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" }),
+  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" }),
+  h("defs", null,
+    h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
+      h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
+      h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+      h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));
+
+function Dot({ active, completed, incomplete, stage, }) {
+  return (h("div", { style: {
+      display: "flex",
+    } },
+    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 ? (h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
+      h(CheckMark, null))) : (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 (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 [
+    h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
+    h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
+    h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
+  ];
+}
+function ProgressBar({ stageCount, currentStage, }) {
+  return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (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: 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 = 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 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 (h("p", null, intl.formatMessage({
+        id: "notEnoughError",
+        defaultMessage: states.content.text.notEnoughError,
+      }, {
+        sourceUnit: item.sourceUnit,
+      })));
+    }
+    // console.log("SELECTED ITEM ", states.selectedStep);
+    // console.log("CALLBACKS ", callbacks);
+    return (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 (h("sl-menu-item", { value: step, disabled: !step.available },
+        step.prettyDestinationValue,
+        " ",
+        h("br", null),
+        step.unavailableReasonCode && (h("p", { style: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-warning-500)",
+            margin: "0",
+          } }, 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,
+        }))),
+        h("div", { class: "step-cost", slot: "suffix" }, step.prettySourceValue)));
+    })));
+  }
+  function chooseReward() {
+    var _a;
+    return [
+      h("div", null,
+        h("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.rewardTitle),
+        states.loading ? (loading()) : (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 (h("div", { key: item.key, style: style },
+            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) && (h("div", { class: "selected" },
+                h(CheckmarkFilled, null))),
+              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)",
+                } },
+                h("div", { class: sheet.classes.Image, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  h("img", { class: item.unavailableReasonCode
+                      ? "image subdued"
+                      : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                      getAssetPath("./assets/Reward-image.png") })),
+                h("div", { class: sheet.classes.TextArea, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  h("div", { class: "title", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
+                  h("div", { class: "amount", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, 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 && (h("div", { class: "error" },
+                    h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
+                    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,
+                    }))))))));
+        }))),
+        h("div", { class: sheet.classes.Button },
+          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 (h("div", null,
+      h("div", { class: sheet.classes.ChooseAmount },
+        h("div", { class: "wrapper" },
+          h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+              getAssetPath("./assets/Reward-image.png") }),
+          h("div", { class: "text" },
+            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" ? (h("div", { class: "points" }, input)) : (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" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", { class: "points" }, input)),
+            h("div", { class: "space" }),
+            h("div", { class: sheet.classes.Button },
+              h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+              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 (h("div", null,
+      h("h2", { style: { margin: "var(--sl-spacing-large) 0", textAlign: "center" } }, states.content.text.redeemTitle),
+      h("div", { class: sheet.classes.Confirmation },
+        h("div", { class: "wrapper" },
+          h("div", { class: "field" }, states.content.text.rewardNameTitle),
+          h("div", { class: "reward-item-container" },
+            h("div", { class: "reward-title" }, selectedItem.name),
+            h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                getAssetPath("./assets/Reward-image.png") }))),
+        h("div", { class: "wrapper padding" },
+          h("div", { class: "field" })),
+        amount && (h("div", { class: "wrapper top-border padding" },
+          h("div", { class: "field" }, states.content.text.rewardAmountTitle),
+          h("div", null, amount))),
+        h("div", { class: "wrapper top-border padding" },
+          h("div", { class: "field" }, states.content.text.costTitle),
+          h("div", { class: "value" }, cost)),
+        h("div", { class: sheet.classes.Button },
+          h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          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 (h("div", { class: sheet.classes.Success },
+      h(Gift$1, null),
+      h(Confetti, null),
+      h("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      h("div", { class: "description" }, 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) && (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,
+        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 }))),
+      h("div", { class: sheet.classes.Button },
+        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 (h("div", { class: sheet.classes.ProgressBar },
+      h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
+        if (stageList.indexOf(stage) <= stageNumber) {
+          return h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
+      })),
+      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
+  }
+  function loading() {
+    return (h("div", { class: sheet.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+      return (h("div", null,
+        h("sl-card", { class: sheet.classes.Card },
+          h("div", { class: sheet.classes.CardLayout },
+            h("div", null,
+              h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
+                  margin: "9px",
+                  "--border-radius": "4px",
+                } })),
+            h("div", { style: {
+                margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
+                width: "100%",
+              } },
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { width: "45%" } }))))));
+    })));
+  }
+  function errorMessage() {
+    return (h("sl-alert", { type: "danger", open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.redemptionError));
+  }
+  function queryErrorMessage() {
+    return (h("sl-alert", { type: "danger", open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.queryError));
+  }
+  function Confetti() {
+    return (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 (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    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 = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    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 = 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 (h(RandomTagName, null,
+    h(TagName, { "stencilbook-shadow-view": randomInt })));
+};
+
+export { withShadowView as A, demoRewardExchange as B, CardFeedView as C, EditProfileView as E, LeaderboardView as L, PortalFrameView as P, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, ShareLinkView as a, useShareButton as b, PortalChangePasswordView as c, PortalLoginView as d, PortalRegisterView as e, ProgressBarView as f, RewardExchangeView as g, rewardExchangeLongText as h, rewardExchangeSelected as i, chooseAmountFixed as j, chooseAmountFixedNoDescription as k, chooseAmountVariable as l, chooseAmountVariableNoDescription as m, chooseAmountVariableDisabled as n, chooseAmountVariableUnavailable as o, confirmFixed as p, confirmVariable as q, rewardExchangeCustomErrorMsg as r, error as s, success as t, useShareLink as u, successVariable as v, loading as w, rewardExchange as x, autoColorScaleCss as y, ShadowViewAddon as z };