@saasquatch/mint-components 1.12.1-7 → 1.13.0-1

package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js

@@ -100,9 +100,11 @@ export function usePortalRegistrationForm(props) {
     delete formData.password;
     delete formData.confirmPassword;
     const redirectPath = props.redirectPath;
+    const _googleOAuthIdToken = registrationFormState._googleOAuthIdToken;
     const variables = {
       key: props.formKey,
       formData: {
+        ...(_googleOAuthIdToken ? { _googleOAuthIdToken } : {}),
         locale,
         email,
         password,
@@ -195,7 +197,6 @@ export function usePortalRegistrationForm(props) {
       registrationFormState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
-      showNameFields: props.showNameFields,
       loginPath: props.loginPath,
       enablePasswordValidation: !props.disablePasswordValidation,
     },

package/dist/collection/components/sqm-portal-registration-form/useRegistrationFormState.js

@@ -1,8 +1,21 @@
 import { useHost } from "@saasquatch/component-boilerplate";
 import { useDomContextState } from "@saasquatch/dom-context-hooks";
+import { useDomContext } from "@saasquatch/stencil-hooks";
 export const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
+const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";
+export function useRegistrationForm() {
+  const parent = useDomContext(REGISTRATION_FORM_STATE_CONTEXT_INTERNAL);
+  const parentValue = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
+  if (!parent)
+    return [undefined, undefined];
+  return [parentValue, parent[1]];
+}
 export function useRegistrationFormState(formState) {
   const host = useHost();
   const [registrationFormState, setRegistrationFormState] = useDomContextState(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  useDomContextState(host, REGISTRATION_FORM_STATE_CONTEXT_INTERNAL, [
+    registrationFormState,
+    setRegistrationFormState,
+  ]);
   return { registrationFormState, setRegistrationFormState };
 }

package/dist/esm/{GenericTableView-6aa9fac9.js → GenericTableView-7b9087af.js}

@@ -1,4 +1,4 @@
-import { h } from './index-60f16d0a.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as gap } from './mixins-83f90fa1.js';
 

package/dist/esm/{ShadowViewAddon-f91cd444.js → ShadowViewAddon-fb9d29e1.js}

@@ -1,18 +1,18 @@
-import { h, c as Host, d as getAssetPath, g as getElement } from './index-60f16d0a.js';
-import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-e20edc0b.js';
-import { i as intl } from './global-3611a2b7.js';
-import { d as dist, z as z$1, K, D as Dn, E as En, x as xe, n as ne, g as getEnvironmentSDK, Q } from './index.module-f3d96fbb.js';
+import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
+import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-29e5c68b.js';
+import { d as dist, H, Q, I as In, y as yn, $ as $e, B, a as getEnvironmentSDK, L } from './index.module-bc8dd3be.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-61eebf5d.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-d79ce112.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { u as useChildElements } from './useChildElements-d1d3fedd.js';
-import { l as luxon } from './luxon-9b1f9912.js';
-import { T as TextSpanView } from './sqm-text-span-view-d1b54710.js';
+import { u as useChildElements } from './useChildElements-9d6edd4a.js';
+import { l as luxon } from './luxon-8d51c92b.js';
+import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-33996ce7.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-c3be4b88.js';
+import { a as isValidColor, b as isMobile } from './utilities-fe487ceb.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -373,13 +373,13 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = z$1() } = props;
-  const user = K();
-  const engagementMedium = ne();
-  const contextData = Dn(REFERRAL_CODES_NAMESPACE);
-  const { data } = En(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-  const [sendLoadEvent] = xe(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = xe(SET_CODE_COPIED);
+  const { programId = H() } = props;
+  const user = Q();
+  const engagementMedium = B();
+  const contextData = In(REFERRAL_CODES_NAMESPACE);
+  const { data } = yn(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied, copiedRes] = $e(SET_CODE_COPIED);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -464,19 +464,19 @@ function GenericShare(messageLink, errorText) {
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : z$1();
-  const user = K();
-  const engagementMedium = ne();
+  const programId = props.programId ? props.programId : H();
+  const user = Q();
+  const engagementMedium = B();
   const variables = {
     engagementMedium,
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const contextData = Dn(REFERRAL_CODES_NAMESPACE);
+  const contextData = In(REFERRAL_CODES_NAMESPACE);
   const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
   // only queries if a programId is available
-  const res = En(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setCopied, copiedRes] = xe(SET_CODE_COPIED);
+  const res = yn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
+  const [setCopied, copiedRes] = $e(SET_CODE_COPIED);
   const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink);
   const environment = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -510,7 +510,7 @@ function useShareButton(props) {
 const debug = browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = En(query, variables);
+  const res = yn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -921,7 +921,7 @@ const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") =>
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = En(query, {
+      const result = yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -980,7 +980,7 @@ const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") =
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = En(query, {
+      const result = yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -1376,11 +1376,11 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, programId = z$1(), } = props;
+  const { statType, flexReverse, alignment, programId = H(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements();
-  const locale = Q();
-  const userIdent = K();
+  const locale = L();
+  const userIdent = Q();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -2719,6 +2719,54 @@ function ReferralIframeView(props) {
 }
 
 const style$8 = {
+  ErrorStyle: ErrorStyles,
+  FieldsContainer: {
+    "& sl-input": {
+      "margin-bottom": "var(--sl-spacing-large)",
+    },
+  },
+};
+const vanillaStyle$4 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+sl-input::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+`;
+const sheet$8 = createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
+function NameFieldsView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  const { states } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (h("div", { class: sheet$8.classes.FieldsContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle$4,
+      styleString$8),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+      class: sheet$8.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
+    }
+      : []))),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", 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$8.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
+    }
+      : [])))));
+}
+
+const style$9 = {
   ErrorStyle: {
     "&::part(control)": {
       background: "var(--sl-color-danger-10)",
@@ -2741,7 +2789,7 @@ const style$8 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2757,22 +2805,22 @@ sl-checkbox::part(base){
 }
 `;
 jss.setup(create());
-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 CheckboxFieldView(props) {
   var _a, _b, _c;
   const { states, content, callbacks } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet$8.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$9.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$8),
+      vanillaStyle$5,
+      styleString$9),
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
       } }, (!content.checkboxOptional ? { required: 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$8.classes.ErrorStyle,
+        class: sheet$9.classes.ErrorStyle,
       }
       : [])),
       intl.formatMessage({
@@ -2781,13 +2829,13 @@ function CheckboxFieldView(props) {
       }, {
         labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
       }),
-      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$8.classes.ErrorMessageStyle }, intl.formatMessage({
+      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$9.classes.ErrorMessageStyle }, intl.formatMessage({
         id: `errorMessage-${content.checkboxName}`,
         defaultMessage: content.errorMessage,
       }))))));
 }
 
-const style$9 = {
+const style$a = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
     "--sl-input-background-color": "var(--sl-color-danger-10)",
@@ -2803,7 +2851,7 @@ const style$9 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2815,36 +2863,36 @@ sl-select::part(label){
 }
 `;
 jss.setup(create());
-const sheet$9 = jss.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$a = jss.createStyleSheet(style$a);
+const styleString$a = sheet$a.toString();
 function DropdownFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet$9.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$5,
-      styleString$9),
+      vanillaStyle$6,
+      styleString$a),
     h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
-      class: sheet$9.classes.ErrorStyle,
+      class: sheet$a.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$9.classes.ErrorMessageStyle }, intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle }, intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
 }
 
-const style$a = {
+const style$b = {
   ErrorStyle: ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2852,21 +2900,21 @@ const vanillaStyle$6 = `
 }
 `;
 jss.setup(create());
-const sheet$a = jss.createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
+const sheet$b = jss.createStyleSheet(style$b);
+const styleString$b = sheet$b.toString();
 function InputFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
+  return (h("div", { class: sheet$b.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$6,
-      styleString$a),
+      vanillaStyle$7,
+      styleString$b),
     h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
-      class: sheet$a.classes.ErrorStyle,
+      class: sheet$b.classes.ErrorStyle,
       helpText: intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2961,7 +3009,7 @@ 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 style$b = {
+const style$c = {
   HostBlock: HostBlock,
   Container: {
     minWidth: "300px",
@@ -3312,8 +3360,8 @@ const style$b = {
   },
 };
 // JSS config
-const sheet$b = createStyleSheet(style$b);
-const styleString$b = sheet$b.toString();
+const sheet$c = createStyleSheet(style$c);
+const styleString$c = sheet$c.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3336,7 +3384,7 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    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$b.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    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$c.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,
@@ -3344,7 +3392,7 @@ function RewardExchangeView(props) {
         });
       } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
-      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$b.classes.SelectItem },
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$c.classes.SelectItem },
         step.prettyDestinationValue,
         h("br", null),
         h("div", { class: "step-cost", slot: "suffix" },
@@ -3363,8 +3411,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       h("div", { part: "choose-reward-container" },
-        h("div", { class: sheet$b.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$b.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        h("div", { class: sheet$c.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet$c.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)
@@ -3373,7 +3421,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (h("div", { key: item.key, style: style },
-            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$b.classes.Card, style: {
+            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$c.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3390,14 +3438,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                h("div", { class: sheet$b.classes.Image, style: {
+                h("div", { class: sheet$c.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$b.classes.TextArea, style: {
+                h("div", { class: sheet$c.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   h("div", { class: "title", style: {
@@ -3430,7 +3478,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        h("div", { class: sheet$b.classes.Button },
+        h("div", { class: sheet$c.classes.Button },
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
@@ -3441,7 +3489,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (h("div", null,
-      h("div", { class: sheet$b.classes.ChooseAmount, part: "choose-amount-container" },
+      h("div", { class: sheet$c.classes.ChooseAmount, part: "choose-amount-container" },
         h("div", { class: "wrapper" },
           h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               getAssetPath("./assets/Reward-image.png") }),
@@ -3450,7 +3498,7 @@ function RewardExchangeView(props) {
             ((_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", null, input)),
             h("div", { class: "space" }))),
-        h("div", { class: sheet$b.classes.Button },
+        h("div", { class: sheet$c.classes.Button },
           h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -3458,8 +3506,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 (h("div", null,
-      h("div", { class: sheet$b.classes.Confirmation, part: "confirmation-container" },
-        h("div", { class: sheet$b.classes.Title }, states.content.text.redeemTitle),
+      h("div", { class: sheet$c.classes.Confirmation, part: "confirmation-container" },
+        h("div", { class: sheet$c.classes.Title }, states.content.text.redeemTitle),
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
@@ -3474,13 +3522,13 @@ function RewardExchangeView(props) {
         h("div", { class: "wrapper top-border padding" },
           h("div", { class: "field" }, states.content.text.costTitle),
           h("div", { class: "value" }, cost)),
-        h("div", { class: sheet$b.classes.Button },
+        h("div", { class: sheet$c.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, _f;
-    return (h("div", { class: sheet$b.classes.Success, part: "success-container" },
+    return (h("div", { class: sheet$c.classes.Success, part: "success-container" },
       h(Gift$1, null),
       h(Confetti, null),
       h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -3495,7 +3543,7 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
         h(CopyTextView, { copyString: 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 }))),
-      h("div", { class: sheet$b.classes.Button },
+      h("div", { class: sheet$c.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3507,7 +3555,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet$b.classes.ProgressBar },
+    return (h("div", { class: sheet$c.classes.ProgressBar },
       h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
         if (stageList.indexOf(stage) <= stageNumber) {
           return h("span", { class: "text" }, stageProgressList[stage]);
@@ -3519,10 +3567,10 @@ function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet$b.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (h("div", { class: sheet$c.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (h("div", null,
-        h("sl-card", { class: sheet$b.classes.Card },
-          h("div", { class: sheet$b.classes.CardLayout },
+        h("sl-card", { class: sheet$c.classes.Card },
+          h("div", { class: sheet$c.classes.CardLayout },
             h("div", null,
               h("sl-skeleton", { style: {
                   width: "100px",
@@ -3554,12 +3602,12 @@ function RewardExchangeView(props) {
         if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
           return;
         refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet$b.classes.Confetti }));
+      }, id: "my-canvas", class: sheet$c.classes.Confetti }));
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (h("div", { class: sheet$b.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString$b),
+  return (h("div", { class: sheet$c.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString$c),
     h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -3975,7 +4023,7 @@ function CardFeedView(props, children) {
     h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
-const style$c = {
+const style$d = {
   HostBlock: HostBlock,
   couponCodeLabel: {
     margin: "var(--sl-spacing-x-small) 0",
@@ -3983,21 +4031,21 @@ const style$c = {
     fontSize: "var(--sl-font-size-small)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$8 = `
   :host{
     display: block;   
     width: 100%;
   }
 `;
-const sheet$c = createStyleSheet(style$c);
-const styleString$c = sheet$c.toString();
+const sheet$d = createStyleSheet(style$d);
+const styleString$d = sheet$d.toString();
 function CouponCodeView(props) {
   const error = !props.loading && props.error;
   return (h("div", null,
     h("style", { type: "text/css" },
-      styleString$c,
-      vanillaStyle$7),
-    h("p", { class: sheet$c.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+      styleString$d,
+      vanillaStyle$8),
+    h("p", { class: sheet$d.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
     error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
 }
@@ -4087,4 +4135,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { loading as A, BigStatView as B, CheckboxFieldView as C, DropdownFieldView as D, EditProfileView as E, empty as F, rewardExchange as G, HeroView as H, InputFieldView as I, CardFeedView as J, CouponCodeView as K, LeaderboardView as L, ProgressBar as M, autoColorScaleCss as N, ShadowViewAddon as O, PortalFrameView as P, useBigStat as Q, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, withShadowView as U, demoRewardExchange as V, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalLoginView as e, PortalRegisterView as f, ProgressBarView as g, PoweredByImg as h, PortalFooterView as i, RewardExchangeView as j, rewardExchangeLongText as k, rewardExchangeSelected as l, chooseAmountFixed as m, chooseAmountFixedNoDescription as n, chooseAmountVariable as o, chooseAmountVariableNoDescription as p, chooseAmountVariableDisabled as q, rewardExchangeCustomErrorMsg as r, chooseAmountVariableUnavailable as s, confirmFixed as t, useShareLink as u, confirmVariable as v, redemptionError as w, queryError as x, success as y, successVariable as z };
+export { loading as A, BigStatView as B, CheckboxFieldView as C, DropdownFieldView as D, EditProfileView as E, empty as F, rewardExchange as G, HeroView as H, InputFieldView as I, CardFeedView as J, CouponCodeView as K, LeaderboardView as L, ProgressBar as M, NameFieldsView as N, autoColorScaleCss as O, PortalFrameView as P, ShadowViewAddon as Q, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, useBigStat as U, withShadowView as V, demoRewardExchange as W, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalLoginView as e, PortalRegisterView as f, ProgressBarView as g, PoweredByImg as h, PortalFooterView as i, RewardExchangeView as j, rewardExchangeLongText as k, rewardExchangeSelected as l, chooseAmountFixed as m, chooseAmountFixedNoDescription as n, chooseAmountVariable as o, chooseAmountVariableNoDescription as p, chooseAmountVariableDisabled as q, rewardExchangeCustomErrorMsg as r, chooseAmountVariableUnavailable as s, confirmFixed as t, useShareLink as u, confirmVariable as v, redemptionError as w, queryError as x, success as y, successVariable as z };

package/dist/esm/{copy-text-view-61eebf5d.js → copy-text-view-d79ce112.js}

@@ -1,6 +1,6 @@
-import { h } from './index-60f16d0a.js';
-import { f as useEffect } from './stencil-hooks.module-e20edc0b.js';
-import { d as dist, K, z, Y as Ye, O as On, F as Fn, n as ne } from './index.module-f3d96fbb.js';
+import { h } from './index-91e7729f.js';
+import { f as useEffect } from './stencil-hooks.module-4bc38af4.js';
+import { d as dist, Q, H, z as ze, k as kn, C as Cn, B } from './index.module-bc8dd3be.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { H as HostBlock } from './mixins-83f90fa1.js';
 
@@ -60,11 +60,11 @@ const SET_CODE_COPIED = dist.gql `
   }
 `;
 function useReferralCodes(props) {
-  const user = K();
-  const engagementMedium = ne();
-  const programId = props.programId || z();
-  const { refresh } = Ye();
-  const { envelope: referralData, states, callbacks, } = On(GET_REFERRAL_CODES, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodeList; }, {
+  const user = Q();
+  const engagementMedium = B();
+  const programId = props.programId || H();
+  const { refresh } = ze();
+  const { envelope: referralData, states, callbacks, } = kn(GET_REFERRAL_CODES, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodeList; }, {
     limit: 1,
     offset: 0,
   }, {
@@ -76,11 +76,11 @@ function useReferralCodes(props) {
       dateUsed_exists: false,
     },
   }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [paginationContext, setPaginationContext] = Fn({
+  const [paginationContext, setPaginationContext] = Cn({
     namespace: REFERRAL_CODES_PAGINATION_CONTEXT,
     initialValue: { states, callbacks },
   });
-  const [referralCodesContext, setReferralCodesContext] = Fn({
+  const [referralCodesContext, setReferralCodesContext] = Cn({
     namespace: REFERRAL_CODES_NAMESPACE,
     initialValue: {
       refresh,

package/dist/esm/{email-registration-view-6870d230.js → email-registration-view-a7818cf2.js}

@@ -1,4 +1,4 @@
-import { h } from './index-60f16d0a.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, g as gap, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
 

package/dist/esm/{global-3611a2b7.js → global-29e5c68b.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-e20edc0b.js';
-import { s as src, m as memoize, J } from './index.module-f3d96fbb.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-4bc38af4.js';
+import { s as src, m as memoize, U } from './index.module-bc8dd3be.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -26635,7 +26635,7 @@ sl-input::part(label){
 
 `;
 
-J(l$1);
+U(l$1);
 const debug = browser("sq:global");
 const cache = createIntlCache();
 const intl = createIntl({