@geotab/zenith 3.2.1 → 3.3.0-beta.0

package/dist/index.css

@@ -104,6 +104,14 @@
   --duty-status-rest: #FE6867;
   --duty-status-drive: #49C649;
   --duty-status-exemption: #4E677E;
+  --data--categorical-light-blue: #3CCDE5;
+  --data--categorical-blue: #428AFF;
+  --data--categorical-purple: #8256E5;
+  --data--categorical-green: #06C989;
+  --data--categorical-orange: #F98C41;
+  --data--categorical-yellow: #F5BD60;
+  --data--categorical-red: #E56A6A;
+  --data--categorical-grey: #8A94A2;
 }
 .zen-dark {
   --text-primary: #FFFFFF;
@@ -2255,6 +2263,10 @@
   min-height: unset;
   align-self: flex-start;
 }
+.zen-card-container.zen-card-container--no-width-constraint {
+  min-width: 0;
+  max-width: unset;
+}
 @media (max-width: 640px) {
   .zen-card-container {
     max-width: unset;
@@ -2418,16 +2430,18 @@
 .zen-shield-faded--visible {
   opacity: 0.1;
 }
-.mobile-sheet-footer {
+.zen-mobile-sheet-footer {
   box-sizing: border-box;
   border-top: 1px solid var(--borders-general);
   display: grid;
-  padding: 12px;
   gap: 12px;
 }
-.mobile-sheet-footer * {
+.zen-mobile-sheet-footer * {
   box-sizing: border-box;
 }
+.zen-mobile-sheet-footer--borderless {
+  border-top-width: 0;
+}
 .zen-mobile-sheet-wrapper {
   z-index: 11010;
 }
@@ -2514,6 +2528,9 @@
   overflow-y: hidden;
   position: fixed;
 }
+.zen-mobile-sheet__footer {
+  flex: 0 0 auto;
+}
 .zen-mobile-sheet-wrapper--drive.zen-mobile-sheet-wrapper--drive,
 .zen-mobile-sheet-wrapper--drive-tablet.zen-mobile-sheet-wrapper--drive-tablet {
   max-width: 520px;
@@ -2740,32 +2757,13 @@
   background-color: var(--backgrounds-content-1);
   fill: var(--text-secondary);
 }
-.zen-card-title__text {
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.16px;
-  line-height: 16px;
-  text-transform: none;
-  max-width: 520px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: start;
-  color: var(--text-primary);
-}
 .zen-card-title__link {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 1 auto;
   gap: 4px;
   text-decoration: none;
   min-width: 0;
 }
+.zen-card-title__text,
 .zen-card-title__link-text {
   font-family: var(--main-font);
   font-size: 14px;
@@ -2774,18 +2772,22 @@
   letter-spacing: 0.16px;
   line-height: 16px;
   text-transform: none;
-  color: var(--text-primary);
-  flex: 1 1 auto;
-  text-overflow: ellipsis;
+  max-width: 520px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   overflow: hidden;
-  white-space: nowrap;
-  min-width: 0;
+  text-overflow: ellipsis;
+  text-align: start;
+  color: var(--text-primary);
 }
 .zen-card-title__link-chevron {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
   width: 16px;
   height: 16px;
   fill: var(--text-primary);
-  flex: 0 0 auto;
 }
 .zen-card-title__clickable {
   gap: 4px;
@@ -3370,6 +3372,9 @@
   position: sticky;
   right: 0;
 }
+.zen-data-grid__row:hover > .zen-data-grid__row-cell--active {
+  background-color: var(--backgrounds-content-2);
+}
 .zen-data-grid__row--selected > .zen-data-grid__row-cell {
   background-color: var(--backgrounds-content-0);
 }
@@ -3415,6 +3420,9 @@
 .zen-data-grid__row-cell--clickable {
   cursor: pointer;
 }
+.zen-data-grid__row-cell--active {
+  background-color: var(--backgrounds-content-2);
+}
 .zen-data-grid__empty {
   flex: 1 1 auto;
 }
@@ -4546,6 +4554,183 @@
   line-height: 16px;
   text-transform: none;
 }
+.zen-table__detail-panel--header {
+  background-color: var(--backgrounds-main);
+  border-bottom: 1px solid var(--borders-general);
+  position: sticky;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+.zen-table__detail-panel--header-content,
+.zen-table__detail-panel--header-description {
+  box-sizing: border-box;
+  gap: 8px;
+  display: flex;
+  width: 100%;
+}
+.zen-table__detail-panel--header-content {
+  justify-content: space-between;
+  justify-items: center;
+  align-items: center;
+}
+.zen-table__detail-panel--header-description {
+  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);
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.zen-table__detail-panel--header-description * {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+}
+.zen-table__detail-panel--header-title {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  color: var(--text-primary);
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.zen-table__detail-panel--header-details {
+  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);
+  display: flex;
+  gap: 8px;
+  flex: 1 1 auto;
+}
+.zen-table__detail-panel--header-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.zen-table-detail-panel__header * {
+  box-sizing: border-box;
+}
+.zen-table__detail-panel-mobile .zen-table__detail-panel--header {
+  padding: 0;
+  border-bottom: none;
+}
+.zen-table__detail-panel-mobile .zen-mobile-sheet__title {
+  border-bottom: 1px solid var(--borders-general);
+}
+.zen-table__detail-panel {
+  position: relative;
+  width: 360px;
+  max-width: 600px;
+  height: 100%;
+  min-height: 400px;
+  max-height: 1920px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  flex: 0 0 0;
+  transform: translateX(20px);
+  will-change: opacity, transform, flex-basis;
+  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.zen-table__detail-panel--shown {
+  opacity: 1;
+  flex: 0 0 360px;
+  transform: translateX(0);
+}
+@container table-content (max-width: 600px) {
+  .zen-table__detail-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    transform: translateX(100%);
+    overflow-y: hidden;
+    will-change: opacity, transform;
+    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .zen-table__detail-panel--shown {
+    opacity: 1;
+    transform: translateX(0);
+    overflow-y: auto;
+  }
+}
+.zen-table__detail-panel-content {
+  overflow-y: auto;
+  flex: 1;
+  padding: 12px;
+}
+.zen-table__detail-panel-footer {
+  padding: 12px;
+}
+.zen-table__detail-panel .zen-page-header__page-name {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+}
+.zen-table__detail-panel-footer {
+  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);
+  background-color: var(--backgrounds-main);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  position: sticky;
+  bottom: 0;
+}
+.zen-table__detail-panel.zen-card-container {
+  padding: 0;
+  width: 360px;
+}
+@container table-content (max-width: 600px) {
+  .zen-table__detail-panel.zen-card-container.zen-table__detail-panel--shown {
+    max-width: min(100%, 600px);
+  }
+}
+.zen-table__detail-panel-mobile {
+  max-height: 90%;
+}
 :root {
   --grid-header-height: 52px;
 }
@@ -4584,6 +4769,24 @@
 .zen-table-wrapper--with-toolbar .zen-data-grid-wrapper {
   height: calc(100% - 48px);
 }
+.zen-table__content {
+  height: 100%;
+  position: relative;
+  display: flex;
+  gap: 12px;
+  container-type: inline-size;
+  container-name: table-content;
+}
+.zen-table__table {
+  height: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
+  transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.pie-chart-1 {
+  width: 100%;
+  height: 200px;
+}
 .zen-action-link-column {
   display: flex;
   align-items: center;
@@ -5427,7 +5630,7 @@
 }
 .zen-pill-actionable--keyboard-nav.zen-pill-actionable--default {
   outline: 1px solid var(--borders-form-field--active);
-  outline-offset: 4px;
+  outline-offset: 2px;
 }
 .zen-pill-actionable--active {
   background-color: var(--action-primary--default);
@@ -5435,6 +5638,10 @@
   color: var(--text-reverse-primary);
   fill: var(--text-reverse-primary);
 }
+.zen-pill-actionable--active.zen-pill-actionable--keyboard-nav {
+  outline: 1px solid var(--borders-form-field--active);
+  outline-offset: 2px;
+}
 .zen-pill-actionable--readonly {
   color: var(--text-secondary);
   background-color: var(--backgrounds-content-0);
@@ -5568,224 +5775,41 @@
   align-items: center;
   gap: 4px;
 }
-.zen-form-list-label {
-  max-height: 32px;
-  display: flex;
-  align-items: center;
-}
-.zen-form-control {
-  align-items: start;
-}
-.zen-form-group-list-label {
-  font-style: italic;
-}
-.zen-divider {
-  width: 100%;
-  border-top: 1px solid var(--borders-general);
-}
-.zen-additional-sub-section__secondary {
-  margin: 16px 0;
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-secondary);
-}
-.zen-additional-sub-section__content {
-  padding: 16px;
-}
-.zen-additional-sub-section .zen-accordion__content {
-  padding: 0;
-}
-.zen-form-section-default-title {
-  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-form-section-card-content {
-  display: grid;
-  gap: 16px;
-}
-.zen-form-section-error-banner {
-  height: fit-content;
-}
-.zen-form-layout-title {
-  font-family: var(--main-font);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-}
-.zen-modal {
-  box-sizing: border-box;
-  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.zen-modal * {
-  box-sizing: border-box;
-}
-.zen-modal__shield {
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 11000;
-  background-color: var(--backgrounds-hover);
-  opacity: 0.5;
-}
-.zen-modal__shield * {
-  box-sizing: border-box;
-}
-.zen-modal-content {
-  box-sizing: border-box;
-  z-index: 11001;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--backgrounds-main);
-  color: var(--text-primary);
-  padding: 0;
-  box-shadow: 0px 2px 6px rgba(11, 32, 50, 0.2);
-  max-height: 90vh;
-  border-radius: 4px;
-  overflow: hidden;
-}
-.zen-modal-content * {
-  box-sizing: border-box;
-}
-.zen-modal-content--hidden-overflow.zen-modal-content--hidden-overflow {
-  overflow-y: hidden;
-}
-.zen-modal-content__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: nowrap;
-  padding: 24px 24px 16px 24px;
-  min-height: 72px;
-}
-.zen-modal-content__header-title {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-grow: 2;
-}
-.zen-modal-content__header-close-button.zen-modal-content__header-close-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  align-self: flex-start;
-  border-radius: 50%;
-  padding: 8px;
-}
-.zen-modal-content__body {
-  overflow: auto;
-  padding: 12px 24px 32px 24px;
-}
-.zen-modal-content__body--no-footer {
-  padding-bottom: 16px;
-}
-.zen-modal-content__footer {
-  display: flex;
-  justify-content: space-between;
-  padding: 16px 24px;
-  min-height: 59px;
-  background-color: var(--backgrounds-content-0);
-}
-.zen-modal-content__footer--mobile {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 8px;
-}
-.zen-modal-content__footer--mobile .zen-modal-content__icon-button {
-  justify-content: center;
-}
-.zen-modal-content__footer--mobile .zen-modal-content__icon-button .zen-caption__content {
-  margin-right: 0;
-}
-.zen-modal-content__footer-left {
-  display: flex;
-  align-items: center;
-}
-.zen-modal-content__footer-left--mobile {
-  display: block;
-  align-items: unset;
-}
-.zen-modal-content__footer-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.zen-modal-content__footer-right--mobile {
-  display: flex;
-  align-items: unset;
-  flex-direction: column;
-  gap: 8px;
-}
-.zen-modal-content__left-button {
-  width: 100%;
-}
-.zen-modal-content__icon {
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
-  padding: 4px;
-  border-radius: 99px;
-}
-.zen-modal-content__icon--default {
-  fill: var(--action-secondary--default);
-  color: var(--action-secondary--default);
-}
-.zen-modal-content__icon--info {
-  fill: var(--accents-general--detail);
-  color: var(--accents-general--detail);
-  background-color: var(--accents-general--main);
+.zen-form-list-label {
+  max-height: 32px;
+  display: flex;
+  align-items: center;
 }
-.zen-modal-content__icon--warning {
-  fill: var(--accents-warning--detail);
-  color: var(--accents-warning--detail);
-  background-color: var(--accents-warning--main);
+.zen-form-control {
+  align-items: start;
 }
-.zen-modal-content__icon--success {
-  fill: var(--accents-success--detail);
-  color: var(--accents-success--detail);
-  background-color: var(--accents-success--main);
+.zen-form-group-list-label {
+  font-style: italic;
 }
-.zen-modal-content__icon--error {
-  fill: var(--accents-error--detail);
-  color: var(--accents-error--detail);
-  background-color: var(--accents-error--main);
+.zen-divider {
+  height: 1px;
+  width: 100%;
+  border: none;
+  background-color: var(--borders-general);
+  margin: 0;
+  padding: 0;
 }
-.zen-modal-content--small {
-  max-width: 400px;
+.zen-additional-sub-section__secondary {
+  margin: 16px 0;
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-secondary);
 }
-.zen-modal-content--normal {
-  max-width: 600px;
+.zen-additional-sub-section__content {
+  padding: 16px;
+}
+.zen-additional-sub-section .zen-accordion__content {
+  padding: 0;
 }
 .zen-form-field {
   box-sizing: border-box;
@@ -7320,6 +7344,9 @@
 .zen-footer-buttons {
   box-sizing: border-box;
   display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
 }
 .zen-footer-buttons * {
   box-sizing: border-box;
@@ -7327,13 +7354,6 @@
 .zen-footer-buttons .zen-footer-buttons__item {
   flex-grow: 1;
   padding: 11px 8px;
-  border-radius: 0;
-}
-.zen-footer-buttons .zen-footer-buttons__item--separate {
-  margin-bottom: 8px;
-}
-.zen-footer-buttons--stacked {
-  flex-direction: column;
 }
 .zen-footer-buttons--sticky {
   position: fixed;
@@ -7346,9 +7366,6 @@
   z-index: 11005;
   background-color: var(--backgrounds-main);
 }
-.zen-footer-buttons--indented {
-  padding: 12px;
-}
 .zen-footer-buttons.zen-footer-buttons--drive .zen-footer-buttons__item,
 .zen-footer-buttons.zen-footer-buttons--drive-tablet .zen-footer-buttons__item {
   padding: 15px 12px;
@@ -7625,6 +7642,167 @@
   line-height: 28px;
   text-transform: none;
 }
+.zen-modal {
+  box-sizing: border-box;
+  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.zen-modal * {
+  box-sizing: border-box;
+}
+.zen-modal__shield {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 11000;
+  background-color: var(--backgrounds-hover);
+  opacity: 0.5;
+}
+.zen-modal__shield * {
+  box-sizing: border-box;
+}
+.zen-modal-content {
+  box-sizing: border-box;
+  z-index: 11001;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--backgrounds-main);
+  color: var(--text-primary);
+  padding: 0;
+  box-shadow: 0px 2px 6px rgba(11, 32, 50, 0.2);
+  max-height: 90vh;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.zen-modal-content * {
+  box-sizing: border-box;
+}
+.zen-modal-content--hidden-overflow.zen-modal-content--hidden-overflow {
+  overflow-y: hidden;
+}
+.zen-modal-content__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  padding: 24px 24px 16px 24px;
+  min-height: 72px;
+}
+.zen-modal-content__header-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-grow: 2;
+}
+.zen-modal-content__header-close-button.zen-modal-content__header-close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  align-self: flex-start;
+  border-radius: 50%;
+  padding: 8px;
+}
+.zen-modal-content__body {
+  overflow: auto;
+  padding: 12px 24px 32px 24px;
+}
+.zen-modal-content__body--no-footer {
+  padding-bottom: 16px;
+}
+.zen-modal-content__footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 24px;
+  min-height: 59px;
+  background-color: var(--backgrounds-content-0);
+}
+.zen-modal-content__footer--mobile {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+}
+.zen-modal-content__footer--mobile .zen-modal-content__icon-button {
+  justify-content: center;
+}
+.zen-modal-content__footer--mobile .zen-modal-content__icon-button .zen-caption__content {
+  margin-right: 0;
+}
+.zen-modal-content__footer-left {
+  display: flex;
+  align-items: center;
+}
+.zen-modal-content__footer-left--mobile {
+  display: block;
+  align-items: unset;
+}
+.zen-modal-content__footer-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.zen-modal-content__footer-right--mobile {
+  display: flex;
+  align-items: unset;
+  flex-direction: column;
+  gap: 8px;
+}
+.zen-modal-content__left-button {
+  width: 100%;
+}
+.zen-modal-content__icon {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+  padding: 4px;
+  border-radius: 99px;
+}
+.zen-modal-content__icon--default {
+  fill: var(--action-secondary--default);
+  color: var(--action-secondary--default);
+}
+.zen-modal-content__icon--info {
+  fill: var(--accents-general--detail);
+  color: var(--accents-general--detail);
+  background-color: var(--accents-general--main);
+}
+.zen-modal-content__icon--warning {
+  fill: var(--accents-warning--detail);
+  color: var(--accents-warning--detail);
+  background-color: var(--accents-warning--main);
+}
+.zen-modal-content__icon--success {
+  fill: var(--accents-success--detail);
+  color: var(--accents-success--detail);
+  background-color: var(--accents-success--main);
+}
+.zen-modal-content__icon--error {
+  fill: var(--accents-error--detail);
+  color: var(--accents-error--detail);
+  background-color: var(--accents-error--main);
+}
+.zen-modal-content--small {
+  max-width: 400px;
+}
+.zen-modal-content--normal {
+  max-width: 600px;
+}
 .zen-toast {
   box-sizing: border-box;
   display: grid;
@@ -7983,6 +8161,7 @@
   align-items: center;
   gap: 8px;
   position: relative;
+  cursor: pointer;
 }
 .zen-status-pill__pill-container:hover .zen-status-pill__container--default {
   border-color: var(--action-secondary--default);
@@ -10978,6 +11157,11 @@ button.zen-summary__clickable {
 .zen-groups-filter-menu__reset-button {
   margin-left: 8px;
 }
+.zen-groups-filter-menu__mobile-sheet .zen-groups-filter-menu__reset-button,
+.zen-groups-filter-menu__mobile-sheet .zen-groups-filter-menu__cancel-button,
+.zen-groups-filter-menu__mobile-sheet .zen-groups-filter-menu__apply-button {
+  margin: 0;
+}
 .zen-groups-filter-menu__item-wrapper {
   display: flex;
   flex-wrap: nowrap;
@@ -11674,6 +11858,11 @@ button.zen-summary__clickable {
 .zen-range--error .zen-range__trigger-button {
   border: 1px solid var(--text-error-message);
 }
+.zen-range__mobile-sheet .zen-range__clear-button,
+.zen-range__mobile-sheet .zen-range__cancel-button,
+.zen-range__mobile-sheet .zen-range__apply-button {
+  margin: 0;
+}
 .zen-range-popup.zen-range-popup {
   font-family: var(--main-font);
   font-size: 14px;
@@ -13124,6 +13313,32 @@ button.zen-summary__clickable {
 .zen-filters-bar-dropdown-with-checkbox__pill-box {
   margin-top: 8px;
 }
+.zen-form-section-default-title {
+  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-form-section-card-content {
+  display: grid;
+  gap: 16px;
+}
+.zen-form-section-error-banner {
+  height: fit-content;
+}
+.zen-form-layout-title {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+}
 .zen-grid {
   display: grid;
   align-items: start;
@@ -13866,7 +14081,7 @@ button.zen-summary__clickable {
 .zen-card-deck {
   box-sizing: border-box;
   display: flex;
-  padding: 8px 24px;
+  padding: 2px 21px;
   flex-direction: column;
   align-items: center;
   border-bottom: 1px solid var(--borders-general);
@@ -13877,13 +14092,14 @@ button.zen-summary__clickable {
   box-sizing: border-box;
 }
 .zen-card-deck--mobile {
-  padding: 8px 12px 7px 12px;
+  padding: 2px 12px 1px 12px;
 }
 .zen-card-deck__cards {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16px;
+  padding: 6px 3px;
 }
 .zen-card-deck__cards-container {
   width: 100%;
@@ -14002,24 +14218,28 @@ button.zen-summary__clickable {
 }
 .zen-mini-tabs--small {
   width: 336px;
+  max-width: 100%;
 }
 .zen-mini-tabs--small .zen-mini-tabs__header-item {
   max-width: 104px;
 }
 .zen-mini-tabs--medium {
   width: 528px;
+  max-width: 100%;
 }
 .zen-mini-tabs--medium .zen-mini-tabs__header-item {
   max-width: 144px;
 }
 .zen-mini-tabs--large {
   width: 720px;
+  max-width: 100%;
 }
 .zen-mini-tabs--large .zen-mini-tabs__header-item {
   max-width: 168px;
 }
 .zen-mini-tabs--xlarge {
   width: 1104px;
+  max-width: 100%;
 }
 .zen-mini-tabs--xlarge .zen-mini-tabs__header-item {
   max-width: 200px;