@saasquatch/mint-components 1.14.6-9 → 1.14.7-0

package/dist/esm/{sqm-big-stat_42.entry.js → sqm-big-stat_43.entry.js}

@@ -15,12 +15,12 @@ import './luxon-8d51c92b.js';
 import './sqm-text-span-view-ca32495e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-d6f33135.js';
-import { R as RequiredPropsError, u as useLeadFormState } from './useLeadFormState-9016d812.js';
+import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-9016d812.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
 import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-5b0ca040.js';
-import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, O as LeadFormView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-81771102.js';
+import { b as useDemoBigStat, W as useBigStat, B as BigStatView, U as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, Q as LeadDropdownFieldView, O as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, Y as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-64194d20.js';
 import './sqm-portal-container-view-1683ae32.js';
 import { u as usePayoutStatus } from './usePayoutStatus-fed17fc9.js';
 
@@ -1289,6 +1289,81 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+function useLeadDropdownField() {
+  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadDropdownField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Dropdown label
+     */
+    this.dropdownLabel = "Select an option";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please select a {dropdownLabel}";
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.dropdownOptional = false;
+    /**
+     * @uiName Multiple selection
+     * @default
+     */
+    this.multiple = false;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, h$1("slot", null)));
+    }
+    const content = {
+      ...getProps(this),
+      selectOptions: h$1("slot", null),
+    };
+    const { states } = isDemo()
+      ? useLeadDropdownFieldDemo(this)
+      : useLeadDropdownField();
+    return (h$1(LeadDropdownFieldView, { states: states, content: content }));
+  }
+};
+function useLeadDropdownFieldDemo(props) {
+  return cjs({
+    states: {
+      leadFormState: {},
+    },
+    content: {
+      dropdownName: props.dropdownName,
+      dropdownLabel: props.dropdownLabel,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+      dropdownOptional: props.dropdownOptional,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 const SUBMIT_LEAD = dist.gql `
   mutation submitForm($formSubmissionInput: FormSubmissionInput!) {
     submitForm(formSubmissionInput: $formSubmissionInput) {
@@ -1312,7 +1387,6 @@ function useLeadForm(props) {
   const programId = H();
   const user = J();
   const { data: userDetails } = wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
-  console.log({ userDetails });
   const [submitLead, { loading, errors, data }] = $e(SUBMIT_LEAD);
   const [success, setSuccess] = useState(false);
   useEffect(() => {
@@ -1325,7 +1399,7 @@ function useLeadForm(props) {
     };
   }, [formRef.current]);
   const submit = async (event) => {
-    var _a, _b, _c, _d;
+    var _a;
     let formControls = event.target.getFormControls();
     let formData = {};
     let validationErrors = {};
@@ -1357,17 +1431,12 @@ function useLeadForm(props) {
       error: "",
       validationErrors: {},
     });
-    formData = { ...formData };
     const variables = {
       key: props.formKey,
       formData,
     };
     try {
       const result = await submitLead({ formSubmissionInput: variables });
-      console.log({
-        success: (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.submitForm) === null || _b === void 0 ? void 0 : _b.success,
-        isError: result instanceof Error,
-      });
       if (result instanceof Error) {
         throw result;
       }
@@ -1376,12 +1445,11 @@ function useLeadForm(props) {
         error: "",
         validationErrors: {},
       });
-      if ((_d = (_c = result === null || result === void 0 ? void 0 : result.data) === null || _c === void 0 ? void 0 : _c.submitForm) === null || _d === void 0 ? void 0 : _d.success) {
+      if ((_a = result === null || result === void 0 ? void 0 : result.submitForm) === null || _a === void 0 ? void 0 : _a.success) {
         setSuccess(true);
       }
     }
     catch (error) {
-      console.log({ error });
       setLeadFormState({
         loading: false,
         error: props.networkErrorMessage,
@@ -1397,6 +1465,18 @@ function useLeadForm(props) {
     const asYouType = new AsYouType("US");
     e.target.value = asYouType.input(e.target.value);
   }, []);
+  function resetForm() {
+    var _a, _b;
+    setLeadFormState({
+      loading: false,
+      error: "",
+      validationErrors: {},
+    });
+    (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFormControls()) === null || _b === void 0 ? void 0 : _b.forEach((c) => {
+      c.value = "";
+    });
+    setSuccess(false);
+  }
   let errorMessage = "";
   if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
     errorMessage = props.networkErrorMessage;
@@ -1408,7 +1488,6 @@ function useLeadForm(props) {
     errorMessage =
       ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.error);
   }
-  console.log({ errors, errorMessage });
   return {
     states: {
       loading,
@@ -1420,6 +1499,7 @@ function useLeadForm(props) {
     callbacks: {
       submit,
       inputFunction,
+      resetForm,
     },
     refs: {
       formRef,
@@ -1438,11 +1518,11 @@ const LeadForm = class {
     /**
      * @uiName First Name field label
      */
-    this.firstNameLabel = "First Name";
+    this.firstNameLabel = "First name";
     /**
      * @uiName Last Name field label
      */
-    this.lastNameLabel = "Last Name";
+    this.lastNameLabel = "Last name";
     /**
      * @uiName Submit button text
      */
@@ -1455,43 +1535,52 @@ const LeadForm = class {
      * @uiName Header text
      */
     this.pageLabel = "Refer your friend";
+    /**
+     * Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms.
+     * @uiName Form key
+     */
     this.formKey = "lead-form";
     /**
-     * Optional support link for error messages.
+     * Optional support link text for error messages.
+     * @uiName Support link text
      */
-    this.supportLink = "Support";
+    this.supportLinkText = "Support";
     /**
-     * Header text shown on successful submission.
+     * Header text shown on successful lead submission.
+     * @uiName Submit success header
      */
-    this.submitSuccessHeader = "Referral submitted";
+    this.submitSuccessHeader = "Lead submitted";
     /**
-     * Description text shown on successful submission.
+     * Description text shown on successful lead submission.
+     * @uiName Submit success description
      */
     this.submitSuccessDescription = "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.";
     /**
-     * Header text shown when an error occurs.
+     *  Header text shown if an error occurs.
+     * @uiName Submit error header
      */
     this.submitErrorHeader = "An error occurred while submitting";
     /**
-     * Description text shown when an error occurs.
+     * Description text shown if an error occurs.
+     * @uiName Submit error description
      */
     this.submitErrorDescription = "Please try again later. If the problem continues, contact {supportLink}";
     /**
-     * The message to be displayed when a required field is not filled.
+     * The message to be displayed if a required field is not filled.
      *
      * @uiName Required field message
      * @uiWidget textArea
      */
     this.requiredFieldErrorMessage = "Please enter a valid {fieldLabel}";
     /**
-     * The message to be displayed when a the form submission fails unexpectedly.
+     * The message to be displayed if a the form submission fails unexpectedly.
      *
      * @uiName Network error message
      * @uiWidget textArea
      */
     this.networkErrorMessage = "Network request failed.";
     /**
-     * The message to be displayed when the email used is invalid or blocked.
+     * The message to be displayed if the email used is invalid.
      *
      * @uiName Invalid email message
      * @uiWidget textArea
@@ -1510,13 +1599,15 @@ const LeadForm = class {
       submitLabel: this.submitLabel,
       resubmitFormLabel: this.resubmitFormLabel,
       pageLabel: this.pageLabel,
-      supportLink: this.supportLink,
+      supportLinkText: this.supportLinkText,
       submitSuccessHeader: this.submitSuccessHeader,
       submitSuccessDescription: this.submitSuccessDescription,
       submitErrorHeader: this.submitErrorHeader,
       submitErrorDescription: this.submitErrorDescription,
       invalidEmailErrorMessage: this.invalidEmailErrorMessage,
       requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
     };
     return (h$1(LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
@@ -1533,6 +1624,7 @@ function useRegisterDemo(props) {
         console.log("submit");
       },
       inputFunction: () => { },
+      resetForm: () => { },
     },
     refs: {
       formRef: {},
@@ -5384,4 +5476,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, LeadForm as sqm_lead_form, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };
+export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, LeadDropdownField as sqm_lead_dropdown_field, LeadForm as sqm_lead_form, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };

package/dist/esm/sqm-lead-checkbox-field.entry.js

@@ -0,0 +1,151 @@
+import { h, r as registerInstance } from './index-91e7729f.js';
+import { i as d, k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-be1f9992.js';
+import { i as isDemo } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { a as getMissingProps, g as getProps } from './utils-334c1e34.js';
+import { j as jss, a as create } from './JSS-67b5cff8.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
+
+const style = {
+  ErrorStyle: {
+    "&::part(control)": {
+      background: "var(--sl-color-danger-10)",
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+jss.setup(create());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadCheckboxFieldView(props) {
+  var _a, _b;
+  const { states, content, callbacks } = props;
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    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: false } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), required: false }), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
+}
+
+function useLeadCheckboxField(props) {
+  var _a;
+  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
+  const [checked, setChecked] = useState(false);
+  useEffect(() => {
+    var _a, _b;
+    if ((_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
+      setChecked(!!((_b = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
+    }
+  }, [(_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
+  return {
+    states: {
+      leadFormState,
+      checked,
+    },
+    callbacks: {
+      setChecked,
+    },
+  };
+}
+
+const LeadCheckboxField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Checkbox label
+     * @uiWidget textArea
+     */
+    this.checkboxLabel = "By signing up you agree to the {labelLink}";
+    /**
+     * Used with link text if the checkbox label contains {labelLink}
+     *
+     * @uiName Checkbox label link
+     */
+    this.checkboxLabelLink = "https://example.com";
+    /**
+     * @uiName Checkbox label link lext
+     */
+    this.checkboxLabelLinkText = "Terms and Conditions";
+    /**
+     * @uiName Unchecked error message
+     */
+    this.errorMessage = "Must be checked";
+    /**
+     * @uiName Optional
+     */
+    this.checkboxOptional = false;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "checkbox-name",
+        value: this.checkboxName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+    }
+    const content = {
+      ...getProps(this),
+    };
+    const { states, callbacks } = isDemo()
+      ? useLeadCheckboxFieldDemo(this)
+      : useLeadCheckboxField(this);
+    return (h(LeadCheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+  }
+};
+function useLeadCheckboxFieldDemo(props) {
+  return cjs({
+    states: {
+      registrationFormState: {},
+      checked: false,
+    },
+    callbacks: {
+      setChecked: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { LeadCheckboxField as sqm_lead_checkbox_field };

package/dist/esm/{sqm-lead-input-field-view-f1dd4b77.js → sqm-lead-input-field-view-4ede5d7f.js}

@@ -6,7 +6,7 @@ import { E as ErrorStyles } from './mixins-83f90fa1.js';
 const style = {
   ErrorStyle: ErrorStyles,
   FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+    "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
 const vanillaStyle = `
@@ -23,24 +23,24 @@ function LeadInputFieldView(props) {
   var _a, _b, _c, _d, _e, _f;
   const { states, content } = props;
   const getRequiredFieldErrorMessage = ({ fieldLabel, }) => intl.formatMessage({
-    id: "requiredFieldErrorMessage",
+    id: `requiredFieldErrorMessage-${fieldLabel}`,
     defaultMessage: content.requiredFieldErrorMessage,
   }, {
     fieldLabel,
   });
-  return (h("div", { part: "sqm-base" },
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    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: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
-        if (!value) {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: `${content.fieldLabel}${content.fieldOptional ? ` ${content.optionalLabel}` : ""}` }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
+        if (!value && !content.fieldOptional) {
           return getRequiredFieldErrorMessage({
             fieldLabel: content.fieldLabel,
           });
         }
-      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.firstName) ? {
+      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.fieldName]) ? {
       class: sheet.classes.ErrorStyle,
-      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.firstName) ||
+      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.fieldName]) ||
         content.requiredFieldErrorMessage,
     }
       : [])))));

package/dist/esm/sqm-lead-input-field.entry.js

@@ -7,7 +7,7 @@ import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
 import './mixins-83f90fa1.js';
 import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
-import { L as LeadInputFieldView } from './sqm-lead-input-field-view-f1dd4b77.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-4ede5d7f.js';
 
 function useLeadInputField() {
   const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
@@ -22,6 +22,10 @@ const LeadInputField = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
     /**
      * @uiName Input type
      * @uiType string
@@ -35,7 +39,7 @@ const LeadInputField = class {
      * @uiName Required field message
      * @uiWidget textArea
      */
-    this.requiredFieldErrorMessage = "Please enter a {fieldName}";
+    this.requiredFieldErrorMessage = "Please enter a {fieldLabel}";
     /**
      * @uiName Optional
      * @default

package/dist/esm/sqm-stencilbook.entry.js

@@ -16,7 +16,6 @@ import { A as AssetCardView } from './sqm-asset-card-view-fe5db3c0.js';
 import { C as CloseButtonView } from './sqm-close-button-view-f9819751.js';
 import './index-ffa26b43.js';
 import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.js';
-import { L as LeadDropdownFieldView } from './sqm-lead-dropdown-field-view-4c85fe20.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9d802b78.js';
@@ -32,10 +31,10 @@ import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-5
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-b12cb894.js';
 import './ErrorView-48e2b969.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-f1d0763b.js';
-import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as LeadFormView, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-81771102.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as LeadFormView, Q as LeadDropdownFieldView, U as autoColorScaleCss, V as ShadowViewAddon } from './ShadowViewAddon-64194d20.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-7f376a75.js';
-import { L as LeadInputFieldView } from './sqm-lead-input-field-view-f1dd4b77.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-4ede5d7f.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15843,6 +15842,7 @@ const defaultProps$t = {
   callbacks: {
     submit: () => console.log("Submit!"),
     inputFunction: () => { },
+    resetForm: () => { },
   },
   refs: {
     formRef: {},
@@ -15897,8 +15897,10 @@ const slottedProps$2 = {
   content: {
     ...defaultProps$t.content,
     formData: (h("div", null,
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+      h("sqm-lead-input-field", { "field-name": "firstName", "field-label": "First Name", "field-type": "text", "required-field-error-message": "Please enter a first name" }),
+      h("sqm-lead-input-field", { "field-name": "lastName", "field-label": "Last Name", "field-type": "text", "required-field-error-message": "Please enter a last name" }),
+      h("sqm-lead-input-field", { "field-name": "email", "field-label": "Email", "field-type": "email", "required-field-error-message": "Please enter a valid email address" }),
+      h("sqm-lead-dropdown-field", null))),
   },
 };
 const Default$r = () => h(LeadFormView, Object.assign({}, defaultProps$t));
@@ -15945,6 +15947,7 @@ const defaultProps$u = {
     fieldName: "firstName",
     fieldLabel: "First Name",
     fieldType: "text",
+    optionalLabel: "(Optional)",
     requiredFieldErrorMessage: "Please {fieldAction} a {fieldLabel}",
     fieldOptional: false,
   },
@@ -16001,7 +16004,9 @@ const defaultProps$v = {
     dropdownName: "country",
     dropdownLabel: "Country",
     requiredFieldErrorMessage: "Please select a country",
+    optionalLabel: "(Optional)",
     dropdownOptional: false,
+    multiple: false,
     selectOptions: [
       h("sl-menu-item", { value: "red" }, "Canada"),
       h("sl-menu-item", { value: "blue" }, "United States"),
@@ -16010,6 +16015,7 @@ const defaultProps$v = {
   },
 };
 const Default$t = () => h(LeadDropdownFieldView, Object.assign({}, defaultProps$v));
+const Multiple = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { content: { ...defaultProps$v.content, multiple: true } })));
 const WithError$1 = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
     ...defaultProps$v.states,
     leadFormState: {
@@ -16047,6 +16053,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LeadFormDropdownField_stories,
   Default: Default$t,
+  Multiple: Multiple,
   WithError: WithError$1,
   Disabled: Disabled$3,
   Loading: Loading$d,