@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/dist/icons/iconTruck.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTruck = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const IconTruck = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = (0, react_1.useId)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconTruck", children: [title ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 5C8 4.44772 8.44772 4 9 4H21C21.5523 4 22 4.44772 22 5V16C22 16.5523 21.5523 17 21 17H19.9646C19.7219 18.6961 18.2632 20 16.5 20C14.7368 20 13.2781 18.6961 13.0354 17H10.9646C10.7219 18.6961 9.26324 20 7.5 20C5.73676 20 4.27806 18.6961 4.03544 17H3C2.44772 17 2 16.5523 2 16V10C2 9.80258 2.05844 9.60957 2.16795 9.4453L4.16795 6.4453C4.35342 6.1671 4.66565 6 5 6H8V5ZM8 8H5.53518L4 10.3028V15H4.33682C4.89855 13.8175 6.1038 13 7.5 13C7.66976 13 7.8367 13.0121 8 13.0354V8ZM9.94949 14C10.2424 14.2871 10.4851 14.6252 10.6632 15H13.3368C13.8985 13.8175 15.1038 13 16.5 13C17.8962 13 19.1015 13.8175 19.6632 15H20V6H10V14H9.94949ZM7.5 15C6.67157 15 6 15.6716 6 16.5C6 17.3284 6.67157 18 7.5 18C8.32843 18 9 17.3284 9 16.5C9 15.6716 8.32843 15 7.5 15ZM16.5 15C15.6716 15 15 15.6716 15 16.5C15 17.3284 15.6716 18 16.5 18C17.3284 18 18 17.3284 18 16.5C18 15.6716 17.3284 15 16.5 15Z" })] }));
+};
+exports.IconTruck = IconTruck;

package/dist/index.css

@@ -1927,6 +1927,7 @@ html:lang(ar) .mobile-data-s-drive {
   --data--categorical-grey: #8a94a2;
 }
 .zen-dark {
+  color: var(--text-primary);
   --text-primary: #ffffff;
   --text-secondary: #c0ccd8;
   --text-placeholder: #a6b8c9;
@@ -2702,6 +2703,7 @@ html:lang(ar) .zen-button--mobile {
   width: 11px;
   height: 11px;
   display: inline;
+  fill: currentcolor;
 }
 .zen-icon * {
   box-sizing: border-box;
@@ -3336,33 +3338,41 @@ html:lang(ar) .zen-tooltip__title {
   position: absolute;
   border-style: solid;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
-  border-width: 6px;
-  border-color: transparent;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .zen-tooltip__arrow--top {
-  top: 100%;
-  left: 50%;
-  border-top-color: var(--backgrounds-content-1);
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
+  border-color: var(--backgrounds-content-1) transparent transparent transparent;
+  border-width: 6px 5px 0 5px;
   filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
 }
 .zen-tooltip__arrow--bottom {
   bottom: 100%;
-  left: 0.875rem;
-  border-bottom-color: var(--backgrounds-content-1);
+  inset-inline-start: 0.875rem;
+  border-color: transparent transparent var(--backgrounds-content-1) transparent;
+  border-width: 0 5px 6px 5px;
   filter: drop-shadow(0 -4px 4px rgba(0, 0, 0, 0.2));
 }
 .zen-tooltip__arrow--right {
-  right: 100%;
-  border-right-color: var(--backgrounds-content-1);
+  inset-inline-end: 100%;
+  border-color: transparent var(--backgrounds-content-1) transparent transparent;
+  border-width: 5px 6px 5px 0;
   filter: drop-shadow(-4px 0 4px rgba(0, 0, 0, 0.2));
 }
+[dir="rtl"] .zen-tooltip__arrow--right {
+  border-color: transparent transparent transparent var(--backgrounds-content-1);
+  filter: drop-shadow(4px 0 4px rgba(0, 0, 0, 0.2));
+}
 .zen-tooltip__arrow--left {
-  left: 100%;
-  border-left-color: var(--backgrounds-content-1);
+  inset-inline-start: 100%;
+  border-color: transparent transparent transparent var(--backgrounds-content-1);
+  border-width: 5px 0 6px 5px;
   filter: drop-shadow(4px 0 4px rgba(0, 0, 0, 0.2));
 }
+[dir="rtl"] .zen-tooltip__arrow--left {
+  border-color: transparent var(--backgrounds-content-1) transparent transparent;
+  filter: drop-shadow(-4px 0 4px rgba(0, 0, 0, 0.2));
+}
 .zen-tooltip__trigger {
   color: var(--text-secondary);
   fill: var(--text-secondary);
@@ -5473,10 +5483,12 @@ html:lang(ar) .zen-checkbox__label-text {
 .zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__label {
   fill: var(--text-reverse-primary);
   color: var(--text-button-disabled);
+  cursor: default;
 }
 .zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__box {
   border-color: var(--borders-general);
   background-color: var(--backgrounds-field-disabled);
+  cursor: default;
 }
 .zen-checkbox:has(.zen-checkbox__input:disabled:checked) .zen-checkbox__box,
 .zen-checkbox:has(.zen-checkbox__input:disabled:indeterminate) .zen-checkbox__box {
@@ -6167,6 +6179,7 @@ html:lang(ar) .zen-columns-list__title {
   line-height: 1rem;
   text-transform: none;
   text-decoration: none;
+  color: var(--text-primary);
   margin: 0;
 }
 html:lang(ar) .zen-empty-state__header {
@@ -6181,6 +6194,7 @@ html:lang(ar) .zen-empty-state__header {
   line-height: 1rem;
   text-transform: none;
   text-decoration: none;
+  color: var(--text-secondary);
 }
 html:lang(ar) .zen-empty-state__description {
   font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -8189,6 +8203,11 @@ html:lang(ar) .zen-checkbox-list-with-action__label {
   color: var(--text-hyperlink);
   fill: var(--text-hyperlink);
 }
+.zen-checkbox-list-with-action__label--action:disabled {
+  cursor: default;
+  color: var(--text-button-disabled);
+  fill: var(--text-button-disabled);
+}
 .zen-checkbox-list-with-action__label-text {
   display: flex;
   flex-grow: 1;
@@ -11128,6 +11147,10 @@ html:lang(ar) .zen-calendar__day {
   height: 100%;
   gap: 1rem;
 }
+.zen-chart:focus-visible {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: -2px;
+}
 .zen-chart__chart {
   flex: 1 1 100%;
   overflow: hidden;
@@ -12852,6 +12875,7 @@ html:lang(ar) .zen-radio__wrapper--mobile .zen-radio__label {
   left: 0;
   right: 0;
   overflow: hidden;
+  pointer-events: auto;
   z-index: 10005;
 }
 .zen-waiting * {
@@ -12951,6 +12975,18 @@ html:lang(ar) .zen-waiting__spinner-text {
   transform-origin: 2rem 2rem;
   animation: waiting 1.5s linear infinite;
 }
+.zen-waiting__status {
+  box-sizing: border-box;
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 10005;
+}
+.zen-waiting__status * {
+  box-sizing: border-box;
+}
 .zen-file-upload {
   box-sizing: border-box;
   position: relative;
@@ -13211,50 +13247,17 @@ html:lang(ar) .zen-file-upload__file-name {
   }
 }
 .zen-filters {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
+  max-width: 40rem;
   box-sizing: border-box;
 }
 .zen-filters * {
   box-sizing: border-box;
 }
-.zen-filters .zen-filters-search {
-  flex-grow: 0;
-  flex-shrink: 0;
-  margin: 0;
-  width: 11.25rem;
-}
-.zen-filters--mobile {
-  flex-wrap: nowrap;
-  overflow: auto hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.zen-filters--mobile::-webkit-scrollbar {
-  display: none;
-}
-.zen-filters--mobile .zen-filters__main-row--mobile {
-  flex-shrink: 0;
-}
-.zen-filters--mobile .zen-filters-container {
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-wrap: nowrap;
-  width: auto;
-  min-width: unset;
-}
-.zen-filters--mobile .zen-filters-container__mobile-scroll-wrapper {
-  overflow: visible;
-  width: auto;
-  flex-shrink: 0;
-}
 .zen-filters__main-row {
   display: flex;
   align-items: center;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
-  border-radius: 999px;
+  border-radius: var(--border-radius-default);
   border: var(--border-width-default) solid var(--borders-general);
   background-color: var(--backgrounds-main);
 }
@@ -13264,14 +13267,11 @@ html:lang(ar) .zen-file-upload__file-name {
 .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__main-row--mobile {
-  width: auto;
+  margin: 0.5rem;
 }
-.zen-filters__main-row--mobile .zen-filters-search {
-  width: auto;
+.zen-filters__main-row--initial {
+  view-transition-name: expand-panel;
 }
 .zen-filters__select-trigger {
   width: auto;
@@ -13319,53 +13319,39 @@ html:lang(ar) .zen-file-upload__file-name {
 }
 .zen-filters__search .zen-search-input__input {
   border: none;
-  border-radius: 999px;
-  display: flex;
-}
-.zen-filters__search-with-pills {
-  border-radius: 999px;
+  padding-inline: 0 0.0625rem;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
 }
-.zen-filters-popup.zen-filters-popup {
+.zen-filters-popup.zen-filters-popup:not(.zen-filters-popup--mobile) {
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  width: 28.125rem;
-  max-width: 100%;
+  width: 40rem;
+  max-width: 40rem;
   view-transition-name: expand-panel;
-  padding: 0;
 }
-.zen-filters-popup.zen-filters-popup * {
+.zen-filters-popup.zen-filters-popup:not(.zen-filters-popup--mobile) * {
   box-sizing: border-box;
 }
 .zen-filters-popup__first-row {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  border-block-end: var(--border-width-default) solid var(--borders-general);
-}
-.zen-filters-popup__first-row .zen-filters-search {
-  flex-grow: 1;
-  margin: 0;
-  width: 100%;
+  gap: 0.5rem;
+  padding: 0;
 }
-.zen-filters-popup__first-row .zen-search-input__close-button--visible {
-  visibility: visible;
+.zen-filters-popup__first-row--mobile {
+  padding: 0.5rem 1rem;
 }
 .zen-filters-popup__second-row {
+  border-block-start: var(--border-width-default) solid var(--borders-general);
+  padding: 1rem 0;
+}
+.zen-filters-popup__second-row--mobile {
   border-block-start: none;
   padding: 0;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow-y: hidden;
 }
 .zen-filters-popup__content {
   display: flex;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
 }
 .zen-filters-popup__content .zen-filters-popup__left-panel {
   display: flex;
@@ -13381,55 +13367,37 @@ html:lang(ar) .zen-file-upload__file-name {
 }
 .zen-filters-popup__content .zen-filters-popup__right-panel {
   flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+  height: 100%;
+  max-width: calc(100% - 7.6875rem);
+}
+.zen-filters-popup.zen-filters-popup--mobile {
+  width: 100%;
+  max-width: 100%;
+  view-transition-name: expand-panel;
+}
+.zen-filters-popup.zen-filters-popup--mobile .zen-filters-popup__right-panel {
   max-width: 100%;
 }
 .zen-filters-container {
   display: flex;
-  flex-flow: row wrap;
-  flex-grow: 1;
-  min-width: 0;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: 0.25rem;
-  margin-block-start: 0;
+  margin-block-start: 0.5rem;
   padding: 0.5rem 0;
 }
-.zen-filters-container .zen-chip--default {
-  background-color: var(--backgrounds-main);
-  color: var(--text-secondary);
-  fill: var(--text-secondary);
-}
-.zen-filters-container .zen-chip--default:hover {
-  background-color: var(--backgrounds-content-1);
-}
-.zen-filters-container .zen-chip--active {
-  background-color: var(--accents-general--main);
-  color: var(--action-primary--active);
-  fill: var(--action-primary--active);
-  border-color: var(--action-primary--active);
-}
-.zen-filters-container .zen-chip--active:hover {
-  border-color: var(--action-primary--active);
-}
-.zen-filters-container .zen-chip--accent {
-  background-color: var(--action-primary--active);
-  color: var(--accents-general--main);
-  fill: var(--accents-general--main);
-  border-color: var(--action-primary--active);
+.zen-filters-container__removal-chip .zen-chip__icon {
+  border: 1px solid var(--action-primary--active);
+  border-radius: 50%;
 }
-.zen-filters-container__save-chip.zen-chip--active {
-  border-color: var(--borders-general);
+.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.zen-filters-container--mobile .zen-chip {
-  height: 40px;
-  padding-block: 0.75rem;
-  padding-inline: 0.5rem;
-}
 .zen-filters-container__mobile-scroll-wrapper {
+  margin-inline-start: 0.5rem;
   padding: 0.125rem;
   display: flex;
   flex-direction: row;
@@ -13449,6 +13417,9 @@ html:lang(ar) .zen-file-upload__file-name {
 .zen-filters-container__mobile-scroll-wrapper > * {
   flex-shrink: 0;
 }
+.zen-filters-container__mobile-scroll-wrapper:last-child {
+  margin-inline-end: 0.5rem;
+}
 .zen-filters-container.zen-filters__container--no-search {
   margin-block-start: 0;
   padding: 0;
@@ -14667,19 +14638,19 @@ html:lang(ar) .zen-list-item__secondary {
   justify-content: center;
 }
 .zen-filters-search-list {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
+  max-height: 21.5625rem;
+  min-height: 21.25rem;
 }
 .zen-filters-search-list--mobile {
   padding: 1rem 0;
+  overflow-y: auto;
 }
 .zen-filters-search-list__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-block: 1rem;
-  margin-inline: 1rem;
+  margin-block: 0 0.5rem;
+  margin-inline: 0.5rem;
 }
 .zen-filters-search-list__header-title {
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -14695,10 +14666,9 @@ html:lang(ar) .zen-list-item__secondary {
 html:lang(ar) .zen-filters-search-list__header-title {
   font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
 }
-.zen-filters-search-list__header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
+.zen-filters-search-list__data {
+  padding: 1px;
+  max-height: 18.5rem;
 }
 .zen-filters-search-list .zen-filters-search-list__header--drive .zen-filters-search-list__header-title {
   font-family: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -15513,8 +15483,8 @@ html:lang(ar) .zen-tab-item.zen-tab-item--mobile .zen-tab-item__content-text {
   text-decoration: none;
 }
 .zen-tab-item:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--borders-form-field--active), 0 0 0 2px var(--backgrounds-main);
+  outline: 1px solid var(--borders-form-field--active);
+  outline-offset: -1px;
 }
 .zen-filters-toolbar {
   box-sizing: border-box;
@@ -16367,55 +16337,27 @@ html:lang(ar) .zen-filters-saved-popup__content.zen-filters-saved-popup__content
   flex-grow: 1;
   margin: 0 0.75rem;
 }
-.zen-filters-search__search-input {
-  flex: 1;
-  min-width: 0;
-}
 .zen-filters-search__selected {
   display: flex;
   gap: 0.5rem;
   flex-wrap: nowrap;
   align-items: center;
-  margin-inline-end: 0.5rem;
-  flex-shrink: 0;
+  margin-inline-start: 0.5rem;
+  overflow: hidden;
 }
 .zen-filters-search__selected-item {
   max-width: 11.3125rem;
 }
 .zen-filters-search__selected-item--more {
   flex-shrink: 0;
-  min-width: 1.375rem;
-  justify-content: center;
 }
-.zen-filters-search.zen-filters-popup__search-with-pills {
+.zen-filters-search.zen-filters-popup__search-with-pills.zen-filters-search--mobile {
   margin: 0;
   padding: 0 0.75rem;
+  border: var(--border-width-default) solid var(--borders-general);
+  border-radius: var(--border-radius-default);
 }
-.zen-filters-search.zen-filters-popup__search-with-pills .zen-filters-search__selected {
-  flex-shrink: 0;
-}
-.zen-filters-search--mobile {
-  margin: 0;
-}
-.zen-filters-search__mobile-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0 0.5rem;
-  width: 2.5rem;
-  height: 2.5rem;
-  color: inherit;
-  fill: currentcolor;
-  flex-shrink: 0;
-}
-.zen-filters-search__mobile-trigger:focus-visible {
-  outline: var(--border-width-default) solid var(--borders-form-field--active);
-  border-radius: 999px;
-}
-.zen-filters-search__mobile-trigger-icon {
+.zen-filters-search.zen-filters-popup__search-with-pills.zen-filters-search--mobile .zen-filters-search__selected {
   flex-shrink: 0;
 }
 .zen-side-panel-filters {
@@ -16613,12 +16555,16 @@ html:lang(ar) .zen-side-panel-filters__item-label--mobile {
   }
 }
 .zen-filters-select-compact {
-  padding-block: 1rem 0.25rem;
-  padding-inline: 1rem;
+  padding: 0.25rem 1rem;
   width: 100%;
-  box-sizing: border-box;
   overflow-x: auto;
-  flex-shrink: 0;
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+.zen-filters-select-compact::-webkit-scrollbar {
+  display: none;
 }
 .zen-filters-select-compact__list {
   display: flex;
@@ -17405,6 +17351,7 @@ html:lang(ar) .zen-form-layout-secondary {
   justify-content: flex-end;
   display: flex;
   gap: 0.5rem;
+  align-items: center;
 }
 .zen-main-header__mobile-container {
   display: flex;
@@ -17797,6 +17744,14 @@ html:lang(ar) .zen-mobile-filter-control__counter {
     font-size: 0.875rem;
   }
 }
+.zen-line-chart:focus-visible {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: -2px;
+}
+.zen-line-chart-mini:focus-visible {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: -2px;
+}
 .zen-mini-tabs {
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 0.875rem;
@@ -18129,6 +18084,16 @@ html:lang(ar) .zen-nav-item--active .zen-nav-item__title-text {
   border-radius: 4px;
   padding: 4px;
 }
+.zen-nav-item--tertiary .zen-nav-item__main {
+  color: var(--text-hyperlink);
+  fill: var(--text-hyperlink);
+}
+.zen-nav-item--tertiary .zen-nav-item__main:hover,
+.zen-nav-item--tertiary .zen-nav-item__main:focus-visible,
+.zen-nav-item--tertiary .zen-nav-item__main:focus {
+  color: var(--action-primary--active);
+  fill: var(--action-primary--active);
+}
 .zen-nav-item--nested.zen-nav-item--mobile .zen-nav-item__main {
   border-radius: 0;
 }
@@ -18190,6 +18155,7 @@ html:lang(ar) .zen-nav-item__main {
   align-items: center;
   gap: 4px;
   overflow: hidden;
+  text-align: start;
 }
 .zen-nav-item__title-text {
   overflow: hidden;
@@ -18383,6 +18349,9 @@ html:lang(ar) .zen-nav-edit-list__header {
 .zen-nav-edit-list__header--no-gap {
   margin-bottom: calc(var(--nav-items-gap) * -1);
 }
+.zen-nav-edit-list__header--emphasized {
+  color: var(--text-primary);
+}
 .zen-nav-edit-list .zen-nav-edit-list__item--placeholder {
   list-style-type: none;
 }
@@ -19025,6 +18994,35 @@ html:lang(ar) .zen-pill-actionable__block {
 .zen-progress__bar--high {
   background-color: var(--chart-sequential-green-1);
 }
+.zen-progress-indicator {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: 62.4375rem;
+  background-color: var(--backgrounds-hover);
+  overflow: hidden;
+}
+.zen-progress-indicator * {
+  box-sizing: border-box;
+}
+.zen-progress-indicator__fill {
+  height: 100%;
+  border-radius: 62.4375rem;
+}
+.zen-progress-indicator__fill--positive {
+  background-color: var(--data--categorical-green);
+}
+.zen-progress-indicator__fill--negative {
+  background-color: var(--data--categorical-red);
+}
+.zen-progress-indicator__fill--warning {
+  background-color: var(--data--categorical-yellow);
+}
+.zen-progress-indicator__fill--default {
+  background-color: var(--action-primary--default);
+}
 .zen-sort-container {
   box-sizing: border-box;
   display: flex;
@@ -19321,6 +19319,7 @@ html:lang(ar) .zen-stepper-field.zen-stepper-field--mobile {
   display: block;
   width: 100%;
   flex-grow: 1;
+  color: var(--text-primary);
 }
 .zen-tab-bar-content * {
   box-sizing: border-box;
@@ -19350,6 +19349,57 @@ html:lang(ar) .zen-tab-bar-content {
 .zen-tab-bar * {
   box-sizing: border-box;
 }
+.zen-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  max-width: 100%;
+}
+.zen-tag * {
+  box-sizing: border-box;
+}
+.zen-tag__dot {
+  flex-shrink: 0;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+}
+.zen-tag__dot--red {
+  background-color: var(--data--categorical-red);
+}
+.zen-tag__dot--yellow {
+  background-color: var(--data--categorical-yellow);
+}
+.zen-tag__dot--green {
+  background-color: var(--data--categorical-green);
+}
+.zen-tag__dot--blue {
+  background-color: var(--data--categorical-blue);
+}
+.zen-tag__dot--grey {
+  background-color: var(--data--categorical-grey);
+}
+.zen-tag__label {
+  font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.02rem;
+  line-height: 1rem;
+  text-transform: none;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  color: var(--text-primary);
+  min-width: 0;
+}
+html:lang(ar) .zen-tag__label {
+  font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+}
 .zen-toast {
   box-sizing: border-box;
 }