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

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../../../../settings");
 
@@ -38,8 +38,12 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
       _ref$iconTooltipLabel = _ref.iconTooltipLabel,
       iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
-    renderIcon: _iconsReact.Column16,
+  return /*#__PURE__*/React.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(_iconsReact.Column, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: iconTooltipLabel,
     tooltipPosition: "left",
     kind: "ghost",

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -19,7 +19,7 @@ var _reactDnd = require("react-dnd");
 
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
 
@@ -143,7 +143,7 @@ var Columns = function Columns(_ref) {
           }
         }
       }
-    }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Checkbox, {
+    }, /*#__PURE__*/React.createElement(_react2.Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
       checked: (0, _common.isColumnVisible)(colDef),
       onChange: onSelectColumn.bind(null, colDef),

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _common = require("./common");
 
@@ -122,7 +122,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
   };
 
   var string = searchText.trim().toLowerCase();
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Modal, {
+  return /*#__PURE__*/_react.default.createElement(_react2.Modal, {
     className: "".concat(blockClass, "__customize-columns-modal"),
     open: isOpen,
     modalHeading: customizeModalHeadingLabel,

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -50,19 +50,19 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, {
-    hasIconOnly: true,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_react2.IconButton, {
     ref: buttonRef,
     kind: "ghost",
-    tooltipPosition: "left",
-    renderIcon: _iconsReact.Settings16,
+    align: "left",
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     },
-    iconDescription: buttonLabel,
-    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
-  }), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
-    buttonRef: buttonRef,
+    label: buttonLabel,
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+  }, /*#__PURE__*/React.createElement(_iconsReact.Settings, {
+    size: 16
+  })), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+    ref: buttonRef,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 
@@ -34,12 +34,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+var RowSizeRadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var rowSizes = _ref.rowSizes,
       selectedOption = _ref.selectedOption,
       datagridName = _ref.datagridName,
-      buttonRef = _ref.buttonRef,
       onChange = _ref.onChange,
       hideRadioGroup = _ref.hideRadioGroup,
       _ref$legendText = _ref.legendText,
@@ -53,7 +51,25 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     xs: 'Extra small'
   } : _ref$rowSizeLabels;
 
-  var _getDropdownPosition = getDropdownPosition(buttonRef.current),
+  var getDropdownPosition = function getDropdownPosition(buttonEle) {
+    if (buttonEle instanceof HTMLElement) {
+      var _top = buttonEle.offsetTop + buttonEle.offsetHeight;
+
+      var _right = buttonEle.offsetLeft + buttonEle.offsetWidth;
+
+      return {
+        top: _top,
+        right: _right
+      };
+    }
+
+    return {
+      top: 0,
+      right: 0
+    };
+  };
+
+  var _getDropdownPosition = getDropdownPosition(ref.current),
       top = _getDropdownPosition.top,
       right = _getDropdownPosition.right;
 
@@ -73,7 +89,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     onClick: function onClick(e) {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: legendText,
     name: "row-height-group",
     orientation: "vertical",
@@ -88,14 +104,14 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       labelText = option.value;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+    return /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
       key: option.value,
       labelText: labelText,
       value: option.value,
       id: "".concat(datagridName || 'datagrid', "--row-density--").concat(option.value)
     });
   })));
-};
+});
 
 var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize) {
   // TODO: deprecate this function in next major release (v8) on carbon-components-react
@@ -109,24 +125,6 @@ var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize
   return rowSizeMap[rowSize] || rowSize;
 };
 
-var getDropdownPosition = function getDropdownPosition(buttonEle) {
-  var parent = buttonEle.parentElement;
-
-  if (parent instanceof HTMLElement) {
-    var top = buttonEle.offsetTop + buttonEle.offsetHeight;
-    var right = parent.offsetWidth - parent.offsetLeft - (buttonEle.offsetLeft + buttonEle.offsetWidth);
-    return {
-      top: top,
-      right: right
-    };
-  }
-
-  return {
-    top: 0,
-    right: 0
-  };
-};
-
 RowSizeRadioGroup.defaultProps = {
   rowSizes: [{
     value: 'xl' // 64
@@ -147,7 +145,6 @@ RowSizeRadioGroup.defaultProps = {
   selectedOption: 'lg'
 };
 RowSizeRadioGroup.propTypes = {
-  buttonRef: _propTypes.default.any.isRequired,
   datagridName: _propTypes.default.string,
   hideRadioGroup: _propTypes.default.func.isRequired,
   legendText: _propTypes.default.string,

package/lib/components/Datagrid/{Datagrid.stories → Datagrid.stories-helpers}/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CustomizeColumnStory", {
+Object.defineProperty(exports, "CustomizeColumnStoryNotes", {
   enumerable: true,
   get: function get() {
     return _CustomizeColumnStory.story;
@@ -23,7 +23,7 @@ Object.defineProperty(exports, "RowSizeDropdownStory", {
     return _RowSizeDropdownStory.story;
   }
 });
-Object.defineProperty(exports, "SelectAllWitHToggle", {
+Object.defineProperty(exports, "SelectAllWithToggle", {
   enumerable: true,
   get: function get() {
     return _SelectAllWithToggleStory.story;

package/lib/components/Datagrid/useActionsColumn.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
@@ -41,9 +41,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
           return [props, {
             children: /*#__PURE__*/_react.default.createElement("div", {
               className: "".concat(blockClass, "__actions-column-content")
-            }, isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.IconSkeleton, {
+            }, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
-            }), !isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+            }), !isFetching && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
               size: "sm",
               light: true,
               flipped: true,
@@ -66,7 +66,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 return null;
               }
 
-              return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({}, rest, {
+              return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({}, rest, {
                 disabled: isDisabledByRow,
                 onClick: function onClick(e) {
                   e.stopPropagation();

package/lib/components/Datagrid/useRowExpander.js

@@ -28,7 +28,11 @@ var useRowExpander = function useRowExpander(hooks) {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, null));
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp, {
+          size: 16
+        }) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, {
+          size: 16
+        }));
       },
       width: 48,
       disableResizing: true,

package/lib/components/Datagrid/useSelectRows.js

@@ -19,7 +19,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
 
@@ -33,6 +33,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var TableSelectRow = _react2.DataTable.TableSelectRow;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {
@@ -68,7 +69,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
     return [props, {
-      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? 'bx--data-table--selected' : '')
+      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected") : '')
     }];
   };
 
@@ -91,7 +92,7 @@ var SelectRow = function SelectRow(datagridState) {
       selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
 
   var cellProps = cell.getCellProps();
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
+  return /*#__PURE__*/_react.default.createElement(TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
     radio: radio,
     onSelect: function onSelect(e) {
       e.stopPropagation(); // avoid triggering onRowClick

package/lib/components/Datagrid/useSortableColumns.js

@@ -11,9 +11,11 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -48,30 +50,40 @@ var useSortableColumns = function useSortableColumns(hooks) {
     };
 
     var sortableColumns = visibleColumns.map(function (column) {
-      var icon = function icon(col) {
+      var icon = function icon(col, props) {
         if (col.isSorted) {
           switch (col.isSortedDesc) {
             case false:
-              return _iconsReact.ArrowUp16;
+              return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp, (0, _extends2.default)({
+                size: 16
+              }, props));
 
             case true:
-              return _iconsReact.ArrowDown16;
+              return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowDown, (0, _extends2.default)({
+                size: 16
+              }, props));
 
             default:
-              return _iconsReact.Arrows16;
+              return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowsVertical, (0, _extends2.default)({
+                size: 16
+              }, props));
           }
         }
 
-        return _iconsReact.Arrows16;
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowsVertical, (0, _extends2.default)({
+          size: 16
+        }, props));
       };
 
       var Header = function Header(headerProp) {
-        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_react2.Button, {
           onClick: function onClick() {
             return onSortClick(headerProp.column);
           },
           kind: "ghost",
-          renderIcon: icon(headerProp.column)
+          renderIcon: function renderIcon(props) {
+            return icon(headerProp.column, props);
+          }
         }, column.Header);
       };
 

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -23,7 +23,7 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _SidePanel = require("../SidePanel");
 
@@ -103,7 +103,7 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), formDescription && /*#__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));
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -193,7 +193,7 @@ EditSidePanel.propTypes = {
   /**
    * Sets the size of the side panel
    */
-  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
 
   /**
    * Specifies which DOM element in the form should be focused.

package/lib/components/EditTearsheet/EditTearsheet.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 _settings = require("../../settings");
 
@@ -91,13 +91,13 @@ var EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var influencer = /*#__PURE__*/_react.default.createElement("div", {
     className: "tearsheet-stories__dummy-influencer-block"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNav, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.SideNav, {
     "aria-label": "Side navigation",
     className: "".concat(blockClass, "__side-nav"),
     expanded: true,
     isFixedNav: false
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNavItems, null, sideNavItems.map(function (item, index) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNavMenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.SideNavItems, null, sideNavItems.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.SideNavMenuItem, {
       key: index,
       onClick: function onClick() {
         return handleCurrentForm(index);
@@ -133,7 +133,7 @@ var EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     ref: contentRef,
     role: "main"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, null, /*#__PURE__*/_react.default.createElement(FormContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Form, null, /*#__PURE__*/_react.default.createElement(FormContext.Provider, {
     value: {
       currentForm: currentForm
     }

package/lib/components/EditTearsheet/EditTearsheetForm.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 _EditTearsheet = require("./EditTearsheet");
 
@@ -58,7 +58,9 @@ var EditTearsheetForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   return formContext ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _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,
@@ -69,7 +71,7 @@ var EditTearsheetForm = /*#__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 EditTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the EditTearsheet"));

package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -107,7 +107,7 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     setOpen(!open);
   };
 
-  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: handleModalClick
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/_react.default.createElement(_EditTearsheet.EditTearsheet, {
     influencerWidth: influencerWidth,
@@ -125,12 +125,12 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     fieldsetLegendText: "Topic information",
     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.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-form-story-text-input-multi-form-1",
@@ -149,7 +149,7 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
         setIsInvalid(true);
       }
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic description (optional)",
     id: "tearsheet-multi-form-story-text-input-multi-form-1-input-2",
     value: topicDescriptionValue,
@@ -157,7 +157,7 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     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-form-story-text-input-multi-form-1-input-3",
     value: topicVersionValue,
@@ -165,14 +165,14 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     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(!hasSubmitError);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     className: "".concat(blockClass, "__error--toggle"),
     id: "simulated-error-toggle",
     size: "sm",
@@ -181,17 +181,17 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
       return setHasSubmitError(!hasSubmitError);
     },
     toggled: hasSubmitError
-  })))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
+  }))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Location",
     subtitle: "Custom form subtitle",
     fieldsetLegendText: "",
     description: "Custom form description (see storybook implementation for new custom form capability)"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__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: topicLocationValue,
     onChange: function onChange(event) {
       return setTopicLocationValue(event.target.value);
@@ -199,15 +199,15 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     id: "custom-form-input",
     labelText: "Location",
     placeholder: "Enter location"
-  })))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
+  }))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Partitions",
     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.Column, {
     xlg: 3,
     lg: 3
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
     id: "carbon-number",
     min: 1,
     max: 100,
@@ -218,17 +218,17 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     onChange: function onChange(event) {
       return setFormTwoTextInputValue(event.imaginaryTarget.value);
     }
-  })))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
+  }))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Message retention",
     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.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: formThreeTextInputValue,
@@ -236,19 +236,19 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
       return setFormThreeTextInputValue(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"
-  })))))));
+  }))))));
 };
 
 exports.MultiFormEditTearsheet = MultiFormEditTearsheet;