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

package/dist/cjs/{GenericTableView-7ef786c3.js → GenericTableView-a9f4ba75.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
+const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
 

package/dist/cjs/{ShadowViewAddon-fae7ab2c.js → ShadowViewAddon-c195102f.js}

@@ -1,20 +1,20 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const global = require('./global-d9abaf4d.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const global = require('./global-0cb2907a.js');
+const index_module = require('./index.module-3ae0c462.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-43e8349f.js');
+const copyTextView = require('./copy-text-view-f7a88b15.js');
 const mixins = require('./mixins-f7e0377a.js');
-const useChildElements = require('./useChildElements-438cf387.js');
-const luxon = require('./luxon-14ae1f8a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-a22f50aa.js');
+const useChildElements = require('./useChildElements-4e04d4a0.js');
+const luxon = require('./luxon-2926d85f.js');
+const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 const index$1 = require('./index-8c6255f5.js');
-const utilities = require('./utilities-27e9535b.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-9a36f5ed.js');
+const utilities = require('./utilities-7da4d59a.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -375,13 +375,13 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = index_module.z() } = props;
-  const user = index_module.K();
-  const engagementMedium = index_module.ne();
-  const contextData = index_module.Dn(copyTextView.REFERRAL_CODES_NAMESPACE);
-  const { data } = index_module.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] = index_module.xe(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = index_module.xe(copyTextView.SET_CODE_COPIED);
+  const { programId = index_module.H() } = props;
+  const user = index_module.Q();
+  const engagementMedium = index_module.B();
+  const contextData = index_module.In(copyTextView.REFERRAL_CODES_NAMESPACE);
+  const { data } = index_module.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] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied, copiedRes] = index_module.$e(copyTextView.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
   "...";
@@ -466,19 +466,19 @@ function GenericShare(messageLink, errorText) {
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : index_module.z();
-  const user = index_module.K();
-  const engagementMedium = index_module.ne();
+  const programId = props.programId ? props.programId : index_module.H();
+  const user = index_module.Q();
+  const engagementMedium = index_module.B();
   const variables = {
     engagementMedium,
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const contextData = index_module.Dn(copyTextView.REFERRAL_CODES_NAMESPACE);
+  const contextData = index_module.In(copyTextView.REFERRAL_CODES_NAMESPACE);
   const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
   // only queries if a programId is available
-  const res = index_module.En(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setCopied, copiedRes] = index_module.xe(copyTextView.SET_CODE_COPIED);
+  const res = index_module.yn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
+  const [setCopied, copiedRes] = index_module.$e(copyTextView.SET_CODE_COPIED);
   const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink);
   const environment = index_module.getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -512,7 +512,7 @@ function useShareButton(props) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.En(query, variables);
+  const res = index_module.yn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -923,7 +923,7 @@ const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") =>
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = index_module.En(query, {
+      const result = index_module.yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -982,7 +982,7 @@ const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") =
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = index_module.En(query, {
+      const result = index_module.yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -1378,11 +1378,11 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => index$1.pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, programId = index_module.z(), } = props;
+  const { statType, flexReverse, alignment, programId = index_module.H(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements.useChildElements();
-  const locale = index_module.Q();
-  const userIdent = index_module.K();
+  const locale = index_module.L();
+  const userIdent = index_module.Q();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -2721,6 +2721,54 @@ function ReferralIframeView(props) {
 }
 
 const style$8 = {
+  ErrorStyle: mixins.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 = JSS.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 (index.h("div", { class: sheet$8.classes.FieldsContainer },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$4,
+      styleString$8),
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+      class: sheet$8.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, 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)",
@@ -2743,7 +2791,7 @@ const style$8 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2759,22 +2807,22 @@ sl-checkbox::part(base){
 }
 `;
 JSS.jss.setup(JSS.create());
-const sheet$8 = JSS.jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$9 = JSS.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 (index.h("div", { class: sheet$8.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$9.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$8),
+      vanillaStyle$5,
+      styleString$9),
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
       } }, (!content.checkboxOptional ? { required: 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,
       }
       : [])),
       global.intl.formatMessage({
@@ -2783,13 +2831,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$8.classes.ErrorMessageStyle }, global.intl.formatMessage({
+      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$9.classes.ErrorMessageStyle }, global.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)",
@@ -2805,7 +2853,7 @@ const style$9 = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2817,36 +2865,36 @@ sl-select::part(label){
 }
 `;
 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 DropdownFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$9.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$5,
-      styleString$9),
+      vanillaStyle$6,
+      styleString$a),
     index.h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
-      class: sheet$9.classes.ErrorStyle,
+      class: sheet$a.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$9.classes.ErrorMessageStyle }, global.intl.formatMessage({
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, global.intl.formatMessage({
       id: `errorMessage-${content.dropdownName}`,
       defaultMessage: content.errorMessage,
     })))));
 }
 
-const style$a = {
+const style$b = {
   ErrorStyle: mixins.ErrorStyles,
   FieldContainer: {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2854,21 +2902,21 @@ const vanillaStyle$6 = `
 }
 `;
 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 InputFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
+  return (index.h("div", { class: sheet$b.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$6,
-      styleString$a),
+      vanillaStyle$7,
+      styleString$b),
     index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
-      class: sheet$a.classes.ErrorStyle,
+      class: sheet$b.classes.ErrorStyle,
       helpText: global.intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
         defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
@@ -2963,7 +3011,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$b = {
+const style$c = {
   HostBlock: mixins.HostBlock,
   Container: {
     minWidth: "300px",
@@ -3314,8 +3362,8 @@ const style$b = {
   },
 };
 // JSS config
-const sheet$b = JSS.createStyleSheet(style$b);
-const styleString$b = sheet$b.toString();
+const sheet$c = JSS.createStyleSheet(style$c);
+const styleString$c = sheet$c.toString();
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
@@ -3338,7 +3386,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$b.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$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,
@@ -3346,7 +3394,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$b.classes.SelectItem },
+      return (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet$c.classes.SelectItem },
         step.prettyDestinationValue,
         index.h("br", null),
         index.h("div", { class: "step-cost", slot: "suffix" },
@@ -3365,8 +3413,8 @@ function RewardExchangeView(props) {
     var _a;
     return [
       index.h("div", { part: "choose-reward-container" },
-        index.h("div", { class: sheet$b.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$b.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        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) => {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
@@ -3375,7 +3423,7 @@ function RewardExchangeView(props) {
             borderRadius: "4px",
           };
           return (index.h("div", { key: item.key, style: style },
-            index.h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$b.classes.Card, style: {
+            index.h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$c.classes.Card, style: {
                 cursor: item.unavailableReasonCode
                   ? "not-allowed"
                   : "pointer",
@@ -3392,14 +3440,14 @@ function RewardExchangeView(props) {
                     ? "rgba(0, 0, 0, 0.05)"
                     : "rgba(0, 0, 0, 0)",
                 } },
-                index.h("div", { class: sheet$b.classes.Image, style: {
+                index.h("div", { class: sheet$c.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$b.classes.TextArea, style: {
+                index.h("div", { class: sheet$c.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
                   index.h("div", { class: "title", style: {
@@ -3432,7 +3480,7 @@ function RewardExchangeView(props) {
                         item.prettySourceMinValue,
                     }))))))));
         }))),
-        index.h("div", { class: sheet$b.classes.Button },
+        index.h("div", { class: sheet$c.classes.Button },
           index.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))),
     ];
   }
@@ -3443,7 +3491,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", { class: sheet$b.classes.ChooseAmount, part: "choose-amount-container" },
+      index.h("div", { class: sheet$c.classes.ChooseAmount, part: "choose-amount-container" },
         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") }),
@@ -3452,7 +3500,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$b.classes.Button },
+        index.h("div", { class: sheet$c.classes.Button },
           index.h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           index.h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
@@ -3460,8 +3508,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$b.classes.Confirmation, part: "confirmation-container" },
-        index.h("div", { class: sheet$b.classes.Title }, states.content.text.redeemTitle),
+      index.h("div", { class: sheet$c.classes.Confirmation, part: "confirmation-container" },
+        index.h("div", { class: sheet$c.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" },
@@ -3476,13 +3524,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$b.classes.Button },
+        index.h("div", { class: sheet$c.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$b.classes.Success, part: "success-container" },
+    return (index.h("div", { class: sheet$c.classes.Success, part: "success-container" },
       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),
@@ -3497,7 +3545,7 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { class: "promo" },
         states.content.text.promoCode,
         index.h(copyTextView.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 }))),
-      index.h("div", { class: sheet$b.classes.Button },
+      index.h("div", { class: sheet$c.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
@@ -3509,7 +3557,7 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { class: sheet$b.classes.ProgressBar },
+    return (index.h("div", { class: sheet$c.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]);
@@ -3521,10 +3569,10 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet$b.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$c.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
-        index.h("sl-card", { class: sheet$b.classes.Card },
-          index.h("div", { class: sheet$b.classes.CardLayout },
+        index.h("sl-card", { class: sheet$c.classes.Card },
+          index.h("div", { class: sheet$c.classes.CardLayout },
             index.h("div", null,
               index.h("sl-skeleton", { style: {
                   width: "100px",
@@ -3556,12 +3604,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 (index.h("div", { class: sheet$b.classes.Container, part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$b),
+  return (index.h("div", { class: sheet$c.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString$c),
     index.h("div", null,
       stageMap(),
       states.exchangeError && errorMessage(),
@@ -3977,7 +4025,7 @@ function CardFeedView(props, children) {
     index.h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
-const style$c = {
+const style$d = {
   HostBlock: mixins.HostBlock,
   couponCodeLabel: {
     margin: "var(--sl-spacing-x-small) 0",
@@ -3985,21 +4033,21 @@ const style$c = {
     fontSize: "var(--sl-font-size-small)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$8 = `
   :host{
     display: block;   
     width: 100%;
   }
 `;
-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();
 function CouponCodeView(props) {
   const error = !props.loading && props.error;
   return (index.h("div", null,
     index.h("style", { type: "text/css" },
-      styleString$c,
-      vanillaStyle$7),
-    index.h("p", { class: sheet$c.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+      styleString$d,
+      vanillaStyle$8),
+    index.h("p", { class: sheet$d.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
     error ? (index.h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
       index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(copyTextView.CopyTextView, Object.assign({}, props)))));
 }
@@ -4098,6 +4146,7 @@ exports.EditProfileView = EditProfileView;
 exports.HeroView = HeroView;
 exports.InputFieldView = InputFieldView;
 exports.LeaderboardView = LeaderboardView;
+exports.NameFieldsView = NameFieldsView;
 exports.PortalChangePasswordView = PortalChangePasswordView;
 exports.PortalFooterView = PortalFooterView;
 exports.PortalFrameView = PortalFrameView;

package/dist/cjs/{copy-text-view-43e8349f.js → copy-text-view-f7a88b15.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-3ae0c462.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
 
@@ -62,11 +62,11 @@ const SET_CODE_COPIED = index_module.dist.gql `
   }
 `;
 function useReferralCodes(props) {
-  const user = index_module.K();
-  const engagementMedium = index_module.ne();
-  const programId = props.programId || index_module.z();
-  const { refresh } = index_module.Ye();
-  const { envelope: referralData, states, callbacks, } = index_module.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 = index_module.Q();
+  const engagementMedium = index_module.B();
+  const programId = props.programId || index_module.H();
+  const { refresh } = index_module.ze();
+  const { envelope: referralData, states, callbacks, } = index_module.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,
   }, {
@@ -78,11 +78,11 @@ function useReferralCodes(props) {
       dateUsed_exists: false,
     },
   }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [paginationContext, setPaginationContext] = index_module.Fn({
+  const [paginationContext, setPaginationContext] = index_module.Cn({
     namespace: REFERRAL_CODES_PAGINATION_CONTEXT,
     initialValue: { states, callbacks },
   });
-  const [referralCodesContext, setReferralCodesContext] = index_module.Fn({
+  const [referralCodesContext, setReferralCodesContext] = index_module.Cn({
     namespace: REFERRAL_CODES_NAMESPACE,
     initialValue: {
       refresh,

package/dist/cjs/{email-registration-view-4eeee3e4.js → email-registration-view-55b378dc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
+const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
 

package/dist/cjs/{global-d9abaf4d.js → global-0cb2907a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-3ae0c462.js');
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -26637,7 +26637,7 @@ sl-input::part(label){
 
 `;
 
-index_module.J(stencilHooks_module.l);
+index_module.U(stencilHooks_module.l);
 const debug = stencilHooks_module.browser("sq:global");
 const cache = createIntlCache();
 const intl = createIntl({

package/dist/cjs/{index-3cf5ef3d.js → index-a29c60ef.js}

@@ -1345,6 +1345,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if ( Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1373,6 +1374,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1421,6 +1427,10 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
         endConnected();
     }
 };