@justifi/webcomponents 4.7.3 → 4.7.5

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

@@ -10,124 +10,124 @@ import { config } from "../../../config";
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessForm {
-  constructor() {
-    this.authToken = undefined;
-    this.businessId = undefined;
-    this.isLoading = false;
-    this.sendData = this.sendData.bind(this);
-    this.fetchData = this.fetchData.bind(this);
-  }
-  componentWillLoad() {
-    if (!this.authToken) {
-      console.warn('Warning: Missing auth-token. The form will not be functional without it.');
+    constructor() {
+        this.authToken = undefined;
+        this.businessId = undefined;
+        this.isLoading = false;
+        this.sendData = this.sendData.bind(this);
+        this.fetchData = this.fetchData.bind(this);
     }
-    this.formController = new FormController(businessFormSchema);
-    this.api = Api(this.authToken, config.proxyApiOrigin);
-    if (this.businessId) {
-      this.fetchData(this.businessId);
+    componentWillLoad() {
+        if (!this.authToken) {
+            console.warn('Warning: Missing auth-token. The form will not be functional without it.');
+        }
+        this.formController = new FormController(businessFormSchema);
+        this.api = Api(this.authToken, config.proxyApiOrigin);
+        if (this.businessId) {
+            this.fetchData(this.businessId);
+        }
+        else {
+            this.formController.setInitialValues({
+                legal_address: {
+                    country: 'US',
+                },
+            });
+        }
     }
-    else {
-      this.formController.setInitialValues({
-        legal_address: {
-          country: 'US',
-        },
-      });
+    async sendData() {
+        this.isLoading = true;
+        try {
+            const data = this.formController.values.getValue();
+            // Conditionally making either POST or PATCH request
+            if (this.businessId) {
+                const payload = parseForPatching(data);
+                const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload));
+                console.log('Server response from PATCH:', response);
+            }
+            else {
+                const response = await this.api.post('entities/business', JSON.stringify(data));
+                console.log('Server response from POST:', response);
+            }
+        }
+        catch (error) {
+            console.error('Error sending data:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-  }
-  async sendData() {
-    this.isLoading = true;
-    try {
-      const data = this.formController.values.getValue();
-      // Conditionally making either POST or PATCH request
-      if (this.businessId) {
-        const payload = parseForPatching(data);
-        const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload));
-        console.log('Server response from PATCH:', response);
-      }
-      else {
-        const response = await this.api.post('entities/business', JSON.stringify(data));
-        console.log('Server response from POST:', response);
-      }
+    async fetchData(businessId) {
+        this.isLoading = true;
+        try {
+            const response = await this.api.get(`entities/business/${businessId}`);
+            this.formController.setInitialValues(response.data);
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-    catch (error) {
-      console.error('Error sending data:', error);
+    validateAndSubmit(event) {
+        event.preventDefault();
+        this.formController.validateAndSubmit(this.sendData);
     }
-    finally {
-      this.isLoading = false;
+    render() {
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: event => this.validateAndSubmit(event) }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-owners", { isEditing: !!this.businessId, formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: !this.authToken || this.isLoading }, this.isLoading ? 'Loading...' : 'Submit'))))));
     }
-  }
-  async fetchData(businessId) {
-    this.isLoading = true;
-    try {
-      const response = await this.api.get(`entities/business/${businessId}`);
-      this.formController.setInitialValues(response.data);
+    static get is() { return "justifi-business-form"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["business-form.scss"]
+        };
     }
-    catch (error) {
-      console.error('Error fetching data:', error);
+    static get styleUrls() {
+        return {
+            "$": ["business-form.css"]
+        };
     }
-    finally {
-      this.isLoading = false;
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "businessId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "business-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {}
+        };
     }
-  }
-  validateAndSubmit(event) {
-    event.preventDefault();
-    this.formController.validateAndSubmit(this.sendData);
-  }
-  render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: event => this.validateAndSubmit(event) }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-owners", { isEditing: !!this.businessId, formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: !this.authToken || this.isLoading }, this.isLoading ? 'Loading...' : 'Submit'))))));
-  }
-  static get is() { return "justifi-business-form"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["business-form.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["business-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "authToken": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "auth-token",
-        "reflect": false
-      },
-      "businessId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "business-id",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isLoading": {}
-    };
-  }
 }

package/dist/collection/components/business-form/business-generic-info/business-generic-info.css

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -712,6 +715,7 @@ small {
 
 mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
 
@@ -1021,7 +1025,7 @@ progress {
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -1036,7 +1040,7 @@ progress {
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -1226,7 +1230,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -1238,7 +1242,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -1395,7 +1399,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -1407,7 +1411,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -1564,7 +1568,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -1576,7 +1580,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -1733,7 +1737,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -1745,7 +1749,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -1902,7 +1906,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -1914,7 +1918,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js

@@ -12,62 +12,62 @@ import { PHONE_MASKS } from "../../../utils/phone-masks";
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessGenericInfo {
-  constructor() {
-    this.formController = undefined;
-    this.errors = {};
-    this.inputHandler = this.inputHandler.bind(this);
-  }
-  componentDidLoad() {
-    this.formController.errors.subscribe(errors => {
-      this.errors = Object.assign({}, errors);
-    });
-  }
-  inputHandler(name, value) {
-    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-  }
-  render() {
-    const genericInfoDefaultValue = this.formController.getInitialValues();
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: genericInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: genericInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: genericInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: genericInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: genericInfoDefaultValue.industry, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number", { name: "tax_id", label: "Tax ID", defaultValue: genericInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: genericInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: genericInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: genericInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
-  }
-  static get is() { return "justifi-business-generic-info"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["business-generic-info.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["business-generic-info.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "formController": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "FormController",
-          "resolved": "FormController",
-          "references": {
-            "FormController": {
-              "location": "import",
-              "path": "../../form/form",
-              "id": "src/components/form/form.ts::FormController"
+    constructor() {
+        this.formController = undefined;
+        this.errors = {};
+        this.inputHandler = this.inputHandler.bind(this);
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    inputHandler(name, value) {
+        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+    }
+    render() {
+        const genericInfoDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: genericInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: genericInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: genericInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: genericInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: genericInfoDefaultValue.industry, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number", { name: "tax_id", label: "Tax ID", defaultValue: genericInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: genericInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: genericInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: genericInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+    }
+    static get is() { return "justifi-business-generic-info"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["business-generic-info.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["business-generic-info.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "formController": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormController",
+                    "resolved": "FormController",
+                    "references": {
+                        "FormController": {
+                            "location": "import",
+                            "path": "../../form/form",
+                            "id": "src/components/form/form.ts::FormController"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "errors": {}
-    };
-  }
+        };
+    }
+    static get states() {
+        return {
+            "errors": {}
+        };
+    }
 }

package/dist/collection/components/business-form/business-owners/business-owners.css

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -712,6 +715,7 @@ small {
 
 mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
 
@@ -1021,7 +1025,7 @@ progress {
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -1036,7 +1040,7 @@ progress {
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -1226,7 +1230,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -1238,7 +1242,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -1395,7 +1399,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -1407,7 +1411,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -1564,7 +1568,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -1576,7 +1580,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -1733,7 +1737,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -1745,7 +1749,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -1902,7 +1906,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -1914,7 +1918,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;
@@ -2438,7 +2442,7 @@ progress {
 }
 
 /*!
- * Bootstrap Utilities v5.3.1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.3.2 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -2537,6 +2541,7 @@ progress {
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -2608,6 +2613,8 @@ progress {
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -3118,15 +3125,15 @@ progress {
 }
 
 .shadow {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 .shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+  box-shadow: var(--bs-box-shadow-sm) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+  box-shadow: var(--bs-box-shadow-lg) !important;
 }
 
 .shadow-none {