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

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

@@ -3709,9 +3709,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)": {
@@ -3719,9 +3716,6 @@ const style$5 = {
       borderTop: "none",
       maxWidth: "600px",
     },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
-    },
   },
   WarningHoldAlertContainer: {
     marginLeft: "-20px",
@@ -3729,9 +3723,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: {
@@ -3740,9 +3735,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: {
@@ -3765,7 +3761,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: {
@@ -3774,12 +3770,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)",
@@ -3800,7 +3797,6 @@ const style$5 = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
     },
   },
   StatusAlert: {
@@ -3835,7 +3831,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",
@@ -3856,13 +3852,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",
   },
@@ -3893,9 +3889,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 = 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;
@@ -3912,7 +3952,7 @@ const TaxAndCashDashboardView = (props) => {
               termsAndConditions: (h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
             }),
             button: (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", onClick: callbacks.onNewFormClick }, text.w9RequiredButtonText)),
-            alertType: "info",
+            alertType: "warning",
             icon: "info-circle",
             class: sheet$4.classes.WarningHoldAlertContainer,
           };
@@ -4019,16 +4059,16 @@ const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
-      h("p", null, intl.formatMessage({
+      h("sl-badge", { class: sheet$4.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
+      h("p", { class: sheet$4.classes.SubduedText }, intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
-      h("p", null, intl.formatMessage({
+      h("sl-badge", { class: sheet$4.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
+      h("p", { class: sheet$4.classes.SubduedText }, intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
           ? text.badgeTextSubmittedOn
@@ -4037,8 +4077,8 @@ const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
-      h("p", null, text.invalidForm))),
+      h("sl-badge", { class: sheet$4.classes.ErrorBadge, type: "danger", pill: true }, text.statusTextNotActive),
+      h("p", { class: sheet$4.classes.SubduedText }, text.invalidForm))),
     undefined: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       h("sl-badge", { type: "danger", pill: true }, text.statusTextRequired),
       h("p", null, intl.formatMessage({
@@ -4100,9 +4140,11 @@ const TaxAndCashDashboardView = (props) => {
   const alertInfo = getAlert(states.payoutStatus);
   return (h("div", null,
     h("div", null,
-      h("style", { type: "text/css" }, styleString$4),
+      h("style", { type: "text/css" },
+        styleString$4,
+        vanillaStyle$3),
       states.loadingError && (h("div", null,
-        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true },
+        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           h("strong", null, text.error.loadingErrorAlertHeader),
           h("br", null),
@@ -4122,8 +4164,7 @@ const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (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 },
-        h("sl-icon", { slot: "icon", name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon }),
+      alertInfo && (h("sqm-form-message", { exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
         h("strong", null, alertInfo.header),
         h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
@@ -4138,7 +4179,7 @@ const TaxAndCashDashboardView = (props) => {
         h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (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") && (h("div", { class: sheet$4.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
           h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
@@ -4689,7 +4730,6 @@ const TaxAndCashDashboard = class {
   }
 };
 function useDemoTaxAndCashDashboard(props) {
-  console.log("dashboard", { props });
   // @ts-ignore
   return cjs({
     states: {
@@ -5782,7 +5822,7 @@ const style$6 = {
 };
 const sheet$5 = createStyleSheet(style$6);
 const styleString$5 = sheet$5.toString();
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
     :host{
       display: block;   
     }
@@ -5990,7 +6030,7 @@ const UserInfoFormView = (props) => {
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString$5,
-      vanillaStyle$3),
+      vanillaStyle$4),
     states.loadingError && (h("div", null,
       h("sqm-form-message", { type: "error" },
         h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),

package/dist/esm/{sqm-base-registration-form-view-193f1721.js → sqm-base-registration-form-view-1a6bb4b4.js}

@@ -47,6 +47,7 @@ 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/esm/sqm-big-stat_46.entry.js

@@ -3182,18 +3182,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 = "{}";
     h(this);
@@ -3227,7 +3219,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 = dist.gql `

package/dist/esm/sqm-form-message.entry.js

@@ -1,27 +1,28 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
 import { n as h } from './dom-context-hooks.module-63370afd.js';
 
-const sqmFormMessageCss = "sl-alert::part(base){border:var(--sqm-border-thickness) solid;border-radius:var(--sqm-border-radius-normal);font-family:var(--sqm-primary-font)}.Error::part(base){color:var(--sqm-danger-color-text);background-color:var(--sqm-danger-color-background);border-color:var(--sqm-danger-color-border);font-size:14px}.Error #icon{color:var(--sqm-danger-color-icon);font-size:24px}.Warning::part(base){color:var(--sqm-warning-color-text);background-color:var(--sqm-warning-color-background);border-color:var(--sqm-warning-color-border)}.Warning #icon{color:var(--sqm-warning-color-icon);font-size:24px}.Success::part(base){color:var(--sqm-success-color-text);background-color:var(--sqm-success-color-background);border-color:var(--sqm-success-color-border)}.Success #icon{color:var(--sqm-success-color-icon);font-size:24px}.Info::part(base){color:var(--sqm-informative-color-text);background-color:var(--sqm-informative-color-background);border-color:var(--sqm-informative-color-border)}.Info #icon{color:var(--sqm-informative-color-icon);font-size:24px}::slotted(*){margin:0}::slotted(*[part=alert-title]){font-size:16px;font-weight:bold}::slotted(*[part=alert-description]),::slotted(*[part=erroralert-text]){font-size:14px}";
+const sqmFormMessageCss = "sl-alert::part(base){border:var(--sqm-border-thickness) solid;border-radius:var(--sqm-border-radius-normal);font-family:var(--sqm-primary-font)}.Error::part(base){color:var(--sqm-danger-color-text);background-color:var(--sqm-danger-color-background);border-color:var(--sqm-danger-color-border);font-size:14px}.Error #icon{color:var(--sqm-danger-color-icon);font-size:24px}.Warning::part(base){color:var(--sqm-warning-color-text);background-color:var(--sqm-warning-color-background);border-color:var(--sqm-warning-color-border)}.Warning #icon{color:var(--sqm-warning-color-icon);font-size:24px}.Success::part(base){color:var(--sqm-success-color-text);background-color:var(--sqm-success-color-background);border-color:var(--sqm-success-color-border)}.Success #icon{color:var(--sqm-success-color-icon);font-size:24px}.Info::part(base){color:var(--sqm-informative-color-text);background-color:var(--sqm-informative-color-background);border-color:var(--sqm-informative-color-border)}.Info #icon{color:var(--sqm-informative-color-icon);font-size:24px}.Transparent::part(base){background-color:transparent;border:none;color:var(--sqm-text);margin-left:-20px}::slotted(*){margin:0}::slotted(*[part=alert-title]){font-size:16px;font-weight:bold}::slotted(*[part=alert-description]),::slotted(*[part=erroralert-text]){font-size:14px}";
 
 const FormMessage = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    this.transparent = false;
     h(this);
   }
   disconnectedCallback() { }
   render() {
     if (this.type === "error") {
-      return (h$1("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), h$1("slot", null)));
     }
     else if (this.type === "info") {
-      return (h$1("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: `Info ${this.transparent ? "Transparent" : ""}`, type: "info", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }), h$1("slot", null)));
     }
     else if (this.type === "warning") {
-      return (h$1("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: `Warning ${this.transparent ? "Transparent" : ""}`, type: "warning", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }), h$1("slot", null)));
     }
     else {
-      return (h$1("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: `Success ${this.transparent ? "Transparent" : ""}`, type: "success", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), h$1("slot", null)));
     }
   }
 };

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

@@ -7,7 +7,7 @@ import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import './sqm-text-span-view-4c17b8c9.js';
 import { a as useRegistrationForm } from './useRegistrationFormState-24d594ea.js';
-import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-193f1721.js';
+import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-1a6bb4b4.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-8bdc3804.js';
 import './AsYouType-46f67d0d.js';
 import { u as usePortalRegistrationForm } from './usePortalRegistrationForm-1eb3cd72.js';
@@ -81,9 +81,12 @@ 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") {
@@ -321,9 +324,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) {
@@ -359,7 +360,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return cjs({
-    emailValidationError: true,
+    emailValidationError: false,
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

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

@@ -22,7 +22,7 @@ import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0a2ec5
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-5a452423.js';
 import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-7d86299c.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
-import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-193f1721.js';
+import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-1a6bb4b4.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-8bdc3804.js';
 import { P as PortalProfileView } from './sqm-portal-profile-view-3ed13e4d.js';
 import './utilities-72c07b09.js';
@@ -6428,6 +6428,20 @@ const InfoAlert = () => {
     h("p", { part: "alert-title" }, "This is the title"),
     h("p", { part: "alert-description" }, "This is the description")));
 };
+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")));
+};
+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")));
+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")));
+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")));
 
 const FormMessage = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6435,7 +6449,11 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   SuccessAlert: SuccessAlert,
   ErrorAlert: ErrorAlert,
   WarningAlert: WarningAlert,
-  InfoAlert: InfoAlert
+  InfoAlert: InfoAlert,
+  SuccessAlertTransparent: SuccessAlertTransparent,
+  ErrorAlertTransparent: ErrorAlertTransparent,
+  WarningAlertTransparent: WarningAlertTransparent,
+  InfoAlertTransparent: InfoAlertTransparent
 });
 
 const scenario$6 = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\t\t| image-pos   | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value  | alignment     |\n\t\t\t| left   | left aligned  |\n\t\t\t| center | centered      |\n\t\t\t| right  | right aligned |\n\t\t\t| N/A    | centered      |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop         | value                                                              |\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header       | \"Klip Rewards\"                                                     |\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text  | \"Start earning\"                                                    |\n\t\t\t| layout       | \"overlay\"                                                          |\n\t\t\t| padding-text | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop            | value                                                              |\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header          | \"Klip Rewards\"                                                     |\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text     | \"Start earning\"                                                    |\n\t\t\t| layout          | \"overlay\"                                                          |\n\t\t\t| text-color      | <textColor>                                                        |\n\t\t\t| overlay-color   | <overlayColor>                                                     |\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\n\t\t\t| #1d0314   | #4baa1a      | 0              |\n\t\t\t| #211a27   | #aa481a      | 1              |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"columns\"                                                          |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements    |\n\t\t\t| header      |\n\t\t\t| description |\n\t\t\t| button      |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-pos        | <imagePos>                                                         |\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left     | top            |\n\t\t\t| right    | bottom         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop          | value                                                              |\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header        | \"Klip Rewards\"                                                     |\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text   | \"Start earning\"                                                    |\n\t\t\t| layout        | \"columns\"                                                          |\n\t\t\t| padding-text  | <paddingText>                                                      |\n\t\t\t| padding-image | <paddingImage>                                                     |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small   | xxx-small    |\n\t\t\t| xx-small    | xx-small     |\n\t\t\t| x-small     | x-small      |\n\t\t\t| small       | small        |\n\t\t\t| medium      | medium       |\n\t\t\t| large       | large        |\n\t\t\t| x-large     | x-large      |\n\t\t\t| xx-large    | xx-large     |\n\t\t\t| xxx-large   | xxx-large    |\n\t\t\t| xxxx-large  | xxxx-large   |\n\t\t\t| none        | none         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-percentage | <percent>                                                          |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25%     |\n\t\t\t| 42%     |\n\t\t\t| 66%     |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| text-color       | <textColor>                                                        |\n\t\t\t| background-color | <backgroundColor>                                                  |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b   | #ff7f7f         |\n\t\t\t| #1d0314   | #4baa1a         |\n\t\t\t| #211a27   | #aa481a         |";

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

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