@carbon/ibm-products 2.43.2-canary.29 → 2.43.2-canary.292

package/lib/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js

@@ -7,12 +7,10 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var index = require('../../../prop-types/index.js');
+var index = require('../../../../_virtual/index.js');
 
 var iconPropTypes = {
-  size: index["default"].oneOfType([index["default"].number, index["default"].string])
+  size: index.default.oneOfType([index.default.number, index.default.string])
 };
 
 exports.i = iconPropTypes;

package/lib/node_modules/object-assign/index.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var objectAssign;
 var hasRequiredObjectAssign;
 function requireObjectAssign() {

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret.js');
 var has = require('./lib/has.js');
@@ -20,9 +18,9 @@ function requireCheckPropTypes() {
   hasRequiredCheckPropTypes = 1;
   var printWarning = function printWarning() {};
   if (process.env.NODE_ENV !== 'production') {
-    var ReactPropTypesSecret$1 = ReactPropTypesSecret.__require();
+    var ReactPropTypesSecret$1 = /*@__PURE__*/ReactPropTypesSecret.__require();
     var loggedTypeFailures = {};
-    var has$1 = has.__require();
+    var has$1 = /*@__PURE__*/has.__require();
     printWarning = function printWarning(text) {
       var message = 'Warning: ' + text;
       if (typeof console !== 'undefined') {
@@ -60,7 +58,7 @@ function requireCheckPropTypes() {
             // This is intentionally an invariant that gets caught. It's the same
             // behavior as without this statement except with a better message.
             if (typeof typeSpecs[typeSpecName] !== 'function') {
-              var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + _rollupPluginBabelHelpers["typeof"](typeSpecs[typeSpecName]) + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+              var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + _rollupPluginBabelHelpers.typeof(typeSpecs[typeSpecName]) + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
               err.name = 'Invariant Violation';
               throw err;
             }
@@ -69,7 +67,7 @@ function requireCheckPropTypes() {
             error = ex;
           }
           if (error && !(error instanceof Error)) {
-            printWarning((componentName || 'React class') + ': type specification of ' + location + ' `' + typeSpecName + '` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a ' + _rollupPluginBabelHelpers["typeof"](error) + '. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).');
+            printWarning((componentName || 'React class') + ': type specification of ' + location + ' `' + typeSpecName + '` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a ' + _rollupPluginBabelHelpers.typeof(error) + '. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).');
           }
           if (error instanceof Error && !(error.message in loggedTypeFailures)) {
             // Only monitor this failure once because there tends to be a lot of the

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret.js');
 
 var factoryWithThrowingShims;
@@ -16,7 +14,7 @@ var hasRequiredFactoryWithThrowingShims;
 function requireFactoryWithThrowingShims() {
   if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
   hasRequiredFactoryWithThrowingShims = 1;
-  var ReactPropTypesSecret$1 = ReactPropTypesSecret.__require();
+  var ReactPropTypesSecret$1 = /*@__PURE__*/ReactPropTypesSecret.__require();
   function emptyFunction() {}
   function emptyFunctionWithReset() {}
   emptyFunctionWithReset.resetWarningCache = emptyFunction;

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var require$$0 = require('react-is');
 var index = require('../object-assign/index.js');
@@ -16,20 +14,16 @@ var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret.js');
 var has = require('./lib/has.js');
 var checkPropTypes = require('./checkPropTypes.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
-
 var factoryWithTypeCheckers;
 var hasRequiredFactoryWithTypeCheckers;
 function requireFactoryWithTypeCheckers() {
   if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
   hasRequiredFactoryWithTypeCheckers = 1;
-  var ReactIs = require$$0__default["default"];
+  var ReactIs = require$$0;
   var assign = index.__require();
-  var ReactPropTypesSecret$1 = ReactPropTypesSecret.__require();
-  var has$1 = has.__require();
-  var checkPropTypes$1 = checkPropTypes.__require();
+  var ReactPropTypesSecret$1 = /*@__PURE__*/ReactPropTypesSecret.__require();
+  var has$1 = /*@__PURE__*/has.__require();
+  var checkPropTypes$1 = /*@__PURE__*/checkPropTypes.__require();
   var printWarning = function printWarning() {};
   if (process.env.NODE_ENV !== 'production') {
     printWarning = function printWarning(text) {
@@ -174,7 +168,7 @@ function requireFactoryWithTypeCheckers() {
      */
     function PropTypeError(message, data) {
       this.message = message;
-      this.data = data && _rollupPluginBabelHelpers["typeof"](data) === 'object' ? data : {};
+      this.data = data && _rollupPluginBabelHelpers.typeof(data) === 'object' ? data : {};
       this.stack = '';
     }
     // Make `instanceof Error` still work for returned errors.
@@ -434,7 +428,7 @@ function requireFactoryWithTypeCheckers() {
       return createChainableTypeChecker(validate);
     }
     function isNode(propValue) {
-      switch (_rollupPluginBabelHelpers["typeof"](propValue)) {
+      switch (_rollupPluginBabelHelpers.typeof(propValue)) {
         case 'number':
         case 'string':
         case 'undefined':
@@ -502,7 +496,7 @@ function requireFactoryWithTypeCheckers() {
 
     // Equivalent of `typeof` but with special handling for array and regexp.
     function getPropType(propValue) {
-      var propType = _rollupPluginBabelHelpers["typeof"](propValue);
+      var propType = _rollupPluginBabelHelpers.typeof(propValue);
       if (Array.isArray(propValue)) {
         return 'array';
       }

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

@@ -7,32 +7,28 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _commonjsHelpers = require('../../_virtual/_commonjsHelpers.js');
-var index = require('../../_virtual/index.js');
+var index = require('../../_virtual/index2.js');
 var require$$0 = require('react-is');
 var factoryWithTypeCheckers = require('./factoryWithTypeCheckers.js');
 var factoryWithThrowingShims = require('./factoryWithThrowingShims.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
-
-if (process.env.NODE_ENV !== 'production') {
-  var ReactIs = require$$0__default["default"];
-
-  // By explicitly using `prop-types` you are opting into new development behavior.
-  // http://fb.me/prop-types-in-prod
-  var throwOnDirectAccess = true;
-  index.__module.exports = factoryWithTypeCheckers.__require()(ReactIs.isElement, throwOnDirectAccess);
-} else {
-  // By explicitly using `prop-types` you are opting into new production behavior.
-  // http://fb.me/prop-types-in-prod
-  index.__module.exports = factoryWithThrowingShims.__require()();
+var hasRequiredPropTypes;
+function requirePropTypes() {
+  if (hasRequiredPropTypes) return index.__module.exports;
+  hasRequiredPropTypes = 1;
+  if (process.env.NODE_ENV !== 'production') {
+    var ReactIs = require$$0;
+
+    // By explicitly using `prop-types` you are opting into new development behavior.
+    // http://fb.me/prop-types-in-prod
+    var throwOnDirectAccess = true;
+    index.__module.exports = /*@__PURE__*/factoryWithTypeCheckers.__require()(ReactIs.isElement, throwOnDirectAccess);
+  } else {
+    // By explicitly using `prop-types` you are opting into new production behavior.
+    // http://fb.me/prop-types-in-prod
+    index.__module.exports = /*@__PURE__*/factoryWithThrowingShims.__require()();
+  }
+  return index.__module.exports;
 }
-var propTypesExports = index.__module.exports;
-var PropTypes = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(propTypesExports);
 
-exports["default"] = PropTypes;
-exports.propTypesExports = propTypesExports;
+exports.__require = requirePropTypes;

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var ReactPropTypesSecret_1;
 var hasRequiredReactPropTypesSecret;
 function requireReactPropTypesSecret() {

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var has;
 var hasRequiredHas;
 function requireHas() {

package/lib/settings.d.ts

@@ -25,6 +25,7 @@ export const pkg: {
         ErrorEmptyState: boolean;
         ExportModal: boolean;
         ExpressiveCard: boolean;
+        FullPageError: boolean;
         HTTPError403: boolean;
         HTTPError404: boolean;
         HTTPErrorOther: boolean;
@@ -63,10 +64,11 @@ export const pkg: {
         EditFullPage: boolean;
         EditUpdateCards: boolean;
         Nav: boolean;
+        NavItem: boolean;
+        NavList: boolean;
         BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;
-        FullPageError: boolean;
         ScrollGradient: boolean;
         StringFormatter: boolean;
         StatusIndicator: boolean;

package/lib/settings.js

@@ -7,18 +7,12 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var packageSettings = require('./global/js/package-settings.js');
 var React = require('react');
 var themes = require('@carbon/themes');
 var pconsole = require('./global/js/utils/pconsole.js');
 var Canary = require('./components/_Canary/Canary.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var carbon = {
   get themes() {
     return themes.themes;
@@ -28,13 +22,13 @@ var carbon = {
 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) {
+packageSettings.default.logDeprecated = function (component, name) {
   if (component !== null && component !== void 0 && 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 === void 0 ? void 0 : pconsole.default[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : pconsole.default.error;
     logUsing(componentDeprecatedWarning(name || component.displayName, details));
   }
 };
@@ -44,13 +38,13 @@ packageSettings["default"].logDeprecated = function (component, name) {
 // a Canary placeholder initialized with the name of the replaced component.
 // Note that the returned stub carries any other properties which had already
 // been assigned (eg propTypes, displayName, etc).
-packageSettings["default"].checkComponentEnabled = function (component, name) {
+packageSettings.default.checkComponentEnabled = function (component, name) {
   if (component.render) {
     // The component is a forward-ref, so make a stub forward-ref.
-    var forward = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-      packageSettings["default"].logDeprecated(component, name); // may log don't care about result
+    var forward = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      packageSettings.default.logDeprecated(component, name); // may log don't care about result
       // Replace the stub's render fn so this test only happens once.
-      return (forward.render = packageSettings["default"].isComponentEnabled(name) || !packageSettings["default"].isComponentPublic(name) ?
+      return (forward.render = packageSettings.default.isComponentEnabled(name) || !packageSettings.default.isComponentPublic(name) ?
       // If the component is enabled, or if it's not a public component,
       // replace the stub's render fn with the component's render fn.
       component.render :
@@ -73,9 +67,9 @@ packageSettings["default"].checkComponentEnabled = function (component, name) {
   } else {
     // The component is a direct render fn, so make a stub render fn.
     var _render = function render(props) {
-      packageSettings["default"].logDeprecated(component, name); // may log don't care about result
+      packageSettings.default.logDeprecated(component, name); // may log don't care about result
       // Replace the stub render fn so this test only happens once.
-      return (_render = packageSettings["default"].isComponentEnabled(name) || !packageSettings["default"].isComponentPublic(name) ?
+      return (_render = packageSettings.default.isComponentEnabled(name) || !packageSettings.default.isComponentPublic(name) ?
       // If the component is enabled, or if it's not a public component,
       // replace the stub render fn with the component render fn.
       component :
@@ -98,7 +92,7 @@ packageSettings["default"].checkComponentEnabled = function (component, name) {
     });
   }
 };
-var pkg = packageSettings["default"];
+var pkg = packageSettings.default;
 
 exports.carbon = carbon;
 exports.pkg = pkg;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.29+6505e1c58",
+  "version": "2.43.2-canary.292+e7e025e03",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,8 @@
     "lib",
     "scss",
     "flags.js",
-    "telemetry.yml"
+    "telemetry.yml",
+    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
   ],
   "keywords": [
     "carbon",
@@ -66,9 +67,9 @@
     "@babel/preset-typescript": "^7.21.5",
     "@ibm/telemetry-js-config-generator": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.0",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.0",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-ibm-cloud-cognitive": "^0.14.40",
@@ -80,22 +81,22 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.2.0",
+    "jest-config-ibm-cloud-cognitive": "^1.11.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.5",
-    "rollup": "^2.79.1",
+    "rollup": "^3.29.5",
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.77.2",
-    "typescript-config-carbon": "^0.2.1",
+    "typescript-config-carbon": "^0.3.0",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.39.0",
+    "@carbon/feature-flags": "^0.22.0",
+    "@carbon/ibm-products-styles": "^2.48.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -110,14 +111,14 @@
     "react-window": "^1.8.10"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.22.0",
-    "@carbon/layout": "^11.21.0",
-    "@carbon/motion": "^11.17.0",
-    "@carbon/react": "^1.55.0",
-    "@carbon/themes": "^11.34.0",
-    "@carbon/type": "^11.26.0",
+    "@carbon/grid": "^11.27.0",
+    "@carbon/layout": "^11.26.0",
+    "@carbon/motion": "^11.22.0",
+    "@carbon/react": "^1.66.0",
+    "@carbon/themes": "^11.40.0",
+    "@carbon/type": "^11.31.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "6505e1c58cab0d12f861411016568d7f41531cd1"
+  "gitHead": "e7e025e034fdcbc18f645145031f56ed07e6cced"
 }

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

@@ -45,6 +45,11 @@ $draghandle-btn-class: #{$block-class}__handle;
 
   visibility: hidden;
 
+  &--tooltip {
+    position: initial;
+    transform: none !important;
+  }
+
   &--fixed {
     position: fixed;
     right: $spacing-05;
@@ -68,45 +73,19 @@ $draghandle-btn-class: #{$block-class}__handle;
     visibility: visible;
   }
 
-  // CARET STYLING
-  &__caret {
-    // background-color: this property is set in _coachmark-overlay-theme.scss
-    position: absolute;
-    z-index: 5902;
-    width: 0;
-    height: 0;
-    // border-bottom-color: this property is set in _coachmark-overlay-theme.scss
-    border-right: $caret-center solid transparent;
-    border-bottom: solid $caret-center $background-inverse;
-    border-left: $caret-center solid transparent;
-  }
-
-  // OVERLAY AND CARET POSITIONING
+  // OVERLAY POSITIONING
   &--top {
     $horizontal-push: calc($distance-offset - $caret-center);
     $translate-y: calc(-1 * (100% + $distance-offset + $caret-height));
 
     transform: translate(-50%, $translate-y);
 
-    .#{$block-class}__caret {
-      left: calc(50% - $caret-center);
-      transform: rotate(180deg);
-    }
-
     &-left {
       transform: translate(calc(-1 * $distance-offset), $translate-y);
-      .#{$block-class}__caret {
-        left: $horizontal-push;
-        transform: rotate(180deg);
-      }
     }
 
     &-right {
       transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
-      .#{$block-class}__caret {
-        right: $horizontal-push;
-        transform: rotate(180deg);
-      }
     }
   }
 
@@ -116,26 +95,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $translate-y: calc($distance-offset + $caret-height);
 
     transform: translate(-50%, $translate-y);
-    .#{$block-class}__caret {
-      top: $top;
-      left: calc(50% - $caret-center);
-    }
 
     &-left {
       transform: translate(calc(-1 * $distance-offset), $translate-y);
-      .#{$block-class}__caret {
-        top: $top;
-        left: $horizontal-push;
-      }
     }
 
     &-right {
       transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
-
-      .#{$block-class}__caret {
-        top: $top;
-        right: $horizontal-push;
-      }
     }
   }
 
@@ -145,28 +111,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $vertical-push: calc($distance-offset - ($caret-height * 0.5));
 
     transform: translate($translate-x, -50%);
-    .#{$block-class}__caret {
-      top: calc(50% - ($caret-height * 0.5));
-      right: $right;
-      transform: rotate(90deg);
-    }
 
     &-top {
       transform: translate($translate-x, calc(-1 * $distance-offset));
-      .#{$block-class}__caret {
-        top: $vertical-push;
-        right: $right;
-        transform: rotate(90deg);
-      }
     }
 
     &-bottom {
       transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
-      .#{$block-class}__caret {
-        right: $right;
-        bottom: $vertical-push;
-        transform: rotate(90deg);
-      }
     }
   }
 
@@ -176,28 +127,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $vertical-push: calc($distance-offset - ($caret-height * 0.5));
 
     transform: translate($translate-x, -50%);
-    .#{$block-class}__caret {
-      top: calc(50% - ($caret-height * 0.5));
-      left: $left;
-      transform: rotate(-90deg);
-    }
 
     &-top {
       transform: translate($translate-x, calc(-1 * $distance-offset));
-      .#{$block-class}__caret {
-        top: $vertical-push;
-        left: $left;
-        transform: rotate(-90deg);
-      }
     }
 
     &-bottom {
       transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
-      .#{$block-class}__caret {
-        bottom: $vertical-push;
-        left: $left;
-        transform: rotate(-90deg);
-      }
     }
   }
 

package/scss/components/Coachmark/_coachmark.scss

@@ -8,6 +8,7 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
+@use '@carbon/styles/scss/config';
 
 @use './coachmark-dragbar';
 @use './coachmark-header';
@@ -23,8 +24,8 @@
 // TODO: @use(s) of IBM Products component styles used by Coachmark
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-//$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
 
-// .#{$block-class} {
-//   // TODO: Styles.
-// }
+.#{$block-class} {
+  position: relative;
+}

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

@@ -69,9 +69,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
   }
   .#{$block-class}__target {
     // the hit area
-    position: absolute;
-    top: calc(-1 * $spacing-05);
-    left: calc(-1 * $spacing-05);
+    display: flex;
     width: $spacing-07;
     height: $spacing-07;
     padding: 0;

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -49,7 +49,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-block {
   display: flex;
-  width: max-content;
+  width: fit-content;
   flex-direction: row;
 }
 .#{$block-class}__content-container {
@@ -61,7 +61,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   margin-top: $spacing-03;
   margin-bottom: $spacing-03;
 }
-.#{$block-class}__tree
+.#{$block-class}__Hierarchical
   .#{$block-class}__actions-container
   .#{$block-class}__condition-wrapper {
   flex-direction: column;
@@ -69,3 +69,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__group-separator {
   margin-top: $spacing-02;
 }
+.#{$block-class}__add-group,
+.#{$block-class}__group-separator {
+  width: fit-content;
+}
+.#{$block-class}__tooltip {
+  word-break: break-all;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
 @use '@carbon/react/scss/motion' as *;
@@ -30,7 +37,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
-    .#{$block-class}__connector-button
+    .#{$block-class}__connector-button,
+    .#{$block-class}__add-button,
+    .#{$block-class}__add-condition-sub-group
   ) {
   background-color: $tag-background-red;
   color: $tag-color-red;
@@ -56,18 +65,26 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   opacity: 0;
   pointer-events: none;
   transition: all $duration-moderate-02 motion(exit, expressive);
+  .#{$block-class}__preview-condition {
+    display: flex;
+  }
 }
 .#{$block-class}__group-preview-animate {
   height: auto;
+  color: $text-secondary;
   opacity: 0.5;
   pointer-events: none;
   transition: all $duration-moderate-02 motion(exit, expressive);
 }
-.#{$block-class}__connector-disabled {
+.#{$block-class}__connector--disabled {
   display: flex;
   min-width: $spacing-10;
-  align-items: center;
   background-color: $layer;
   color: $text-helper;
-  padding-inline: $spacing-03;
+  pointer-events: none;
+}
+.#{$block-class}__condition-wrapper
+  > .#{$block-class}__condition-block:last-child
+  > .#{$block-class}__groupConnector {
+  margin-bottom: 0;
 }