@saasquatch/mint-components 1.12.0-12 → 1.12.0-13

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

@@ -16,7 +16,7 @@ const useChildElements = require('./useChildElements-410d2435.js');
 const luxon = require('./luxon-05098e19.js');
 const useReferralTable = require('./useReferralTable-824ac152.js');
 const utils = require('./utils-6847bc06.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-301eed81.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-e92c557a.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-5ac536a3.js');
 const extractProps = require('./extractProps-fd93ba62.js');
@@ -1190,7 +1190,8 @@ function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(keys.VERIFICATION_EVENT_KEY, {
@@ -1223,6 +1224,7 @@ function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,
@@ -1556,15 +1558,33 @@ const BankingInfoForm = class {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      return (index.h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
-    return (index.h(index.Host, null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
+    const sheet = JSS.createStyleSheet(style);
+    return (index.h(index.Host, null, props.states.isPartner && props.states.showVerification ? (index.h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide }, index.h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
         countryInputSlot: (index.h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
           class: "error-input",
@@ -1572,7 +1592,7 @@ const BankingInfoForm = class {
             type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
             label: props.text.bankLocationLabel,
           }),
-        })), index.h("sl-input", { disabled: props.states.saveLoading, class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+        })), index.h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
             // Stop shoelace intercepting key presses
             e.stopPropagation();
           }, "onSl-input": (e) => {
@@ -1688,6 +1708,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },
@@ -5050,6 +5071,7 @@ const style$5 = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -5218,20 +5240,18 @@ const TaxAndCashDashboardView = (props) => {
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
         text.error.generalDescription)),
-      states.payoutStatus && states.payoutStatus !== "DONE" && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+      getAlert(states.payoutStatus) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
         index.h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
         index.h("strong", null, getAlert(states.payoutStatus).header),
         index.h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
-          //AL: TODO hooks
-          onClick: () => callbacks.onClick }, getAlert(states.payoutStatus).buttonText)))),
+        getAlert(states.payoutStatus).buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
       index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         index.h("p", null, text.replaceTaxFormModalBodyText),
         index.h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
         index.h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       index.h("div", null,
-        index.h("h3", null, text.bankingInformationSectionHeader),
+        index.h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
         index.h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         index.h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,

package/dist/cjs/sqm-code-verification.cjs.entry.js

@@ -19,7 +19,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",

package/dist/cjs/{sqm-invoice-table-view-301eed81.js → sqm-invoice-table-view-e92c557a.js}

@@ -714,6 +714,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

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

@@ -30,7 +30,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
 const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-301eed81.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-e92c557a.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -14404,6 +14404,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -8,7 +8,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",

package/dist/collection/components/tax-and-cash/BankingForm.stories.js

@@ -21,6 +21,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -210,6 +210,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

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

@@ -10,6 +10,7 @@ import { getFormMap } from "./formDefinitions";
 import { mockPaymentOptions } from "./mockData";
 import { BankingInfoFormView, } from "./sqm-banking-info-form-view";
 import { getFormInputs, paypalFeeMap, useBankingInfoForm, } from "./useBankingInfoForm";
+import { createStyleSheet } from "../../../styling/JSS";
 /**
  * @uiName Banking Information Form
  * @exampleGroup Common Components
@@ -308,15 +309,35 @@ export class BankingInfoForm {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      return (h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
+    const sheet = createStyleSheet(style);
     return (h(Host, null,
+      props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide },
+        h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null,
       h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
           formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
           countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
@@ -326,7 +347,7 @@ export class BankingInfoForm {
               label: props.text.bankLocationLabel,
             }),
           })),
-            h("sl-input", { disabled: props.states.saveLoading, class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+            h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
                 // Stop shoelace intercepting key presses
                 e.stopPropagation();
               }, "onSl-input": (e) => {
@@ -1500,7 +1521,7 @@ export class BankingInfoForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<BankingInfoFormViewProps>",
-        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { verificationDialogSlot?: VNode; formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -1611,6 +1632,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js

@@ -289,7 +289,8 @@ export function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -322,6 +323,7 @@ export function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,

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

@@ -159,6 +159,7 @@ const style = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -327,20 +328,18 @@ export const TaxAndCashDashboardView = (props) => {
         h("strong", null, text.error.generalTitle),
         h("br", null),
         text.error.generalDescription)),
-      states.payoutStatus && states.payoutStatus !== "DONE" && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+      getAlert(states.payoutStatus) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
         h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
         h("strong", null, getAlert(states.payoutStatus).header),
         h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
-          //AL: TODO hooks
-          onClick: () => callbacks.onClick }, getAlert(states.payoutStatus).buttonText)))),
+        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
       h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
         h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
         h("sl-button", { slot: "footer", type: "default", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
-        h("h3", null, text.bankingInformationSectionHeader),
+        h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
         h("p", { class: sheet.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("div", { class: sheet.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,

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

@@ -12,7 +12,7 @@ import { u as useChildElements } from './useChildElements-fc84e640.js';
 import { l as luxon } from './luxon-7600be8d.js';
 import { g as generateUserError } from './useReferralTable-f6ffa103.js';
 import { g as getProps, l as luxonLocale } from './utils-334c1e34.js';
-import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-1f26f252.js';
+import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-c184248a.js';
 import { b as VERIFICATION_EVENT_KEY } from './keys-db1897ae.js';
 import { T as TAX_FORM_UPDATED_EVENT_KEY, a as useVeriffApp, g as getStatus, V as VERIFF_COMPLETE_EVENT_KEY } from './usePayoutStatus-d613ff10.js';
 import { e as extractProps } from './extractProps-ae1afbb3.js';
@@ -1186,7 +1186,8 @@ function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -1219,6 +1220,7 @@ function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,
@@ -1552,15 +1554,33 @@ const BankingInfoForm = class {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      return (h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
-    return (h(Host, null, h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
+    const sheet = createStyleSheet(style);
+    return (h(Host, null, props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide }, h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null, h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
         countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
           class: "error-input",
@@ -1568,7 +1588,7 @@ const BankingInfoForm = class {
             type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
             label: props.text.bankLocationLabel,
           }),
-        })), h("sl-input", { disabled: props.states.saveLoading, class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+        })), h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
             // Stop shoelace intercepting key presses
             e.stopPropagation();
           }, "onSl-input": (e) => {
@@ -1684,6 +1704,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },
@@ -5046,6 +5067,7 @@ const style$5 = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -5214,20 +5236,18 @@ const TaxAndCashDashboardView = (props) => {
         h("strong", null, text.error.generalTitle),
         h("br", null),
         text.error.generalDescription)),
-      states.payoutStatus && states.payoutStatus !== "DONE" && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+      getAlert(states.payoutStatus) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
         h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
         h("strong", null, getAlert(states.payoutStatus).header),
         h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
-          //AL: TODO hooks
-          onClick: () => callbacks.onClick }, getAlert(states.payoutStatus).buttonText)))),
+        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
       h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
         h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
         h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
-        h("h3", null, text.bankingInformationSectionHeader),
+        h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
         h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,

package/dist/esm/sqm-code-verification.entry.js

@@ -15,7 +15,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",

package/dist/esm/{sqm-invoice-table-view-1f26f252.js → sqm-invoice-table-view-c184248a.js}

@@ -712,6 +712,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

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

@@ -26,7 +26,7 @@ import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-7
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-d7ea2c56.js';
 import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-69b61037.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-6c582684.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-1f26f252.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-c184248a.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -14400,6 +14400,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },