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

package/es/components/ExportModal/ExportModal.js

@@ -15,9 +15,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState, useRef, forwardRef, useEffect } from 'react';
-import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput, RadioButton, RadioButtonGroup, FormGroup, Loading, PasswordInput } from 'carbon-components-react';
+import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput, RadioButton, RadioButtonGroup, FormGroup, Loading, PasswordInput } from '@carbon/react';
 import cx from 'classnames';
-import { ErrorFilled16, CheckmarkFilled16 } from '@carbon/icons-react';
+import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -142,6 +142,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClose: onClose
   }, getDevtoolsProps(componentName))), /*#__PURE__*/React.createElement(ModalHeader, {
     className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
     title: title
   }), /*#__PURE__*/React.createElement(ModalBody, {
     className: "".concat(blockClass, "__body-container")
@@ -173,9 +174,11 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Loading, {
     small: true,
     withOverlay: false
-  }), /*#__PURE__*/React.createElement("p", null, loadingMessage)), successful && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckmarkFilled16, {
+  }), /*#__PURE__*/React.createElement("p", null, loadingMessage)), successful && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckmarkFilled, {
+    size: 16,
     className: "".concat(blockClass, "__checkmark-icon")
-  }), /*#__PURE__*/React.createElement("p", null, successMessage)), error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorFilled16, {
+  }), /*#__PURE__*/React.createElement("p", null, successMessage)), error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorFilled, {
+    size: 16,
     className: "".concat(blockClass, "__error-icon")
   }), /*#__PURE__*/React.createElement("p", null, errorMessage)))), !submitted && /*#__PURE__*/React.createElement(ModalFooter, {
     className: "".concat(blockClass, "__footer")

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -81,7 +81,7 @@ ExpressiveCard.propTypes = {
   /**
    * Provides the icon that's displayed at the top of the card
    */
-  pictogram: PropTypes.object,
+  pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * Optionally specify an href for your Button to become an <a> element

package/es/components/HTTPErrors/HTTPErrorContent.js

@@ -19,7 +19,7 @@ import { pkg
 /*, carbon */
 } from '../../settings'; // Carbon and package components we use.
 
-import { Link } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Link } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--http-errors");
 var componentName = 'HTTPErrorContent';

package/es/components/ImportModal/ImportModal.js

@@ -18,13 +18,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState, forwardRef } from 'react';
-import { Add20 } from '@carbon/icons-react';
-import { ComposedModal, ModalHeader, ModalFooter, ModalBody, FileUploaderDropContainer, FileUploaderItem, TextInput, Button } from 'carbon-components-react';
+import { Add } from '@carbon/icons-react';
+import { ComposedModal, ModalHeader, ModalFooter, ModalBody, FileUploaderDropContainer, FileUploaderItem, TextInput, Button, usePrefix } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
-import { pkg, carbon } from '../../settings';
+import { pkg } from '../../settings';
 var componentName = 'ImportModal'; // Default values for props
 
 var defaults = {
@@ -61,6 +61,8 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var carbonPrefix = usePrefix();
+
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       files = _useState2[0],
@@ -255,9 +257,13 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__import-button"),
     size: "sm",
     disabled: importButtonDisabled,
-    renderIcon: inputButtonIcon ? Add20 : null
+    renderIcon: inputButtonIcon ? function (props) {
+      return /*#__PURE__*/React.createElement(Add, _extends({
+        size: 20
+      }, props));
+    } : null
   }, inputButtonText)), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
+    className: "".concat(carbonPrefix, "--file-container ").concat(blockClass, "__file-container")
   }, hasFiles && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__helper-text")
   }, fileStatusString), files.map(function (file) {
@@ -268,7 +274,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       name: file.name,
       status: file.status,
-      size: "default",
+      size: "lg",
       uuid: file.uuid,
       iconDescription: file.iconDescription,
       invalid: file.invalid,

package/es/components/InlineEdit/InlineEdit.js

@@ -17,12 +17,12 @@ import React, { useRef, useState } from 'react'; // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg, carbon } from '../../settings'; // Carbon and package components we use.
+import { pkg } from '../../settings'; // Carbon and package components we use.
 
-/* TODO: @import(s) of carbon components and other package components. */
+/* TODO: @use(s) of carbon components and other package components. */
 
-import { Button } from 'carbon-components-react';
-import { Close16, Edit16, EditOff16, Checkmark16, WarningFilled16 } from '@carbon/icons-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Button, IconButton, usePrefix } from '@carbon/react';
+import { Close, Edit, EditOff, Checkmark, WarningFilled } from '@carbon/icons-react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--inline-edit");
 var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -65,6 +65,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       value = _ref.value,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var carbonPrefix = usePrefix();
   var refInput = useRef(null);
   var localRef = useRef(null);
   var ref = refIn || localRef;
@@ -83,7 +84,9 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
 
   var validationText = invalidText; // || warnText;
 
-  var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled16, null) : null; // sanitize the tooltip values
+  var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled, {
+    size: 16
+  }) : null; // sanitize the tooltip values
 
   var alignIsObject = _typeof(buttonTooltipAlignment) === 'object';
   var directionIsObject = _typeof(buttonTooltipPosition) === 'object';
@@ -286,28 +289,37 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       hasIconOnly: true,
       iconDescription: cancelDescription,
       onClick: handleCancel,
-      renderIcon: Close16
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(Close, _extends({
+          size: 16
+        }, props));
+      }
     }, tipPositions.cancel)), /*#__PURE__*/React.createElement(Button, _extends({
       className: "".concat(blockClass, "__save"),
       kind: "ghost",
       hasIconOnly: true,
       iconDescription: saveDescription,
       onClick: handleSave,
-      renderIcon: Checkmark16,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(Checkmark, _extends({
+          size: 16
+        }, props));
+      },
       disabled: value === internalValue
-    }, tipPositions.save))) : /*#__PURE__*/React.createElement(Button, _extends({
+    }, tipPositions.save))) : /*#__PURE__*/React.createElement(IconButton, _extends({
       className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
       kind: "ghost",
-      hasIconOnly: true,
-      iconDescription: editDescription,
+      label: editDescription,
       onClick: handleEdit,
-      renderIcon: disabled ? EditOff16 : Edit16,
-      disabled: disabled,
-      tabIndex: -1
-    }, tipPositions.edit)))), /*#__PURE__*/React.createElement("div", {
+      disabled: disabled
+    }, tipPositions.edit), disabled ? /*#__PURE__*/React.createElement(EditOff, {
+      size: 16
+    }) : /*#__PURE__*/React.createElement(Edit, {
+      size: 16
+    })))), /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__disabled-cover"))
     }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__validation-text ").concat(carbon.prefix, "--form-requirement")
+      className: "".concat(blockClass, "__validation-text ").concat(carbonPrefix, "--form-requirement")
     }, validationText))
   );
 }); // Return a placeholder if not released and not enabled by feature flag

package/es/components/ModifiedTabs/ModifiedTabLabelNew.js

@@ -6,16 +6,20 @@
 //
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Add20 } from '@carbon/icons-react';
+import { Add } from '@carbon/icons-react';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--modified-tabs");
 export var ModifiedTabLabelNew = function ModifiedTabLabelNew(_ref) {
   var label = _ref.label;
   return /*#__PURE__*/React.createElement("span", {
-    className: "modified-tabs__tab-new"
+    className: "".concat(blockClass, "__tab-new")
   }, /*#__PURE__*/React.createElement("span", {
-    className: "modified-tabs__tab-new__label"
+    className: "".concat(blockClass, "__tab-new__label")
   }, label), /*#__PURE__*/React.createElement("span", {
-    className: "modified-tabs__tab-new-img"
-  }, /*#__PURE__*/React.createElement(Add20, null)));
+    className: "".concat(blockClass, "__tab-new-img")
+  }, /*#__PURE__*/React.createElement(Add, {
+    size: 20
+  })));
 };
 ModifiedTabLabelNew.propTypes = {
   /**

package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Close16, CloseFilled16 } from '@carbon/icons-react';
+import { Close, CloseFilled } from '@carbon/icons-react';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--modified-tabs");
 export var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref) {
   var unsavedContent = _ref.unsavedContent,
       label = _ref.label,
@@ -10,26 +12,22 @@ export var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref)
     if (onClose) {
       onClose();
     }
-  }; // const handleMousedown = (ev) => {
-  //   console.log('mouse down');
-  //   console.dir(ev);
-  //   ev.stopPropagation();
-  //   ev.cancelBubble = true;
-  //   ev.preventDefault();
-  // };
-
+  };
 
   return /*#__PURE__*/React.createElement("span", {
-    className: "modified-tabs__tab"
+    className: "".concat(blockClass, "__tab")
   }, /*#__PURE__*/React.createElement("span", {
-    className: "modified-tabs__tab-label"
+    className: "".concat(blockClass, "__tab-label")
   }, label), /*#__PURE__*/React.createElement("button", {
     title: "Close button",
-    onClick: handleClose // onMouseDown={handleMousedown}
-    ,
-    className: "modified-tabs__tab-close",
+    onClick: handleClose,
+    className: "".concat(blockClass, "__tab-close"),
     type: "button"
-  }, unsavedContent ? /*#__PURE__*/React.createElement(CloseFilled16, null) : /*#__PURE__*/React.createElement(Close16, null)));
+  }, unsavedContent ? /*#__PURE__*/React.createElement(CloseFilled, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(Close, {
+    size: 16
+  })));
 };
 ModifiedTabLabelWithClose.propTypes = {
   /**

package/es/components/ModifiedTabs/ModifiedTabs.js

@@ -4,28 +4,26 @@
 // 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 React, { useRef } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Tabs, Tab } from 'carbon-components-react';
+import cx from 'classnames';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { ModifiedTabLabelWithClose } from './ModifiedTabLabelWithClose';
 import { ModifiedTabLabelNew } from './ModifiedTabLabelNew';
 import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--modified-tabs");
 var componentName = 'ModifiedTabs'; // Default values for props
 
 var defaults = {
-  tabs: [{
-    id: 'tab-1',
-    label: 'Tab 1',
-    content: /*#__PURE__*/React.createElement("div", null, "Iam am the content of tab 1."),
-    unsavedContent: false
-  }],
   newTabLabel: 'New tab',
   newTabContent: 'Your new tab will be here soon',
   onNewTab: undefined,
-  onCloseTab: undefined
+  onCloseTab: undefined,
+  tabs: []
 };
-export var ModifiedTabs = function ModifiedTabs(_ref) {
-  var _ref$tabs = _ref.tabs,
+export var ModifiedTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      _ref$tabs = _ref.tabs,
       tabs = _ref$tabs === void 0 ? defaults.tabs : _ref$tabs,
       _ref$newTabLabel = _ref.newTabLabel,
       newTabLabel = _ref$newTabLabel === void 0 ? defaults.newTabLabel : _ref$newTabLabel,
@@ -34,18 +32,19 @@ export var ModifiedTabs = function ModifiedTabs(_ref) {
       _ref$onNewTab = _ref.onNewTab,
       onNewTab = _ref$onNewTab === void 0 ? defaults.onNewTab : _ref$onNewTab,
       _ref$onCloseTab = _ref.onCloseTab,
-      onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab;
+      onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab,
+      tabListAriaLabel = _ref.tabListAriaLabel;
+  var tabsRef = useRef();
+  var localRef = ref || tabsRef;
 
   var handleNewTab = function handleNewTab() {
     if (onNewTab) {
       onNewTab();
       setTimeout(function () {
         // set focus to the new tab
-        var tab = tabsRef.current.getTabAt(tabs.length);
-
-        if (tab & tab.tabAnchor) {
-          tab.tabAnchor.focus();
-        }
+        var addNewTabButton = localRef.current.querySelector(".".concat(blockClass, "__tab-new"));
+        var tab = addNewTabButton === null || addNewTabButton === void 0 ? void 0 : addNewTabButton.previousSibling;
+        tab === null || tab === void 0 ? void 0 : tab.focus();
       });
     }
   };
@@ -56,41 +55,54 @@ export var ModifiedTabs = function ModifiedTabs(_ref) {
     }
   };
 
-  var tabsRef = useRef(null);
-  return /*#__PURE__*/React.createElement(Tabs, {
-    className: "modified-tabs",
-    ref: tabsRef
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(blockClass, className),
+    ref: localRef
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    className: "modified-tabs"
+  }, /*#__PURE__*/React.createElement(TabList, {
+    "aria-label": tabListAriaLabel
   }, tabs.map(function (tab) {
     return /*#__PURE__*/React.createElement(Tab, {
-      id: tab.id,
-      key: tab.id,
-      label: /*#__PURE__*/React.createElement(ModifiedTabLabelWithClose, {
-        label: tab.label,
-        onClose: function onClose() {
-          return handleClose(tab.id);
-        },
-        unsavedContent: tab.unsavedContent
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "some-content"
-    }, tab.content));
+      key: tab.id
+    }, /*#__PURE__*/React.createElement(ModifiedTabLabelWithClose, {
+      label: tab.label,
+      onClose: function onClose() {
+        return handleClose(tab.id);
+      },
+      unsavedContent: tab.unsavedContent
+    }));
   }), /*#__PURE__*/React.createElement(Tab, {
     id: "modified-tabs__tab-new",
-    label: /*#__PURE__*/React.createElement(ModifiedTabLabelNew, {
-      label: newTabLabel
-    }),
     onClick: handleNewTab,
     onKeyUp: function onKeyUp(ev) {
       return ev.keyCode === 32 && handleNewTab();
     },
-    role: "button"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "some-content"
-  }, newTabContent)));
-}; // Return a placeholder if not released and not enabled by feature flag
+    role: "button",
+    className: "".concat(blockClass, "__tab-new")
+  }, /*#__PURE__*/React.createElement(ModifiedTabLabelNew, {
+    label: newTabLabel
+  }))), /*#__PURE__*/React.createElement(TabPanels, null, tabs.map(function (tab) {
+    var _tab$content;
+
+    return /*#__PURE__*/React.createElement(TabPanel, {
+      key: tab.id,
+      id: tab.id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__tab-content")
+    }, (_tab$content = tab.content) === null || _tab$content === void 0 ? void 0 : _tab$content.call(tab)));
+  }), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__tab-content")
+  }, newTabContent)))));
+}); // Return a placeholder if not released and not enabled by feature flag
 
 ModifiedTabs = pkg.checkComponentEnabled(ModifiedTabs, componentName);
 ModifiedTabs.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+
   /**
    * New tab content
    */
@@ -111,9 +123,19 @@ ModifiedTabs.propTypes = {
    */
   onNewTab: PropTypes.func,
 
+  /**
+   * Tab list aria label, passed to Carbon TabList
+   */
+  tabListAriaLabel: PropTypes.string.isRequired,
+
   /**
    * Tabs array containing tab object { id, label, content }
    */
-  tabs: PropTypes.array
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.node,
+    content: PropTypes.func,
+    unsavedContent: PropTypes.bool
+  })).isRequired
 };
 ModifiedTabs.displayName = componentName;

package/es/components/MultiAddSelect/MultiAddSelect.js

@@ -83,11 +83,11 @@ MultiAddSelect.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.shape({
       avatar: PropTypes.shape({
         alt: PropTypes.string,
-        icon: PropTypes.object,
+        icon: PropTypes.func,
         src: PropTypes.string
       }),
       children: PropTypes.object,
-      icon: PropTypes.object,
+      icon: PropTypes.func,
       id: PropTypes.string.isRequired,
       subtitle: PropTypes.string,
       title: PropTypes.string.isRequired,

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -21,8 +21,8 @@ import { pkg } from '../../settings';
 import { timeAgo } from './utils';
 import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState'; // Carbon and package components we use.
 
-import { Button, Link, Toggle } from 'carbon-components-react';
-import { ErrorFilled16, WarningAltFilled16, CheckmarkFilled16, InformationSquareFilled16, ChevronDown16, Close16, Settings16 } from '@carbon/icons-react';
+import { Button, Link, Toggle, IconButton } from '@carbon/react';
+import { ErrorFilled, WarningAltFilled, CheckmarkFilled, InformationSquareFilled, ChevronDown, Close, Settings } from '@carbon/icons-react';
 import { usePreviousValue } from '../../global/js/hooks'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'NotificationsPanel';
@@ -229,8 +229,12 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React.createElement(Button, {
       kind: "ghost",
-      size: "small",
-      renderIcon: ChevronDown16,
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(ChevronDown, _extends({
+          size: 16
+        }, props));
+      },
       iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
@@ -270,13 +274,17 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
 
         event.which === 13 && notification.onNotificationClick(notification);
       }
-    }, notification.type === 'error' && /*#__PURE__*/React.createElement(ErrorFilled16, {
+    }, notification.type === 'error' && /*#__PURE__*/React.createElement(ErrorFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
-    }), notification.type === 'success' && /*#__PURE__*/React.createElement(CheckmarkFilled16, {
+    }), notification.type === 'success' && /*#__PURE__*/React.createElement(CheckmarkFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
-    }), notification.type === 'warning' && /*#__PURE__*/React.createElement(WarningAltFilled16, {
+    }), notification.type === 'warning' && /*#__PURE__*/React.createElement(WarningAltFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
-    }), notification.type === 'informational' && /*#__PURE__*/React.createElement(InformationSquareFilled16, {
+    }), notification.type === 'informational' && /*#__PURE__*/React.createElement(InformationSquareFilled, {
+      size: 16,
       className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
     }), /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__notification-content")
@@ -301,17 +309,18 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(Link, {
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.text)), /*#__PURE__*/React.createElement(Button, {
+    }, notification.link.text)), /*#__PURE__*/React.createElement(IconButton, {
+      align: "left",
       kind: "ghost",
-      size: "small",
-      renderIcon: Close16,
-      iconDescription: dismissSingleNotificationIconDescription,
-      tooltipPosition: "left",
+      size: "sm",
+      label: dismissSingleNotificationIconDescription,
       className: "".concat(blockClass, "__dismiss-single-button"),
       onClick: function onClick(event) {
         return dismissSingleNotification(event, notification);
       }
-    }));
+    }, /*#__PURE__*/React.createElement(Close, {
+      size: 16
+    })));
   };
 
   var dismissSingleNotification = function dismissSingleNotification(event, notification) {
@@ -336,7 +345,7 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
   }, /*#__PURE__*/React.createElement("h1", {
     className: "".concat(blockClass, "__header")
   }, title), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
+    size: "sm",
     kind: "ghost",
     className: "".concat(blockClass, "__dismiss-button"),
     onClick: function onClick() {
@@ -352,7 +361,8 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
       return onDoNotDisturbChange(event);
     },
     defaultToggled: doNotDisturbDefaultToggled,
-    "aria-label": doNotDisturbLabel
+    "aria-label": doNotDisturbLabel,
+    labelText: doNotDisturbLabel
   })), /*#__PURE__*/React.createElement("div", {
     className: mainSectionClassName
   }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
@@ -381,9 +391,13 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
     }
   }, viewAllLabel(allNotifications.length)), /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
-    size: "small",
+    size: "sm",
     className: "".concat(blockClass, "__settings-button"),
-    renderIcon: Settings16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Settings, _extends({
+        size: 16
+      }, props));
+    },
     iconDescription: settingsIconDescription,
     onClick: function onClick() {
       return onSettingsClick();

package/es/components/OptionsTile/OptionsTile.js

@@ -19,8 +19,8 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Toggle } from 'carbon-components-react';
-import { ChevronDown16, Locked16, WarningAltFilled16, WarningFilled16 } from '@carbon/icons-react';
+import { Toggle } from '@carbon/react';
+import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/icons-react';
 import * as carbonMotion from '@carbon/motion'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--options-tile");
@@ -175,15 +175,15 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var summaryClasses = ["".concat(blockClass, "__summary")];
 
     if (invalid) {
-      Icon = WarningFilled16;
+      Icon = WarningFilled;
       text = invalidText;
       summaryClasses.push("".concat(blockClass, "__summary--invalid"));
     } else if (warn) {
-      Icon = WarningAltFilled16;
+      Icon = WarningAltFilled;
       text = warnText;
       summaryClasses.push("".concat(blockClass, "__summary--warn"));
     } else if (locked) {
-      Icon = Locked16;
+      Icon = Locked;
       summaryClasses.push("".concat(blockClass, "__summary--locked"));
 
       if (!text) {
@@ -206,7 +206,9 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title), text && /*#__PURE__*/React.createElement("span", {
       className: cx(summaryClasses),
       "aria-hidden": summaryHidden
-    }, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
+      size: 16
+    }), /*#__PURE__*/React.createElement("span", {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
   }
@@ -227,21 +229,25 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-labelledby": titleId,
     onToggle: onToggle,
     size: "sm",
-    disabled: isLocked
+    disabled: isLocked,
+    labelText: title
   })), isExpandable ? /*#__PURE__*/React.createElement("details", {
     open: isOpen,
     ref: detailsRef
   }, /*#__PURE__*/React.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
-  }, /*#__PURE__*/React.createElement(ChevronDown16, {
+  }, /*#__PURE__*/React.createElement(ChevronDown, {
+    size: 16,
     className: "".concat(blockClass, "__chevron")
   }), renderTitle()), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
   }, isLocked && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
-  }, /*#__PURE__*/React.createElement(Locked16, null), lockedText), children)) : /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Locked, {
+    size: 16
+  }), lockedText), children)) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__static-content")
   }, renderTitle()));
 }); // Return a placeholder if not released and not enabled by feature flag