@carbon/ibm-products 1.24.0 → 2.0.0-rc.0

package/lib/components/ButtonMenu/ButtonMenuItem.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -32,7 +32,7 @@ var componentName = 'ButtonMenuItem'; // NOTE: the component SCSS is not importe
  */
 
 var ButtonMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({}, props, {
     ref: ref
   }));
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -40,4 +40,4 @@ var ButtonMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
 exports.ButtonMenuItem = ButtonMenuItem;
 exports.ButtonMenuItem = ButtonMenuItem = _settings.pkg.checkComponentEnabled(ButtonMenuItem, componentName);
-ButtonMenuItem.propTypes = _carbonComponentsReact.OverflowMenuItem.propTypes;
+ButtonMenuItem.propTypes = _react2.OverflowMenuItem.propTypes;

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -25,7 +25,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactResizeDetector = require("react-resize-detector");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _ButtonMenu = require("../ButtonMenu");
 
@@ -54,7 +54,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 var blockClass = "".concat(_settings.pkg.prefix, "--button-set-with-overflow");
 var componentName = 'ButtonSetWithOverflow';
-var buttonSize = 'field';
+var buttonSize = 'md';
 
 var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var buttons = _ref.buttons,
@@ -63,6 +63,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
       menuOptionsClass = _ref.menuOptionsClass,
       rightAlign = _ref.rightAlign;
+  var carbonPrefix = (0, _react2.usePrefix)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -88,7 +89,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     var spaceAvailable = (_spaceAvailableRef$cu = spaceAvailableRef.current) === null || _spaceAvailableRef$cu === void 0 ? void 0 : _spaceAvailableRef$cu.offsetWidth;
     var newShowAsOverflow = true; // get all of the hidden sizing buttons
 
-    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(_settings.carbon.prefix, "--btn")); // calculate total width of button set
+    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(carbonPrefix, "--btn")); // calculate total width of button set
 
     var sizingSetTotalSize = 0;
 
@@ -131,7 +132,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var AButtonSet = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
     var buttons = _ref2.buttons,
         rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ButtonSet, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
       ref: ref
     }), buttons.map(function (_ref3) {
       var label = _ref3.label,
@@ -141,7 +142,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
 
       /* istanbul ignore next */
       var usedKind = kind || 'primary';
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
         key: key && "button-set-".concat(key),
         kind: usedKind
       }, other, {
@@ -156,7 +157,8 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
         rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, (0, _extends2.default)({}, rest, {
       ref: ref,
-      label: buttonSetOverflowLabel
+      label: buttonSetOverflowLabel,
+      menuAriaLabel: buttonSetOverflowLabel
     }), buttons.map(function (_ref5) {
       var label = _ref5.label,
           key = _ref5.key,
@@ -225,9 +227,9 @@ ButtonSetWithOverflow.propTypes = {
    *
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  buttons: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  buttons: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     key: _propTypes.default.string.isRequired,
-    kind: _carbonComponentsReact.Button.propTypes.kind,
+    kind: _react2.Button.propTypes.kind,
     label: _propTypes.default.node,
     onClick: _propTypes.default.func
   }))).isRequired,

package/lib/components/Card/Card.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,9 +29,9 @@ var _CardFooter = require("./CardFooter");
 
 var _settings = require("../../settings");
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
+var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
     _excluded2 = ["id"],
-    _excluded3 = ["id", "icon", "onClick", "iconDescription", "onKeyDown", "href"];
+    _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -73,6 +73,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       _ref$overflowActions = _ref.overflowActions,
       overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
+      overflowAriaLabel = _ref.overflowAriaLabel,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
       Pictogram = _ref.pictogram,
       primaryButtonHref = _ref.primaryButtonHref,
@@ -108,14 +109,15 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (overflowActions.length > 0) {
       var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+      return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
         size: size,
         direction: pos,
-        flipped: true
+        flipped: true,
+        ariaLabel: overflowAriaLabel
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
             rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-        return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
           key: id
         }, rest));
       }));
@@ -126,17 +128,16 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           Icon = _ref3.icon,
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
-          onKeyDown = _ref3.onKeyDown,
           href = _ref3.href,
           rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
 
       if (productive) {
-        return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+        return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
           key: id,
           renderIcon: Icon,
           hasIconOnly: true,
           onClick: onClick,
-          size: actionsPlacement === 'top' ? 'sm' : 'field',
+          size: actionsPlacement === 'top' ? 'sm' : 'md',
           iconDescription: iconDescription,
           kind: "ghost",
           href: href
@@ -154,13 +155,13 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
         key: id,
+        label: iconDescription,
         className: "".concat(blockClass, "__icon"),
         onClick: onClick,
-        onKeyDown: onKeyDown,
-        role: "button",
-        tabIndex: "0"
+        kind: "ghost",
+        size: "sm"
       }, /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-label": iconDescription
       }));
@@ -270,6 +271,7 @@ Card.propTypes = {
     onClick: _propTypes.default.func,
     onKeyDown: _propTypes.default.func
   })),
+  overflowAriaLabel: _propTypes.default.string,
   pictogram: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),

package/lib/components/Card/CardFooter.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -57,16 +57,16 @@ var CardFooter = function CardFooter(_ref) {
   var footerClasses = (0, _classnames.default)(footerClass, (0, _defineProperty2.default)({}, "".concat(footerClass, "-no-button"), !hasButton));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: footerClasses
-  }, secondaryButtonText && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: secondaryButtonKind,
     onClick: onSecondaryButtonClick,
-    size: "field",
+    size: "md",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
-  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
-    size: "field",
+    size: "md",
     renderIcon: primaryButtonIcon,
     href: primaryButtonHref
   }, primaryButtonText), hasActions && /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/Cascade/Cascade.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -82,7 +82,7 @@ var Cascade = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       });
     });
 
-    return /*#__PURE__*/_react.default.createElement("div", props, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, gridElm));
+    return /*#__PURE__*/_react.default.createElement("div", props, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, gridElm));
   }
 
   return /*#__PURE__*/_react.default.createElement("div", props, getModifiedChildren());

package/lib/components/ComboButton/ComboButton.js

@@ -21,7 +21,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -29,7 +29,7 @@ var _propTypes = require("prop-types");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _excluded = ["children", "className", "overflowMenu"],
     _excluded2 = ["children"],
@@ -54,20 +54,20 @@ var ComboButton = function ComboButton(_ref) {
       overflowMenu = _ref.overflowMenu,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useRef = (0, _react.useRef)((0, _uuidv.default)()),
+  var _useRef = (0, _react2.useRef)((0, _uuidv.default)()),
       instanceId = _useRef.current;
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var _Children$toArray$fil = _react.Children.toArray(children).filter(Boolean).map(function (_ref2) {
+  var _Children$toArray$fil = _react2.Children.toArray(children).filter(Boolean).map(function (_ref2) {
     var _ref2$props = _ref2.props,
         children = _ref2$props.children,
         props = (0, _objectWithoutProperties2.default)(_ref2$props, _excluded2);
     return _objectSpread(_objectSpread({}, props), {}, {
-      children: /*#__PURE__*/_react.default.createElement("span", {
+      children: /*#__PURE__*/_react2.default.createElement("span", {
         className: "".concat(blockClass, "__action"),
         title: children
       }, children)
@@ -77,10 +77,10 @@ var ComboButton = function ComboButton(_ref) {
       primaryAction = _Children$toArray$fil2[0],
       restActions = _Children$toArray$fil2.slice(1);
 
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
     "data-floating-menu-container": true
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, primaryAction), restActions.length > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, (0, _extends2.default)({}, overflowMenu, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.Button, primaryAction), restActions.length > 0 && /*#__PURE__*/_react2.default.createElement(_react.OverflowMenu, (0, _extends2.default)({}, overflowMenu, {
     className: "".concat(blockClass, "__overflow-menu"),
     menuOptionsClass: "".concat(blockClass, "__overflow-menu__list"),
     onClick: function onClick() {
@@ -90,7 +90,15 @@ var ComboButton = function ComboButton(_ref) {
       return setIsOpen(false);
     },
     renderIcon: function renderIcon() {
-      return /*#__PURE__*/(0, _react.createElement)(isOpen ? _iconsReact.ChevronUp16 : _iconsReact.ChevronDown16, {
+      return /*#__PURE__*/(0, _react2.createElement)(isOpen ? function (props) {
+        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronUp, (0, _extends2.default)({
+          size: 16
+        }, props));
+      } : function (props) {
+        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronDown, (0, _extends2.default)({
+          size: 16
+        }, props));
+      }, {
         className: "".concat(blockClass, "__overflow-menu__icon")
       });
     },
@@ -99,12 +107,12 @@ var ComboButton = function ComboButton(_ref) {
     var children = _ref3.children,
         Icon = _ref3.renderIcon,
         action = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({}, action, {
+    return /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, (0, _extends2.default)({}, action, {
       key: "".concat(blockClass, "--").concat(instanceId, "__overflow-menu__item__").concat(index),
       className: "".concat(blockClass, "__overflow-menu__item"),
-      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, Icon && /*#__PURE__*/_react.default.createElement("span", {
+      itemText: /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, children, Icon && /*#__PURE__*/_react2.default.createElement("span", {
         className: "".concat(blockClass, "__overflow-menu__item__icon")
-      }, /*#__PURE__*/_react.default.createElement(Icon, null)))
+      }, /*#__PURE__*/_react2.default.createElement(Icon, null)))
     }));
   })));
 };
@@ -118,5 +126,5 @@ ComboButton.propTypes = {
   className: _propTypes.string,
 
   /** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
-  overflowMenu: (0, _propTypes.shape)(_carbonComponentsReact.OverflowMenu.propTypes)
+  overflowMenu: (0, _propTypes.shape)(_react.OverflowMenu.propTypes)
 };

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -25,7 +25,7 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _CreateInfluencer = require("../CreateInfluencer");
 
@@ -189,7 +189,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__main")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__content")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Form, {
     className: "".concat(blockClass, "__form")
   }, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
     value: {
@@ -212,24 +212,24 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
       value: index + 1
     }, child);
-  }))))), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
+  })))), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
     className: "".concat(blockClass, "__buttons"),
     actions: createFullPageActions,
-    size: "max"
-  }))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, {
+    size: "2xl"
+  }))), /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, {
     className: "".concat(blockClass, "__modal"),
     size: "sm",
     open: modalIsOpen,
     "aria-label": modalTitle
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     title: modalTitle
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, modalDescription)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, modalDescription)), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
     onClick: function onClick() {
       setModalIsOpen(!modalIsOpen);
     }
-  }, modalSecondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, modalSecondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "danger",
     onClick: onClose

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -25,7 +25,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _CreateFullPage = require("./CreateFullPage");
 
@@ -109,7 +109,7 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     className: "".concat(blockClass, "-subtitle")
   }, subtitle), description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "-description")
-  }, description), hasFieldset ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, {
+  }, description), hasFieldset ? /*#__PURE__*/_react.default.createElement(_react2.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")
   }, children) : children) : _pconsole.default.warn("You have tried using a ".concat(componentName, " component outside of a CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 require("../../global/js/utils/props-helper");
 
@@ -63,7 +63,7 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
     var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
-    }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
+    }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
       currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
       : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
       ,
@@ -71,7 +71,7 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
       vertical: true,
       className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"))
     }, progressSteps.map(function (step, stepIndex) {
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
+      return /*#__PURE__*/_react.default.createElement(_react2.ProgressStep, {
         label: step.title,
         key: stepIndex,
         secondaryLabel: step.secondaryLabel

package/lib/components/CreateModal/CreateModal.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -53,7 +53,7 @@ var CreateModal = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
       disableSubmit = _ref2.disableSubmit,
       selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     selectorPrimaryFocus: selectorPrimaryFocus,
     className: (0, _classnames.default)(blockClass, className),
     open: open,
@@ -65,22 +65,22 @@ var CreateModal = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
       onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
       return false;
     }
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     title: title,
     titleClassName: "".concat(blockClass, "__title")
   }, subtitle && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__subtitle")
-  }, subtitle)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
+  }, subtitle)), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     hasForm: true
   }, description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__description")
-  }, description), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+  }, description), /*#__PURE__*/_react.default.createElement(_react2.Form, {
     className: "".concat(blockClass, "__form")
-  }, children)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, children)), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
     onClick: onRequestClose
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "submit",
     kind: "primary",
     onClick: onRequestSubmit,

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -23,7 +23,7 @@ var _settings = require("../../settings");
 
 var _devtools = require("../../global/js/utils/devtools");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _SidePanel = require("../SidePanel");
 
@@ -90,7 +90,7 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
-  }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+  }, formDescription), /*#__PURE__*/_react.default.createElement(_react2.Form, {
     className: "".concat(blockClass, "__form")
   }, children));
 });

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -21,7 +21,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _wrapFocus = _interopRequireDefault(require("../../global/js/utils/wrapFocus"));
 
@@ -225,7 +225,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, null, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Form, null, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
       setIsDisabled: setIsDisabled,
@@ -246,7 +246,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
       value: index + 1
     }, child);
-  }))))));
+  })))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 exports.CreateTearsheet = CreateTearsheet;

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _CreateTearsheet = require("./CreateTearsheet");
 
@@ -106,7 +106,9 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
   return stepsContext ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Grid, {
+    narrow: true
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 12,
     lg: 12,
     md: 8,
@@ -117,7 +119,7 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     className: "".concat(blockClass, "--subtitle")
   }, subtitle), description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "--description")
-  }, description))), hasFieldset ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, {
+  }, description))), hasFieldset ? /*#__PURE__*/_react.default.createElement(_react2.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "--fieldset")
   }, children) : children) : _pconsole.default.warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));