@saasquatch/mint-components 1.8.0-99 → 1.8.0

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

@@ -1,8 +1,6 @@
 import { h } from "@stencil/core";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "./subregions";
 import LoadingView from "./sqm-tax-and-cash/LoadingView";
-// import sqmUserInfoSpecs from "./sqm-tax-document-step-1.feature";
-// import sqmIndirectTaxFormSpecs from "../sqm-indirect-tax-form/sqm-indirect-tax-form.feature";
 import { taxTypeToName } from "./utils";
 import { ErrorView } from "./sqm-tax-and-cash/ErrorView";
 export default {
@@ -44,6 +42,18 @@ const stepOneProps = {
         countryCode: "US",
         displayName: "United States",
       },
+      {
+        countryCode: "AR",
+        displayName: "Argentina",
+      },
+      {
+        countryCode: "AU",
+        displayName: "Australia",
+      },
+      {
+        countryCode: "ZW",
+        displayName: "Zimbabwe",
+      },
     ],
     currencies: [
       {
@@ -187,6 +197,7 @@ const stepFourProps = {
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },
     onBack: async () => console.log("back"),
+    setCountrySearch: () => { },
   },
   refs: { formRef: { current: null } },
 };
@@ -207,12 +218,10 @@ const docusignFormProps = {
       errors: {},
       taxFormExpired: false,
     },
-    hideBackButton: false,
   },
   callbacks: {
     setParticipantType: (p) => console.log({ p }),
     setDocusignStatus: (status) => console.log(status),
-    onBack: () => console.log("Back"),
   },
 };
 const dashboardProps = {
@@ -227,6 +236,7 @@ const dashboardProps = {
     country: "United Kingdom",
     indirectTaxNumber: "123456",
     indirectTaxType: "VAT",
+    showNewFormDialog: false,
   },
   slots: {
     payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
@@ -724,7 +734,6 @@ export const StepFourToPaypalChecked = () => {
       },
     } }));
 };
-// TODO: Need to add new props to the dashboard and pass them down to the payout details card
 export const TaxAndCashDashboardActiveW9Form = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
@@ -741,6 +750,7 @@ export const TaxAndCashDashboardActiveW8BENForm = () => {
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -755,6 +765,7 @@ export const TaxAndCashDashboardActiveW8BENEForm = () => {
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -764,12 +775,13 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
       states: {
         noFormNeeded: false,
         canEditPayoutInfo: true,
-        status: "NOT_ACTIVE",
+        status: "INACTIVE",
         documentType: "W9",
         documentTypeString: taxTypeToName("W9"),
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -786,6 +798,7 @@ export const TaxAndCashDashboardNotVerifiedW9Form = () => {
         country: "United States",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -803,6 +816,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -820,6 +834,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -837,6 +852,7 @@ export const TaxAndCashDashboardNotActiveW8BENEForm = () => {
         indirectTaxNumber: "123456",
         indirectTaxType: "VAT",
         country: "United Kingdom",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -854,6 +870,7 @@ export const TaxAndCashDashboardNoFormNeeded = () => {
         country: "Canada",
         indirectTaxNumber: "123456",
         indirectTaxType: "GST",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -872,6 +889,7 @@ export const TaxAndCashDashboardIndirectTaxCanada = () => {
         country: "Canada",
         indirectTaxType: "GST",
         indirectTaxNumber: "123456",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -891,6 +909,7 @@ export const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
         indirectTaxType: "GST",
         indirectTaxNumber: "123456",
         qstNumber: "44212",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -910,6 +929,7 @@ export const TaxAndCashDashboardIndirectTaxSpain = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         subRegionTaxNumber: "44212",
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -924,6 +944,22 @@ export const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: true,
+        showNewFormDialog: false,
+      },
+    } }));
+};
+export const TaxAndCashDashboardNewTaxForm = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        canEditPayoutInfo: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        notRegistered: true,
+        showNewFormDialog: true,
       },
     } }));
 };
@@ -939,6 +975,7 @@ export const TaxAndCashDashboardLoading = () => {
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         loading: true,
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -955,6 +992,7 @@ export const TaxAndCashDashboardWithLoadingError = () => {
         noFormNeeded: false,
         loading: true,
         loadingError: true,
+        showNewFormDialog: false,
       },
     } }));
 };
@@ -972,6 +1010,7 @@ export const TaxAndCashDashboardWithGeneralError = () => {
         indirectTaxNumber: "123456",
         indirectTaxType: "VAT",
         country: "Slovania",
+        showNewFormDialog: false,
         errors: {
           general: true,
         },
@@ -984,13 +1023,14 @@ export const TaxAndCashDashboardDisabled = () => {
       states: {
         canEditPayoutInfo: true,
         disabled: true,
-        status: "NOT_ACTIVE",
+        status: "ACTIVE",
         documentType: "W8BEN",
         documentTypeString: taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         indirectTaxNumber: "123456",
         country: "Slovania",
+        showNewFormDialog: false,
       },
     } }));
 };

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

@@ -0,0 +1,200 @@
+import { h } from "@stencil/core";
+import { intl } from "../../../global/global";
+export function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32;
+  const { errors, ...formState } = props.states.formState;
+  return {
+    0: {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.beneficiaryAccountNameLabel, name: "/beneficiaryAccountName", id: "beneficiaryAccountName", key: "beneficiaryAccountName", type: "text" }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.beneficiaryAccountName) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.beneficiaryAccountName) === null || _c === void 0 ? void 0 : _c.type,
+          label: props.text.beneficiaryAccountNameLabel,
+        }),
+      })))),
+    },
+    1: {
+      input: (h("sl-select", Object.assign({ required: true, label: props.text.bankAccountTypeLabel, name: "/bankAccountType", id: "bankAccountType", key: "bankAccountType" }, (((_d = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _d === void 0 ? void 0 : _d.bankAccountType) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _e === void 0 ? void 0 : _e.bankAccountType) === null || _f === void 0 ? void 0 : _f.type,
+          label: props.text.bankAccountTypeLabel,
+        }),
+      })),
+        h("sl-menu-item", { value: "CHECKING" }, props.text.checkingSelectItemLabel),
+        h("sl-menu-item", { value: "SAVINGS" }, props.text.savingsSelectItemLabel))),
+    },
+    2: {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.bankAccountNumberLabel, name: "/bankAccountNumber", id: "bankAccountNumber", key: "bankAccountNumber", value: formState.bankAccountNumber, type: "text" }, (((_g = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _g === void 0 ? void 0 : _g.bankAccountNumber) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_j = (_h = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _h === void 0 ? void 0 : _h.bankAccountNumber) === null || _j === void 0 ? void 0 : _j.type,
+          label: props.text.bankAccountNumberLabel,
+        }),
+      })))),
+    },
+    3: {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.ibanLabel, name: "/bankAccountNumber", id: "iban", key: "iban", type: "text", value: formState.bankAccountNumber }, (((_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.bankAccountNumber) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_m = (_l = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _l === void 0 ? void 0 : _l.bankAccountNumber) === null || _m === void 0 ? void 0 : _m.type,
+          label: props.text.ibanLabel,
+        }),
+      })))),
+    },
+    4: {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.swiftCodeLabel, name: "/swiftCode", id: "swiftCode", key: "swiftCode", type: "text" }, (((_o = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _o === void 0 ? void 0 : _o.swiftCode) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.swiftCode) === null || _q === void 0 ? void 0 : _q.type,
+          label: props.text.swiftCodeLabel,
+        }),
+      })))),
+    },
+    5: {
+      input: (h("sl-input", Object.assign({ required: true, label: intl.formatMessage({
+          id: "routingCodeText",
+          defaultMessage: props.text.routingCodeLabel,
+        }, {
+          bankCountry,
+        }), name: "/routingCode", id: "routingCode", key: "routingCode", type: "text" }, (((_r = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _r === void 0 ? void 0 : _r.routingCode) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_t = (_s = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _s === void 0 ? void 0 : _s.routingCode) === null || _t === void 0 ? void 0 : _t.type,
+          label: intl.formatMessage({
+            id: "routingCodeErrorText",
+            defaultMessage: props.text.routingCodeLabel,
+          }, {
+            bankCountry,
+          }),
+        }),
+      })))),
+    },
+    6: {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.bankNameLabel, name: "/bankName", id: "bankName", key: "bankName", type: "text" }, (((_u = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _u === void 0 ? void 0 : _u.bankName) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_w = (_v = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _v === void 0 ? void 0 : _v.bankName) === null || _w === void 0 ? void 0 : _w.type,
+          label: props.text.bankNameLabel,
+        }),
+      })))),
+    },
+    7: {
+      input: [
+        h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_x = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _x === void 0 ? void 0 : _x.beneficiaryClassification) && {
+          class: "error-input",
+          helpText: getValidationErrorMessage({
+            type: (_z = (_y = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _y === void 0 ? void 0 : _y.beneficiaryClassification) === null || _z === void 0 ? void 0 : _z.type,
+            label: props.text.classificationLabel,
+          }),
+        })),
+          h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
+          h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
+          h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel)),
+        h("sl-input", Object.assign({ required: true, label: intl.formatMessage({
+            id: "fxWireText",
+            defaultMessage: props.text.taxPayerIdLabel,
+          }, {
+            bankCountry,
+          }), type: "text", name: "/taxPayerId", id: "taxPayerId", key: "taxPayerId" }, (((_0 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _0 === void 0 ? void 0 : _0.taxPayerId) && {
+          class: "error-input",
+          helpText: getValidationErrorMessage({
+            type: (_2 = (_1 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _1 === void 0 ? void 0 : _1.taxPayerId) === null || _2 === void 0 ? void 0 : _2.type,
+            label: props.text.taxPayerIdLabel,
+          }),
+        }))),
+      ],
+    },
+    8: {
+      input: (h("sl-select", Object.assign({ required: true, label: props.text.classificationCPFLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_3 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _3 === void 0 ? void 0 : _3.beneficiaryClassification) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_5 = (_4 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _4 === void 0 ? void 0 : _4.beneficiaryClassification) === null || _5 === void 0 ? void 0 : _5.type,
+          label: props.text.classificationCPFLabel,
+        }),
+      })),
+        h("sl-menu-item", { value: "CPF" }, "CPF"),
+        h("sl-menu-item", { value: "CNPJ" }, "CNPJ"))),
+    },
+    9: {
+      input: (h("sl-input", Object.assign({ key: "patronymicName", required: true, label: props.text.patronymicNameLabel, name: "/patronymicName", id: "patronymicName", type: "text" }, (((_6 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _6 === void 0 ? void 0 : _6.patronymicName) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_8 = (_7 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _7 === void 0 ? void 0 : _7.patronymicName) === null || _8 === void 0 ? void 0 : _8.type,
+          label: props.text.patronymicNameLabel,
+        }),
+      })))),
+    },
+    10: {
+      input: (h("sl-input", Object.assign({ key: "voCode", label: props.text.voCodeLabel, name: "/voCode", id: "voCode", type: "text" }, (((_9 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _9 === void 0 ? void 0 : _9.voCode) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_11 = (_10 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _10 === void 0 ? void 0 : _10.voCode) === null || _11 === void 0 ? void 0 : _11.type,
+          label: props.text.voCodeLabel,
+        }),
+      })))),
+    },
+    11: {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.agencyCodeLabel, name: "/agencyCode", id: "agencyCode", key: "agencyCode", type: "text" }, (((_12 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _12 === void 0 ? void 0 : _12.agencyCode) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_14 = (_13 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _13 === void 0 ? void 0 : _13.agencyCode) === null || _14 === void 0 ? void 0 : _14.type,
+          label: props.text.agencyCodeLabel,
+        }),
+      })))),
+    },
+    12: {
+      input: [
+        h("sl-input", Object.assign({ required: true, label: props.text.bankAddressLabel, name: "/bankAddress", id: "bankAddress", key: "bankAddress", type: "text" }, (((_15 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _15 === void 0 ? void 0 : _15.bankAddress) && {
+          class: "error-input",
+          helpText: getValidationErrorMessage({
+            type: (_17 = (_16 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _16 === void 0 ? void 0 : _16.bankAddress) === null || _17 === void 0 ? void 0 : _17.type,
+            label: props.text.bankAddressLabel,
+          }),
+        }))),
+        h("sl-input", Object.assign({ required: true, label: props.text.bankCityLabel, name: "/bankCity", id: "bankCity", key: "bankCity", type: "text" }, (((_18 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _18 === void 0 ? void 0 : _18.bankCity) && {
+          class: "error-input",
+          helpText: getValidationErrorMessage({
+            type: (_20 = (_19 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _19 === void 0 ? void 0 : _19.bankCity) === null || _20 === void 0 ? void 0 : _20.type,
+            label: props.text.bankCityLabel,
+          }),
+        }))),
+        h("sl-input", Object.assign({ required: true, label: props.text.bankStateLabel, name: "/bankState", id: "bankState", key: "bankState", type: "text" }, (((_21 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _21 === void 0 ? void 0 : _21.bankState) && {
+          class: "error-input",
+          helpText: getValidationErrorMessage({
+            type: (_23 = (_22 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _22 === void 0 ? void 0 : _22.bankState) === null || _23 === void 0 ? void 0 : _23.type,
+            label: props.text.bankStateLabel,
+          }),
+        }))),
+        h("sl-input", Object.assign({ required: true, label: props.text.bankPostalCodeLabel, name: "/bankPostalCode", id: "bankPostalCode", key: "bankPostalCode", type: "text" }, (((_24 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _24 === void 0 ? void 0 : _24.bankPostalCode) && {
+          class: "error-input",
+          helpText: getValidationErrorMessage({
+            type: (_26 = (_25 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _25 === void 0 ? void 0 : _25.bankPostalCode) === null || _26 === void 0 ? void 0 : _26.type,
+            label: props.text.bankPostalCodeLabel,
+          }),
+        }))),
+      ],
+    },
+    13: {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.branchCodeLabel, name: "/branchCode", id: "branchCode", key: "branchCode", type: "text" }, (((_27 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _27 === void 0 ? void 0 : _27.branchCode) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_29 = (_28 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _28 === void 0 ? void 0 : _28.branchCode) === null || _29 === void 0 ? void 0 : _29.type,
+          label: props.text.branchCodeLabel,
+        }),
+      })))),
+    },
+    14: {
+      input: (h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_30 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _30 === void 0 ? void 0 : _30.beneficiaryClassification) && {
+        class: "error-input",
+        helpText: getValidationErrorMessage({
+          type: (_32 = (_31 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _31 === void 0 ? void 0 : _31.beneficiaryClassification) === null || _32 === void 0 ? void 0 : _32.type,
+          label: props.text.classificationLabel,
+        }),
+      })),
+        h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
+        h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
+        h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel))),
+    },
+  };
+}

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

@@ -182,9 +182,7 @@ export const BankingInfoFormView = (props) => {
   const { states, states: { formState }, callbacks, text, refs, slots, } = props;
   const { classes } = sheet;
   const getLoadingSkeleton = (checkedValue, inputNumber) => {
-    if (!inputNumber)
-      return [];
-    let skeletons = [];
+    let inputNumArray = Array(inputNumber).fill(0);
     const flexBoxStyle = {
       display: "flex",
       gap: "8px",
@@ -204,11 +202,9 @@ export const BankingInfoFormView = (props) => {
         h("div", { class: classes.SmallSkeleton }),
         h("div", { class: classes.LargeSkeleton })));
     }
-    for (let i = 0; i < inputNumber; i++) {
-      skeletons.push(h("div", { style: { ...flexBoxStyle, flexDirection: "column" }, key: i },
-        h("div", { class: classes.SmallSkeleton }),
-        h("div", { class: classes.LargeSkeleton })));
-    }
+    const skeletons = inputNumArray.map((_, idx) => (h("div", { style: { ...flexBoxStyle, flexDirection: "column" }, key: idx },
+      h("div", { class: classes.SmallSkeleton }),
+      h("div", { class: classes.LargeSkeleton }))));
     return skeletons;
   };
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },