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

package/es/components/ButtonMenu/ButtonMenu.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
+var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuAriaLabel", "menuOptionsClass", "renderIcon", "size"];
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -13,16 +13,16 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { pkg, carbon } from '../../settings'; // Carbon and package components we use.
+import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Button, OverflowMenu } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Button, OverflowMenu, usePrefix } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--button-menu");
 var componentName = 'ButtonMenu'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
 
 var defaults = {
-  size: 'default',
+  size: 'lg',
   kind: 'primary'
 };
 /**
@@ -40,24 +40,27 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$kind = _ref.kind,
       kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
       label = _ref.label,
+      menuAriaLabel = _ref.menuAriaLabel,
       menuOptionsClass = _ref.menuOptionsClass,
       Icon = _ref.renderIcon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var carbonPrefix = usePrefix();
   return /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
     className: cx(blockClass, // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
     ),
+    ariaLabel: menuAriaLabel,
     menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
     renderIcon: function renderIcon() {
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(["".concat(blockClass, "__trigger"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--").concat(kind), "".concat(carbon.prefix, "--btn--").concat(size)])
+        className: cx(["".concat(blockClass, "__trigger"), "".concat(carbonPrefix, "--btn"), "".concat(carbonPrefix, "--btn--").concat(kind), "".concat(carbonPrefix, "--btn--").concat(size)])
       }, label, Icon && /*#__PURE__*/React.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,
-        className: "".concat(carbon.prefix, "--btn__icon")
+        className: "".concat(carbonPrefix, "--btn__icon")
       }));
     },
     innerRef: ref
@@ -99,6 +102,12 @@ ButtonMenu.propTypes = {
    */
   label: PropTypes.node,
 
+  /**
+   * Provide the ariaLabel prop to be passed to the OverflowMenu. This is distinctly
+   * separate from `label` to support icon only ButtonMenus
+   */
+  menuAriaLabel: PropTypes.string.isRequired,
+
   /**
    * class name applied to the overflow options
    */

package/es/components/ButtonMenu/ButtonMenuItem.js

@@ -11,7 +11,7 @@ import React from 'react'; // Other standard imports.
 
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { OverflowMenuItem } from 'carbon-components-react';
+import { OverflowMenuItem } from '@carbon/react';
 var componentName = 'ButtonMenuItem'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -27,13 +27,13 @@ import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useResizeDetector } from 'react-resize-detector';
-import { ButtonSet, Button } from 'carbon-components-react';
+import { ButtonSet, Button, usePrefix } from '@carbon/react';
 import { ButtonMenu, ButtonMenuItem } from '../ButtonMenu';
-import { pkg, carbon } from '../../settings';
+import { pkg } from '../../settings';
 import { prepareProps } from '../../global/js/utils/props-helper';
 var blockClass = "".concat(pkg.prefix, "--button-set-with-overflow");
 var componentName = 'ButtonSetWithOverflow';
-var buttonSize = 'field';
+var buttonSize = 'md';
 export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var buttons = _ref.buttons,
       className = _ref.className,
@@ -41,6 +41,7 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
       menuOptionsClass = _ref.menuOptionsClass,
       rightAlign = _ref.rightAlign;
+  var carbonPrefix = usePrefix();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -66,7 +67,7 @@ export 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(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;
 
@@ -134,7 +135,8 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
 
     return /*#__PURE__*/React.createElement(ButtonMenu, _extends({}, rest, {
       ref: ref,
-      label: buttonSetOverflowLabel
+      label: buttonSetOverflowLabel,
+      menuAriaLabel: buttonSetOverflowLabel
     }), buttons.map(function (_ref5) {
       var label = _ref5.label,
           key = _ref5.key,

package/es/components/Card/Card.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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; }
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 //
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { Button, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { Button, IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import PropTypes from 'prop-types';
 import { CardHeader } from './CardHeader';
 import { CardFooter } from './CardFooter';
@@ -54,6 +54,7 @@ export var Card = /*#__PURE__*/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,
@@ -93,7 +94,8 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return /*#__PURE__*/React.createElement(OverflowMenu, {
         size: size,
         direction: pos,
-        flipped: true
+        flipped: true,
+        ariaLabel: overflowAriaLabel
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
             rest = _objectWithoutProperties(_ref2, _excluded2);
@@ -109,7 +111,6 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           Icon = _ref3.icon,
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
-          onKeyDown = _ref3.onKeyDown,
           href = _ref3.href,
           rest = _objectWithoutProperties(_ref3, _excluded3);
 
@@ -119,7 +120,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           renderIcon: Icon,
           hasIconOnly: true,
           onClick: onClick,
-          size: actionsPlacement === 'top' ? 'sm' : 'field',
+          size: actionsPlacement === 'top' ? 'sm' : 'md',
           iconDescription: iconDescription,
           kind: "ghost",
           href: href
@@ -137,13 +138,13 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(IconButton, {
         key: id,
+        label: iconDescription,
         className: "".concat(blockClass, "__icon"),
         onClick: onClick,
-        onKeyDown: onKeyDown,
-        role: "button",
-        tabIndex: "0"
+        kind: "ghost",
+        size: "sm"
       }, /*#__PURE__*/React.createElement(Icon, {
         "aria-label": iconDescription
       }));
@@ -252,6 +253,7 @@ Card.propTypes = {
     onClick: PropTypes.func,
     onKeyDown: PropTypes.func
   })),
+  overflowAriaLabel: PropTypes.string,
   pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   primaryButtonHref: PropTypes.string,
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/Card/CardFooter.js

@@ -7,7 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 //
 import React from 'react';
 import cx from 'classnames';
-import { Button } from 'carbon-components-react';
+import { Button } from '@carbon/react';
 import PropTypes from 'prop-types';
 import { pkg } from '../../settings';
 var componentName = 'CardFooter';
@@ -44,13 +44,13 @@ export var CardFooter = function CardFooter(_ref) {
   }, secondaryButtonText && /*#__PURE__*/React.createElement(Button, {
     kind: secondaryButtonKind,
     onClick: onSecondaryButtonClick,
-    size: "field",
+    size: "md",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
   }, secondaryButtonText), primaryButtonText && /*#__PURE__*/React.createElement(Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
-    size: "field",
+    size: "md",
     renderIcon: primaryButtonIcon,
     href: primaryButtonHref
   }, primaryButtonText), hasActions && /*#__PURE__*/React.createElement("div", {

package/es/components/Cascade/Cascade.js

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { forwardRef } from 'react';
-import { Grid } from 'carbon-components-react';
+import { Grid } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { pkg } from '../../settings';

package/es/components/ComboButton/ComboButton.js

@@ -17,8 +17,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ChevronDown16, ChevronUp16 } from '@carbon/icons-react';
-import { Button, OverflowMenuItem, OverflowMenu } from 'carbon-components-react';
+import { ChevronDown, ChevronUp } from '@carbon/icons-react';
+import { Button, OverflowMenuItem, OverflowMenu } from '@carbon/react';
 import classnames from 'classnames';
 import { node, shape, string } from 'prop-types';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -71,7 +71,15 @@ var ComboButton = function ComboButton(_ref) {
       return setIsOpen(false);
     },
     renderIcon: function renderIcon() {
-      return /*#__PURE__*/createElement(isOpen ? ChevronUp16 : ChevronDown16, {
+      return /*#__PURE__*/createElement(isOpen ? function (props) {
+        return /*#__PURE__*/React.createElement(ChevronUp, _extends({
+          size: 16
+        }, props));
+      } : function (props) {
+        return /*#__PURE__*/React.createElement(ChevronDown, _extends({
+          size: 16
+        }, props));
+      }, {
         className: "".concat(blockClass, "__overflow-menu__icon")
       });
     },

package/es/components/CreateFullPage/CreateFullPage.js

@@ -17,7 +17,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Grid, ModalFooter, ComposedModal, ModalHeader, ModalBody, Button, Form } from 'carbon-components-react';
+import { ModalFooter, ComposedModal, ModalHeader, ModalBody, Button, Form } from '@carbon/react';
 import { CreateInfluencer } from '../CreateInfluencer';
 import { ActionSet } from '../ActionSet';
 import { usePreviousValue, useValidCreateStepCount, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
@@ -167,7 +167,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__main")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content")
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/React.createElement(Form, {
     className: "".concat(blockClass, "__form")
   }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
@@ -190,10 +190,10 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {
       value: index + 1
     }, child);
-  }))))), /*#__PURE__*/React.createElement(ActionSet, {
+  })))), /*#__PURE__*/React.createElement(ActionSet, {
     className: "".concat(blockClass, "__buttons"),
     actions: createFullPageActions,
-    size: "max"
+    size: "2xl"
   }))), /*#__PURE__*/React.createElement(ComposedModal, {
     className: "".concat(blockClass, "__modal"),
     size: "sm",

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -14,7 +14,7 @@ import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { FormGroup } from 'carbon-components-react';
+import { FormGroup } from '@carbon/react';
 import { StepsContext, StepNumberContext } from './CreateFullPage';
 import { usePreviousValue, useRetrieveStepData } from '../../global/js/hooks';
 import pconsole from '../../global/js/utils/pconsole';

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ProgressIndicator, ProgressStep } from 'carbon-components-react';
+import { ProgressIndicator, ProgressStep } from '@carbon/react';
 import '../../global/js/utils/props-helper';
 import { pkg } from '../../settings'; // The block part of our conventional BEM class names (blockClass__E--M).
 

package/es/components/CreateModal/CreateModal.js

@@ -11,7 +11,7 @@ var _excluded = ["className", "children", "onRequestClose", "onRequestSubmit", "
 // Import portions of React that are needed.
 import React from 'react'; // Carbon and package components we use.
 
-import { ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button } from 'carbon-components-react';
+import { ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button } from '@carbon/react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -21,7 +21,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings';
 import { getDevtoolsProps } from '../../global/js/utils/devtools'; // Carbon and package components we use.
 
-import { Form } from 'carbon-components-react';
+import { Form } from '@carbon/react';
 import { SidePanel } from '../SidePanel'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--create-side-panel");

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -12,7 +12,7 @@ var _excluded = ["backButtonText", "cancelButtonText", "children", "className",
 import React, { forwardRef, useState, useRef, createContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Grid, Form } from 'carbon-components-react';
+import { Form } from '@carbon/react';
 import wrapFocus from '../../global/js/utils/wrapFocus';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell';
 import { CreateInfluencer } from '../CreateInfluencer';
@@ -200,7 +200,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(StepsContext.Provider, {
+  }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
       setIsDisabled: setIsDisabled,
@@ -221,7 +221,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {
       value: index + 1
     }, child);
-  }))))));
+  })))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 CreateTearsheet = pkg.checkComponentEnabled(CreateTearsheet, componentName); // The display name of the component, used by React. Note that displayName

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "className", "description", "disableSubmit", "field
 import React, { forwardRef, useContext, useEffect, useState } 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 { StepsContext, StepNumberContext } from './CreateTearsheet';
 import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
@@ -86,7 +86,9 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return stepsContext ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _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/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -12,7 +12,7 @@ var _excluded = ["value1", "setValue1"];
  * 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, Checkbox } from 'carbon-components-react';
+import { Button, Column, Grid, InlineNotification, RadioButtonGroup, RadioButton, TextInput, Toggle, NumberInput, Checkbox } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
@@ -26,7 +26,9 @@ var CustomStep = function CustomStep(_ref) {
 
   return /*#__PURE__*/React.createElement(CreateTearsheetStep, _extends({}, rest, {
     disableSubmit: !value1
-  }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }), /*#__PURE__*/React.createElement(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
@@ -170,7 +172,9 @@ export 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.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
@@ -247,10 +251,13 @@ export 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.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 3,
     lg: 3
   }, /*#__PURE__*/React.createElement(NumberInput, {
+    iconDescription: "Choose a number",
     id: "carbon-number",
     min: 1,
     max: 100,
@@ -270,7 +277,9 @@ export 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.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,

package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.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, RadioTile, Row, TextInput, TileGroup, Toggle, NumberInput } from 'carbon-components-react';
+import { Button, Column, Grid, InlineNotification, RadioButtonGroup, RadioButton, RadioTile, TextInput, TileGroup, Toggle, NumberInput } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
@@ -184,7 +184,9 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     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.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
@@ -241,10 +243,13 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     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(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 3,
     lg: 3
   }, /*#__PURE__*/React.createElement(NumberInput, {
+    iconDescription: "Choose a number",
     id: "carbon-number",
     min: 1,
     max: 100,
@@ -264,7 +269,9 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     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(Grid, {
+    narrow: true
+  }, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -13,7 +13,7 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Form } from 'carbon-components-react';
+import { Form } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow'; // The block part of our conventional BEM class names (blockClass__E--M).

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -21,7 +21,6 @@ import { useBlockLayout, useTable, useColumnOrder } from 'react-table'; // Other
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { TextArea } from 'carbon-components-react';
 import { pkg } from '../../settings';
 import { DataSpreadsheetBody } from './DataSpreadsheetBody';
 import { DataSpreadsheetHeader } from './DataSpreadsheetHeader';
@@ -825,7 +824,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     ref: activeCellRef,
     className: cx("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
     type: "button"
-  }, activeCellContent), /*#__PURE__*/React.createElement(TextArea, {
+  }, activeCellContent), /*#__PURE__*/React.createElement("textarea", {
     value: cellEditorValue,
     onKeyDown: handleEditSubmit({
       activeCellCoordinates: activeCellCoordinates,
@@ -845,7 +844,6 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       cellEditorRulerRef.current.textContent = event.target.value;
     },
     ref: cellEditorRef,
-    labelText: "",
     "aria-labelledby": activeCellCoordinates ? "#".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
     className: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/React.createElement("pre", {

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

@@ -11,7 +11,7 @@ var _excluded = ["datagridState"];
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import cx from 'classnames';
 import DatagridHead from './DatagridHead';
 import DatagridBody from './DatagridBody';

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 import React from 'react';
 import { pkg } from '../../../settings';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import { NoDataEmptyState } from '../../EmptyStates/NoDataEmptyState';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody,

package/es/components/Datagrid/Datagrid/DatagridHead.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 var TableHead = DataTable.TableHead;
 
 var DatagridHead = function DatagridHead(datagridState) {

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // @flow
 import React from 'react';
 import cx from 'classnames';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -12,7 +12,7 @@ var _excluded = ["children"];
  */
 // @flow
 import React from 'react';
-import { DataTable, SkeletonText } from 'carbon-components-react';
+import { DataTable, SkeletonText } from '@carbon/react';
 import { selectionColumnId } from '../common-column-ids';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings';

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -11,7 +11,7 @@ var _excluded = ["onChange"];
  */
 // @flow
 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");
 

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -13,8 +13,8 @@ var _excluded = ["onChange"];
 // @flow
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { OverflowMenu, OverflowMenuItem, Checkbox } from 'carbon-components-react';
-import { CaretDown16 } from '@carbon/icons-react';
+import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { CaretDown } from '@carbon/icons-react';
 import { pkg } from '../../../settings'; // cspell:words columnheader
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -70,10 +70,17 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       onChange(e);
     },
     disabled: disabled,
-    id: "".concat(tableId, "-select-all-checkbox-id")
+    id: "".concat(tableId, "-select-all-checkbox-id"),
+    labelText: allRowsLabel,
+    hideLabel: true
   }))), /*#__PURE__*/React.createElement(OverflowMenu, {
-    renderIcon: CaretDown16,
-    size: "sm"
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(CaretDown, _extends({
+        size: 16
+      }, props));
+    },
+    size: "sm",
+    ariaLabel: allRowsLabel
   }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
     itemText: allPageRowsLabel,
     requireTitle: true,