@carbon/ibm-products 2.0.0-rc.20 → 2.0.0-rc.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. package/README.md +17 -0
  2. package/css/index-full-carbon.css +4933 -3007
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +6 -4
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +59 -32
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +3 -3
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +121 -63
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +6 -4
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +280 -101
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +6 -4
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/Card/CardFooter.js +2 -2
  19. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  20. package/es/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  21. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -4
  22. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +18 -2
  23. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +19 -247
  24. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +41 -285
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
  26. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +1 -0
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +310 -0
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +6 -6
  29. package/es/components/Datagrid/useActionsColumn.js +29 -1
  30. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  31. package/es/components/Datagrid/useNestedRows.js +2 -4
  32. package/es/components/Datagrid/useSelectAllToggle.js +18 -2
  33. package/es/components/Datagrid/useSelectRows.js +19 -2
  34. package/es/components/Datagrid/useStickyColumn.js +22 -5
  35. package/es/components/Datagrid/utils/DatagridActions.js +2 -2
  36. package/lib/components/Card/CardFooter.js +2 -2
  37. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  38. package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  39. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +27 -3
  40. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +17 -1
  41. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +22 -243
  42. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +47 -284
  43. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
  44. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -0
  45. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +325 -0
  46. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +5 -5
  47. package/lib/components/Datagrid/useActionsColumn.js +30 -1
  48. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
  49. package/lib/components/Datagrid/useNestedRows.js +2 -4
  50. package/lib/components/Datagrid/useSelectAllToggle.js +25 -2
  51. package/lib/components/Datagrid/useSelectRows.js +26 -2
  52. package/lib/components/Datagrid/useStickyColumn.js +22 -4
  53. package/lib/components/Datagrid/utils/DatagridActions.js +2 -2
  54. package/package.json +8 -8
  55. package/scss/components/Datagrid/styles/_datagrid.scss +27 -7
  56. package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
  57. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +12 -8
  58. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  59. package/scss/components/OptionsTile/_options-tile.scss +10 -3
@@ -211,6 +211,7 @@
211
211
  }
212
212
 
213
213
  .cds--snippet--disabled .cds--snippet-btn--expand:hover,
214
+ .cds--snippet--disabled .cds--copy-btn,
214
215
  .cds--snippet--disabled .cds--copy-btn:hover {
215
216
  background-color: var(--cds-layer);
216
217
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -455,13 +456,13 @@
455
456
  overflow-x: auto;
456
457
  }
457
458
 
458
- .cds--snippet--multi .cds--snippet-container pre::after {
459
+ .cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
459
460
  position: absolute;
460
461
  top: 0;
461
462
  right: 0;
462
463
  width: 1rem;
463
464
  height: 100%;
464
- background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
465
+ background-image: linear-gradient(to right, transparent, var(--cds-layer));
465
466
  content: "";
466
467
  }
467
468
 
@@ -2597,7 +2598,7 @@
2597
2598
  .security--combo-button .security--combo-button__overflow-menu {
2598
2599
  width: 3rem;
2599
2600
  height: auto;
2600
- border-left: 0.125rem solid var(--cds-border-subtle-01, #e0e0e0);
2601
+ border-left: 0.125rem solid var(--cds-border-subtle-01, #c6c6c6);
2601
2602
  background-color: var(--cds-background-brand, #0f62fe);
2602
2603
  }
2603
2604
 
@@ -2802,7 +2803,7 @@
2802
2803
  top: 0;
2803
2804
  height: min-content;
2804
2805
  padding-top: 0;
2805
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2806
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2806
2807
  background-color: transparent;
2807
2808
  grid-row: 1;
2808
2809
  overflow-x: auto;
@@ -3577,12 +3578,12 @@
3577
3578
  }
3578
3579
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
3579
3580
  padding: 1.5rem 2rem;
3580
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3581
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3581
3582
  margin: 0;
3582
3583
  }
3583
3584
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
3584
3585
  padding: 1rem;
3585
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3586
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3586
3587
  margin: 0;
3587
3588
  }
3588
3589
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -3653,7 +3654,7 @@
3653
3654
  }
3654
3655
  .c4p--tearsheet .c4p--tearsheet__influencer {
3655
3656
  flex: 0 0 257px;
3656
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3657
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3657
3658
  overflow-y: auto;
3658
3659
  }
3659
3660
  .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
@@ -3676,7 +3677,7 @@
3676
3677
  }
3677
3678
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
3678
3679
  border-right: none;
3679
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3680
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3680
3681
  }
3681
3682
  .c4p--tearsheet .c4p--tearsheet__content {
3682
3683
  overflow: auto;
@@ -3718,7 +3719,7 @@
3718
3719
  .c4p--tearsheet .c4p--tearsheet__buttons {
3719
3720
  display: inline-flex;
3720
3721
  min-width: 100%;
3721
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3722
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3722
3723
  }
3723
3724
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
3724
3725
  background: var(--cds-background, #ffffff);
@@ -4084,7 +4085,7 @@
4084
4085
  height: rem(48px);
4085
4086
  align-items: center;
4086
4087
  padding: 0.5rem;
4087
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4088
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4088
4089
  background: var(--cds-layer-01, #f4f4f4);
4089
4090
  }
4090
4091
 
@@ -4498,15 +4499,15 @@
4498
4499
  }
4499
4500
 
4500
4501
  .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4501
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4502
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4502
4503
  }
4503
4504
 
4504
4505
  .c4p--add-select__column {
4505
4506
  overflow: auto;
4506
4507
  flex: 0 0 20rem;
4507
4508
  padding: 1rem;
4508
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4509
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4509
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4510
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4510
4511
  }
4511
4512
  .c4p--add-select__column-search-bar {
4512
4513
  display: flex;
@@ -4748,6 +4749,9 @@ button.c4p--add-select__global-filter-toggle--open {
4748
4749
  --cds-border-subtle-selected-01: #525252;
4749
4750
  --cds-border-subtle-selected-02: #6f6f6f;
4750
4751
  --cds-border-subtle-selected-03: #8d8d8d;
4752
+ --cds-border-tile-01: #525252;
4753
+ --cds-border-tile-02: #6f6f6f;
4754
+ --cds-border-tile-03: #8d8d8d;
4751
4755
  --cds-field-01: #262626;
4752
4756
  --cds-field-02: #393939;
4753
4757
  --cds-field-03: #525252;
@@ -4759,6 +4763,7 @@ button.c4p--add-select__global-filter-toggle--open {
4759
4763
  --cds-focus-inverse: #0f62fe;
4760
4764
  --cds-highlight: #002d9c;
4761
4765
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
4766
+ --cds-icon-interactive: #ffffff;
4762
4767
  --cds-icon-inverse: #161616;
4763
4768
  --cds-icon-on-color: #ffffff;
4764
4769
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -4844,6 +4849,10 @@ button.c4p--add-select__global-filter-toggle--open {
4844
4849
  --cds-label-01-font-weight: 400;
4845
4850
  --cds-label-01-line-height: 1.33333;
4846
4851
  --cds-label-01-letter-spacing: 0.32px;
4852
+ --cds-label-02-font-size: 0.875rem;
4853
+ --cds-label-02-font-weight: 400;
4854
+ --cds-label-02-line-height: 1.28572;
4855
+ --cds-label-02-letter-spacing: 0.16px;
4847
4856
  --cds-helper-text-01-font-size: 0.75rem;
4848
4857
  --cds-helper-text-01-line-height: 1.33333;
4849
4858
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -4905,11 +4914,11 @@ button.c4p--add-select__global-filter-toggle--open {
4905
4914
  --cds-productive-heading-05-font-weight: 400;
4906
4915
  --cds-productive-heading-05-line-height: 1.25;
4907
4916
  --cds-productive-heading-05-letter-spacing: 0;
4908
- --cds-productive-heading-06-font-size: 2rem;
4917
+ --cds-productive-heading-06-font-size: 2.625rem;
4909
4918
  --cds-productive-heading-06-font-weight: 300;
4910
4919
  --cds-productive-heading-06-line-height: 1.199;
4911
4920
  --cds-productive-heading-06-letter-spacing: 0;
4912
- --cds-productive-heading-07-font-size: 2.625rem;
4921
+ --cds-productive-heading-07-font-size: 3.375rem;
4913
4922
  --cds-productive-heading-07-font-weight: 300;
4914
4923
  --cds-productive-heading-07-line-height: 1.19;
4915
4924
  --cds-productive-heading-07-letter-spacing: 0;
@@ -4964,7 +4973,7 @@ button.c4p--add-select__global-filter-toggle--open {
4964
4973
  --cds-display-03-line-height: 1.19;
4965
4974
  --cds-display-03-letter-spacing: 0;
4966
4975
  --cds-display-04-font-size: 2.625rem;
4967
- --cds-display-04-font-weight: 600;
4976
+ --cds-display-04-font-weight: 300;
4968
4977
  --cds-display-04-line-height: 1.19;
4969
4978
  --cds-display-04-letter-spacing: 0;
4970
4979
  --cds-legal-01-font-size: 0.75rem;
@@ -5011,11 +5020,11 @@ button.c4p--add-select__global-filter-toggle--open {
5011
5020
  --cds-heading-05-font-weight: 400;
5012
5021
  --cds-heading-05-line-height: 1.25;
5013
5022
  --cds-heading-05-letter-spacing: 0;
5014
- --cds-heading-06-font-size: 2rem;
5023
+ --cds-heading-06-font-size: 2.625rem;
5015
5024
  --cds-heading-06-font-weight: 300;
5016
5025
  --cds-heading-06-line-height: 1.199;
5017
5026
  --cds-heading-06-letter-spacing: 0;
5018
- --cds-heading-07-font-size: 2.625rem;
5027
+ --cds-heading-07-font-size: 3.375rem;
5019
5028
  --cds-heading-07-font-weight: 300;
5020
5029
  --cds-heading-07-line-height: 1.19;
5021
5030
  --cds-heading-07-letter-spacing: 0;
@@ -5062,7 +5071,7 @@ button.c4p--add-select__global-filter-toggle--open {
5062
5071
  --cds-fluid-display-03-line-height: 1.19;
5063
5072
  --cds-fluid-display-03-letter-spacing: 0;
5064
5073
  --cds-fluid-display-04-font-size: 2.625rem;
5065
- --cds-fluid-display-04-font-weight: 600;
5074
+ --cds-fluid-display-04-font-weight: 300;
5066
5075
  --cds-fluid-display-04-line-height: 1.19;
5067
5076
  --cds-fluid-display-04-letter-spacing: 0;
5068
5077
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -5075,9 +5084,10 @@ button.c4p--add-select__global-filter-toggle--open {
5075
5084
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
5076
5085
  --cds-field: var(--cds-field-01, #f4f4f4);
5077
5086
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
5078
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
5087
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
5079
5088
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
5080
5089
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
5090
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
5081
5091
  position: fixed;
5082
5092
  z-index: 2;
5083
5093
  top: 3rem;
@@ -5189,7 +5199,7 @@ button.c4p--add-select__global-filter-toggle--open {
5189
5199
  fill: var(--cds-support-error, #da1e28);
5190
5200
  }
5191
5201
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
5192
- fill: var(--cds-support-success, #198038);
5202
+ fill: var(--cds-support-success, #24a148);
5193
5203
  }
5194
5204
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
5195
5205
  fill: var(--cds-support-warning, #f1c21b);
@@ -7787,7 +7797,7 @@ button.c4p--add-select__global-filter-toggle--open {
7787
7797
  .c4p--card__productive .c4p--card__footer {
7788
7798
  align-items: center;
7789
7799
  justify-content: space-between;
7790
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
7800
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
7791
7801
  }
7792
7802
  .c4p--card__productive .c4p--card__footer-no-button {
7793
7803
  justify-content: flex-end;
@@ -8446,8 +8456,8 @@ button.c4p--add-select__global-filter-toggle--open {
8446
8456
 
8447
8457
  .c4p--toolbar__group {
8448
8458
  display: flex;
8449
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8450
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8459
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8460
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8451
8461
  }
8452
8462
 
8453
8463
  .c4p--toolbar--vertical > .c4p--toolbar__group,
@@ -8521,6 +8531,9 @@ button.c4p--add-select__global-filter-toggle--open {
8521
8531
  --cds-border-subtle-selected-01: #6f6f6f;
8522
8532
  --cds-border-subtle-selected-02: #8d8d8d;
8523
8533
  --cds-border-subtle-selected-03: #a8a8a8;
8534
+ --cds-border-tile-01: #6f6f6f;
8535
+ --cds-border-tile-02: #8d8d8d;
8536
+ --cds-border-tile-03: #a8a8a8;
8524
8537
  --cds-field-01: #393939;
8525
8538
  --cds-field-02: #525252;
8526
8539
  --cds-field-03: #6f6f6f;
@@ -8532,6 +8545,7 @@ button.c4p--add-select__global-filter-toggle--open {
8532
8545
  --cds-focus-inverse: #0f62fe;
8533
8546
  --cds-highlight: #0043ce;
8534
8547
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8548
+ --cds-icon-interactive: #ffffff;
8535
8549
  --cds-icon-inverse: #161616;
8536
8550
  --cds-icon-on-color: #ffffff;
8537
8551
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8617,6 +8631,10 @@ button.c4p--add-select__global-filter-toggle--open {
8617
8631
  --cds-label-01-font-weight: 400;
8618
8632
  --cds-label-01-line-height: 1.33333;
8619
8633
  --cds-label-01-letter-spacing: 0.32px;
8634
+ --cds-label-02-font-size: 0.875rem;
8635
+ --cds-label-02-font-weight: 400;
8636
+ --cds-label-02-line-height: 1.28572;
8637
+ --cds-label-02-letter-spacing: 0.16px;
8620
8638
  --cds-helper-text-01-font-size: 0.75rem;
8621
8639
  --cds-helper-text-01-line-height: 1.33333;
8622
8640
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -8678,11 +8696,11 @@ button.c4p--add-select__global-filter-toggle--open {
8678
8696
  --cds-productive-heading-05-font-weight: 400;
8679
8697
  --cds-productive-heading-05-line-height: 1.25;
8680
8698
  --cds-productive-heading-05-letter-spacing: 0;
8681
- --cds-productive-heading-06-font-size: 2rem;
8699
+ --cds-productive-heading-06-font-size: 2.625rem;
8682
8700
  --cds-productive-heading-06-font-weight: 300;
8683
8701
  --cds-productive-heading-06-line-height: 1.199;
8684
8702
  --cds-productive-heading-06-letter-spacing: 0;
8685
- --cds-productive-heading-07-font-size: 2.625rem;
8703
+ --cds-productive-heading-07-font-size: 3.375rem;
8686
8704
  --cds-productive-heading-07-font-weight: 300;
8687
8705
  --cds-productive-heading-07-line-height: 1.19;
8688
8706
  --cds-productive-heading-07-letter-spacing: 0;
@@ -8737,7 +8755,7 @@ button.c4p--add-select__global-filter-toggle--open {
8737
8755
  --cds-display-03-line-height: 1.19;
8738
8756
  --cds-display-03-letter-spacing: 0;
8739
8757
  --cds-display-04-font-size: 2.625rem;
8740
- --cds-display-04-font-weight: 600;
8758
+ --cds-display-04-font-weight: 300;
8741
8759
  --cds-display-04-line-height: 1.19;
8742
8760
  --cds-display-04-letter-spacing: 0;
8743
8761
  --cds-legal-01-font-size: 0.75rem;
@@ -8784,11 +8802,11 @@ button.c4p--add-select__global-filter-toggle--open {
8784
8802
  --cds-heading-05-font-weight: 400;
8785
8803
  --cds-heading-05-line-height: 1.25;
8786
8804
  --cds-heading-05-letter-spacing: 0;
8787
- --cds-heading-06-font-size: 2rem;
8805
+ --cds-heading-06-font-size: 2.625rem;
8788
8806
  --cds-heading-06-font-weight: 300;
8789
8807
  --cds-heading-06-line-height: 1.199;
8790
8808
  --cds-heading-06-letter-spacing: 0;
8791
- --cds-heading-07-font-size: 2.625rem;
8809
+ --cds-heading-07-font-size: 3.375rem;
8792
8810
  --cds-heading-07-font-weight: 300;
8793
8811
  --cds-heading-07-line-height: 1.19;
8794
8812
  --cds-heading-07-letter-spacing: 0;
@@ -8835,7 +8853,7 @@ button.c4p--add-select__global-filter-toggle--open {
8835
8853
  --cds-fluid-display-03-line-height: 1.19;
8836
8854
  --cds-fluid-display-03-letter-spacing: 0;
8837
8855
  --cds-fluid-display-04-font-size: 2.625rem;
8838
- --cds-fluid-display-04-font-weight: 600;
8856
+ --cds-fluid-display-04-font-weight: 300;
8839
8857
  --cds-fluid-display-04-line-height: 1.19;
8840
8858
  --cds-fluid-display-04-letter-spacing: 0;
8841
8859
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -8848,9 +8866,10 @@ button.c4p--add-select__global-filter-toggle--open {
8848
8866
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8849
8867
  --cds-field: var(--cds-field-01, #f4f4f4);
8850
8868
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8851
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
8869
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
8852
8870
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8853
8871
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
8872
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8854
8873
  position: fixed;
8855
8874
  top: 3rem;
8856
8875
  right: 0;
@@ -8897,6 +8916,9 @@ button.c4p--add-select__global-filter-toggle--open {
8897
8916
  --cds-border-subtle-selected-01: #525252;
8898
8917
  --cds-border-subtle-selected-02: #6f6f6f;
8899
8918
  --cds-border-subtle-selected-03: #8d8d8d;
8919
+ --cds-border-tile-01: #525252;
8920
+ --cds-border-tile-02: #6f6f6f;
8921
+ --cds-border-tile-03: #8d8d8d;
8900
8922
  --cds-field-01: #262626;
8901
8923
  --cds-field-02: #393939;
8902
8924
  --cds-field-03: #525252;
@@ -8908,6 +8930,7 @@ button.c4p--add-select__global-filter-toggle--open {
8908
8930
  --cds-focus-inverse: #0f62fe;
8909
8931
  --cds-highlight: #002d9c;
8910
8932
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8933
+ --cds-icon-interactive: #ffffff;
8911
8934
  --cds-icon-inverse: #161616;
8912
8935
  --cds-icon-on-color: #ffffff;
8913
8936
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8993,6 +9016,10 @@ button.c4p--add-select__global-filter-toggle--open {
8993
9016
  --cds-label-01-font-weight: 400;
8994
9017
  --cds-label-01-line-height: 1.33333;
8995
9018
  --cds-label-01-letter-spacing: 0.32px;
9019
+ --cds-label-02-font-size: 0.875rem;
9020
+ --cds-label-02-font-weight: 400;
9021
+ --cds-label-02-line-height: 1.28572;
9022
+ --cds-label-02-letter-spacing: 0.16px;
8996
9023
  --cds-helper-text-01-font-size: 0.75rem;
8997
9024
  --cds-helper-text-01-line-height: 1.33333;
8998
9025
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -9054,11 +9081,11 @@ button.c4p--add-select__global-filter-toggle--open {
9054
9081
  --cds-productive-heading-05-font-weight: 400;
9055
9082
  --cds-productive-heading-05-line-height: 1.25;
9056
9083
  --cds-productive-heading-05-letter-spacing: 0;
9057
- --cds-productive-heading-06-font-size: 2rem;
9084
+ --cds-productive-heading-06-font-size: 2.625rem;
9058
9085
  --cds-productive-heading-06-font-weight: 300;
9059
9086
  --cds-productive-heading-06-line-height: 1.199;
9060
9087
  --cds-productive-heading-06-letter-spacing: 0;
9061
- --cds-productive-heading-07-font-size: 2.625rem;
9088
+ --cds-productive-heading-07-font-size: 3.375rem;
9062
9089
  --cds-productive-heading-07-font-weight: 300;
9063
9090
  --cds-productive-heading-07-line-height: 1.19;
9064
9091
  --cds-productive-heading-07-letter-spacing: 0;
@@ -9113,7 +9140,7 @@ button.c4p--add-select__global-filter-toggle--open {
9113
9140
  --cds-display-03-line-height: 1.19;
9114
9141
  --cds-display-03-letter-spacing: 0;
9115
9142
  --cds-display-04-font-size: 2.625rem;
9116
- --cds-display-04-font-weight: 600;
9143
+ --cds-display-04-font-weight: 300;
9117
9144
  --cds-display-04-line-height: 1.19;
9118
9145
  --cds-display-04-letter-spacing: 0;
9119
9146
  --cds-legal-01-font-size: 0.75rem;
@@ -9160,11 +9187,11 @@ button.c4p--add-select__global-filter-toggle--open {
9160
9187
  --cds-heading-05-font-weight: 400;
9161
9188
  --cds-heading-05-line-height: 1.25;
9162
9189
  --cds-heading-05-letter-spacing: 0;
9163
- --cds-heading-06-font-size: 2rem;
9190
+ --cds-heading-06-font-size: 2.625rem;
9164
9191
  --cds-heading-06-font-weight: 300;
9165
9192
  --cds-heading-06-line-height: 1.199;
9166
9193
  --cds-heading-06-letter-spacing: 0;
9167
- --cds-heading-07-font-size: 2.625rem;
9194
+ --cds-heading-07-font-size: 3.375rem;
9168
9195
  --cds-heading-07-font-weight: 300;
9169
9196
  --cds-heading-07-line-height: 1.19;
9170
9197
  --cds-heading-07-letter-spacing: 0;
@@ -9211,7 +9238,7 @@ button.c4p--add-select__global-filter-toggle--open {
9211
9238
  --cds-fluid-display-03-line-height: 1.19;
9212
9239
  --cds-fluid-display-03-letter-spacing: 0;
9213
9240
  --cds-fluid-display-04-font-size: 2.625rem;
9214
- --cds-fluid-display-04-font-weight: 600;
9241
+ --cds-fluid-display-04-font-weight: 300;
9215
9242
  --cds-fluid-display-04-line-height: 1.19;
9216
9243
  --cds-fluid-display-04-letter-spacing: 0;
9217
9244
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -9224,9 +9251,10 @@ button.c4p--add-select__global-filter-toggle--open {
9224
9251
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
9225
9252
  --cds-field: var(--cds-field-01, #f4f4f4);
9226
9253
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
9227
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
9254
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
9228
9255
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
9229
9256
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9257
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
9230
9258
  }
9231
9259
 
9232
9260
  .c4p--web-terminal__body {
@@ -9502,12 +9530,19 @@ button.c4p--add-select__global-filter-toggle--open {
9502
9530
  }
9503
9531
 
9504
9532
  .c4p--options-tile {
9505
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
9506
- background-color: var(--cds-layer-01, #f4f4f4);
9533
+ position: relative;
9534
+ border-bottom: 1px solid var(--cds-border-subtle);
9535
+ background-color: var(--cds-layer);
9507
9536
  }
9508
9537
 
9509
9538
  .c4p--options-tile__toggle-container {
9510
- position: relative;
9539
+ position: absolute;
9540
+ top: 0;
9541
+ right: 0;
9542
+ bottom: 0;
9543
+ width: calc(
9544
+ 1rem + 2rem + 1rem
9545
+ );
9511
9546
  }
9512
9547
 
9513
9548
  .c4p--options-tile__toggle {
@@ -10100,8 +10135,8 @@ button.c4p--add-select__global-filter-toggle--open {
10100
10135
  justify-content: flex-end;
10101
10136
  }
10102
10137
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10103
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10104
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10138
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10139
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10105
10140
  overflow: hidden;
10106
10141
  margin: 0;
10107
10142
  background-color: var(--cds-field-01, #f4f4f4);
@@ -10173,8 +10208,8 @@ button.c4p--add-select__global-filter-toggle--open {
10173
10208
  font-weight: var(--cds-body-short-01-font-weight, 400);
10174
10209
  line-height: var(--cds-body-short-01-line-height, 1.28572);
10175
10210
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10176
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10177
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10211
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10212
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10178
10213
  position: absolute;
10179
10214
  z-index: 3;
10180
10215
  display: none;
@@ -10473,7 +10508,9 @@ button.c4p--add-select__global-filter-toggle--open {
10473
10508
  .c4p--datagrid__grid-container td.cds--table-column-checkbox,
10474
10509
  .c4p--datagrid__grid-container th.cds--table-column-checkbox {
10475
10510
  /* stylelint-disable-next-line declaration-no-important */
10476
- padding-right: 1.5rem !important;
10511
+ width: 3rem !important;
10512
+ /* stylelint-disable-next-line declaration-no-important */
10513
+ padding-right: 1rem !important;
10477
10514
  }
10478
10515
 
10479
10516
  .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
@@ -10537,7 +10574,7 @@ button.c4p--add-select__global-filter-toggle--open {
10537
10574
  }
10538
10575
 
10539
10576
  .c4p--datagrid__head-hidden-select-all {
10540
- padding-right: 2.5rem;
10577
+ padding-right: 3rem;
10541
10578
  }
10542
10579
  .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10543
10580
  position: sticky;
@@ -10578,6 +10615,13 @@ button.c4p--add-select__global-filter-toggle--open {
10578
10615
  width: 100% !important;
10579
10616
  }
10580
10617
 
10618
+ .c4p--datagrid__sticky thead {
10619
+ display: flex;
10620
+ }
10621
+ .c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
10622
+ width: auto;
10623
+ }
10624
+
10581
10625
  .c4p--datagrid__displayFlex {
10582
10626
  position: relative;
10583
10627
  display: flex;
@@ -10613,6 +10657,9 @@ button.c4p--add-select__global-filter-toggle--open {
10613
10657
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
10614
10658
  border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
10615
10659
  }
10660
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
10661
+ overflow: hidden;
10662
+ }
10616
10663
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
10617
10664
  height: 100%;
10618
10665
  }
@@ -10640,7 +10687,7 @@ button.c4p--add-select__global-filter-toggle--open {
10640
10687
  );
10641
10688
  width: 1px;
10642
10689
  height: var(--c4p--datagrid--indicator-height);
10643
- border-left: 1px solid var(--cds-background-brand, #0f62fe);
10690
+ border-left: 1px solid var(--cds-border-subtle-selected-01, #c6c6c6);
10644
10691
  content: "";
10645
10692
  }
10646
10693
 
@@ -10657,7 +10704,9 @@ button.c4p--add-select__global-filter-toggle--open {
10657
10704
  padding-bottom: 1rem;
10658
10705
  }
10659
10706
  .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
10707
+ display: flex;
10660
10708
  flex: 1 0 auto;
10709
+ align-items: flex-end;
10661
10710
  }
10662
10711
  .c4p--datagrid__dense-header .cds--table-toolbar {
10663
10712
  background: transparent;
@@ -10665,9 +10714,6 @@ button.c4p--add-select__global-filter-toggle--open {
10665
10714
  .c4p--datagrid__dense-header .cds__table-container {
10666
10715
  flex: 1 1 100%;
10667
10716
  }
10668
- .c4p--datagrid__dense-header .cds--table-toolbar {
10669
- padding-top: 2rem;
10670
- }
10671
10717
  .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
10672
10718
  position: relative;
10673
10719
  }
@@ -10677,7 +10723,7 @@ button.c4p--add-select__global-filter-toggle--open {
10677
10723
  left: 0;
10678
10724
  width: 1px;
10679
10725
  height: 1rem;
10680
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10726
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10681
10727
  content: "";
10682
10728
  transform: translateY(-50%);
10683
10729
  }
@@ -10842,6 +10888,19 @@ button.c4p--add-select__global-filter-toggle--open {
10842
10888
  content: "";
10843
10889
  }
10844
10890
 
10891
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
10892
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
10893
+ border-bottom: none;
10894
+ }
10895
+
10896
+ .cds--data-table td.c4p--datagrid__expandable-row-cell {
10897
+ padding-left: 0.5rem;
10898
+ }
10899
+
10900
+ .c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
10901
+ border-bottom: none;
10902
+ }
10903
+
10845
10904
  /*
10846
10905
  * Licensed Materials - Property of IBM
10847
10906
  * 5724-Q36
@@ -10978,7 +11037,7 @@ button.c4p--add-select__global-filter-toggle--open {
10978
11037
  right: 0;
10979
11038
  display: flex;
10980
11039
  align-items: center;
10981
- border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11040
+ border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
10982
11041
  }
10983
11042
 
10984
11043
  .c4p--datagrid__right-sticky-column-header {
@@ -10993,7 +11052,7 @@ button.c4p--add-select__global-filter-toggle--open {
10993
11052
  left: 0;
10994
11053
  display: flex;
10995
11054
  align-items: center;
10996
- border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11055
+ border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
10997
11056
  }
10998
11057
 
10999
11058
  .c4p--datagrid__left-sticky-column-header {
@@ -11005,7 +11064,7 @@ button.c4p--add-select__global-filter-toggle--open {
11005
11064
 
11006
11065
  .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
11007
11066
  .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
11008
- left: 2.5rem;
11067
+ left: 3rem;
11009
11068
  }
11010
11069
 
11011
11070
  .c4p--datagrid__sticky-noShadow {
@@ -11333,8 +11392,8 @@ button.c4p--add-select__global-filter-toggle--open {
11333
11392
  * US Government Users Restricted Rights - Use, duplication or disclosure
11334
11393
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11335
11394
  */
11336
- th.c4p--datagrid__select-all-toggle-on,
11337
- td.c4p--datagrid__select-all-toggle-on {
11395
+ .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
11396
+ .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
11338
11397
  /* stylelint-disable-next-line declaration-no-important */
11339
11398
  width: 4.5rem !important;
11340
11399
  /* stylelint-disable-next-line declaration-no-important */
@@ -13510,7 +13569,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
13510
13569
 
13511
13570
  .cds--side-nav__navigation {
13512
13571
  display: flex;
13513
- height: 100%;
13514
13572
  flex-direction: column;
13515
13573
  }
13516
13574
 
@@ -14057,13 +14115,13 @@ a.cds--side-nav__link--current::before {
14057
14115
 
14058
14116
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
14059
14117
  padding: 1.5rem 2rem;
14060
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14118
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14061
14119
  margin: 0;
14062
14120
  }
14063
14121
 
14064
14122
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
14065
14123
  padding: 1rem;
14066
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14124
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14067
14125
  margin: 0;
14068
14126
  }
14069
14127
 
@@ -14149,7 +14207,7 @@ a.cds--side-nav__link--current::before {
14149
14207
 
14150
14208
  .c4p--tearsheet .c4p--tearsheet__influencer {
14151
14209
  flex: 0 0 257px;
14152
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14210
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14153
14211
  overflow-y: auto;
14154
14212
  }
14155
14213
 
@@ -14177,7 +14235,7 @@ a.cds--side-nav__link--current::before {
14177
14235
 
14178
14236
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
14179
14237
  border-right: none;
14180
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14238
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14181
14239
  }
14182
14240
 
14183
14241
  .c4p--tearsheet .c4p--tearsheet__content {
@@ -14226,7 +14284,7 @@ a.cds--side-nav__link--current::before {
14226
14284
  .c4p--tearsheet .c4p--tearsheet__buttons {
14227
14285
  display: inline-flex;
14228
14286
  min-width: 100%;
14229
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14287
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14230
14288
  }
14231
14289
 
14232
14290
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {