npm - @dropi/ui - Versions diffs - 0.1.52 → 0.1.54 - Mend

@dropi/ui 0.1.52 → 0.1.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (593) hide show

package/dist/collection/components/dropi-accordion/dropi-accordion-item.css CHANGED Viewed

@@ -1,6 +1,7 @@
 :host {
   display: block;
   border-bottom: 1px solid var(--Gray-Gray-100);
+  border-radius: 0;
 }
 .accordion-header {
@@ -8,26 +9,39 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
-  background: white;
+  background: transparent;
   border: none;
   cursor: pointer;
   text-align: left;
+  transition: background 0.3s;
+}
+.accordion-header:hover {
+  background: var(--Gray-Gray-50);
 }
 .accordion-header-left {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--Size-2);
 }
+/* Label-L — equivalente al <p> del host Angular */
 .accordion-title {
+  padding: var(--Size-5) var(--Size-4);
+  margin: 0;
+  font-family: var(--font-family-01);
   font-size: var(--font-size-m);
-  font-weight: var(--font-weight-semibold);
-  color: var(--Gray-Gray-700);
+  font-style: normal;
+  font-weight: var(--font-weight-bold);
+  color: var(--Gray-Gray-600);
+  line-height: var(--lineheight-simple);
 }
+/* Equivalente al .icon del host Angular */
 .accordion-chevron {
+  padding: var(--Size-3);
+  color: var(--Gray-Gray-500);
   transition: transform 0.3s ease;
 }
@@ -37,9 +51,10 @@
 .accordion-body {
   overflow: hidden;
-  transition: max-height 0.3s ease-out;
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 .accordion-content {
-  padding: 0 16px 16px 16px;
+  padding: var(--Size-4);
+  background: var(--Neutral-White);
 }

package/dist/collection/components/dropi-accordion/dropi-accordion.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; margin-bottom: -1px; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; margin-bottom: -1px; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 .accordion { border-top: 1px solid var(--Gray-Gray-100,#e6eaf2); border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); overflow: hidden; }

package/dist/collection/components/dropi-alert/dropi-alert.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }
@@ -100,7 +101,7 @@
   background: transparent;
   color: var(--Primary-Primary-500, #f49a3d);
   font-size: var(--font-size-xs, 10px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-bold, 700);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;

package/dist/collection/components/dropi-alert-legacy/dropi-alert-legacy.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   margin: 10px 0;
 }

package/dist/collection/components/dropi-alert-modal/dropi-alert-modal.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: contents;
 }

package/dist/collection/components/dropi-avatars/dropi-avatars.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }

package/dist/collection/components/dropi-badge/dropi-badge.css CHANGED Viewed

@@ -3,6 +3,7 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .tag-state {
   border-radius: 12px;

package/dist/collection/components/dropi-badge-legacy/dropi-badge-legacy.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }

package/dist/collection/components/dropi-banner-external/dropi-banner-external.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

package/dist/collection/components/dropi-breadcrumb/dropi-breadcrumb.css CHANGED Viewed

@@ -3,6 +3,7 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .breadcrumb {
   margin: 0;

package/dist/collection/components/dropi-button/dropi-button.css CHANGED Viewed

@@ -12,9 +12,11 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .btn {
   all: unset;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   box-sizing: border-box;
   display: flex;
   align-items: center;

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.css CHANGED Viewed

@@ -4,6 +4,7 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .container-card-check {
   padding: var(--Size-4, 16px);

package/dist/collection/components/dropi-card-product/dropi-card-product.css CHANGED Viewed

@@ -1,8 +1,9 @@
 :host {
   display: block;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 /* ── Card wrapper ── */
 .dropi-card-product {
@@ -104,7 +105,7 @@
 .category {
   color: #69738c;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
@@ -115,7 +116,7 @@
   display: flex;
   align-items: center;
   gap: 2px;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
@@ -132,7 +133,7 @@
 /* ── Product name ── */
 .product-name {
   color: #32394d;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
@@ -146,7 +147,7 @@
 /* ── Supplier ── */
 .supplier-info {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   line-height: 1.2;
 }
@@ -178,7 +179,7 @@
 .price-label {
   color: #69738c;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
@@ -188,7 +189,7 @@
 .price-value {
   color: #32394d;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 14px;
   font-weight: 700;
   line-height: 1.1;
@@ -225,7 +226,7 @@
 }
 .button-text {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 14px;
   font-weight: 700;
   line-height: 1.1;

package/dist/collection/components/dropi-card-section/dropi-card-section.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 .card-section {
@@ -16,7 +17,7 @@
 .card-section__title {
   margin: 0 0 4px;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-bold, 700);
   color: var(--Gray-Gray-800, #1f2433);
 }

package/dist/collection/components/dropi-carousel/dropi-carousel.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

package/dist/collection/components/dropi-checkbox/dropi-checkbox.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }

package/dist/collection/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 .csl__search {
@@ -13,7 +14,7 @@
 .csl__search-input {
   flex: 1; border: none; outline: none;
-  font-size: var(--font-size-s, 12px); font-family: inherit;
+  font-size: var(--font-size-s, 12px); font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d); background: transparent;
 }

package/dist/collection/components/dropi-chips/dropi-chips.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-flex;
 }
@@ -13,7 +14,7 @@
   padding: 0 var(--Size-2, 8px);
   border-radius: var(--Border-2, 8px);
   font-size: var(--font-size-xs, 10px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   width: fit-content;
   max-width: 200px;
 }

package/dist/collection/components/dropi-city-selector/dropi-city-selector.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   position: relative;
@@ -15,7 +16,7 @@
 /* ── Trigger ──────────────────────────────────────────────────────── */
 .selector-trigger {
   width: 100%;
-  min-height: 44px;
+  min-height: 40px;
   padding: 6px 12px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
@@ -26,7 +27,7 @@
   gap: 8px;
   cursor: pointer;
   text-align: left;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: border-color 0.15s;
 }
@@ -115,7 +116,7 @@
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: var(--Gray-Gray-50, #f7f8fa);
   outline: none;

package/dist/collection/components/dropi-color-picker/dropi-color-picker.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }

package/dist/collection/components/dropi-country-flags/dropi-country-flags.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-flex;
 }

package/dist/collection/components/dropi-country-selector/dropi-country-selector.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   text-align: left;
@@ -28,14 +29,14 @@ label {
 /* ── Trigger button ──────────────────────────────────────────────── */
 .select-button {
   width: 100%;
-  height: 44px;
+  height: 40px;
   padding: 0 12px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -164,7 +165,7 @@ label {
   border-radius: var(--Border-2, 8px);
   outline: none;
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: var(--Gray-Gray-50, #f7f8fa);
   transition: border-color 0.15s, background 0.15s;
@@ -197,7 +198,7 @@ label {
   text-align: left;
   color: var(--Gray-Gray-700, #32394d);
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;

package/dist/collection/components/dropi-date-picker/dropi-date-picker.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; position: relative; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 .dp-label {
@@ -21,7 +22,7 @@
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   cursor: pointer;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: border-color 0.2s;
 }
 .dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
@@ -81,7 +82,7 @@
   border: 1px solid transparent;
   padding: 6px 10px;
   font-size: 13px;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   cursor: pointer;
   text-align: left;
@@ -136,7 +137,7 @@
   padding: 4px 8px;
   border-radius: var(--Border-1, 4px);
   transition: background 0.15s;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
 }
 .dp-nav__title:hover { background: var(--Gray-Gray-50, #f7f8fa); }
@@ -163,7 +164,7 @@
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-xs, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   border: none;
   cursor: pointer;
   background: transparent;
@@ -216,7 +217,7 @@
 .dp-month-cell {
   padding: 10px 4px;
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-regular, 400);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;
@@ -243,7 +244,7 @@
 .dp-year-cell {
   padding: 10px 4px;
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-regular, 400);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;

package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; position: relative; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 /* Label */
@@ -22,7 +23,7 @@
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   cursor: pointer;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: border-color 0.2s;
 }
 .dpr-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
@@ -82,7 +83,7 @@
   border: 1px solid transparent;
   padding: 6px 10px;
   font-size: 13px;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   cursor: pointer;
   text-align: left;
@@ -125,7 +126,7 @@
 .dp-month-cell {
   padding: 10px 4px;
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-regular, 400);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;
@@ -148,7 +149,7 @@
 .dp-year-cell {
   padding: 10px 4px;
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-regular, 400);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;
@@ -195,7 +196,7 @@
   cursor: pointer;
   padding: 4px 8px;
   border-radius: var(--Border-1, 4px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: background 0.15s;
 }
 .dp-nav__title:hover { background: var(--Gray-Gray-50, #f7f8fa); }
@@ -220,7 +221,7 @@
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-xs, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   border: none;
   cursor: pointer;
   background: transparent;

package/dist/collection/components/dropi-drawer/dropi-drawer.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:host { display: contents; font-family: 'Inter', sans-serif; }
+:host { display: contents; font-family: var(--font-family-01, 'Inter', sans-serif); font-family: var(--font-family-01, 'Inter', sans-serif); }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 .drawer-host {

package/dist/collection/components/dropi-dropdown/dropi-dropdown.css CHANGED Viewed

@@ -4,6 +4,7 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .dropdown {
   display: flex;

package/dist/collection/components/dropi-empty-state/dropi-empty-state.css CHANGED Viewed

@@ -3,6 +3,7 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .empty-state {
   display: flex;

package/dist/collection/components/dropi-favorite-button/dropi-favorite-button.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host { display: inline-flex; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .fav-btn {
   display: flex;

package/dist/collection/components/dropi-file-upload/dropi-file-upload.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

package/dist/collection/components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

package/dist/collection/components/dropi-icon/dropi-icon.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/dropi-ilustration-icon/dropi-ilustration-icon.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-flex;
 }

package/dist/collection/components/dropi-image-miniature/dropi-image-miniature.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:host { display: block; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 .miniature__label {

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:host { display: block; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .overlay {
   position: fixed;

package/dist/collection/components/dropi-input/dropi-input.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }
@@ -72,7 +73,7 @@
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   transition: border-color 0.3s ease-in-out;
   height: 40px;

package/dist/collection/components/dropi-languages-selector/dropi-languages-selector.css CHANGED Viewed

@@ -4,6 +4,7 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .custom-dropdown {
   position: relative;
@@ -17,7 +18,7 @@
 .selected-option {
   display: flex;
-  height: 38px;
+  height: 40px;
   padding: var(--Size-2, 8px) var(--Size-3, 12px);
   align-items: center;
   gap: var(--Size-2, 8px);

package/dist/collection/components/dropi-logo/dropi-logo.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }

package/dist/collection/components/dropi-lottie-loader/dropi-lottie-loader.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }

package/dist/collection/components/dropi-media-player/dropi-media-player.css CHANGED Viewed

@@ -4,6 +4,7 @@
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 .dropi-media-player {
   position: relative;
@@ -86,7 +87,7 @@
 }
 .dropi-media-player__timestamp {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: var(--font-size-xs, 12px);
   font-weight: var(--font-weight-medium, 500);
   color: var(--Neutral-White);
@@ -155,7 +156,7 @@
 }
 .dropi-media-player__btn--speed {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: var(--font-size-sm, 14px);
   font-weight: var(--font-weight-medium, 500);
   color: var(--Neutral-White);
@@ -189,7 +190,7 @@
   background: transparent;
   border: none;
   padding: 6px 10px;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: var(--font-size-s);
   font-weight: var(--font-weight-medium);
   color: var(--Neutral-White);