@saasquatch/mint-components 2.0.0-6 → 2.0.0-60

package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js

@@ -3713,9 +3713,6 @@ const style$5 = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
   },
   WarningAlertContainer: {
     "&::part(base)": {
@@ -3723,9 +3720,6 @@ const style$5 = {
       borderTop: "none",
       maxWidth: "600px",
     },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
-    },
   },
   WarningHoldAlertContainer: {
     marginLeft: "-20px",
@@ -3733,9 +3727,10 @@ const style$5 = {
       maxWidth: "850px",
       border: "none",
       backgroundColor: "transparent",
+      color: "var(--sqm-text)",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-icon)",
     },
   },
   ErrorHoldAlertContainer: {
@@ -3744,9 +3739,10 @@ const style$5 = {
       maxWidth: "850px",
       border: "none",
       backgroundColor: "transparent",
+      color: "var(--sqm-text)",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ExpiringSoonAlertContainer: {
@@ -3769,7 +3765,7 @@ const style$5 = {
     display: "flex",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
-      color: "var(--sl-color-green-500)",
+      color: "var(--sqm-text)",
     },
   },
   IndirectTaxPreviewDetails: {
@@ -3778,12 +3774,13 @@ const style$5 = {
     flexDirection: "column",
     lineHeight: "var(--sl-spacing-medium)",
     fontSize: "var(--sl-font-size-small)",
+    color: "var(--sqm-text-subdued)",
   },
   InvoiceTableContainer: {
     marginTop: "var(--sl-spacing-medium)",
   },
   NotRegisteredIndirectTaxText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   TaxDocumentsContainer: {
     marginTop: "var(--sl-spacing-xx-large)",
@@ -3804,7 +3801,6 @@ const style$5 = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
     },
   },
   StatusAlert: {
@@ -3839,7 +3835,7 @@ const style$5 = {
   },
   TaxDocSubtext: {
     margin: "0",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     lineHeight: "var(--sl-spacing-medium)",
     fontSize: "var(--sl-font-size-small)",
     marginLeft: "1px",
@@ -3860,13 +3856,13 @@ const style$5 = {
     gap: "6px",
   },
   DescriptionText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-x-small)",
     marginBottom: "none",
     maxWidth: "492px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginTop: "0",
   },
@@ -3897,9 +3893,53 @@ const style$5 = {
     },
   },
   DialogButton: { margin: "auto", width: "100%" },
+  SuccessBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+    },
+  },
+  ErrorBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+    },
+  },
+  SubduedText: {
+    color: "var(--sqm-text-subdued)",
+  },
 };
 const sheet$4 = JSS.createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
+const vanillaStyle$3 = `
+    :host{
+      display: block;   
+    }
+
+    sl-button[type="secondary"]::part(base) {
+    font-family: var(--sqm-primary-font);
+      background-color: var(--sqm-secondary-button-background);
+      color: var(--sqm-secondary-button-color);
+      border-color: var(--sqm-secondary-button-color-border);
+      border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover {
+      background-color: var(--sqm-secondary-button-background-hover);
+      color: var(--sqm-secondary-button-color-hover);
+      border-color: var(--sqm-secondary-button-border-color-hover);
+    }
+    
+  `;
 const TaxAndCashDashboardView = (props) => {
   var _a;
   const { states, text, callbacks, slots } = props;
@@ -3985,7 +4025,7 @@ const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
-          alertType: "error",
+          alertType: "danger",
           icon: "exclamation-octagon",
           class: sheet$4.classes.ErrorHoldAlertContainer,
         };
@@ -4023,16 +4063,16 @@ const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
-      index.h("p", null, global.intl.formatMessage({
+      index.h("sl-badge", { class: sheet$4.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
+      index.h("p", { class: sheet$4.classes.SubduedText }, global.intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
-      index.h("p", null, global.intl.formatMessage({
+      index.h("sl-badge", { class: sheet$4.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
+      index.h("p", { class: sheet$4.classes.SubduedText }, global.intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
           ? text.badgeTextSubmittedOn
@@ -4041,8 +4081,8 @@ const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
-      index.h("p", null, text.invalidForm))),
+      index.h("sl-badge", { class: sheet$4.classes.ErrorBadge, type: "danger", pill: true }, text.statusTextNotActive),
+      index.h("p", { class: sheet$4.classes.SubduedText }, text.invalidForm))),
     undefined: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       index.h("sl-badge", { type: "danger", pill: true }, text.statusTextRequired),
       index.h("p", null, global.intl.formatMessage({
@@ -4104,9 +4144,11 @@ const TaxAndCashDashboardView = (props) => {
   const alertInfo = getAlert(states.payoutStatus);
   return (index.h("div", null,
     index.h("div", null,
-      index.h("style", { type: "text/css" }, styleString$4),
+      index.h("style", { type: "text/css" },
+        styleString$4,
+        vanillaStyle$3),
       states.loadingError && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true },
+        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
           index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           index.h("strong", null, text.error.loadingErrorAlertHeader),
           index.h("br", null),
@@ -4126,7 +4168,7 @@ const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, open: true, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class },
+      alertInfo && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, open: true, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class },
         index.h("sl-icon", { slot: "icon", name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon }),
         index.h("strong", null, alertInfo.header),
         index.h("p", { style: { margin: "0" } }, alertInfo.description),
@@ -4142,7 +4184,7 @@ const TaxAndCashDashboardView = (props) => {
         index.h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (index.h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, exportparts: "base: secondarybutton-base", type: "secondary", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       (!states.noFormNeeded || states.status === "NOT_VERIFIED") && (index.h("div", { class: sheet$4.classes.TaxDocumentsContainer },
         index.h("div", null, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
           index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
@@ -4693,7 +4735,6 @@ const TaxAndCashDashboard = class {
   }
 };
 function useDemoTaxAndCashDashboard(props) {
-  console.log("dashboard", { props });
   // @ts-ignore
   return cjs.cjs({
     states: {
@@ -5786,7 +5827,7 @@ const style$6 = {
 };
 const sheet$5 = JSS.createStyleSheet(style$6);
 const styleString$5 = sheet$5.toString();
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
     :host{
       display: block;   
     }
@@ -5994,7 +6035,7 @@ const UserInfoFormView = (props) => {
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$5,
-      vanillaStyle$3),
+      vanillaStyle$4),
     states.loadingError && (index.h("div", null,
       index.h("sqm-form-message", { type: "error" },
         index.h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),

package/dist/cjs/{sqm-base-registration-form-view-8847804c.js → sqm-base-registration-form-view-7b95ae7a.js}

@@ -49,6 +49,7 @@ function BaseRegistrationFormView(props) {
     index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
       states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;

package/dist/cjs/sqm-big-stat_46.cjs.entry.js

@@ -3186,18 +3186,10 @@ const PayoutStatusAlert = class {
     this.errorDescription = "There was an error with determining your payout status.";
     /**
      * @undocumented
-     * @componentState { "title": "Information Required", "props": { "demoData": { "states": { "status": "INFORMATION_REQUIRED" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Over W9 Threshold", "props": { "demoData": { "states": { "status": "OVER_W9_THRESHOLD", "enforceUsTaxComplianceOption": "CASH_ONLY_DEFER_W9" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Over W9 Threshold - Hold", "props": { "demoData": { "states": { "status": "OVER_W9_THRESHOLD", "enforceUsTaxComplianceOption": "NONE" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Required", "props": { "demoData": { "states": { "status": "VERIFICATION:REQUIRED" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Internal", "props": { "demoData": { "states": { "status": "VERIFICATION:INTERNAL" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Review", "props": { "demoData": { "states": { "status": "VERIFICATION:REVIEW" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Failed", "props": { "demoData": { "states": { "status": "VERIFICATION:FAILED" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Account Review", "props": { "demoData": { "states": { "status": "ACCOUNT_REVIEW" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Hold", "props": { "demoData": { "states": { "status": "HOLD" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Done - No Alert", "props": { "demoData": { "states": { "status": "DONE" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Error State", "props": { "demoData": { "states": { "error": true } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Loading State", "props": { "demoData": { "states": { "loading": true } } }, "uiGroup": "Alert States" }
+     * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] }
      */
     this.stateController = "{}";
     domContextHooks_module.h$1(this);
@@ -3231,7 +3223,7 @@ function useDemoPayoutStatusAlert(props) {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
     },
-  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  }, formatted || props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
 const GET_USER$1 = index_module.dist.gql `

package/dist/cjs/sqm-portal-google-registration-form.cjs.entry.js

@@ -11,7 +11,7 @@ const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./sqm-text-span-view-7a61ae4c.js');
 const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8847804c.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-7b95ae7a.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
 require('./AsYouType-6788393a.js');
 const usePortalRegistrationForm = require('./usePortalRegistrationForm-75b647fe.js');
@@ -85,9 +85,12 @@ function usePortalGoogleRegistrationForm(props) {
     let formData = {};
     let errorMessage = null;
     formControls.forEach((control) => {
-      if (!control.name || control.name !== "/email")
+      if (!control.name)
         return;
       jsonpointer.jsonpointer.set(formData, control.name, control.value);
+      // only validate email field
+      if (control.name !== "/email")
+        return;
       if (control.required && !control.value)
         errorMessage = props.requiredFieldErrorMessage;
       if (typeof control.validationError === "function") {
@@ -325,9 +328,7 @@ const PortalGoogleRegistrationForm = class {
         ...states,
         emailDisabled: true,
         hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: {
-        ...content,
-      }, refs: refs }));
+      }, callbacks: callbacks, content: content, refs: refs }));
   }
 };
 function useRegisterDemo(props) {
@@ -363,7 +364,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return cjs.cjs({
-    emailValidationError: true,
+    emailValidationError: false,
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

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

@@ -26,7 +26,7 @@ const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-de90ef03
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-4e88f774.js');
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-5518eb0d.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8847804c.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-7b95ae7a.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-615e6975.js');
 require('./utilities-9a0c5e91.js');

package/dist/cjs/sqm-tax-and-cash.cjs.entry.js

@@ -1283,7 +1283,7 @@ const TaxAndCashMonolith = class {
       case "/4":
         return (index.h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (index.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
+        return (index.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
       case "/error":
         return (index.h(ErrorView.ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: global.intl.formatMessage({
             id: "loadingErrorAlertDescription",

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

@@ -46,6 +46,7 @@ export function BaseRegistrationFormView(props) {
     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))),
+      content.formData,
       h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;

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-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-google-registration-form/sqm-portal-google-registration-form.js

@@ -7,6 +7,11 @@ import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm
 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;
@@ -194,9 +199,7 @@ export class PortalGoogleRegistrationForm {
         ...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,
+    emailValidationError: false,
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

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

@@ -13,9 +13,12 @@ export function usePortalGoogleRegistrationForm(props) {
     let formData = {};
     let errorMessage = null;
     formControls.forEach((control) => {
-      if (!control.name || control.name !== "/email")
+      if (!control.name)
         return;
       jsonpointer.set(formData, control.name, control.value);
+      // only validate email field
+      if (control.name !== "/email")
+        return;
       if (control.required && !control.value)
         errorMessage = props.requiredFieldErrorMessage;
       if (typeof control.validationError === "function") {

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,7 +4,7 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card", "sqm-referred-registration"]
  * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-user-name"]
  * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
  * @exampleGroup Layout

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -112,18 +112,10 @@ export class PayoutStatusAlert {
     this.errorDescription = "There was an error with determining your payout status.";
     /**
      * @undocumented
-     * @componentState { "title": "Information Required", "props": { "demoData": { "states": { "status": "INFORMATION_REQUIRED" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Over W9 Threshold", "props": { "demoData": { "states": { "status": "OVER_W9_THRESHOLD", "enforceUsTaxComplianceOption": "CASH_ONLY_DEFER_W9" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Over W9 Threshold - Hold", "props": { "demoData": { "states": { "status": "OVER_W9_THRESHOLD", "enforceUsTaxComplianceOption": "NONE" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Required", "props": { "demoData": { "states": { "status": "VERIFICATION:REQUIRED" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Internal", "props": { "demoData": { "states": { "status": "VERIFICATION:INTERNAL" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Review", "props": { "demoData": { "states": { "status": "VERIFICATION:REVIEW" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Verification Failed", "props": { "demoData": { "states": { "status": "VERIFICATION:FAILED" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Account Review", "props": { "demoData": { "states": { "status": "ACCOUNT_REVIEW" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Hold", "props": { "demoData": { "states": { "status": "HOLD" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Done - No Alert", "props": { "demoData": { "states": { "status": "DONE" } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Error State", "props": { "demoData": { "states": { "error": true } } }, "uiGroup": "Alert States" }
-     * @componentState { "title": "Loading State", "props": { "demoData": { "states": { "loading": true } } }, "uiGroup": "Alert States" }
+     * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] }
      */
     this.stateController = "{}";
     withHooks(this);
@@ -660,40 +652,16 @@ export class PayoutStatusAlert {
             "text": undefined,
             "name": "undocumented"
           }, {
-            "text": "{ \"title\": \"Information Required\", \"props\": { \"demoData\": { \"states\": { \"status\": \"INFORMATION_REQUIRED\" } } }, \"uiGroup\": \"Alert States\" }",
+            "text": "{ \"title\": \"Payout Info Required\", \"props\": { \"states\": { \"status\": \"INFORMATION_REQUIRED\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Over W9 Threshold\", \"props\": { \"demoData\": { \"states\": { \"status\": \"OVER_W9_THRESHOLD\", \"enforceUsTaxComplianceOption\": \"CASH_ONLY_DEFER_W9\" } } }, \"uiGroup\": \"Alert States\" }",
+            "text": "{ \"title\": \"Verification Required\", \"props\": { \"states\": { \"status\": \"VERIFICATION:REQUIRED\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Over W9 Threshold - Hold\", \"props\": { \"demoData\": { \"states\": { \"status\": \"OVER_W9_THRESHOLD\", \"enforceUsTaxComplianceOption\": \"NONE\" } } }, \"uiGroup\": \"Alert States\" }",
+            "text": "{ \"title\": \"Identity Verification\", \"props\": { \"states\": { \"status\": \"VERIFICATION:REVIEW\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Verification Required\", \"props\": { \"demoData\": { \"states\": { \"status\": \"VERIFICATION:REQUIRED\" } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Verification Internal\", \"props\": { \"demoData\": { \"states\": { \"status\": \"VERIFICATION:INTERNAL\" } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Verification Review\", \"props\": { \"demoData\": { \"states\": { \"status\": \"VERIFICATION:REVIEW\" } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Verification Failed\", \"props\": { \"demoData\": { \"states\": { \"status\": \"VERIFICATION:FAILED\" } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Account Review\", \"props\": { \"demoData\": { \"states\": { \"status\": \"ACCOUNT_REVIEW\" } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Hold\", \"props\": { \"demoData\": { \"states\": { \"status\": \"HOLD\" } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Done - No Alert\", \"props\": { \"demoData\": { \"states\": { \"status\": \"DONE\" } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Error State\", \"props\": { \"demoData\": { \"states\": { \"error\": true } } }, \"uiGroup\": \"Alert States\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Loading State\", \"props\": { \"demoData\": { \"states\": { \"loading\": true } } }, \"uiGroup\": \"Alert States\" }",
+            "text": "{ \"title\": \"Account Hold\", \"props\": { \"states\": { \"status\": \"HOLD\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
             "name": "componentState"
           }],
         "text": ""
@@ -752,5 +720,5 @@ function useDemoPayoutStatusAlert(props) {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
     },
-  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  }, formatted || props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js

@@ -1125,7 +1125,7 @@ export class TaxAndCashMonolith {
       case "/4":
         return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
+        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
       case "/error":
         return (h(ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: intl.formatMessage({
             id: "loadingErrorAlertDescription",