@saasquatch/mint-components 2.0.0-9 → 2.0.1

package/dist/cjs/{utils-0d3ac0fb.js → utils-6847bc06.js}

@@ -39,10 +39,6 @@ function sanitizeUrlPath(path) {
   cleanUrl.hash = url.hash;
   return cleanUrl;
 }
-function capitalizeFirstLetter(word) {
-  return word[0].toUpperCase() + word.slice(1);
-}
-console.log(capitalizeFirstLetter("warning"));
 
 exports.getMissingProps = getMissingProps;
 exports.getProps = getProps;

package/dist/collection/components/sqm-base-registration/BaseRegistrationForm.stories.js

@@ -5,7 +5,7 @@ export default {
 };
 const defaultProps = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -25,7 +25,7 @@ const defaultProps = {
 const errorProps = {
   ...defaultProps,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 export const Default = () => {

package/dist/collection/components/sqm-base-registration/sqm-base-registration-form-view.js

@@ -37,6 +37,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
@@ -44,9 +45,8 @@ export function BaseRegistrationFormView(props) {
       styleString),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      content.formData,
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -54,7 +54,13 @@ export function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         h("sl-menu-divider", { style: { margin: "0" } }),

package/dist/collection/components/sqm-big-stat/sqm-big-stat-view.js

@@ -6,8 +6,6 @@ export function BigStatView(props) {
   const style = {
     Container: {
       display: "flex",
-      // height: "inherit",
-      // "justify-content": "space-between",
       "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
       "align-items": `${alignment === "left"
         ? "flex-start"

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -120,12 +120,18 @@ const referralsMonthQuery = (programId, status) => {
     });
   });
 };
-const referralsWeekQuery = (programId) => {
+const referralsWeekQuery = (programId, status) => {
   const programFilter = programId === "classic"
     ? { programId_exists: false }
     : { programId_eq: programId };
+  const convertedFilter = status && status == "converted"
+    ? { dateConverted_exists: true }
+    : status && status == "started"
+      ? { dateConverted_exists: false }
+      : {};
   const filter = {
     ...programFilter,
+    ...convertedFilter,
     dateReferralStarted_timeframe: "this_week",
   };
   return debugQuery(gql `

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -8,7 +8,7 @@ import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
 import { useCheckboxField } from "./useCheckboxField";
 /**
  * @uiName Form Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -8,7 +8,7 @@ import { DropdownFieldView, } from "./sqm-dropdown-field-view";
 import { useDropdownField } from "./useDropdownField";
 /**
  * @uiName Form Dropdown Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @slots [{"name":"", "title":"Drop Down Option"}]
  * @exampleGroup Microsite Components
  * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -22,3 +22,17 @@ export const InfoAlert = () => {
     h("p", { part: "alert-title" }, "This is the title"),
     h("p", { part: "alert-description" }, "This is the description")));
 };
+export const SuccessAlertTransparent = () => {
+  return (h("sqm-form-message", { type: "success", transparent: true },
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
+};
+export const ErrorAlertTransparent = () => (h("sqm-form-message", { type: "error", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));
+export const WarningAlertTransparent = () => (h("sqm-form-message", { type: "warning", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));
+export const InfoAlertTransparent = () => (h("sqm-form-message", { type: "info", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));

package/dist/collection/components/sqm-form-message/sqm-form-message.css

@@ -49,6 +49,13 @@ sl-alert::part(base) {
   font-size: 24px;
 }
 
+.Transparent::part(base) {
+  background-color: transparent;
+  border: none;
+  color: var(--sqm-text);
+  margin-left: -20px;
+}
+
 ::slotted(*) {
   margin: 0;
 }

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -7,27 +7,31 @@ import { Component, h, Prop, State } from "@stencil/core";
 export class FormMessage {
   constructor() {
     this.ignored = true;
+    /**
+     * Render the alert with transparent styles
+     */
+    this.transparent = false;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
     if (this.type === "error") {
-      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true },
+      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
         h("slot", null)));
     }
     else if (this.type === "info") {
-      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
+      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: `Info ${this.transparent ? "Transparent" : ""}`, type: "info", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
         h("slot", null)));
     }
     else if (this.type === "warning") {
-      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true },
+      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: `Warning ${this.transparent ? "Transparent" : ""}`, type: "warning", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
         h("slot", null)));
     }
     else {
-      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
+      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: `Success ${this.transparent ? "Transparent" : ""}`, type: "success", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
         h("slot", null)));
     }
@@ -80,6 +84,24 @@ export class FormMessage {
       },
       "attribute": "icon",
       "reflect": false
+    },
+    "transparent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Render the alert with transparent styles"
+      },
+      "attribute": "transparent",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -122,13 +122,13 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Content background",
+            "text": "Splash image",
             "name": "uiName"
           }, {
             "text": "Background",
             "name": "uiWidget"
           }],
-        "text": "Content background color or image (for use in the left column)"
+        "text": "Splash image or background color (for use in the left column)"
       },
       "attribute": "background",
       "reflect": false
@@ -172,13 +172,13 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Splash image",
+            "text": "Content background",
             "name": "uiName"
           }, {
             "text": "Background",
             "name": "uiWidget"
           }],
-        "text": "Splash image or background color (for use in the right column)"
+        "text": "Content background color or image (for use in the right column)"
       },
       "attribute": "secondary-background",
       "reflect": false

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -6,8 +6,8 @@ import { HeroImageView } from "./sqm-hero-image-view";
  * @uiName Hero Image
  * @validParents ["sqm-portal-container","sqm-brand", "div"]
  * @exampleGroup Common Components
- * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
- * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
+ * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right"></sqm-hero-image>
+ * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
  */
 export class HeroImage {
   constructor() {

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -8,7 +8,7 @@ import { InputFieldView } from "./sqm-input-field-view";
 import { useInputField } from "./useInputField";
 /**
  * @uiName Form Input Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
  */

package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js

@@ -7,7 +7,7 @@ import { CheckboxFieldView, } from "../sqm-checkbox-field/sqm-checkbox-field-vie
 import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField";
 /**
  * @uiName Marketing Emails Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @requiredFeatures ["MARKETING_EMAILS"]
  */
 export class MarketingEmailsCheckbox {

package/dist/collection/components/sqm-name-fields/NameFields.stories.js

@@ -9,6 +9,7 @@ export default {
 };
 const props = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: undefined,
     },
@@ -20,6 +21,7 @@ const props = {
 };
 const errorProps = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: {
         firstName: "Cannot be empty",

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -56,7 +56,7 @@ export function NameFieldsView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    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) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: !states.optional, 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) ? {
@@ -64,7 +64,7 @@ export function NameFieldsView(props) {
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: !states.optional, 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) ? {

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -21,6 +21,11 @@ export class NameFields {
      * @uiName Last name label
      */
     this.lastNameLabel = "Last Name";
+    /**
+     * @uiName Optional
+     * @uiWidget
+     */
+    this.optional = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -73,12 +78,36 @@ export class NameFields {
       "reflect": false,
       "defaultValue": "\"Last Name\""
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Optional",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<NameFieldsViewProps>",
-        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
+        "resolved": "{ states?: { optional: boolean; registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -111,6 +140,7 @@ export class NameFields {
 function useNameFieldsDemo(props) {
   return deepmerge({
     states: {
+      optional: props.optional,
       validationErrors: [],
       content: {
         firstNameLabel: props.firstNameLabel,

package/dist/collection/components/sqm-name-fields/useNameFields.js

@@ -4,6 +4,7 @@ export function useNameFields(props) {
   const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
+      optional: props.optional,
       registrationFormState,
       content: {
         lastNameLabel: props.lastNameLabel,

package/dist/collection/components/sqm-password-field/sqm-password-field.js

@@ -3,13 +3,13 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useState } from "@saasquatch/universal-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
 import { validateNewPassword } from "./passwordValidation";
 import { PortalResetPasswordView, } from "./sqm-password-field-view";
 import { usePasswordField } from "./usePasswordField";
-import { getProps } from "../../utils/utils";
 /**
  * @uiName Form Password Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Password Field - <sqm-password-field field-label="Password"></sqm-password-field>
  */

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -14,7 +14,7 @@ export function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
-      backgroundColor: props.backgroundColor || "inherit",
+      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
     },
   };
   const vanillaStyle = `

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer.js

@@ -4,7 +4,7 @@ import { getProps } from "../../utils/utils";
 import { PortalFooterView } from "./sqm-portal-footer-view";
 /**
  * @uiName Footer
- * @validParents ["div","sqm-brand","sqm-portal-container", "sqm-divided-layout", "sqm-referral-card", "sqm-instant-access-registration", "sqm-portal-frame"]
+ * @validParents ["div","sqm-brand","sqm-portal-container", "sqm-divided-layout", "sqm-referral-card", "sqm-instant-access-registration", "sqm-portal-frame", "sqm-referred-registration"]
  */
 export class PortalFooter {
   constructor() {

package/dist/collection/components/sqm-portal-forgot-password/PortalForgotPassword.stories.js

@@ -65,6 +65,7 @@ const successProps = {
   content: {
     loginText: "Login",
     messageSlot: "Enter your email below to receive a password reset link.",
+    successAlertText: "An email has been sent with instructions to reset your password.",
   },
 };
 export const Default = () => h(PortalForgotPasswordView, Object.assign({}, defaultProps));

package/dist/collection/components/sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories.js

@@ -31,6 +31,7 @@ const defaultProps = {
     formData: (h("div", null,
       " ",
       h(NameFieldsView, { states: {
+          optional: false,
           registrationFormState: {
             validationErrors: undefined,
             disabled: true,

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

@@ -2,11 +2,16 @@ import { isDemo, navigation } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { createStyleSheet } from "../../styling/JSS";
 import { BaseRegistrationFormView } from "../sqm-base-registration/sqm-base-registration-form-view";
 import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
 import { usePortalRegistrationForm } from "../sqm-portal-registration-form/usePortalRegistrationForm";
 import { usePortalGoogleRegistrationForm } from "./usePortalGoogleRegistrationForm";
-import { createStyleSheet } from "../../styling/JSS";
+/**
+ * @uiName Google Registration
+ * @canvasRenderer always-replace
+ * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
+ */
 export class PortalGoogleRegistrationForm {
   constructor() {
     this.ignored = true;
@@ -156,7 +161,7 @@ export class PortalGoogleRegistrationForm {
     };
     const sheet = createStyleSheet(styles);
     const styleString = sheet.toString();
-    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
     const content = {
       formData: h("slot", { name: "formData" }),
       googleButton: (h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
@@ -187,16 +192,14 @@ export class PortalGoogleRegistrationForm {
     };
     if (showRegistrationForm.mode === "base") {
       return (h(BaseRegistrationFormView, { states: {
-          error: emailValidationError,
+          validationErrors,
         }, callbacks: { handleEmailSubmit }, content: content }));
     }
     return (h(PortalRegistrationFormView, { states: {
         ...states,
         emailDisabled: true,
         hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: {
-        ...content,
-      }, refs: refs }));
+      }, callbacks: callbacks, content: content, refs: refs }));
   }
   static get is() { return "sqm-portal-google-registration-form"; }
   static get encapsulation() { return "shadow"; }
@@ -871,7 +874,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return deepmerge({
-    emailValidationError: true,
+    validationErrors: {},
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

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

@@ -1,9 +1,8 @@
 import { useState } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
-import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
 import { jwtDecode } from "jwt-decode";
+import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function usePortalGoogleRegistrationForm(props) {
-  const [emailValidationError, setEmailValidationError] = useState(null);
   const [registrationFormState, setRegistrationFormState] = useRegistrationForm();
   const [showRegistrationForm, setShowRegistrationForm] = useState({
     mode: "base",
@@ -11,30 +10,40 @@ export function usePortalGoogleRegistrationForm(props) {
   const handleEmailSubmit = async (event) => {
     const formControls = event.target.getFormControls();
     let formData = {};
-    let errorMessage = null;
+    let validationErrors = {};
     formControls.forEach((control) => {
-      if (!control.name || control.name !== "/email")
+      if (!control.name)
         return;
-      jsonpointer.set(formData, control.name, control.value);
-      if (control.required && !control.value)
-        errorMessage = props.requiredFieldErrorMessage;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
       if (typeof control.validationError === "function") {
         const validate = control.validationError;
         const validationError = validate({
           control,
-          key: "email",
-          value: control.value,
+          key,
+          value,
         });
         if (validationError)
-          errorMessage = validationError;
+          jsonpointer.set(validationErrors, key, validationError);
       }
     });
-    if (errorMessage) {
-      setEmailValidationError(errorMessage);
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
       return;
     }
     setRegistrationFormState({
       ...registrationFormState,
+      validationErrors: {},
       initialData: {
         ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
         ...formData,
@@ -64,8 +73,9 @@ export function usePortalGoogleRegistrationForm(props) {
     }
   };
   return {
+    registrationFormState,
     showRegistrationForm,
-    emailValidationError,
+    validationErrors: registrationFormState.validationErrors,
     handleGoogleInit,
     handleEmailSubmit,
   };

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -30,7 +30,7 @@ export class ReferredRegistration {
     /**
      * @uiName Register button text
      */
-    this.registerLabel = "Start Referring";
+    this.registerLabel = "Claim Your Reward";
     /**
      * Require your participants to enter their first and last name.
      *
@@ -229,7 +229,7 @@ export class ReferredRegistration {
       },
       "attribute": "register-label",
       "reflect": false,
-      "defaultValue": "\"Start Referring\""
+      "defaultValue": "\"Claim Your Reward\""
     },
     "includeName": {
       "type": "boolean",

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -201,8 +201,7 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    // @ts-ignore
-    const getBadgeCSSClass = (badgeType) => {
+    const getBadgeCSSClass = () => {
       switch (rewardStatus) {
         case "AVAILABLE":
           return sheet.classes.SuccessBadge;
@@ -216,7 +215,7 @@ export class RewardTableStatusCell {
           return sheet.classes.DangerBadge;
       }
     };
-    const badgeCSSClass = getBadgeCSSClass(badgeType);
+    const badgeCSSClass = getBadgeCSSClass();
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
       h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -404,7 +404,6 @@ export class ShareLink {
 function useDemoShareLink(props) {
   const [open, setOpen] = useState(false);
   const copyString = "https://www.example.com/sharelink/abc";
-  console.log("Demo props", props);
   return deepmerge({
     copyString: copyString,
     tooltiptext: props.tooltiptext,

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -245,7 +245,6 @@ function ColorScale() {
 }
 function ColorToken({ type = "primary" }) {
   return (h("span", { style: {
-      // background: `var(--sl-color-${type}-500)`,
       width: "1em",
       marginRight: "2px",
       padding: "0 4px",

package/dist/collection/components/sqm-tabs/sqm-tabs-view.js

@@ -1,7 +1,4 @@
 import { h, Host } from "@stencil/core";
-// sl-tab-group {
-//   --sl-color-primary-500: var(--sqm-accent-color-icon);
-// }
 export const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
   const padding = !placement || placement === "top" || placement === "bottom"