@geotab/zenith 3.2.0 → 3.3.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (211) hide show
  1. package/README.md +25 -1
  2. package/dist/card/card.d.ts +3 -0
  3. package/dist/card/card.js +15 -5
  4. package/dist/card/components/cardToggle/cardToggle.d.ts +5 -0
  5. package/dist/card/components/cardToggle/cardToggle.js +7 -0
  6. package/dist/card/components/title.js +3 -3
  7. package/dist/cardContainer/cardContainer.d.ts +2 -1
  8. package/dist/cardContainer/cardContainer.js +4 -3
  9. package/dist/chart/barChart/getDefaultDatasetStyle.js +8 -6
  10. package/dist/chart/lineChart/getDatasetColor.js +8 -6
  11. package/dist/chart/lineChart/useSummary.js +1 -1
  12. package/dist/chart/pieChart/getDefaultDatasetStyle.js +8 -6
  13. package/dist/chart/plugins/linePlugin/getInterpolatedValue.js +1 -1
  14. package/dist/chart/plugins/linePlugin/linePlugin.js +16 -4
  15. package/dist/commonHelpers/hooks/useEscape.js +4 -0
  16. package/dist/commonHelpers/hooks/usePillSize.d.ts +2 -1
  17. package/dist/commonHelpers/hooks/usePillSize.js +6 -3
  18. package/dist/commonStyles/colors/colors.less +9 -0
  19. package/dist/dataFeed/dataFeed.d.ts +2 -1
  20. package/dist/dataFeed/dataFeed.js +18 -3
  21. package/dist/dataFeed/dataFeedColumnsItems.d.ts +2 -1
  22. package/dist/dataFeed/dataFeedColumnsItems.js +6 -4
  23. package/dist/dataGrid/cell/cell.d.ts +2 -1
  24. package/dist/dataGrid/cell/cell.js +2 -1
  25. package/dist/dataGrid/dataGrid.d.ts +3 -1
  26. package/dist/dataGrid/dataGrid.js +7 -2
  27. package/dist/dataGrid/row/row.d.ts +3 -1
  28. package/dist/dataGrid/row/row.js +3 -3
  29. package/dist/dataGrid/withFlexibleColumns/components/columnSettingsSidePanel.js +8 -4
  30. package/dist/divider/divider.d.ts +5 -5
  31. package/dist/divider/divider.js +6 -2
  32. package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js +2 -2
  33. package/dist/footerButtons/footerButtons.d.ts +4 -0
  34. package/dist/footerButtons/footerButtons.js +4 -6
  35. package/dist/groupsFilterRaw/groupsFilterRaw.js +1 -0
  36. package/dist/index.css +478 -255
  37. package/dist/index.d.ts +3 -1
  38. package/dist/index.js +20 -18
  39. package/dist/lineChart/utils.js +2 -9
  40. package/dist/list/listItem/listItem.js +26 -0
  41. package/dist/mobileSheet/components/mobileSheetFooter.d.ts +1 -0
  42. package/dist/mobileSheet/components/mobileSheetFooter.js +1 -1
  43. package/dist/mobileSheet/mobileSheet.js +1 -1
  44. package/dist/pill/components/pillActionable/pillActionable.js +5 -4
  45. package/dist/pill/components/pillNonActionable/pillNonActionable.js +11 -5
  46. package/dist/pill/interfaces/pillActionable.interface.d.ts +1 -0
  47. package/dist/pill/interfaces/pillNonActionable.interface.d.ts +1 -0
  48. package/dist/pillExpandable/pillExpandable.js +6 -6
  49. package/dist/rangeRaw/rangeRaw.js +1 -0
  50. package/dist/selectRaw/selectRaw.js +6 -3
  51. package/dist/sidePanel/sidePanel.d.ts +1 -1
  52. package/dist/sidePanel/sidePanel.js +7 -3
  53. package/dist/table/children/tableDetailPanel.d.ts +9 -0
  54. package/dist/table/children/tableDetailPanel.js +6 -0
  55. package/dist/table/children/useTableChildren.d.ts +2 -1
  56. package/dist/table/children/useTableChildren.js +17 -2
  57. package/dist/table/detailPanel/detailPanel.d.ts +4 -0
  58. package/dist/table/detailPanel/detailPanel.js +140 -0
  59. package/dist/table/detailPanel/detailPanelHeader.d.ts +4 -0
  60. package/dist/table/detailPanel/detailPanelHeader.js +105 -0
  61. package/dist/table/detailPanel/interfaces.d.ts +8 -0
  62. package/dist/table/detailPanel/interfaces.js +2 -0
  63. package/dist/table/table.d.ts +6 -1
  64. package/dist/table/table.js +248 -68
  65. package/dist/utils/localization/translations/cs.json +3 -1
  66. package/dist/utils/localization/translations/da-DK.json +3 -1
  67. package/dist/utils/localization/translations/de.json +3 -1
  68. package/dist/utils/localization/translations/en-json.d.ts +315 -0
  69. package/dist/utils/localization/translations/en-json.js +318 -0
  70. package/dist/utils/localization/translations/en.json +5 -1
  71. package/dist/utils/localization/translations/es.json +3 -1
  72. package/dist/utils/localization/translations/fi-FI.json +3 -1
  73. package/dist/utils/localization/translations/fr-FR.json +3 -1
  74. package/dist/utils/localization/translations/fr.json +3 -1
  75. package/dist/utils/localization/translations/hu-HU.json +3 -1
  76. package/dist/utils/localization/translations/id.json +3 -1
  77. package/dist/utils/localization/translations/it.json +3 -1
  78. package/dist/utils/localization/translations/ja.json +3 -1
  79. package/dist/utils/localization/translations/ko-KR.json +3 -1
  80. package/dist/utils/localization/translations/ms.json +3 -1
  81. package/dist/utils/localization/translations/nb-NO.json +3 -1
  82. package/dist/utils/localization/translations/nl.json +3 -1
  83. package/dist/utils/localization/translations/pl.json +3 -1
  84. package/dist/utils/localization/translations/pt-BR.json +3 -1
  85. package/dist/utils/localization/translations/sk-SK.json +3 -1
  86. package/dist/utils/localization/translations/sv.json +3 -1
  87. package/dist/utils/localization/translations/th.json +3 -1
  88. package/dist/utils/localization/translations/tr.json +3 -1
  89. package/dist/utils/localization/translations/zh-Hans.json +3 -1
  90. package/dist/utils/localization/translations/zh-TW.json +3 -1
  91. package/esm/card/card.d.ts +3 -0
  92. package/esm/card/card.js +15 -5
  93. package/esm/card/components/cardToggle/cardToggle.d.ts +5 -0
  94. package/esm/card/components/cardToggle/cardToggle.js +3 -0
  95. package/esm/card/components/title.js +3 -3
  96. package/esm/cardContainer/cardContainer.d.ts +2 -1
  97. package/esm/cardContainer/cardContainer.js +4 -3
  98. package/esm/chart/barChart/getDefaultDatasetStyle.js +8 -6
  99. package/esm/chart/lineChart/getDatasetColor.js +8 -6
  100. package/esm/chart/lineChart/useSummary.js +1 -1
  101. package/esm/chart/pieChart/getDefaultDatasetStyle.js +8 -6
  102. package/esm/chart/plugins/linePlugin/getInterpolatedValue.js +1 -1
  103. package/esm/chart/plugins/linePlugin/linePlugin.js +16 -4
  104. package/esm/commonHelpers/hooks/useEscape.js +4 -0
  105. package/esm/commonHelpers/hooks/usePillSize.d.ts +2 -1
  106. package/esm/commonHelpers/hooks/usePillSize.js +6 -3
  107. package/esm/commonStyles/colors/colorsConstant.d.ts +6 -0
  108. package/esm/commonStyles/colors/colorsConstant.js +50 -0
  109. package/esm/dataFeed/dataFeed.d.ts +2 -1
  110. package/esm/dataFeed/dataFeed.js +18 -3
  111. package/esm/dataFeed/dataFeedColumnsItems.d.ts +2 -1
  112. package/esm/dataFeed/dataFeedColumnsItems.js +6 -4
  113. package/esm/dataGrid/cell/cell.d.ts +2 -1
  114. package/esm/dataGrid/cell/cell.js +2 -1
  115. package/esm/dataGrid/dataGrid.d.ts +3 -1
  116. package/esm/dataGrid/dataGrid.js +7 -2
  117. package/esm/dataGrid/row/row.d.ts +3 -1
  118. package/esm/dataGrid/row/row.js +3 -3
  119. package/esm/dataGrid/withFlexibleColumns/components/columnSettingsSidePanel.js +8 -4
  120. package/esm/divider/divider.d.ts +5 -5
  121. package/esm/divider/divider.js +6 -2
  122. package/esm/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js +2 -2
  123. package/esm/footerButtons/footerButtons.d.ts +4 -0
  124. package/esm/footerButtons/footerButtons.js +4 -6
  125. package/esm/groupsFilterRaw/groupsFilterRaw.js +1 -0
  126. package/esm/index.d.ts +3 -1
  127. package/esm/index.js +1 -0
  128. package/esm/lineChart/utils.js +2 -9
  129. package/esm/list/listItem/listItem.js +26 -0
  130. package/esm/mobileSheet/components/mobileSheetFooter.d.ts +1 -0
  131. package/esm/mobileSheet/components/mobileSheetFooter.js +1 -1
  132. package/esm/mobileSheet/mobileSheet.js +1 -1
  133. package/esm/pill/components/pillActionable/pillActionable.js +5 -4
  134. package/esm/pill/components/pillNonActionable/pillNonActionable.js +11 -5
  135. package/esm/pill/interfaces/pillActionable.interface.d.ts +1 -0
  136. package/esm/pill/interfaces/pillNonActionable.interface.d.ts +1 -0
  137. package/esm/pillExpandable/pillExpandable.js +6 -6
  138. package/esm/rangeRaw/rangeRaw.js +1 -0
  139. package/esm/selectRaw/selectRaw.js +6 -3
  140. package/esm/sidePanel/sidePanel.d.ts +1 -1
  141. package/esm/sidePanel/sidePanel.js +7 -3
  142. package/esm/table/children/tableDetailPanel.d.ts +9 -0
  143. package/esm/table/children/tableDetailPanel.js +2 -0
  144. package/esm/table/children/useTableChildren.d.ts +2 -1
  145. package/esm/table/children/useTableChildren.js +17 -2
  146. package/esm/table/detailPanel/detailPanel.d.ts +4 -0
  147. package/esm/table/detailPanel/detailPanel.js +131 -0
  148. package/esm/table/detailPanel/detailPanelHeader.d.ts +4 -0
  149. package/esm/table/detailPanel/detailPanelHeader.js +96 -0
  150. package/esm/table/detailPanel/interfaces.d.ts +8 -0
  151. package/esm/table/table.d.ts +6 -1
  152. package/esm/table/table.js +201 -61
  153. package/esm/utils/localization/translations/cs.json +3 -1
  154. package/esm/utils/localization/translations/da-DK.json +3 -1
  155. package/esm/utils/localization/translations/de.json +3 -1
  156. package/esm/utils/localization/translations/en-json.d.ts +315 -0
  157. package/esm/utils/localization/translations/en-json.js +315 -0
  158. package/esm/utils/localization/translations/en.json +5 -1
  159. package/esm/utils/localization/translations/es.json +3 -1
  160. package/esm/utils/localization/translations/fi-FI.json +3 -1
  161. package/esm/utils/localization/translations/fr-FR.json +3 -1
  162. package/esm/utils/localization/translations/fr.json +3 -1
  163. package/esm/utils/localization/translations/hu-HU.json +3 -1
  164. package/esm/utils/localization/translations/id.json +3 -1
  165. package/esm/utils/localization/translations/it.json +3 -1
  166. package/esm/utils/localization/translations/ja.json +3 -1
  167. package/esm/utils/localization/translations/ko-KR.json +3 -1
  168. package/esm/utils/localization/translations/ms.json +3 -1
  169. package/esm/utils/localization/translations/nb-NO.json +3 -1
  170. package/esm/utils/localization/translations/nl.json +3 -1
  171. package/esm/utils/localization/translations/pl.json +3 -1
  172. package/esm/utils/localization/translations/pt-BR.json +3 -1
  173. package/esm/utils/localization/translations/sk-SK.json +3 -1
  174. package/esm/utils/localization/translations/sv.json +3 -1
  175. package/esm/utils/localization/translations/th.json +3 -1
  176. package/esm/utils/localization/translations/tr.json +3 -1
  177. package/esm/utils/localization/translations/zh-Hans.json +3 -1
  178. package/esm/utils/localization/translations/zh-TW.json +3 -1
  179. package/package.json +7 -7
  180. package/dist/nav/storyHelpers/storyDecorator.d.ts +0 -35
  181. package/dist/nav/storyHelpers/storyDecorator.js +0 -79
  182. package/esm/nav/storyHelpers/storyDecorator.d.ts +0 -35
  183. package/esm/nav/storyHelpers/storyDecorator.js +0 -74
  184. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/fetchEntities.d.ts +0 -3
  185. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/fetchEntities.js +0 -32
  186. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/gridModel.d.ts +0 -81
  187. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/gridModel.js +0 -113
  188. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/ColumnWaiting.d.ts +0 -4
  189. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/ColumnWaiting.js +0 -4
  190. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/EntitiesListAction.d.ts +0 -18
  191. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/EntitiesListAction.js +0 -193
  192. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/constants/index.d.ts +0 -1
  193. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/constants/index.js +0 -1
  194. package/esm/storybookHelpers/dataGridWithDifferentCellOptions/interfaces/entity.d.ts +0 -7
  195. package/esm/storybookHelpers/fieldDelayRenderer.d.ts +0 -5
  196. package/esm/storybookHelpers/fieldDelayRenderer.js +0 -20
  197. package/esm/storybookHelpers/storyFeedbackProviderDecorator.d.ts +0 -2
  198. package/esm/storybookHelpers/storyFeedbackProviderDecorator.js +0 -16
  199. package/esm/storybookHelpers/storyGlobalWrapper.d.ts +0 -2
  200. package/esm/storybookHelpers/storyGlobalWrapper.js +0 -3
  201. package/esm/storybookHelpers/storyItem.d.ts +0 -8
  202. package/esm/storybookHelpers/storyItem.js +0 -17
  203. package/esm/storybookHelpers/storyLanguageDecorator.d.ts +0 -2
  204. package/esm/storybookHelpers/storyLanguageDecorator.js +0 -4
  205. package/esm/storybookHelpers/storyQueryClientProvider.d.ts +0 -2
  206. package/esm/storybookHelpers/storyQueryClientProvider.js +0 -15
  207. package/esm/storybookHelpers/storyThemeDecorator.d.ts +0 -2
  208. package/esm/storybookHelpers/storyThemeDecorator.js +0 -15
  209. package/esm/storybookHelpers/storyTopWindowDecorator.d.ts +0 -2
  210. package/esm/storybookHelpers/storyTopWindowDecorator.js +0 -4
  211. /package/esm/{storybookHelpers/dataGridWithDifferentCellOptions/interfaces/entity.js → table/detailPanel/interfaces.js} +0 -0
package/dist/index.css CHANGED
@@ -104,6 +104,14 @@
104
104
  --duty-status-rest: #FE6867;
105
105
  --duty-status-drive: #49C649;
106
106
  --duty-status-exemption: #4E677E;
107
+ --data--categorical-light-blue: #3CCDE5;
108
+ --data--categorical-blue: #428AFF;
109
+ --data--categorical-purple: #8256E5;
110
+ --data--categorical-green: #06C989;
111
+ --data--categorical-orange: #F98C41;
112
+ --data--categorical-yellow: #F5BD60;
113
+ --data--categorical-red: #E56A6A;
114
+ --data--categorical-grey: #8A94A2;
107
115
  }
108
116
  .zen-dark {
109
117
  --text-primary: #FFFFFF;
@@ -2255,6 +2263,10 @@
2255
2263
  min-height: unset;
2256
2264
  align-self: flex-start;
2257
2265
  }
2266
+ .zen-card-container.zen-card-container--no-width-constraint {
2267
+ min-width: 0;
2268
+ max-width: unset;
2269
+ }
2258
2270
  @media (max-width: 640px) {
2259
2271
  .zen-card-container {
2260
2272
  max-width: unset;
@@ -2300,6 +2312,9 @@
2300
2312
  visibility: visible;
2301
2313
  pointer-events: auto;
2302
2314
  }
2315
+ .zen-side-panel--shown .zen-form-field--new-component {
2316
+ display: flex;
2317
+ }
2303
2318
  .zen-side-panel--left-positioned {
2304
2319
  left: 0;
2305
2320
  right: auto;
@@ -2415,16 +2430,18 @@
2415
2430
  .zen-shield-faded--visible {
2416
2431
  opacity: 0.1;
2417
2432
  }
2418
- .mobile-sheet-footer {
2433
+ .zen-mobile-sheet-footer {
2419
2434
  box-sizing: border-box;
2420
2435
  border-top: 1px solid var(--borders-general);
2421
2436
  display: grid;
2422
- padding: 12px;
2423
2437
  gap: 12px;
2424
2438
  }
2425
- .mobile-sheet-footer * {
2439
+ .zen-mobile-sheet-footer * {
2426
2440
  box-sizing: border-box;
2427
2441
  }
2442
+ .zen-mobile-sheet-footer--borderless {
2443
+ border-top-width: 0;
2444
+ }
2428
2445
  .zen-mobile-sheet-wrapper {
2429
2446
  z-index: 11010;
2430
2447
  }
@@ -2511,6 +2528,9 @@
2511
2528
  overflow-y: hidden;
2512
2529
  position: fixed;
2513
2530
  }
2531
+ .zen-mobile-sheet__footer {
2532
+ flex: 0 0 auto;
2533
+ }
2514
2534
  .zen-mobile-sheet-wrapper--drive.zen-mobile-sheet-wrapper--drive,
2515
2535
  .zen-mobile-sheet-wrapper--drive-tablet.zen-mobile-sheet-wrapper--drive-tablet {
2516
2536
  max-width: 520px;
@@ -2737,32 +2757,13 @@
2737
2757
  background-color: var(--backgrounds-content-1);
2738
2758
  fill: var(--text-secondary);
2739
2759
  }
2740
- .zen-card-title__text {
2741
- font-family: var(--main-font);
2742
- font-size: 14px;
2743
- font-style: normal;
2744
- font-weight: 500;
2745
- letter-spacing: 0.16px;
2746
- line-height: 16px;
2747
- text-transform: none;
2748
- max-width: 520px;
2749
- display: -webkit-box;
2750
- -webkit-box-orient: vertical;
2751
- -webkit-line-clamp: 2;
2752
- overflow: hidden;
2753
- text-overflow: ellipsis;
2754
- text-align: start;
2755
- color: var(--text-primary);
2756
- }
2757
2760
  .zen-card-title__link {
2758
2761
  display: flex;
2759
- align-items: center;
2760
- justify-content: center;
2761
- flex: 1 1 auto;
2762
2762
  gap: 4px;
2763
2763
  text-decoration: none;
2764
2764
  min-width: 0;
2765
2765
  }
2766
+ .zen-card-title__text,
2766
2767
  .zen-card-title__link-text {
2767
2768
  font-family: var(--main-font);
2768
2769
  font-size: 14px;
@@ -2771,18 +2772,22 @@
2771
2772
  letter-spacing: 0.16px;
2772
2773
  line-height: 16px;
2773
2774
  text-transform: none;
2774
- color: var(--text-primary);
2775
- flex: 1 1 auto;
2776
- text-overflow: ellipsis;
2775
+ max-width: 520px;
2776
+ display: -webkit-box;
2777
+ -webkit-box-orient: vertical;
2778
+ -webkit-line-clamp: 2;
2777
2779
  overflow: hidden;
2778
- white-space: nowrap;
2779
- min-width: 0;
2780
+ text-overflow: ellipsis;
2781
+ text-align: start;
2782
+ color: var(--text-primary);
2780
2783
  }
2781
2784
  .zen-card-title__link-chevron {
2785
+ display: inline-flex;
2786
+ align-items: center;
2787
+ vertical-align: middle;
2782
2788
  width: 16px;
2783
2789
  height: 16px;
2784
2790
  fill: var(--text-primary);
2785
- flex: 0 0 auto;
2786
2791
  }
2787
2792
  .zen-card-title__clickable {
2788
2793
  gap: 4px;
@@ -3367,6 +3372,9 @@
3367
3372
  position: sticky;
3368
3373
  right: 0;
3369
3374
  }
3375
+ .zen-data-grid__row:hover > .zen-data-grid__row-cell--active {
3376
+ background-color: var(--backgrounds-content-2);
3377
+ }
3370
3378
  .zen-data-grid__row--selected > .zen-data-grid__row-cell {
3371
3379
  background-color: var(--backgrounds-content-0);
3372
3380
  }
@@ -3412,6 +3420,9 @@
3412
3420
  .zen-data-grid__row-cell--clickable {
3413
3421
  cursor: pointer;
3414
3422
  }
3423
+ .zen-data-grid__row-cell--active {
3424
+ background-color: var(--backgrounds-content-2);
3425
+ }
3415
3426
  .zen-data-grid__empty {
3416
3427
  flex: 1 1 auto;
3417
3428
  }
@@ -4543,6 +4554,183 @@
4543
4554
  line-height: 16px;
4544
4555
  text-transform: none;
4545
4556
  }
4557
+ .zen-table__detail-panel--header {
4558
+ background-color: var(--backgrounds-main);
4559
+ border-bottom: 1px solid var(--borders-general);
4560
+ position: sticky;
4561
+ top: 0;
4562
+ left: 0;
4563
+ box-sizing: border-box;
4564
+ width: 100%;
4565
+ z-index: 10;
4566
+ display: flex;
4567
+ flex-direction: column;
4568
+ gap: 8px;
4569
+ padding: 16px;
4570
+ }
4571
+ .zen-table__detail-panel--header-content,
4572
+ .zen-table__detail-panel--header-description {
4573
+ box-sizing: border-box;
4574
+ gap: 8px;
4575
+ display: flex;
4576
+ width: 100%;
4577
+ }
4578
+ .zen-table__detail-panel--header-content {
4579
+ justify-content: space-between;
4580
+ justify-items: center;
4581
+ align-items: center;
4582
+ }
4583
+ .zen-table__detail-panel--header-description {
4584
+ font-family: var(--main-font);
4585
+ font-size: 14px;
4586
+ font-style: normal;
4587
+ font-weight: 500;
4588
+ letter-spacing: 0.16px;
4589
+ line-height: 16px;
4590
+ text-transform: none;
4591
+ color: var(--text-primary);
4592
+ justify-content: flex-start;
4593
+ align-items: flex-start;
4594
+ flex-direction: column;
4595
+ }
4596
+ .zen-table__detail-panel--header-description * {
4597
+ font-family: var(--main-font);
4598
+ font-size: 12px;
4599
+ font-style: normal;
4600
+ font-weight: 400;
4601
+ letter-spacing: 0.32px;
4602
+ line-height: 16px;
4603
+ text-transform: none;
4604
+ }
4605
+ .zen-table__detail-panel--header-title {
4606
+ font-family: var(--main-font);
4607
+ font-size: 16px;
4608
+ font-style: normal;
4609
+ font-weight: 500;
4610
+ letter-spacing: 0;
4611
+ line-height: 24px;
4612
+ text-transform: none;
4613
+ color: var(--text-primary);
4614
+ display: -webkit-box;
4615
+ line-clamp: 2;
4616
+ -webkit-line-clamp: 2;
4617
+ -webkit-box-orient: vertical;
4618
+ overflow: hidden;
4619
+ text-overflow: ellipsis;
4620
+ }
4621
+ .zen-table__detail-panel--header-details {
4622
+ font-family: var(--main-font);
4623
+ font-size: 14px;
4624
+ font-style: normal;
4625
+ font-weight: 500;
4626
+ letter-spacing: 0.16px;
4627
+ line-height: 16px;
4628
+ text-transform: none;
4629
+ color: var(--text-primary);
4630
+ display: flex;
4631
+ gap: 8px;
4632
+ flex: 1 1 auto;
4633
+ }
4634
+ .zen-table__detail-panel--header-actions {
4635
+ display: flex;
4636
+ justify-content: flex-end;
4637
+ gap: 8px;
4638
+ }
4639
+ .zen-table-detail-panel__header * {
4640
+ box-sizing: border-box;
4641
+ }
4642
+ .zen-table__detail-panel-mobile .zen-table__detail-panel--header {
4643
+ padding: 0;
4644
+ border-bottom: none;
4645
+ }
4646
+ .zen-table__detail-panel-mobile .zen-mobile-sheet__title {
4647
+ border-bottom: 1px solid var(--borders-general);
4648
+ }
4649
+ .zen-table__detail-panel {
4650
+ position: relative;
4651
+ width: 360px;
4652
+ max-width: 600px;
4653
+ height: 100%;
4654
+ min-height: 400px;
4655
+ max-height: 1920px;
4656
+ overflow: hidden;
4657
+ display: flex;
4658
+ flex-direction: column;
4659
+ opacity: 0;
4660
+ flex: 0 0 0;
4661
+ transform: translateX(20px);
4662
+ will-change: opacity, transform, flex-basis;
4663
+ 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);
4664
+ }
4665
+ .zen-table__detail-panel--shown {
4666
+ opacity: 1;
4667
+ flex: 0 0 360px;
4668
+ transform: translateX(0);
4669
+ }
4670
+ @container table-content (max-width: 600px) {
4671
+ .zen-table__detail-panel {
4672
+ position: absolute;
4673
+ top: 0;
4674
+ right: 0;
4675
+ width: 100%;
4676
+ max-width: 100%;
4677
+ min-width: 0;
4678
+ transform: translateX(100%);
4679
+ overflow-y: hidden;
4680
+ will-change: opacity, transform;
4681
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
4682
+ }
4683
+ .zen-table__detail-panel--shown {
4684
+ opacity: 1;
4685
+ transform: translateX(0);
4686
+ overflow-y: auto;
4687
+ }
4688
+ }
4689
+ .zen-table__detail-panel-content {
4690
+ overflow-y: auto;
4691
+ flex: 1;
4692
+ padding: 12px;
4693
+ }
4694
+ .zen-table__detail-panel-footer {
4695
+ padding: 12px;
4696
+ }
4697
+ .zen-table__detail-panel .zen-page-header__page-name {
4698
+ font-family: var(--main-font);
4699
+ font-size: 16px;
4700
+ font-style: normal;
4701
+ font-weight: 500;
4702
+ letter-spacing: 0;
4703
+ line-height: 24px;
4704
+ text-transform: none;
4705
+ }
4706
+ .zen-table__detail-panel-footer {
4707
+ font-family: var(--main-font);
4708
+ font-size: 14px;
4709
+ font-style: normal;
4710
+ font-weight: 500;
4711
+ letter-spacing: 0.16px;
4712
+ line-height: 16px;
4713
+ text-transform: none;
4714
+ color: var(--text-primary);
4715
+ background-color: var(--backgrounds-main);
4716
+ display: flex;
4717
+ justify-content: flex-end;
4718
+ gap: 8px;
4719
+ position: sticky;
4720
+ bottom: 0;
4721
+ }
4722
+ .zen-table__detail-panel.zen-card-container {
4723
+ padding: 0;
4724
+ width: 360px;
4725
+ }
4726
+ @container table-content (max-width: 600px) {
4727
+ .zen-table__detail-panel.zen-card-container.zen-table__detail-panel--shown {
4728
+ max-width: min(100%, 600px);
4729
+ }
4730
+ }
4731
+ .zen-table__detail-panel-mobile {
4732
+ max-height: 90%;
4733
+ }
4546
4734
  :root {
4547
4735
  --grid-header-height: 52px;
4548
4736
  }
@@ -4581,6 +4769,24 @@
4581
4769
  .zen-table-wrapper--with-toolbar .zen-data-grid-wrapper {
4582
4770
  height: calc(100% - 48px);
4583
4771
  }
4772
+ .zen-table__content {
4773
+ height: 100%;
4774
+ position: relative;
4775
+ display: flex;
4776
+ gap: 12px;
4777
+ container-type: inline-size;
4778
+ container-name: table-content;
4779
+ }
4780
+ .zen-table__table {
4781
+ height: 100%;
4782
+ flex: 1 1 auto;
4783
+ min-width: 0;
4784
+ transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
4785
+ }
4786
+ .pie-chart-1 {
4787
+ width: 100%;
4788
+ height: 200px;
4789
+ }
4584
4790
  .zen-action-link-column {
4585
4791
  display: flex;
4586
4792
  align-items: center;
@@ -5424,7 +5630,7 @@
5424
5630
  }
5425
5631
  .zen-pill-actionable--keyboard-nav.zen-pill-actionable--default {
5426
5632
  outline: 1px solid var(--borders-form-field--active);
5427
- outline-offset: 4px;
5633
+ outline-offset: 2px;
5428
5634
  }
5429
5635
  .zen-pill-actionable--active {
5430
5636
  background-color: var(--action-primary--default);
@@ -5432,6 +5638,10 @@
5432
5638
  color: var(--text-reverse-primary);
5433
5639
  fill: var(--text-reverse-primary);
5434
5640
  }
5641
+ .zen-pill-actionable--active.zen-pill-actionable--keyboard-nav {
5642
+ outline: 1px solid var(--borders-form-field--active);
5643
+ outline-offset: 2px;
5644
+ }
5435
5645
  .zen-pill-actionable--readonly {
5436
5646
  color: var(--text-secondary);
5437
5647
  background-color: var(--backgrounds-content-0);
@@ -5565,224 +5775,41 @@
5565
5775
  align-items: center;
5566
5776
  gap: 4px;
5567
5777
  }
5568
- .zen-form-list-label {
5569
- max-height: 32px;
5570
- display: flex;
5571
- align-items: center;
5572
- }
5573
- .zen-form-control {
5574
- align-items: start;
5575
- }
5576
- .zen-form-group-list-label {
5577
- font-style: italic;
5578
- }
5579
- .zen-divider {
5580
- width: 100%;
5581
- border-top: 1px solid var(--borders-general);
5582
- }
5583
- .zen-additional-sub-section__secondary {
5584
- margin: 16px 0;
5585
- font-family: var(--main-font);
5586
- font-size: 12px;
5587
- font-style: normal;
5588
- font-weight: 400;
5589
- letter-spacing: 0.32px;
5590
- line-height: 16px;
5591
- text-transform: none;
5592
- color: var(--text-secondary);
5593
- }
5594
- .zen-additional-sub-section__content {
5595
- padding: 16px;
5596
- }
5597
- .zen-additional-sub-section .zen-accordion__content {
5598
- padding: 0;
5599
- }
5600
- .zen-form-section-default-title {
5601
- font-family: var(--main-font);
5602
- font-size: 14px;
5603
- font-style: normal;
5604
- font-weight: 500;
5605
- letter-spacing: 0.16px;
5606
- line-height: 16px;
5607
- text-transform: none;
5608
- color: var(--text-primary);
5609
- }
5610
- .zen-form-section-card-content {
5611
- display: grid;
5612
- gap: 16px;
5613
- }
5614
- .zen-form-section-error-banner {
5615
- height: fit-content;
5616
- }
5617
- .zen-form-layout-title {
5618
- font-family: var(--main-font);
5619
- font-size: 16px;
5620
- font-style: normal;
5621
- font-weight: 500;
5622
- letter-spacing: 0;
5623
- line-height: 24px;
5624
- text-transform: none;
5625
- }
5626
- .zen-modal {
5627
- box-sizing: border-box;
5628
- box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
5629
- position: absolute;
5630
- width: 100%;
5631
- height: 100%;
5632
- top: 0;
5633
- bottom: 0;
5634
- left: 0;
5635
- right: 0;
5636
- display: flex;
5637
- align-items: center;
5638
- justify-content: center;
5639
- }
5640
- .zen-modal * {
5641
- box-sizing: border-box;
5642
- }
5643
- .zen-modal__shield {
5644
- box-sizing: border-box;
5645
- position: absolute;
5646
- top: 0;
5647
- bottom: 0;
5648
- left: 0;
5649
- right: 0;
5650
- z-index: 11000;
5651
- background-color: var(--backgrounds-hover);
5652
- opacity: 0.5;
5653
- }
5654
- .zen-modal__shield * {
5655
- box-sizing: border-box;
5656
- }
5657
- .zen-modal-content {
5658
- box-sizing: border-box;
5659
- z-index: 11001;
5660
- width: 100%;
5661
- display: flex;
5662
- flex-direction: column;
5663
- background-color: var(--backgrounds-main);
5664
- color: var(--text-primary);
5665
- padding: 0;
5666
- box-shadow: 0px 2px 6px rgba(11, 32, 50, 0.2);
5667
- max-height: 90vh;
5668
- border-radius: 4px;
5669
- overflow: hidden;
5670
- }
5671
- .zen-modal-content * {
5672
- box-sizing: border-box;
5673
- }
5674
- .zen-modal-content--hidden-overflow.zen-modal-content--hidden-overflow {
5675
- overflow-y: hidden;
5676
- }
5677
- .zen-modal-content__header {
5678
- display: flex;
5679
- justify-content: space-between;
5680
- align-items: center;
5681
- flex-wrap: nowrap;
5682
- padding: 24px 24px 16px 24px;
5683
- min-height: 72px;
5684
- }
5685
- .zen-modal-content__header-title {
5686
- display: flex;
5687
- align-items: center;
5688
- gap: 4px;
5689
- flex-grow: 2;
5690
- }
5691
- .zen-modal-content__header-close-button.zen-modal-content__header-close-button {
5692
- display: flex;
5693
- align-items: center;
5694
- justify-content: center;
5695
- flex-shrink: 0;
5696
- border: none;
5697
- padding: 0;
5698
- cursor: pointer;
5699
- align-self: flex-start;
5700
- border-radius: 50%;
5701
- padding: 8px;
5702
- }
5703
- .zen-modal-content__body {
5704
- overflow: auto;
5705
- padding: 12px 24px 32px 24px;
5706
- }
5707
- .zen-modal-content__body--no-footer {
5708
- padding-bottom: 16px;
5709
- }
5710
- .zen-modal-content__footer {
5711
- display: flex;
5712
- justify-content: space-between;
5713
- padding: 16px 24px;
5714
- min-height: 59px;
5715
- background-color: var(--backgrounds-content-0);
5716
- }
5717
- .zen-modal-content__footer--mobile {
5718
- display: flex;
5719
- flex-direction: column-reverse;
5720
- gap: 8px;
5721
- }
5722
- .zen-modal-content__footer--mobile .zen-modal-content__icon-button {
5723
- justify-content: center;
5724
- }
5725
- .zen-modal-content__footer--mobile .zen-modal-content__icon-button .zen-caption__content {
5726
- margin-right: 0;
5727
- }
5728
- .zen-modal-content__footer-left {
5729
- display: flex;
5730
- align-items: center;
5731
- }
5732
- .zen-modal-content__footer-left--mobile {
5733
- display: block;
5734
- align-items: unset;
5735
- }
5736
- .zen-modal-content__footer-right {
5737
- display: flex;
5738
- align-items: center;
5739
- gap: 8px;
5740
- }
5741
- .zen-modal-content__footer-right--mobile {
5742
- display: flex;
5743
- align-items: unset;
5744
- flex-direction: column;
5745
- gap: 8px;
5746
- }
5747
- .zen-modal-content__left-button {
5748
- width: 100%;
5749
- }
5750
- .zen-modal-content__icon {
5751
- display: flex;
5752
- align-items: center;
5753
- margin-right: 4px;
5754
- padding: 4px;
5755
- border-radius: 99px;
5756
- }
5757
- .zen-modal-content__icon--default {
5758
- fill: var(--action-secondary--default);
5759
- color: var(--action-secondary--default);
5760
- }
5761
- .zen-modal-content__icon--info {
5762
- fill: var(--accents-general--detail);
5763
- color: var(--accents-general--detail);
5764
- background-color: var(--accents-general--main);
5778
+ .zen-form-list-label {
5779
+ max-height: 32px;
5780
+ display: flex;
5781
+ align-items: center;
5765
5782
  }
5766
- .zen-modal-content__icon--warning {
5767
- fill: var(--accents-warning--detail);
5768
- color: var(--accents-warning--detail);
5769
- background-color: var(--accents-warning--main);
5783
+ .zen-form-control {
5784
+ align-items: start;
5770
5785
  }
5771
- .zen-modal-content__icon--success {
5772
- fill: var(--accents-success--detail);
5773
- color: var(--accents-success--detail);
5774
- background-color: var(--accents-success--main);
5786
+ .zen-form-group-list-label {
5787
+ font-style: italic;
5775
5788
  }
5776
- .zen-modal-content__icon--error {
5777
- fill: var(--accents-error--detail);
5778
- color: var(--accents-error--detail);
5779
- background-color: var(--accents-error--main);
5789
+ .zen-divider {
5790
+ height: 1px;
5791
+ width: 100%;
5792
+ border: none;
5793
+ background-color: var(--borders-general);
5794
+ margin: 0;
5795
+ padding: 0;
5780
5796
  }
5781
- .zen-modal-content--small {
5782
- max-width: 400px;
5797
+ .zen-additional-sub-section__secondary {
5798
+ margin: 16px 0;
5799
+ font-family: var(--main-font);
5800
+ font-size: 12px;
5801
+ font-style: normal;
5802
+ font-weight: 400;
5803
+ letter-spacing: 0.32px;
5804
+ line-height: 16px;
5805
+ text-transform: none;
5806
+ color: var(--text-secondary);
5783
5807
  }
5784
- .zen-modal-content--normal {
5785
- max-width: 600px;
5808
+ .zen-additional-sub-section__content {
5809
+ padding: 16px;
5810
+ }
5811
+ .zen-additional-sub-section .zen-accordion__content {
5812
+ padding: 0;
5786
5813
  }
5787
5814
  .zen-form-field {
5788
5815
  box-sizing: border-box;
@@ -7317,6 +7344,9 @@
7317
7344
  .zen-footer-buttons {
7318
7345
  box-sizing: border-box;
7319
7346
  display: flex;
7347
+ flex-direction: column;
7348
+ gap: 4px;
7349
+ padding: 12px;
7320
7350
  }
7321
7351
  .zen-footer-buttons * {
7322
7352
  box-sizing: border-box;
@@ -7324,13 +7354,6 @@
7324
7354
  .zen-footer-buttons .zen-footer-buttons__item {
7325
7355
  flex-grow: 1;
7326
7356
  padding: 11px 8px;
7327
- border-radius: 0;
7328
- }
7329
- .zen-footer-buttons .zen-footer-buttons__item--separate {
7330
- margin-bottom: 8px;
7331
- }
7332
- .zen-footer-buttons--stacked {
7333
- flex-direction: column;
7334
7357
  }
7335
7358
  .zen-footer-buttons--sticky {
7336
7359
  position: fixed;
@@ -7343,9 +7366,6 @@
7343
7366
  z-index: 11005;
7344
7367
  background-color: var(--backgrounds-main);
7345
7368
  }
7346
- .zen-footer-buttons--indented {
7347
- padding: 12px;
7348
- }
7349
7369
  .zen-footer-buttons.zen-footer-buttons--drive .zen-footer-buttons__item,
7350
7370
  .zen-footer-buttons.zen-footer-buttons--drive-tablet .zen-footer-buttons__item {
7351
7371
  padding: 15px 12px;
@@ -7622,6 +7642,167 @@
7622
7642
  line-height: 28px;
7623
7643
  text-transform: none;
7624
7644
  }
7645
+ .zen-modal {
7646
+ box-sizing: border-box;
7647
+ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
7648
+ position: absolute;
7649
+ width: 100%;
7650
+ height: 100%;
7651
+ top: 0;
7652
+ bottom: 0;
7653
+ left: 0;
7654
+ right: 0;
7655
+ display: flex;
7656
+ align-items: center;
7657
+ justify-content: center;
7658
+ }
7659
+ .zen-modal * {
7660
+ box-sizing: border-box;
7661
+ }
7662
+ .zen-modal__shield {
7663
+ box-sizing: border-box;
7664
+ position: absolute;
7665
+ top: 0;
7666
+ bottom: 0;
7667
+ left: 0;
7668
+ right: 0;
7669
+ z-index: 11000;
7670
+ background-color: var(--backgrounds-hover);
7671
+ opacity: 0.5;
7672
+ }
7673
+ .zen-modal__shield * {
7674
+ box-sizing: border-box;
7675
+ }
7676
+ .zen-modal-content {
7677
+ box-sizing: border-box;
7678
+ z-index: 11001;
7679
+ width: 100%;
7680
+ display: flex;
7681
+ flex-direction: column;
7682
+ background-color: var(--backgrounds-main);
7683
+ color: var(--text-primary);
7684
+ padding: 0;
7685
+ box-shadow: 0px 2px 6px rgba(11, 32, 50, 0.2);
7686
+ max-height: 90vh;
7687
+ border-radius: 4px;
7688
+ overflow: hidden;
7689
+ }
7690
+ .zen-modal-content * {
7691
+ box-sizing: border-box;
7692
+ }
7693
+ .zen-modal-content--hidden-overflow.zen-modal-content--hidden-overflow {
7694
+ overflow-y: hidden;
7695
+ }
7696
+ .zen-modal-content__header {
7697
+ display: flex;
7698
+ justify-content: space-between;
7699
+ align-items: center;
7700
+ flex-wrap: nowrap;
7701
+ padding: 24px 24px 16px 24px;
7702
+ min-height: 72px;
7703
+ }
7704
+ .zen-modal-content__header-title {
7705
+ display: flex;
7706
+ align-items: center;
7707
+ gap: 4px;
7708
+ flex-grow: 2;
7709
+ }
7710
+ .zen-modal-content__header-close-button.zen-modal-content__header-close-button {
7711
+ display: flex;
7712
+ align-items: center;
7713
+ justify-content: center;
7714
+ flex-shrink: 0;
7715
+ border: none;
7716
+ padding: 0;
7717
+ cursor: pointer;
7718
+ align-self: flex-start;
7719
+ border-radius: 50%;
7720
+ padding: 8px;
7721
+ }
7722
+ .zen-modal-content__body {
7723
+ overflow: auto;
7724
+ padding: 12px 24px 32px 24px;
7725
+ }
7726
+ .zen-modal-content__body--no-footer {
7727
+ padding-bottom: 16px;
7728
+ }
7729
+ .zen-modal-content__footer {
7730
+ display: flex;
7731
+ justify-content: space-between;
7732
+ padding: 16px 24px;
7733
+ min-height: 59px;
7734
+ background-color: var(--backgrounds-content-0);
7735
+ }
7736
+ .zen-modal-content__footer--mobile {
7737
+ display: flex;
7738
+ flex-direction: column-reverse;
7739
+ gap: 8px;
7740
+ }
7741
+ .zen-modal-content__footer--mobile .zen-modal-content__icon-button {
7742
+ justify-content: center;
7743
+ }
7744
+ .zen-modal-content__footer--mobile .zen-modal-content__icon-button .zen-caption__content {
7745
+ margin-right: 0;
7746
+ }
7747
+ .zen-modal-content__footer-left {
7748
+ display: flex;
7749
+ align-items: center;
7750
+ }
7751
+ .zen-modal-content__footer-left--mobile {
7752
+ display: block;
7753
+ align-items: unset;
7754
+ }
7755
+ .zen-modal-content__footer-right {
7756
+ display: flex;
7757
+ align-items: center;
7758
+ gap: 8px;
7759
+ }
7760
+ .zen-modal-content__footer-right--mobile {
7761
+ display: flex;
7762
+ align-items: unset;
7763
+ flex-direction: column;
7764
+ gap: 8px;
7765
+ }
7766
+ .zen-modal-content__left-button {
7767
+ width: 100%;
7768
+ }
7769
+ .zen-modal-content__icon {
7770
+ display: flex;
7771
+ align-items: center;
7772
+ margin-right: 4px;
7773
+ padding: 4px;
7774
+ border-radius: 99px;
7775
+ }
7776
+ .zen-modal-content__icon--default {
7777
+ fill: var(--action-secondary--default);
7778
+ color: var(--action-secondary--default);
7779
+ }
7780
+ .zen-modal-content__icon--info {
7781
+ fill: var(--accents-general--detail);
7782
+ color: var(--accents-general--detail);
7783
+ background-color: var(--accents-general--main);
7784
+ }
7785
+ .zen-modal-content__icon--warning {
7786
+ fill: var(--accents-warning--detail);
7787
+ color: var(--accents-warning--detail);
7788
+ background-color: var(--accents-warning--main);
7789
+ }
7790
+ .zen-modal-content__icon--success {
7791
+ fill: var(--accents-success--detail);
7792
+ color: var(--accents-success--detail);
7793
+ background-color: var(--accents-success--main);
7794
+ }
7795
+ .zen-modal-content__icon--error {
7796
+ fill: var(--accents-error--detail);
7797
+ color: var(--accents-error--detail);
7798
+ background-color: var(--accents-error--main);
7799
+ }
7800
+ .zen-modal-content--small {
7801
+ max-width: 400px;
7802
+ }
7803
+ .zen-modal-content--normal {
7804
+ max-width: 600px;
7805
+ }
7625
7806
  .zen-toast {
7626
7807
  box-sizing: border-box;
7627
7808
  display: grid;
@@ -7980,6 +8161,7 @@
7980
8161
  align-items: center;
7981
8162
  gap: 8px;
7982
8163
  position: relative;
8164
+ cursor: pointer;
7983
8165
  }
7984
8166
  .zen-status-pill__pill-container:hover .zen-status-pill__container--default {
7985
8167
  border-color: var(--action-secondary--default);
@@ -10975,6 +11157,11 @@ button.zen-summary__clickable {
10975
11157
  .zen-groups-filter-menu__reset-button {
10976
11158
  margin-left: 8px;
10977
11159
  }
11160
+ .zen-groups-filter-menu__mobile-sheet .zen-groups-filter-menu__reset-button,
11161
+ .zen-groups-filter-menu__mobile-sheet .zen-groups-filter-menu__cancel-button,
11162
+ .zen-groups-filter-menu__mobile-sheet .zen-groups-filter-menu__apply-button {
11163
+ margin: 0;
11164
+ }
10978
11165
  .zen-groups-filter-menu__item-wrapper {
10979
11166
  display: flex;
10980
11167
  flex-wrap: nowrap;
@@ -11671,6 +11858,11 @@ button.zen-summary__clickable {
11671
11858
  .zen-range--error .zen-range__trigger-button {
11672
11859
  border: 1px solid var(--text-error-message);
11673
11860
  }
11861
+ .zen-range__mobile-sheet .zen-range__clear-button,
11862
+ .zen-range__mobile-sheet .zen-range__cancel-button,
11863
+ .zen-range__mobile-sheet .zen-range__apply-button {
11864
+ margin: 0;
11865
+ }
11674
11866
  .zen-range-popup.zen-range-popup {
11675
11867
  font-family: var(--main-font);
11676
11868
  font-size: 14px;
@@ -13121,6 +13313,32 @@ button.zen-summary__clickable {
13121
13313
  .zen-filters-bar-dropdown-with-checkbox__pill-box {
13122
13314
  margin-top: 8px;
13123
13315
  }
13316
+ .zen-form-section-default-title {
13317
+ font-family: var(--main-font);
13318
+ font-size: 14px;
13319
+ font-style: normal;
13320
+ font-weight: 500;
13321
+ letter-spacing: 0.16px;
13322
+ line-height: 16px;
13323
+ text-transform: none;
13324
+ color: var(--text-primary);
13325
+ }
13326
+ .zen-form-section-card-content {
13327
+ display: grid;
13328
+ gap: 16px;
13329
+ }
13330
+ .zen-form-section-error-banner {
13331
+ height: fit-content;
13332
+ }
13333
+ .zen-form-layout-title {
13334
+ font-family: var(--main-font);
13335
+ font-size: 16px;
13336
+ font-style: normal;
13337
+ font-weight: 500;
13338
+ letter-spacing: 0;
13339
+ line-height: 24px;
13340
+ text-transform: none;
13341
+ }
13124
13342
  .zen-grid {
13125
13343
  display: grid;
13126
13344
  align-items: start;
@@ -13863,7 +14081,7 @@ button.zen-summary__clickable {
13863
14081
  .zen-card-deck {
13864
14082
  box-sizing: border-box;
13865
14083
  display: flex;
13866
- padding: 8px 24px;
14084
+ padding: 2px 21px;
13867
14085
  flex-direction: column;
13868
14086
  align-items: center;
13869
14087
  border-bottom: 1px solid var(--borders-general);
@@ -13874,13 +14092,14 @@ button.zen-summary__clickable {
13874
14092
  box-sizing: border-box;
13875
14093
  }
13876
14094
  .zen-card-deck--mobile {
13877
- padding: 8px 12px 7px 12px;
14095
+ padding: 2px 12px 1px 12px;
13878
14096
  }
13879
14097
  .zen-card-deck__cards {
13880
14098
  display: flex;
13881
14099
  flex-direction: row;
13882
14100
  align-items: center;
13883
14101
  gap: 16px;
14102
+ padding: 6px 3px;
13884
14103
  }
13885
14104
  .zen-card-deck__cards-container {
13886
14105
  width: 100%;
@@ -13999,24 +14218,28 @@ button.zen-summary__clickable {
13999
14218
  }
14000
14219
  .zen-mini-tabs--small {
14001
14220
  width: 336px;
14221
+ max-width: 100%;
14002
14222
  }
14003
14223
  .zen-mini-tabs--small .zen-mini-tabs__header-item {
14004
14224
  max-width: 104px;
14005
14225
  }
14006
14226
  .zen-mini-tabs--medium {
14007
14227
  width: 528px;
14228
+ max-width: 100%;
14008
14229
  }
14009
14230
  .zen-mini-tabs--medium .zen-mini-tabs__header-item {
14010
14231
  max-width: 144px;
14011
14232
  }
14012
14233
  .zen-mini-tabs--large {
14013
14234
  width: 720px;
14235
+ max-width: 100%;
14014
14236
  }
14015
14237
  .zen-mini-tabs--large .zen-mini-tabs__header-item {
14016
14238
  max-width: 168px;
14017
14239
  }
14018
14240
  .zen-mini-tabs--xlarge {
14019
14241
  width: 1104px;
14242
+ max-width: 100%;
14020
14243
  }
14021
14244
  .zen-mini-tabs--xlarge .zen-mini-tabs__header-item {
14022
14245
  max-width: 200px;