@carbon/ibm-products 2.1.2 → 2.2.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 (109) hide show
  1. package/css/index-full-carbon.css +58 -216
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +11 -59
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +30 -92
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +28 -114
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AboutModal/AboutModal.js +3 -1
  18. package/es/components/ActionBar/ActionBar.js +6 -2
  19. package/es/components/AddSelect/AddSelectFormControl.js +6 -6
  20. package/es/components/AddSelect/AddSelectRow.js +5 -15
  21. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -5
  22. package/es/components/ButtonMenu/ButtonMenu.js +4 -4
  23. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +9 -3
  24. package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  25. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  26. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  27. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +47 -39
  29. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +24 -20
  30. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +1 -0
  31. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +15 -44
  32. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +21 -0
  33. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -17
  34. package/es/components/Datagrid/useActionsColumn.js +7 -10
  35. package/es/components/Datagrid/useCustomizeColumns.js +7 -9
  36. package/es/components/Datagrid/useExpandedRow.js +7 -11
  37. package/es/components/Datagrid/useFiltering.js +8 -12
  38. package/es/components/Datagrid/useInlineEdit.js +0 -3
  39. package/es/components/Datagrid/useNestedRows.js +6 -10
  40. package/es/components/Datagrid/useStickyColumn.js +3 -10
  41. package/es/components/Datagrid/utils/DatagridActions.js +14 -6
  42. package/es/components/ImportModal/ImportModal.js +6 -13
  43. package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +17 -2
  44. package/es/components/PageHeader/PageHeader.js +6 -2
  45. package/es/components/PageHeader/PageHeaderUtils.js +2 -2
  46. package/es/components/SidePanel/SidePanel.js +3 -1
  47. package/es/components/TagSet/TagSet.js +7 -4
  48. package/es/components/Tearsheet/TearsheetShell.js +5 -4
  49. package/es/components/UserProfileImage/UserProfileImage.js +2 -13
  50. package/es/global/js/hooks/useCreateComponentStepChange.js +15 -16
  51. package/es/global/js/hooks/useResizeObserver.js +28 -14
  52. package/es/global/js/package-settings.js +1 -14
  53. package/es/global/js/utils/story-helper.js +1 -1
  54. package/lib/components/AboutModal/AboutModal.js +3 -1
  55. package/lib/components/ActionBar/ActionBar.js +6 -2
  56. package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
  57. package/lib/components/AddSelect/AddSelectRow.js +5 -15
  58. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -5
  59. package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
  60. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +9 -3
  61. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  62. package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  63. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  64. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  65. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +45 -37
  66. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +24 -20
  67. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +7 -0
  68. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +13 -42
  69. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +30 -0
  70. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -17
  71. package/lib/components/Datagrid/useActionsColumn.js +7 -12
  72. package/lib/components/Datagrid/useCustomizeColumns.js +8 -10
  73. package/lib/components/Datagrid/useExpandedRow.js +6 -9
  74. package/lib/components/Datagrid/useFiltering.js +7 -10
  75. package/lib/components/Datagrid/useInlineEdit.js +0 -3
  76. package/lib/components/Datagrid/useNestedRows.js +6 -9
  77. package/lib/components/Datagrid/useStickyColumn.js +3 -10
  78. package/lib/components/Datagrid/utils/DatagridActions.js +13 -5
  79. package/lib/components/ImportModal/ImportModal.js +6 -13
  80. package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +17 -2
  81. package/lib/components/PageHeader/PageHeader.js +6 -2
  82. package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
  83. package/lib/components/SidePanel/SidePanel.js +3 -1
  84. package/lib/components/TagSet/TagSet.js +7 -4
  85. package/lib/components/Tearsheet/TearsheetShell.js +5 -4
  86. package/lib/components/UserProfileImage/UserProfileImage.js +2 -13
  87. package/lib/global/js/hooks/useCreateComponentStepChange.js +15 -16
  88. package/lib/global/js/hooks/useResizeObserver.js +27 -13
  89. package/lib/global/js/package-settings.js +1 -14
  90. package/lib/global/js/utils/story-helper.js +1 -1
  91. package/package.json +10 -10
  92. package/scss/components/AddSelect/_add-select.scss +0 -4
  93. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +1 -0
  94. package/scss/components/ButtonMenu/_button-menu.scss +1 -32
  95. package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -6
  96. package/scss/components/Datagrid/_datagrid.scss +2 -4
  97. package/scss/components/Datagrid/_storybook-styles.scss +1 -15
  98. package/scss/components/Datagrid/styles/_datagrid.scss +13 -12
  99. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +0 -7
  100. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +0 -4
  101. package/scss/components/HTTPErrors/_storybook-styles.scss +2 -16
  102. package/scss/components/NotificationsPanel/_notifications-panel.scss +1 -1
  103. package/scss/components/NotificationsPanel/_storybook-styles.scss +4 -0
  104. package/scss/components/PageHeader/_page-header.scss +1 -0
  105. package/scss/components/PageHeader/_storybook-styles.scss +14 -42
  106. package/scss/components/SidePanel/_side-panel.scss +2 -0
  107. package/scss/components/Tearsheet/_tearsheet.scss +6 -7
  108. package/scss/components/WebTerminal/_storybook-styles.scss +1 -16
  109. package/scss/global/styles/_display-box.scss +0 -1
@@ -1004,33 +1004,8 @@ p.c4p--about-modal__copyright-text:first-child {
1004
1004
  .c4p--button-menu {
1005
1005
  min-width: 160px;
1006
1006
  }
1007
- .c4p--button-menu.c4p--button-menu__wrapper--primary, .c4p--button-menu.c4p--button-menu__wrapper--primary.cds--overflow-menu.cds--overflow-menu--open {
1008
- background-color: var(--cds-button-primary, #0f62fe);
1009
- }
1010
- .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--primary:hover {
1011
- background-color: var(--cds-button-primary-hover, #0050e6);
1012
- }
1013
- .c4p--button-menu.c4p--button-menu__wrapper--tertiary, .c4p--button-menu.c4p--button-menu__wrapper--tertiary.cds--overflow-menu.cds--overflow-menu--open {
1014
- background-color: var(--cds-button-tertiary, #0f62fe);
1015
- }
1016
- .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--tertiary:hover {
1017
- background-color: var(--cds-button-tertiary-hover, #0050e6);
1018
- }
1019
- .c4p--button-menu.c4p--button-menu__wrapper--ghost, .c4p--button-menu.c4p--button-menu__wrapper--ghost.cds--overflow-menu.cds--overflow-menu--open {
1020
- background-color: transparent;
1021
- }
1022
- .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--ghost:hover {
1023
- background-color: var(--cds-layer-hover);
1024
- }
1025
1007
  .c4p--button-menu .c4p--button-menu__trigger {
1026
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
1027
- font-weight: var(--cds-body-compact-01-font-weight, 400);
1028
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
1029
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
1030
- display: flex;
1031
1008
  width: 100%;
1032
- align-items: center;
1033
- justify-content: space-between;
1034
1009
  padding: 0 1rem;
1035
1010
  }
1036
1011
 
@@ -2942,6 +2917,7 @@ p.c4p--about-modal__copyright-text:first-child {
2942
2917
  --c4p--side-panel--collapsed-title-y-position: 1rem;
2943
2918
  --c4p--side-panel--label-text-height: 0;
2944
2919
  position: fixed;
2920
+ /* stylelint-disable-next-line function-no-unknown */
2945
2921
  z-index: 9000;
2946
2922
  top: 3rem;
2947
2923
  height: calc(100% - 3rem);
@@ -3347,6 +3323,7 @@ p.c4p--about-modal__copyright-text:first-child {
3347
3323
 
3348
3324
  .c4p--side-panel__overlay {
3349
3325
  position: fixed;
3326
+ /* stylelint-disable-next-line function-no-unknown */
3350
3327
  z-index: 6000;
3351
3328
  width: 100%;
3352
3329
  height: 100%;
@@ -3486,6 +3463,7 @@ p.c4p--about-modal__copyright-text:first-child {
3486
3463
  }
3487
3464
 
3488
3465
  .c4p--tearsheet.c4p--tearsheet {
3466
+ /* stylelint-disable-next-line function-no-unknown */
3489
3467
  z-index: 9001;
3490
3468
  align-items: flex-end;
3491
3469
  color: var(--cds-text-primary, #161616);
@@ -3494,6 +3472,7 @@ p.c4p--about-modal__copyright-text:first-child {
3494
3472
  --c4p--tearsheet--stacking-scale-factor-double: 0.9;
3495
3473
  }
3496
3474
  .c4p--tearsheet.is-visible {
3475
+ /* stylelint-disable-next-line function-no-unknown */
3497
3476
  z-index: 9000;
3498
3477
  align-items: flex-end;
3499
3478
  transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
@@ -3504,14 +3483,17 @@ p.c4p--about-modal__copyright-text:first-child {
3504
3483
  }
3505
3484
  }
3506
3485
  .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
3486
+ /* stylelint-disable-next-line function-no-unknown */
3507
3487
  z-index: 8999;
3508
3488
  background-color: rgba(22, 22, 22, 0.33);
3509
3489
  }
3510
3490
  .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
3491
+ /* stylelint-disable-next-line function-no-unknown */
3511
3492
  z-index: 8998;
3512
3493
  background-color: rgba(22, 22, 22, 0.11);
3513
3494
  }
3514
3495
  .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
3496
+ /* stylelint-disable-next-line function-no-unknown */
3515
3497
  z-index: 8999;
3516
3498
  background-color: rgba(22, 22, 22, 0.25);
3517
3499
  }
@@ -3560,13 +3542,11 @@ p.c4p--about-modal__copyright-text:first-child {
3560
3542
  padding: 1.5rem 2rem;
3561
3543
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3562
3544
  margin: 0;
3563
- background-color: var(--cds-layer);
3564
3545
  }
3565
3546
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
3566
3547
  padding: 1rem;
3567
3548
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3568
3549
  margin: 0;
3569
- background-color: var(--cds-layer);
3570
3550
  }
3571
3551
  .c4p--tearsheet .c4p--tearsheet__header-content {
3572
3552
  display: flex;
@@ -3657,13 +3637,10 @@ p.c4p--about-modal__copyright-text:first-child {
3657
3637
  .c4p--tearsheet .c4p--tearsheet__main {
3658
3638
  display: flex;
3659
3639
  flex-direction: row;
3660
- background-color: var(--cds-background, #ffffff);
3640
+ background-color: var(--cds-layer);
3661
3641
  grid-column: 1/-1;
3662
3642
  grid-row: 1/-1;
3663
3643
  }
3664
- .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
3665
- background-color: var(--cds-layer);
3666
- }
3667
3644
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
3668
3645
  border-right: none;
3669
3646
  border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -4285,9 +4262,6 @@ c4p--card__icon:active {
4285
4262
  display: flex;
4286
4263
  align-items: center;
4287
4264
  }
4288
- .c4p--add-select__selections-form-control-wrapper--radio {
4289
- cursor: pointer;
4290
- }
4291
4265
  .c4p--add-select__selections-form-control-label-wrapper {
4292
4266
  display: flex;
4293
4267
  margin-left: 1rem;
@@ -4767,14 +4741,6 @@ button.c4p--add-select__global-filter-toggle--open {
4767
4741
  --cds-fluid-spacing-02: 2vw;
4768
4742
  --cds-fluid-spacing-03: 5vw;
4769
4743
  --cds-fluid-spacing-04: 10vw;
4770
- --cds-caption-01-font-size: 0.75rem;
4771
- --cds-caption-01-font-weight: 400;
4772
- --cds-caption-01-line-height: 1.33333;
4773
- --cds-caption-01-letter-spacing: 0.32px;
4774
- --cds-caption-02-font-size: 0.875rem;
4775
- --cds-caption-02-font-weight: 400;
4776
- --cds-caption-02-line-height: 1.28572;
4777
- --cds-caption-02-letter-spacing: 0.32px;
4778
4744
  --cds-label-01-font-size: 0.75rem;
4779
4745
  --cds-label-01-font-weight: 400;
4780
4746
  --cds-label-01-line-height: 1.33333;
@@ -5023,7 +4989,7 @@ button.c4p--add-select__global-filter-toggle--open {
5023
4989
  top: 3rem;
5024
4990
  right: 0;
5025
4991
  overflow: auto;
5026
- min-width: 20rem;
4992
+ min-width: 22.75rem;
5027
4993
  max-width: 22.75rem;
5028
4994
  min-height: 38.5rem;
5029
4995
  max-height: 38.5rem;
@@ -7031,6 +6997,7 @@ button.c4p--add-select__global-filter-toggle--open {
7031
6997
  }
7032
6998
 
7033
6999
  .c4p--breadcrumb-with-overflow__overflow-menu-options.c4p--breadcrumb-with-overflow__overflow-menu-options {
7000
+ /* stylelint-disable-next-line function-no-unknown */
7034
7001
  z-index: 8000;
7035
7002
  }
7036
7003
 
@@ -7196,6 +7163,7 @@ button.c4p--add-select__global-filter-toggle--open {
7196
7163
  justify-content: flex-end;
7197
7164
  }
7198
7165
 
7166
+ /* stylelint-disable-next-line function-no-unknown */
7199
7167
  @keyframes background-appear {
7200
7168
  from {
7201
7169
  /* stylelint-disable-next-line carbon/theme-token-use */
@@ -8581,14 +8549,6 @@ button.c4p--add-select__global-filter-toggle--open {
8581
8549
  --cds-fluid-spacing-02: 2vw;
8582
8550
  --cds-fluid-spacing-03: 5vw;
8583
8551
  --cds-fluid-spacing-04: 10vw;
8584
- --cds-caption-01-font-size: 0.75rem;
8585
- --cds-caption-01-font-weight: 400;
8586
- --cds-caption-01-line-height: 1.33333;
8587
- --cds-caption-01-letter-spacing: 0.32px;
8588
- --cds-caption-02-font-size: 0.875rem;
8589
- --cds-caption-02-font-weight: 400;
8590
- --cds-caption-02-line-height: 1.28572;
8591
- --cds-caption-02-letter-spacing: 0.32px;
8592
8552
  --cds-label-01-font-size: 0.75rem;
8593
8553
  --cds-label-01-font-weight: 400;
8594
8554
  --cds-label-01-line-height: 1.33333;
@@ -8974,14 +8934,6 @@ button.c4p--add-select__global-filter-toggle--open {
8974
8934
  --cds-fluid-spacing-02: 2vw;
8975
8935
  --cds-fluid-spacing-03: 5vw;
8976
8936
  --cds-fluid-spacing-04: 10vw;
8977
- --cds-caption-01-font-size: 0.75rem;
8978
- --cds-caption-01-font-weight: 400;
8979
- --cds-caption-01-line-height: 1.33333;
8980
- --cds-caption-01-letter-spacing: 0.32px;
8981
- --cds-caption-02-font-size: 0.875rem;
8982
- --cds-caption-02-font-weight: 400;
8983
- --cds-caption-02-line-height: 1.28572;
8984
- --cds-caption-02-letter-spacing: 0.32px;
8985
8937
  --cds-label-01-font-size: 0.75rem;
8986
8938
  --cds-label-01-font-weight: 400;
8987
8939
  --cds-label-01-line-height: 1.33333;
@@ -10106,6 +10058,13 @@ button.c4p--add-select__global-filter-toggle--open {
10106
10058
  overscroll-behavior: none;
10107
10059
  }
10108
10060
 
10061
+ /*
10062
+ * Licensed Materials - Property of IBM
10063
+ * 5724-Q36
10064
+ * (c) Copyright IBM Corp. 2020 - 2021
10065
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10066
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10067
+ */
10109
10068
  .c4p--datagrid__table-toolbar > section {
10110
10069
  z-index: 2;
10111
10070
  overflow: visible;
@@ -10577,6 +10536,11 @@ button.c4p--add-select__global-filter-toggle--open {
10577
10536
  width: 100%;
10578
10537
  }
10579
10538
 
10539
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
10540
+ overflow: hidden;
10541
+ height: 100vh;
10542
+ }
10543
+
10580
10544
  .c4p--datagrid .cds--modal {
10581
10545
  width: 100%;
10582
10546
  }
@@ -10617,10 +10581,6 @@ button.c4p--add-select__global-filter-toggle--open {
10617
10581
  background-color: var(--cds-layer-accent);
10618
10582
  }
10619
10583
 
10620
- .c4p--datagrid .cds--action-list .cds--btn.c4p--button-menu {
10621
- padding: 0;
10622
- }
10623
-
10624
10584
  /*
10625
10585
  * Licensed Materials - Property of IBM
10626
10586
  * 5724-Q36
@@ -11051,13 +11011,6 @@ button.c4p--add-select__global-filter-toggle--open {
11051
11011
  grid-template-columns: 1fr 1fr;
11052
11012
  }
11053
11013
 
11054
- .c4p--datagrid-filter-flyout__trigger.cds--btn {
11055
- display: flex;
11056
- width: 3rem;
11057
- height: 3rem;
11058
- justify-content: center;
11059
- }
11060
-
11061
11014
  .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
11062
11015
  position: relative;
11063
11016
  background-color: var(--cds-layer-02, #ffffff);
@@ -11181,10 +11134,6 @@ button.c4p--add-select__global-filter-toggle--open {
11181
11134
  }
11182
11135
 
11183
11136
  .cds--btn.c4p--datagrid-filter-panel-open-button {
11184
- display: flex;
11185
- width: 3rem;
11186
- height: 3rem;
11187
- justify-content: center;
11188
11137
  border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11189
11138
  border-bottom: none;
11190
11139
  }
@@ -11713,7 +11662,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11713
11662
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11714
11663
  display: none;
11715
11664
  }
11716
- .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11665
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11717
11666
  left: 0.125rem;
11718
11667
  width: 112px;
11719
11668
  }
@@ -13740,16 +13689,6 @@ a.cds--side-nav__link--current::before {
13740
13689
  color: var(--cds-text-primary, #161616);
13741
13690
  }
13742
13691
 
13743
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
13744
- background-color: var(--cds-layer-selected-hover);
13745
- }
13746
-
13747
- .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
13748
- .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
13749
- width: 3px;
13750
- height: calc(100% + 4px);
13751
- }
13752
-
13753
13692
  .cds--side-nav .cds--header__menu a.cds--header__menu-item {
13754
13693
  height: inherit;
13755
13694
  }
@@ -13838,6 +13777,7 @@ a.cds--side-nav__link--current::before {
13838
13777
  }
13839
13778
 
13840
13779
  .c4p--tearsheet.c4p--tearsheet {
13780
+ /* stylelint-disable-next-line function-no-unknown */
13841
13781
  z-index: 9001;
13842
13782
  align-items: flex-end;
13843
13783
  color: var(--cds-text-primary, #161616);
@@ -13847,6 +13787,7 @@ a.cds--side-nav__link--current::before {
13847
13787
  }
13848
13788
 
13849
13789
  .c4p--tearsheet.is-visible {
13790
+ /* stylelint-disable-next-line function-no-unknown */
13850
13791
  z-index: 9000;
13851
13792
  align-items: flex-end;
13852
13793
  transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
@@ -13858,16 +13799,19 @@ a.cds--side-nav__link--current::before {
13858
13799
  }
13859
13800
  }
13860
13801
  .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
13802
+ /* stylelint-disable-next-line function-no-unknown */
13861
13803
  z-index: 8999;
13862
13804
  background-color: rgba(22, 22, 22, 0.33);
13863
13805
  }
13864
13806
 
13865
13807
  .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
13808
+ /* stylelint-disable-next-line function-no-unknown */
13866
13809
  z-index: 8998;
13867
13810
  background-color: rgba(22, 22, 22, 0.11);
13868
13811
  }
13869
13812
 
13870
13813
  .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
13814
+ /* stylelint-disable-next-line function-no-unknown */
13871
13815
  z-index: 8999;
13872
13816
  background-color: rgba(22, 22, 22, 0.25);
13873
13817
  }
@@ -13928,14 +13872,12 @@ a.cds--side-nav__link--current::before {
13928
13872
  padding: 1.5rem 2rem;
13929
13873
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13930
13874
  margin: 0;
13931
- background-color: var(--cds-layer);
13932
13875
  }
13933
13876
 
13934
13877
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
13935
13878
  padding: 1rem;
13936
13879
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13937
13880
  margin: 0;
13938
- background-color: var(--cds-layer);
13939
13881
  }
13940
13882
 
13941
13883
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -14046,15 +13988,11 @@ a.cds--side-nav__link--current::before {
14046
13988
  .c4p--tearsheet .c4p--tearsheet__main {
14047
13989
  display: flex;
14048
13990
  flex-direction: row;
14049
- background-color: var(--cds-background, #ffffff);
13991
+ background-color: var(--cds-layer);
14050
13992
  grid-column: 1/-1;
14051
13993
  grid-row: 1/-1;
14052
13994
  }
14053
13995
 
14054
- .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
14055
- background-color: var(--cds-layer);
14056
- }
14057
-
14058
13996
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
14059
13997
  border-right: none;
14060
13998
  border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -27303,8 +27241,7 @@ optgroup.cds--select-optgroup:disabled,
27303
27241
  border-color: var(--cds-support-warning, #f1c21b);
27304
27242
  }
27305
27243
 
27306
- .cds--inline-notification--warning .cds--inline-notification__icon path[opacity="0"],
27307
- .cds--inline-notification--warning-alt .cds--inline-notification__icon path:first-of-type {
27244
+ .cds--inline-notification--warning .cds--inline-notification__icon path[opacity="0"] {
27308
27245
  fill: #000000;
27309
27246
  opacity: 1;
27310
27247
  }
@@ -27618,8 +27555,7 @@ optgroup.cds--select-optgroup:disabled,
27618
27555
  fill: var(--cds-support-warning, #f1c21b);
27619
27556
  }
27620
27557
 
27621
- .cds--toast-notification--warning .cds--toast-notification__icon path[opacity="0"],
27622
- .cds--toast-notification--warning-alt .cds--toast-notification__icon path:first-of-type {
27558
+ .cds--toast-notification--warning .cds--toast-notification__icon path[opacity="0"] {
27623
27559
  fill: #000000;
27624
27560
  opacity: 1;
27625
27561
  }
@@ -27944,8 +27880,7 @@ optgroup.cds--select-optgroup:disabled,
27944
27880
  border-color: var(--cds-support-warning, #f1c21b);
27945
27881
  }
27946
27882
 
27947
- .cds--actionable-notification--warning .cds--toast-notification__icon path[opacity="0"],
27948
- .cds--actionable-notification--warning-alt .cds--toast-notification__icon path:first-of-type {
27883
+ .cds--actionable-notification--warning .cds--toast-notification__icon path[opacity="0"] {
27949
27884
  fill: #000000;
27950
27885
  opacity: 1;
27951
27886
  }
@@ -29294,7 +29229,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29294
29229
  pointer-events: auto;
29295
29230
  }
29296
29231
 
29297
- .cds--popover--open > .cds--popover > .cds--popover-content {
29232
+ .cds--popover--open .cds--popover-content {
29298
29233
  display: block;
29299
29234
  }
29300
29235
 
@@ -29304,7 +29239,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29304
29239
  content: "";
29305
29240
  }
29306
29241
 
29307
- .cds--popover--open > .cds--popover > .cds--popover-content::before {
29242
+ .cds--popover--open .cds--popover-content::before {
29308
29243
  display: block;
29309
29244
  }
29310
29245
 
@@ -29316,14 +29251,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29316
29251
  will-change: transform;
29317
29252
  }
29318
29253
 
29319
- .cds--popover--open > .cds--popover > .cds--popover-caret {
29254
+ .cds--popover--open.cds--popover--caret .cds--popover-caret {
29320
29255
  display: block;
29321
29256
  }
29322
29257
 
29323
- .cds--popover--tab-tip .cds--popover .cds--popover-caret {
29324
- display: none;
29325
- }
29326
-
29327
29258
  .cds--popover--bottom .cds--popover-content {
29328
29259
  bottom: 0;
29329
29260
  left: 50%;
@@ -31233,42 +31164,11 @@ span.cds--pagination__text.cds--pagination__items-count {
31233
31164
  .cds--tabs .cds--tabs__nav-item .cds--tabs__nav-link {
31234
31165
  transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
31235
31166
  }
31236
- .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
31237
- padding: 1rem;
31238
- margin-top: -0.5rem;
31239
- margin-right: -1rem;
31240
- margin-left: -1rem;
31241
- }
31242
- .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
31243
- background-color: inherit;
31244
- }
31245
- .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg {
31246
- width: 24px;
31247
- height: 24px;
31248
- padding: 0.25rem;
31249
- margin: -0.25rem;
31250
- }
31251
- .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
31252
- background-color: var(--cds-layer-accent-hover);
31253
- }
31254
- .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled).cds--tabs__nav-item--selected .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
31255
- background-color: var(--cds-layer-hover);
31256
- }
31257
- .cds--tabs .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
31258
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31259
- }
31260
31167
  .cds--tabs .cds--tabs__nav-item--icon {
31261
31168
  display: flex;
31262
31169
  align-items: center;
31263
31170
  padding-left: 0.5rem;
31264
31171
  }
31265
- .cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
31266
- padding: 0.25rem;
31267
- margin: -0.25rem;
31268
- cursor: pointer;
31269
- line-height: 0;
31270
- pointer-events: auto;
31271
- }
31272
31172
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
31273
31173
  padding-left: 1rem;
31274
31174
  }
@@ -31359,7 +31259,7 @@ span.cds--pagination__text.cds--pagination__items-count {
31359
31259
  border-bottom: 2px solid var(--cds-border-strong);
31360
31260
  color: var(--cds-text-primary, #161616);
31361
31261
  }
31362
- .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):not(.cds--tabs__nav-item--hover-off):hover {
31262
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled):hover {
31363
31263
  background-color: var(--cds-layer-accent-hover);
31364
31264
  color: var(--cds-text-primary, #161616);
31365
31265
  }
@@ -31776,26 +31676,6 @@ span.cds--pagination__text.cds--pagination__items-count {
31776
31676
  padding: 1rem;
31777
31677
  background-color: var(--cds-layer);
31778
31678
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
31779
- cursor: not-allowed;
31780
- }
31781
-
31782
- .cds--tile--clickable .cds--tile--icon,
31783
- .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
31784
- position: absolute;
31785
- right: 1rem;
31786
- bottom: 1rem;
31787
- }
31788
-
31789
- .cds--tile--clickable .cds--tile--icon {
31790
- fill: var(--cds-icon-interactive, #0f62fe);
31791
- }
31792
-
31793
- .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
31794
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
31795
- }
31796
-
31797
- .cds--tile--clickable.cds--link--disabled .cds--tile--icon {
31798
- display: none;
31799
31679
  }
31800
31680
 
31801
31681
  .cds--tile--selectable {
@@ -32027,7 +31907,7 @@ span.cds--pagination__text.cds--pagination__items-count {
32027
31907
  }
32028
31908
 
32029
31909
  .cds--tile--disabled.cds--tile--is-selected {
32030
- border-color: var(--cds-border-disabled, #c6c6c6);
31910
+ border-color: var(--cds-button-disabled, #c6c6c6);
32031
31911
  }
32032
31912
 
32033
31913
  .cds--tile--disabled .cds--tile__checkmark svg {
@@ -32813,11 +32693,12 @@ a.cds--header__menu-item[aria-current=page],
32813
32693
  a.cds--header__menu-item[aria-current=page]::after,
32814
32694
  .cds--header__menu-item--current::after {
32815
32695
  position: absolute;
32696
+ top: 0;
32697
+ right: 0;
32816
32698
  bottom: -2px;
32817
- left: -2px;
32818
- width: calc(100% + 4px);
32819
- height: 3px;
32820
- background-color: var(--cds-border-interactive, #0f62fe);
32699
+ left: 0;
32700
+ width: 100%;
32701
+ border-bottom: 3px solid var(--cds-border-interactive, #0f62fe);
32821
32702
  content: "";
32822
32703
  }
32823
32704
 
@@ -32828,19 +32709,15 @@ a.cds--header__menu-item[aria-current=page]:focus::after,
32828
32709
 
32829
32710
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after,
32830
32711
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after {
32831
- top: -2px;
32712
+ bottom: 0;
32832
32713
  left: -2px;
32833
- width: 3px;
32834
- height: calc(100% + 4px);
32835
- background-color: var(--cds-border-interactive, #0f62fe);
32714
+ border-bottom: none;
32715
+ border-left: 3px solid var(--cds-border-interactive, #0f62fe);
32836
32716
  }
32837
32717
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after,
32838
32718
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after {
32839
- top: -2px;
32840
- left: -2px;
32841
- width: 5px;
32842
- height: calc(100% + 4px);
32843
- background-color: var(--cds-border-interactive, #0f62fe);
32719
+ left: 0;
32720
+ border-left: 3px solid var(--cds-border-interactive, #0f62fe);
32844
32721
  }
32845
32722
 
32846
32723
  a.cds--header__menu-item[aria-current=page]:focus,
@@ -32900,13 +32777,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
32900
32777
  color: var(--cds-text-primary, #161616);
32901
32778
  }
32902
32779
 
32903
- .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current {
32904
- background-color: var(--cds-layer-selected);
32905
- }
32906
- .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover {
32907
- background-color: var(--cds-layer-selected-hover);
32908
- }
32909
-
32910
32780
  .cds--header__menu .cds--header__menu-item {
32911
32781
  height: 3rem;
32912
32782
  }
@@ -33406,15 +33276,6 @@ a.cds--side-nav__link--current::before {
33406
33276
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
33407
33277
  color: var(--cds-text-primary, #161616);
33408
33278
  }
33409
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
33410
- background-color: var(--cds-layer-selected-hover);
33411
- }
33412
-
33413
- .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
33414
- .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
33415
- width: 3px;
33416
- height: calc(100% + 4px);
33417
- }
33418
33279
 
33419
33280
  .cds--side-nav .cds--header__menu a.cds--header__menu-item {
33420
33281
  height: inherit;
@@ -33745,11 +33606,12 @@ a.cds--header__menu-item[aria-current=page],
33745
33606
  a.cds--header__menu-item[aria-current=page]::after,
33746
33607
  .cds--header__menu-item--current::after {
33747
33608
  position: absolute;
33609
+ top: 0;
33610
+ right: 0;
33748
33611
  bottom: -2px;
33749
- left: -2px;
33750
- width: calc(100% + 4px);
33751
- height: 3px;
33752
- background-color: var(--cds-border-interactive, #0f62fe);
33612
+ left: 0;
33613
+ width: 100%;
33614
+ border-bottom: 3px solid var(--cds-border-interactive, #0f62fe);
33753
33615
  content: "";
33754
33616
  }
33755
33617
 
@@ -33760,19 +33622,15 @@ a.cds--header__menu-item[aria-current=page]:focus::after,
33760
33622
 
33761
33623
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after,
33762
33624
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after {
33763
- top: -2px;
33625
+ bottom: 0;
33764
33626
  left: -2px;
33765
- width: 3px;
33766
- height: calc(100% + 4px);
33767
- background-color: var(--cds-border-interactive, #0f62fe);
33627
+ border-bottom: none;
33628
+ border-left: 3px solid var(--cds-border-interactive, #0f62fe);
33768
33629
  }
33769
33630
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after,
33770
33631
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after {
33771
- top: -2px;
33772
- left: -2px;
33773
- width: 5px;
33774
- height: calc(100% + 4px);
33775
- background-color: var(--cds-border-interactive, #0f62fe);
33632
+ left: 0;
33633
+ border-left: 3px solid var(--cds-border-interactive, #0f62fe);
33776
33634
  }
33777
33635
 
33778
33636
  a.cds--header__menu-item[aria-current=page]:focus,
@@ -33832,13 +33690,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
33832
33690
  color: var(--cds-text-primary, #161616);
33833
33691
  }
33834
33692
 
33835
- .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current {
33836
- background-color: var(--cds-layer-selected);
33837
- }
33838
- .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover {
33839
- background-color: var(--cds-layer-selected-hover);
33840
- }
33841
-
33842
33693
  .cds--header__menu .cds--header__menu-item {
33843
33694
  height: 3rem;
33844
33695
  }
@@ -34338,15 +34189,6 @@ a.cds--side-nav__link--current::before {
34338
34189
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
34339
34190
  color: var(--cds-text-primary, #161616);
34340
34191
  }
34341
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
34342
- background-color: var(--cds-layer-selected-hover);
34343
- }
34344
-
34345
- .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
34346
- .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
34347
- width: 3px;
34348
- height: calc(100% + 4px);
34349
- }
34350
34192
 
34351
34193
  .cds--side-nav .cds--header__menu a.cds--header__menu-item {
34352
34194
  height: inherit;