carbon-addons-iot-react 2.70.0 → 2.72.0

package/es/src/components/Card/Card.jsx

@@ -2,7 +2,7 @@ import sizeMe from 'react-sizeme';
 import { SkeletonText, Tooltip } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.array.for-each';
@@ -13,9 +13,9 @@ import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { settings } from '../../constants/Settings.js';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.concat';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.includes';
 import 'core-js/modules/es.array.iterator';
 import 'core-js/modules/es.object.to-string';
@@ -64,7 +64,7 @@ var CardWrapper = function CardWrapper(_ref) {
     onTouchEnd: onTouchEnd,
     onTouchStart: onTouchStart,
     onScroll: onScroll,
-    className: cx(className, "".concat(iotPrefix, "--card--wrapper"))
+    className: classnames(className, "".concat(iotPrefix, "--card--wrapper"))
   }, validOthers), children);
 };
 /** Header components */
@@ -100,7 +100,7 @@ var CardContent = function CardContent(props) {
   var height = "".concat(dimensions.y - CARD_TITLE_HEIGHT, "px");
   return /*#__PURE__*/React.createElement("div", {
     style: _defineProperty({}, "--card-content-height", height),
-    className: cx("".concat(iotPrefix, "--card--content"), _defineProperty({}, "".concat(iotPrefix, "--card--content--expanded"), isExpanded))
+    className: classnames("".concat(iotPrefix, "--card--content"), _defineProperty({}, "".concat(iotPrefix, "--card--content--expanded"), isExpanded))
   }, children);
 };
 
@@ -321,7 +321,7 @@ var Card = function Card(props) {
           height: 'calc(100% - 50px)',
           width: 'calc(100% - 50px)'
         },
-        className: cx("".concat(iotPrefix, "--card"), className)
+        className: classnames("".concat(iotPrefix, "--card"), className)
       }), !hideHeader && /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(CardTitle, {
         title: title
       }, hasTitleTooltip ? /*#__PURE__*/React.createElement(Tooltip, {

package/es/src/components/Card/CardRangePicker.jsx

@@ -1,12 +1,12 @@
 import { ToolbarItem, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React, { useState, useCallback } from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.object.keys';
 import { settings } from '../../constants/Settings.js';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.map';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.includes';
 import 'core-js/modules/es.string.includes';
 import EventSchedule from '../../../node_modules/@carbon/icons-react/es/event--schedule/20.js';
@@ -64,7 +64,7 @@ var CardRangePicker = function CardRangePicker(_ref) {
     className: "".concat(iotPrefix, "--card--toolbar-timerange-label")
   }, timeBoxLabels[timeRange]) : null, /*#__PURE__*/React.createElement(OverflowMenu, {
     iconDescription: timeBoxLabels[timeRange],
-    className: cx("".concat(iotPrefix, "--card--toolbar-action"), "".concat(iotPrefix, "--card--toolbar-date-range-action")),
+    className: classnames("".concat(iotPrefix, "--card--toolbar-action"), "".concat(iotPrefix, "--card--toolbar-date-range-action")),
     flipped: true,
     title: i18n.overflowMenuDescription,
     menuOptionsClass: "".concat(iotPrefix, "--card--overflow"),

package/es/src/components/Card/CardToolbar.jsx

@@ -1,7 +1,7 @@
 import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.array.for-each';
@@ -27,7 +27,7 @@ var ToolbarSVGWrapper = function ToolbarSVGWrapper(props) {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
-    className: cx("".concat(iotPrefix, "--card--toolbar-action"), "".concat(iotPrefix, "--card--toolbar-svg-wrapper"))
+    className: classnames("".concat(iotPrefix, "--card--toolbar-action"), "".concat(iotPrefix, "--card--toolbar-svg-wrapper"))
   }, children);
 };
 
@@ -64,7 +64,7 @@ var CardToolbar = function CardToolbar(_ref) {
       onCardAction = _ref.onCardAction,
       className = _ref.className;
   return isEditable ? /*#__PURE__*/React.createElement("div", {
-    className: cx(className, "".concat(iotPrefix, "--card--toolbar"))
+    className: classnames(className, "".concat(iotPrefix, "--card--toolbar"))
   }, (availableActions.edit || availableActions.clone || availableActions.delete) && /*#__PURE__*/React.createElement(OverflowMenu, {
     flipped: true,
     title: i18n.overflowMenuDescription
@@ -85,7 +85,7 @@ var CardToolbar = function CardToolbar(_ref) {
     },
     itemText: i18n.deleteCardLabel
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: cx(className, "".concat(iotPrefix, "--card--toolbar"))
+    className: classnames(className, "".concat(iotPrefix, "--card--toolbar"))
   }, availableActions.range ? /*#__PURE__*/React.createElement(CardRangePicker, {
     width: width,
     i18n: i18n,

package/es/src/components/Card/DataStateRenderer.jsx

@@ -1,10 +1,10 @@
 import { Tooltip } from 'carbon-components-react';
 import React from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.symbol';
 import { settings } from '../../constants/Settings.js';
-import { ErrorFilled24, WarningFilled24 } from '@carbon/icons-react';
 import 'core-js/modules/es.array.concat';
+import { ErrorFilled24, WarningFilled24 } from '@carbon/icons-react';
 import { CARD_SIZES, CARD_CONTENT_PADDING, CARD_DATA_STATE } from '../../constants/LayoutConstants.js';
 import 'core-js/modules/es.symbol.description';
 import { ValueCardPropTypes, CardPropTypes } from '../../constants/CardPropTypes.js';
@@ -82,7 +82,7 @@ var DataStateRenderer = function DataStateRenderer(_ref2) {
       '--container-padding': "".concat(CARD_CONTENT_PADDING, "px")
     }
   }, /*#__PURE__*/React.createElement("p", {
-    className: cx("".concat(dsPrefix, "-dashes"))
+    className: classnames("".concat(dsPrefix, "-dashes"))
   }, "--"), /*#__PURE__*/React.createElement("div", {
     className: "".concat(dsPrefix, "-grid")
   }, size === CARD_SIZES.SMALL || size === CARD_SIZES.SMALLWIDE || size === CARD_SIZES.MEDIUMTHIN ? renderDataStateGridIcon() : renderDataStateGridItems()));

package/es/src/components/ComposedModal/ComposedModal.jsx

@@ -1,13 +1,13 @@
 import { ComposedModal, InlineNotification, ModalFooter, Loading, ModalHeader, ModalBody } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import warning from 'warning';
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Button from '../Button/Button.jsx';
 import 'core-js/modules/es.array.concat';
+import warning from 'warning';
 import { scrollErrorIntoView } from '../../utils/componentUtilityFunctions.js';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
@@ -213,7 +213,7 @@ var ComposedModal$1 = /*#__PURE__*/function (_React$Component) {
       return isFetchingData ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(StyledModal, _extends({}, props, {
         open: open,
         onClose: this.doNotClose,
-        className: cx(className, {
+        className: classnames(className, {
           'error-modal': type === 'warn',
           'big-modal': isLarge
         })

package/es/src/components/ComposedStructuredList/ComposedStructuredList.jsx

@@ -1,11 +1,11 @@
 import { StructuredListWrapper, StructuredListCell, StructuredListHead, StructuredListRow, StructuredListBody } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
-import warning from 'warning';
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.concat';
 import 'core-js/modules/es.array.map';
+import warning from 'warning';
 import 'core-js/modules/es.array.iterator';
 import 'core-js/modules/es.object.to-string';
 import 'core-js/modules/web.dom-collections.iterator';

package/es/src/components/Dashboard/CardRenderer.jsx

@@ -9,8 +9,8 @@ import 'core-js/modules/es.object.keys';
 import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.iterator';
 import 'core-js/modules/es.object.to-string';
 import 'core-js/modules/web.dom-collections.iterator';

package/es/src/components/Dashboard/Dashboard.jsx

@@ -9,9 +9,9 @@ import 'core-js/modules/es.object.keys';
 import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.concat';
 import 'core-js/modules/es.array.map';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.includes';
 import 'core-js/modules/es.object.to-string';
 import 'core-js/modules/es.string.includes';

package/es/src/components/Dashboard/DashboardGrid.jsx

@@ -9,9 +9,9 @@ import 'core-js/modules/es.object.keys';
 import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.map';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.reduce';
 import 'core-js/modules/es.array.some';
 import { DASHBOARD_BREAKPOINTS, DASHBOARD_COLUMNS, CARD_DIMENSIONS, GUTTER, ROW_HEIGHT } from '../../constants/LayoutConstants.js';

package/es/src/components/DateTimePicker/DateTimePicker.jsx

@@ -1,7 +1,7 @@
 import { TooltipDefinition, OrderedList, ListItem, FormGroup, RadioButtonGroup, RadioButton, NumberInput, Select, SelectItem, DatePicker, DatePickerInput, Button } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.array.for-each';
@@ -11,12 +11,12 @@ import 'core-js/modules/es.object.keys';
 import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { settings } from '../../constants/Settings.js';
-import { Calendar16 } from '@carbon/icons-react';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.concat';
 import 'core-js/modules/es.array.map';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Calendar16 } from '@carbon/icons-react';
 import 'core-js/modules/es.number.constructor';
 import 'core-js/modules/es.regexp.exec';
 import moment from 'moment';
@@ -670,7 +670,7 @@ var __unstableDateTimePicker = function __unstableDateTimePicker(_ref) {
     "aria-label": strings.calendarLabel,
     className: "".concat(iotPrefix, "--date-time-picker__icon")
   })), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--date-time-picker__menu"), _defineProperty({}, "".concat(iotPrefix, "--date-time-picker__menu-expanded"), isExpanded)),
+    className: classnames("".concat(iotPrefix, "--date-time-picker__menu"), _defineProperty({}, "".concat(iotPrefix, "--date-time-picker__menu-expanded"), isExpanded)),
     role: "listbox"
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(iotPrefix, "--date-time-picker__menu-scroll")
@@ -687,7 +687,7 @@ var __unstableDateTimePicker = function __unstableDateTimePicker(_ref) {
       onClick: function onClick() {
         return onPresetClick(preset);
       },
-      className: cx("".concat(iotPrefix, "--date-time-picker__listitem ").concat(iotPrefix, "--date-time-picker__listitem--preset"), _defineProperty({}, "".concat(iotPrefix, "--date-time-picker__listitem--preset-selected"), selectedPreset === preset.offset))
+      className: classnames("".concat(iotPrefix, "--date-time-picker__listitem ").concat(iotPrefix, "--date-time-picker__listitem--preset"), _defineProperty({}, "".concat(iotPrefix, "--date-time-picker__listitem--preset-selected"), selectedPreset === preset.offset))
     }, strings.presetLabels[i] || preset.label);
   })) : /*#__PURE__*/React.createElement("div", null, showRelativeOption ? /*#__PURE__*/React.createElement(FormGroup, {
     legendText: strings.customRangeLabel,

package/es/src/components/GaugeCard/GaugeCard.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.array.for-each';
@@ -10,12 +10,13 @@ import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { settings } from '../../constants/Settings.js';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.concat';
 import 'core-js/modules/es.array.map';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.iterator';
 import 'core-js/modules/es.object.to-string';
+import 'core-js/modules/es.regexp.to-string';
 import 'core-js/modules/web.dom-collections.iterator';
 import { CARD_CONTENT_PADDING } from '../../constants/LayoutConstants.js';
 import { CardPropTypes, GaugeCardPropTypes } from '../../constants/CardPropTypes.js';
@@ -27,14 +28,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var iotPrefix = settings.iotPrefix; // r value of the circle in SVG
 
-var radius = 30; // radius doubled plus stroke
+var radius = 36; // radius doubled plus stroke
+
+var gaugeSize = radius * 2 + 8; // circumference of SVG.
 
-var gaugeSize = radius * 2 + 8;
+var circum = 2 * Math.PI * radius;
 var getStrokeDash = function getStrokeDash() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  // circumference of SVG.
-  var circum = 2 * Math.PI * radius; // length of stroke to match percentage
-
+  // length of stroke to match percentage
   return value * circum / 100;
 };
 var getColor = function getColor(gauge, value) {
@@ -118,24 +119,24 @@ var GaugeCard = function GaugeCard(_ref) {
     tooltip: tooltip,
     isLoading: isLoading
   }), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--gauge-container"), className),
+    className: classnames("".concat(iotPrefix, "--gauge-container"), className),
     style: myStyles
   }, dataState && /*#__PURE__*/React.createElement(DataStateRenderer, {
     dataState: dataState,
     size: size,
     id: id
   }), !dataState && gauges.map(function (gauge, i) {
-    var _classnames3;
+    var _classnames5;
 
     var _getColor = getColor(gauge, values[gauge.dataSourceId]),
-        color = _getColor.color,
-        grade = _getColor.grade;
+        color = _getColor.color;
 
+    var valueLength = values[gauge.dataSourceId] && values[gauge.dataSourceId].toString().length;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: "".concat(iotPrefix, "-gauge-").concat(i)
     }, /*#__PURE__*/React.createElement("svg", {
       "aria-labelledby": "gauge-label",
-      className: cx("".concat(iotPrefix, "--gauge"), _defineProperty({}, "".concat(iotPrefix, "--gauge__loaded"), loadedState), className),
+      className: classnames("".concat(iotPrefix, "--gauge"), _defineProperty({}, "".concat(iotPrefix, "--gauge__loaded"), loadedState), className),
       percent: "0",
       style: {
         '--gauge-value': values[gauge.dataSourceId] || 0,
@@ -143,6 +144,7 @@ var GaugeCard = function GaugeCard(_ref) {
         '--gauge-colors': color,
         '--gauge-bg': gauge.backgroundColor,
         '--stroke-dash': getStrokeDash(values[gauge.dataSourceId]) || 0,
+        '--stroke-dash-array': circum,
         '--gauge-size': "".concat(gaugeSize, "px"),
         '--gauge-trend-color': gauge.trend.color
       }
@@ -158,17 +160,12 @@ var GaugeCard = function GaugeCard(_ref) {
       r: radius
     }), /*#__PURE__*/React.createElement("text", {
       id: "gauge-label",
-      className: cx("".concat(iotPrefix, "--gauge-value"), _defineProperty({}, "".concat(iotPrefix, "--gauge-value__centered"), !grade)),
+      className: classnames("".concat(iotPrefix, "--gauge-value"), "".concat(iotPrefix, "--gauge-value__centered"), _defineProperty({}, "".concat(iotPrefix, "--gauge-value-sm"), valueLength === 4), _defineProperty({}, "".concat(iotPrefix, "--gauge-value-md"), valueLength === 3), _defineProperty({}, "".concat(iotPrefix, "--gauge-value-lg"), valueLength <= 2)),
       x: gaugeSize / 2,
       y: "33",
       textAnchor: "middle"
-    }, /*#__PURE__*/React.createElement("tspan", null, values[gauge.dataSourceId] + gauge.units)), /*#__PURE__*/React.createElement("text", {
-      className: "".concat(iotPrefix, "--gauge-rating"),
-      x: gaugeSize / 2,
-      y: "48",
-      textAnchor: "middle"
-    }, /*#__PURE__*/React.createElement("tspan", null, grade))), values[gauge.trend.dataSourceId] && /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(iotPrefix, "--gauge-trend"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(iotPrefix, "--gauge-trend__up"), gauge.trend.trend === 'up'), _defineProperty(_classnames3, "".concat(iotPrefix, "--gauge-trend__down"), gauge.trend.trend === 'down'), _classnames3)),
+    }, /*#__PURE__*/React.createElement("tspan", null, values[gauge.dataSourceId]), /*#__PURE__*/React.createElement("tspan", null, gauge.units))), values[gauge.trend.dataSourceId] && /*#__PURE__*/React.createElement("div", {
+      className: classnames("".concat(iotPrefix, "--gauge-trend"), (_classnames5 = {}, _defineProperty(_classnames5, "".concat(iotPrefix, "--gauge-trend__up"), gauge.trend.trend === 'up'), _defineProperty(_classnames5, "".concat(iotPrefix, "--gauge-trend__down"), gauge.trend.trend === 'down'), _classnames5)),
       key: "".concat(gauge.trend.dataSourceId, "-").concat(i)
     }, /*#__PURE__*/React.createElement("p", {
       style: {

package/es/src/components/Header/HeaderAction/HeaderAction.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import { settings } from 'carbon-components';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.concat';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { keyCodes } from '../../../constants/KeyCodeConstants.js';
 import '../../../../node_modules/carbon-components-react/es/components/UIShell/Content.js';
 import '../../../../node_modules/carbon-components-react/es/components/UIShell/Header.js';

package/es/src/components/Header/HeaderAction/HeaderActionMenu.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { settings } from 'carbon-components';
 import _extends from '@babel/runtime/helpers/extends';
@@ -83,7 +83,7 @@ var HeaderActionMenu = /*#__PURE__*/function (_React$Component) {
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy
       };
-      var className = cx("".concat(prefix, "--header__submenu"), customClassName); // Prevents the a element from navigating to it's href target
+      var className = classnames("".concat(prefix, "--header__submenu"), customClassName); // Prevents the a element from navigating to it's href target
 
       var handleDefaultClick = function handleDefaultClick(event) {
         event.preventDefault();
@@ -107,7 +107,7 @@ var HeaderActionMenu = /*#__PURE__*/function (_React$Component) {
           "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
           ,
           "aria-expanded": isExpanded,
-          className: cx("".concat(prefix, "--header__menu-item"), "".concat(prefix, "--header__menu-title")),
+          className: classnames("".concat(prefix, "--header__menu-item"), "".concat(prefix, "--header__menu-title")),
           href: "",
           onKeyDown: this.handleOnKeyDown,
           onClick: handleDefaultClick,

package/es/src/components/Header/HeaderAction/HeaderActionPanel.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.array.for-each';
@@ -90,9 +90,9 @@ var HeaderActionPanel = function HeaderActionPanel(_ref) {
     tabIndex: "-1",
     key: "panel-".concat(index),
     "aria-label": "Header Panel",
-    className: item.label !== APP_SWITCHER ? cx('action-btn__headerpanel', {
+    className: item.label !== APP_SWITCHER ? classnames('action-btn__headerpanel', {
       'action-btn__headerpanel--closed': !isExpanded
-    }) : cx("".concat(carbonPrefix, "--app-switcher"), _defineProperty({}, item.childContent[0].className, item.childContent[0].className)),
+    }) : classnames("".concat(carbonPrefix, "--app-switcher"), _defineProperty({}, item.childContent[0].className, item.childContent[0].className)),
     expanded: isExpanded
   }, /*#__PURE__*/React.createElement("ul", {
     "aria-label": item.label

package/es/src/components/Hero/Hero.jsx

@@ -2,8 +2,8 @@ import { Breadcrumb, SkeletonText, BreadcrumbItem, Tooltip } from 'carbon-compon
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
 import 'core-js/modules/es.symbol';
-import warning from 'warning';
 import 'core-js/modules/es.array.map';
+import warning from 'warning';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled from 'styled-components';
 import 'core-js/modules/es.symbol.description';

package/es/src/components/IconSwitch/IconSwitch.jsx

@@ -1,7 +1,7 @@
 import { Button } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { settings } from '../../constants/Settings.js';
 import _extends from '@babel/runtime/helpers/extends';
@@ -49,7 +49,7 @@ var IconSwitch = React.forwardRef(function (props, ref) {
     }
   };
 
-  var classes = cx(className, "".concat(iotPrefix, "--icon-switch"), "".concat(iotPrefix, "--icon-switch--").concat(size), _defineProperty({}, "".concat(iotPrefix, "--icon-switch--unselected"), !selected));
+  var classes = classnames(className, "".concat(iotPrefix, "--icon-switch"), "".concat(iotPrefix, "--icon-switch--").concat(size), _defineProperty({}, "".concat(iotPrefix, "--icon-switch--unselected"), !selected));
   var commonProps = {
     onClick: handleClick,
     onKeyDown: handleKeyDown,

package/es/src/components/ImageCard/CardIcon.jsx

@@ -2,8 +2,8 @@ import { Icon } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import 'core-js/modules/es.object.keys';
-import warning from 'warning';
 import 'core-js/modules/es.array.concat';
+import warning from 'warning';
 import 'core-js/modules/es.object.to-string';
 import 'core-js/modules/es.regexp.to-string';
 import icons from '../../utils/bundledIcons.js';

package/es/src/components/ImageCard/ImageHotspots.jsx

@@ -10,9 +10,9 @@ import 'core-js/modules/es.object.keys';
 import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.concat';
 import 'core-js/modules/es.array.map';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import Hotspot, { propTypes } from './Hotspot.jsx';
 import ImageControls from './ImageControls.jsx';

package/es/src/components/List/HierarchyList/HierarchyList.jsx

@@ -3,10 +3,10 @@ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.array.for-each';
 import 'core-js/modules/web.dom-collections.for-each';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.concat';
 import 'core-js/modules/es.array.slice';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.includes';
 import 'core-js/modules/es.string.includes';
 import isNil from 'lodash/isNil';

package/es/src/components/List/List.jsx

@@ -1,7 +1,7 @@
 import { SkeletonText } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.array.filter';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { settings } from '../../constants/Settings.js';
@@ -160,7 +160,7 @@ var List = forwardRef(function (props, ref) {
     return renderItemAndChildren(item, 0);
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--list"), _defineProperty({}, "".concat(iotPrefix, "--list__full-height"), isFullHeight))
+    className: classnames("".concat(iotPrefix, "--list"), _defineProperty({}, "".concat(iotPrefix, "--list__full-height"), isFullHeight))
   }, /*#__PURE__*/React.createElement(ListHeader, {
     className: "".concat(iotPrefix, "--list--header"),
     title: title,
@@ -169,7 +169,7 @@ var List = forwardRef(function (props, ref) {
     i18n: i18n,
     isLoading: isLoading
   }), /*#__PURE__*/React.createElement("div", {
-    className: cx(_defineProperty({}, "".concat(iotPrefix, "--list--content__full-height"), isFullHeight), "".concat(iotPrefix, "--list--content"))
+    className: classnames(_defineProperty({}, "".concat(iotPrefix, "--list--content__full-height"), isFullHeight), "".concat(iotPrefix, "--list--content"))
   }, !isLoading ? listItems : /*#__PURE__*/React.createElement(SkeletonText, {
     className: "".concat(iotPrefix, "--list--skeleton"),
     width: "90%"

package/es/src/components/List/ListItem/ListItem.jsx

@@ -1,7 +1,7 @@
 import { Icon } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { settings } from '../../../constants/Settings.js';
 import 'core-js/modules/es.array.concat';
@@ -20,7 +20,7 @@ var ListItemWrapper = function ListItemWrapper(_ref) {
   return isSelectable ? /*#__PURE__*/React.createElement("div", {
     role: "button",
     tabIndex: 0,
-    className: cx("".concat(iotPrefix, "--list-item"), "".concat(iotPrefix, "--list-item__selectable"), _defineProperty({}, "".concat(iotPrefix, "--list-item__selected"), selected), _defineProperty({}, "".concat(iotPrefix, "--list-item__large"), isLargeRow)),
+    className: classnames("".concat(iotPrefix, "--list-item"), "".concat(iotPrefix, "--list-item__selectable"), _defineProperty({}, "".concat(iotPrefix, "--list-item__selected"), selected), _defineProperty({}, "".concat(iotPrefix, "--list-item__large"), isLargeRow)),
     onKeyPress: function onKeyPress(_ref2) {
       var key = _ref2.key;
       return key === 'Enter' && onSelect(id);
@@ -29,7 +29,7 @@ var ListItemWrapper = function ListItemWrapper(_ref) {
       onSelect(id);
     }
   }, children) : /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--list-item"), _defineProperty({}, "".concat(iotPrefix, "--list-item__large"), isLargeRow))
+    className: classnames("".concat(iotPrefix, "--list-item"), _defineProperty({}, "".concat(iotPrefix, "--list-item__large"), isLargeRow))
   }, children);
 };
 
@@ -152,14 +152,14 @@ var ListItem = function ListItem(_ref3) {
     isLargeRow: isLargeRow,
     onSelect: onSelect
   }, renderNestingOffset(), renderExpander(), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--list-item--content"), _defineProperty({}, "".concat(iotPrefix, "--list-item--content__selected"), selected), _defineProperty({}, "".concat(iotPrefix, "--list-item--content__large"), isLargeRow)),
+    className: classnames("".concat(iotPrefix, "--list-item--content"), _defineProperty({}, "".concat(iotPrefix, "--list-item--content__selected"), selected), _defineProperty({}, "".concat(iotPrefix, "--list-item--content__large"), isLargeRow)),
     ref: selectedItemRef
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--list-item--content--values"), _defineProperty({}, "".concat(iotPrefix, "--list-item--content--values__large"), isLargeRow))
+    className: classnames("".concat(iotPrefix, "--list-item--content--values"), _defineProperty({}, "".concat(iotPrefix, "--list-item--content--values__large"), isLargeRow))
   }, isLargeRow ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(iotPrefix, "--list-item--content--values--main ").concat(iotPrefix, "--list-item--content--values--main__large")
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--list-item--content--values--value"), _defineProperty({}, "".concat(iotPrefix, "--list-item--category"), isCategory)),
+    className: classnames("".concat(iotPrefix, "--list-item--content--values--value"), _defineProperty({}, "".concat(iotPrefix, "--list-item--category"), isCategory)),
     title: value
   }, value), renderRowActions()), secondaryValue ? /*#__PURE__*/React.createElement("div", {
     title: secondaryValue,
@@ -167,7 +167,7 @@ var ListItem = function ListItem(_ref3) {
   }, secondaryValue) : null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(iotPrefix, "--list-item--content--values--main")
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(iotPrefix, "--list-item--content--values--value"), _defineProperty({}, "".concat(iotPrefix, "--list-item--category"), isCategory)),
+    className: classnames("".concat(iotPrefix, "--list-item--content--values--value"), _defineProperty({}, "".concat(iotPrefix, "--list-item--category"), isCategory)),
     title: value
   }, value), secondaryValue ? /*#__PURE__*/React.createElement("div", {
     title: secondaryValue,

package/es/src/components/List/SimpleList/SimpleList.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import 'core-js/modules/es.array.filter';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.array.concat';
 import 'core-js/modules/es.array.slice';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.regexp.exec';
 import 'core-js/modules/es.string.search';
 import List from '../List.jsx';

package/es/src/components/ListCard/ListCard.jsx

@@ -1,7 +1,7 @@
 import { StructuredListWrapper, StructuredListBody, StructuredListRow, StructuredListCell, Link, InlineLoading } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import React from 'react';
-import cx from 'classnames';
+import classnames from 'classnames';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.array.filter';
 import 'core-js/modules/es.array.for-each';
@@ -48,7 +48,7 @@ var ListCard = function ListCard(_ref) {
     size: size,
     onScroll: handleScroll
   }, others), /*#__PURE__*/React.createElement("div", {
-    className: cx('list-card', className),
+    className: classnames('list-card', className),
     style: {
       paddingTop: 0,
       paddingRight: CARD_CONTENT_PADDING,

package/es/src/components/Page/EditPage.jsx

@@ -9,11 +9,11 @@ import 'core-js/modules/es.object.get-own-property-descriptors';
 import 'core-js/modules/es.object.keys';
 import 'core-js/modules/web.dom-collections.for-each';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import warning from 'warning';
 import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Button from '../Button/Button.jsx';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import warning from 'warning';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled from 'styled-components';
 import _regeneratorRuntime from '@babel/runtime/regenerator';