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

package/dist/cjs/{ShadowViewAddon-260da162.js → ShadowViewAddon-970dff24.js}

@@ -1,18 +1,18 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-a7614907.js');
-const index_module = require('./index.module-1c799b1f.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const global = require('./global-97364373.js');
+const index_module = require('./index.module-d3a28293.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
-const useChildElements = require('./useChildElements-dc4c3132.js');
-const luxon = require('./luxon-59ca7d19.js');
+const JSS = require('./JSS-c73206b7.js');
+const useChildElements = require('./useChildElements-24fbca82.js');
+const luxon = require('./luxon-479fc825.js');
 const utils = require('./utils-8ef4fe4a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-ab4ad6ef.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-a3e86fc2.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b0c90c27.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-4a8432e9.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-71a57cd9.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -189,37 +189,24 @@ function LeaderboardView(props) {
         index.h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
 }
 
+const style$2 = {
+  HostBlock: mixins.HostBlock,
+  inputStyle: {
+    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+  },
+};
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function ShareLinkView(props) {
-  const style = {
-    HostBlock: mixins.HostBlock,
-    inputStyle: {
-      "&::part(input)": {
-        color: props.textColor,
-      },
-      "& sl-icon-button::part(base)": {
-        color: props.textColor,
-      },
-      "&::part(base)": {
-        background: props.backgroundColor || "white",
-        borderRadius: props.borderRadius,
-        borderColor: props.borderColor,
-        opacity: "1",
-        cursor: "pointer",
-      },
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  console.log(props.borderColor);
   return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString),
+    index.h("style", { type: "text/css" }, styleString$2),
     index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
-      index.h("sl-input", { size: props.size, class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
+      index.h("sl-input", { class: sheet$2.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
         index.h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })))));
 }
 
 function BigStatView(props) {
-  const { statvalue, statColor, statFontSize, flexReverse, alignment, statDescriptionColor, statDescriptionFontSize, } = props;
+  const { statvalue, flexReverse, alignment } = props;
   // Dependent on props, not feasiable to move out
   const style = {
     Container: {
@@ -234,20 +221,15 @@ function BigStatView(props) {
           : "center"}`,
     },
     Stat: {
-      fontSize: statFontSize ? statFontSize : "var(--sl-font-size-x-large)",
-      textAlign: alignment,
-      color: statColor,
+      "font-size": "var(--sl-font-size-x-large)",
+      "text-align": alignment,
     },
     Description: {
-      fontSize: statDescriptionFontSize
-        ? statDescriptionFontSize
-        : "var(--sl-font-size-small)",
-      fontWeight: "var(--sl-font-weight-normal)",
-      color: statDescriptionColor
-        ? statDescriptionColor
-        : "var(--sl-color-gray-600)",
-      textTransform: "uppercase",
-      textAlign: alignment,
+      "font-size": "var(--sl-font-size-small)",
+      "font-weight": "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-gray-600)",
+      "text-transform": "uppercase",
+      "text-align": alignment,
     },
   };
   const sheet = JSS.createStyleSheet(style);
@@ -258,13 +240,9 @@ function BigStatView(props) {
     index.h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
 }
 
-const style$2 = {
+const style$3 = {
   HostBlock: mixins.HostBlock,
-  ":host": {
-    "min-height": "100vh",
-  },
   Frame: {
-    "min-height": "100vh",
     display: "flex",
     "flex-direction": "column",
     "box-sizing": "border-box",
@@ -286,7 +264,7 @@ const style$2 = {
     "box-sizing": "border-box",
     display: "flex",
     "justify-content": "space-between",
-    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+    // padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
     "align-items": "center",
     "background-color": "var(--sqm-header-background)",
     "@media screen and (max-width: 499px)": {
@@ -296,17 +274,17 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
-  const { data } = props;
-  return (index.h("div", { class: sheet$2.classes.Frame },
-    index.h("style", { type: "text/css" }, styleString$2),
-    index.h("div", { class: sheet$2.classes.HeaderWrapper },
+  const { data, notFullScreen } = props;
+  return (index.h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame },
+    index.h("style", { type: "text/css" }, styleString$3),
+    index.h("div", { class: sheet$3.classes.HeaderWrapper },
       data.header,
       index.h("slot", { name: "sqm-navigation-menu" })),
     children,
-    index.h("div", { class: sheet$2.classes.FooterWrapper }, data.footer)));
+    index.h("div", { class: sheet$3.classes.FooterWrapper }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -379,11 +357,11 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = index_module.A() } = props;
-  const user = index_module.ae();
-  const engagementMedium = index_module.J();
-  const { data } = index_module.pn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const { programId = index_module.O() } = props;
+  const user = index_module.N();
+  const engagementMedium = index_module.U();
+  const { data } = index_module.dn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.Pe(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
   "...";
@@ -468,17 +446,17 @@ function GenericShare(res) {
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : index_module.A();
-  const user = index_module.ae();
+  const programId = props.programId ? props.programId : index_module.O();
+  const user = index_module.N();
   const variables = {
-    engagementMedium: index_module.J(),
+    engagementMedium: index_module.U(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = index_module.pn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = index_module.dn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
-  const environment = index_module.H();
+  const environment = index_module.getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
@@ -794,7 +772,7 @@ function pathToRegexp(path, keys, options) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.pn(query, variables);
+  const res = index_module.dn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -1352,11 +1330,11 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, statColor, programId = index_module.A(), } = props;
+  const { statType, flexReverse, alignment, programId = index_module.O(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements.useChildElements();
-  const locale = index_module.O();
-  const userIdent = index_module.ae();
+  const locale = index_module.x();
+  const userIdent = index_module.N();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -1365,7 +1343,6 @@ function useBigStat(props) {
         statvalue: "!!!",
         flexReverse,
         alignment,
-        statColor,
         loading: false,
       },
       label: "BAD PROP TYPE",
@@ -1396,7 +1373,6 @@ function useBigStat(props) {
       loading: stat === null || stat === void 0 ? void 0 : stat.loading,
       flexReverse,
       alignment,
-      statColor,
     },
     label,
   };
@@ -1415,10 +1391,6 @@ function useDemoBigStat(props) {
         loading: false,
         flexReverse: false,
         alignment: "center",
-        statColor: "var(--sl-color-gray-800)",
-        statDescriptionColor: "var(--sl-color-gray-600)",
-        statFontSize: "x-large",
-        statDescriptionFontSize: "small",
       },
       label: "BAD PROP TYPE",
     };
@@ -1430,12 +1402,8 @@ function useDemoBigStat(props) {
     props: cjs.cjs({
       statvalue: "12345",
       value: 0,
-      flexReverse: props.flexReverse,
-      alignment: props.alignment,
-      statColor: props.statColor,
-      statDescriptionColor: props.statDescriptionColor,
-      statFontSize: props.statFontSize,
-      statDescriptionFontSize: props.statDescriptionFontSize,
+      flexReverse: false,
+      alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),
     label: label !== null && label !== void 0 ? label : "Demo Label",
   };
@@ -1455,18 +1423,14 @@ function StatContainerView(props, children) {
       gap: divideSpace(),
       // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
       "& > *": {
-        "border-right": props.showBorder
-          ? `1px solid ${props.borderColor ? props.borderColor : "#EAEAEA"}`
-          : "none",
+        "border-right": "1px solid #EAEAEA",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
         "border-right": "none",
       },
       "& > ::slotted(*)": {
-        "border-right": props.showBorder
-          ? `1px solid ${props.borderColor ? props.borderColor : "#EAEAEA"}`
-          : "none",
+        "border-right": "1px solid #EAEAEA",
         "padding-right": divideSpace(),
         height: "100%",
       },
@@ -1562,7 +1526,7 @@ function PortalChangePasswordView(props) {
       index.h("style", { type: "text/css" }, styleString))));
 }
 
-const style$3 = {
+const style$4 = {
   Wrapper: mixins.AuthWrapper,
   Column: mixins.AuthColumn,
   ForgotButtonContainer: {
@@ -1583,28 +1547,28 @@ const vanillaStyle$1 = `
   display: none;
 }
 `;
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 function PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  return (index.h("div", { class: sheet$3.classes.Wrapper },
+  return (index.h("div", { class: sheet$4.classes.Wrapper },
     index.h("style", { type: "text/css" },
       vanillaStyle$1,
-      styleString$3),
+      styleString$4),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit },
+    index.h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, props.states.error))),
       index.h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       index.h("div", null,
         index.h("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
-        index.h("div", { class: sheet$3.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
-      index.h("div", { class: sheet$3.classes.ButtonsContainer },
+        index.h("div", { class: sheet$4.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      index.h("div", { class: sheet$4.classes.ButtonsContainer },
         index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
         content.secondaryButton))));
 }
 
-const style$4 = {
+const style$5 = {
   Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
   Column: mixins.AuthColumn,
   HostBlock: mixins.HostBlock,
@@ -1630,20 +1594,20 @@ sqm-portal-register {
   display: none;
 }
 `;
-const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = JSS.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 function PortalRegisterView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (index.h("div", { class: sheet$4.classes.Wrapper },
+  return (index.h("div", { class: sheet$5.classes.Wrapper },
     index.h("style", { type: "text/css" },
       vanillaStyle$2,
-      styleString$4),
+      styleString$5),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    index.h("sl-form", { class: sheet$5.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
       states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
@@ -1655,27 +1619,26 @@ function PortalRegisterView(props) {
           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) ||
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet$5.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           "Cannot be empty",
       }
         : [])))),
-      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
+      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
-        class: sheet$4.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
-          "Cannot be empty",
+      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+        class: sheet$5.classes.ErrorStyle,
+        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || "Cannot be empty",
       }
         : [])))),
       content.terms,
-      index.h("div", { class: sheet$4.classes.ButtonsContainer },
+      index.h("div", { class: sheet$5.classes.ButtonsContainer },
         index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }
 
-const style$5 = {
+const style$6 = {
   Description: {
     "& input[type=checkbox]": {
       display: "none",
@@ -1714,13 +1677,13 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = JSS.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$6 = JSS.createStyleSheet(style$6);
+const styleString$6 = sheet$6.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
   return (index.h("div", { style: { opacity: props.opacity } },
-    index.h("style", { type: "text/css" }, styleString$5),
-    index.h("span", { class: sheet$5.classes.Description },
+    index.h("style", { type: "text/css" }, styleString$6),
+    index.h("span", { class: sheet$6.classes.Description },
       index.h("input", { type: "checkbox", id: "details-" + rid }),
       index.h("label", { class: "details", htmlFor: "details-" + rid },
         index.h("sl-icon", { name: "chevron-down" })),
@@ -1742,7 +1705,7 @@ const GreyGift = () => {
     index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
 };
 
-const style$6 = {
+const style$7 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1854,14 +1817,14 @@ const style$6 = {
     },
   },
 };
-const sheet$6 = JSS.createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
-const styleString$6 = sheet$6.toString();
+const sheet$7 = JSS.createStyleSheet(style$7, { classNamePrefix: "sqm-prog-bar" });
+const styleString$7 = sheet$7.toString();
 function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, finite = 0, opacity = "1", } = props;
   let aggregate = buildProgressBar(repeatable, steps, props);
   const { columns, items } = aggregate;
-  return (index.h("div", { class: sheet$6.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    index.h("style", { type: "text/css" }, styleString$6),
+  return (index.h("div", { class: sheet$7.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    index.h("style", { type: "text/css" }, styleString$7),
     index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2152,7 +2115,7 @@ const arrow_left_right = () => {
     index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
 };
 
-const style$7 = {
+const style$8 = {
   TaskCard: {
     display: "inline-block",
     width: "100%",
@@ -2306,8 +2269,8 @@ const style$7 = {
     },
   },
 };
-const sheet$7 = JSS.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = JSS.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
@@ -2340,14 +2303,13 @@ function TaskCardView(props) {
 	:host{
 		display: block;
 		margin-bottom: var(--sl-spacing-large);
-    
 	}
   `;
-  return (index.h("div", { class: sheet$7.classes.TaskCard },
+  return (index.h("div", { class: sheet$8.classes.TaskCard },
     index.h("style", { type: "text/css" },
-      styleString$7,
+      styleString$8,
       vanillaStyle),
-    !states.loading && taskNotStarted && (index.h("div", { class: sheet$7.classes.NotStarted },
+    !states.loading && taskNotStarted && (index.h("div", { class: sheet$8.classes.NotStarted },
       index.h("span", { class: "icon" },
         index.h("sl-icon", { name: "info-circle-fill" })),
       global.intl.formatMessage({
@@ -2358,7 +2320,7 @@ function TaskCardView(props) {
           .setLocale(utils.luxonLocale(states.locale))
           .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
-    !states.loading && taskEnded && (index.h("div", { class: sheet$7.classes.Ended },
+    !states.loading && taskEnded && (index.h("div", { class: sheet$8.classes.Ended },
       index.h("span", { class: "icon" },
         index.h("sl-icon", { name: "exclamation-triangle-fill" })),
       global.intl.formatMessage({
@@ -2378,7 +2340,7 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       index.h("div", { class: "container", "data-subdue": taskComplete || taskUnavailable },
-        index.h("div", { class: sheet$7.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
+        index.h("div", { class: sheet$8.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
           showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           index.h("span", { class: "value" }, content.rewardAmount),
           index.h("span", { class: "text" }, content.rewardUnit)))),
@@ -2394,7 +2356,7 @@ function TaskCardView(props) {
           } }, content.cardTitle)),
         states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (index.h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
         content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        index.h("div", { class: sheet$7.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
+        index.h("div", { class: sheet$8.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
           index.h("span", { class: "text" },
             content.repeatable && (index.h("div", null,
               index.h("span", { class: repetitions > 0
@@ -2460,7 +2422,7 @@ function ReferralIframeView(props) {
     index.h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }
 
-const style$8 = {
+const style$9 = {
   ErrorStyle: mixins.ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2480,28 +2442,35 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-const sheet$8 = JSS.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$9 = JSS.createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
 function NameFieldsView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
-  return (index.h("div", { class: sheet$8.classes.FieldsContainer },
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (index.h("div", { class: sheet$9.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$3,
-      styleString$8),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
-      class: sheet$8.classes.ErrorStyle,
+      styleString$9),
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+      class: sheet$9.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
-      class: sheet$8.classes.ErrorStyle,
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+      class: sheet$9.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }
       : [])))));
 }
 
-const style$9 = {
+const style$a = {
   ErrorStyle: {
     "&::part(control)": {
       background: "var(--sl-color-danger-10)",
@@ -2540,21 +2509,22 @@ sl-checkbox::part(base){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$9 = JSS.jss.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$a = JSS.jss.createStyleSheet(style$a);
+const styleString$a = sheet$a.toString();
 function CheckboxFieldView(props) {
+  var _a, _b, _c;
   const { states, content, callbacks } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
-  return (index.h("div", { class: sheet$9.classes.FieldContainer },
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (index.h("div", { class: sheet$a.classes.FieldContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$4,
-      styleString$9),
+      styleString$a),
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
-        class: sheet$9.classes.ErrorStyle,
+        class: sheet$a.classes.ErrorStyle,
       }
       : [])),
       global.intl.formatMessage({
@@ -2563,13 +2533,13 @@ function CheckboxFieldView(props) {
       }, {
         labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
       }),
-      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$9.classes.ErrorMessageStyle }, global.intl.formatMessage({
+      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, global.intl.formatMessage({
         id: `errorMessage-${content.checkboxName}`,
         defaultMessage: content.errorMessage,
       }))))));
 }
 
-const style$a = {
+const style$b = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
     "--sl-input-background-color": "var(--sl-color-danger-10)",
@@ -2597,26 +2567,30 @@ sl-select::part(label){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$a = JSS.jss.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
+const sheet$b = JSS.jss.createStyleSheet(style$b);
+const styleString$b = sheet$b.toString();
 function DropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
-  return (index.h("div", { class: sheet$a.classes.FieldContainer },
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (index.h("div", { class: sheet$b.classes.FieldContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$5,
-      styleString$a),
-    index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
-      class: sheet$a.classes.ErrorStyle,
+      styleString$b),
+    index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+      class: sheet$b.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, global.intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle }, global.intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
 }
 
-const style$b = {
+const style$c = {
   ErrorStyle: mixins.ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
@@ -2630,17 +2604,21 @@ const vanillaStyle$6 = `
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$b = JSS.jss.createStyleSheet(style$b);
-const styleString$b = sheet$b.toString();
+const sheet$c = JSS.jss.createStyleSheet(style$c);
+const styleString$c = sheet$c.toString();
 function InputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
-  return (index.h("div", { class: sheet$b.classes.FieldContainer },
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (index.h("div", { class: sheet$c.classes.FieldContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$6,
-      styleString$b),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
-      class: sheet$b.classes.ErrorStyle,
+      styleString$c),
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+      class: sheet$c.classes.ErrorStyle,
       helpText: global.intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2735,7 +2713,7 @@ function ProgressBar({ stageCount, currentStage, }) {
   return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
 }
 
-const style$c = {
+const style$d = {
   HostBlock: mixins.HostBlock,
   Container: {
     minWidth: "300px",
@@ -3086,8 +3064,8 @@ const style$c = {
   },
 };
 // JSS config
-const sheet$c = JSS.createStyleSheet(style$c);
-const styleString$c = sheet$c.toString();
+const sheet$d = JSS.createStyleSheet(style$d);
+const styleString$d = sheet$d.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3110,7 +3088,7 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    return (index.h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet$c.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    return (index.h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet$d.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,
@@ -3118,7 +3096,7 @@ function RewardExchangeView(props) {
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
-      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$c.classes.SelectItem },
+      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$d.classes.SelectItem },
         step.prettyDestinationValue,
         index.h("br", null),
         index.h("div", { class: "step-cost", slot: "suffix" },
@@ -3137,8 +3115,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       index.h("div", null,
-        index.h("div", { class: sheet$c.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$c.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        index.h("div", { class: sheet$d.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$d.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)
@@ -3147,7 +3125,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (index.h("div", { key: item.key, style: style },
-            index.h("sl-card", { class: sheet$c.classes.Card, style: {
+            index.h("sl-card", { class: sheet$d.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3164,14 +3142,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                index.h("div", { class: sheet$c.classes.Image, style: {
+                index.h("div", { class: sheet$d.classes.Image, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("img", { class: item.unavailableReasonCode
                       ? "image subdued"
                       : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
                       index.getAssetPath("./assets/Reward-image.png") })),
-                index.h("div", { class: sheet$c.classes.TextArea, style: {
+                index.h("div", { class: sheet$d.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("div", { class: "title", style: {
@@ -3204,7 +3182,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        index.h("div", { class: sheet$c.classes.Button },
+        index.h("div", { class: sheet$d.classes.Button },
           index.h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -3215,7 +3193,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", { class: sheet$c.classes.ChooseAmount },
+      index.h("div", { class: sheet$d.classes.ChooseAmount },
         index.h("div", { class: "wrapper" },
           index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               index.getAssetPath("./assets/Reward-image.png") }),
@@ -3224,7 +3202,7 @@ function RewardExchangeView(props) {
             ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "points" }, input)) : (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", null, input)),
             index.h("div", { class: "space" }))),
-        index.h("div", { class: sheet$c.classes.Button },
+        index.h("div", { class: sheet$d.classes.Button },
           index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -3232,8 +3210,8 @@ function RewardExchangeView(props) {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (index.h("div", null,
-      index.h("div", { class: sheet$c.classes.Confirmation },
-        index.h("div", { class: sheet$c.classes.Title }, states.content.text.redeemTitle),
+      index.h("div", { class: sheet$d.classes.Confirmation },
+        index.h("div", { class: sheet$d.classes.Title }, states.content.text.redeemTitle),
         index.h("div", { class: "wrapper" },
           index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
           index.h("div", { class: "reward-item-container" },
@@ -3248,13 +3226,13 @@ function RewardExchangeView(props) {
         index.h("div", { class: "wrapper top-border padding" },
           index.h("div", { class: "field" }, states.content.text.costTitle),
           index.h("div", { class: "value" }, cost)),
-        index.h("div", { class: sheet$c.classes.Button },
+        index.h("div", { class: sheet$d.classes.Button },
           index.h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
           index.h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f;
-    return (index.h("div", { class: sheet$c.classes.Success },
+    return (index.h("div", { class: sheet$d.classes.Success },
       index.h(Gift$1, null),
       index.h(Confetti, null),
       index.h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -3269,7 +3247,7 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { class: "promo" },
         states.content.text.promoCode,
         index.h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
-      index.h("div", { class: sheet$c.classes.Button },
+      index.h("div", { class: sheet$d.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3281,7 +3259,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { class: sheet$c.classes.ProgressBar },
+    return (index.h("div", { class: sheet$d.classes.ProgressBar },
       index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return index.h("span", { class: "text" }, stageProgressList[stage]);
@@ -3293,10 +3271,10 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet$c.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$d.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
-        index.h("sl-card", { class: sheet$c.classes.Card },
-          index.h("div", { class: sheet$c.classes.CardLayout },
+        index.h("sl-card", { class: sheet$d.classes.Card },
+          index.h("div", { class: sheet$d.classes.CardLayout },
             index.h("div", null,
               index.h("sl-skeleton", { style: {
                   width: "100px",
@@ -3328,12 +3306,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$c.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$d.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (index.h("div", { class: sheet$c.classes.Container },
-    index.h("style", { type: "text/css" }, styleString$c),
+  return (index.h("div", { class: sheet$d.classes.Container },
+    index.h("style", { type: "text/css" }, styleString$d),
     index.h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),