@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/collection/components/business-forms/schemas/business-core-info-schema.js

@@ -1,13 +1,56 @@
 import { object, string } from "yup";
-export const businessCoreInfoSchema = object({
-    legal_name: string().required('Enter legal name'),
-    website_url: string()
-        .url('Enter valid website url')
-        .required('Enter website url'),
-    email: string().email('Enter valid email').required('Enter email'),
-    phone: string().required('Enter phone number'),
-    doing_business_as: string().required('Enter doing business as'),
-    business_type: string().required('Select business type'),
-    business_structure: string().required('Select business structure'),
-    industry: string().required('Enter a business industry'),
-});
+import { BusinessTypeOptions } from "../utils/business-form-types";
+import { businessNameRegex, phoneRegex, stringLettersOnlyRegex, taxIdRegex, transformEmptyString, urlRegex } from "./schema-helpers";
+const nameValidation = string()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters')
+    .matches(businessNameRegex, 'Enter valid business name')
+    .transform(transformEmptyString);
+const doingBusinessAsValidation = string()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters')
+    .matches(businessNameRegex, 'Enter valid doing business as')
+    .transform(transformEmptyString);
+const websiteUrlValidation = string()
+    .matches(urlRegex, 'Enter valid website url')
+    .transform(transformEmptyString);
+const emailValidation = string()
+    .email('Enter valid email')
+    .transform(transformEmptyString);
+const phoneValidation = string()
+    .matches(phoneRegex, 'Enter valid phone number')
+    .transform(transformEmptyString);
+const businessTypeValidation = string()
+    .oneOf(BusinessTypeOptions.map((option) => option.value), 'Select business type')
+    .transform(transformEmptyString);
+const industryValidation = string()
+    .min(2, 'Industry must be at least 2 characters')
+    .max(50, 'Industry must be less than 50 characters')
+    .matches(stringLettersOnlyRegex, 'Enter valid industry')
+    .transform(transformEmptyString);
+const taxIdValidation = string()
+    .matches(taxIdRegex, 'Enter valid tax id')
+    .transform(transformEmptyString);
+export const businessCoreInfoSchema = (allowOptionalFields) => {
+    const schema = object({
+        legal_name: nameValidation.required('Enter legal name'),
+        website_url: websiteUrlValidation.required('Enter business website url'),
+        email: emailValidation.required('Enter business email'),
+        phone: phoneValidation.required('Enter phone number'),
+        doing_business_as: doingBusinessAsValidation.required('Enter doing business as'),
+        business_type: businessTypeValidation.required('Select business type'),
+        industry: industryValidation.required('Enter a business industry'),
+        tax_id: taxIdValidation.required('Enter tax id'),
+    });
+    const easySchema = object({
+        legal_name: nameValidation.required('Enter legal name'),
+        website_url: websiteUrlValidation.nullable(),
+        email: emailValidation.nullable(),
+        phone: phoneValidation.nullable(),
+        doing_business_as: doingBusinessAsValidation.nullable(),
+        business_type: businessTypeValidation.nullable(),
+        industry: industryValidation.nullable(),
+        tax_id: taxIdValidation.nullable(),
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/business-form-schema.js

@@ -1,6 +1,6 @@
 import { object } from "yup";
 import { businessCoreInfoSchema } from "./business-core-info-schema";
-import { additionQuestionsSchema } from "./business-additional-questions-schema";
-import { representativeSchema } from "./business-identity-schema";
-import { legalAddressSchema } from "./business-address-schema";
-export const businessFormSchema = object(Object.assign(Object.assign({}, businessCoreInfoSchema.fields), { legal_address: legalAddressSchema, additional_questions: additionQuestionsSchema, representative: representativeSchema }));
+import { additionalQuestionsSchema } from "./business-additional-questions-schema";
+import { identitySchema } from "./business-identity-schema";
+import { addressSchema } from "./business-address-schema";
+export const businessFormSchema = object(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('representative') }));

package/dist/collection/components/business-forms/schemas/business-identity-schema.js

@@ -1,35 +1,41 @@
 import { object, string } from "yup";
-import { identityAddressSchema } from "./business-address-schema";
-export const phoneRegex = /^[0-9]+$/;
-export const representativeSchema = object({
-    name: string().required('Enter representative name'),
-    email: string()
-        .email('Enter valid representative email')
-        .required('Enter representative email'),
-    phone: string()
-        .required('Enter representative phone number')
-        .matches(phoneRegex, 'Phone number must contain only numbers')
-        .min(10, 'Phone number must contain 10 digits')
-        .max(10, 'Phone number must contain 10 digits'),
-    dob_day: string().required('Enter representative birth day'),
-    dob_month: string().required('Enter representative birth month'),
-    dob_year: string().required('Enter representative birth year'),
-    identification_number: string(),
-    address: identityAddressSchema,
-});
-export const ownerSchema = object({
-    name: string().required('Enter owner name'),
-    email: string()
-        .email('Enter valid owner email')
-        .required('Enter owner email'),
-    phone: string()
-        .required('Enter owner phone number')
-        .matches(phoneRegex, 'Phone number must contain only numbers')
-        .min(10, 'Phone number must contain 10 digits')
-        .max(10, 'Phone number must contain 10 digits'),
-    dob_day: string().required('Enter owner birth day'),
-    dob_month: string().required('Enter owner birth month'),
-    dob_year: string().required('Enter owner birth year'),
-    identification_number: string(),
-    address: identityAddressSchema,
-});
+import { addressSchema } from "./business-address-schema";
+import { phoneRegex, transformEmptyString } from "./schema-helpers";
+const dobValidation = (title) => {
+    return (string()
+        .test('min', 'Enter a valid date', (value) => {
+        const date = new Date(value);
+        const minDate = new Date('1902-01-01');
+        return date >= minDate;
+    })
+        .test('age', `${title} must be at least 18 years old`, (value) => {
+        const date = new Date(value);
+        const minAgeDate = new Date();
+        minAgeDate.setFullYear(minAgeDate.getFullYear() - 18);
+        return date <= minAgeDate;
+    })
+        .transform(transformEmptyString));
+};
+export const identitySchema = (title, allowOptionalFields) => {
+    const schema = object({
+        name: string().required(`Enter ${title} name`),
+        email: string()
+            .email(`Enter valid ${title} email`)
+            .required(`Enter ${title} email`),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').required('Enter phone number'),
+        dob_full: dobValidation(title).required('Enter date of birth'),
+        identification_number: string(),
+        address: addressSchema(allowOptionalFields),
+    });
+    const easySchema = object({
+        name: string().required(`Enter ${title} name`),
+        email: string()
+            .email(`Enter valid ${title} email`)
+            .nullable(),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').nullable(),
+        dob_full: dobValidation(title).nullable('Enter date of birth'),
+        identification_number: string().nullable(),
+        address: addressSchema(allowOptionalFields),
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/schema-helpers.js

@@ -0,0 +1,8 @@
+export const transformEmptyString = (value) => {
+    return value === '' ? null : value;
+};
+export const businessNameRegex = /^(?!^\s+$)[a-zA-Z0-9\s,&.-]*$/;
+export const phoneRegex = /^\d{10}$/;
+export const urlRegex = /^(?:http(s)?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;
+export const taxIdRegex = /^\d{9}$/;
+export const stringLettersOnlyRegex = /^(?!^\s+$)[a-zA-Z\s]*$/;

package/dist/collection/components/business-forms/utils/business-form-types.js

@@ -1,3 +1,4 @@
+import { BusinessType } from "../../../api/Business";
 export var BusinessFormServerErrors;
 (function (BusinessFormServerErrors) {
     BusinessFormServerErrors["fetchData"] = "Error retrieving business data";
@@ -15,3 +16,32 @@ export var OwnerFormServerErrors;
     OwnerFormServerErrors["patchData"] = "Error updating owner data";
     OwnerFormServerErrors["postData"] = "Error adding owner data";
 })(OwnerFormServerErrors || (OwnerFormServerErrors = {}));
+export var OwnerFormClickActions;
+(function (OwnerFormClickActions) {
+    OwnerFormClickActions["removeOwner"] = "removeOwner";
+    OwnerFormClickActions["addOwner"] = "addOwner";
+    OwnerFormClickActions["addOwnerForm"] = "addOwnerForm";
+    OwnerFormClickActions["updateOwner"] = "updateOwner";
+})(OwnerFormClickActions || (OwnerFormClickActions = {}));
+export const BusinessTypeOptions = [
+    {
+        label: 'Choose business type',
+        value: '',
+    },
+    {
+        label: 'Individual',
+        value: BusinessType.individual,
+    },
+    {
+        label: 'For Profit',
+        value: BusinessType.for_profit,
+    },
+    {
+        label: 'Non Profit',
+        value: BusinessType.non_profit,
+    },
+    {
+        label: 'Government Entity',
+        value: BusinessType.government_entity,
+    },
+];

package/dist/collection/components/business-forms/utils/helpers.js

@@ -0,0 +1,22 @@
+import StateOptions from "../../../utils/state-options";
+export function getStateAbbreviation(stateName) {
+    const state = StateOptions.find(s => s.label === stateName);
+    return state ? state.value : stateName;
+}
+// filterNumber is intended to be used to format a string that contains a single digit to a two digit string. 
+export function filterNumber(num) {
+    if (/^\d$/.test(num)) {
+        return '0' + num;
+    }
+    return num;
+}
+export function constructDate(year, month, day) {
+    if (!year || !month || !day) {
+        return;
+    }
+    return `${year}-${filterNumber(month)}-${filterNumber(day)}`;
+}
+export function deconstructDate(date) {
+    const [dob_year, dob_month, dob_day] = date.split('-');
+    return { dob_year, dob_month, dob_day };
+}

package/dist/collection/components/business-forms/utils/payload-parsers.js

@@ -33,5 +33,6 @@ export const parseIdentityInfo = (values) => {
     delete values.address.created_at;
     delete values.address.updated_at;
     delete values.business_id;
+    delete values.dob_full;
     return values;
 };

package/dist/collection/components/business-list/business-list.js

@@ -79,7 +79,6 @@ export class BusinessList {
         return (h(Host, null, h("justifi-table", { columnData: [
                 ['Legal Name', 'The name associated with this Business'],
                 ['Business Type', 'The business type'],
-                ['Business Structure', 'The business structure'],
                 ['Tax ID', 'The tax ID associated with this business'],
                 ['Industry', 'The industry this business participates in'],
                 [
@@ -90,7 +89,6 @@ export class BusinessList {
             ], rowData: this.businesses.map((business) => [
                 business.legal_name,
                 snakeCaseToHumanReadable(business.business_type),
-                snakeCaseToHumanReadable(business.business_structure),
                 business.tax_id,
                 business.industry,
                 {

package/dist/collection/components/checkout/checkout-actions.js

@@ -15,9 +15,9 @@ export const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({
         return onError(error.message || error);
     }
 };
-export const makePay = ({ authToken, checkoutId, service }) => async ({ paymentMethodToken, onSuccess, onError }) => {
+export const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
     try {
-        const response = await service.pay(authToken, checkoutId, paymentMethodToken);
+        const response = await service.complete(authToken, checkoutId, payment);
         if (!response.error) {
             const checkout = response.data;
             onSuccess({ checkout });

package/dist/collection/components/checkout/checkout-core.css

@@ -2503,6 +2503,349 @@ progress {
     --bs-spinner-animation-speed: 1.5s;
   }
 }
+.list-group {
+  --bs-list-group-color: var(--bs-body-color);
+  --bs-list-group-bg: var(--bs-body-bg);
+  --bs-list-group-border-color: var(--bs-border-color);
+  --bs-list-group-border-width: var(--bs-border-width);
+  --bs-list-group-border-radius: var(--bs-border-radius);
+  --bs-list-group-item-padding-x: 1rem;
+  --bs-list-group-item-padding-y: 0.5rem;
+  --bs-list-group-action-color: var(--bs-secondary-color);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
+  --bs-list-group-action-active-color: var(--bs-body-color);
+  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
+  --bs-list-group-disabled-color: var(--bs-secondary-color);
+  --bs-list-group-disabled-bg: var(--bs-body-bg);
+  --bs-list-group-active-color: #fff;
+  --bs-list-group-active-bg: #0d6efd;
+  --bs-list-group-active-border-color: #0d6efd;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-radius: var(--bs-list-group-border-radius);
+}
+
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
+}
+.list-group-numbered > .list-group-item::before {
+  content: counters(section, ".") ". ";
+  counter-increment: section;
+}
+
+.list-group-item-action {
+  width: 100%;
+  color: var(--bs-list-group-action-color);
+  text-align: inherit;
+}
+.list-group-item-action:hover, .list-group-item-action:focus {
+  z-index: 1;
+  color: var(--bs-list-group-action-hover-color);
+  text-decoration: none;
+  background-color: var(--bs-list-group-action-hover-bg);
+}
+.list-group-item-action:active {
+  color: var(--bs-list-group-action-active-color);
+  background-color: var(--bs-list-group-action-active-bg);
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
+  color: var(--bs-list-group-color);
+  text-decoration: none;
+  background-color: var(--bs-list-group-bg);
+  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
+}
+.list-group-item:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.list-group-item:last-child {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.list-group-item.disabled, .list-group-item:disabled {
+  color: var(--bs-list-group-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-list-group-disabled-bg);
+}
+.list-group-item.active {
+  z-index: 2;
+  color: var(--bs-list-group-active-color);
+  background-color: var(--bs-list-group-active-bg);
+  border-color: var(--bs-list-group-active-border-color);
+}
+.list-group-item + .list-group-item {
+  border-top-width: 0;
+}
+.list-group-item + .list-group-item.active {
+  margin-top: calc(-1 * var(--bs-list-group-border-width));
+  border-top-width: var(--bs-list-group-border-width);
+}
+
+.list-group-horizontal {
+  flex-direction: row;
+}
+.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
+  border-bottom-left-radius: var(--bs-list-group-border-radius);
+  border-top-right-radius: 0;
+}
+.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
+  border-top-right-radius: var(--bs-list-group-border-radius);
+  border-bottom-left-radius: 0;
+}
+.list-group-horizontal > .list-group-item.active {
+  margin-top: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item {
+  border-top-width: var(--bs-list-group-border-width);
+  border-left-width: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item.active {
+  margin-left: calc(-1 * var(--bs-list-group-border-width));
+  border-left-width: var(--bs-list-group-border-width);
+}
+
+@media (min-width: 576px) {
+  .list-group-horizontal-sm {
+    flex-direction: row;
+  }
+  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 768px) {
+  .list-group-horizontal-md {
+    flex-direction: row;
+  }
+  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 992px) {
+  .list-group-horizontal-lg {
+    flex-direction: row;
+  }
+  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 1200px) {
+  .list-group-horizontal-xl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 1400px) {
+  .list-group-horizontal-xxl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+.list-group-flush {
+  border-radius: 0;
+}
+.list-group-flush > .list-group-item {
+  border-width: 0 0 var(--bs-list-group-border-width);
+}
+.list-group-flush > .list-group-item:last-child {
+  border-bottom-width: 0;
+}
+
+.list-group-item-primary {
+  --bs-list-group-color: var(--bs-primary-text-emphasis);
+  --bs-list-group-bg: var(--bs-primary-bg-subtle);
+  --bs-list-group-border-color: var(--bs-primary-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
+  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
+}
+
+.list-group-item-secondary {
+  --bs-list-group-color: var(--bs-secondary-text-emphasis);
+  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
+  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
+  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
+}
+
+.list-group-item-success {
+  --bs-list-group-color: var(--bs-success-text-emphasis);
+  --bs-list-group-bg: var(--bs-success-bg-subtle);
+  --bs-list-group-border-color: var(--bs-success-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
+  --bs-list-group-active-color: var(--bs-success-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
+}
+
+.list-group-item-info {
+  --bs-list-group-color: var(--bs-info-text-emphasis);
+  --bs-list-group-bg: var(--bs-info-bg-subtle);
+  --bs-list-group-border-color: var(--bs-info-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
+  --bs-list-group-active-color: var(--bs-info-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
+}
+
+.list-group-item-warning {
+  --bs-list-group-color: var(--bs-warning-text-emphasis);
+  --bs-list-group-bg: var(--bs-warning-bg-subtle);
+  --bs-list-group-border-color: var(--bs-warning-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
+  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
+}
+
+.list-group-item-danger {
+  --bs-list-group-color: var(--bs-danger-text-emphasis);
+  --bs-list-group-bg: var(--bs-danger-bg-subtle);
+  --bs-list-group-border-color: var(--bs-danger-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
+  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
+}
+
+.list-group-item-light {
+  --bs-list-group-color: var(--bs-light-text-emphasis);
+  --bs-list-group-bg: var(--bs-light-bg-subtle);
+  --bs-list-group-border-color: var(--bs-light-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
+  --bs-list-group-active-color: var(--bs-light-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
+}
+
+.list-group-item-dark {
+  --bs-list-group-color: var(--bs-dark-text-emphasis);
+  --bs-list-group-bg: var(--bs-dark-bg-subtle);
+  --bs-list-group-border-color: var(--bs-dark-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
+  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
+}
+
 :host {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
@@ -2518,6 +2861,10 @@ justifi-payment-method-form {
   margin-right: calc(var(--jfi-layout-padding) * -1);
 }
 
+.jfi-checkout-core {
+  color: var(--jfi-body-color);
+}
+
 *::part(label) {
   color: var(--jfi-form-label-color);
   font-family: var(--jfi-form-label-font-family);
@@ -2560,6 +2907,18 @@ justifi-payment-method-form {
   box-shadow: var(--jfi-form-control-box-shadow-error-focus);
 }
 
+*::part(invalid-feedback) {
+  color: var(--jfi-error-message-color);
+  font-size: var(--jfi-error-message-font-size);
+  margin: var(--jfi-error-message-margin);
+  line-height: normal;
+}
+
+.jfi-header {
+  color: var(--jfi-header-color);
+  border-bottom: var(--jfi-header-border);
+}
+
 .jfi-submit-button {
   font-family: var(--jfi-layout-font-family);
   color: var(--jfi-submit-button-color);
@@ -2570,6 +2929,8 @@ justifi-payment-method-form {
   border-radius: var(--jfi-submit-button-border-radius);
   width: var(--jfi-submit-button-width);
   box-shadow: var(--jfi-submit-button-box-shadow);
+  line-height: var(--jfi-submit-button-line-height);
+  text-transform: var(--jfi-submit-button-text-transform);
 }
 
 .jfi-submit-button:hover {