@geotab/zenith 3.14.0-beta.0 → 3.14.0-beta.1

package/dist/commonStyles/typography/typography.less

@@ -441,7 +441,7 @@
 }
 
 // Responsive overrides (mobile — max-width: 640px)
-@media (width <= 640px) {
+@media (max-width: 640px) {
     // Standard
     .zen-heading-xl-300 {
         .zen-font(@main-font-family, @heading-01-font-mobile-size, @heading-01-line-height, @weight: @heading-01-weight);
@@ -571,7 +571,7 @@
     .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-label-400-drive {
         .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
     }
@@ -619,7 +619,7 @@
     .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-body-l-400-drive {
         .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
     }
@@ -635,7 +635,7 @@
     .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-body-m-400-short-drive {
         .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
     }
@@ -651,7 +651,7 @@
     .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-body-m-400-tall-drive {
         .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
     }
@@ -667,7 +667,7 @@
     .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-body-s-700-drive {
         .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
     }
@@ -683,7 +683,7 @@
     .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-body-s-400-drive {
         .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
     }
@@ -699,7 +699,7 @@
     .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-body-s-400-italic-drive {
         .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
     }
@@ -716,7 +716,7 @@
     .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .heading-xl-300 {
         .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
     }
@@ -737,7 +737,7 @@
     .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .heading-m-300 {
         .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
     }
@@ -773,7 +773,7 @@
     .font(var(--main-font), 24px, 32px, @weight: 300);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-heading-xl-300-drive {
         .font(var(--main-font), 24px, 32px, @weight: 300);
     }
@@ -789,7 +789,7 @@
     .font(var(--main-font), 22px, 28px, @weight: 400);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-heading-l-400-drive {
         .font(var(--main-font), 22px, 28px, @weight: 400);
     }
@@ -805,7 +805,7 @@
     .font(var(--main-font), 18px, 24px, @weight: 300);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-heading-m-300-drive {
         .font(var(--main-font), 18px, 24px, @weight: 300);
     }
@@ -821,7 +821,7 @@
     .font(var(--main-font), 18px, 26px, @weight: 500);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-heading-m-500-drive {
         .font(var(--main-font), 18px, 26px, @weight: 500);
     }
@@ -837,7 +837,7 @@
     .font(var(--main-font), 16px, 20px, 0.16px, 500);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-heading-s-500-drive {
         .font(var(--main-font), 16px, 20px, 0.16px, 500);
     }
@@ -861,7 +861,7 @@
     .font(var(--main-font), 16px, 18px, 0.16px, 300);
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-heading-s-300-drive {
         .font(var(--main-font), 16px, 18px, 0.16px, 300);
     }
@@ -909,7 +909,7 @@
     .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-data-xl-drive {
         .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
     }
@@ -925,7 +925,7 @@
     .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-data-l-drive {
         .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
     }
@@ -941,7 +941,7 @@
     .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-data-m-drive {
         .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
     }
@@ -957,7 +957,7 @@
     .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
 }
 
-@media (width <= 640px) {
+@media (max-width: 640px) {
     .tablet-data-s-drive {
         .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
     }

package/dist/index.css

@@ -509,7 +509,7 @@ html:lang(ar) .zen-data-xs {
   text-transform: none;
   text-decoration: none;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-heading-xl-300 {
     font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
     font-size: 1.25rem;
@@ -758,7 +758,7 @@ html:lang(ar) .label-01-mobile-drive,
 html:lang(ar) .mobile-label-400-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-label-400-drive {
     font-family: var(--main-font);
     font-size: 14px;
@@ -893,7 +893,7 @@ html:lang(ar) .body-01-mobile-drive,
 html:lang(ar) .mobile-body-l-400-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-body-l-400-drive {
     font-family: var(--main-font);
     font-size: 18px;
@@ -938,7 +938,7 @@ html:lang(ar) .body-02-short-mobile-drive,
 html:lang(ar) .mobile-body-m-400-short-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-body-m-400-short-drive {
     font-family: var(--main-font);
     font-size: 16px;
@@ -983,7 +983,7 @@ html:lang(ar) .body-02-tall-mobile-drive,
 html:lang(ar) .mobile-body-m-400-tall-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-body-m-400-tall-drive {
     font-family: var(--main-font);
     font-size: 16px;
@@ -1028,7 +1028,7 @@ html:lang(ar) .body-03-mobile-drive,
 html:lang(ar) .mobile-body-s-700-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-body-s-700-drive {
     font-family: var(--main-font);
     font-size: 14px;
@@ -1073,7 +1073,7 @@ html:lang(ar) .body-04-mobile-drive,
 html:lang(ar) .mobile-body-s-400-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-body-s-400-drive {
     font-family: var(--main-font);
     font-size: 14px;
@@ -1118,7 +1118,7 @@ html:lang(ar) .body-05-mobile-drive,
 html:lang(ar) .mobile-body-s-400-italic-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-body-s-400-italic-drive {
     font-family: var(--main-font);
     font-size: 14px;
@@ -1163,7 +1163,7 @@ html:lang(ar) .heading-01-mobile,
 html:lang(ar) .heading-xl-300-mobile {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .heading-xl-300 {
     font-family: var(--main-font);
     font-size: 20px;
@@ -1223,7 +1223,7 @@ html:lang(ar) .heading-03-mobile,
 html:lang(ar) .heading-m-300-mobile {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .heading-m-300 {
     font-family: var(--main-font);
     font-size: 18px;
@@ -1326,7 +1326,7 @@ html:lang(ar) .heading-01-mobile-drive,
 html:lang(ar) .mobile-heading-xl-300-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-heading-xl-300-drive {
     font-family: var(--main-font);
     font-size: 24px;
@@ -1371,7 +1371,7 @@ html:lang(ar) .heading-02-mobile-drive,
 html:lang(ar) .mobile-heading-l-400-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-heading-l-400-drive {
     font-family: var(--main-font);
     font-size: 22px;
@@ -1416,7 +1416,7 @@ html:lang(ar) .heading-03-mobile-drive,
 html:lang(ar) .mobile-heading-m-300-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-heading-m-300-drive {
     font-family: var(--main-font);
     font-size: 18px;
@@ -1461,7 +1461,7 @@ html:lang(ar) .heading-04-mobile-drive,
 html:lang(ar) .mobile-heading-m-500-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-heading-m-500-drive {
     font-family: var(--main-font);
     font-size: 18px;
@@ -1506,7 +1506,7 @@ html:lang(ar) .heading-05-mobile-drive,
 html:lang(ar) .mobile-heading-s-500-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-heading-s-500-drive {
     font-family: var(--main-font);
     font-size: 16px;
@@ -1577,7 +1577,7 @@ html:lang(ar) .heading-07-mobile-drive,
 html:lang(ar) .mobile-heading-s-300-drive {
   font-family: var(--arabic-font-family);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-heading-s-300-drive {
     font-family: var(--main-font);
     font-size: 16px;
@@ -1712,7 +1712,7 @@ html:lang(ar) .data-01-mobile-drive,
 html:lang(ar) .mobile-data-xl-drive {
   font-family: var(--data-font-drive);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-data-xl-drive {
     font-family: var(--data-font-drive);
     font-size: 32px;
@@ -1757,7 +1757,7 @@ html:lang(ar) .data-02-mobile-drive,
 html:lang(ar) .mobile-data-l-drive {
   font-family: var(--data-font-drive);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-data-l-drive {
     font-family: var(--data-font-drive);
     font-size: 20px;
@@ -1802,7 +1802,7 @@ html:lang(ar) .data-03-mobile-drive,
 html:lang(ar) .mobile-data-m-drive {
   font-family: var(--data-font-drive);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-data-m-drive {
     font-family: var(--data-font-drive);
     font-size: 16px;
@@ -1847,7 +1847,7 @@ html:lang(ar) .data-04-mobile-drive,
 html:lang(ar) .mobile-data-s-drive {
   font-family: var(--data-font-drive);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .tablet-data-s-drive {
     font-family: var(--data-font-drive);
     font-size: 16px;
@@ -3522,7 +3522,7 @@ html:lang(ar) .zen-field-label__text {
   min-width: 0;
   max-width: unset;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-card-container {
     max-width: unset;
   }
@@ -4066,7 +4066,7 @@ html:lang(ar) .zen-popup {
   box-shadow: 0 2px 6px rgba(11, 32, 50, 0.2);
   border-radius: var(--border-radius-default);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-popup {
     max-width: 100%;
   }
@@ -4172,7 +4172,7 @@ html:lang(ar) .zen-side-panel {
 .zen-side-panel.zen-side-panel--bottom-positioned.zen-side-panel--shown {
   transform: translateY(0);
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-side-panel {
     width: 100%;
     min-width: 100%;
@@ -4705,7 +4705,7 @@ html:lang(ar) .zen-mobile-sheet__title {
   min-width: 32.5rem;
   inset-inline-start: calc(50% - (260 / 16rem));
 }
-@media (width <= 520px) {
+@media (max-width: 520px) {
   .zen-mobile-sheet-wrapper--drive.zen-mobile-sheet-wrapper--drive,
   .zen-mobile-sheet-wrapper--drive-tablet.zen-mobile-sheet-wrapper--drive-tablet {
     max-width: 100%;
@@ -6205,7 +6205,7 @@ html:lang(ar) .zen-empty-state__description {
   display: flex;
   gap: 0.75rem;
 }
-@media (width >= 641px) {
+@media (min-width: 641px) {
   .zen-data-grid-actions__post-actions {
     margin-inline-end: 1rem;
   }
@@ -11035,7 +11035,7 @@ html:lang(ar) .zen-calendar__day {
   text-transform: none;
   text-decoration: none;
 }
-@media (width <= 520px) {
+@media (max-width: 520px) {
   .zen-calendar .zen-calendar__year {
     max-width: calc(100% - 7.875rem);
   }
@@ -11059,7 +11059,7 @@ html:lang(ar) .zen-calendar__day {
   z-index: 11010;
   width: 100%;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-parallel-selection-popup {
     width: 100%;
   }
@@ -11244,7 +11244,7 @@ html:lang(ar) .zen-pie-legend__item-percentage {
   font-size: 1rem;
   line-height: 1.125rem;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-pie-legend--drive .zen-pie-legend__item-label,
   .zen-pie-legend--drive .zen-pie-legend__item-value,
   .zen-pie-legend--drive .zen-pie-legend__item-percentage {
@@ -11676,7 +11676,7 @@ html:lang(ar) .zen-legend__item-value {
   font-size: 1rem;
   line-height: 1.125rem;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-legend.zen-legend--drive .zen-legend-list__item-text {
     font-size: 0.875rem;
   }
@@ -11751,7 +11751,7 @@ html:lang(ar) .zen-chart-axis__value {
   flex-basis: 100%;
   justify-content: flex-end;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-chart-axis__item--wide {
     flex: 0 0 auto;
   }
@@ -12077,7 +12077,7 @@ html:lang(ar) .zen-date-input-inner__control-block {
   width: 76px;
   height: 160px;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-time-select {
     width: 100%;
   }
@@ -12117,7 +12117,7 @@ html:lang(ar) .zen-date-input-inner__control-block {
 .zen-time-picker__trigger.zen-form-field__input.zen-time-picker__trigger--full-width {
   width: 100%;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-time-picker__popup {
     width: 100%;
   }
@@ -12860,7 +12860,7 @@ html:lang(ar) .zen-waiting__spinner-text {
   max-width: 2.5rem;
   max-height: 2.5rem;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-waiting__spinner {
     max-width: 2.5rem;
     max-height: 2.5rem;
@@ -13124,7 +13124,7 @@ html:lang(ar) .zen-file-upload__file-name {
 .zen-file-upload__remove-button {
   flex-shrink: 0;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-file-upload--mobile .zen-file-upload__drop-zone-text {
     text-align: center;
   }
@@ -14439,7 +14439,7 @@ html:lang(ar) .zen-list-item__secondary {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-list-item__identifier {
     flex-direction: column;
     align-items: initial;
@@ -16505,7 +16505,7 @@ html:lang(ar) .zen-side-panel-filters__item-label--mobile {
   min-width: 22.5rem;
   max-width: 22.5rem;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-side-panel-filters.zen-side-panel-filters {
     width: 100%;
     max-width: 100%;
@@ -16865,7 +16865,7 @@ html:lang(ar) .zen-side-panel-filters-bar__title {
   min-width: 20rem;
   max-width: 20rem;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-side-panel-filters-bar.zen-side-panel-filters-bar {
     width: 100%;
     max-width: 100%;
@@ -16920,7 +16920,7 @@ html:lang(ar) .zen-form-layout-title {
   min-width: fit-content;
   max-width: fit-content;
 }
-@media (width >= 1025px) {
+@media (min-width: 1025px) {
   .zen-grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
@@ -17043,14 +17043,14 @@ html:lang(ar) .zen-form-layout-title {
     max-width: fit-content;
   }
 }
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .zen-grid {
     margin: 0 auto;
     max-width: 1440px;
     width: 100%;
   }
 }
-@media (width <= 1024px) {
+@media (max-width: 1024px) {
   .zen-grid {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
@@ -17143,7 +17143,7 @@ html:lang(ar) .zen-form-layout-title {
     max-width: fit-content;
   }
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-grid {
     margin: 0 0.75rem;
     grid-template-columns: repeat(4, 1fr);
@@ -17697,7 +17697,7 @@ html:lang(ar) .zen-mobile-filter-control__counter {
   font-size: 1rem;
   line-height: 1.125rem;
 }
-@media (width <= 640px) {
+@media (max-width: 640px) {
   .zen-legend-list.zen-legend-list--drive .zen-legend-list__item-text {
     font-size: 0.875rem;
   }
@@ -18577,7 +18577,7 @@ html:lang(ar) .zen-push__body {
   background-color: var(--accents-warning--detail);
   border-color: var(--accents-warning--detail);
 }
-@media (width <= 540px) {
+@media (max-width: 540px) {
   .zen-push {
     min-width: 9.375rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.14.0-beta.0",
+    "version": "3.14.0-beta.1",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",