@carbon/ibm-products 1.27.0 → 2.0.0-rc.2

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"));

package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -17,7 +17,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"));
 
@@ -41,12 +41,14 @@ var CustomStep = function CustomStep(_ref) {
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, (0, _extends2.default)({}, rest, {
     disableSubmit: !value1
-  }), /*#__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: 8,
     lg: 8,
     md: 8,
     sm: 8
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     value: value1,
     onChange: function onChange(event) {
       return setValue1(event.target.value);
@@ -140,7 +142,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     setShouldIncludeAdditionalStep(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     onClick: function onClick() {
       return setOpen(!open);
     }
@@ -185,12 +187,14 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     disableSubmit: !stepOneTextInputValue,
     subtitle: "This is the unique name used to recognize your topic",
     description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
-  }, /*#__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: 8,
     lg: 8,
     md: 8,
     sm: 8
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic name",
     placeholder: "Enter topic name",
     id: "tearsheet-multi-step-story-text-input-multi-step-1",
@@ -205,7 +209,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     invalid: isInvalid,
     invalidText: "This is a required field",
     onBlur: function onBlur() {}
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic description (optional)",
     id: "tearsheet-multi-step-story-text-input-multi-step-1-input-2",
     value: topicDescriptionValue,
@@ -213,7 +217,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     onChange: function onChange(event) {
       return setTopicDescriptionValue(event.target.value);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic version (optional)",
     id: "tearsheet-multi-step-story-text-input-multi-step-1-input-3",
     value: topicVersionValue,
@@ -221,14 +225,14 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     onChange: function onChange(event) {
       return setTopicVersionValue(event.target.value);
     }
-  }), hasSubmitError && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.InlineNotification, {
+  }), hasSubmitError && /*#__PURE__*/_react.default.createElement(_react2.InlineNotification, {
     kind: "error",
     title: "Error",
     subtitle: "Resolve errors to continue",
     onClose: function onClose() {
       return setHasSubmitError(false);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     className: "".concat(blockClass, "__error--toggle"),
     id: "simulated-error-toggle",
     size: "sm",
@@ -236,7 +240,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
     labelText: "Include additional step",
     id: "include-additional-step-checkbox",
     onChange: function onChange(value) {
@@ -262,10 +266,13 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
     description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
     fieldsetLegendText: "Partition information"
-  }, /*#__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: 3,
     lg: 3
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
+    iconDescription: "Choose a number",
     id: "carbon-number",
     min: 1,
     max: 100,
@@ -285,12 +292,14 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     subtitle: "This is how long messages are retained before they are deleted.",
     description: "If your messages are not read by a consumer within this time, they will be missed.",
     fieldsetLegendText: "Message retention scheduling"
-  }, /*#__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: 8,
     lg: 8,
     md: 8,
     sm: 8
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: "Message retention",
     name: "radio-button-group",
     defaultSelected: stepThreeTextInputValue,
@@ -298,15 +307,15 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
       return setStepThreeTextInputValue(value);
     },
     orientation: "vertical"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
     labelText: "A day",
     value: "one-day",
     id: "one-day"
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
     labelText: "A week",
     value: "one-week",
     id: "one-week"
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
     labelText: "A month",
     value: "one-month",
     id: "one-month"