@carbon/ibm-products 2.55.0 → 2.56.0-rc.0

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -38,10 +38,6 @@ exports.ExpressiveCard.propTypes = {
     iconDescription: index.default.string,
     href: index.default.string
   })),
-  /**
-   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
-   */
-  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -50,6 +46,10 @@ exports.ExpressiveCard.propTypes = {
    * Optional user provided class
    */
   className: index.default.string,
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Optional header description
    */
@@ -120,7 +120,7 @@ exports.ExpressiveCard.propTypes = {
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
-   * @deprecated please use the `aiLabel` prop
+   * @deprecated please use the `decorator` prop
    */
   slug: index.default.oneOfType([index.default.node, index.default.bool]),
   /**

package/lib/components/FullPageError/FullPageError.js

@@ -18,6 +18,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
+var _span;
 var _excluded = ["children", "className", "description", "label", "kind", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -44,20 +45,17 @@ exports.FullPageError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var errorData = {
     403: {
       svg: /*#__PURE__*/React.createElement(Error403SVG.Error403SVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__403"),
-        title: title
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__403")
       })
     },
     404: {
       svg: /*#__PURE__*/React.createElement(Error404SVG.Error404SVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__404"),
-        title: title
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__404")
       })
     },
     custom: {
       svg: /*#__PURE__*/React.createElement(ErrorGenericSVG.ErrorGenericSVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__custom"),
-        title: title
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__custom")
       })
     }
   };
@@ -78,7 +76,9 @@ exports.FullPageError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__title")
   }, /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__label")
-  }, "\u21B3 ", label), /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("p", {
+  }, _span || (_span = /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, "\u21B3 ")), label), /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__description")
   }, description), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body")

package/lib/components/FullPageError/assets/Error403SVG.d.ts

@@ -1,11 +1,9 @@
-export function Error403SVG({ className, title }: {
+export function Error403SVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace Error403SVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/lib/components/FullPageError/assets/Error403SVG.js

@@ -12,14 +12,13 @@ var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
 var Error403SVG = function Error403SVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 750 570",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#clip0_0_2401)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -712,8 +711,7 @@ var Error403SVG = function Error403SVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 Error403SVG.propTypes = {
-  className: index.propTypesExports.string,
-  title: index.propTypesExports.string
+  className: index.propTypesExports.string
 };
 
 exports.Error403SVG = Error403SVG;

package/lib/components/FullPageError/assets/Error404SVG.d.ts

@@ -1,11 +1,9 @@
-export function Error404SVG({ className, title }: {
+export function Error404SVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace Error404SVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/lib/components/FullPageError/assets/Error404SVG.js

@@ -12,14 +12,13 @@ var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
 var Error404SVG = function Error404SVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 751 549",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#clip0_0_2285)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -621,8 +620,7 @@ var Error404SVG = function Error404SVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 Error404SVG.propTypes = {
-  className: index.propTypesExports.string,
-  title: index.propTypesExports.string
+  className: index.propTypesExports.string
 };
 
 exports.Error404SVG = Error404SVG;

package/lib/components/FullPageError/assets/ErrorGenericSVG.d.ts

@@ -1,11 +1,9 @@
-export function ErrorGenericSVG({ className, title }: {
+export function ErrorGenericSVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace ErrorGenericSVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/lib/components/FullPageError/assets/ErrorGenericSVG.js

@@ -12,14 +12,13 @@ var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
 var ErrorGenericSVG = function ErrorGenericSVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 750 506",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#clip0_203_144)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -712,8 +711,7 @@ var ErrorGenericSVG = function ErrorGenericSVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 ErrorGenericSVG.propTypes = {
-  className: index.propTypesExports.string,
-  title: index.propTypesExports.string
+  className: index.propTypesExports.string
 };
 
 exports.ErrorGenericSVG = ErrorGenericSVG;

package/lib/components/InlineTip/InlineTip.d.ts

@@ -51,8 +51,13 @@ export interface InlineTipProps {
      * - If a stepped animation is required, use `{filePaths}`.
      *
      * Enabling `media` disables the `collapsible` feature.
+     * @deprecated please use the `renderMedia` prop
      */
     media?: MediaType;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: () => ReactNode;
     /**
      * Set to `true` to arrange the information in a format
      * that is easier to read in a limited space.

package/lib/components/InlineTip/InlineTip.js

@@ -20,7 +20,7 @@ var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 var _Close, _Idea, _Crossroads;
-var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
+var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "renderMedia", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--inline-tip");
@@ -58,6 +58,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$expandButtonLabe = _ref.expandButtonLabel,
     expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$narrow = _ref.narrow,
     narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
     onClick = _ref.onClick,
@@ -68,6 +69,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$withLeftGutter = _ref.withLeftGutter,
     withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var hasMedia = renderMedia || media;
   var _useState = React.useState(collapsible),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
@@ -77,7 +79,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return utils.getComponentText(React.Children.toArray(children));
   }, [children]);
   var childrenToRender = children;
-  if (!media && collapsible && isCollapsed) {
+  if (!hasMedia && collapsible && isCollapsed) {
     childrenToRender = /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__preview-text")
     }, previewText);
@@ -89,7 +91,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-labelledby": labelId,
-    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), hasMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
     role: "complementary"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
@@ -102,7 +104,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: "lg"
   }, _Close || (_Close = /*#__PURE__*/React.createElement(icons.Close, {
     size: 16
-  })))), (!media && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
+  })))), (!hasMedia && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__icon-idea"),
     tabIndex: -1
   }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
@@ -118,7 +120,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__secondary-btn")
   }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React.createElement("footer", {
     className: "".concat(blockClass, "__footer")
-  }, collapsible && !media && /*#__PURE__*/React.createElement(react.Button, {
+  }, collapsible && !hasMedia && /*#__PURE__*/React.createElement(react.Button, {
     className: "".concat(blockClass, "__toggle-btn"),
     kind: "ghost",
     size: "md",
@@ -137,12 +139,14 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         size: 16
       }));
     }
-  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React.createElement("div", {
+  }, tertiaryButtonLabel))), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__media")
-  }, media.render()) : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, media.render()), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__media"),
     filePaths: media.filePaths
-  })));
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, renderMedia()));
 });
 exports.InlineTip = settings.pkg.checkComponentEnabled(exports.InlineTip, componentName);
 exports.InlineTip.displayName = componentName;
@@ -188,6 +192,7 @@ exports.InlineTip.propTypes = {
    * - If a stepped animation is required, use `{filePaths}`.
    *
    * Enabling `media` disables the `collapsible` feature.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: index.default.oneOfType([index.default.shape({
@@ -208,6 +213,10 @@ exports.InlineTip.propTypes = {
    * Function to call when the InlineTip is closed via the "X" button.
    */
   onClose: index.default.func,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func,
   /**
    * Defining the label will show a the tertiary button with the crossroads icon.
    * You will still need to define the `onClose` method to trigger a callback.

package/lib/components/ProductiveCard/ProductiveCard.d.ts

@@ -22,9 +22,9 @@ export interface ProductiveCardProps extends PropsWithChildren {
      */
     actionIcons?: ActionIcon[];
     /**
-     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     * Optional prop that allows you to pass any component.
      */
-    aiLabel?: ReactNode | boolean;
+    decorator?: ReactNode | boolean;
     /**
      * Determines if the action icons are on the top or bottom of the card
      */
@@ -108,7 +108,7 @@ export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` prop
      */
     slug?: ReactNode | boolean;
     /**

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -50,10 +50,6 @@ exports.ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: index.default.oneOf(['top', 'bottom']),
-  /**
-   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
-   */
-  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -66,6 +62,10 @@ exports.ProductiveCard.propTypes = {
    * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
    */
   clickZone: index.default.oneOf(['one', 'two', 'three']),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Optional header description
    */

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -45,6 +45,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var backupRef = React.useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;
+  var filePathStr = filePaths === null || filePaths === void 0 ? void 0 : filePaths.join(); //converting the array to string will avoid unwanted useEffect trigger.
   // load animation source
   React.useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -87,7 +88,8 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return _loadArtifact.apply(this, arguments);
     }
     loadArtifact();
-  }, [filePaths]);
+    // eslint-disable-next-line
+  }, [filePathStr]);
   React.useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;

package/lib/global/js/package-settings.d.ts

@@ -66,6 +66,7 @@ declare namespace defaults {
         let WebTerminal: boolean;
         let WebTerminalContentWrapper: boolean;
         let WebTerminalProvider: boolean;
+        let UserAvatar: boolean;
         let Toolbar: boolean;
         let ToolbarButton: boolean;
         let ToolbarGroup: boolean;
@@ -115,7 +116,6 @@ declare namespace defaults {
         let DescriptionListCell: boolean;
         let DescriptionListRow: boolean;
         let SearchBar: boolean;
-        let UserAvatar: boolean;
         let EmptyStateV2: boolean;
         let Guidebanner: boolean;
         let GuidebannerElement: boolean;

package/lib/global/js/package-settings.js

@@ -68,6 +68,7 @@ var defaults = {
     WebTerminal: true,
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
+    UserAvatar: true,
     // other public components not yet reviewed and released:
     Toolbar: false,
     ToolbarButton: false,
@@ -121,7 +122,6 @@ var defaults = {
     DescriptionListCell: false,
     DescriptionListRow: false,
     SearchBar: false,
-    UserAvatar: false,
     /* new component flags here - comment used by generate CLI */
 
     // Onboarding components not yet reviewed and released:

package/lib/settings.d.ts

@@ -52,6 +52,7 @@ export const pkg: {
         WebTerminal: boolean;
         WebTerminalContentWrapper: boolean;
         WebTerminalProvider: boolean;
+        UserAvatar: boolean;
         Toolbar: boolean;
         ToolbarButton: boolean;
         ToolbarGroup: boolean;
@@ -101,7 +102,6 @@ export const pkg: {
         DescriptionListCell: boolean;
         DescriptionListRow: boolean;
         SearchBar: boolean;
-        UserAvatar: boolean;
         EmptyStateV2: boolean;
         Guidebanner: boolean;
         GuidebannerElement: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.55.0",
+  "version": "2.56.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.14.0",
+    "jest-config-ibm-cloud-cognitive": "^1.15.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.51.0",
+    "@carbon/ibm-products-styles": "^2.52.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,11 +114,11 @@
     "@carbon/grid": "^11.29.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.1",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "7cbca46dca691777aee495a9626b1967ad9e3be9"
+  "gitHead": "6cbf686269c98ae8b5e9800217ff92af8aa363f4"
 }

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -89,7 +89,7 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     text-overflow: ellipsis;
   }
 }
-
-.#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
-  z-index: utilities.z('header');
+.#{$_block-class}__overflow-menu {
+  /* stylelint-disable-next-line carbon/type-use */
+  line-height: 0;
 }

package/scss/components/Card/_card.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// NOTE: Please do not remove the duplicate `slug` and `ai-label` classes. We need both until slug is fully deprecated
+// NOTE: Please do not remove the duplicate `slug` and `decorator` classes. We need both until slug is fully deprecated
 
 // Standard imports.
 @use '@carbon/styles/scss/theme' as *;
@@ -144,25 +144,39 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   position: relative;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--ai-label {
   position: absolute;
   top: $spacing-05;
   right: $spacing-05;
 }
 
+.#{$block-class}__header__inner-wrapper--decorator {
+  position: absolute;
+  top: $spacing-05;
+  right: $spacing-05;
+
+  .#{c4p-settings.$carbon-prefix}--slug,
+  .#{c4p-settings.$carbon-prefix}--ai-label {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+}
+
 .#{$block-class}__header-container--has-slug,
-.#{$block-class}__header-container--has-ai-label {
+.#{$block-class}__header-container--has-decorator {
   width: 100%;
   padding-right: $spacing-07;
 }
 
 .#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions,
-.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--has-actions {
+.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--has-actions {
   padding-right: $spacing-08;
 }
 
 .#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label,
-.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--large-tile-or-label {
+.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--large-tile-or-label {
   padding-right: $spacing-09;
 }
 

package/scss/components/Coachmark/_coachmark-overlay.scss

@@ -7,8 +7,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable carbon/layout-token-use */
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/theme-use */
 /* stylelint-disable declaration-no-important */
 
 // Standard imports.

package/scss/components/Coachmark/_coachmark-tagline.scss

@@ -6,7 +6,7 @@
 //
 
 /* stylelint-disable max-nesting-depth */
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/theme-use */
 /* stylelint-disable declaration-no-important */
 
 // Standard imports.

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/layout-use */
 /* stylelint-disable carbon/motion-easing-use */
 /* stylelint-disable max-nesting-depth */
 //
@@ -44,7 +44,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
         width: $spacing-04;
         height: $spacing-04;
         border-radius: 50%;
-        /* stylelint-disable-next-line carbon/theme-token-use */
+        /* stylelint-disable-next-line carbon/theme-use */
         background-color: $blue-50;
         content: '';
       }
@@ -61,7 +61,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
           height: 18px;
           border-radius: 100%;
           content: '';
-          /* stylelint-disable-next-line carbon/theme-token-use */
+          /* stylelint-disable-next-line carbon/theme-use */
           outline: $spacing-01 $focus solid;
         }
       }

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -68,12 +68,12 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
     visibility: visible;
 
     &__light {
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       background-color: $gray-90;
     }
 
     &__dark {
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       background-color: $button-tertiary-active;
     }
   }

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -26,7 +26,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   z-index: -1;
   opacity: 0;
   pointer-events: none;
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */
   transform: translateX($translateValue);
   transition: all $duration-fast-02 motion(standard, productive);
 }
@@ -204,24 +204,24 @@ $colors: (
   //this is to select and add color to the new group preview
   .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
     button {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     $next-group-color: list.nth($colors, (($i%list.length($colors)) + 1));
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
   }
 
   //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups
   @for $el-index from 1 through 50 {
     $item-index: $el-index;
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     $item-index: ((($item-index - 1) % $group-colors-length) + 1);
     #{$selector} {
       @if $item-index != 1 {
-        /* stylelint-disable-next-line carbon/theme-token-use */
+        /* stylelint-disable-next-line carbon/theme-use */
         --#{$block-class}__condition-wrapper-color: #{list.nth(
             $group-colors,
             $item-index
-          )}; // stylelint-disable-line carbon/theme-token-use
+          )}; // stylelint-disable-line carbon/theme-use
       }
     }
 
@@ -248,7 +248,7 @@ $colors: (
       .#{$block-class}__add-button,
       .#{$block-class}__add-condition-sub-group
     ) {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
 }