@saasquatch/mint-components 2.3.0-9 → 2.3.0

package/dist/collection/components/tax-and-cash/sqm-user-info-form/UserInfoFormView.stories.js

@@ -11,6 +11,11 @@ const mockCountries = [
   { countryCode: "DE", displayName: "Germany" },
   { countryCode: "FR", displayName: "France" },
   { countryCode: "ES", displayName: "Spain" },
+  // Show handling of long country names
+  {
+    countryCode: "CD",
+    displayName: "Congo, The Democratic Republic of the Congo",
+  },
 ];
 const mockCurrencies = [
   { currencyCode: "USD", displayName: "US Dollar" },
@@ -101,6 +106,8 @@ const baseProps = {
     loading: false,
     isPartner: false,
     isUser: false,
+    isPartnerLegacy: false,
+    isUserLegacy: false,
     formState: {
       firstName: "",
       lastName: "",
@@ -213,6 +220,7 @@ export const PartnerAccount = () => {
   return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       isPartner: true,
+      isPartnerLegacy: true,
       formState: {
         ...baseProps.states.formState,
         firstName: "Jane",
@@ -232,10 +240,53 @@ export const PartnerAccount = () => {
       partnerData: mockPartnerData,
     } })));
 };
+// Early partner created via <sqm-partner-info-modal>: connectionStatus is "STARTED",
+// publisher has only countryCode + currency populated. Banner must NOT show; only
+// country + currency disabled; firstName/lastName disabled via userData; everything
+// else (phone, address, city, state, postalCode) stays editable.
+export const EarlyPartnerFromModal = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      isPartner: true,
+      isUser: true,
+      isPartnerLegacy: false,
+      isUserLegacy: false,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Jane",
+        lastName: "Smith",
+        email: "jane.smith@example.com",
+        countryCode: "US",
+        currency: "USD",
+        phoneNumberCountryCode: undefined,
+        phoneNumber: undefined,
+        address: undefined,
+        city: undefined,
+        state: undefined,
+        postalCode: undefined,
+      },
+    }, data: {
+      ...baseProps.data,
+      partnerData: {
+        ...mockPartnerData,
+        billingAddress: undefined,
+        billingCity: undefined,
+        billingState: undefined,
+        billingPostalCode: undefined,
+        phoneNumber: undefined,
+        phoneNumberCountryCode: undefined,
+      },
+      userData: {
+        firstName: "Jane",
+        lastName: "Smith",
+      },
+    } })));
+};
 export const UserAccount = () => {
   return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       isUser: true,
+      isUserLegacy: true,
       formState: {
         ...baseProps.states.formState,
         firstName: "Bob",
@@ -254,6 +305,7 @@ export const UserAccountMissingLastName = () => {
   return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       isUser: true,
+      isUserLegacy: true,
       formState: {
         ...baseProps.states.formState,
         firstName: "Bob",

package/dist/collection/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.js

@@ -105,7 +105,7 @@ export const OtherRegionSlotView = (props) => {
         helpText: formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
       }), { id: "subRegion", name: "/subRegion" }), props.data.esRegions.map((r) => (h("sl-menu-item", { value: r.regionCode }, r.displayName)))),
       h(IndirectTaxNumberInput, { name: "indirectTaxNumber", label: getTaxFieldLabel("VAT"), error: getTaxFieldError("VAT") }),
-      h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
+      h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled }, text.isRegisteredSubRegionIncomeTax),
       formState.hasSubRegionTaxNumber && (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.subRegionTaxNumberLabel, disabled: states.loading || states.disabled, value: formState.subRegionTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.subRegionTaxNumber) && {
         class: classes.ErrorInput,
         helpText: formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
@@ -123,7 +123,7 @@ export const OtherRegionSlotView = (props) => {
       currentTaxType === "GST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("GST"), error: getTaxFieldError("GST"), name: "indirectTaxNumber" })),
       currentTaxType === "HST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("HST"), error: getTaxFieldError("HST"), name: "indirectTaxNumber" })),
       formState.province === "QUEBEC" && (h("div", { class: classes.ConditionalInputsContainer },
-        h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
+        h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.disabled }, text.isRegisteredQST),
         formState.hasQst && (h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
   };
   const getActiveForm = (selectedRegion) => {

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { AsYouType } from "libphonenumber-js";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { FORM_STEPS } from "../data";
@@ -107,10 +108,6 @@ const vanillaStyle = `
       flex-direction: column;
     }
 
-    sl-select#phoneNumberCountryCode::part(menu) {
-      min-width: 250px;
-    }
-
     sl-button[type="primary"]::part(base){
         background-color: var(--sqm-primary-button-background);
         color: var(--sqm-primary-button-color);
@@ -204,6 +201,7 @@ const vanillaStyle = `
       background: var(--sqm-input-background, inherit);
       color: var(--sqm-input-color, inherit);
       border:none;
+      width: max-content;
     }
 
     sl-menu-item::part(base) {
@@ -336,6 +334,14 @@ export const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
+      (states.isPartnerLegacy || states.isUserLegacy) && (h("sqm-form-message", { loading: states.loading, type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+        h("p", { part: "alert-description" }, intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })))),
       h("div", null,
         h("div", { class: classes.InputContainer },
           h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
@@ -388,7 +394,14 @@ export const UserInfoFormView = (props) => {
                     h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
                     _b.dial_code));
                 })),
-              h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ control, value, formData }) => {
+              h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber !== null
+                  ? formState.phoneNumber
+                  : "", "onSl-input": (e) => {
+                  var _a;
+                  const target = e.target;
+                  const country = (((_a = refs.phoneCountryRef.current) === null || _a === void 0 ? void 0 : _a.value) || "US");
+                  target.value = new AsYouType(country).input(target.value);
+                }, validationError: ({ control, value, formData }) => {
                   // skip validation for values the user can't edit
                   if (control === null || control === void 0 ? void 0 : control.disabled)
                     return undefined;

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

@@ -864,7 +864,7 @@ export class TaxForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseUserInfoFormResult>",
-        "resolved": "{ states?: { step: string; hideState: boolean; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; phoneNumberCountryCode: string; phoneNumber: string; countryCode: string; currency: string; address: string; city: string; state: string; postalCode: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; phoneCountryRef: Ref<HTMLSelectElement>; }; data?: { currencies: { displayName: string; currencyCode: string; }[]; countries: TaxCountry[]; phoneCountries: TaxCountry[]; allCurrencies: { displayName: string; currencyCode: string; }[]; allCountries: TaxCountry[]; regionLabelEnum: \"STATE\" | \"PROVINCE\" | \"REGION\"; regions: { label: string; value: string; }[]; partnerData: ImpactPublisher; userData: ImpactUser; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
+        "resolved": "{ states?: { step: string; hideState: boolean; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; isUserLegacy: boolean; isPartnerLegacy: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; phoneNumberCountryCode: string; phoneNumber: string; countryCode: string; currency: string; address: string; city: string; state: string; postalCode: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; phoneCountryRef: Ref<HTMLSelectElement>; }; data?: { currencies: { displayName: string; currencyCode: string; }[]; countries: TaxCountry[]; phoneCountries: TaxCountry[]; allCurrencies: { displayName: string; currencyCode: string; }[]; allCountries: TaxCountry[]; regionLabelEnum: \"STATE\" | \"PROVINCE\" | \"REGION\"; regions: { label: string; value: string; }[]; partnerData: ImpactPublisher; userData: ImpactUser; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -927,6 +927,8 @@ function useDemoUserInfoForm(props) {
       loading: false,
       isPartner: false,
       isUser: false,
+      isPartnerLegacy: false,
+      isUserLegacy: false,
       loadingError: false,
       formState: {
         errors: {

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

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hoo
 import jsonpointer from "jsonpointer";
 import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { ADDRESS_REGIONS } from "../subregions";
-import { objectIsFull, validTaxDocument } from "../utils";
+import { objectIsFull, toDomesticNumber, validTaxDocument } from "../utils";
 import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 import { CONNECT_PARTNER, COMPLETE_PARTNER, } from "../sqm-indirect-tax-form/useIndirectTaxForm";
 import { gql } from "graphql-request";
@@ -16,7 +16,7 @@ const GET_INDIRECT_TAX_COUNTRY_CODE = gql `
   }
 `;
 export function useUserInfoForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
   const currencyRef = useRef(undefined);
   const phoneCountryRef = useRef(undefined);
   const formRef = useRef(null);
@@ -122,7 +122,9 @@ export function useUserInfoForm(props) {
       setFilteredPhoneCountries(countries || []);
     }
     else {
-      setFilteredPhoneCountries(countries.filter((c) => c.displayName.toLowerCase().includes(phoneCountrySearch.toLowerCase())) || []);
+      setFilteredPhoneCountries(countries.filter((c) => c.displayName
+        .toLowerCase()
+        .includes(phoneCountrySearch.toLowerCase())) || []);
     }
   }, [phoneCountrySearch, countries]);
   useEffect(() => {
@@ -136,7 +138,7 @@ export function useUserInfoForm(props) {
     }
   }, [currencySearch, currencies]);
   async function connectPartner(formData) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const vars = {
       user: {
         id: user.id,
@@ -150,39 +152,34 @@ export function useUserInfoForm(props) {
       city: formData.city,
       state: formData.state,
       postalCode: formData.postalCode,
-      phoneNumber: formData.phoneNumber,
+      phoneNumber: toDomesticNumber(formData.phoneNumberCountryCode, formData.phoneNumber),
       phoneNumberCountryCode: formData.phoneNumberCountryCode,
     };
-    // If the partner has already been started call completeImpactPartner to
-    // update the remaining details. Otherwise create a new connection.
+    // if user went through early partner creation, connectionStatus === "STARTED"
+    // otherwise trigger legacy partner creation
     const userData = data === null || data === void 0 ? void 0 : data.user;
     let result = null;
     let connectionResult;
-    result = await completeImpactPartner({
-      vars,
-    });
-    connectionResult = (_a = result) === null || _a === void 0 ? void 0 : _a.completeImpactConnection;
-    // if (userData?.impactConnection?.connectionStatus === "STARTED") {
-    //   result = await completeImpactPartner({
-    //     vars,
-    //   });
-    //   connectionResult = (result as CompletePartnerResult)
-    //     ?.completeImpactConnection;
-    // } else {
-    //   result = await connectImpactPartner({
-    //     vars,
-    //   });
-    //   connectionResult = (result as ConnectPartnerResult)
-    //     ?.createImpactConnection;
-    // }
-    if (!result || ((_b = result) === null || _b === void 0 ? void 0 : _b.message))
+    if (((_a = userData === null || userData === void 0 ? void 0 : userData.impactConnection) === null || _a === void 0 ? void 0 : _a.connectionStatus) === "STARTED") {
+      result = await completeImpactPartner({
+        vars,
+      });
+      connectionResult = (_b = result) === null || _b === void 0 ? void 0 : _b.completeImpactConnection;
+    }
+    else {
+      result = await connectImpactPartner({
+        vars,
+      });
+      connectionResult = (_c = result) === null || _c === void 0 ? void 0 : _c.createImpactConnection;
+    }
+    if (!result || ((_d = result) === null || _d === void 0 ? void 0 : _d.message))
       throw new Error();
     if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.success)) {
       console.error("Failed to create Impact connection: ", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
       throw new Error();
     }
     await refetch();
-    const resultPublisher = (_d = (_c = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.publisher;
+    const resultPublisher = (_f = (_e = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.user) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.publisher;
     const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
     // Fire form change event
     window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
@@ -220,12 +217,13 @@ export function useUserInfoForm(props) {
       return;
     }
     const { allowBankingCollection, ...userData } = formData;
+    const normalizedPhoneNumber = toDomesticNumber(userData.phoneNumberCountryCode, userData.phoneNumber);
     setUserFormContext({
       ...userFormContext,
       firstName: userData.firstName,
       lastName: userData.lastName,
       phoneNumberCountryCode: userData.phoneNumberCountryCode,
-      phoneNumber: userData.phoneNumber,
+      phoneNumber: normalizedPhoneNumber,
       countryCode: userData.countryCode,
       address: userData.address,
       city: userData.city,
@@ -236,7 +234,10 @@ export function useUserInfoForm(props) {
     const skipNextStep = getSkipNextStep(userData);
     if (skipNextStep) {
       try {
-        const { resultPublisher, hasValidCurrentDocument } = await connectPartner(formData);
+        const { resultPublisher, hasValidCurrentDocument } = await connectPartner({
+          ...formData,
+          phoneNumber: normalizedPhoneNumber,
+        });
         if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
           !hasValidCurrentDocument) {
           // Go to docusign form
@@ -312,6 +313,11 @@ export function useUserInfoForm(props) {
       loading: loading || connectLoading || completeLoading,
       isPartner: !!((_g = (_f = data === null || data === void 0 ? void 0 : data.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher),
       isUser: !!((_j = (_h = data === null || data === void 0 ? void 0 : data.user) === null || _h === void 0 ? void 0 : _h.impactConnection) === null || _j === void 0 ? void 0 : _j.user),
+      // Show banner when pre-existing partner is created with legacy mutation createImpactConnection
+      isUserLegacy: !!((_l = (_k = data === null || data === void 0 ? void 0 : data.user) === null || _k === void 0 ? void 0 : _k.impactConnection) === null || _l === void 0 ? void 0 : _l.user) &&
+        ((_o = (_m = data === null || data === void 0 ? void 0 : data.user) === null || _m === void 0 ? void 0 : _m.impactConnection) === null || _o === void 0 ? void 0 : _o.connectionStatus) !== "STARTED",
+      isPartnerLegacy: !!((_q = (_p = data === null || data === void 0 ? void 0 : data.user) === null || _p === void 0 ? void 0 : _p.impactConnection) === null || _q === void 0 ? void 0 : _q.publisher) &&
+        ((_s = (_r = data === null || data === void 0 ? void 0 : data.user) === null || _r === void 0 ? void 0 : _r.impactConnection) === null || _s === void 0 ? void 0 : _s.connectionStatus) !== "STARTED",
       formState: {
         ...userFormContext,
         errors: formErrors,

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

@@ -1,31 +1,46 @@
+import { parsePhoneNumberFromString } from "libphonenumber-js";
 import { intl } from "../../global/global";
-import { PHONE_EXTENSIONS } from "./phoneExtensions";
-function stripLeadingZero(d) {
-  return d.startsWith("0") ? d.slice(1) : d;
+/**
+ * Normalize user input to the domestic form Impact stores: digits only,
+ * with the country dial code and trunk-zero prefix removed.
+ */
+export function toDomesticNumber(phoneCountryCode, input) {
+  var _a;
+  if (!input)
+    return "";
+  const parsed = parsePhoneNumberFromString(input, phoneCountryCode === null || phoneCountryCode === void 0 ? void 0 : phoneCountryCode.toUpperCase());
+  return (_a = parsed === null || parsed === void 0 ? void 0 : parsed.nationalNumber) !== null && _a !== void 0 ? _a : input.replace(/\D/g, "");
 }
 /**
- * Mirrors Impact's I18nPhoneNumberParams validation rules per country.
- * Returns true when the phone number is valid for the given the phoneNumberCountryCode country.
+ * Validates a phone number against both libphonenumber-js's per-country
+ * pattern rules AND Impact's I18nPhoneNumber length rules, applied to the
+ * sanitized value we'll submit.
  */
 export function isValidI18nPhoneNumber(phoneCountryCode, phoneNumber) {
-  var _a, _b;
   if (!phoneCountryCode || !(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim()))
     return false;
   const country = phoneCountryCode.toUpperCase();
-  const digits = phoneNumber.replace(/\D/g, "");
+  const parsed = parsePhoneNumberFromString(phoneNumber, country);
+  if (!(parsed === null || parsed === void 0 ? void 0 : parsed.isValid()))
+    return false;
+  return passesImpactBackendLengthCheck(country, toDomesticNumber(country, phoneNumber));
+}
+/**
+ * Mirrors estalea.bucket.phone.I18nPhoneNumber.isValidI18nPhoneNumber()
+ * length rules on the already-sanitized (digits-only) submission value.
+ */
+function passesImpactBackendLengthCheck(country, digits) {
+  if (!digits)
+    return false;
   switch (country) {
     case "US":
     case "CA": {
-      // strip a single leading "1", then exactly 10 digits
       const n = digits.startsWith("1") ? digits.slice(1) : digits;
       return n.length === 10;
     }
     case "AU":
-      // 9 or 10 digits
       return digits.length === 9 || digits.length === 10;
     case "NZ": {
-      // trim "640" country prefix or leading "0" (only when >9 digits),
-      // then 8–10 digits
       let n = digits;
       if (n.length > 9) {
         if (n.startsWith("640"))
@@ -35,25 +50,13 @@ export function isValidI18nPhoneNumber(phoneCountryCode, phoneNumber) {
       }
       return n.length >= 8 && n.length <= 10;
     }
-    case "GB":
-      // >= 6 digits after stripping a single leading "0", no dialing-code check
+    default:
       return stripLeadingZero(digits).length >= 6;
-    default: {
-      // All other countries: strip a single leading "0", then >= 6 digits
-      if (stripLeadingZero(digits).length < 6)
-        return false;
-      // If input starts with "+", the dialing code (first whitespace-split
-      // token) must match the selected country exactly. Splits on first
-      // whitespace, so "+4420 7946 0958" supplies "4420" (not "44") and fails.
-      if (phoneNumber.trim().startsWith("+")) {
-        const supplied = phoneNumber.trim().split(/\s/)[0].slice(1);
-        const expected = (_b = (_a = PHONE_EXTENSIONS[country]) === null || _a === void 0 ? void 0 : _a.dial_code) === null || _b === void 0 ? void 0 : _b.replace(/^\+/, "");
-        return expected === supplied;
-      }
-      return true;
-    }
   }
 }
+function stripLeadingZero(digits) {
+  return digits.startsWith("0") ? digits.slice(1) : digits;
+}
 export function validTaxDocument(requiredType) {
   const validTypes = ["W9", "W8BENE", "W8BEN"];
   if (validTypes.includes(requiredType))

package/dist/collection/global/styles.js

@@ -640,7 +640,7 @@ html {
   --sqm-input-border-color-focus: ${((_68 = config === null || config === void 0 ? void 0 : config.formFields) === null || _68 === void 0 ? void 0 : _68.selectedStateColor) || "hsl(0, 0%, 7%)"};
   --sqm-input-border-color-hover: ${((_69 = config === null || config === void 0 ? void 0 : config.formFields) === null || _69 === void 0 ? void 0 : _69.hoverStateColor) || "hsl(0, 0%, 91%)"};
 
-  --sqm-input-label-font-size: inherit;
+  --sqm-input-label-font-size: var(--sl-input-label-font-size-small);
   --sqm-input-disabled-color: var(--sqm-text-subdued);
   --sqm-input-disabled-background: ${((_70 = config === null || config === void 0 ? void 0 : config.formFields) === null || _70 === void 0 ? void 0 : _70.disabledBackgroundColor) || "#F4F4F5"};
 
@@ -836,7 +836,6 @@ sl-button[type="primary"]::part(base):hover{
   color: var(--sqm-primary-button-color-hover);
 }
 
-
 *::part(primarybutton-base):focus,
 sl-button[type="primary"]::part(base):focus {
   box-shadow: none;
@@ -861,10 +860,15 @@ sl-button[type="secondary"]::part(base):hover {
 *::part(input-label), *::part(select-label), *::part(textarea-label){
   font-family: var(--sqm-primary-font);
   font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
-  font-weight: var(--sl-font-weight-semibold);
+  font-weight: var(--sl-font-weight-bold);
   color: var(--sqm-input-label-color, var(--sqm-text), black);
 }
 
+sl-input::part(label) {
+  font-weight: var(--sl-font-weight-bold);
+  font-size: var(--sl-input-font-size-small);
+}
+
 *::part(input-base), *::part(select-base), *::part(textarea-base){
   font-family: var(--sqm-primary-font);
   background-color: var(--sqm-input-background, #fff);

package/dist/collection/global/styles.ts

@@ -745,7 +745,7 @@ html {
     config?.formFields?.hoverStateColor || "hsl(0, 0%, 91%)"
   };
 
-  --sqm-input-label-font-size: inherit;
+  --sqm-input-label-font-size: var(--sl-input-label-font-size-small);
   --sqm-input-disabled-color: var(--sqm-text-subdued);
   --sqm-input-disabled-background: ${
     config?.formFields?.disabledBackgroundColor || "#F4F4F5"
@@ -943,7 +943,6 @@ sl-button[type="primary"]::part(base):hover{
   color: var(--sqm-primary-button-color-hover);
 }
 
-
 *::part(primarybutton-base):focus,
 sl-button[type="primary"]::part(base):focus {
   box-shadow: none;
@@ -968,10 +967,15 @@ sl-button[type="secondary"]::part(base):hover {
 *::part(input-label), *::part(select-label), *::part(textarea-label){
   font-family: var(--sqm-primary-font);
   font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
-  font-weight: var(--sl-font-weight-semibold);
+  font-weight: var(--sl-font-weight-bold);
   color: var(--sqm-input-label-color, var(--sqm-text), black);
 }
 
+sl-input::part(label) {
+  font-weight: var(--sl-font-weight-bold);
+  font-size: var(--sl-input-font-size-small);
+}
+
 *::part(input-base), *::part(select-base), *::part(textarea-base){
   font-family: var(--sqm-primary-font);
   background-color: var(--sqm-input-background, #fff);