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

package/dist/mint-components/{p-be88596c.system.js → p-b21c5311.system.js}

@@ -1 +1 @@
-var __assign=this&&this.__assign||function(){__assign=Object.assign||function(t){for(var r,e=1,s=arguments.length;e<s;e++){r=arguments[e];for(var a in r)if(Object.prototype.hasOwnProperty.call(r,a))t[a]=r[a]}return t};return __assign.apply(this,arguments)};System.register(["./p-59b028db.system.js","./p-1a673057.system.js","./p-8a6494c7.system.js","./p-67ad2252.system.js"],(function(t){"use strict";var r,e,s,a,n,i,o,l;return{setters:[function(t){r=t.h},function(t){e=t.c},function(t){s=t.A;a=t.a;n=t.H;i=t.b;o=t.E},function(t){l=t.T}],execute:function(){t("B",g);var u={Wrapper:s,Column:a,HostBlock:n,":host":{margin:"0 auto",width:"100%"},ButtonsContainer:__assign(__assign({},i),{gap:"var(--sl-spacing-medium)","& > *":{margin:"0 !important"}}),ErrorStyle:o};var p="\nsqm-portal-register {\n  margin: 0 auto;\n  width: 100%;\n  display: block;\n}\n\n:host{\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n";var c=e(u);var m=c.toString();function g(t){var e=t.states,s=t.content,a=t.callbacks;return r("div",{class:c.classes.Wrapper},r("style",{type:"text/css"},p,m),r(l,{type:"h3"},s.pageLabel),r("sl-form",{class:c.classes.Column,"onSl-submit":a.handleEmailSubmit,novalidate:true},e.error&&r("sqm-form-message",{type:"error",exportparts:"erroralert-icon"},r("div",{part:"erroralert-text"},t.states.error)),r("sl-input",{exportparts:"label: input-label, base: input-base",type:"email",name:"/email",label:s.emailLabel||"Email",required:true,validationError:function(t){var r=t.value;if(!r){return s.requiredFieldErrorMessage}if(!r.includes("@")){return s.invalidEmailErrorMessage}}}),r("div",{class:c.classes.ButtonsContainer},r("sl-button",{submit:true,exportparts:"base: primarybutton-base",type:"primary",style:{margin:"0"}},s.submitLabel||"Register"),r("sl-menu-divider",{style:{margin:"0"}}),s.googleButton,s.secondaryButton)))}}}}));
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(t){for(var r,e=1,s=arguments.length;e<s;e++){r=arguments[e];for(var a in r)if(Object.prototype.hasOwnProperty.call(r,a))t[a]=r[a]}return t};return __assign.apply(this,arguments)};System.register(["./p-59b028db.system.js","./p-1a673057.system.js","./p-8a6494c7.system.js","./p-67ad2252.system.js"],(function(t){"use strict";var r,e,s,a,n,i,o,l;return{setters:[function(t){r=t.h},function(t){e=t.c},function(t){s=t.A;a=t.a;n=t.H;i=t.b;o=t.E},function(t){l=t.T}],execute:function(){t("B",g);var u={Wrapper:s,Column:a,HostBlock:n,":host":{margin:"0 auto",width:"100%"},ButtonsContainer:__assign(__assign({},i),{gap:"var(--sl-spacing-medium)","& > *":{margin:"0 !important"}}),ErrorStyle:o};var p="\nsqm-portal-register {\n  margin: 0 auto;\n  width: 100%;\n  display: block;\n}\n\n:host{\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n";var m=e(u);var c=m.toString();function g(t){var e=t.states,s=t.content,a=t.callbacks;return r("div",{class:m.classes.Wrapper},r("style",{type:"text/css"},p,c),r(l,{type:"h3"},s.pageLabel),r("sl-form",{class:m.classes.Column,"onSl-submit":a.handleEmailSubmit,novalidate:true},e.error&&r("sqm-form-message",{type:"error",exportparts:"erroralert-icon"},r("div",{part:"erroralert-text"},t.states.error)),s.formData,r("sl-input",{exportparts:"label: input-label, base: input-base",type:"email",name:"/email",label:s.emailLabel||"Email",required:true,validationError:function(t){var r=t.value;if(!r){return s.requiredFieldErrorMessage}if(!r.includes("@")){return s.invalidEmailErrorMessage}}}),r("div",{class:m.classes.ButtonsContainer},r("sl-button",{submit:true,exportparts:"base: primarybutton-base",type:"primary",style:{margin:"0"}},s.submitLabel||"Register"),r("sl-menu-divider",{style:{margin:"0"}}),s.googleButton,s.secondaryButton)))}}}}));

package/dist/mint-components/p-c2ac14b7.entry.js

@@ -0,0 +1 @@
+import{r as t,h as e}from"./p-c7c11325.js";import{k as s,n as i}from"./p-63e29387.js";import{i as a,j as o}from"./p-0ec54f97.js";import{j as r}from"./p-e7e129ac.js";import{c as n}from"./p-c1086930.js";import{c as l}from"./p-cef45012.js";import"./p-49b20dae.js";import"./p-204861a6.js";import{a as m}from"./p-125a894f.js";import{B as c}from"./p-1522a7d1.js";import{P as h}from"./p-68043f30.js";import"./p-121cdc60.js";import{u as d}from"./p-97dc6863.js";class u extends Error{}function g(t){const[e,i]=s(null),[a,o]=m(),[n,l]=s({mode:"base"});return{showRegistrationForm:n,emailValidationError:e,handleGoogleInit:t=>{var e;if(null===(e=t.detail)||void 0===e?void 0:e.credential)try{const e=function(t,e){if("string"!=typeof t)throw new u("Invalid token specified: must be a string");e||(e={});const s=!0===e.header?0:1,i=t.split(".")[s];if("string"!=typeof i)throw new u(`Invalid token specified: missing part #${s+1}`);let a;try{a=function(t){let e=t.replace(/-/g,"+").replace(/_/g,"/");switch(e.length%4){case 0:break;case 2:e+="==";break;case 3:e+="=";break;default:throw new Error("base64 string is not of the correct length")}try{return function(t){return decodeURIComponent(atob(t).replace(/(.)/g,((t,e)=>{let s=e.charCodeAt(0).toString(16).toUpperCase();return s.length<2&&(s="0"+s),"%"+s})))}(e)}catch(t){return atob(e)}}(i)}catch(t){throw new u(`Invalid token specified: invalid base64 for part #${s+1} (${t.message})`)}try{return JSON.parse(a)}catch(t){throw new u(`Invalid token specified: invalid json for part #${s+1} (${t.message})`)}}(t.detail.credential);o({...a,_googleOAuthIdToken:t.detail.credential,initialData:{email:e.email,firstName:e.given_name,lastName:e.family_name}}),l({mode:"google"})}catch(t){console.error("Failed to decode Google Sign In credential JWT:",t)}},handleEmailSubmit:async e=>{const s=e.target.getFormControls();let n={},m=null;s.forEach((e=>{if(e.name&&(r.set(n,e.name,e.value),"/email"===e.name&&(e.required&&!e.value&&(m=t.requiredFieldErrorMessage),"function"==typeof e.validationError))){const t=(0,e.validationError)({control:e,key:"email",value:e.value});t&&(m=t)}})),m?i(m):(o({...a,initialData:{...null==a?void 0:a.initialData,...n}}),l({mode:"manual"}))}}}u.prototype.name="InvalidTokenError";const p=class{constructor(e){t(this,e),this.ignored=!0,this.nextPage="/",this.redirectPath="/verifyEmail",this.emailLabel="Email",this.passwordLabel="Password",this.submitLabel="Register",this.loginLabel="Sign in",this.confirmPasswordLabel="Confirm Password",this.confirmPassword=!1,this.disablePasswordValidation=!1,this.hideInputs=!1,this.pageLabel="Register",this.loginPath="/login",this.loginCTA="Already have an account?",this.requiredFieldErrorMessage="Cannot be empty",this.networkErrorMessage="Network request failed.",this.passwordMismatchErrorMessage="Passwords do not match.",this.invalidEmailErrorMessage="Must be a valid email address",this.formDisabledErrorMessage="The registration form is currently disabled.",this.meetsRequirementsText="Password has met all requirements",this.doesNotMeetRequirementsText="Password must meet the following requirements:",this.minErrorText="be a minimum of 8 characters",this.uppercaseErrorText="contain at least 1 uppercase character",this.lowercaseErrorText="contain at least 1 lowercase character",this.hasErrorText="contain at least 1 number or symbol",this.googleButtonText="signup_with",i(this)}disconnectedCallback(){}render(){const{states:t,callbacks:i,refs:r}=a()?n({states:{error:"",loading:!1,confirmPassword:this.confirmPassword,hideInputs:this.hideInputs||!1,customPasswordField:!1,loginPath:"/login"},callbacks:{handleGoogleInit:()=>{},setShowRegistrationForm:()=>{},submit:async()=>{console.log("submit")},inputFunction:()=>{}},content:{pageLabel:"Register",formData:null,passwordField:null},refs:{formRef:{}}},this.demoData||{},{arrayMerge:(t,e)=>e}):d(this);const m=l({LoginButton:{"&::part(label)":{padding:"0"}}}),u=m.toString(),{handleGoogleInit:p,handleEmailSubmit:f,showRegistrationForm:b,emailValidationError:w}=a()?function(t){const[e,i]=s({mode:"base"});return n({emailValidationError:!1,handleEmailSubmit:()=>i({mode:"manual"}),showRegistrationForm:e,handleGoogleInit:()=>i({mode:"google"})},t.demoGoogleData||{},{arrayMerge:(t,e)=>e})}(this):g(this),E={formData:e("slot",{name:"formData"}),googleButton:e("sqm-google-sign-in",{text:this.googleButtonText,onInitComplete:p}),secondaryButton:e("slot",{name:"secondaryButton"},e("style",null,u),e("span",null,this.loginCTA," ",e("sl-button",{size:"large",type:"text",disabled:t.loading,onClick:()=>o.push(t.loginPath),className:m.classes.LoginButton},this.loginLabel)," ")),terms:e("slot",{name:"terms"}),emailLabel:this.emailLabel,passwordLabel:this.passwordLabel,submitLabel:this.submitLabel,pageLabel:this.pageLabel,confirmPasswordLabel:this.confirmPasswordLabel,networkErrorMessage:this.networkErrorMessage,passwordMismatchErrorMessage:this.passwordMismatchErrorMessage,invalidEmailErrorMessage:this.invalidEmailErrorMessage,formDisabledErrorMessage:this.formDisabledErrorMessage,requiredFieldErrorMessage:this.requiredFieldErrorMessage,meetsRequirementsText:this.meetsRequirementsText,doesNotMeetRequirementsText:this.doesNotMeetRequirementsText,minErrorText:this.minErrorText,uppercaseErrorText:this.uppercaseErrorText,lowercaseErrorText:this.lowercaseErrorText,hasErrorText:this.hasErrorText};return"base"===b.mode?e(c,{states:{error:w},callbacks:{handleEmailSubmit:f},content:E}):e(h,{states:{...t,emailDisabled:!0,hidePasswords:"google"===b.mode},callbacks:i,content:E,refs:r})}};export{p as sqm_portal_google_registration_form}

package/dist/types/components/sqm-base-registration/sqm-base-registration-form-view.d.ts

@@ -7,6 +7,7 @@ export interface BaseRegistrationFormViewProps {
     handleEmailSubmit: Function;
   };
   content: {
+    formData?: VNode;
     pageLabel?: string;
     googleButton?: VNode;
     secondaryButton?: VNode;

package/dist/types/components/sqm-hero/sqm-hero.d.ts

@@ -20,9 +20,9 @@ export declare class Hero {
    */
   minHeight: number;
   /**
-   * Content background color or image (for use in the left column)
+   * Splash image or background color (for use in the left column)
    *
-   * @uiName Content background
+   * @uiName Splash image
    * @uiWidget Background
    */
   background?: string;
@@ -33,9 +33,9 @@ export declare class Hero {
    */
   paddingSize: "none" | "small" | "medium" | "large";
   /**
-   * Splash image or background color (for use in the right column)
+   * Content background color or image (for use in the right column)
    *
-   * @uiName Splash image
+   * @uiName Content background
    * @uiWidget Background
    */
   secondaryBackground?: string;

package/dist/types/components/sqm-hero-image/sqm-hero-image.d.ts

@@ -3,8 +3,8 @@ import { Spacing } from "../../global/mixins";
  * @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 declare class HeroImage {
   /**

package/dist/types/components/sqm-portal-footer/sqm-portal-footer.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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 declare class PortalFooter {
   ignored: boolean;

package/dist/types/components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.d.ts

@@ -1,5 +1,10 @@
 import { DemoData } from "../../global/demo";
 import { PortalRegistrationFormViewProps } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
+/**
+ * @uiName Google Registration
+ * @canvasRenderer always-replace
+ * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
+ */
 export declare class PortalGoogleRegistrationForm {
   ignored: boolean;
   /**

package/dist/types/components/sqm-titled-section/sqm-titled-section.d.ts

@@ -2,7 +2,7 @@ import { VNode } from "../../stencil-public-runtime";
 import { Spacing } from "../../global/mixins";
 /**
  * @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/types/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.d.ts

@@ -105,18 +105,10 @@ export declare class PayoutStatusAlert {
   errorDescription: string;
   /**
    * @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"] }
    */
   stateController?: string;
   /**

package/dist/types/components.d.ts

@@ -1024,8 +1024,8 @@ export namespace Components {
     }
     interface SqmHero {
         /**
-          * Content background color or image (for use in the left column)
-          * @uiName Content background
+          * Splash image or background color (for use in the left column)
+          * @uiName Splash image
           * @uiWidget Background
          */
         "background"?: string;
@@ -1054,8 +1054,8 @@ export namespace Components {
          */
         "paddingSize": "none" | "small" | "medium" | "large";
         /**
-          * Splash image or background color (for use in the right column)
-          * @uiName Splash image
+          * Content background color or image (for use in the right column)
+          * @uiName Content background
           * @uiWidget Background
          */
         "secondaryBackground"?: string;
@@ -2286,18 +2286,10 @@ export namespace Components {
         "informationRequiredHeader": string;
         /**
           * @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"] }
          */
         "stateController"?: string;
         /**
@@ -8739,8 +8731,8 @@ declare namespace LocalJSX {
     }
     interface SqmHero {
         /**
-          * Content background color or image (for use in the left column)
-          * @uiName Content background
+          * Splash image or background color (for use in the left column)
+          * @uiName Splash image
           * @uiWidget Background
          */
         "background"?: string;
@@ -8769,8 +8761,8 @@ declare namespace LocalJSX {
          */
         "paddingSize"?: "none" | "small" | "medium" | "large";
         /**
-          * Splash image or background color (for use in the right column)
-          * @uiName Splash image
+          * Content background color or image (for use in the right column)
+          * @uiName Content background
           * @uiWidget Background
          */
         "secondaryBackground"?: string;
@@ -9995,18 +9987,10 @@ declare namespace LocalJSX {
         "informationRequiredHeader"?: string;
         /**
           * @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"] }
          */
         "stateController"?: string;
         /**