@geotab/zenith 1.16.1 → 1.17.0-beta.1

package/dist/index.css

@@ -1483,7 +1483,7 @@
   align-items: center;
 }
 .zen-checkbox-list-with-action__action-item--action .zen-checkbox__label {
-  padding-right: 5px;
+  padding-right: 8px;
   padding-bottom: 12px;
   padding-top: 12px;
 }
@@ -2080,9 +2080,13 @@
   display: flex;
 }
 .zen-list__item-content {
-  flex: 1 1 auto;
+  width: 100%;
   padding: 12px 16px;
   color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
 }
 .zen-list[aria-disabled="true"] {
   cursor: not-allowed;
@@ -4599,55 +4603,34 @@
   background-color: var(--accents-general--detail);
   fill: var(--accents-general--main);
 }
-.zen-beta-pill--mobile {
-  min-width: unset;
-}
-.zen-page-bookmark.zen-page-bookmark {
+.zen-status-pill {
   box-sizing: border-box;
-  cursor: pointer;
-  background: 0 0;
-  padding: 8px;
-  vertical-align: middle;
-  border-width: 0;
-  margin: 1px;
-  border: none;
-  background-color: transparent;
-  fill: var(--text-secondary);
 }
-.zen-page-bookmark.zen-page-bookmark * {
+.zen-status-pill * {
   box-sizing: border-box;
 }
-.zen-page-bookmark.zen-page-bookmark:hover,
-.zen-page-bookmark.zen-page-bookmark:focus,
-.zen-page-bookmark.zen-page-bookmark:active {
-  background-color: transparent;
-  border: none;
-  fill: var(--text-primary);
-}
-.zen-page-bookmark.zen-page-bookmark:focus-within {
-  outline: 1px solid var(--action-primary--default);
-}
-.zen-page-bookmark__icon--active {
-  fill: var(--text-secondary);
-}
-.zen-bottom-section {
+.zen-status-pill__pill-container {
   display: flex;
   align-items: center;
-  flex: 1 1 auto;
+  gap: 8px;
+  position: relative;
 }
-.zen-bottom-section__icon {
-  margin-right: 6px;
-  flex: 0 0 auto;
+.zen-status-pill__pill-container:hover .zen-status-pill__container--default {
+  border-color: var(--action-secondary--default);
 }
-.zen-bottom-section__icon--info {
-  color: var(--action-secondary--default);
-  fill: var(--action-secondary--default);
+.zen-status-pill__pill-container:hover .zen-status-pill__container--info {
+  border-color: var(--accents-general--detail);
 }
-.zen-bottom-section__icon--error {
-  color: var(--text-error-message);
-  fill: var(--text-error-message);
+.zen-status-pill__pill-container:hover .zen-status-pill__container--warning {
+  border-color: var(--accents-warning--detail);
 }
-.zen-bottom-section__message {
+.zen-status-pill__pill-container:hover .zen-status-pill__container--success {
+  border-color: var(--accents-success--detail);
+}
+.zen-status-pill__pill-container:hover .zen-status-pill__container--error {
+  border-color: var(--accents-error--detail);
+}
+.zen-status-pill__container {
   font-family: var(--main-font);
   font-size: 12px;
   font-style: normal;
@@ -4655,156 +4638,474 @@
   letter-spacing: 0.32px;
   line-height: 16px;
   text-transform: none;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background-color: var(--backgrounds-content-1);
+  border: var(--border-width-default) solid transparent;
+  color: var(--text-primary);
+  cursor: pointer;
 }
-.zen-bottom-section__message--info {
-  color: var(--action-secondary--default);
-  fill: var(--action-secondary--default);
-}
-.zen-bottom-section__message--error {
-  color: var(--text-error-message);
-  fill: var(--text-error-message);
-}
-.zen-select {
-  box-sizing: border-box;
+.zen-status-pill__container--drive {
   font-family: var(--main-font);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
+  letter-spacing: 0.32px;
+  line-height: 20px;
   text-transform: none;
-  position: relative;
-}
-.zen-select * {
-  box-sizing: border-box;
-}
-.zen-select__trigger:hover {
-  cursor: pointer;
-}
-.zen-select__trigger[aria-expanded="false"] + .zen-select__popup {
-  display: none;
+  padding: 8px;
 }
-.zen-select__trigger[aria-expanded="true"] > .zen-select__arrow {
-  transform: rotateZ(180deg);
+.zen-status-pill__container--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 22px;
+  text-transform: none;
+  padding: 8px;
 }
-.zen-select__popup {
-  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
-  border-radius: var(--border-radius-default);
-  position: absolute;
+.zen-status-pill__container--child {
   width: 100%;
-  background-color: var(--backgrounds-main);
-}
-.zen-select__text {
-  flex: 1 1 100%;
 }
-.zen-select__text--placeholder {
-  color: var(--text-placeholder);
+.zen-status-pill__container:hover {
+  border-color: var(--borders-secondary);
 }
-.zen-select__arrow {
+.zen-status-pill__container--default {
+  background-color: var(--backgrounds-content-1);
   fill: var(--action-secondary--default);
+  color: var(--action-secondary--default);
 }
-.zen-select--disabled .zen-select__trigger {
-  cursor: not-allowed;
-  color: var(--text-placeholder);
-  background-color: var(--backgrounds-field-disabled);
-  pointer-events: none;
-  border-color: var(--borders-general);
+.zen-status-pill__container--default:hover {
+  border-color: var(--action-secondary--default);
 }
-.zen-select--disabled .zen-select__arrow {
-  fill: var(--text-button-disabled);
+.zen-status-pill__container--info {
+  background-color: var(--accents-general--main);
+  fill: var(--accents-general--detail);
+  color: var(--accents-general--detail);
 }
-.zen-calendar {
-  width: 100%;
-  box-sizing: border-box;
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  text-transform: none;
-  background-color: var(--backgrounds-main);
+.zen-status-pill__container--info:hover {
+  border-color: var(--accents-general--detail);
 }
-.zen-calendar * {
-  box-sizing: border-box;
+.zen-status-pill__container--warning {
+  background-color: var(--accents-warning--main);
+  fill: var(--accents-warning--detail);
+  color: var(--accents-warning--detail);
 }
-.zen-calendar__header {
-  max-width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.zen-status-pill__container--warning:hover {
+  border-color: var(--accents-warning--detail);
 }
-.zen-calendar .zen-calendar__btn {
-  flex-shrink: 0;
+.zen-status-pill__container--success {
+  background-color: var(--accents-success--main);
+  fill: var(--accents-success--detail);
+  color: var(--accents-success--detail);
 }
-.zen-calendar__year {
-  flex: 0 1 auto;
-  display: flex;
-  align-items: center;
+.zen-status-pill__container--success:hover {
+  border-color: var(--accents-success--detail);
 }
-.zen-calendar__year--limited {
-  max-width: calc(100% - 126px);
+.zen-status-pill__container--error {
+  background-color: var(--accents-error--main);
+  fill: var(--accents-error--detail);
+  color: var(--accents-error--detail);
 }
-.zen-calendar__year-name {
-  flex: 0 1 auto;
-  font-family: var(--main-font);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
+.zen-status-pill__container--error:hover {
+  border-color: var(--accents-error--detail);
+}
+.zen-status-pill__text {
+  margin-right: 4px;
   color: var(--text-primary);
-  margin-left: 32px;
 }
-.zen-calendar__year-name--left {
-  margin-left: 12px;
+.zen-status-pill__text--default {
+  color: var(--action-secondary--default);
 }
-.zen-calendar__year-trigger {
-  margin-left: 4px;
+.zen-status-pill__text--info {
+  color: var(--accents-general--detail);
 }
-.zen-calendar__months {
-  display: flex;
-  gap: 12px;
+.zen-status-pill__text--warning {
+  color: var(--accents-warning--detail);
 }
-.zen-calendar__table {
-  width: 100%;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border-collapse: separate;
-  border-spacing: 0;
+.zen-status-pill__text--success {
+  color: var(--accents-success--detail);
 }
-.zen-calendar__columns {
-  margin: 0;
+.zen-status-pill__text--error {
+  color: var(--accents-error--detail);
 }
-.zen-calendar__column {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-primary);
-  width: 14%;
-  height: 16px;
-  padding: 12px 0;
-  text-align: center;
+.zen-status-pill__expand-button {
+  padding: 0;
+  margin-left: auto;
 }
-.zen-calendar__cell {
-  padding: 0px;
-  margin: 0px;
-  border: 0px;
+.zen-status-pill__expand-button--default {
+  fill: var(--action-secondary--default);
+  color: var(--action-secondary--default);
 }
-.zen-calendar__day-wrapper {
-  color: var(--text-primary);
-  margin: 0px;
-  box-sizing: border-box;
-  height: 24px;
+.zen-status-pill__expand-button--info {
+  fill: var(--accents-general--detail);
+  color: var(--accents-general--detail);
+}
+.zen-status-pill__expand-button--warning {
+  fill: var(--accents-warning--detail);
+  color: var(--accents-warning--detail);
+}
+.zen-status-pill__expand-button--success {
+  fill: var(--accents-success--detail);
+  color: var(--accents-success--detail);
+}
+.zen-status-pill__expand-button--error {
+  fill: var(--accents-error--detail);
+  color: var(--accents-error--detail);
+}
+.zen-status-pill__icon {
+  display: flex;
+  align-items: center;
+  height: 16px;
+  margin-right: 4px;
+}
+.zen-status-pill__icon--default {
+  fill: var(--action-secondary--default);
+  color: var(--action-secondary--default);
+}
+.zen-status-pill__icon--info {
+  fill: var(--accents-general--detail);
+  color: var(--accents-general--detail);
+}
+.zen-status-pill__icon--warning {
+  fill: var(--accents-warning--detail);
+  color: var(--accents-warning--detail);
+}
+.zen-status-pill__icon--success {
+  fill: var(--accents-success--detail);
+  color: var(--accents-success--detail);
+}
+.zen-status-pill__icon--error {
+  fill: var(--accents-error--detail);
+  color: var(--accents-error--detail);
+}
+.zen-status-pill-popup__main-pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.zen-status-pill-popup__container {
+  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  padding: 16px 16px 16px 16px;
+  gap: 16px;
+  background-color: white;
+  width: 308px;
+  margin: 10px;
+}
+.zen-status-pill-popup__content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.zen-status-pill-popup__header-text {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-primary);
+}
+.zen-status-pill-popup__header-text--drive {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: 0.32px;
+  line-height: 18px;
+  text-transform: none;
+}
+.zen-status-pill-popup__header-text--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: 0.32px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-status-pill-popup__header-text--left {
+  margin-left: auto;
+}
+.zen-status-pill-popup__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;
+  color: var(--text-secondary);
+}
+.zen-status-pill-popup__description--drive {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-status-pill-popup__description--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-status-pill-popup__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.zen-status-pill-popup__divider {
+  width: 100%;
+  border-top: 1px solid var(--borders-secondary);
+}
+.zen-skeleton {
+  box-sizing: border-box;
+  background: linear-gradient(to left, var(--backgrounds-content-2) 0%, var(--backgrounds-main) 50%, var(--backgrounds-content-2) 100%);
+  background-size: 200% 100%;
+  animation: skeleton-animation ease-in-out 1.5s infinite;
+  background-repeat: repeat;
+}
+.zen-skeleton * {
+  box-sizing: border-box;
+}
+.zen-skeleton--pill {
+  height: 24px;
+  border-radius: 99px;
+}
+.zen-skeleton--text {
+  height: 16px;
+}
+.zen-skeleton--button {
+  height: 32px;
+  border-radius: 4px;
+}
+@keyframes skeleton-animation {
+  0% {
+    background-position: -50% 0%;
+  }
+  100% {
+    background-position: -250% 0%;
+  }
+}
+.zen-beta-pill--mobile {
+  min-width: unset;
+}
+.zen-page-bookmark.zen-page-bookmark {
+  box-sizing: border-box;
+  cursor: pointer;
+  background: 0 0;
+  padding: 8px;
+  vertical-align: middle;
+  border-width: 0;
+  margin: 1px;
+  border: none;
+  background-color: transparent;
+  fill: var(--text-secondary);
+}
+.zen-page-bookmark.zen-page-bookmark * {
+  box-sizing: border-box;
+}
+.zen-page-bookmark.zen-page-bookmark:hover,
+.zen-page-bookmark.zen-page-bookmark:focus,
+.zen-page-bookmark.zen-page-bookmark:active {
+  background-color: transparent;
+  border: none;
+  fill: var(--text-primary);
+}
+.zen-page-bookmark.zen-page-bookmark:focus-within {
+  outline: 1px solid var(--action-primary--default);
+}
+.zen-page-bookmark__icon--active {
+  fill: var(--text-secondary);
+}
+.zen-bottom-section {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+}
+.zen-bottom-section__icon {
+  margin-right: 6px;
+  flex: 0 0 auto;
+}
+.zen-bottom-section__icon--info {
+  color: var(--action-secondary--default);
+  fill: var(--action-secondary--default);
+}
+.zen-bottom-section__icon--error {
+  color: var(--text-error-message);
+  fill: var(--text-error-message);
+}
+.zen-bottom-section__message {
+  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-bottom-section__message--info {
+  color: var(--action-secondary--default);
+  fill: var(--action-secondary--default);
+}
+.zen-bottom-section__message--error {
+  color: var(--text-error-message);
+  fill: var(--text-error-message);
+}
+.zen-select {
+  box-sizing: border-box;
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+}
+.zen-select * {
+  box-sizing: border-box;
+}
+.zen-select__trigger:hover {
+  cursor: pointer;
+}
+.zen-select__trigger[aria-expanded="false"] + .zen-select__popup {
+  display: none;
+}
+.zen-select__trigger[aria-expanded="true"] > .zen-select__arrow {
+  transform: rotateZ(180deg);
+}
+.zen-select__popup {
+  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
+  border-radius: var(--border-radius-default);
+  background-color: var(--backgrounds-main);
+  min-width: 170px;
+  max-width: 420px;
+}
+.zen-select__text {
+  max-width: 100%;
+  flex: 1 1 100%;
+}
+.zen-select__text--placeholder {
+  color: var(--text-placeholder);
+}
+.zen-select__arrow {
+  fill: var(--action-secondary--default);
+}
+.zen-select--disabled .zen-select__trigger {
+  cursor: not-allowed;
+  color: var(--text-placeholder);
+  background-color: var(--backgrounds-field-disabled);
+  pointer-events: none;
+  border-color: var(--borders-general);
+}
+.zen-select--disabled .zen-select__arrow {
+  fill: var(--text-button-disabled);
+}
+.zen-calendar {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+  background-color: var(--backgrounds-main);
+}
+.zen-calendar * {
+  box-sizing: border-box;
+}
+.zen-calendar__header {
+  max-width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.zen-calendar .zen-calendar__btn {
+  flex-shrink: 0;
+}
+.zen-calendar__year {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+}
+.zen-calendar__year--limited {
+  max-width: calc(100% - 126px);
+}
+.zen-calendar__year-name {
+  flex: 0 1 auto;
+  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);
+  margin-left: 32px;
+}
+.zen-calendar__year-name--left {
+  margin-left: 12px;
+}
+.zen-calendar__year-trigger {
+  margin-left: 4px;
+}
+.zen-calendar__months {
+  display: flex;
+  gap: 12px;
+}
+.zen-calendar__table {
+  width: 100%;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.zen-calendar__columns {
+  margin: 0;
+}
+.zen-calendar__column {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-primary);
+  width: 14%;
+  height: 16px;
+  padding: 12px 0;
+  text-align: center;
+}
+.zen-calendar__cell {
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+}
+.zen-calendar__day-wrapper {
+  color: var(--text-primary);
+  margin: 0px;
+  box-sizing: border-box;
+  height: 24px;
   width: 100%;
   position: relative;
   cursor: pointer;
@@ -5186,7 +5487,7 @@
   letter-spacing: 0.16px;
   line-height: 16px;
   text-transform: none;
-  max-width: 250px;
+  max-width: 520px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -5242,7 +5543,7 @@
   letter-spacing: 0.16px;
   line-height: 16px;
   text-transform: none;
-  max-width: 250px;
+  max-width: 520px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -5363,7 +5664,7 @@
   letter-spacing: 0.16px;
   line-height: 16px;
   text-transform: none;
-  max-width: 250px;
+  max-width: 520px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -9664,266 +9965,57 @@
 .zen-overview {
   box-sizing: border-box;
   display: flex;
-  align-items: center;
-  max-height: 32px;
-  padding: 0;
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  text-transform: none;
-}
-.zen-overview * {
-  box-sizing: border-box;
-}
-.zen-overview__title {
-  overflow: hidden;
-}
-.zen-overview__icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  fill: var(--text-primary);
-}
-.zen-overview__content {
-  flex-grow: 1;
-  width: calc(100% - 28px);
-  display: flex;
-  flex-direction: column;
-}
-.zen-overview__content--full {
-  width: 100%;
-}
-.zen-overview__additional {
-  display: inline-flex;
-  width: 100%;
-  flex-grow: 1;
-  justify-content: space-between;
-  max-height: 16px;
-  overflow: hidden;
-}
-.zen-overview__description {
-  color: var(--text-secondary);
-  flex-grow: 1;
-}
-.zen-overview__label {
-  width: max-content;
-  flex-shrink: 0;
-  max-height: 32px;
-  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-overview__label-item {
-  min-width: 42px;
-  padding: 0 4px;
-}
-.zen-pill {
-  box-sizing: border-box;
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  display: flex;
-  color: var(--text-primary);
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 12px 4px 12px;
-  border-radius: 30px;
-  background: var(--backgrounds-content-1);
-}
-.zen-pill * {
-  box-sizing: border-box;
-}
-.zen-pill--inactive {
-  color: var(--text-secondary);
-  background-color: var(--backgrounds-field-disabled);
-}
-.zen-pill--inactive .zen-pill__close-button {
-  fill: var(--text-secondary);
-}
-.zen-pill--success {
-  color: var(--accents-success--detail);
-  background-color: var(--accents-success--main);
-  fill: var(--accents-success--detail);
-}
-.zen-pill--success .zen-pill__close-button {
-  fill: var(--accents-success--detail);
-}
-.zen-pill--success .zen-pill__close-button:active,
-.zen-pill--success .zen-pill__close-button:hover,
-.zen-pill--success .zen-pill__close-button:focus {
-  background-color: var(--accents-success--detail);
-  fill: var(--accents-success--main);
-}
-.zen-pill--error {
-  background-color: var(--accents-error--main);
-  color: var(--accents-error--detail);
-  fill: var(--accents-error--detail);
-}
-.zen-pill--error .zen-pill__close-button {
-  fill: var(--accents-error--detail);
-}
-.zen-pill--error .zen-pill__close-button:active,
-.zen-pill--error .zen-pill__close-button:hover,
-.zen-pill--error .zen-pill__close-button:focus {
-  background-color: var(--accents-error--detail);
-  fill: var(--accents-error--main);
-}
-.zen-pill--warning {
-  background-color: var(--accents-warning--main);
-  color: var(--accents-warning--detail);
-  fill: var(--accents-warning--detail);
-}
-.zen-pill--warning .zen-pill__close-button {
-  fill: var(--accents-warning--detail);
-}
-.zen-pill--warning .zen-pill__close-button:active,
-.zen-pill--warning .zen-pill__close-button:hover,
-.zen-pill--warning .zen-pill__close-button:focus {
-  background-color: var(--accents-warning--detail);
-  fill: var(--accents-warning--main);
-}
-.zen-pill--info {
-  background-color: var(--accents-general--main);
-  color: var(--accents-general--detail);
-  fill: var(--accents-general--detail);
-}
-.zen-pill--info .zen-pill__close-button {
-  fill: var(--accents-general--detail);
-}
-.zen-pill--info .zen-pill__close-button:active,
-.zen-pill--info .zen-pill__close-button:hover,
-.zen-pill--info .zen-pill__close-button:focus {
-  background-color: var(--accents-general--detail);
-  fill: var(--accents-general--main);
-}
-.zen-pill--closable {
-  padding-right: 4px;
-}
-.zen-pill--long {
-  min-width: 200px;
-}
-.zen-pill__close-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  fill: var(--text-primary);
-  background-color: transparent;
-  border: none;
-  border-radius: 15px;
-  padding: 0;
-  margin: 0;
-  margin-left: 8px;
-  cursor: pointer;
-}
-.zen-pill__close-button:active,
-.zen-pill__close-button:hover,
-.zen-pill__close-button:focus {
-  background-color: var(--action-secondary--default);
-  fill: var(--backgrounds-content-1);
-}
-.zen-pill--small {
-  line-height: 12px;
-  padding: 2px 4px;
-  max-height: 16px;
-}
-.zen-pill--small .zen-pill__close-button {
-  height: 12px;
-  width: 12px;
-}
-.zen-page-layout {
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 1000;
-  margin: 0;
-  touch-action: manipulation;
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  text-transform: none;
-}
-.zen-page-layout * {
-  box-sizing: border-box;
-}
-.zen-page-layout__content {
-  display: block;
-  background-color: var(--backgrounds-content-0);
-}
-.zen-page-layout__content--floating {
-  display: flex;
-}
-.zen-page-layout__content--edit {
-  margin-top: 10px;
-}
-.zen-page-layout__content--old {
-  background-color: var(--backgrounds-main);
-}
-.zen-page-section {
-  box-sizing: border-box;
-}
-.zen-page-section * {
-  box-sizing: border-box;
-}
-.zen-page-section__title {
-  display: flex;
-  margin: 16px 0;
+  align-items: center;
+  max-height: 32px;
+  padding: 0;
   font-family: var(--main-font);
   font-size: 14px;
   font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.16px;
+  font-weight: 400;
+  letter-spacing: 0;
   line-height: 16px;
   text-transform: none;
-  color: var(--text-secondary);
 }
-.zen-page-section__title::after {
-  content: "";
-  flex-grow: 1;
-  margin-left: 8px;
-  margin-top: 8px;
-  border-top: 1px solid var(--borders-general);
-}
-.zen-pagination {
+.zen-overview * {
   box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
 }
-.zen-pagination * {
-  box-sizing: border-box;
+.zen-overview__title {
+  overflow: hidden;
 }
-.zen-pagination__arrow-navigation-button {
+.zen-overview__icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
+  fill: var(--text-primary);
 }
-.zen-pagination__arrow-navigation-button--invisible {
-  display: none;
+.zen-overview__content {
+  flex-grow: 1;
+  width: calc(100% - 28px);
+  display: flex;
+  flex-direction: column;
 }
-.zen-pagination__arrow-navigation-button-icon--rotate {
-  transform: rotate(180deg);
+.zen-overview__content--full {
+  width: 100%;
 }
-.zen-pagination__text {
+.zen-overview__additional {
+  display: inline-flex;
+  width: 100%;
+  flex-grow: 1;
+  justify-content: space-between;
+  max-height: 16px;
+  overflow: hidden;
+}
+.zen-overview__description {
+  color: var(--text-secondary);
+  flex-grow: 1;
+}
+.zen-overview__label {
+  width: max-content;
+  flex-shrink: 0;
+  max-height: 32px;
   font-family: var(--main-font);
   font-size: 12px;
   font-style: normal;
@@ -9931,16 +10023,13 @@
   letter-spacing: 0.32px;
   line-height: 16px;
   text-transform: none;
-  color: var(--text-secondary);
-  margin-right: 4px;
 }
-.zen-pill-actionable {
-  box-sizing: border-box;
+.zen-overview__label-item {
+  min-width: 42px;
+  padding: 0 4px;
 }
-.zen-pill-actionable * {
+.zen-pill {
   box-sizing: border-box;
-}
-.zen-pill-actionable__block {
   font-family: var(--main-font);
   font-size: 12px;
   font-style: normal;
@@ -9956,270 +10045,186 @@
   border-radius: 30px;
   background: var(--backgrounds-content-1);
 }
-.zen-pill-actionable__icon {
-  display: none;
-  margin-top: 2px;
-  margin-right: 8px;
-}
-.zen-pill-actionable__input {
-  position: absolute;
-  left: -5000px;
-}
-.zen-pill-actionable__input:hover + .zen-pill-actionable__block--actionable {
-  background-color: var(--backgrounds-content-2);
-}
-.zen-pill-actionable__input:focus + .zen-pill-actionable__block--actionable {
-  background-color: var(--backgrounds-content-2);
-  outline: 1px dotted var(--borders-form-field--active);
-}
-.zen-pill-actionable__input:checked + .zen-pill-actionable__block--actionable {
-  background: var(--action-primary--default);
-  color: var(--backgrounds-main);
-  fill: var(--backgrounds-main);
-}
-.zen-pill-actionable__input:checked + .zen-pill-actionable__block--actionable .zen-pill-actionable__icon {
-  display: block;
-}
-.zen-pill-actionable__input:disabled + .zen-pill-actionable__block--actionable {
-  background-color: var(--backgrounds-field-disabled);
-  color: var(--text-button-disabled);
-  cursor: not-allowed;
-}
-.zen-pill-actionable__input--readonly:disabled + .zen-pill-actionable__block--actionable {
-  color: var(--text-primary);
-}
-.zen-status-pill {
-  box-sizing: border-box;
-}
-.zen-status-pill * {
+.zen-pill * {
   box-sizing: border-box;
 }
-.zen-status-pill__pill-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-}
-.zen-status-pill__pill-container:hover .zen-status-pill__container--default {
-  border-color: var(--action-secondary--default);
-}
-.zen-status-pill__pill-container:hover .zen-status-pill__container--info {
-  border-color: var(--accents-general--detail);
-}
-.zen-status-pill__pill-container:hover .zen-status-pill__container--warning {
-  border-color: var(--accents-warning--detail);
-}
-.zen-status-pill__pill-container:hover .zen-status-pill__container--success {
-  border-color: var(--accents-success--detail);
-}
-.zen-status-pill__pill-container:hover .zen-status-pill__container--error {
-  border-color: var(--accents-error--detail);
-}
-.zen-status-pill__container {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  border-radius: 999px;
-  background-color: var(--backgrounds-content-1);
-  border: var(--border-width-default) solid transparent;
-  color: var(--text-primary);
-  cursor: pointer;
-}
-.zen-status-pill__container--drive {
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 20px;
-  text-transform: none;
-  padding: 8px;
-}
-.zen-status-pill__container--drive-tablet {
-  font-family: var(--main-font);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 22px;
-  text-transform: none;
-  padding: 8px;
-}
-.zen-status-pill__container--child {
-  width: 100%;
-}
-.zen-status-pill__container:hover {
-  border-color: var(--borders-secondary);
-}
-.zen-status-pill__container--default {
-  background-color: var(--backgrounds-content-1);
-  fill: var(--action-secondary--default);
-  color: var(--action-secondary--default);
-}
-.zen-status-pill__container--default:hover {
-  border-color: var(--action-secondary--default);
-}
-.zen-status-pill__container--info {
-  background-color: var(--accents-general--main);
-  fill: var(--accents-general--detail);
-  color: var(--accents-general--detail);
-}
-.zen-status-pill__container--info:hover {
-  border-color: var(--accents-general--detail);
-}
-.zen-status-pill__container--warning {
-  background-color: var(--accents-warning--main);
-  fill: var(--accents-warning--detail);
-  color: var(--accents-warning--detail);
+.zen-pill--inactive {
+  color: var(--text-secondary);
+  background-color: var(--backgrounds-field-disabled);
 }
-.zen-status-pill__container--warning:hover {
-  border-color: var(--accents-warning--detail);
+.zen-pill--inactive .zen-pill__close-button {
+  fill: var(--text-secondary);
 }
-.zen-status-pill__container--success {
+.zen-pill--success {
+  color: var(--accents-success--detail);
   background-color: var(--accents-success--main);
   fill: var(--accents-success--detail);
-  color: var(--accents-success--detail);
 }
-.zen-status-pill__container--success:hover {
-  border-color: var(--accents-success--detail);
+.zen-pill--success .zen-pill__close-button {
+  fill: var(--accents-success--detail);
 }
-.zen-status-pill__container--error {
+.zen-pill--success .zen-pill__close-button:active,
+.zen-pill--success .zen-pill__close-button:hover,
+.zen-pill--success .zen-pill__close-button:focus {
+  background-color: var(--accents-success--detail);
+  fill: var(--accents-success--main);
+}
+.zen-pill--error {
   background-color: var(--accents-error--main);
-  fill: var(--accents-error--detail);
   color: var(--accents-error--detail);
+  fill: var(--accents-error--detail);
 }
-.zen-status-pill__container--error:hover {
-  border-color: var(--accents-error--detail);
-}
-.zen-status-pill__text {
-  margin-right: 4px;
-  color: var(--text-primary);
-}
-.zen-status-pill__text--default {
-  color: var(--action-secondary--default);
+.zen-pill--error .zen-pill__close-button {
+  fill: var(--accents-error--detail);
 }
-.zen-status-pill__text--info {
-  color: var(--accents-general--detail);
+.zen-pill--error .zen-pill__close-button:active,
+.zen-pill--error .zen-pill__close-button:hover,
+.zen-pill--error .zen-pill__close-button:focus {
+  background-color: var(--accents-error--detail);
+  fill: var(--accents-error--main);
 }
-.zen-status-pill__text--warning {
+.zen-pill--warning {
+  background-color: var(--accents-warning--main);
   color: var(--accents-warning--detail);
+  fill: var(--accents-warning--detail);
 }
-.zen-status-pill__text--success {
-  color: var(--accents-success--detail);
-}
-.zen-status-pill__text--error {
-  color: var(--accents-error--detail);
+.zen-pill--warning .zen-pill__close-button {
+  fill: var(--accents-warning--detail);
 }
-.zen-status-pill__expand-button {
-  padding: 0;
-  margin-left: auto;
+.zen-pill--warning .zen-pill__close-button:active,
+.zen-pill--warning .zen-pill__close-button:hover,
+.zen-pill--warning .zen-pill__close-button:focus {
+  background-color: var(--accents-warning--detail);
+  fill: var(--accents-warning--main);
 }
-.zen-status-pill__expand-button--default {
-  fill: var(--action-secondary--default);
-  color: var(--action-secondary--default);
+.zen-pill--info {
+  background-color: var(--accents-general--main);
+  color: var(--accents-general--detail);
+  fill: var(--accents-general--detail);
 }
-.zen-status-pill__expand-button--info {
+.zen-pill--info .zen-pill__close-button {
   fill: var(--accents-general--detail);
-  color: var(--accents-general--detail);
 }
-.zen-status-pill__expand-button--warning {
-  fill: var(--accents-warning--detail);
-  color: var(--accents-warning--detail);
+.zen-pill--info .zen-pill__close-button:active,
+.zen-pill--info .zen-pill__close-button:hover,
+.zen-pill--info .zen-pill__close-button:focus {
+  background-color: var(--accents-general--detail);
+  fill: var(--accents-general--main);
 }
-.zen-status-pill__expand-button--success {
-  fill: var(--accents-success--detail);
-  color: var(--accents-success--detail);
+.zen-pill--closable {
+  padding-right: 4px;
 }
-.zen-status-pill__expand-button--error {
-  fill: var(--accents-error--detail);
-  color: var(--accents-error--detail);
+.zen-pill--long {
+  min-width: 200px;
 }
-.zen-status-pill__icon {
+.zen-pill__close-button {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 16px;
   height: 16px;
-  margin-right: 4px;
+  fill: var(--text-primary);
+  background-color: transparent;
+  border: none;
+  border-radius: 15px;
+  padding: 0;
+  margin: 0;
+  margin-left: 8px;
+  cursor: pointer;
 }
-.zen-status-pill__icon--default {
-  fill: var(--action-secondary--default);
-  color: var(--action-secondary--default);
+.zen-pill__close-button:active,
+.zen-pill__close-button:hover,
+.zen-pill__close-button:focus {
+  background-color: var(--action-secondary--default);
+  fill: var(--backgrounds-content-1);
 }
-.zen-status-pill__icon--info {
-  fill: var(--accents-general--detail);
-  color: var(--accents-general--detail);
+.zen-pill--small {
+  line-height: 12px;
+  padding: 2px 4px;
+  max-height: 16px;
 }
-.zen-status-pill__icon--warning {
-  fill: var(--accents-warning--detail);
-  color: var(--accents-warning--detail);
+.zen-pill--small .zen-pill__close-button {
+  height: 12px;
+  width: 12px;
 }
-.zen-status-pill__icon--success {
-  fill: var(--accents-success--detail);
-  color: var(--accents-success--detail);
+.zen-page-layout {
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 1000;
+  margin: 0;
+  touch-action: manipulation;
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
 }
-.zen-status-pill__icon--error {
-  fill: var(--accents-error--detail);
-  color: var(--accents-error--detail);
+.zen-page-layout * {
+  box-sizing: border-box;
 }
-.zen-status-pill-popup__main-pill {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.zen-page-layout__content {
+  display: block;
+  background-color: var(--backgrounds-content-0);
 }
-.zen-status-pill-popup__container {
-  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
+.zen-page-layout__content--floating {
   display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  padding: 16px 16px 16px 16px;
-  gap: 16px;
-  background-color: white;
-  width: 308px;
-  margin: 10px;
 }
-.zen-status-pill-popup__content-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.zen-page-layout__content--edit {
+  margin-top: 10px;
 }
-.zen-status-pill-popup__header-text {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-primary);
+.zen-page-layout__content--old {
+  background-color: var(--backgrounds-main);
 }
-.zen-status-pill-popup__header-text--drive {
+.zen-page-section {
+  box-sizing: border-box;
+}
+.zen-page-section * {
+  box-sizing: border-box;
+}
+.zen-page-section__title {
+  display: flex;
+  margin: 16px 0;
   font-family: var(--main-font);
   font-size: 14px;
   font-style: normal;
-  font-weight: 700;
-  letter-spacing: 0.32px;
-  line-height: 18px;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
   text-transform: none;
+  color: var(--text-secondary);
 }
-.zen-status-pill-popup__header-text--drive-tablet {
-  font-family: var(--main-font);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  letter-spacing: 0.32px;
-  line-height: 22px;
-  text-transform: none;
+.zen-page-section__title::after {
+  content: "";
+  flex-grow: 1;
+  margin-left: 8px;
+  margin-top: 8px;
+  border-top: 1px solid var(--borders-general);
 }
-.zen-status-pill-popup__header-text--left {
-  margin-left: auto;
+.zen-pagination {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
 }
-.zen-status-pill-popup__description {
+.zen-pagination * {
+  box-sizing: border-box;
+}
+.zen-pagination__arrow-navigation-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.zen-pagination__arrow-navigation-button--invisible {
+  display: none;
+}
+.zen-pagination__arrow-navigation-button-icon--rotate {
+  transform: rotate(180deg);
+}
+.zen-pagination__text {
   font-family: var(--main-font);
   font-size: 12px;
   font-style: normal;
@@ -10228,62 +10233,61 @@
   line-height: 16px;
   text-transform: none;
   color: var(--text-secondary);
+  margin-right: 4px;
 }
-.zen-status-pill-popup__description--drive {
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 20px;
-  text-transform: none;
+.zen-pill-actionable {
+  box-sizing: border-box;
 }
-.zen-status-pill-popup__description--drive-tablet {
+.zen-pill-actionable * {
+  box-sizing: border-box;
+}
+.zen-pill-actionable__block {
   font-family: var(--main-font);
-  font-size: 16px;
+  font-size: 12px;
   font-style: normal;
   font-weight: 400;
   letter-spacing: 0.32px;
-  line-height: 22px;
+  line-height: 16px;
   text-transform: none;
-}
-.zen-status-pill-popup__actions {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  color: var(--text-primary);
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 12px 4px 12px;
+  border-radius: 30px;
+  background: var(--backgrounds-content-1);
 }
-.zen-status-pill-popup__divider {
-  width: 100%;
-  border-top: 1px solid var(--borders-secondary);
+.zen-pill-actionable__icon {
+  display: none;
+  margin-top: 2px;
+  margin-right: 8px;
 }
-.zen-skeleton {
-  box-sizing: border-box;
-  background: linear-gradient(to left, var(--backgrounds-content-2) 0%, var(--backgrounds-main) 50%, var(--backgrounds-content-2) 100%);
-  background-size: 200% 100%;
-  animation: skeleton-animation ease-in-out 1.5s infinite;
-  background-repeat: repeat;
+.zen-pill-actionable__input {
+  position: absolute;
+  left: -5000px;
 }
-.zen-skeleton * {
-  box-sizing: border-box;
+.zen-pill-actionable__input:hover + .zen-pill-actionable__block--actionable {
+  background-color: var(--backgrounds-content-2);
 }
-.zen-skeleton--pill {
-  height: 24px;
-  border-radius: 99px;
+.zen-pill-actionable__input:focus + .zen-pill-actionable__block--actionable {
+  background-color: var(--backgrounds-content-2);
+  outline: 1px dotted var(--borders-form-field--active);
 }
-.zen-skeleton--text {
-  height: 16px;
+.zen-pill-actionable__input:checked + .zen-pill-actionable__block--actionable {
+  background: var(--action-primary--default);
+  color: var(--backgrounds-main);
+  fill: var(--backgrounds-main);
 }
-.zen-skeleton--button {
-  height: 32px;
-  border-radius: 4px;
+.zen-pill-actionable__input:checked + .zen-pill-actionable__block--actionable .zen-pill-actionable__icon {
+  display: block;
 }
-@keyframes skeleton-animation {
-  0% {
-    background-position: -50% 0%;
-  }
-  100% {
-    background-position: -250% 0%;
-  }
+.zen-pill-actionable__input:disabled + .zen-pill-actionable__block--actionable {
+  background-color: var(--backgrounds-field-disabled);
+  color: var(--text-button-disabled);
+  cursor: not-allowed;
+}
+.zen-pill-actionable__input--readonly:disabled + .zen-pill-actionable__block--actionable {
+  color: var(--text-primary);
 }
 .zen-progress {
   box-sizing: border-box;
@@ -11088,7 +11092,8 @@
   width: 100%;
 }
 .zen-table__cell-loading {
-  max-width: 200px;
+  max-width: 500px;
+  width: 100%;
 }
 .zen-table-wrapper--with-toolbar .zen-data-grid-wrapper {
   height: calc(100% - 48px);
@@ -11120,6 +11125,10 @@
 .zen-selectable-column--no-checkbox .zen-checkbox-column__checkbox-input {
   visibility: hidden;
 }
+.zen-textarea {
+  overflow: visible;
+  white-space: wrap;
+}
 .zen-toast {
   box-sizing: border-box;
 }