@carbon/ibm-products 2.43.2-canary.4 → 2.43.2-canary.40

package/lib/components/EditTearsheet/EditTearsheetForm.d.ts

@@ -1,2 +1,45 @@
-export let EditTearsheetForm: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface EditTearsheetFormBaseProps {
+    /**
+     * Content that shows in the tearsheet form
+     */
+    children?: ReactNode;
+    /**
+     * Sets an optional className to be added to the tearsheet form
+     */
+    className?: string;
+    /**
+     * Sets an optional description on the form component
+     */
+    description?: string;
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
+     */
+    hasFieldset?: boolean;
+    /**
+     * Sets an optional subtitle on the form component
+     */
+    subtitle?: string;
+    /**
+     * Sets the title text for a tearsheet form
+     */
+    title: ReactNode;
+}
+type EditTearsheetFormFieldsetTypes = {
+    hasFieldset?: false;
+    fieldsetLegendText: string;
+} | {
+    hasFieldset: true;
+    fieldsetLegendText: string;
+};
+type EditTearsheetFormProps = EditTearsheetFormBaseProps & EditTearsheetFormFieldsetTypes;
+export declare let EditTearsheetForm: React.ForwardRefExoticComponent<EditTearsheetFormProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EditTearsheet/EditTearsheetForm.js

@@ -91,6 +91,7 @@ exports.EditTearsheetForm.propTypes = {
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's form content.
    * Otherwise, use CSS to hide/remove this label text.
    */
+  /**@ts-ignore */
   fieldsetLegendText: index["default"].string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
@@ -100,10 +101,12 @@ exports.EditTearsheetForm.propTypes = {
    * and is defaulted to true.
    * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
    */
+  /**@ts-ignore*/
   hasFieldset: index["default"].bool,
   /**
    * Sets an optional subtitle on the form component
    */
+  /**@ts-ignore*/
   subtitle: index["default"].string,
   /**
    * Sets the title text for a tearsheet form

package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -53,6 +53,12 @@ exports.HTTPError403 = /*#__PURE__*/React__default["default"].forwardRef(functio
   }));
 });
 
+/**@ts-ignore*/
+exports.HTTPError403.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.HTTPError403 = settings.pkg.checkComponentEnabled(exports.HTTPError403, componentName);
 

package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -53,6 +53,12 @@ exports.HTTPError404 = /*#__PURE__*/React__default["default"].forwardRef(functio
   }));
 });
 
+/**@ts-ignore*/
+exports.HTTPError404.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.HTTPError404 = settings.pkg.checkComponentEnabled(exports.HTTPError404, componentName);
 

package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js

@@ -53,6 +53,12 @@ exports.HTTPErrorOther = /*#__PURE__*/React__default["default"].forwardRef(funct
   }));
 });
 
+/**@ts-ignore*/
+exports.HTTPErrorOther.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.HTTPErrorOther = settings.pkg.checkComponentEnabled(exports.HTTPErrorOther, componentName);
 

package/lib/components/PageHeader/PageHeader.js

@@ -36,6 +36,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
 var componentName = 'PageHeader';
+settings.pkg._silenceWarnings(true);
 settings.pkg.component.ActionBar = true;
 
 // Default values for props

package/lib/components/RemoveModal/RemoveModal.d.ts

@@ -58,6 +58,10 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
      * Specify the text for the primary button
      */
     primaryButtonText?: string;
+    /**
+     * Specify the danger description on the primary button
+     */
+    primaryDangerDescription?: string;
     /**
      * The name of the resource being acted upon
      */

package/lib/components/RemoveModal/RemoveModal.js

@@ -25,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 var componentName = 'RemoveModal';
 
 /**
@@ -49,6 +49,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
     primaryButtonDisabled = _ref.primaryButtonDisabled,
     primaryButtonText = _ref.primaryButtonText,
+    primaryDangerDescription = _ref.primaryDangerDescription,
     resourceName = _ref.resourceName,
     secondaryButtonText = _ref.secondaryButtonText,
     textConfirmation = _ref.textConfirmation,
@@ -118,6 +119,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(react.Button, {
     type: "submit",
     kind: "danger",
+    dangerDescription: primaryDangerDescription,
     onClick: onRequestSubmit,
     disabled: primaryButtonStatus
   }, primaryButtonText))));
@@ -182,6 +184,10 @@ exports.RemoveModal.propTypes = {
    * Specify the text for the primary button
    */
   primaryButtonText: index["default"].string,
+  /**
+   * Specify the danger description on the primary button
+   */
+  primaryDangerDescription: index["default"].string,
   /**
    * The name of the resource being acted upon
    */

package/lib/components/StatusIndicator/StatusIndicatorStep.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2020, 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _CircleStroke, _InlineLoading, _ErrorOutline, _CheckmarkOutline;
+var _excluded = ["className", "description", "errorMessage", "status"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--status-indicator-step");
+var componentName = 'StatusIndicatorStep';
+var defaults = {
+  status: 'inactive'
+};
+
+/**
+ * An icon/description pair that describes one step of the `StatusIndicator`.
+ */
+exports.StatusIndicatorStep = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    description = _ref.description,
+    errorMessage = _ref.errorMessage,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? defaults.status : _ref$status,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(status)),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__details")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__icon")
+  }, status === 'inactive' && (_CircleStroke || (_CircleStroke = /*#__PURE__*/React__default["default"].createElement(icons.CircleStroke, {
+    size: 16,
+    viewBox: "1 1 14 14"
+  }))), status === 'active' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React__default["default"].createElement(react.InlineLoading, null))), status === 'error' && (_ErrorOutline || (_ErrorOutline = /*#__PURE__*/React__default["default"].createElement(icons.ErrorOutline, {
+    size: 16
+  }))), status === 'finished' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, {
+    size: 16
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__text")
+  }, description)), status === 'error' && errorMessage && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__error-message")
+  }, errorMessage));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.StatusIndicatorStep = settings.pkg.checkComponentEnabled(exports.StatusIndicatorStep, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.StatusIndicatorStep.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.StatusIndicatorStep.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * The text associated with the icon.
+   */
+  description: index["default"].string.isRequired,
+  /**
+   * This message will appear below the description if the `status` is "error".
+   */
+  errorMessage: index["default"].string,
+  /**
+   * Each `status` represents a different icon..
+   */
+  status: index["default"].oneOf(['inactive', 'active', 'error', 'finished']).isRequired
+};

package/lib/components/Tearsheet/Tearsheet.d.ts

@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
      */
     portalTarget: ReactNode;
     /**
-     * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
      */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */

package/lib/components/Tearsheet/Tearsheet.js

@@ -198,9 +198,17 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
   /**
-   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
    */
   selectorPrimaryFocus: index["default"].string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/TearsheetNarrow.d.ts

@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -156,6 +156,18 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: index["default"].string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * Specifies the width of the tearsheet, 'narrow' or 'wide'.
      */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -29,7 +29,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -88,6 +88,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
+    selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
     slug = _ref.slug,
     title = _ref.title,
@@ -258,7 +260,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
+      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus)),
       size: "sm"
     }), includeHeader && /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
       className: cx__default["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
@@ -454,6 +456,18 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore*/
   portalTarget: portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: index["default"].string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

package/lib/components/Toolbar/ToolbarButton.js

@@ -37,7 +37,7 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
   return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers["extends"]({
-    align: ((_useContext = React.useContext(Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+    align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
     label: iconDescription,
     ref: ref,

package/lib/components/index.d.ts

@@ -50,7 +50,6 @@ export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ScrollGradient } from "./ScrollGradient";
-export { StatusIndicator } from "./StatusIndicator";
 export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
 export { ConditionBuilder } from "./ConditionBuilder";
@@ -68,5 +67,6 @@ export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
+export { StatusIndicator, StatusIndicatorStep } from "./StatusIndicator";
 export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from "./FeatureFlags";

package/lib/index.js

@@ -126,6 +126,7 @@ var StringFormatter = require('./components/StringFormatter/StringFormatter.js')
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var StatusIndicatorStep = require('./components/StatusIndicator/StatusIndicatorStep.js');
 var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var ActionBar = require('./components/ActionBar/ActionBar.js');
 var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
@@ -535,6 +536,10 @@ Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'StatusIndicatorStep', {
+	enumerable: true,
+	get: function () { return StatusIndicatorStep.StatusIndicatorStep; }
+});
 Object.defineProperty(exports, 'TagOverflow', {
 	enumerable: true,
 	get: function () { return TagOverflow.TagOverflow; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.4+2bae03491",
+  "version": "2.43.2-canary.40+01b4adde4",
   "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",
@@ -80,7 +81,7 @@
     "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.3.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -88,14 +89,14 @@
     "rimraf": "^5.0.5",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.77.2",
     "typescript-config-carbon": "^0.2.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.39.0",
+    "@carbon/ibm-products-styles": "^2.40.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "2bae03491f67da75b3237ae53368a59b3ff906b0"
+  "gitHead": "01b4adde4e5b2389da1bee6c9fe36361986d75a4"
 }

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

@@ -1,6 +1,6 @@
 @use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/motion';
+@use '@carbon/react/scss/motion' as *;
 @use '@carbon/styles/scss/components/tag' as *;
 @use '@carbon/styles/scss/utilities/focus-outline';
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -52,8 +52,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   text-wrap: nowrap;
 }
 .#{$block-class}__group-preview {
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
+}
+.#{$block-class}__group-preview-animate {
+  height: auto;
   opacity: 0.5;
   pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
 }
 .#{$block-class}__connector-disabled {
   display: flex;

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

@@ -212,7 +212,12 @@ $colors: (
     background-color: $layer;
   }
   .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
-  .#{$block-class}__condition-wrapper > :nth-child(2) .#{$block-class}__button {
+  .#{$block-class}__condition-wrapper
+    > :nth-child(2)
+    .#{$block-class}__button:not(
+      .#{$block-class}__add-button,
+      .#{$block-class}__add_condition_group
+    ) {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
@@ -229,3 +234,23 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
+.#{$block-class}__add_condition_group-wrapper {
+  z-index: -1;
+  margin-left: -50%;
+  opacity: 0;
+  pointer-events: none;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__add_condition_group-wrapper--show {
+  z-index: 0;
+  margin-left: 0;
+  opacity: 1;
+  pointer-events: all;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__invalid-input {
+  display: flex;
+  color: $support-warning;
+}

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -98,6 +98,7 @@ $header-cell-background: $layer-accent-01;
     position: sticky;
     z-index: 4;
     left: 0;
+    background-color: $background;
   }
   .#{$block-class}__td-th.#{$block-class}__td {
     @include font-family.font-weight('semibold');
@@ -200,6 +201,13 @@ $header-cell-background: $layer-accent-01;
       outline: 0;
     }
   }
+
+  .#{$block-class}__td-th.#{$block-class}__td_custom {
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-03;
+  }
+
   .#{$block-class}__selection-area--element {
     position: absolute;
     z-index: 2;

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -80,6 +80,19 @@ $row-heights: (
   align-items: center;
 }
 
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox-focus
+  .cds--checkbox-label::before {
+  outline: $spacing-01 solid $focus;
+  outline-offset: 1px;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox {
+  display: flex;
+  height: -webkit-fill-available;
+  justify-content: center;
+  padding-inline: $spacing-05;
+}
+
 .#{variables.$block-class}__static--outer-cell {
   display: flex;
   height: -webkit-fill-available;

package/scss/components/StatusIcon/_status-icon.scss

@@ -73,7 +73,7 @@ $themes: ('light', 'dark');
 
 $block-class: #{$pkg-prefix}--status-icon;
 
-@function --clr($name, $theme: light) {
+@function carbon-clr($name, $theme: light) {
   // stylelint-disable-next-line carbon/theme-token-use
   $color: map-get(map-get($colors, $name), $theme);
   @return $color;
@@ -125,13 +125,13 @@ $block-class: #{$pkg-prefix}--status-icon;
           // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else if $icon == running {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
               animation: none;