@geotab/zenith 3.0.1-beta.4 → 3.1.0-beta.0

package/dist/index.css

@@ -1783,6 +1783,9 @@
 .zen-advanced-groups-filter.zen-advanced-groups-filter {
   width: 526px;
 }
+.zen-advanced-groups-filter-prioritized-modal {
+  z-index: 11011;
+}
 .zen-dropdown {
   box-sizing: border-box;
 }
@@ -3718,16 +3721,16 @@
   }
 }
 .zen-chip {
-  --chip-min-width-default: 32px;
+  --chip-min-width-default: 40px;
   --chip-max-width-default: 236px;
   --chip-border-radius: 8px;
   box-sizing: border-box;
   padding: 7px 8px;
   font-family: var(--main-font);
-  font-size: 14px;
+  font-size: 12px;
   font-style: normal;
   font-weight: 400;
-  letter-spacing: 0;
+  letter-spacing: 0.32px;
   line-height: 16px;
   text-transform: none;
   display: grid;
@@ -3876,11 +3879,11 @@
 .zen-chip.zen-chip--drive,
 .zen-chip.zen-chip--drive-tablet {
   font-family: var(--main-font);
-  font-size: 18px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 400;
   letter-spacing: 0;
-  line-height: 22px;
+  line-height: 30px;
   text-transform: none;
 }
 .zen-chip.zen-chip--drive .zen-chip__quantity,
@@ -3896,20 +3899,20 @@
 }
 .zen-chip.zen-chip--drive-tablet .zen-chip__quantity {
   font-family: var(--main-font);
-  font-size: 16px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 22px;
+  letter-spacing: 0;
+  line-height: 30px;
   text-transform: none;
 }
 .zen-chip.zen-chip--drive .zen-chip__quantity {
   font-family: var(--main-font);
-  font-size: 16px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 22px;
+  letter-spacing: 0;
+  line-height: 30px;
   text-transform: none;
 }
 .zen-chip-content {
@@ -4027,6 +4030,9 @@
 .zen-advanced-groups-filter-form__popup.zen-advanced-groups-filter-form__popup {
   z-index: 11001;
 }
+.zen-advanced-groups-filter-form__mobile-sheet-stacking {
+  z-index: 11012;
+}
 .zen-group-button {
   box-sizing: border-box;
   font-family: var(--main-font);
@@ -8848,6 +8854,15 @@ button.zen-summary__clickable {
 .zen-radio-group__item--no-paddings {
   padding: 0;
 }
+.zen-radio-group__item--small {
+  padding: 4px 0;
+}
+.zen-radio-group__item--small.zen-radio-group__item--no-paddings {
+  padding: 0;
+}
+.zen-radio-group__item--small.zen-radio-group__item--no-paddings .zen-radio__label--input-wrapper {
+  padding: 4px;
+}
 .zen-radio-group--horizontal .zen-radio-group__wrapper {
   flex-direction: row;
 }
@@ -9320,17 +9335,36 @@ button.zen-summary__clickable {
   align-items: center;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
   border-radius: var(--border-radius-default);
+  border: var(--border-width-default) solid var(--borders-general);
+  background-color: var(--backgrounds-main);
+}
+.zen-filters__main-row:hover {
+  background-color: var(--backgrounds-content-0);
+}
+.zen-filters__main-row:hover .zen-search-input__input {
+  background-color: var(--backgrounds-content-0);
+}
+.zen-filters__main-row--initial {
+  view-transition-name: expand-panel;
 }
 .zen-filters__select-trigger {
   width: auto;
   flex-shrink: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border-right: none;
+  padding: 7px 8px;
+  border: var(--border-width-default) solid transparent;
+  border-right: var(--border-width-default) solid var(--borders-general);
+}
+.zen-filters__select-trigger:hover {
+  background-color: var(--backgrounds-content-0);
+  border: var(--border-width-default) solid transparent;
+  border-right: var(--border-width-default) solid var(--borders-general);
 }
 .zen-filters__select-trigger:focus-visible {
   outline: none;
-  border: 1px solid var(--borders-form-field--active);
+  border: var(--border-width-default) solid var(--borders-form-field--active);
+  background-color: var(--backgrounds-content-0);
 }
 .zen-filters__select-trigger-icon {
   flex-shrink: 0;
@@ -9348,6 +9382,9 @@ button.zen-summary__clickable {
   flex-grow: 1;
 }
 .zen-filters__search .zen-search-input__input {
+  border: none;
+  padding-right: 1px;
+  padding-left: 0;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -9355,6 +9392,7 @@ button.zen-summary__clickable {
   box-sizing: border-box;
   width: 640px;
   max-width: 640px;
+  view-transition-name: expand-panel;
 }
 .zen-filters-popup.zen-filters-popup * {
   box-sizing: border-box;
@@ -9394,6 +9432,33 @@ button.zen-summary__clickable {
 .zen-filters-container__removal-chip.zen-chip--accent .zen-chip__icon {
   border: 1px solid var(--accents-general--main);
 }
+.zen-filters-container.zen-filters-container--mobile {
+  padding: 0;
+}
+.zen-filters-container__mobile-scroll-wrapper {
+  padding: 2px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  overflow: auto;
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+.zen-filters-container__mobile-scroll-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.zen-filters-container__mobile-scroll-wrapper > * {
+  flex-shrink: 0;
+}
+::view-transition-group(expand-panel) {
+  animation-duration: 0.15s;
+  animation-timing-function: ease-out;
+}
 .zen-page-header {
   box-sizing: border-box;
   display: flex;
@@ -9729,6 +9794,21 @@ button.zen-summary__clickable {
   display: flex;
   align-items: center;
 }
+.zen-tab-item__content-quantity {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  background-color: var(--action-primary--default);
+  color: var(--text-reverse-primary);
+  min-width: 16px;
+  border-radius: 16px;
+  padding: 0px 4px;
+  margin-left: 8px;
+}
 .zen-tab-item__content-icon {
   display: flex;
   align-items: center;
@@ -10241,6 +10321,10 @@ button.zen-summary__clickable {
 .zen-groups-filter-menu__select-filters {
   color: var(--text-primary);
 }
+.zen-groups-filter-menu--mobile {
+  max-width: 100%;
+  min-width: 100%;
+}
 .zen-groups-filter {
   box-sizing: border-box;
   display: flex;
@@ -11732,13 +11816,16 @@ button.zen-summary__clickable {
   justify-content: center;
 }
 .zen-filters-search-list {
-  padding: 16px 8px;
+  padding: 16px 0px;
+  border-top: var(--border-width-default) solid var(--borders-general);
+  max-height: 340px;
+  min-height: 340px;
 }
 .zen-filters-search-list__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
+  margin: 0 8px 8px;
 }
 .zen-filters-search-list__header-title {
   font-family: var(--main-font);
@@ -11780,6 +11867,19 @@ button.zen-summary__clickable {
   row-gap: 4px;
   border: 1px solid var(--backgrounds-main);
 }
+.zen-search-item-data__icon {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background-color: var(--accents-general--main);
+  color: var(--text-secondary);
+  fill: var(--text-secondary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .zen-search-item-data:hover {
   background-color: var(--backgrounds-content-1);
   outline: none;
@@ -11787,6 +11887,7 @@ button.zen-summary__clickable {
 }
 .zen-search-item-data:focus-visible {
   outline: none;
+  border-radius: var(--border-radius-default);
   border-color: var(--borders-form-field--active);
 }
 .zen-search-item-data--clickable {
@@ -11794,25 +11895,34 @@ button.zen-summary__clickable {
 }
 .zen-search-item-data--active {
   background-color: var(--accents-general--main);
+  border-color: var(--accents-general--main);
+  position: relative;
+}
+.zen-search-item-data--active .zen-search-item-data__icon {
+  background-color: var(--action-primary--active);
+  color: var(--text-reverse-primary);
+  fill: var(--text-reverse-primary);
 }
 .zen-search-item-data--active:hover {
   background-color: var(--backgrounds-content-1);
+  border-color: var(--backgrounds-content-1);
 }
-.zen-search-item-data--active:focus-visible {
-  border: 1px solid var(--borders-form-field--active);
-}
-.zen-search-item-data__icon {
-  flex: 0 0 auto;
-  width: 24px;
-  height: 24px;
-  padding: 4px;
-  background-color: var(--accents-general--main);
-  color: var(--text-secondary);
-  fill: var(--text-secondary);
-  border-radius: 50%;
+.zen-search-item-data--active:hover::after {
   display: flex;
+  position: absolute;
   align-items: center;
   justify-content: center;
+  content: '\00d7';
+  top: 0;
+  right: 8px;
+  width: 20px;
+  height: 100%;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1;
+}
+.zen-search-item-data--active:focus-visible {
+  border: 1px solid var(--borders-form-field--active);
 }
 .zen-search-item-data__main {
   flex: 1 1 auto;
@@ -11939,7 +12049,7 @@ button.zen-summary__clickable {
   height: 30px;
 }
 .zen-filters-saved-popup__content {
-  margin: 0 1px;
+  margin: 1px;
   font-family: var(--main-font);
   font-size: 14px;
   font-style: normal;
@@ -12036,54 +12146,67 @@ button.zen-summary__clickable {
   height: 60px;
   padding: 10px;
 }
-.zen-filters-modal--secondary {
-  z-index: 10999;
+.zen-filters-modal__content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
 }
-.zen-filters-modal__item {
-  width: 304px;
+.zen-filters-prioritized-modal {
+  z-index: 11011;
 }
-.zen-filters-modal__item-element.zen-filters-modal__item-element {
-  width: 100%;
-  max-width: 304px;
+.zen-filters-search {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  max-width: 100%;
+  flex-grow: 1;
+  margin: 0 12px;
 }
-.zen-filters-modal__item-element.zen-filters-modal__item-element--centred {
-  justify-content: center;
+.zen-filters-search__selected {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-left: 8px;
+  overflow: hidden;
 }
-.zen-filters-modal__item-element.zen-filters-modal__item-element--centred .zen-caption__content {
-  margin: 0;
+.zen-filters-search__selected-item {
+  max-width: 181px;
 }
-.zen-filters-modal__item-label {
-  margin-bottom: 4px;
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
+.zen-filters-search__selected-item--more {
+  flex-shrink: 0;
 }
-.zen-filters-modal__save-button-content {
+.zen-side-panel-filters__dropdown-item-chips-container {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 }
-.zen-filters-modal__content {
+.zen-side-panel-filters__date-popup--full-width.zen-side-panel-filters__date-popup--full-width {
+  width: 328px;
+}
+.zen-side-panel-filters {
+  box-sizing: border-box;
+  border-radius: var(--border-radius-default);
+}
+.zen-side-panel-filters * {
+  box-sizing: border-box;
+}
+.zen-side-panel-filters__header {
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  justify-content: space-between;
+  align-items: center;
+  height: 64px;
   padding: 16px;
 }
-.zen-filters-modal__item-popup {
-  z-index: 11002;
-}
-.zen-filters-modal__header-buttons {
+.zen-side-panel-filters__header-buttons {
   display: flex;
-  margin-right: 40px;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
   justify-content: flex-end;
 }
-.zen-filters-modal__header-button {
+.zen-side-panel-filters__header-button {
   cursor: pointer;
   border: none;
   padding: 8px;
@@ -12091,37 +12214,217 @@ button.zen-summary__clickable {
   align-items: center;
   justify-content: center;
 }
-.zen-filters-modal__header-button:hover {
+.zen-side-panel-filters__header-button:hover {
   border: none;
 }
-.zen-filters-modal__header-button--active {
+.zen-side-panel-filters__header-button--active {
   color: var(--text-reverse-primary);
   fill: var(--text-reverse-primary);
   border-color: var(--action-primary--active);
   background-color: var(--action-primary--active);
 }
-.zen-filters-modal__header-button--active:hover {
+.zen-side-panel-filters__header-button--active:hover {
   color: var(--text-reverse-primary);
   fill: var(--text-reverse-primary);
   border-color: var(--accents-general--detail);
   background-color: var(--action-primary--active);
 }
-.zen-filters-search {
+.zen-side-panel-filters__title-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 16px;
+}
+.zen-side-panel-filters__title {
+  padding: 8px 0;
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-primary);
+}
+.zen-side-panel-filters__close-button {
+  fill: var(--text-primary);
+}
+.zen-side-panel-filters__content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+.zen-side-panel-filters__item {
+  max-width: 100%;
+  width: 328px;
+}
+.zen-side-panel-filters__item-popup {
+  z-index: 11002;
+}
+.zen-side-panel-filters__dropdown-skeleton {
+  gap: 8px;
+  padding: 0;
+}
+.zen-side-panel-filters__item-element.zen-side-panel-filters__item-element {
+  width: 100%;
+}
+.zen-side-panel-filters__item-element.zen-side-panel-filters__item-element--centred {
+  justify-content: center;
+}
+.zen-side-panel-filters__item-element.zen-side-panel-filters__item-element--centred .zen-caption__content {
+  margin: 0;
+}
+.zen-side-panel-filters__item-label {
+  margin-bottom: 4px;
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+}
+.zen-side-panel-filters__tab-header {
+  padding: 0 16px;
+}
+.zen-side-panel-filters__tab-header .zen-side-panel-filters__tab-header {
+  padding: 0;
+}
+.zen-side-panel-filters__tab-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.zen-side-panel-filters__tab-content--hidden {
+  display: none;
+}
+.zen-side-panel-filters__tab-content--active {
+  display: flex;
+}
+.zen-side-panel-filters__apply-button--desktop {
+  margin-inline-start: 16px;
+}
+.zen-side-panel-filters__footer {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--borders-general);
+  padding: 14px 28px;
+  height: auto;
+  flex: 0 0 auto;
+}
+.zen-side-panel-filters__footer--mobile {
+  padding: 0;
+  display: block;
+}
+.zen-side-panel-filters__footer--long-text {
+  padding: 14px 16px;
+}
+.zen-side-panel-filters__footer--long-text .zen-side-panel-filters__apply-button--desktop {
+  margin-inline-start: 8px;
+}
+.zen-side-panel-filters-wrapper {
   position: relative;
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: hidden;
 }
-.zen-filters-search__selected {
-  position: absolute;
-  right: 32px;
+.zen-side-panel-filters.zen-side-panel-filters {
+  min-width: 360px;
+  max-width: 360px;
+}
+@media (max-width: 640px) {
+  .zen-side-panel-filters.zen-side-panel-filters {
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+  }
+}
+.zen-filters-empty-selected-list {
+  box-sizing: border-box;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  text-align: center;
+  gap: 16px;
+  grid-auto-flow: row;
   height: 100%;
-  top: 0;
+  width: 100%;
+  padding: 8px;
+}
+.zen-filters-empty-selected-list * {
+  box-sizing: border-box;
+}
+.zen-filters-empty-selected-list__image {
+  width: 200px;
+  height: 112px;
+  align-self: center;
+  justify-self: center;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+.zen-filters-empty-selected-list__text {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 28px;
+  text-transform: none;
+}
+.zen-filters-select {
+  border-top: var(--border-width-default) solid var(--borders-general);
+  padding-top: 1px;
+}
+.zen-filters-select__list-item-title {
+  padding: 8px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+  gap: 8px;
+}
+.zen-filters-select__item-active-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--action-primary--default);
   margin-left: 8px;
-  overflow: hidden;
+}
+.zen-filters-select__item-button {
+  width: 32px;
+  height: 32px;
+}
+.zen-filters-select__item-button:hover {
+  background-color: var(--backgrounds-hover);
+  color: var(--accents-general--detail);
+  border-color: var(--backgrounds-hover);
+}
+.zen-filters-select__item-icon {
+  fill: var(--action-secondary--default);
+  margin-left: auto;
+}
+.zen-filters-select__item-icon.zen-filters-select__item-icon--rotated {
+  transform: rotate(180deg);
+}
+.zen-filters-select__list-item-wrapper {
+  padding: 1px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.zen-filters-select__list-item-wrapper--expanded {
+  background-color: var(--backgrounds-content-1);
+  color: var(--accents-general--detail);
+  border-color: var(--backgrounds-content-1);
+}
+.zen-filters-select__list-item-wrapper.zen-filters-select__list-item-wrapper--active {
+  background-color: var(--accents-general--main);
+  color: var(--accents-general--detail);
+  border-color: var(--accents-general--main);
 }
 .zen-filters-select__list-item {
   width: 100%;
@@ -12129,24 +12432,46 @@ button.zen-summary__clickable {
   height: 32px;
   align-items: center;
   justify-content: space-between;
-  padding: 4px 8px 4px 12px;
   background-color: transparent;
-  border: none;
+  border: 1px solid transparent;
+  padding-inline: 0px;
+  border-radius: var(--border-radius-default);
   cursor: pointer;
+  color: var(--text-primary);
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
 }
-.zen-filters-select__list-item--active,
-.zen-filters-select__list-item:hover {
-  background-color: var(--accents-general--main);
+.zen-filters-select__list-item:focus-visible {
+  outline: none;
+  border-color: var(--borders-form-field--active);
 }
 .zen-filters-select__list-item.zen-filters-select__sub-item {
-  padding-left: 24px;
+  padding: 8px;
+  background-color: var(--backgrounds-content-1);
+  color: var(--accents-general--detail);
+  border-color: var(--backgrounds-content-1);
 }
-.zen-filters-select__list-item .zen-filters-select__item-icon {
-  fill: var(--action-secondary--default);
-  margin-left: auto;
+.zen-filters-select__list-item.zen-filters-select__list-item--active {
+  background-color: var(--accents-general--main);
+  color: var(--accents-general--detail);
+  border-color: var(--accents-general--main);
 }
-.zen-filters-select__list-item .zen-filters-select__item-icon.zen-filters-select__item-icon--rotated {
-  transform: rotate(180deg);
+.zen-filters-select__list-item--not-expandable {
+  padding: 8px;
+}
+.zen-filters-select__list-item:hover {
+  background-color: var(--backgrounds-hover);
+  color: var(--accents-general--detail);
+  border-color: var(--backgrounds-hover);
+}
+.zen-filters-select__list-item:focus-visible {
+  outline: none;
+  border-color: var(--borders-form-field--active);
 }
 .zen-filters-select__item-content--hidden {
   display: none;
@@ -13133,7 +13458,6 @@ button.zen-summary__clickable {
 .zen-page-header-component {
   box-sizing: border-box;
   width: 100%;
-  height: 128px;
   padding: 16px 24px;
   background-color: transparent;
   display: flex;