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

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -6,7 +6,7 @@
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableToolbar = DataTable.TableToolbar;

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody;

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable16 } from '@carbon/icons-react';
+import { Draggable } from '@carbon/icons-react';
 import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
@@ -117,7 +117,9 @@ var DraggableElement = function DraggableElement(_ref) {
     className: cx({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(Draggable16, null)), children);
+  }, /*#__PURE__*/React.createElement(Draggable, {
+    size: 16
+  })), children);
   return /*#__PURE__*/React.createElement("li", {
     className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
     ref: ref,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -13,9 +14,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import { Reset16 } from '@carbon/icons-react';
+import { Reset } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
-import { Button, Search } from 'carbon-components-react';
+import { Button, Search } from '@carbon/react';
 import * as React from 'react';
 import keyBy from 'lodash/keyBy';
 import { pkg } from '../../../../../settings';
@@ -52,7 +53,11 @@ var Actions = function Actions(_ref) {
     },
     size: "sm",
     kind: "ghost",
-    renderIcon: Reset16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Reset, _extends({
+        size: 16
+      }, props));
+    },
     "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
   }, resetToDefaultLabel));
 };

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

@@ -12,8 +12,8 @@ var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"]
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Column16 } from '@carbon/icons-react';
-import { Button } from 'carbon-components-react';
+import { Column } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
@@ -26,7 +26,11 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
-    renderIcon: Column16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Column, _extends({
+        size: 16
+      }, props));
+    },
     iconDescription: iconTooltipLabel,
     tooltipPosition: "left",
     kind: "ghost",

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

@@ -12,7 +12,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Checkbox } from 'carbon-components-react';
+import { Checkbox } from '@carbon/react';
 import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 import DraggableElement from '../../DraggableElement';

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

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // @flow
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'carbon-components-react';
+import { Modal } from '@carbon/react';
 import { isColumnVisible } from './common';
 import Columns from './Columns';
 import Actions from './Actions';

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

@@ -14,8 +14,8 @@ var _excluded = ["buttonLabel"];
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Settings16 } from '@carbon/icons-react';
-import { Button } from 'carbon-components-react';
+import { Settings } from '@carbon/icons-react';
+import { IconButton } from '@carbon/react';
 import cx from 'classnames';
 import RowSizeRadioGroup from './RowSizeRadioGroup';
 import { pkg } from '../../../../../settings';
@@ -33,19 +33,19 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    hasIconOnly: true,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
     ref: buttonRef,
     kind: "ghost",
-    tooltipPosition: "left",
-    renderIcon: Settings16,
+    align: "left",
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     },
-    iconDescription: buttonLabel,
-    className: cx(_defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
-  }), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
-    buttonRef: buttonRef,
+    label: buttonLabel,
+    className: cx("".concat(blockClass, "__row-size-button"), _defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+  }, /*#__PURE__*/React.createElement(Settings, {
+    size: 16
+  })), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
+    ref: buttonRef,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }

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

@@ -8,18 +8,16 @@
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { RadioButtonGroup, RadioButton } from 'carbon-components-react';
+import { RadioButtonGroup, RadioButton } from '@carbon/react';
 import isArray from 'lodash/isArray';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+var RowSizeRadioGroup = /*#__PURE__*/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,
@@ -33,7 +31,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;
 
@@ -75,7 +91,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       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
@@ -89,24 +105,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
@@ -127,7 +125,6 @@ RowSizeRadioGroup.defaultProps = {
   selectedOption: 'lg'
 };
 RowSizeRadioGroup.propTypes = {
-  buttonRef: PropTypes.any.isRequired,
   datagridName: PropTypes.string,
   hideRadioGroup: PropTypes.func.isRequired,
   legendText: PropTypes.string,

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

@@ -1,5 +1,5 @@
-export { story as CustomizeColumnStory } from './CustomizeColumnStory';
+export { story as CustomizeColumnStoryNotes } from './CustomizeColumnStory';
 export { default as StickyActionsColumn } from './StickyActionsColumnStory';
 export { story as RowSizeDropdownStory } from './RowSizeDropdownStory';
 export { story as LeftPanelStory } from './LeftPanelStory';
-export { story as SelectAllWitHToggle } from './SelectAllWithToggleStory';
+export { story as SelectAllWithToggle } from './SelectAllWithToggleStory';

package/es/components/Datagrid/useActionsColumn.js

@@ -12,7 +12,7 @@ var _excluded = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem",
  */
 import React from 'react';
 import cx from 'classnames';
-import { IconSkeleton, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { IconSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 

package/es/components/Datagrid/useRowExpander.js

@@ -10,7 +10,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { ChevronDown16, ChevronUp16 } from '@carbon/icons-react';
+import { ChevronDown, ChevronUp } from '@carbon/icons-react';
 
 var useRowExpander = function useRowExpander(hooks) {
   var visibleColumns = function visibleColumns(columns) {
@@ -18,7 +18,11 @@ var useRowExpander = function useRowExpander(hooks) {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/React.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp16, null) : /*#__PURE__*/React.createElement(ChevronDown16, null));
+        return row.canExpand && /*#__PURE__*/React.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp, {
+          size: 16
+        }) : /*#__PURE__*/React.createElement(ChevronDown, {
+          size: 16
+        }));
       },
       width: 48,
       disableResizing: true,

package/es/components/Datagrid/useSelectRows.js

@@ -18,10 +18,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // @flow
 import React from 'react';
 import cx from 'classnames';
-import { TableSelectRow } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
-import { pkg } from '../../settings';
+import { pkg, carbon } from '../../settings';
+var TableSelectRow = DataTable.TableSelectRow;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {
@@ -57,7 +58,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
     return [props, {
-      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? 'bx--data-table--selected' : '')
+      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(carbon.prefix, "--data-table--selected") : '')
     }];
   };
 

package/es/components/Datagrid/useSortableColumns.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -13,8 +14,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { Button } from 'carbon-components-react';
-import { ArrowUp16, ArrowDown16, Arrows16 } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
+import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/icons-react';
 var ordering = {
   ASC: 'ASC',
   DESC: 'DESC',
@@ -42,21 +43,29 @@ 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 ArrowUp16;
+              return /*#__PURE__*/React.createElement(ArrowUp, _extends({
+                size: 16
+              }, props));
 
             case true:
-              return ArrowDown16;
+              return /*#__PURE__*/React.createElement(ArrowDown, _extends({
+                size: 16
+              }, props));
 
             default:
-              return Arrows16;
+              return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
+                size: 16
+              }, props));
           }
         }
 
-        return Arrows16;
+        return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
+          size: 16
+        }, props));
       };
 
       var Header = function Header(headerProp) {
@@ -65,7 +74,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
             return onSortClick(headerProp.column);
           },
           kind: "ghost",
-          renderIcon: icon(headerProp.column)
+          renderIcon: function renderIcon(props) {
+            return icon(headerProp.column, props);
+          }
         }, column.Header);
       };
 

package/es/components/EditSidePanel/EditSidePanel.js

@@ -23,7 +23,7 @@ import { pkg
 /*, carbon */
 } from '../../settings'; // Carbon and package components we use.
 
-import { Form } from 'carbon-components-react';
+import { Form } from '@carbon/react';
 import { SidePanel } from '../SidePanel';
 import '../../global/js/utils/props-helper'; // The block part of our conventional BEM class names (blockClass__E--M).
 
@@ -183,7 +183,7 @@ EditSidePanel.propTypes = {
   /**
    * Sets the size of the side panel
    */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
 
   /**
    * Specifies which DOM element in the form should be focused.

package/es/components/EditTearsheet/EditTearsheet.js

@@ -12,7 +12,7 @@ var _excluded = ["cancelButtonText", "children", "className", "description", "in
 import React, { forwardRef, useState, useRef, createContext } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Grid, Form, SideNav, SideNavItems, SideNavMenuItem } from 'carbon-components-react';
+import { Grid, Form, SideNav, SideNavItems, SideNavMenuItem } from '@carbon/react';
 import { pkg } from '../../settings';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell';

package/es/components/EditTearsheet/EditTearsheetForm.js

@@ -12,7 +12,7 @@ var _excluded = ["children", "className", "description", "fieldsetLegendText", "
 import React, { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Column, FormGroup, Row } from 'carbon-components-react';
+import { Column, FormGroup, Grid } from '@carbon/react';
 import { FormContext, FormNumberContext } from './EditTearsheet';
 import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
@@ -40,7 +40,9 @@ export var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return formContext ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _defineProperty(_cx, "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _cx)),
     ref: ref
-  }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }), /*#__PURE__*/React.createElement(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 12,
     lg: 12,
     md: 8,

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

@@ -9,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 import React, { useState } from 'react';
-import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput } from 'carbon-components-react';
+import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, TextInput, Toggle, NumberInput } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { EditTearsheet } from '../EditTearsheet';
@@ -103,7 +103,7 @@ export 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.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
@@ -159,12 +159,12 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
       return setHasSubmitError(!hasSubmitError);
     },
     toggled: hasSubmitError
-  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+  }))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
     title: "Location",
     subtitle: "Custom form subtitle",
     fieldsetLegendText: "",
     description: "Custom form description (see storybook implementation for new custom form capability)"
-  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
@@ -177,12 +177,12 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     id: "custom-form-input",
     labelText: "Location",
     placeholder: "Enter location"
-  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+  }))), /*#__PURE__*/React.createElement(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.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 3,
     lg: 3
   }, /*#__PURE__*/React.createElement(NumberInput, {
@@ -196,12 +196,12 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     onChange: function onChange(event) {
       return setFormTwoTextInputValue(event.imaginaryTarget.value);
     }
-  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+  }))), /*#__PURE__*/React.createElement(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.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
@@ -226,5 +226,5 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     labelText: "A month",
     value: "one-month",
     id: "one-month"
-  })))))));
+  }))))));
 };

package/es/components/EmptyStates/EmptyState.js

@@ -18,7 +18,7 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Link } from 'carbon-components-react';
+import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';

package/es/components/EmptyStates/EmptyStateContent.js

@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
 import { pkg } from '../../settings';
 import cx from 'classnames'; // Carbon and package components we use.
 
-import { Button, Link } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Button, Link } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'EmptyStateContent';

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
-import { Button, Link } from 'carbon-components-react';
+import { Button, Link } from '@carbon/react';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -18,7 +18,7 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Link } from 'carbon-components-react';
+import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -18,7 +18,7 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Link } from 'carbon-components-react';
+import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -18,7 +18,7 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Link } from 'carbon-components-react';
+import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -18,7 +18,7 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Link } from 'carbon-components-react';
+import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -18,7 +18,7 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Link } from 'carbon-components-react';
+import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';

package/es/components/ExampleComponent/ExampleComponent.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Button, ButtonSet } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Button, ButtonSet } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--example-component");
 var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -29,7 +29,7 @@ var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not impor
 var defaults = {
   primaryKind: 'primary',
   secondaryKind: 'secondary',
-  size: 'default'
+  size: 'lg'
 };
 /**
  * This is an example component to show relevant conventions and usage.
@@ -148,9 +148,9 @@ ExampleComponent.propTypes = {
   secondaryKind: PropTypes.oneOf(['secondary', 'tertiary']),
 
   /**
-   * The size for the buttons ('default', 'small' or 'field').
+   * The size for the buttons
    */
-  size: PropTypes.oneOf(['default', 'small', 'field']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
 
   /**
    * Optional style settings for the containing node.