@carbon/ibm-products 2.26.0 → 2.28.0-alpha.4

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var react = require('@carbon/react');
 var settings = require('../../settings.js');
@@ -21,6 +21,7 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["isHidden", "buttons"],
   _excluded2 = ["label", "key", "kind", "id"],
@@ -149,7 +150,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   useResizeObserver.useResizeObserver(sizingContainerRefCombo, checkFullyVisibleItems);
   useResizeObserver.useResizeObserver(spaceAvailableRef, checkFullyVisibleItems);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index$1["default"]([blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),
+    className: cx__default["default"]([blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),
     ref: spaceAvailableRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__button-container ").concat(blockClass, "__button-container--hidden")

package/lib/components/Card/Card.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var index = require('../../node_modules/prop-types/index.js');
 var CardHeader = require('./CardHeader.js');
@@ -21,6 +21,7 @@ var settings = require('../../settings.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "title", "titleSize"],
   _excluded2 = ["id"],
@@ -165,7 +166,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
       ref: ref,
-      className: index$1["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
+      className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -174,7 +175,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var getHeaderBodyProps = function getHeaderBodyProps() {
     var clickable = hasClickEvent && clickZone === 'two';
     var headerBodyProps = _rollupPluginBabelHelpers.objectSpread2({
-      className: index$1["default"]("".concat(blockClass, "__header-body-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
+      className: cx__default["default"]("".concat(blockClass, "__header-body-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
     }, clickable && clickableProps);
     return headerBodyProps;
   };
@@ -206,7 +207,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var getBodyProps = function getBodyProps() {
     var clickable = hasClickEvent && clickZone === 'three';
     var bodyProps = _rollupPluginBabelHelpers.objectSpread2({
-      className: index$1["default"]("".concat(blockClass, "__body"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
+      className: cx__default["default"]("".concat(blockClass, "__body"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
     }, clickable && clickableProps);
     return bodyProps;
   };

package/lib/components/Card/CardFooter.js

@@ -11,14 +11,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/prop-types/index.js');
 var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var componentName = 'CardFooter';
 var defaults = {
@@ -52,7 +53,7 @@ var CardFooter = function CardFooter(_ref) {
     secondaryButtonText = _ref.secondaryButtonText;
   var blockClass = "".concat(settings.pkg.prefix, "--card");
   var footerClass = "".concat(settings.pkg.prefix, "--card__footer");
-  var footerClasses = index["default"](footerClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(footerClass, "-no-button"), !hasButton));
+  var footerClasses = cx__default["default"](footerClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(footerClass, "-no-button"), !hasButton));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: footerClasses
   }, secondaryButtonText && secondaryButtonPlacement === 'bottom' && /*#__PURE__*/React__default["default"].createElement(react.Button, {
@@ -74,24 +75,24 @@ var CardFooter = function CardFooter(_ref) {
   }, actions));
 };
 CardFooter.propTypes = {
-  actions: index$1["default"].oneOfType([index$1["default"].array, index$1["default"].node]),
-  hasActions: index$1["default"].bool,
-  hasButton: index$1["default"].bool,
-  onPrimaryButtonClick: index$1["default"].func,
-  onSecondaryButtonClick: index$1["default"].func,
-  primaryButtonDisabled: index$1["default"].bool,
-  primaryButtonHref: index$1["default"].string,
-  primaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  primaryButtonKind: index$1["default"].oneOf(['primary', 'ghost']),
-  primaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
-  primaryButtonText: index$1["default"].string,
-  productive: index$1["default"].bool,
-  secondaryButtonDisabled: index$1["default"].bool,
-  secondaryButtonHref: index$1["default"].string,
-  secondaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  secondaryButtonKind: index$1["default"].oneOf(['secondary', 'ghost']),
-  secondaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
-  secondaryButtonText: index$1["default"].string
+  actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
+  hasActions: index["default"].bool,
+  hasButton: index["default"].bool,
+  onPrimaryButtonClick: index["default"].func,
+  onSecondaryButtonClick: index["default"].func,
+  primaryButtonDisabled: index["default"].bool,
+  primaryButtonHref: index["default"].string,
+  primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  primaryButtonKind: index["default"].oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
+  primaryButtonText: index["default"].string,
+  productive: index["default"].bool,
+  secondaryButtonDisabled: index["default"].bool,
+  secondaryButtonHref: index["default"].string,
+  secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
+  secondaryButtonText: index["default"].string
 };
 CardFooter.displayName = componentName;
 

package/lib/components/Card/CardHeader.js

@@ -11,14 +11,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../node_modules/prop-types/index.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _rect, _path;
 var componentName = 'CardHeader';
@@ -52,9 +53,9 @@ var CardHeader = function CardHeader(_ref) {
   var carbonPrefix = react.usePrefix();
   var blockClass = "".concat(settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
-  var headerClasses = index["default"](headerClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
+  var headerClasses = cx__default["default"](headerClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
   var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
-  var actionGhostButtonClass = index["default"](actionGhostButton, _rollupPluginBabelHelpers.defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
+  var actionGhostButtonClass = cx__default["default"](actionGhostButton, _rollupPluginBabelHelpers.defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   var hollowSlugIcon = /*#__PURE__*/React__default["default"].createElement("svg", {
     className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon"),
     width: "24",
@@ -84,7 +85,7 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"](["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+    className: cx__default["default"](["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__title-container")
   }, label && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -113,34 +114,34 @@ var CardHeader = function CardHeader(_ref) {
   }, primaryButtonText)), normalizedSlug));
 };
 CardHeader.propTypes = {
-  actions: index$1["default"].oneOfType([index$1["default"].array, index$1["default"].node]),
-  description: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].object, index$1["default"].node]),
-  hasActions: index$1["default"].bool,
+  actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
+  description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  hasActions: index["default"].bool,
   /**
    * is the host card clickable
    */
-  inClickableCard: index$1["default"].bool,
-  label: index$1["default"].string,
-  noActionIcons: index$1["default"].bool,
-  onPrimaryButtonClick: index$1["default"].func,
-  onSecondaryButtonClick: index$1["default"].func,
-  primaryButtonDisabled: index$1["default"].bool,
-  primaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  primaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
-  primaryButtonText: index$1["default"].string,
-  secondaryButtonDisabled: index$1["default"].bool,
-  secondaryButtonHref: index$1["default"].string,
-  secondaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  secondaryButtonKind: index$1["default"].oneOf(['secondary', 'ghost']),
-  secondaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
-  secondaryButtonText: index$1["default"].string,
+  inClickableCard: index["default"].bool,
+  label: index["default"].string,
+  noActionIcons: index["default"].bool,
+  onPrimaryButtonClick: index["default"].func,
+  onSecondaryButtonClick: index["default"].func,
+  primaryButtonDisabled: index["default"].bool,
+  primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  primaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
+  primaryButtonText: index["default"].string,
+  secondaryButtonDisabled: index["default"].bool,
+  secondaryButtonHref: index["default"].string,
+  secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
+  secondaryButtonText: index["default"].string,
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
    */
-  slug: index$1["default"].oneOfType([index$1["default"].node, index$1["default"].bool]),
-  title: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].object, index$1["default"].node]),
-  titleSize: index$1["default"].oneOf(['default', 'large'])
+  slug: index["default"].oneOfType([index["default"].node, index["default"].bool]),
+  title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  titleSize: index["default"].oneOf(['default', 'large'])
 };
 CardHeader.displayName = componentName;
 

package/lib/components/Carousel/Carousel.js

@@ -11,15 +11,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/prop-types/index.js');
 var CarouselItem = require('./CarouselItem.js');
-var index = require('../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 
@@ -260,11 +261,11 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     tabIndex: -1,
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     ref: carouselRef,
     role: "main"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__elements-container"))
+    className: cx__default["default"]("".concat(blockClass, "__elements-container"))
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__elements"),
     ref: scrollRef
@@ -296,16 +297,16 @@ Carousel.propTypes = {
   /**
    * Provide the contents of the Carousel.
    */
-  children: index$1["default"].node.isRequired,
+  children: index["default"].node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Disables the ability of the Carousel to scroll
    * use a keyboard's left and right arrow keys.
    */
-  disableArrowScroll: index$1["default"].bool,
+  disableArrowScroll: index["default"].bool,
   /**
    * Enables the edges of the component to have faded styling.
    *
@@ -313,21 +314,21 @@ Carousel.propTypes = {
    *
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
-  fadedEdgeColor: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].shape({
-    left: index$1["default"].string,
-    right: index$1["default"].string
+  fadedEdgeColor: index["default"].oneOfType([index["default"].string, index["default"].shape({
+    left: index["default"].string,
+    right: index["default"].string
   })]),
   /**
    * An optional callback function that returns `true`
    * when the carousel has enough content to be scrollable,
    * and `false` when there is not enough content.
    */
-  onChangeIsScrollable: index$1["default"].func,
+  onChangeIsScrollable: index["default"].func,
   /**
    * An optional callback function that returns the scroll position as
    * a value between 0 and 1.
    */
-  onScroll: index$1["default"].func
+  onScroll: index["default"].func
 };
 
 exports.Carousel = Carousel;

package/lib/components/Carousel/CarouselItem.js

@@ -11,14 +11,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className"];
 
@@ -37,7 +38,7 @@ var CarouselItem = /*#__PURE__*/React__default["default"].forwardRef(function (_
     className = _ref.className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: index["default"](blockClass, className)
+    className: cx__default["default"](blockClass, className)
   }, devtools.getDevtoolsProps(componentName), {
     ref: ref
   }), children);
@@ -50,11 +51,11 @@ CarouselItem.propTypes = {
   /**
    * Provide the contents of the CarouselItem.
    */
-  children: index$1["default"].node.isRequired,
+  children: index["default"].node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string
+  className: index["default"].string
 };
 
 exports.CarouselItem = CarouselItem;

package/lib/components/Cascade/Cascade.js

@@ -12,14 +12,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
-var index = require('../../node_modules/classnames/index.js');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../node_modules/prop-types/index.js');
 var settings = require('../../settings.js');
 var devtools = require('../../global/js/utils/devtools.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "grid"];
 var blockClass = "".concat(settings.pkg.prefix, "--cascade");
@@ -44,11 +45,11 @@ exports.Cascade = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     grid = _ref$grid === void 0 ? defaults.grid : _ref$grid,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName));
   var modifyChildren = function modifyChildren(child) {
-    var className = index["default"](child.props.className, "".concat(blockClass, "__element"));
+    var className = cx__default["default"](child.props.className, "".concat(blockClass, "__element"));
     return /*#__PURE__*/React__default["default"].cloneElement(child, {
       className: className
     });
@@ -64,7 +65,7 @@ exports.Cascade = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       if ( /*#__PURE__*/React__default["default"].isValidElement(row)) {
         var cols = React__default["default"].Children.map(row === null || row === void 0 ? void 0 : row.props.children, function (col) {
           colIdx = colIdx + 1;
-          var colClassnames = index["default"](col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
+          var colClassnames = cx__default["default"](col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
           return /*#__PURE__*/React__default["default"].cloneElement(col, {
             className: colClassnames
           });
@@ -85,15 +86,15 @@ exports.Cascade.propTypes = {
   /**
    * Main content that is shown.
    */
-  children: index$1["default"].node,
+  children: index["default"].node,
   /**
    * Optional class name.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Specifies whether or not to wrap the child content in a `<Grid />`.
    * If this is set to true it's important that the children are being wrapped in rows in columns.
    * Check the documentation for additional clarification.
    */
-  grid: index$1["default"].bool
+  grid: index["default"].bool
 };

package/lib/components/Checklist/Checklist.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var settings = require('../../settings.js');
@@ -24,6 +24,7 @@ var ChecklistChart = require('./ChecklistChart.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "showToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
 
@@ -122,7 +123,7 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, [open]);
   return /*#__PURE__*/React__default["default"].createElement("aside", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-label": checklistAriaLabel,
-    className: index["default"](blockClass,
+    className: cx__default["default"](blockClass,
     // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
@@ -153,45 +154,45 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
     size: "sm"
   }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronUp, {
     size: 16,
-    className: index["default"]("".concat(blockClass, "__chevron"))
+    className: cx__default["default"]("".concat(blockClass, "__chevron"))
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     id: listContainerId,
     className: "".concat(blockClass, "__content-outer")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content-inner")
   }, /*#__PURE__*/React__default["default"].createElement("section", {
-    className: index["default"]("".concat(blockClass, "__body"))
-  }, taskLists.map(function (list, index$1) {
+    className: cx__default["default"]("".concat(blockClass, "__body"))
+  }, taskLists.map(function (list, index) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(blockClass, "__list-group"),
-      key: "".concat(list.title, "-").concat(index$1)
+      key: "".concat(list.title, "-").concat(index)
     }, list.title && /*#__PURE__*/React__default["default"].createElement("h3", {
       title: list.title,
       className: "".concat(blockClass, "__list-title")
     }, list.title), /*#__PURE__*/React__default["default"].createElement("ol", {
       className: "".concat(blockClass, "__list")
-    }, list.tasks.map(function (item, index$1) {
+    }, list.tasks.map(function (item, index) {
       return /*#__PURE__*/React__default["default"].createElement("li", {
         className: "".concat(blockClass, "__list-item"),
-        key: "".concat(item.label, "-").concat(index$1)
+        key: "".concat(item.label, "-").concat(index)
       }, /*#__PURE__*/React__default["default"].createElement(ChecklistIcon.ChecklistIcon, {
         kind: item.kind
       }), typeof item.onClick === 'function' ? /*#__PURE__*/React__default["default"].createElement(react.Button, {
-        className: index["default"]("".concat(blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__button--error"), item.kind === 'error')),
+        className: cx__default["default"]("".concat(blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__button--error"), item.kind === 'error')),
         onClick: function onClick() {
           item.onClick(item);
         },
         size: "sm",
         title: item.label
       }, /*#__PURE__*/React__default["default"].createElement("div", null, item.label)) : /*#__PURE__*/React__default["default"].createElement("div", {
-        className: index["default"]("".concat(blockClass, "__label"), "".concat(blockClass, "__label--").concat(item.kind)),
+        className: cx__default["default"]("".concat(blockClass, "__label"), "".concat(blockClass, "__label--").concat(item.kind)),
         title: item.label
       }, item.label));
     })));
   })), viewAllLabel && /*#__PURE__*/React__default["default"].createElement("footer", {
     className: "".concat(blockClass, "__footer")
   }, /*#__PURE__*/React__default["default"].createElement(react.Button, {
-    className: index["default"]("".concat(blockClass, "__button"), "".concat(blockClass, "__view-all")),
+    className: cx__default["default"]("".concat(blockClass, "__button"), "".concat(blockClass, "__view-all")),
     onClick: handleClickViewAll,
     size: "sm"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, viewAllLabel))))));
@@ -208,42 +209,42 @@ exports.Checklist.propTypes = {
   /**
    * Define both `chartLabel` and `chartValue` to show the chart and its label together.
    */
-  chartLabel: index$1["default"].string,
+  chartLabel: index["default"].string,
   /**
    * A number between 0 and 1.
    *
    * Define both `chartLabel` and `chartValue` to show the chart and its label together.
    */
-  chartValue: index$1["default"].number,
+  chartValue: index["default"].number,
   /**
    * Aria-label for the Checklist component.
    */
-  checklistAriaLabel: index$1["default"].string,
+  checklistAriaLabel: index["default"].string,
   /**
    * Aria-label for the Checklist's toggle component.
    */
-  checklistToggleAriaLabel: index$1["default"].string,
+  checklistToggleAriaLabel: index["default"].string,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Callback for the "View all" button. See also `viewAllLabel`.
    */
-  onClickViewAll: index$1["default"].func,
+  onClickViewAll: index["default"].func,
   /**
    * Optional callback for when the list is opened/closed.
    */
-  onToggle: index$1["default"].func,
+  onToggle: index["default"].func,
   /**
    * Specifies whether the component is opened or closed.
    * This can be set during initialization, or changed after being rendered.
    */
-  open: index$1["default"].bool,
+  open: index["default"].bool,
   /**
    * Whether or not to show the open/close toggle.
    */
-  showToggle: index$1["default"].bool,
+  showToggle: index["default"].bool,
   /**
    * The task list can be broken down into sub-lists.
    *
@@ -255,32 +256,32 @@ exports.Checklist.propTypes = {
    * then the `label` will be rendered as a button,
    * else the `label` will be rendered as plain text.
    */
-  taskLists: index$1["default"].arrayOf(index$1["default"].shape({
-    title: index$1["default"].string,
-    tasks: index$1["default"].arrayOf(index$1["default"].shape({
-      kind: index$1["default"].oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']).isRequired,
-      label: index$1["default"].string.isRequired,
-      onClick: index$1["default"].func
+  taskLists: index["default"].arrayOf(index["default"].shape({
+    title: index["default"].string,
+    tasks: index["default"].arrayOf(index["default"].shape({
+      kind: index["default"].oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']).isRequired,
+      label: index["default"].string.isRequired,
+      onClick: index["default"].func
     })).isRequired
   })).isRequired,
   /**
    * Determines the theme of the component.
    */
-  theme: index$1["default"].oneOf(['light', 'dark']),
+  theme: index["default"].oneOf(['light', 'dark']),
   /**
    * The title of the component.
    */
-  title: index$1["default"].string,
+  title: index["default"].string,
   /**
    * The label for the toggle's tooltip.
    */
-  toggleLabel: index$1["default"].string,
+  toggleLabel: index["default"].string,
   /**
    * The alignment of the toggle's tooltip.
    */
-  toggleLabelAlign: index$1["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  toggleLabelAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * If defined, will show and enable the "View all (#)" button at the bottom of the list.
    */
-  viewAllLabel: index$1["default"].string
+  viewAllLabel: index["default"].string
 };