@saasquatch/mint-components 1.5.2 → 1.5.3-10

package/CHANGELOG.md

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.5.3] - 2022-03-31
+
+### Added
+- Input component added for use in \<sqm-portal-register>
+- Added Component:
+  - \<sqm-input-field>
+    - Required by default but can be optional with the `field-optional` prop
+    - Field label and error message are configurable by prop
+    - Best used in `formData` slot inside \<sqm-portal-register>
+    - Form field name can be customized with the `field-name` prop
+      - `field-name` must be a unique string and is submitted as the key to the value submitted
+        - For example, with `field-name` set to `businessName` the result is `{"businessName":"SaaSquatch"}`
+      - An error is displayed if `field-name` prop is not included
+    - Input type can be customized with the `field-type` prop
+      - Supports `text`, `tel`, and `date` as types
+
+### Changed
+
+- Changed Components:
+  - \<sqm-dropdown-field>
+    - An error is now displayed if `dropdown-name` prop is not included
+    - `dropdown-required` prop deprecated, must use `dropdown-optional` instead
+      - Field is still required by default
+  - \<sqm-checkbox-field>
+    - Error is now displayed if `checkbox-name` prop is not included
+    - `checkbox-required` prop deprecated, must use `checkbox-optional` instead
+      - Field is still required by default
+  - \<sqm-referral-iframe>
+    - Updated fail fast state text
+
 ## [1.5.2] - 2022-03-08
 
 ### Changed
@@ -385,7 +415,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - \<sqm-popup-container>
   - \<sqm-stencilbook>
 
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.5.2...HEAD
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.5.3...HEAD
+[1.5.3]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.3
 [1.5.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.2
 [1.5.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.1
 [1.5.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.0

package/dist/cjs/{GenericTableView-c2a781ea.js → GenericTableView-f98bcef7.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-b0129cd6.js');
 const mixins = require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
+const JSS = require('./JSS-c73206b7.js');
 
 function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;

package/dist/cjs/{JSS-a75f3a9a.js → JSS-c73206b7.js}

@@ -1,6 +1,22 @@
 'use strict';
 
-const _extends = require('./extends-08099afd.js');
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -350,7 +366,7 @@ function (_BaseStyleRule) {
   _proto2.toString = function toString(options) {
     var sheet = this.options.sheet;
     var link = sheet ? sheet.options.link : false;
-    var opts = link ? _extends._extends({}, options, {
+    var opts = link ? _extends({}, options, {
       allowEmpty: true
     }) : options;
     return toCss(this.selectorText, this.style, opts);
@@ -418,7 +434,7 @@ function () {
 
     this.query = options.name || "@" + this.at;
     this.options = options;
-    this.rules = new RuleList(_extends._extends({}, options, {
+    this.rules = new RuleList(_extends({}, options, {
       parent: this
     }));
 
@@ -523,12 +539,12 @@ function () {
         sheet = options.sheet,
         generateId = options.generateId;
     this.id = scoped === false ? this.name : escape(generateId(this, sheet));
-    this.rules = new RuleList(_extends._extends({}, options, {
+    this.rules = new RuleList(_extends({}, options, {
       parent: this
     }));
 
     for (var name in frames) {
-      this.rules.add(name, frames[name], _extends._extends({}, options, {
+      this.rules.add(name, frames[name], _extends({}, options, {
         parent: this
       }));
     }
@@ -646,7 +662,7 @@ function (_BaseStyleRule) {
   _proto.toString = function toString(options) {
     var sheet = this.options.sheet;
     var link = sheet ? sheet.options.link : false;
-    var opts = link ? _extends._extends({}, options, {
+    var opts = link ? _extends({}, options, {
       allowEmpty: true
     }) : options;
     return toCss(this.key, this.style, opts);
@@ -846,7 +862,7 @@ function () {
         generateId = _this$options.generateId,
         scoped = _this$options.scoped;
 
-    var options = _extends._extends({
+    var options = _extends({
       classes: this.classes,
       parent: parent,
       sheet: sheet,
@@ -1072,7 +1088,7 @@ function () {
     this.deployed = false;
     this.classes = {};
     this.keyframes = {};
-    this.options = _extends._extends({}, options, {
+    this.options = _extends({}, options, {
       sheet: this,
       parent: this,
       classes: this.classes,
@@ -2048,7 +2064,7 @@ function () {
     }
 
     if (options.id) {
-      this.options.id = _extends._extends({}, this.options.id, options.id);
+      this.options.id = _extends({}, this.options.id, options.id);
     }
 
     if (options.createGenerateId || options.id) {
@@ -2082,7 +2098,7 @@ function () {
       index = registry.index === 0 ? 0 : registry.index + 1;
     }
 
-    var sheet = new StyleSheet(styles, _extends._extends({}, options, {
+    var sheet = new StyleSheet(styles, _extends({}, options, {
       jss: this,
       generateId: options.generateId || this.generateId,
       insertionPoint: this.options.insertionPoint,
@@ -2124,7 +2140,7 @@ function () {
     } // $FlowFixMe[incompatible-type]
 
 
-    var ruleOptions = _extends._extends({}, options, {
+    var ruleOptions = _extends({}, options, {
       name: name,
       jss: this,
       Renderer: this.options.Renderer
@@ -2380,7 +2396,7 @@ function () {
     this.isProcessed = false;
     this.key = key;
     this.options = options;
-    this.rules = new RuleList(_extends._extends({}, options, {
+    this.rules = new RuleList(_extends({}, options, {
       parent: this
     }));
 
@@ -2443,7 +2459,7 @@ function () {
     this.key = key;
     this.options = options;
     var selector = key.substr(atPrefix.length);
-    this.rule = options.jss.createRule(selector, style, _extends._extends({}, options, {
+    this.rule = options.jss.createRule(selector, style, _extends({}, options, {
       parent: this
     }));
   }
@@ -2478,7 +2494,7 @@ function handleNestedGlobalContainerRule(rule, sheet) {
   if (!rules) return;
 
   for (var name in rules) {
-    sheet.addRule(name, rules[name], _extends._extends({}, options, {
+    sheet.addRule(name, rules[name], _extends({}, options, {
       selector: addScope(name, rule.selector)
     }));
   }
@@ -2493,7 +2509,7 @@ function handlePrefixedGlobalRule(rule, sheet) {
   for (var prop in style) {
     if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
     var selector = addScope(prop.substr(at.length), rule.selector);
-    sheet.addRule(selector, style[prop], _extends._extends({}, options, {
+    sheet.addRule(selector, style[prop], _extends({}, options, {
       selector: selector
     }));
     delete style[prop];
@@ -2578,7 +2594,7 @@ function mergeExtend(style, rule, sheet, newStyle) {
   if (Array.isArray(style.extend)) {
     for (var index = 0; index < style.extend.length; index++) {
       var singleExtend = style.extend[index];
-      var singleStyle = typeof singleExtend === 'string' ? _extends._extends({}, style, {
+      var singleStyle = typeof singleExtend === 'string' ? _extends({}, style, {
         extend: singleExtend
       }) : style.extend[index];
       extend(singleStyle, rule, sheet, newStyle);
@@ -2730,14 +2746,14 @@ function jssNested() {
 
   function getOptions(rule, container, prevOptions) {
     // Options has been already created, now we only increase index.
-    if (prevOptions) return _extends._extends({}, prevOptions, {
+    if (prevOptions) return _extends({}, prevOptions, {
       index: prevOptions.index + 1 // $FlowFixMe[prop-missing]
 
     });
     var nestingLevel = rule.options.nestingLevel;
     nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
 
-    var options = _extends._extends({}, rule.options, {
+    var options = _extends({}, rule.options, {
       nestingLevel: nestingLevel,
       index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.
 
@@ -2767,7 +2783,7 @@ function jssNested() {
         if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.
 
         selector = selector.replace(refRegExp$1, replaceRef);
-        container.addRule(selector, style[prop], _extends._extends({}, options, {
+        container.addRule(selector, style[prop], _extends({}, options, {
           selector: selector
         }));
       } else if (isNestedConditional) {

package/dist/cjs/{ShadowViewAddon-9b256c28.js → ShadowViewAddon-0becaef1.js}

@@ -1,17 +1,18 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-dd180d3b.js');
-const index_module = require('./index.module-fb61a163.js');
+const stencilHooks_module = require('./stencil-hooks.module-ffd2b47a.js');
+const global = require('./global-7eb8c483.js');
+const index_module = require('./index.module-c9cec1f7.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
-const luxon = require('./luxon-59ca7d19.js');
+const JSS = require('./JSS-c73206b7.js');
+const luxon = require('./luxon-6b09461e.js');
+const index$1 = require('./index-4933129a.js');
 const utils = require('./utils-8ef4fe4a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-ab4ad6ef.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.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" },
@@ -344,7 +345,7 @@ const EditProfileView = (props) => {
       }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
 };
 
-const MessageLinkQuery = index_module.dist.gql `
+const MessageLinkQuery = index$1.dist.gql `
   query ($programId: ID) {
     user: viewer {
       ... on User {
@@ -353,7 +354,7 @@ const MessageLinkQuery = index_module.dist.gql `
     }
   }
 `;
-const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+const WIDGET_ENGAGEMENT_EVENT = index$1.dist.gql `
   mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
@@ -391,7 +392,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, shareString };
 }
 
-const MessageLinkQuery$1 = index_module.dist.gql `
+const MessageLinkQuery$1 = index$1.dist.gql `
   query (
     $programId: ID
     $engagementMedium: UserEngagementMedium!
@@ -794,7 +795,7 @@ _, status) => {
       ? { dateConverted_exists: false }
       : {};
   const queryFilter = { ...programFilter, ...convertedFilter };
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($queryFilter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -816,7 +817,7 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   // Confirm this behaviour
   if (programId === "classic")
     return null;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query {
         viewer {
           ... on User {
@@ -839,7 +840,7 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   });
 };
 const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query {
         viewer {
           ... on User {
@@ -864,7 +865,7 @@ const referralsMonthQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($filter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -890,7 +891,7 @@ const referralsWeekQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($filter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -911,7 +912,7 @@ const referralsWeekQuery = (programId) => {
 const rewardsCountQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -935,7 +936,7 @@ const rewardsCountFilteredQuery = (programId,
 // locale
 _, type, unit, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $unit: String
@@ -974,7 +975,7 @@ const integrationRewardsCountFilteredQuery = (programId,
 // locale
 _, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
         viewer {
           ... on User {
@@ -1004,7 +1005,7 @@ _, status, global = "") => {
 const rewardsMonthQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -1032,7 +1033,7 @@ _, global = "") => {
 const rewardsWeekQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -1058,7 +1059,7 @@ _, global = "") => {
   });
 };
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1101,7 +1102,7 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1144,7 +1145,7 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1192,7 +1193,7 @@ const parseRewardValueFormat = {
 };
 const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
   var _a;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType!
@@ -2514,7 +2515,7 @@ function CheckboxFieldView(props) {
     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.checkboxRequired ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet$a.classes.ErrorStyle,
       }
@@ -2525,7 +2526,10 @@ 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$a.classes.ErrorMessageStyle }, content.errorMessage)))));
+      !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$b = {
@@ -2565,11 +2569,47 @@ function DropdownFieldView(props) {
     index.h("style", { type: "text/css" },
       vanillaStyle$5,
       styleString$b),
-    index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (content.dropdownRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    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$b.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle }, content.errorMessage))));
+    (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$c = {
+  ErrorStyle: mixins.ErrorStyles,
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle$6 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet$c = JSS.jss.createStyleSheet(style$c);
+const styleString$c = sheet$c.toString();
+function InputFieldView(props) {
+  const { states, content } = props;
+  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  return (index.h("div", { class: sheet$c.classes.FieldContainer },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$6,
+      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 } : []), ((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]),
+      }),
+    }
+      : [])))));
 }
 
 const CheckMark = () => (index.h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -2658,7 +2698,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",
@@ -3009,8 +3049,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;
@@ -3033,7 +3073,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,
@@ -3041,7 +3081,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" },
@@ -3060,8 +3100,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)
@@ -3070,7 +3110,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",
@@ -3087,14 +3127,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: {
@@ -3127,7 +3167,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))),
     ];
   }
@@ -3138,7 +3178,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") }),
@@ -3147,7 +3187,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)))));
   }
@@ -3155,8 +3195,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" },
@@ -3171,13 +3211,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),
@@ -3192,7 +3232,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 = {
@@ -3204,7 +3244,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]);
@@ -3216,10 +3256,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",
@@ -3251,12 +3291,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(),
@@ -3762,6 +3802,7 @@ exports.CardFeedView = CardFeedView;
 exports.CheckboxFieldView = CheckboxFieldView;
 exports.DropdownFieldView = DropdownFieldView;
 exports.EditProfileView = EditProfileView;
+exports.InputFieldView = InputFieldView;
 exports.LeaderboardView = LeaderboardView;
 exports.NameFieldsView = NameFieldsView;
 exports.PortalChangePasswordView = PortalChangePasswordView;