@carbon/ibm-products 2.59.0 → 2.60.0-rc.0

package/lib/node_modules/prop-types/factoryWithTypeCheckers.js

@@ -341,7 +341,7 @@ function requireFactoryWithTypeCheckers() {
     }
     function createUnionTypeChecker(arrayOfTypeCheckers) {
       if (!Array.isArray(arrayOfTypeCheckers)) {
-        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
+        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : undefined;
         return emptyFunctionThatReturnsNull;
       }
       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {

package/lib/settings.js

@@ -9,26 +9,23 @@
 
 var packageSettings = require('./global/js/package-settings.js');
 var React = require('react');
-var themes = require('@carbon/themes');
+require('@carbon/themes');
 var pconsole = require('./global/js/utils/pconsole.js');
 var Canary = require('./components/_Canary/Canary.js');
 
 var carbon = {
-  get themes() {
-    return themes.themes;
-  },
   prefix: 'cds'
 };
 var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
   return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
 };
 packageSettings.default.logDeprecated = function (component, name) {
-  if (component !== null && component !== void 0 && component.deprecated) {
+  if (component !== null && component !== undefined && component.deprecated) {
     var _pconsole$level;
     var _component$deprecated = component.deprecated,
       level = _component$deprecated.level,
       details = _component$deprecated.details;
-    var logUsing = (_pconsole$level = pconsole.default === null || pconsole.default === void 0 ? void 0 : pconsole.default[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : pconsole.default.error;
+    var logUsing = (_pconsole$level = pconsole.default === null || pconsole.default === undefined ? undefined : pconsole.default[level]) !== null && _pconsole$level !== undefined ? _pconsole$level : pconsole.default.error;
     logUsing(componentDeprecatedWarning(name || component.displayName, details));
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.59.0",
+  "version": "2.60.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -56,69 +56,68 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-proposal-export-default-from": "^7.17.12",
-    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
-    "@babel/plugin-transform-react-constant-elements": "^7.17.12",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.25.9",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-transform-react-constant-elements": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@ibm/telemetry-js-config-generator": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.17.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.18.0-rc.0",
     "chalk": "^4.1.2",
-    "change-case": "4.1.2",
+    "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.2.0",
-    "glob": "^10.3.10",
+    "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.18.0",
+    "jest-config-ibm-cloud-cognitive": "^1.19.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^17.1.11",
+    "npm-check-updates": "^17.1.13",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.27.3",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.30.1",
     "rollup-plugin-strip-banner": "^3.1.0",
-    "sass": "^1.80.6",
+    "sass": "^1.83.4",
     "typescript-config-carbon": "^0.3.0",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.26.0",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.55.0",
+    "@carbon/ibm-products-styles": "^2.56.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@ibm/telemetry-js": "^1.5.0",
+    "@ibm/telemetry-js": "^1.8.0",
     "framer-motion": "^6.5.1 < 7",
-    "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
     "react-table": "^7.8.0",
-    "react-window": "^1.8.10"
+    "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.29.0",
-    "@carbon/layout": "^11.28.0",
+    "@carbon/grid": "^11.31.0",
+    "@carbon/layout": "^11.29.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.72.0",
-    "@carbon/themes": "^11.43.0",
-    "@carbon/type": "^11.33.0",
+    "@carbon/react": "^1.75.0",
+    "@carbon/themes": "^11.46.0",
+    "@carbon/type": "^11.35.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "062019e2651b49e5887973a50d08c05e3576c2e2"
+  "gitHead": "c6483ba5c87a8c7b18a79188205dd425f9a406cb"
 }

package/scss/components/APIKeyModal/_api-key-modal.scss

@@ -19,27 +19,27 @@ $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--inline-loading {
-  min-height: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
+  min-block-size: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
-  padding-right: $spacing-05;
+  padding-inline-end: $spacing-05;
 }
 
 .#{$block-class}__body {
-  padding-right: calc(20% - #{$spacing-05});
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{$block-class}__messaging {
   display: flex;
-  padding-right: calc(20% - #{$spacing-05});
-  margin-top: $spacing-03;
+  margin-block-start: $spacing-03;
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{$block-class}__messaging-text {
   flex: 1;
-  margin-left: $spacing-03;
+  margin-inline-start: $spacing-03;
   @include type.type-style('label-01');
 }
 

package/scss/components/APIKeyModal/_carbon-imports.scss

@@ -8,8 +8,8 @@
 // APIKeyModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
 // InlineLoading, Form, Button
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/inline-loading';
-@use '@carbon/react/scss/components/form';
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/inline-loading';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/button';

package/scss/components/AboutModal/_about-modal.scss

@@ -26,8 +26,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 
 .#{$block-class} .#{$block-class}__header {
   padding: 0 20% 0 $spacing-05;
-  margin-bottom: 0;
   grid-row: auto;
+  margin-block-end: 0;
 }
 
 .#{$block-class} .#{$block-class}__title {
@@ -40,27 +40,27 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
   @include type.type-style('body-compact-02');
 
   overflow: hidden auto;
-  min-height: $spacing-10;
   grid-row: auto;
+  min-block-size: $spacing-10;
   padding-block-start: 0;
   padding-inline: $spacing-05 20%;
 
   &:not(.#{c4p-settings.$carbon-prefix}--modal-scroll-content) {
-    margin-bottom: $spacing-06;
+    margin-block-end: $spacing-06;
     padding-block-end: 0;
   }
 }
 
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
-  bottom: #{$spacing-06};
   background-image: linear-gradient(to bottom, #00000000, $layer-01);
+  inset-block-end: #{$spacing-06};
 }
 
 .#{$block-class} .#{$block-class}__links-container {
   @include type.type-style('body-compact-01');
 
-  margin-top: $spacing-06;
+  margin-block-start: $spacing-06;
 }
 
 .#{$block-class} .#{$block-class}__version {
@@ -68,32 +68,32 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 }
 
 .#{$block-class} .#{$block-class}__links-container a + a {
-  padding-left: $spacing-03;
-  border-left: 1px solid $border-strong-01;
-  margin-left: $spacing-03;
+  border-inline-start: 1px solid $border-strong-01;
+  margin-inline-start: $spacing-03;
+  padding-inline-start: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__content,
 .#{$block-class} .#{$block-class}__copyright-text {
   @include type.type-style('label-01');
 
-  margin-top: $spacing-06;
-  margin-bottom: 0;
   color: $text-secondary;
+
+  margin-block: $spacing-06 0;
 }
 
 .#{$block-class} .#{$block-class}__copyright-text {
-  margin-top: $spacing-05;
+  margin-block-start: $spacing-05;
 }
 
 p.c4p--about-modal__content:first-child,
 p.c4p--about-modal__copyright-text:first-child {
-  margin-top: $spacing-07;
+  margin-block-start: $spacing-07;
 }
 
 .#{$block-class} .#{$block-class}__footer {
   display: block;
-  height: auto;
   padding: $spacing-05;
   background-color: $layer-02;
+  block-size: auto;
 }

package/scss/components/AboutModal/_carbon-imports.scss

@@ -7,5 +7,5 @@
 
 // AboutModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/tabs';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/tabs';

package/scss/components/ActionBar/_action-bar.scss

@@ -20,7 +20,7 @@ $block-class-overflow-items: #{$_block-class}-overflow-items;
 
   .#{$_block-class}__displayed-items {
     display: inline-flex;
-    width: 100%;
+    inline-size: 100%;
     white-space: nowrap;
   }
 
@@ -41,8 +41,8 @@ $block-class-overflow-items: #{$_block-class}-overflow-items;
 
   .#{$block-class-overflow-items}__item-content {
     display: flex;
-    width: 100%;
     justify-content: space-between;
+    inline-size: 100%;
   }
 
   .#{$block-class-overflow-items}__item svg {

package/scss/components/ActionBar/_carbon-imports.scss

@@ -7,5 +7,5 @@
 
 // ActionBar uses the following Carbon components:
 // Button, OverflowMenu, OverflowMenuItem
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/overflow-menu';

package/scss/components/ActionSet/_action-set.scss

@@ -29,9 +29,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   margin: 0;
 
   &.#{$action-set-block-class}__action-button--expressive {
-    height: $spacing-10;
-    padding-top: $spacing-05;
-    padding-bottom: $spacing-07;
+    block-size: $spacing-10;
+    padding-block: $spacing-05 $spacing-07;
   }
 }
 
@@ -39,12 +38,12 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--expressive,
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set
   .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn {
-  max-width: none;
+  max-inline-size: none;
 }
 
 .#{$action-set-block-class}:not(.#{$action-set-block-class}--stacking)
   .#{$action-set-block-class}__action-button--ghost {
-  padding-left: $spacing-07;
+  padding-inline-start: $spacing-07;
 }
 
 // For row-single in medium,
@@ -107,9 +106,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$action-set-block-class}__action-button:not(
     .#{$action-set-block-class}__action-button--ghost
   ) {
-  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
-  max-width: to-rem(232px);
   flex: 0 1 25%;
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+  max-inline-size: to-rem(232px);
 }
 
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple
@@ -121,7 +120,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$action-set-block-class}__action-button
   .#{c4p-settings.$carbon-prefix}--inline-loading {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: $spacing-07;
+  inline-size: $spacing-07;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }

package/scss/components/ActionSet/_carbon-imports.scss

@@ -7,5 +7,5 @@
 
 // ActionBar uses the following Carbon components:
 // Button, OverflowMenu, OverflowMenuItem
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/inline-loading';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/inline-loading';

package/scss/components/AddSelect/_add-select.scss

@@ -19,8 +19,8 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__header {
   padding: $spacing-05;
-  padding-bottom: 0;
-  border-top: 1px solid $layer-accent-01;
+  border-block-start: 1px solid $layer-accent-01;
+  padding-block-end: 0;
 }
 
 .#{$block-class}__body {
@@ -35,11 +35,11 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
   &-cell-wrapper {
     display: flex;
-    height: 3rem;
     align-items: center;
     justify-content: space-between;
     padding: 0 $spacing-05;
-    border-bottom: 1px solid $layer-accent-01;
+    block-size: 3rem;
+    border-block-end: 1px solid $layer-accent-01;
   }
 
   &-cell-title {
@@ -83,7 +83,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
   &-form-control-label-wrapper {
     display: flex;
-    margin-left: $spacing-05;
+    margin-inline-start: $spacing-05;
   }
 
   &-form-control-label-text {
@@ -92,20 +92,20 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   &-cell-avatar {
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 
   &-cell-icon {
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 
   &-row {
-    border-left: 0.125rem solid transparent;
+    border-inline-start: 0.125rem solid transparent;
   }
 
   &-row-meta--selected {
-    border-left: 0.125rem solid $interactive;
     background-color: $layer-hover-01;
+    border-inline-start: 0.125rem solid $interactive;
   }
 }
 
@@ -142,7 +142,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 .#{$block-class}__sidebar-header {
   display: flex;
   padding: $spacing-07 $spacing-05 $spacing-03 $spacing-05;
-  border-bottom: 1px solid $layer-accent-01;
+  border-block-end: 1px solid $layer-accent-01;
 
   .#{$block-class}__sidebar-title {
     @include type.type-style('heading-compact-02');
@@ -150,7 +150,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 }
 
 .#{$block-class}__sidebar-title {
-  margin-right: $spacing-03;
+  margin-inline-end: $spacing-03;
 }
 
 .#{$block-class}__sidebar-selected-item {
@@ -172,14 +172,15 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 .#{$block-class} .#{$block-class}__sidebar-item-header {
   @include type.type-style('label-01');
 
-  margin-bottom: $spacing-03;
   color: $text-secondary;
+
+  margin-block-end: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__sidebar-item-body {
   @include type.type-style('body-01');
 
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
@@ -200,12 +201,16 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   flex-grow: 1;
   overflow-x: auto;
 
+  @supports (overflow-inline: auto) {
+    overflow-inline: auto;
+  }
+
   .#{$block-class}__selections-form-control-label-wrapper {
-    margin-left: $spacing-03;
+    margin-inline-start: $spacing-03;
   }
 
   .#{$block-class}__selections-row {
-    border-left: 0;
+    border-inline-start: 0;
   }
 
   .#{$block-class}__selections .#{$block-class}__selections-cell {
@@ -213,13 +218,13 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   .#{$block-class}__selections-cell-wrapper {
-    height: 2rem;
     padding: 0 $spacing-03;
+    block-size: 2rem;
   }
 
   .#{$block-class}__tags {
     padding: 0 $spacing-03;
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   .#{$block-class}__selections-wrapper-multi {
@@ -233,15 +238,15 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__selections-row:first-child
   .#{$block-class}__selections-cell-wrapper {
-  border-top: 1px solid $border-subtle-01;
+  border-block-start: 1px solid $border-subtle-01;
 }
 
 .#{$block-class}__column {
   overflow: auto;
   flex: 0 0 20rem;
   padding: $spacing-05;
-  border-top: 1px solid $border-subtle-01;
-  border-right: 1px solid $border-subtle-01;
+  border-block-start: 1px solid $border-subtle-01;
+  border-inline-end: 1px solid $border-subtle-01;
 
   &-search-bar {
     display: flex;
@@ -256,7 +261,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   .#{$carbon-prefix}--overflow-menu {
-    border-bottom: 1px solid $border-strong-01;
+    border-block-end: 1px solid $border-strong-01;
   }
 }
 
@@ -267,22 +272,21 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 .#{$block-class}__tags {
   display: flex;
   align-items: center;
-  margin-top: $spacing-05;
-  margin-bottom: $spacing-03;
+  margin-block: $spacing-05 $spacing-03;
 
   &-label {
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 }
 
 .#{$block-class}__global-filter {
   position: absolute;
   z-index: 999999;
-  right: 0;
-  width: 100%;
-  max-width: 40rem;
   background: $layer-01;
   box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
+  inline-size: 100%;
+  inset-inline-end: 0;
+  max-inline-size: 40rem;
   transform: translate(0, 100%);
 
   &-search {
@@ -311,16 +315,16 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__global-filter-button-set
   button.#{$block-class}__global-filter-button {
-  max-width: none;
   flex: 1;
+  max-inline-size: none;
 }
 
 button.#{$block-class}__global-filter-toggle {
-  border-bottom-color: $border-strong-01;
   background: $field-01;
+  border-block-end-color: $border-strong-01;
 
   &--open {
-    border-bottom: $border-strong-01;
+    border-block-end: $border-strong-01;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
   }
 }
@@ -333,11 +337,11 @@ button.#{$block-class}__global-filter-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: $spacing-05;
+    margin-block-end: $spacing-05;
   }
 
   &-entry {
-    margin-bottom: $spacing-05;
+    margin-block-end: $spacing-05;
   }
 }
 
@@ -356,7 +360,7 @@ button.#{$block-class}__global-filter-toggle {
 // overrides
 
 .#{$block-class}__selections .#{$carbon-prefix}--list-box__menu {
-  left: auto;
+  inset-inline-start: auto;
 }
 
 .#{$block-class}__tags .#{$carbon-prefix}--tag {
@@ -387,7 +391,7 @@ button.#{$block-class}__global-filter-toggle {
 .#{$block-class}.#{$block-class}__multi
   .#{$pkg-prefix}--action-set.#{$carbon-prefix}--btn-set.#{$pkg-prefix}--action-set--max
   .#{$pkg-prefix}--action-set__action-button {
-  max-width: 11.25rem;
+  max-inline-size: 11.25rem;
 }
 
 .#{$block-class} .#{$block-class}__items-label {
@@ -398,7 +402,7 @@ button.#{$block-class}__global-filter-toggle {
   .#{$carbon-prefix}--modal-container--sm
   .#{$carbon-prefix}--modal-content
   p {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
@@ -426,8 +430,8 @@ button.#{$block-class}__global-filter-toggle {
 }
 
 .#{$block-class}__multi .#{$pkg-prefix}--empty-state {
-  max-width: 16rem;
-  margin-top: $spacing-09;
+  margin-block-start: $spacing-09;
+  max-inline-size: 16rem;
 }
 
 .#{$block-class} .#{$carbon-prefix}--accordion__arrow {
@@ -455,9 +459,8 @@ button.#{$block-class}__global-filter-toggle {
 .#{$block-class}
   .#{$carbon-prefix}--accordion__item--active
   .#{$carbon-prefix}--accordion__content {
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: $spacing-03;
+  margin-block-start: $spacing-03;
+  padding-block: 0;
 }
 
 .#{$block-class} + div .#{$carbon-prefix}--tooltip,